@font-face{font-family:'InterVariable';font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/InterVariable.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url(../fonts/JetBrainsMono-Variable.woff2) format('woff2');}
:root{
  --theme-hue:60; --theme-chroma:0.01;
  --c-page-below: oklch(15% var(--theme-chroma) var(--theme-hue));
  --c-page:       oklch(21% var(--theme-chroma) var(--theme-hue));
  --c-page-above: oklch(25% var(--theme-chroma) var(--theme-hue));
  --c-tile:       oklch(24% var(--theme-chroma) var(--theme-hue));
  --c-text-emphasis: oklch(91% var(--theme-chroma) var(--theme-hue));
  --c-text:       oklch(77% var(--theme-chroma) var(--theme-hue));
  --c-text-muted: oklch(57% var(--theme-chroma) var(--theme-hue));
  --c-cta:        oklch(56% 0.21 259);
  --c-cta-hover:  oklch(66% 0.20 259);
  --c-cta-text:   oklch(72% 0.16 259);
  --c-cta-stripe: oklch(30% 0.06 259);
  --c-page-stripe:oklch(25% var(--theme-chroma) var(--theme-hue));
  --c-input-frame: oklch(46% var(--theme-chroma) var(--theme-hue));
  --c-input-frame-hover: oklch(78% var(--theme-chroma) var(--theme-hue));
  --c-progress:   oklch(64% 0.02 60);
  --c-thumb:      oklch(80% 0.02 60);
  --c-thumb-hover:oklch(90% 0.02 60);
  --c-btn:        oklch(30% var(--theme-chroma) var(--theme-hue));
  --c-btn-hover:  oklch(43% var(--theme-chroma) var(--theme-hue));
  --c-danger:     oklch(56% 0.20 30);
  --c-danger-text:oklch(78% 0.14 30);
  --travel:1.5px;
  /* legacy aliases still referenced inline / in JS */
  --bg: var(--c-page-below); --fg: var(--c-text); --dim: var(--c-text-muted);
  --line: oklch(34% var(--theme-chroma) var(--theme-hue));
  --accent: var(--c-cta-text); --warm: oklch(74% 0.14 62);
  --font-sans:'InterVariable',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--c-page-below);color:var(--c-text);
  font-family:var(--font-sans);font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
#wrap{display:flex;gap:22px;padding:22px;align-items:flex-start;flex-wrap:wrap;justify-content:center;}

/* --- page-load entrance: h1 types in word by word; canvas and tools slide in
   staggered while de-blurring, each element's delay set via --d from app.js --- */
#stage,#panel>*{opacity:0;animation:enter-in 950ms cubic-bezier(.22,.6,.25,1) both;
  animation-delay:var(--d,0ms);}
#stage{animation-duration:1200ms;}
@keyframes enter-in{from{opacity:0;transform:translateY(18px);filter:blur(16px);}
  to{opacity:1;transform:none;filter:blur(0);}}
#panel>h1{animation:none;opacity:1;}
h1 .w{display:inline-block;opacity:0;animation:word-in 700ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay:var(--d,0ms);}
@keyframes word-in{from{opacity:0;transform:translateY(.4em);filter:blur(10px);}
  to{opacity:1;transform:none;filter:blur(0);}}
@media(prefers-reduced-motion:reduce){
  #stage,#panel>*,h1 .w{animation:none;opacity:1;}
}
#stage{flex:1 1 480px;min-width:0;aspect-ratio:1/1;max-width:calc(100vh - 44px);
  position:sticky;top:22px;align-self:flex-start;}
#stage canvas{display:block;background:#000;image-rendering:pixelated;width:100%;height:100%;
  border:1px solid var(--line);border-radius:12px;touch-action:none;cursor:grab;}
#stage canvas.dragging{cursor:grabbing;}
#canvasDrop{position:absolute;inset:0;}
#canvasDrop.hidden{display:none;}
#canvasDrop .dropzone{position:absolute;inset:0;margin:0;border-radius:12px;
  outline-offset:-1px;gap:8px;font-size:14px;}
.dz-hint{color:var(--c-text-muted);font-size:12px;line-height:1.55;margin:8px 2px 2px;}
#panel{width:344px;flex:0 0 344px;}
h1{font-family:var(--font-sans);font-size:21px;font-weight:700;letter-spacing:-.02em;
  color:var(--c-text-emphasis);margin:0 0 5px;text-transform:none;}
