/* ============================================================
   HOTEND HQ — SVG Tracer (extends gridfinity.css layout; theme.css tokens only)
   ============================================================ */
.st-drop{display:grid;justify-items:center;gap:4px;position:relative;cursor:pointer;text-align:center;
  border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:18px 14px;margin:0 0 6px!important;
  background:rgba(0,0,0,.22);color:var(--text-dim);transition:border-color .18s var(--ease),background .18s var(--ease)}
.st-drop:hover,.st-drop.is-over{border-color:var(--amber-300);background:rgba(243,102,46,.08);color:var(--text)}
.st-drop input{position:absolute;opacity:0;width:1px;height:1px}
.st-drop input:focus-visible+svg{outline:2px solid var(--amber-300);outline-offset:4px;border-radius:6px}
.st-drop svg{width:28px;height:28px;color:var(--amber-300)}
.st-drop-main{font-weight:700;font-size:.92rem;color:var(--text);word-break:break-word}
.st-drop-sub{font-size:.76rem;color:var(--text-faint)}
.st-sample{font-size:.8rem;color:var(--text-faint);margin:0 0 14px;text-align:center}
.st-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-mode-hint{margin:-8px 2px 14px}
.st-flat{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(243,102,46,.06)}

/* palette */
.st-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:6px;margin-bottom:10px}
.st-pal .hint{grid-column:1/-1;margin:0}
.st-sw{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 6px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);min-width:0}
.st-sw.is-off{opacity:.45}
.st-sw.is-off .st-chip{background-image:linear-gradient(135deg,transparent 45%,#ff5f56 45%,#ff5f56 55%,transparent 55%)!important}
.st-chip{position:relative;flex:none;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.3);cursor:pointer;overflow:hidden}
.st-chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.st-sw-pct{flex:1;min-width:0;font:600 .68rem/1.45 var(--mono);color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-sw-btn{flex:none;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;
  color:var(--text-faint);cursor:pointer;padding:0}
.st-sw-btn:hover{color:var(--amber-300);background:rgba(255,255,255,.06)}
.st-sw-btn svg{width:14px;height:14px}
.st-sw-bg{font:800 .55rem var(--font);letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase}
.st-pal-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.st-pal-tools .btn svg{width:15px;height:15px}
#st-pick[aria-pressed=true]{border-color:var(--amber-300);color:var(--amber-300);background:rgba(243,102,46,.14)}

/* stage */
.st-stage{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.st-stage.is-panning{cursor:grabbing}
.st-stage.is-picking{cursor:crosshair}
.st-stage[data-bg=check]{background:#fff;background-image:linear-gradient(45deg,#e7ebf0 25%,transparent 25%,transparent 75%,#e7ebf0 75%),
  linear-gradient(45deg,#e7ebf0 25%,transparent 25%,transparent 75%,#e7ebf0 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.st-stage[data-bg=white]{background:#fff}
.st-stage[data-bg=dark]{background:radial-gradient(circle at 50% 35%,#062246,#00060f 72%)}
.st-canvas{position:absolute;inset:0;overflow:hidden}
.st-art{position:absolute;left:0;top:0;transform-origin:0 0}
.st-art img,#st-out{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.st-art img:not([src]){display:none}
#st-out svg,#st-out img,#st-out canvas{width:100%;height:100%;display:block}
.st-art.is-pixels #st-orig,.st-art.is-pixels #st-out canvas{image-rendering:pixelated}
.st-stage[data-view=lines] #st-out path{fill:none!important;stroke:#ff2d75;stroke-width:1px;vector-effect:non-scaling-stroke}
.st-stage[data-view=result] #st-orig,.st-stage[data-view=orig] #st-out{visibility:hidden}
.st-stage[data-view=lines] #st-orig{opacity:.35}
.st-stage.is-busy .st-art{opacity:.6;transition:opacity .2s}
.st-split{position:absolute;top:0;bottom:0;width:0;left:50%;z-index:2;display:none}
.st-stage[data-view=split]:not(.is-empty) .st-split{display:block}
.st-split::before{content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--amber-300);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.st-split-handle{position:absolute;top:50%;left:-17px;width:34px;height:34px;margin-top:-17px;border-radius:50%;cursor:ew-resize;
  background:var(--amber-300);box-shadow:0 2px 10px rgba(0,0,0,.5);display:grid;place-items:center}
.st-split-handle svg{width:18px;height:18px;color:#1a0800}
.st-split::after{content:'Original   |   SVG';position:absolute;top:12px;left:0;transform:translateX(-50%);white-space:pre;
  font:700 .66rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,9,28,.72);padding:4px 8px;border-radius:6px}
.st-empty{position:absolute;inset:0;display:none;place-content:center;justify-items:center;gap:10px;text-align:center;
  color:var(--chrome-400);padding:16px;cursor:default}
.st-empty svg{width:56px;height:56px;margin:0 auto;display:block;color:var(--chrome-300)}
.st-empty p{margin:0;font-size:.95rem;color:#4b5d73}
.st-empty strong{color:#14243b;font-size:1.05rem}
.st-empty-narrow{display:none}
.st-empty-btn{cursor:pointer;padding:11px 20px}
.st-empty-try{font-size:.85rem!important}
.st-empty .gf-link{color:#1d4f91;padding:6px 2px}
.st-stage.is-empty .st-empty{display:grid}
.st-stage.is-empty .st-view,.st-stage.is-empty .st-readout,.st-stage.is-empty .gf-tools{display:none}
.gf-view:has(.st-stage.is-empty) .gf-bar{display:none}
.st-stage.is-over{outline:2px dashed var(--amber-300);outline-offset:-8px}
.st-view{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;padding:3px;gap:2px;border-radius:11px;
  background:rgba(0,9,28,.78);border:1px solid var(--border);backdrop-filter:blur(6px)}
.st-view button{appearance:none;border:0;background:transparent;color:var(--text-dim);font:600 .78rem/1 var(--font);padding:8px 11px;border-radius:8px;cursor:pointer}
.st-view button:hover{color:var(--text)}
.st-view button[aria-pressed=true]{background:linear-gradient(135deg,var(--flame-600),var(--amber-400));color:#1a0800}
.st-readout{background:rgba(0,9,28,.78)}
.st-h3{font-size:1.05rem;margin:0 0 .4em}
.st-page .gf-faq a{color:var(--link)}

@media (max-width:900px){
  .st-view{left:8px;bottom:8px}
  .st-view button{padding:9px 9px;font-size:.74rem}
  .st-readout{display:none}
  .st-split::after{display:none}
  .st-page .gf-tools{right:8px;top:8px;gap:5px}
  .st-page .gf-tool{width:34px;height:34px;border-radius:9px}
  .st-empty-wide{display:none}
  .st-empty-narrow{display:inline}
  .st-empty svg{width:40px;height:40px}
}
@media (min-width:901px){
  .st-page .gf-hero .lede{font-size:1.02rem;max-width:none}
}
/* fingers need bigger targets than a mouse */
@media (pointer:coarse){
  .st-chip{width:32px;height:32px}
  .st-sw-btn{width:32px;height:32px}
  .st-sw{padding:4px 4px 4px 5px}
}
@media (max-width:420px){
  .st-pal{grid-template-columns:1fr 1fr}
}

/* showcase + how-to */
.st-show-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.st-show-grid figure{margin:0}
.st-show-grid img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--border)}
.st-show-grid figcaption{font-size:.82rem;color:var(--text-faint);margin-top:6px;font-weight:600}
.st-steps{margin:10px 0 0;padding-left:1.3em;display:grid;gap:8px;color:var(--text-dim)}
@media (max-width:640px){.st-show-grid{grid-template-columns:1fr}}