:root{
  --bg:#0d1014; --panel:#151a21; --panel2:#1b222b; --line:#f8803061;
  --ink:#e8edf3; --ink2:#9aa7b5; --ink3:#66727f;
  --hover:#20272f; --edge:#3c4a5a; --scroll:#2f3a46; --check:#20262e;
  --nav:#070a0d; --nav-ink:#e8edf3; --nav-ink2:#7d8996; --nav-line:#1c242c; --nav-btn:#141a21;
  --warn:#e8a33d; --err:#e05a5a;
  --accent:#ff6a00; --accent-dim:#ff6a0022; --on-accent:#150c04; --accent-ink:var(--accent-ink);
  /* Section headings and drawer labels: the same orange in both themes, on purpose. */
  --sec-ink:#fe6600;
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f2f4f8; --line:#f8803061;
  --ink:#161b22; --ink2:#4d5865; --ink3:#8792a1;
  --hover:#eaeef4; --edge:#b8c2ce; --scroll:#c8d0da; --check:#e3e7ee;
  /* the bar stays black in both themes \u2014 it is brand furniture, not surface */
  --nav:#070a0d; --nav-ink:#e8edf3; --nav-ink2:#7d8996; --nav-line:#1c242c; --nav-btn:#141a21;
  --warn:#a86a12; --err:#c0392b;
  --accent:#e85d00; --accent-dim:#e85d0018; --on-accent:#ffffff; --accent-ink:#a83f00;
  --sec-ink:#fe6600;
}
*{box-sizing:border-box}
html,body{height:100%}
/* The page itself never scrolls. The stage and the control panel are independent
   scroll regions, so opening Fine-tune or Output can never push the preview away. */
body{margin:0;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden}
/* The bar is deliberately darker than the working surface in both themes: it
   frames the app, and it keeps the logo legible on a light page. */
header{flex:0 0 auto;padding:14px 24px;border-bottom:1px solid var(--nav-line);
  background:var(--nav);color:var(--nav-ink);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header #brandlogo{height:70px;width:auto;display:block;margin:5px}
header .brand{display:flex;flex-direction:column;gap:1px;margin-right:6px}
header h1{font-size:16px;margin:0;letter-spacing:.02em;line-height:1.1;color:var(--nav-ink)}
header .brand p{margin:0;font-size:11px;color:var(--nav-ink2)}
header .brand a{color:var(--accent);text-decoration:none}
header .brand a:hover{text-decoration:underline}
.tbtn{background:var(--nav-btn);border:1px solid var(--nav-line);color:var(--nav-ink2);border-radius:8px;
  width:30px;height:30px;font-size:15px;line-height:1;cursor:pointer;padding:0}
.tbtn:hover{color:#ff6a00;border-color:#3a3a3a}
#tour{position:fixed;inset:0;z-index:80}
#tourhole{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.62);
  border:2px solid var(--accent);transition:all .26s cubic-bezier(.4,0,.2,1);pointer-events:none}
#tourtip{position:absolute;width:294px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;box-shadow:0 16px 40px rgba(0,0,0,.42);
  transition:top .26s cubic-bezier(.4,0,.2,1),left .26s cubic-bezier(.4,0,.2,1)}
#tourtip .step{margin:0 0 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
#tourtip h3{margin:0 0 7px;font-size:14.5px;color:var(--ink);font-weight:600}
#tourtip p#tourp{margin:0 0 13px;font-size:12.5px;line-height:1.6;color:var(--ink2)}
.tour-row{display:flex;gap:7px;align-items:center}
.tour-row button{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);
  border-radius:7px;padding:7px 13px;font:inherit;font-size:12px;cursor:pointer}
.tour-row button:hover{color:var(--ink);border-color:var(--edge)}
.tour-row button:disabled{opacity:.4;cursor:default}
.tour-row .next{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.tour-row .skip{border-color:transparent;color:var(--ink3);padding-left:0}
.ask{position:fixed;right:20px;bottom:20px;width:290px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;box-shadow:0 12px 34px rgba(0,0,0,.34);z-index:50;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s ease}
.ask.show{opacity:1;transform:none;pointer-events:auto}
.ask p{margin:0 0 11px;font-size:12.5px;color:var(--ink2);line-height:1.55}
.ask p b{color:var(--ink);font-weight:600}
.ask-row{display:flex;gap:7px}
.ask-row button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--ink2);
  border-radius:7px;padding:7px 6px;font:inherit;font-size:12px;cursor:pointer}