/* Moth mark riding the title — sized to the cap height, baseline-tucked */
h1 .mark{height:.86em;width:auto;display:inline-block;vertical-align:-.08em;
  margin-right:.42em;}
.sub{color:var(--c-text-muted);font-size:12px;margin:0 0 14px;}
.grp{border-top:1px solid var(--line);padding-top:15px;margin-top:15px;}
.ttl{color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;
  font-weight:600;margin-bottom:11px;display:flex;justify-content:space-between;}
.row{margin:0 0 13px;}
.row label{display:flex;justify-content:space-between;align-items:baseline;
  color:var(--c-text);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:5px;}
.row .val{color:var(--c-text-emphasis);font-family:var(--font-mono);font-size:11px;font-weight:500;}
.btns{display:flex;gap:10px;}
.two{display:flex;gap:10px;}.two>*{flex:1;}
button{width:100%;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:12px;
  color:var(--c-text-emphasis);background:var(--c-btn);border:none;border-radius:9px;padding:8px 12px;
  transition:background-color 180ms cubic-bezier(0,0,.2,1),transform 90ms;}
button:hover{background:var(--c-btn-hover);color:#fff;}
button:active{transform:translateY(var(--travel));}
button:focus-visible{outline:3px solid var(--c-cta);outline-offset:3px;}
button.on{background:var(--c-cta);color:#fff;}
button.on:hover{background:var(--c-cta-hover);}
select{width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;
  font-family:var(--font-sans);font-size:12px;color:var(--c-text);background-color:var(--c-page);
  border:none;border-radius:9px;outline:1px solid var(--c-input-frame);padding:7px 26px 7px 11px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c8c82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:outline-color 180ms,color 180ms;}
select:hover{outline-color:var(--c-input-frame-hover);}
select:focus{outline:3px solid var(--c-cta);outline-offset:-1px;color:var(--c-text-emphasis);}
optgroup{font-family:var(--font-sans);color:var(--c-text-muted);background:var(--c-page);}
option{color:var(--c-text);background:var(--c-page);}
input[type=range]{--fill:0%;-webkit-appearance:none;appearance:none;width:100%;background:transparent;
  cursor:ew-resize;height:12px;padding:0;margin:3px 0;border:none;}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:3px;
  background:linear-gradient(to right,var(--c-progress) var(--fill),var(--c-page-below) var(--fill));}
input[type=range]::-moz-range-track{height:10px;border-radius:3px;
  background:linear-gradient(to right,var(--c-progress) var(--fill),var(--c-page-below) var(--fill));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:3px;
  background:var(--c-thumb);margin-top:-1px;transition:background-color 180ms;}
input[type=range]::-moz-range-thumb{border:none;width:12px;height:12px;border-radius:3px;background:var(--c-thumb);}
input[type=range]:hover::-webkit-slider-thumb{background:var(--c-thumb-hover);}
input[type=range]:hover::-moz-range-thumb{background:var(--c-thumb-hover);}
input[type=range]:focus-visible{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--c-cta);outline-offset:3px;background:var(--c-thumb-hover);}
#layers .layer{background:var(--c-tile);border-radius:11px;padding:13px;margin-bottom:11px;}
.layer .lhead{display:flex;gap:8px;align-items:center;margin-bottom:11px;}
.layer .lhead .tag{font-family:var(--font-mono);font-size:12px;color:var(--c-text-muted);white-space:nowrap;}
.layer .lhead select{flex:1;}
.layer .lhead button:not(.iconbtn){width:30px;flex:0 0 30px;padding:6px 0;background:transparent;
  outline:1px solid var(--c-danger);color:var(--c-danger-text);border-radius:9px;}
