/* ==========================================================================
   DARKMODE IT — the page is the demo. Left half light, right half dark, and a
   live preview component sitting on the seam so the same UI is visible in both
   themes at once.
   ========================================================================== */

:root{
  --L:#f6f4ef;        /* light field */
  --L-2:#ece8e0;
  --L-ink:#17151c;
  --L-dim:#6a6472;
  --L-line:rgba(23,21,28,.14);

  --D:#0e0d12;        /* dark field */
  --D-2:#17161d;
  --D-ink:#f1eff5;
  --D-dim:#8b869a;
  --D-line:rgba(241,239,245,.14);

  --acc:#7c5cff;
  --acc-2:#c9a6ff;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --seam:50vw;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--D);
  overflow-x:hidden;
}

/* the split field */
.split{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,var(--L) 0 50%,var(--D) 50% 100%)}
.seam{
  position:fixed;top:0;bottom:0;left:50%;width:1px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--acc) 8%,var(--acc) 92%,transparent);
  box-shadow:0 0 26px rgba(124,92,255,.55);
}

/* ---------- masthead: one wordmark, two colourways, cut by the seam ------- */
.masthead{position:relative;z-index:6;display:flex;align-items:center;gap:1rem;
  max-width:1280px;margin:0 auto;padding:1.9rem 2rem 1.2rem}
.mark svg{width:44px;height:44px;display:block}

.wm{position:relative;font-family:var(--mono);font-size:clamp(1.5rem,3.6vw,2.3rem);
  font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.wm i{font-style:normal;color:var(--acc)}
.wm-base{color:var(--L-ink)}
/* the overlay is the same text in the dark colourway, clipped at the seam */
.wm-over{position:absolute;inset:0;color:var(--D-ink);
  clip-path:polygon(var(--clipX,50%) 0,100% 0,100% 100%,var(--clipX,50%) 100%)}
.sub{margin-top:.5rem;font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--L-dim);position:relative}
.sub span:last-child{color:var(--D-dim)}

/* ---------- stage ---------- */
.stage{position:relative;z-index:4;max-width:1280px;margin:0 auto;padding:0 2rem 3rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}

.pane{padding:1.4rem 2.2rem 1.2rem}
.pane-light{color:var(--L-ink);padding-left:0;padding-right:3.4rem}
.pane-dark{color:var(--D-ink);padding-right:0;padding-left:3.4rem}

.pane-head{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:.9rem;margin-bottom:1.3rem}
.pane-light .pane-head{border-bottom:1px solid var(--L-line)}
.pane-dark .pane-head{border-bottom:1px solid var(--D-line)}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.tag-dim{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5}

/* paste box */
.paste label{display:block;font-size:.78rem;color:var(--L-dim);margin-bottom:.5rem}
#pasteIn{width:100%;resize:vertical;font-family:var(--mono);font-size:.78rem;line-height:1.6;
  color:var(--L-ink);background:rgba(255,255,255,.7);border:1px solid var(--L-line);
  border-radius:10px;padding:.7rem .8rem;outline:none}
#pasteIn:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.paste-row{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;flex-wrap:wrap}
.hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--L-dim)}

.presets{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.3rem 0 1.5rem}
.preset{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--L-dim);cursor:pointer;
  background:rgba(255,255,255,.6);border:1px solid var(--L-line);border-radius:999px;
  padding:.32rem .6rem .32rem .38rem;transition:.18s}
.preset:hover{border-color:var(--acc);color:var(--L-ink)}
.preset .dots{display:flex}
.preset .dots i{width:9px;height:9px;border-radius:50%;display:block;margin-right:-3px;
  border:1.5px solid rgba(255,255,255,.85)}

/* role rows */
.roles{list-style:none;display:grid;gap:.5rem}
.role{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem}
.chipwrap{position:relative;width:34px;height:34px;flex:none}
.chip{-webkit-appearance:none;appearance:none;width:34px;height:34px;border:none;
  background:none;padding:0;cursor:pointer;border-radius:9px;overflow:hidden}
.chip::-webkit-color-swatch-wrapper{padding:0}
.chip::-webkit-color-swatch{border:none;border-radius:9px}
.chip::-moz-color-swatch{border:none;border-radius:9px}
.chip-ring{position:absolute;inset:0;border-radius:9px;pointer-events:none}
.pane-light .chip-ring{box-shadow:inset 0 0 0 1px rgba(23,21,28,.18)}
.pane-dark .chip-ring{box-shadow:inset 0 0 0 1px rgba(241,239,245,.2)}

.role-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.role-name{font-size:.82rem;font-weight:600;letter-spacing:-.01em}
.role-hex{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;background:none;
  border:none;outline:none;padding:0;width:9ch}