.ask-row button:hover{color:var(--ink);border-color:var(--edge)}
.ask-row .dismiss{flex:1.3;color:var(--ink3)}
header .tag{font-size:11px;color:var(--nav-ink2);border:1px solid var(--nav-line);padding:2px 8px;border-radius:99px}
.wrap{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 372px;gap:0}
.stage{padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;overflow:hidden}
/* flex:1 makes the viewer take the leftover height; overflow:auto lets you pan a
   zoomed-in image instead of clipping it. */
.canvas-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;min-height:200px;flex:1 1 auto;
  position:relative;overflow:auto;overscroll-behavior:contain}
.canvas-box.checker{background-image:
  linear-gradient(45deg,var(--check) 25%,transparent 25%),linear-gradient(-45deg,var(--check) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,var(--check) 75%),linear-gradient(-45deg,transparent 75%,var(--check) 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.canvas-box.light{background:#f2f4f7;background-image:none}
.canvas-box.dark{background:#0d1014;background-image:none}
canvas#preview{max-width:100%;max-height:100%;height:auto;width:auto;display:block;
  border-radius:4px;image-rendering:auto}
canvas#preview.zoomed{max-width:none;max-height:none}
.side{background:var(--panel);border-left:1px solid var(--line);padding:20px;display:flex;
  flex-direction:column;gap:18px;overflow-y:auto;min-height:0}
.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--sec-ink);
  font-weight:700;margin:0 0 10px}
#psearch{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px;margin-bottom:7px}
#psearch::placeholder{color:var(--ink3)}
#psearch:focus{outline:none;border-color:var(--accent)}
.pcats{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.pcats button{border:1px solid var(--line);background:var(--panel2);color:var(--ink3);
  border-radius:99px;padding:3px 9px;font:inherit;font-size:11px;cursor:pointer}
.pcats button:hover{color:var(--ink)}
.pcats button[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-ink)}
.plist{border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  max-height:290px;overflow-y:auto;overscroll-behavior:contain}
.plist::-webkit-scrollbar{width:8px}
.plist::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
.pg{position:relative}
.pgroup{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  padding:10px 12px 4px;background:var(--panel2)}
.pg + .pg .pgroup{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.chip{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;border:0;
  background:none;color:var(--ink2);padding:6px 12px;font:inherit;font-size:12.5px;
  cursor:pointer;border-left:2px solid transparent;transition:.1s}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip b{font-weight:500;white-space:nowrap}
.chip i{font-style:normal;font-size:11px;color:var(--ink3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--accent-dim);border-left-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed=true] i{color:var(--accent-ink);opacity:.75}
details{border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
details>summary{cursor:pointer;padding:11px 14px;font-size:12px;letter-spacing:.04em;color:var(--sec-ink);
  font-weight:700;text-transform:uppercase;list-style:none;user-select:none}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"＋";float:right;color:var(--ink3)}
details[open]>summary::after{content:"−"}
.details-body{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.ctl label b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);height:18px}
input[type=color]{width:100%;height:30px;border:1px solid var(--line);border-radius:6px;background:none;padding:2px;cursor:pointer}
select,input[type=number]{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:7px 9px;font:inherit;font-size:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dirs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:1px 0 3px}
.dirs button{background:var(--panel);border:1px solid var(--line);color:var(--ink2);
  border-radius:6px;padding:5px 0;font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:.1s}
.dirs button:hover{color:var(--ink);border-color:var(--edge)}
.dirs button[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-ink)}
.btn{border:0;border-radius:9px;padding:11px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;width:100%}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);font-weight:400}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:16px;text-align:center;color:var(--ink3);
  font-size:12.5px;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--ink2);background:var(--accent-dim)}
.out{font-size:12px;color:var(--ink2);border-top:1px solid var(--line);padding-top:12px;display:none}
.out.show{display:block}
.out table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.out td{padding:4px 0}
.out td:last-child{text-align:right;color:var(--ink)}
.out a{color:var(--accent);text-decoration:none;font-weight:600}
.savecopy{display:none;margin:8px 0 2px;font-size:12px;line-height:1.5}
.savecopy.show{display:block}
.savecopy a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.savecopy a:hover{text-decoration:underline}
.bar{height:3px;background:var(--panel2);border-radius:2px;overflow:hidden;display:none}
.bar.show{display:block}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .1s}
.note{font-size:11.5px;color:var(--ink3);line-height:1.5}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
.warnbar{flex:0 0 auto;margin:0;padding:10px 13px;border:1px solid var(--warn);border-radius:9px;
  background:var(--accent-dim);color:var(--warn);font-size:12.5px;line-height:1.55}
