:root{
    --void:#03061C; --ink:#DDE9FF; --mute:#7E93C4;
    --line:rgba(53,200,255,.15); --cyan:#35C8FF; --blue:#1560E8;
    --pad:clamp(18px,3.4vw,44px); --gap:clamp(20px,3vw,40px); --panel:330px;
    --stage-max:max(420px,calc(100svh - 300px));
    /* shell hugs stage+panel so the two columns stay adjacent instead of drifting apart */
    --shell:min(1200px,calc(var(--stage-max) + var(--panel) + var(--gap) + var(--pad)*2));
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{background:var(--void);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;
    font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:100}
  body::before{background:radial-gradient(120% 90% at 50% 32%,transparent 40%,rgba(1,2,10,.85) 100%)}
  body::after{opacity:.45;mix-blend-mode:overlay;background-repeat:repeat;background-size:180px 180px}
  a{color:inherit} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

  header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:var(--pad) var(--pad) 0;
    max-width:var(--shell);margin-inline:auto}
  .mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(26px,4.6vw,40px);
    letter-spacing:-.035em;line-height:1;margin:0;
    background:linear-gradient(96deg,#EAFBFF,var(--cyan) 55%,var(--blue));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:var(--mute);font-size:13.5px}

  main{padding:clamp(20px,3.5vw,38px) var(--pad) var(--pad);display:grid;gap:var(--gap);
    grid-template-columns:minmax(0,1fr) var(--panel);align-items:start;
    max-width:var(--shell);margin-inline:auto}
  @media (max-width:900px){main{grid-template-columns:1fr}}

  .left{display:flex;flex-direction:column;gap:14px;width:100%;
    max-width:min(100%,var(--stage-max))}
  .stage{position:relative;aspect-ratio:1;width:100%;border-radius:3px;overflow:hidden;
    background:#050818;box-shadow:0 0 0 1px var(--line),0 30px 90px -40px rgba(21,96,232,.8)}
  .stage canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
  .stage.ready canvas{opacity:1}
  .stage img.orig{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
  /* the original sits above the render, clipped to everything left of the split */
  .stage.ready img.orig{opacity:1;clip-path:inset(0 calc(100% - var(--split,0%)) 0 0)}
  .stage.ready{touch-action:pan-y}   /* horizontal drag is ours, vertical scroll stays the page's */

  .split{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
  .stage.ready .split{opacity:1}
  .split-line{position:absolute;top:0;bottom:0;left:var(--split,0%);width:2px;margin-left:-1px;
    background:linear-gradient(180deg,transparent,var(--cyan) 14%,var(--cyan) 86%,transparent);
    box-shadow:0 0 20px rgba(53,200,255,.85);opacity:0;transition:opacity .25s ease}
  .stage.ready .split-line{opacity:1}
  /* clamped so the grip never hangs half-off the frame at either extreme */
  .split-grip{position:absolute;top:50%;left:clamp(18px,var(--split,0%),calc(100% - 18px));
    width:36px;height:36px;
    margin:-18px 0 0 -18px;border-radius:50%;pointer-events:auto;cursor:ew-resize;
    background:rgba(3,6,28,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    box-shadow:0 0 0 1px var(--cyan),0 0 26px rgba(53,200,255,.55);
    transition:transform .18s ease,box-shadow .18s ease}
  .split-grip::before{content:'';position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(53,200,255,.35),transparent 68%)}
  .split-grip::after{content:'\003C\00A0\003E';position:absolute;inset:0;display:grid;place-content:center;
    font-size:12px;letter-spacing:-1px;color:var(--cyan);text-shadow:0 0 8px rgba(53,200,255,.9)}
  .split-grip:hover,.stage.dragging .split-grip{transform:scale(1.12);
    box-shadow:0 0 0 1px var(--cyan),0 0 38px rgba(53,200,255,.85)}
  .split-grip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  .split-tag{position:absolute;top:10px;left:10px;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cyan);padding:3px 7px;border-radius:2px;
    background:rgba(3,6,28,.6);box-shadow:0 0 0 1px var(--line);
    opacity:0;transition:opacity .25s ease}
  .stage.dragging .split-tag{opacity:1}
  .split-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-size:11.5px;color:var(--mute);padding:4px 10px;border-radius:99px;
    background:rgba(3,6,28,.6);box-shadow:0 0 0 1px var(--line);
    animation:hintpulse 2.6s ease-in-out infinite}
  .split-hint[hidden]{display:none}
  @keyframes hintpulse{0%,100%{opacity:.45}50%{opacity:.9}}
  @media (prefers-reduced-motion:reduce){.split-hint{animation:none;opacity:.7}}

  .gallery{display:flex;flex-direction:column;gap:8px;margin-top:2px}
  .gallery[hidden]{display:none}
  .gal-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
    color:var(--mute)}
  .gal-head b{color:var(--ink);font-weight:600}
  .gal-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
  .gal{flex:0 0 auto;width:56px;padding:0;border-radius:2px;overflow:hidden;position:relative;
    box-shadow:0 0 0 1px var(--line);transition:box-shadow .18s ease,transform .18s ease}
  .gal:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cyan),0 0 20px rgba(53,200,255,.4)}
  .gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
  .gal small{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;padding:2px 3px;
    background:linear-gradient(transparent,rgba(3,6,28,.9));color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drop{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;
    text-align:center;padding:24px;transition:background .2s}
  .stage.ready .drop{display:none}
  .drop .big{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(20px,3vw,27px);
    letter-spacing:-.02em;font-weight:500}
  .drop .hint{color:var(--mute);font-size:13px;max-width:30ch}
  .stage.over{outline:1px solid var(--cyan);outline-offset:-9px}
  .stage.over .drop{background:rgba(21,96,232,.12)}
  .orb{width:58px;height:58px;border-radius:50%;margin-bottom:4px;
    background:radial-gradient(circle at 50% 42%,#F2FEFF,var(--cyan) 38%,rgba(21,96,232,0) 72%)}
  .busy{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);
    transform:scaleX(0);transform-origin:left;transition:transform .25s}
  .stage[data-busy="1"] .busy{transform:scaleX(1)}

  .panel{display:flex;flex-direction:column;gap:24px;padding-top:4px}

  /* minmax(0,…) or the long labels widen their own column and shear the swatch row */
  .modes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}
  @media (max-width:900px){.modes{grid-template-columns:repeat(5,minmax(0,1fr))}}
  @media (max-width:520px){.modes{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .mode{display:flex;flex-direction:column;gap:6px;padding:0;text-align:left}
  .mode .sw{aspect-ratio:1;width:100%;border-radius:2px;overflow:hidden;position:relative;
    box-shadow:0 0 0 1px rgba(125,150,200,.22);transition:box-shadow .15s}
  .mode canvas{display:block;width:100%;height:100%}
  .mode .ph{position:absolute;inset:0}
  .mode small{font-size:10.5px;color:var(--mute);transition:color .15s;letter-spacing:-.005em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mode:hover .sw{box-shadow:0 0 0 1px rgba(53,200,255,.55)}
  .mode[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--cyan)}
  .mode[aria-pressed="true"] small{color:var(--ink)}

  .ctl{display:flex;flex-direction:column;gap:9px}
  .ctl[hidden]{display:none}
  .ctl .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
  .ctl .row b{font-weight:500}
  .ctl .row span{color:var(--mute);font-variant-numeric:tabular-nums}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:none}
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(125,150,200,.3)}
  input[type=range]::-moz-range-track{height:2px;background:rgba(125,150,200,.3)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--cyan);margin-top:-5.5px;box-shadow:0 0 12px rgba(53,200,255,.75)}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
    background:var(--cyan);box-shadow:0 0 12px rgba(53,200,255,.75)}
  input[type=range]:focus-visible{outline:1px solid var(--cyan);outline-offset:6px}

  .acts{display:flex;flex-direction:column;gap:9px}
  .btn{display:block;width:100%;text-align:center;padding:12px 16px;border-radius:2px;
    border:1px solid var(--line);transition:background .15s,border-color .15s}
  .btn:hover:not(:disabled){border-color:rgba(53,200,255,.5);background:rgba(21,96,232,.14)}
  .btn:disabled{opacity:.32;cursor:not-allowed}
  .btn.primary{background:linear-gradient(96deg,var(--blue),var(--cyan));color:#02040F;font-weight:600;
    border-color:transparent}
  .btn.primary:hover:not(:disabled){filter:brightness(1.1)}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .note{color:var(--mute);font-size:12.5px} .note b{color:var(--ink);font-weight:500}

  footer{padding:0 var(--pad) 40px;color:var(--mute);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;
    max-width:var(--shell);margin-inline:auto}
  footer a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
  footer a:hover{color:var(--cyan)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}