/* Tattoo Font Generator — stencil-paper look. Bevan for display, Source Sans 3 for everything else.
   One accent: thermal stencil purple. Skin swatches only appear inside the preview. */
:root{
  --paper:#fbfaf8;--paper-2:#f1eeea;--ink:#17120f;--ink-2:#443c36;--muted:#766d66;
  --violet:#5e3fa6;--violet-2:#4a2f8a;--violet-soft:#ece6f7;--violet-line:#c9bde6;
  --line:#d9d3cb;--card:#ffffff;
  --ok:#1f6b45;--err:#a3271f;
  --display:"Bevan",Georgia,serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --skin-1:#f7e7d8;--skin-2:#eccfb3;--skin-3:#d9ab86;--skin-4:#b27a55;--skin-5:#7f4f33;--skin-6:#4a2d1f;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#15121a;--paper-2:#1e1a25;--ink:#f2ede6;--ink-2:#cfc7bd;--muted:#978e85;
  --violet:#b39df0;--violet-2:#c9b8f7;--violet-soft:#2a2140;--violet-line:#4b3d73;
  --line:#352f3e;--card:#1e1a25}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--violet);text-decoration-thickness:1.5px;text-underline-offset:3px}a:hover{color:var(--violet-2)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
img,svg,canvas{max-width:100%}

header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:64px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.brand{font:400 20px/1 var(--display);text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.brand svg{width:26px;height:26px}
nav.main{display:flex;gap:4px 18px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--ink-2);font-size:16px}nav.main a:hover{color:var(--violet)}

main{padding:34px 0 60px}
h1{font:400 clamp(30px,5.6vw,58px)/1.05 var(--display);letter-spacing:-.01em;margin:0 0 14px;max-width:18ch;overflow-wrap:anywhere}
h2{font:400 clamp(23px,3vw,30px)/1.15 var(--display);margin:48px 0 12px}
h3{font:600 19px/1.3 var(--sans);margin:22px 0 6px}
p{margin:0 0 14px}
p.lead{font-size:19px;color:var(--ink-2);margin:0 0 26px;max-width:58ch}
main > p,main > ul,main > ol,main > details,.note,.table-wrap{max-width:70ch}
ul,ol{padding-left:22px}li{margin-bottom:6px}

/* the tool */
.tool{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px}
.tool-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
@media (max-width:720px){.tool-top{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.hint{font-weight:400;color:var(--muted);font-size:14px}
textarea,input[type=text],input[type=number],select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
textarea.bigin{min-height:72px;font-size:26px;line-height:1.25;resize:vertical;font-family:var(--sans);font-weight:600}
.size-ctl{display:flex;gap:8px;align-items:center}
.size-ctl input[type=number]{width:92px;text-align:right}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{padding:10px 14px;border:0;background:var(--paper);color:var(--ink-2);font:inherit;font-size:15px;cursor:pointer;min-height:44px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-weight:600;cursor:pointer;min-height:44px}
.btn:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.secondary{background:transparent;color:var(--ink)}.btn.secondary:hover{background:var(--violet-soft);border-color:var(--violet);color:var(--ink)}
.btn.small{padding:6px 12px;min-height:34px;font-size:14px;font-weight:600}
.btn[disabled]{opacity:.5;cursor:progress}

/* flash sheet */
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.sheet-head h2{margin:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--violet-soft);border-color:var(--violet);color:var(--ink)}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.swatch{background:var(--card);padding:14px 16px 12px;text-align:left;border:0;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:120px;position:relative;min-width:0;overflow:hidden}
.swatch:hover{background:var(--paper-2)}
.swatch[aria-pressed=true]{background:var(--violet-soft);box-shadow:inset 0 0 0 2px var(--violet)}
.swatch .sample{font-size:38px;line-height:1.15;word-break:break-word;min-height:1.2em;white-space:pre-wrap;overflow:hidden}
.swatch .meta{display:flex;flex-direction:column;gap:1px;font-size:13.5px;color:var(--muted);margin-top:auto;min-width:0}
.swatch .meta b{font-weight:600;color:var(--ink-2);font-size:14.5px}
.swatch.hidden{display:none}

/* preview */
.preview{margin-top:26px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.preview-bar{display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.preview-bar .name{font:400 20px/1.2 var(--display)}
.tones{display:inline-flex;gap:6px;align-items:center}
.tones button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.tones button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--card)}
.stage{position:relative;min-height:260px;display:flex;align-items:center;justify-content:center;padding:40px 24px 54px;background:var(--skin-2);transition:background .2s}
.stage .ink{min-width:0;font-size:72px;line-height:1.1;text-align:center;white-space:pre-wrap;word-break:break-word;color:#17120f;max-width:100%}
.stage[data-ink=black] .ink{color:#1a1512;opacity:.92;filter:blur(.15px)}
.stage[data-ink=stencil] .ink{color:#5e3fa6;opacity:.85}
.stage[data-ink=healed] .ink{color:#2a2430;opacity:.78;filter:blur(.4px)}
.stage.mirror .ink{transform:scaleX(-1)}
.ruler{position:absolute;left:24px;right:24px;bottom:16px;height:22px;font-size:12px;color:#17120f;opacity:.7;font-family:var(--mono)}
.ruler .bar{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;height:0;border-top:1.5px solid currentColor}
.ruler .bar::before,.ruler .bar::after{content:"";position:absolute;top:-5px;width:1.5px;height:10px;background:currentColor}
.ruler .bar::before{left:0}.ruler .bar::after{right:0}
.ruler .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;white-space:nowrap}
.preview-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);align-items:center}
.preview-actions .status{font-size:14px;color:var(--muted);margin-left:auto}
.preview-actions .status.err{color:var(--err)}.preview-actions .status.ok{color:var(--ok)}
.calib{padding:0 16px 16px;font-size:15px;color:var(--ink-2)}
.calib summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--ink)}
.card-outline{width:323px;max-width:100%;aspect-ratio:85.6/53.98;border:2px dashed var(--violet);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:14px;margin:8px 0;transform-origin:left top}
input[type=range]{width:min(100%,340px);accent-color:var(--violet)}

/* content */
.note{border-left:3px solid var(--violet);background:var(--violet-soft);padding:12px 16px;border-radius:0 4px 4px 0;margin:18px 0;font-size:15.5px}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--ink-2)}
.table-wrap{overflow-x:auto}
details{border-top:1px solid var(--line);padding:12px 0;margin:0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:18px}
details p{margin:10px 0 0;color:var(--ink-2)}
.toc{margin:28px 0 8px;font-size:15px;color:var(--muted)}
.toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}.toc a:hover{border-bottom-color:var(--violet);color:var(--violet)}
.toc ol{display:inline;margin:0;padding:0;list-style:none}.toc li{display:inline}.toc li+li::before{content:"·";margin:0 8px;color:var(--muted)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:none}
.related a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--card);text-decoration:none;color:var(--ink)}
.related a:hover{border-color:var(--violet)}
.related a strong{display:block;font:400 20px/1.2 var(--display);margin-bottom:6px}
.related a span{color:var(--muted);font-size:15px}
.maker{max-width:70ch;margin:56px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.maker p{margin:0 0 8px}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:10px}.breadcrumb a{color:var(--muted)}
footer.site{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--muted);font-size:14.5px;margin-top:40px}
footer.site .wrap{display:flex;gap:8px 18px;flex-wrap:wrap}
footer.site a{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.95em}
.hidden{display:none!important}