.layer .lhead button:not(.iconbtn):hover{background:var(--c-danger);color:#fff;}
.fps{color:var(--c-text-muted);font-family:var(--font-mono);font-size:10px;margin-top:11px;}
details{margin-top:12px;}
#panel>details{border-top:1px solid var(--line);padding-top:13px;}
.layer details{margin-top:6px;}
summary{cursor:pointer;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.08em;
  font-size:10px;font-weight:600;list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"▸ ";}
details[open]>summary::before{content:"▾ ";}
details p{color:var(--c-text-muted);font-size:12px;line-height:1.55;margin:8px 0 0;}
code{font-family:var(--font-mono);color:var(--c-cta-text);font-size:.92em;}
@supports(corner-shape:superellipse(1.5)){
  button,select,#layers .layer,#stage canvas{corner-shape:superellipse(1.5);border-radius:calc(1.4*9px);}
  #stage canvas{border-radius:calc(1.2*12px);}
  #layers .layer{border-radius:calc(1.3*11px);}
}
.layer .lhead button.iconbtn,.iconbtn{width:30px;flex:0 0 30px;padding:6px 0;background:transparent;border:none;
  outline:1px solid var(--c-cta);color:var(--c-cta-text);border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color 180ms,color 180ms;}
.layer .lhead button.iconbtn:hover,.iconbtn:hover{background:var(--c-cta);color:#fff;}
.iconbtn:focus-visible{outline:3px solid var(--c-cta);outline-offset:2px;}
.iconbtn svg{display:block;}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px;background:oklch(0% 0 0 / .62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.modal.hidden{display:none;}
.modalcard{position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--c-page-above);color:var(--c-text);border:1px solid var(--line);
  border-radius:14px;padding:26px 28px 30px;box-shadow:0 24px 70px oklch(0% 0 0 /.55);}
.modalcard h2{font-family:var(--font-sans);font-size:19px;font-weight:700;color:var(--c-text-emphasis);
  margin:0 0 14px;letter-spacing:-.02em;}
.modalbody p{margin:0 0 12px;font-size:13px;line-height:1.62;color:var(--c-text);}
.modalbody p.k{color:var(--c-text-muted);font-size:12px;line-height:1.55;}
.modalbody code{font-family:var(--font-mono);color:var(--c-cta-text);font-size:.9em;}
.modalx{position:absolute;top:14px;right:14px;width:30px;padding:5px 0;background:transparent;border:none;
  outline:1px solid var(--line);color:var(--c-text-muted);border-radius:9px;cursor:pointer;
  font-family:var(--font-sans);font-size:16px;line-height:1;transition:background-color 180ms,color 180ms;}
.modalx:hover{background:var(--c-btn-hover);color:#fff;}
@supports(corner-shape:superellipse(1.5)){
  .modalcard{corner-shape:superellipse(1.5);border-radius:calc(1.3*14px);}
  .iconbtn,.modalx{corner-shape:superellipse(1.5);}
}
.dropzone{--sw:26px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:158px;padding:22px 18px;margin:2px 0 4px;text-align:center;cursor:pointer;user-select:none;
  color:var(--c-text);font-family:var(--font-sans);font-size:13px;
  border-radius:11px;outline:1px dashed var(--c-input-frame);outline-offset:-1px;
  background-image:repeating-linear-gradient(-45deg,var(--c-page) 0,var(--c-page) calc(var(--sw)/2),
    var(--c-page-stripe) calc(var(--sw)/2),var(--c-page-stripe) var(--sw));
  background-size:calc(var(--sw)*1.414) calc(var(--sw)*1.414);
  animation:dropzone-crawl 6s linear infinite;transition:outline-color 400ms;}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.dropzone .dz-cloud{color:var(--c-cta-text);pointer-events:none;}
.dropzone .dz-prompt{font-weight:600;pointer-events:none;}
.dropzone .dz-or{color:var(--c-text-muted);font-size:11px;pointer-events:none;}
.dropzone .dz-browse{pointer-events:none;display:inline-block;padding:5px 14px;border-radius:8px;
  outline:1px solid var(--c-cta);color:var(--c-cta-text);font-weight:600;font-size:12px;transition:background-color 180ms,color 180ms;}
.dropzone .dz-con{color:var(--c-text-muted);font-size:11px;pointer-events:none;margin-top:2px;}
.dropzone:hover,.dropzone:focus-within,.dropzone.dragging-over{outline:1px dashed var(--c-cta);--c-page-stripe:var(--c-cta-stripe);}
.dropzone:hover .dz-browse,.dropzone.dragging-over .dz-browse{background:var(--c-cta);color:#fff;}
@supports(corner-shape:superellipse(1.5)){.dropzone{corner-shape:superellipse(1.5);border-radius:calc(1.3*11px);}
  #canvasDrop .dropzone{border-radius:calc(1.2*12px);}}
@keyframes dropzone-crawl{to{background-position:calc(26px*1.414) 0;}}