[hidden]{display:none!important}
:root{
  --bg:#0f1012; --win:#1b1c1f; --panel:#202124; --panel2:#26272b; --line:#323338; --line2:#3d3e44;
  --canvas:#141518; --text:#e6e6e8; --dim:#9a9ba2; --mute:#6c6d75;
  --laser:#ff5b1f; --laser2:#ff8a4c; --ok:#3ddc84; --warn:#ffb020; --bad:#ff5468; --sel:#4cc2ff;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --sans:"IBM Plex Sans",system-ui,sans-serif; --head:"Space Grotesk","IBM Plex Sans",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;font:15px/1.55 var(--sans);color:var(--text);background:
  radial-gradient(1200px 500px at 70% -10%,rgba(255,91,31,.10),transparent 60%),
  radial-gradient(900px 400px at 0% 0%,rgba(76,194,255,.06),transparent 60%),var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}

/* site header */
.top{height:56px;display:flex;align-items:center}
.top .wrap{display:flex;align-items:center;gap:24px;width:100%}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 var(--head);letter-spacing:-.01em}
.brand b{color:var(--laser);font-weight:700}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{text-decoration:none;color:var(--dim);font-size:14px;padding:7px 12px;border-radius:7px}
.top nav a:hover{color:var(--text);background:var(--panel)}
.top nav a[aria-current]{color:var(--text);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}

/* intro strip */
.intro{display:flex;align-items:flex-end;gap:32px;padding:6px 0 16px}
.intro h1{margin:0;font:700 34px/1.05 var(--head);letter-spacing:-.025em;white-space:nowrap}
.intro h1 span{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--laser);margin-bottom:9px}
.intro p{margin:0;color:var(--dim);max-width:640px;font-size:14.5px}
.trust{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
.trust span{font:500 11.5px/1 var(--mono);color:var(--dim);border:1px solid var(--line);background:var(--win);padding:7px 10px;border-radius:999px;display:flex;align-items:center;gap:6px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* app window */
.app{background:var(--win);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.6)}
.titlebar{height:34px;display:flex;align-items:center;padding:0 12px;background:linear-gradient(#26272b,#212225);border-bottom:1px solid #111;position:relative;user-select:none}
.dots{display:flex;gap:8px}
.dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.fname{position:absolute;left:50%;transform:translateX(-50%);font:500 12.5px/1 var(--mono);color:var(--dim);display:flex;gap:8px;align-items:center;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.fname b{color:var(--text);font-weight:500}
.fname em{font-style:normal;color:var(--mute)}
.tb-right{margin-left:auto;font:500 11px/1 var(--mono);color:var(--mute)}

.toolbar{height:44px;display:flex;align-items:center;gap:2px;padding:0 8px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}
.tbtn{text-decoration:none;height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--dim);font:500 12.5px/1 var(--sans);cursor:pointer;white-space:nowrap}
.tbtn svg{width:17px;height:17px;flex-shrink:0}
.tbtn:hover:not(:disabled){background:var(--panel2);color:var(--text)}
.tbtn:disabled{opacity:.38;cursor:default}
.tbtn.hot{color:#fff;background:var(--laser)}
.tbtn.hot:hover:not(:disabled){background:var(--laser2)}
.sep{width:1px;height:20px;background:var(--line);margin:0 6px;flex-shrink:0}
.tb-label{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:0 6px 0 4px}
.toolbar .grow{flex:1}

/* tool grid: sidebar | center | inspector */
.tool{--stage-h:clamp(440px,calc(100vh - 262px),780px);display:grid;grid-template-columns:232px minmax(0,1fr) 304px;grid-template-rows:var(--stage-h);position:relative}
.side,.insp,.report{background:var(--panel);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.side{grid-column:1;grid-row:1;border-right:1px solid var(--line)}
.insp,.report{grid-column:3;grid-row:1;border-left:1px solid var(--line)}
.drop,.stage,.status,.actions{grid-column:2;grid-row:1}
.workspace{display:none}
.tool.loaded .workspace{display:contents}
.tool.loaded .drop,.tool.loaded .insp{display:none}

.ph{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 14px;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);background:#1d1e21;position:sticky;top:0;z-index:1}
.ph small{font:500 10.5px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--mute)}
.checks{list-style:none;margin:0;padding:6px 0}
.checks li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--dim)}
.checks li svg{width:16px;height:16px;color:var(--mute)}
.checks li i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.checks li.ok i{background:var(--ok);box-shadow:0 0 8px rgba(61,220,132,.6)}
.checks li.warn i{background:var(--warn);box-shadow:0 0 8px rgba(255,176,32,.6)}
.checks li.ok,.checks li.warn,.checks li.info{color:var(--text)}
.checks li.info i{background:var(--sel)}
.layers{padding:8px 0}
.layer{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:6px 14px;font:12px/1.2 var(--mono);color:var(--mute)}
.layer i{width:12px;height:12px;border-radius:3px;border:1px solid var(--line2)}
.side .note{margin:4px 14px 14px;font-size:12px;color:var(--mute);line-height:1.5}
.machines{padding:10px 14px 16px;display:flex;flex-wrap:wrap;gap:6px}
.machines span{font:500 11px/1 var(--mono);color:var(--dim);padding:5px 7px;border:1px solid var(--line);border-radius:5px}

/* drop zone = empty canvas, showing the demo part */
.drop{position:relative;display:block;cursor:pointer;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) -1px -1px/100px 100px,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) -1px -1px/100px 100px,
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) -1px -1px/20px 20px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) -1px -1px/20px 20px,
    var(--canvas);overflow:hidden}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