/* cost calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
@media (max-width:720px){.calc{grid-template-columns:1fr}}
.calc .full{grid-column:1/-1}
.result{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.result .big{font:400 clamp(30px,4.6vw,44px)/1.1 var(--display);color:var(--violet)}
.result .sub{color:var(--ink-2);margin-top:6px}
.breakdown{margin-top:14px;font-size:15.5px}
.breakdown div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.breakdown div span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

/* print: only the stencil sheet, at true size */
#print-sheet{display:none}
@media print{
  @page{margin:12mm}
  body *{visibility:hidden}
  #print-sheet,#print-sheet *{visibility:visible}
  #print-sheet{display:block;position:absolute;left:0;top:0;width:100%}
  #print-sheet .word{white-space:pre;color:#000;line-height:1.1}
  #print-sheet .word.mirror{transform:scaleX(-1);display:inline-block}
  #print-sheet .scale{margin-top:14mm;font:10pt/1.4 var(--sans);color:#000}
  #print-sheet .inch{width:25.4mm;height:0;border-top:1px solid #000;position:relative;margin-top:4mm}
  #print-sheet .inch::before,#print-sheet .inch::after{content:"";position:absolute;top:-3mm;width:1px;height:6mm;background:#000}
  #print-sheet .inch::before{left:0}#print-sheet .inch::after{right:0}
}