.pane-light .role-hex{color:var(--L-dim)}
.pane-dark .role-hex{color:var(--D-dim)}
.role-lch{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;text-align:right;white-space:nowrap}
.pane-light .role-lch{color:var(--L-dim)}
.pane-dark .role-lch{color:var(--D-dim)}
.pane-dark .role{pointer-events:none}          /* generated side is output, not input */

/* knobs + export */
.knobs{margin-top:1.6rem;display:grid;gap:.9rem;padding-top:1.3rem;border-top:1px solid var(--D-line)}
.knobs label{display:grid;gap:.35rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--D-dim)}
.knobs b{color:var(--acc-2);font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;
  background:rgba(241,239,245,.18);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--acc);border:2px solid var(--D)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc);border:2px solid var(--D)}

.export{display:flex;gap:.45rem;margin-top:1.5rem;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:.18s;white-space:nowrap}
.pane-light .btn{color:var(--L-ink);background:rgba(255,255,255,.75);border:1px solid var(--L-line)}
.pane-light .btn:hover{border-color:var(--acc);color:var(--acc)}
.pane-dark .btn{color:var(--D-ink);background:rgba(255,255,255,.06);border:1px solid var(--D-line)}
.pane-dark .btn:hover{border-color:var(--acc);color:var(--acc-2)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:#0c0912;font-weight:600}
.btn.solid:hover{background:var(--acc-2);border-color:var(--acc-2);color:#0c0912}

/* ---------- the preview straddling the seam ---------- */
.preview{position:relative;grid-column:1 / -1;justify-self:center;width:min(560px,86%);
  margin-top:1.5rem;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6)}
.pv{position:absolute;inset:0}
.pv-l{clip-path:inset(0 50% 0 0)}
.pv-r{clip-path:inset(0 0 0 50%)}
.pv-label{position:absolute;top:.6rem;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.2em;text-transform:uppercase;z-index:3;opacity:.65}
.pv-label-l{left:.8rem;color:var(--L-ink)}
.pv-label-r{right:.8rem;color:var(--D-ink)}

/* the mock component — drawn entirely from the palette being previewed */
.pv-inner{position:absolute;inset:0;padding:1.15rem 1.3rem;background:var(--p-bg);color:var(--p-text);
  display:flex;flex-direction:column;gap:.75rem}
.pv-inner::after{content:"";position:absolute;left:1.3rem;right:1.3rem;top:3.1rem;height:1px;background:var(--p-border)}
.pv-top{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:-.01em}
.pv-dot{width:9px;height:9px;border-radius:3px;background:var(--p-accent)}
.pv-top small{margin-left:auto;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-muted)}
.pv-cards{display:flex;gap:.55rem;margin-top:1.1rem}
.pv-card{flex:1;background:var(--p-surface);border:1px solid var(--p-border);border-radius:9px;padding:.55rem .6rem}
.pv-card b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.pv-card span{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted)}
.pv-body{font-size:.66rem;line-height:1.6;color:var(--p-muted)}
.pv-cta{margin-top:auto;display:flex;gap:.45rem;align-items:center}
.pv-btn{background:var(--p-accent);color:var(--p-accentText);font-size:.62rem;font-weight:600;
  border-radius:7px;padding:.4rem .75rem}
.pv-ghost{border:1px solid var(--p-border);color:var(--p-text);font-size:.62rem;border-radius:7px;padding:.4rem .75rem}

/* ---------- audit ---------- */
.audit{position:relative;z-index:4;max-width:1280px;margin:0 auto;padding:2.2rem 2rem 0;color:var(--D-ink)}
.audit-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.9rem;border-bottom:1px solid var(--D-line);margin-bottom:1.4rem}
.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:.55rem}
.cell{border:1px solid var(--D-line);border-radius:11px;padding:.7rem .8rem;display:grid;gap:.45rem}
.cell-swatch{border-radius:7px;padding:.5rem .6rem;font-size:.72rem;font-weight:600;letter-spacing:-.01em}
.cell-meta{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--D-dim)}
.ratio{font-size:.78rem;font-weight:700;letter-spacing:0}
.pass{color:#5ee9a0}.fail{color:#ff7a8a}.warn{color:#ffc857}

.foot{position:relative;z-index:4;max-width:1280px;margin:0 auto;padding:2.4rem 2rem 3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--D-dim)}

.toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:20;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;background:var(--acc);color:#0c0912;
  font-weight:600;border-radius:999px;padding:.55rem 1.1rem}

/* ---------- narrow: the split stops being a split ---------- */
@media(max-width:880px){
  .split{background:linear-gradient(180deg,var(--L) 0 46%,var(--D) 46% 100%)}
  .seam{top:46%;bottom:auto;left:0;right:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--acc),transparent)}
  .stage{grid-template-columns:1fr}
  .pane-light,.pane-dark{padding:1.6rem 0 2rem}
  .wm-over{clip-path:none;display:none}
  .preview{width:100%;margin-top:1.8rem}
  .foot{flex-direction:column}
}