:is(.drop,.gen-stage)::before,:is(.drop,.gen-stage)::after{content:"";position:absolute;pointer-events:none;z-index:1}
:is(.drop,.gen-stage)::before{left:0;right:0;top:0;height:18px;border-bottom:1px solid var(--line);background:
  repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 10px) 0 100%/100% 5px no-repeat,
  repeating-linear-gradient(90deg,var(--mute) 0 1px,transparent 1px 100px) 0 100%/100% 10px no-repeat,#1a1b1e}
:is(.drop,.gen-stage)::after{left:0;top:18px;bottom:0;width:18px;border-right:1px solid var(--line);background:
  repeating-linear-gradient(var(--line2) 0 1px,transparent 1px 10px) 100% 0/5px 100% no-repeat,
  repeating-linear-gradient(var(--mute) 0 1px,transparent 1px 100px) 100% 0/10px 100% no-repeat,#1a1b1e}
.axes{position:absolute;left:34px;bottom:118px;width:52px;height:52px;pointer-events:none;opacity:.8}

/* demo: the sample part, traced and checked */
.demo-chip{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;
  background:rgba(32,33,36,.92);border:1px solid var(--line2);font:500 12px/1 var(--mono);color:var(--dim);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.demo-chip>i{font:700 9.5px/1 var(--mono);letter-spacing:.1em;font-style:normal;color:var(--laser2);padding:3px 5px;border-radius:4px;background:rgba(255,91,31,.14);box-shadow:inset 0 0 0 1px rgba(255,91,31,.4)}
.demo-chip .t2 b{color:#ffd1d7;font-weight:600}
.demo-chip .t1{display:none}
.play .demo-chip:not(.on) .t1{display:inline}
.play .demo-chip:not(.on) .t2{display:none}
.t1::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--laser);box-shadow:0 0 8px var(--laser);vertical-align:1px;animation:blink .7s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}

.figwrap{position:absolute;inset:64px 22px 112px 40px;container-type:size;display:grid;place-items:center;pointer-events:none}
.fig{position:relative;display:block;width:min(100cqw,100cqh*196/106);aspect-ratio:196/106}
.part{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.part .pc{fill:none;stroke-linecap:round;stroke-linejoin:round}
.part .mk path,.part .mk circle,.part .mk rect,.part .dims path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.part .pc{stroke:#dcdde2;stroke-width:.42}
.part .txt{fill:#dcdde2;font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.part .trail{fill:none;stroke:var(--laser2);stroke-width:.9;stroke-linecap:round;stroke-dasharray:0 2;opacity:0}
.part .dot{fill:#fff;opacity:0}
.part .dot-glow{fill:var(--laser);opacity:0}
.play .part .dot,.play .part .trail{opacity:1}
.play .part .dot-glow{opacity:.9}
.part.done .dot,.part.done .dot-glow,.part.done .trail{opacity:0;transition:opacity .4s}
.part .dims path{stroke:rgba(76,194,255,.55);stroke-width:1}
.part .dims .tick{fill:rgba(76,194,255,.7);stroke:none}
.part .lead{stroke-width:1!important;stroke-dasharray:3 3}
.mk-gap circle{stroke:var(--bad);stroke-width:2}
.mk-gap .pulse{stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.mk-gap .lead{stroke:var(--bad)}
.mk-dup path{stroke:var(--warn);stroke-width:2}
.mk-dup .halo{stroke-width:7;opacity:.28}
.mk-dup .lead{stroke:var(--warn)}
.mk-txt rect{stroke:var(--sel);stroke-width:1.2;stroke-dasharray:4 3;fill:rgba(76,194,255,.06)!important}
.mk-txt .lead{stroke:var(--sel)}

.lbl{position:absolute;display:flex;flex-direction:column;gap:3px;padding:6px 9px;border-radius:6px;white-space:nowrap;font:600 12.5px/1 var(--mono);background:rgba(24,25,28,.94);border:1px solid;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.lbl small{font:400 11px/1 var(--sans);color:var(--dim)}
.lbl.l{transform:translate(0,-50%)}.lbl.r{transform:translate(-100%,-50%)}.lbl.c{transform:translate(-50%,0)}
.lbl.bad{color:#ff8a98;border-color:rgba(255,84,104,.55)}
.lbl.warn{color:var(--warn);border-color:rgba(255,176,32,.5)}
.lbl.info{color:#8fd8ff;border-color:rgba(76,194,255,.5)}
.dlbl{position:absolute;transform:translate(-50%,-50%);padding:2px 5px;border-radius:3px;background:var(--canvas);font:500 11px/1 var(--mono);color:#8fd8ff}
.dlbl.v{transform:translate(-50%,-50%) rotate(-90deg)}

/* timeline: with .play every [data-at] waits for .on */
.play [data-at]{transition:opacity .35s,transform .35s}
.play .part [data-at]:not(.on),.play .dlbl:not(.on){opacity:0}
.play .lbl:not(.on){opacity:0;margin-top:6px}
.lbl{transition:opacity .35s,margin .35s}

.cta{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 16px;width:max-content;max-width:calc(100% - 56px);
  border-radius:12px;background:rgba(30,31,34,.95);border:1px solid rgba(255,91,31,.45);box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 0 4px rgba(255,91,31,.06);backdrop-filter:blur(8px);cursor:pointer}
.cta-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(255,91,31,.12);color:var(--laser);box-shadow:inset 0 0 0 1px rgba(255,91,31,.35)}
.cta-t{display:flex;flex-direction:column;gap:4px;text-align:left}
.cta-t strong{font:600 17px/1.15 var(--head);letter-spacing:-.01em}
.cta-t small{color:var(--mute);font-size:12px}
.cta-b{display:flex;gap:8px;margin-left:8px}
.drop:hover .cta{border-color:var(--laser)}
.drop .cta .btn{height:40px;padding:0 18px;font-size:13.5px}

/* a file dragged anywhere over the tool */
.tool::after{content:"Drop to open";display:none;grid-column:2;grid-row:1;z-index:8;margin:10px;pointer-events:none;place-items:center;
  border:2px dashed var(--laser);border-radius:10px;background:rgba(30,20,16,.88);color:#fff;font:600 24px/1 var(--head);letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.tool.dragging::after{display:grid}

/* demo inspector */
.insp{display:flex;flex-direction:column}
.insp .ph i{font:700 9.5px/1 var(--mono);letter-spacing:.1em;font-style:normal;color:var(--laser2)}
.insp .verdict .t1{display:none}
.play .insp .verdict:not(.on){color:var(--dim);background:var(--panel2);border-color:var(--line2)}
.play .insp .verdict:not(.on)::before{background:var(--laser);box-shadow:0 0 10px var(--laser);animation:blink .7s steps(2) infinite}
.play .insp .verdict:not(.on) .t1{display:inline}
.play .insp .verdict:not(.on) .t2{display:none}
.insp ul{list-style:none;margin:6px 0 0;padding:0}
.play .insp li:not(.on){opacity:.28}
.play .insp li:not(.on) b{visibility:hidden}
.insp .demo-note{margin:auto 14px 14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--mute)}
.insp .demo-note b{color:var(--dim);font-weight:500}
.statusbar .cut b{color:var(--laser2);min-width:56px}
.statusbar .demo-tag{color:var(--laser2)}
.app:has(.tool.loaded) .demo-only{display:none}
.fname .demo-tag{font:700 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--laser2);padding:3px 5px;border-radius:4px;background:rgba(255,91,31,.14);box-shadow:inset 0 0 0 1px rgba(255,91,31,.4)}
@media (prefers-reduced-motion:reduce){.mk-gap .pulse,.t1::after{animation:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:7px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:#55565e;background:#2d2e33}
.btn.primary{background:var(--laser);border-color:var(--laser);color:#fff;box-shadow:0 6px 20px -6px rgba(255,91,31,.7)}
.btn.primary:hover{background:var(--laser2);border-color:var(--laser2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.06)}
.drop .btn{height:42px;padding:0 22px;font-size:14px}

/* loaded */
.stage{position:relative;overflow:hidden;background:var(--canvas);height:var(--stage-h)}
.stage canvas{display:block;width:100%;height:100%}
.status{align-self:start;justify-self:center;z-index:3;margin:14px;padding:8px 14px;border-radius:7px;background:rgba(32,33,36,.94);border:1px solid var(--line2);font:500 12.5px/1.4 var(--mono);color:var(--dim);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.status.bad{color:#ffd1d7;border-color:rgba(255,84,104,.6);background:rgba(60,18,26,.95)}
.actions{align-self:end;justify-self:center;z-index:3;margin:0 14px 16px;display:flex;gap:4px;padding:5px;border-radius:11px;background:rgba(30,31,34,.92);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(8px);max-width:calc(100% - 28px);overflow-x:auto;scrollbar-width:none}
.actions:empty{display:none}
.actions .btn{height:32px;padding:0 12px;font-size:12.5px}
.actions .btn:not(.primary):not(.ghost){background:transparent;border-color:transparent}
.actions .btn:not(.primary):not(.ghost):hover{background:var(--panel2)}

.insp .empty{padding:18px 16px;color:var(--dim);font-size:13px}
.insp .empty h3{margin:0 0 6px;font:600 15px/1.3 var(--head);color:var(--text)}
.props{margin:0;padding:6px 0;border-top:1px solid var(--line)}
.props div{display:flex;justify-content:space-between;padding:7px 16px;font:12px/1.3 var(--mono)}
.props dt{color:var(--mute)}.props dd{margin:0;color:var(--dim)}

.report{display:flex;flex-direction:column}
.report::before{content:"Inspector";display:flex;align-items:center;height:32px;padding:0 14px;flex-shrink:0;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);background:#1d1e21}
.verdict{margin:14px 14px 6px;padding:12px 14px 12px 40px;border-radius:8px;font:600 15px/1.3 var(--head);position:relative;background:var(--panel2);border:1px solid var(--line2)}
.verdict:empty{display:none}
.verdict::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%}
.verdict.ok{color:#c9f7dc;background:rgba(61,220,132,.09);border-color:rgba(61,220,132,.4)}
.verdict.ok::before{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.verdict.warn{color:#ffe2a8;background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.4)}
.verdict.warn::before{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.report ul{list-style:none;margin:6px 0 0;padding:0}
:is(.report,.insp) li{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:10px 14px 10px 26px;border-bottom:1px solid rgba(255,255,255,.045);position:relative}
:is(.report,.insp) li::before{content:"";position:absolute;left:13px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--sel);opacity:.8}
:is(.report,.insp) li.ok::before{background:var(--ok)}
:is(.report,.insp) li.warn::before{background:var(--warn)}
:is(.report,.insp) li span{font-size:13px;color:var(--dim)}
:is(.report,.insp) li b{font:600 13px/1.4 var(--mono);text-align:right;color:var(--text)}
:is(.report,.insp) li.warn b{color:var(--warn)}
:is(.report,.insp) li small{grid-column:1/-1;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--mute)}
:is(.report,.insp) li.warn small{color:#c9a565}
.report>label{margin:auto 14px 14px;padding-top:14px;display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--dim);border-top:1px solid var(--line)}
.speed{width:70px;height:30px;padding:0 8px;border-radius:6px;border:1px solid var(--line2);background:var(--canvas);color:var(--text);font:500 13px/1 var(--mono)}
.speed:focus{outline:none;border-color:var(--laser)}

/* status bar */
.statusbar{height:28px;display:flex;align-items:center;gap:0;background:#18191c;border-top:1px solid var(--line);font:500 11px/1 var(--mono);color:var(--mute);overflow:hidden;white-space:nowrap}
.statusbar>span{padding:0 12px;height:100%;display:flex;align-items:center;gap:6px;border-right:1px solid var(--line)}
.statusbar .live{color:var(--ok)}
.statusbar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.statusbar .r{margin-left:auto;border-right:0;border-left:1px solid var(--line)}
.statusbar b{color:var(--dim);font-weight:500}

/* content below */
main.below{padding-top:72px;padding-bottom:40px}
.sect-h{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.sect-h h2{margin:0;font:700 28px/1.15 var(--head);letter-spacing:-.02em}
.sect-h span{font:500 11px/1 var(--mono);color:var(--laser);letter-spacing:.12em;text-transform:uppercase}
.finds{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:80px}
.finds div{background:var(--win);padding:20px 18px 22px}
.finds svg{width:100%;height:74px;display:block;margin-bottom:14px;background:var(--canvas);border-radius:6px;border:1px solid var(--line)}
.finds h3{margin:0 0 5px;font:600 15px/1.25 var(--head)}
.finds p{margin:0;font-size:13px;color:var(--dim);line-height:1.5}
.steps{list-style:none;margin:0 0 80px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{counter-increment:s;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--win);position:relative}
.steps li::before{content:"0" counter(s);display:block;font:700 12px/1 var(--mono);color:var(--laser);margin-bottom:16px;letter-spacing:.06em}
.steps h3{margin:0 0 6px;font:600 17px/1.25 var(--head)}
.steps p{margin:0;color:var(--dim);font-size:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-bottom:80px}
.prose h2{margin:0 0 14px;font:700 26px/1.2 var(--head);letter-spacing:-.02em}
.prose p{margin:0 0 14px;color:#c4c5cb;font-size:15.5px;line-height:1.65}
.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}
.kit a{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--win);text-decoration:none;transition:border-color .15s,background .15s}
.kit a:hover{border-color:rgba(255,91,31,.55);background:#211d1b}
.kit i{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--panel2);color:var(--laser2);font:700 10px/1 var(--mono);font-style:normal;flex-shrink:0;border:1px solid var(--line2)}
.kit b{display:block;font:600 14px/1.2 var(--head)}
.kit span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:600 16px/1.35 var(--head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:15px;font:400 22px/1 var(--mono);color:var(--laser)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--dim);max-width:720px}

footer{border-top:1px solid var(--line);margin-top:40px;padding:44px 0 36px;background:#0c0d0f}
.cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.cols h4{margin:0 0 12px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cols a{display:block;text-decoration:none;color:var(--dim);font-size:14px;padding:3px 0}
.cols a:hover{color:var(--laser2)}
.cols p{color:var(--mute);font-size:13px;margin:12px 0 0;max-width:300px}
.fine{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--line);font:12px/1.5 var(--mono);color:var(--mute)}
.fine a{color:var(--dim)}

@media (max-width:1180px){
  .tool{grid-template-columns:minmax(0,1fr) 290px}
  .side{display:none}
  .drop,.stage,.status,.actions{grid-column:1}
  .insp,.report{grid-column:2}
  .trust{display:none}
  .finds{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .wrap{padding:0 12px}
  .top nav a{padding:6px 8px;font-size:13px}
  .top nav a:nth-child(n+3){display:none}
  .intro{display:block;padding:4px 2px 14px}
  .intro h1{font-size:28px;margin-bottom:8px}
  .intro p{font-size:14px}
  .tool{--stage-h:min(62vh,480px);grid-template-columns:minmax(0,1fr);grid-template-rows:var(--stage-h) auto}
  .drop,.stage,.status,.actions{grid-column:1;grid-row:1}
  .insp,.report{grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  .insp{display:none}
  .actions{grid-row:3;justify-self:stretch;margin:0;border-radius:0;border-width:1px 0 0;flex-wrap:wrap;box-shadow:none;max-width:none;padding:10px}
  .actions .btn{flex:1 1 auto}
  .axes{display:none}
  .demo-chip{top:28px;font-size:11px;padding:6px 10px 6px 8px}
  .figwrap{inset:58px 10px 136px 26px}
  .part .pc{stroke-width:.7}
  .lbl{padding:4px 6px;font-size:10.5px}
  .lbl small{display:none}
  .lbl.l{transform:translate(-50%,-150%)}
  .dlbl{font-size:9.5px;padding:1px 3px}
  .cta{left:10px;right:10px;bottom:10px;transform:none;width:auto;max-width:none;flex-wrap:wrap;gap:10px 12px;padding:12px}
  .cta-ico{width:34px;height:34px}
  .cta-t strong{font-size:16px}
  .cta-t small{font-size:11.5px}
  .cta-b{margin:0;width:100%}
  .drop .cta .btn{flex:1;height:40px;padding:0 10px;font-size:13px}
  .fname em,.tb-right,.tb-label,.toolbar .sep:nth-of-type(n+2),.hide-m{display:none}
  .statusbar .r{display:none}
  .app{border-radius:10px}
  main.below{padding-top:48px}
  .finds{grid-template-columns:1fr 1fr}
  .finds div:last-child{grid-column:1/-1}
  .sect-h{flex-direction:column;align-items:flex-start;gap:8px}
  .sect-h h2{font-size:24px}
  .steps,.split,.kit{grid-template-columns:1fr}
  .split{gap:32px}
  .cols{grid-template-columns:1fr 1fr}
}

/* ---- shared by the converter, generator and 404 windows ---- */
.tbtn.pick:not(.hot){color:var(--laser2);box-shadow:inset 0 0 0 1px rgba(255,91,31,.45)}
.tbtn.pick:not(.hot):disabled{opacity:.6}
.tb-label.hide{display:none}

/* sidebar forms: converter options and generator sizes */
.side form{margin:0;padding:6px 0 4px}
.fld{display:grid;gap:6px;padding:9px 14px;font:500 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.fld input:not([type=checkbox]):not([type=range]),.fld select{width:100%;height:32px;padding:0 9px;border-radius:6px;border:1px solid var(--line2);background:var(--canvas);color:var(--text);font:500 13px/1 var(--mono);letter-spacing:0;text-transform:none}
.fld select{appearance:none;padding-right:26px;background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9ba2' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--laser)}
.fld input[type=range]{width:100%;margin:4px 0 0;accent-color:var(--laser)}
.fld small{font:400 11.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--mute)}
.fld.check{display:flex;align-items:center;gap:9px;font:400 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim);cursor:pointer}
.fld.check input{width:16px;height:16px;margin:0;accent-color:var(--laser)}
.fld-row{display:grid;grid-template-columns:1fr 1fr}
.fld-row .fld:first-child{padding-right:5px}.fld-row .fld:last-child{padding-left:5px}
.side .btn.wide{display:flex;width:calc(100% - 28px);margin:8px 14px 12px}
.side .note b{color:var(--dim);font-weight:500}

/* converter: empty canvas shows what the conversion does */
.cv-wrap{position:absolute;inset:44px 30px 118px 44px;container-type:size;display:grid;place-items:center;pointer-events:none}
.cv{width:min(100cqw,100cqh*560/232);aspect-ratio:560/232;display:block;overflow:visible}
.cv .src{fill:#4a4b52;stroke:#6c6d75;stroke-width:1;shape-rendering:crispEdges}
.cv .src-line{fill:none;stroke:#c9cad0;stroke-width:2}
.cv .hdl{stroke:rgba(76,194,255,.7);stroke-width:1;fill:none}
.cv .hdl-p{fill:var(--canvas);stroke:var(--sel);stroke-width:1.5}
.cv .anc{fill:var(--canvas);stroke:#e6e6e8;stroke-width:1.5}
.cv .out{fill:none;stroke:var(--laser);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,91,31,.45))}
.cv .nodes{fill:var(--canvas);stroke:var(--laser2);stroke-width:1.3}
.cv .arr{fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cv text{font:500 12px var(--mono);fill:var(--mute)}
.cv text.hl{fill:var(--laser2)}
.cv .arr-t{font-size:10.5px;letter-spacing:.12em}
.insp .gets{margin:0}
.side .note.dxf-note{display:none}
.side:has(.options[hidden]) .dxf-note{display:block}

/* generators: the preview on the canvas, sizes in the inspector */
.gen-stage{grid-column:2;grid-row:1;position:relative;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) -1px -1px/100px 100px,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) -1px -1px/100px 100px,
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) -1px -1px/20px 20px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) -1px -1px/20px 20px,
    var(--canvas)}
.pv{position:absolute;inset:66px 36px 36px;display:block}
.pv svg{display:block;width:100%;height:100%;overflow:visible}
.pv svg g{stroke:var(--laser2)!important}
.pv svg path,.pv svg circle{stroke-width:1.6px;vector-effect:non-scaling-stroke;fill:rgba(255,91,31,.05)}
.pv svg g{filter:drop-shadow(0 0 4px rgba(255,91,31,.35))}
.gen-stage .demo-chip b{color:var(--text);font-weight:600}
.gen-stage .form-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 40px));margin:0;padding:16px 18px 16px 44px;border-radius:9px;
  background:rgba(60,18,26,.95);border:1px solid rgba(255,84,104,.6);color:#ffd1d7;font:500 14px/1.45 var(--sans)}
.gen-stage .form-error::before{content:"!";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:50%;background:var(--bad);color:#fff;font:700 12px/18px var(--mono);text-align:center}
.gen-info{width:100%;border-collapse:collapse;margin:4px 0 0}
.gen-info td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.045);font-size:13px;color:var(--dim);vertical-align:top}
.gen-info td+td{font:600 13px/1.4 var(--mono);color:var(--text);text-align:right}
.gen-dl{display:grid;gap:8px;padding:14px}
.gen-dl .btn{height:40px}
.insp .empty p{margin:0}

/* hub: every tool under the window */
.hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.hubgrid i{width:46px}

/* 404 */
.nf{grid-column:1/-1;display:grid;place-items:center;text-align:center;padding:40px 20px}
.nf .code{font:700 72px/1 var(--mono);color:var(--laser);letter-spacing:-.04em;text-shadow:0 0 30px rgba(255,91,31,.35)}
.nf h1{margin:12px 0 8px;font:700 28px/1.15 var(--head);letter-spacing:-.02em}
.nf p{margin:0 0 20px;color:var(--dim)}
.nf .links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* windows with a form on the left keep it at every width */
@media (max-width:1180px){
  .tool.opts{grid-template-columns:220px minmax(0,1fr) 260px}
  .tool.opts .side{display:block}
  .tool.opts :is(.drop,.stage,.status,.actions,.gen-stage){grid-column:2}
  .tool.opts :is(.insp,.report){grid-column:3}
  .hubgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .tool.opts{grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--stage-h) auto auto}
  .tool.opts .side{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .tool.opts .side .ph{position:static}
  .tool.opts :is(.drop,.stage,.status,.gen-stage){grid-column:1;grid-row:2}
  .tool.opts .report{grid-column:1;grid-row:3}
  .tool.opts .actions{grid-column:1;grid-row:4}
  .tool.opts::after{grid-column:1;grid-row:2}
  .tool.opts .insp{display:none}
  .tool.opts .insp.gen-insp{display:flex;grid-column:1;grid-row:3;border-left:0;border-top:1px solid var(--line)}
  .side form{display:grid;grid-template-columns:1fr 1fr}
  .side form .fld{padding:7px 12px}
  .side form :is(.fld[data-raster]:has(input[type=range]),.btn.wide){grid-column:1/-1}
  .side .note,.side .ph small,.tool.opts .side :is(.machines,.ph:not(:first-child)){display:none}
  .fld-row{display:contents}
  .fld-row .fld:first-child,.fld-row .fld:last-child{padding:7px 12px}
  .cv-wrap{inset:40px 16px 150px 30px}
  .pv{inset:58px 14px 18px 26px}
  .gen-stage{height:var(--stage-h)}
  .hubgrid{grid-template-columns:1fr}
  .nf .code{font-size:56px}
}
.split.solo{grid-template-columns:minmax(0,860px)}
.nf-app{margin-top:24px}
.nf-app .tool{grid-template-columns:1fr;grid-template-rows:auto;min-height:420px;background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) -1px -1px/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) -1px -1px/40px 40px,var(--canvas)}