:root{--paper:#f6f5f1;--panel:#fff;--ink:#141414;--mute:#66645e;--line:#dcdad2;--line2:#c4c1b6;--accent:#e4410f;--accent-ink:#fff;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);overflow-x:hidden}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto;padding:14px 20px}
.mark{font:700 22px/1 var(--serif);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.mark em{font-style:italic;font-weight:400}
.mark-glyph{width:18px;height:18px;border:2px solid var(--ink);border-radius:50% 50% 50% 0;position:relative;display:inline-block}
.mark-glyph:after{content:"";position:absolute;right:-5px;top:-5px;width:6px;height:6px;background:var(--accent);border-radius:50%}
.pill{font:500 13px/1 var(--mono);text-decoration:none;border:1px solid var(--ink);border-radius:99px;padding:10px 14px;min-height:40px;display:inline-flex;align-items:center}
.pill:hover{background:var(--ink);color:var(--paper)}
main{max-width:1120px;margin:0 auto;padding:0 20px 40px}
.hero{padding:18px 0 22px}
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
h1{font:600 clamp(32px,8.4vw,64px)/1.02 var(--serif);letter-spacing:-.035em;margin:0 0 14px;max-width:16em}
h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.lede{font-size:17px;color:#3b3a36;max-width:40em;margin:0}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.drop{display:block;position:relative;text-align:center;padding:26px 14px;cursor:pointer;border-radius:10px;
  background:
   linear-gradient(var(--ink),var(--ink)) left top/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/2px 14px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right top/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/2px 14px no-repeat,
   linear-gradient(var(--ink),var(--ink)) left bottom/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/2px 14px no-repeat,
   linear-gradient(var(--ink),var(--ink)) right bottom/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/2px 14px no-repeat,#faf9f6}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop.over{background-color:#fff1ea;outline:2px dashed var(--accent)}
.drop-main{display:block;font-size:18px}
.drop-sub{display:block;font:12px/1.4 var(--mono);color:var(--mute);margin-top:6px}
.samples{margin:10px 2px 0;font-size:14px;color:var(--mute)}
.link{background:none;border:0;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;color:var(--ink);min-height:32px}
.link.tiny{font:12px var(--mono);padding:4px 6px}
.notice{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:#fff3ec;font-size:14px;border-radius:0 8px 8px 0}
.notice[hidden]{display:none}
.stage{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.pane{margin:0;min-width:0}
.pane figcaption{display:flex;justify-content:space-between;gap:8px;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.meta{color:var(--mute);text-transform:none;letter-spacing:0;text-align:right}
.view{position:relative;border:1px solid var(--line);border-radius:10px;background:#fafafa;height:min(72vw,300px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.view img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.checker{background:conic-gradient(#f1f0ec 25%,#fff 0 50%,#f1f0ec 0 75%,#fff 0) 0 0/16px 16px}
.busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.72);font:13px var(--mono)}
.busy[hidden]{display:none}
.busy i{width:14px;height:14px;border:2px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.panel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:10px;overflow:hidden}
.seg button{background:transparent;border:0;padding:12px 8px;min-height:44px;cursor:pointer;font-weight:500}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.badge{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:#b5300a;color:var(--accent-ink);padding:3px 5px;border-radius:4px;margin-left:4px;vertical-align:2px}
body.pro .badge{display:none}
.ctl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px}
.ctl[hidden]{display:none}
.ctl label{display:flex;justify-content:space-between;gap:8px;grid-column:1/-1;font:500 13px/1.2 var(--mono)}
.ctl output{color:var(--mute)}
.ctl input[type=range]{grid-column:1/-1;width:100%;margin:0;height:32px;accent-color:var(--ink)}
#ctlThr input[type=range]{grid-column:1}
.checks{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.checks label{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
.checks input{width:18px;height:18px;accent-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:10px;border:1px solid var(--ink);background:transparent;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover:not(:disabled){background:#ecebe5}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover:not(:disabled){background:#333}
.btn:disabled{opacity:.4;cursor:not-allowed}
.trialnote{margin:0;font:12px/1.4 var(--mono);color:var(--mute)}
.notes{display:grid;grid-template-columns:1fr;gap:18px;margin:34px 0 10px}
.notes h2,.full h2{font:600 22px/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 6px}
.notes p{margin:0;color:#3b3a36;font-size:15px}
.full{margin-top:26px}
.full-box{border:1px solid var(--ink);border-radius:14px;padding:20px;background:var(--panel)}
.full-box p{margin:0 0 14px;max-width:40em}
footer{max-width:1120px;margin:0 auto;padding:10px 20px 40px;font:12px/1.5 var(--mono);color:var(--mute)}
@media(min-width:760px){
  .top,main{padding-left:32px;padding-right:32px}.top{padding-top:20px}
  .hero{padding:36px 0 30px}
  .tool{padding:22px}
  .stage{grid-template-columns:1fr 1fr;gap:16px}
  .view{height:min(36vw,440px)}
  .panel{grid-template-columns:1fr 1fr;gap:16px 28px}
  .seg,.checks,.actions,.trialnote{grid-column:1/-1}
  .seg{max-width:380px}
  .notes{grid-template-columns:repeat(3,1fr);gap:32px}
}
@media(prefers-reduced-motion:reduce){.busy i{animation:none}}
[hidden]{display:none!important}

.madeby{max-width:1120px;margin:0 auto;padding:10px 20px 10px;font:12px/1.5 var(--mono);color:var(--mute)}
.faq{max-width:1120px;margin:0 auto;padding:10px 20px 30px}.faq h2{font-size:1.1rem}.faq summary{cursor:pointer;font-weight:600;padding:6px 0}.faq p{margin:0 0 8px;color:#3b3a36;font-size:15px}