.warnbar code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.seg,.zoom,.tool{height:30px}
.seg button,.zoom button,.zoom span,.tool{
  font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.tool{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);
  border-radius:8px;padding:0 13px;font-family:inherit;cursor:pointer}
.tool:hover{background:var(--hover);color:var(--ink)}
.zoom{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.zoom button{background:var(--panel2);border:0;color:var(--ink2);padding:0 10px;font-family:inherit;
  cursor:pointer;min-width:30px;height:100%}
.zoom button:hover{background:var(--hover);color:var(--ink)}
.zoom button:disabled{opacity:.35;cursor:default;background:var(--panel2)}
.zoom span{padding:0 8px;color:var(--ink);min-width:52px;text-align:center;height:100%;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.zoom button.fit[aria-pressed=true]{background:var(--accent-dim);color:var(--accent-ink)}
#cvwrap{position:relative;margin:auto;flex:0 0 auto;line-height:0;max-width:100%;max-height:100%}
#cropui{position:absolute;inset:0;cursor:crosshair;background:rgba(0,0,0,.45)}
#croprect{position:absolute;border:1px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  display:none;pointer-events:none}
#croprect::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,transparent 33%,rgba(255,255,255,.28) 33%,rgba(255,255,255,.28) 33.4%,transparent 33.4%,transparent 66%,rgba(255,255,255,.28) 66%,rgba(255,255,255,.28) 66.4%,transparent 66.4%),
             linear-gradient(to bottom,transparent 33%,rgba(255,255,255,.28) 33%,rgba(255,255,255,.28) 33.4%,transparent 33.4%,transparent 66%,rgba(255,255,255,.28) 66%,rgba(255,255,255,.28) 66.4%,transparent 66.4%)}
.pbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pbtns button{background:var(--panel);border:1px solid var(--line);color:var(--ink2);border-radius:7px;
  padding:7px 0;font:inherit;font-size:13px;cursor:pointer;line-height:1}
.pbtns button:hover{color:var(--ink);border-color:var(--edge)}
.pbtns button[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-ink)}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg3 button{background:var(--panel);border:0;color:var(--ink2);padding:7px 0;font:inherit;font-size:12px;cursor:pointer}
.seg3 button+button{border-left:1px solid var(--line)}
.seg3 button[aria-pressed=true]{background:var(--accent-dim);color:var(--accent-ink)}
.loc{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--panel);
  font-size:12px;color:var(--ink2);line-height:1.5;word-break:break-word}
.loc b{color:var(--ink);font-weight:600}
.logtbl{width:100%;border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.logtbl td{padding:3px 0;color:var(--ink3);border-bottom:1px solid var(--line)}
.logtbl td:first-child{color:var(--ink2);word-break:break-all;padding-right:8px}
.logtbl td:last-child{text-align:right;white-space:nowrap}
.eyed{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);border-radius:7px;
  padding:7px 10px;font:inherit;font-size:12px;cursor:pointer;width:100%}
.eyed[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel2);border:0;color:var(--ink3);padding:0 12px;font-family:inherit;cursor:pointer;height:100%}
.seg button[aria-pressed=true]{background:var(--accent-dim);color:var(--accent-ink)}
.hint{font-size:11.5px;color:var(--ink3);margin-top:-6px}
#presetnote{margin:9px 2px 0;line-height:1.5}
.sec-title span{float:right;text-transform:none;letter-spacing:0;color:var(--ink3);
  font-weight:400;font-size:10.5px}
@media(max-width:900px){
  /* one column: the page scrolls again, but the viewer stays stuck to the top so it
     is still on screen while you work through the controls underneath */
  body{overflow:auto;display:block}
  .wrap{display:block}
  .stage{overflow:visible;position:sticky;top:0;z-index:5;background:var(--bg);
    border-bottom:1px solid var(--line);padding:14px 16px}
  .canvas-box{max-height:42vh;min-height:150px}
  .stage .note{display:none}
  .side{overflow:visible;border-left:0}
}