:root{
  --bg:#05060b;
  --accent:#d94fd1;
  --ink:#f4f3f7;
  --serif:'Instrument Serif','Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  position:relative;
  transition:opacity .4s ease;
  overscroll-behavior:none;
}

/* ---- the field ---- */
#field{
  position:fixed; inset:0; z-index:0; display:block;
  cursor:crosshair; touch-action:none;
}

/* ---- atmosphere ---- */
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(125% 120% at 50% 42%, transparent 48%, rgba(2,3,7,.62) 100%);
}
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- corner registration marks ---- */
.corner{position:fixed; z-index:4; width:18px; height:18px; pointer-events:none; opacity:.45;}
.corner::before,.corner::after{content:""; position:absolute; background:rgba(255,255,255,.55);}
.corner::before{width:100%; height:1px; top:0;}
.corner::after{height:100%; width:1px; left:0;}
.corner--tl{top:18px; left:18px;}
.corner--tr{top:18px; right:18px; transform:scaleX(-1);}
.corner--bl{bottom:18px; left:18px; transform:scaleY(-1);}
.corner--br{bottom:18px; right:18px; transform:scale(-1,-1);}

/* ---- shared ui chrome ---- */
.ui{z-index:10; position:fixed; transition:opacity .35s ease;}
body.ui-hidden .ui{opacity:0; pointer-events:none;}
.lbl{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,243,247,.45); font-weight:500;
}

/* ---- wordmark ---- */
.mark{top:40px; left:40px; max-width:46vw; animation:rise .9s .05s cubic-bezier(.16,1,.3,1) both;}
.mark__no{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,243,247,.42);}
.mark__title{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(54px,9vw,116px); line-height:.82; margin:.06em 0 .14em -.03em;
  color:var(--ink); letter-spacing:-.01em;
  text-shadow:0 0 42px rgba(217,79,209,.18);
}
.mark__sub{font-size:11px; letter-spacing:.04em; color:rgba(244,243,247,.55); max-width:30ch; line-height:1.5;}

/* ---- telemetry ---- */
.telemetry{
  top:40px; right:40px; text-align:right; min-width:154px;
  animation:rise .9s .18s cubic-bezier(.16,1,.3,1) both;
}
.tel__line{
  display:flex; justify-content:space-between; gap:18px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.07);
  font-size:11px;
}
.tel__line span{color:rgba(244,243,247,.42); letter-spacing:.16em; text-transform:uppercase; font-size:9px;}
.tel__line b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.tel__pulse{
  display:flex; align-items:center; justify-content:flex-end; gap:7px;
  margin-top:9px; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,243,247,.4);
}
.tel__pulse i{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent); animation:blink 1.6s ease-in-out infinite;}

/* ---- console ---- */
.console{
  bottom:34px; left:0; right:0; margin-inline:auto;
  width:min(1000px, calc(100vw - 56px));
  padding:18px 20px 16px;
  background:rgba(8,10,16,.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:5px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.5);
  animation:rise .9s .3s cubic-bezier(.16,1,.3,1) both;
}
.console__row{display:flex; align-items:center; gap:14px;}
.console__row--palettes{margin-bottom:15px;}
.swatches{display:flex; gap:8px; flex-wrap:wrap;}
.swatch{
  position:relative; width:46px; height:22px; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:3px;
  overflow:hidden; transition:transform .18s ease, border-color .18s ease;
}
.swatch:hover{transform:translateY(-2px);}
.swatch:focus-visible{outline:none; border-color:var(--ink); box-shadow:0 0 0 2px var(--accent);}
.swatch[data-active="1"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink), 0 0 16px -2px var(--accent);}
.swatch::after{
  content:attr(data-name); position:absolute; left:0; right:0; bottom:-15px;
  font-size:8px; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  color:rgba(244,243,247,.4); opacity:0; transition:opacity .18s ease;
}
.swatch:hover::after,.swatch[data-active="1"]::after{opacity:1;}

.console__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px 22px;
  padding:4px 0 14px; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ctrl__top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px;}
.ctrl .val{font-size:11px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:14px;
  background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px; background:rgba(255,255,255,.16); border-radius:2px;
}
input[type=range]::-moz-range-track{height:2px; background:rgba(255,255,255,.16); border-radius:2px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:9px; height:14px; margin-top:-6px;
  background:var(--accent); border:none; border-radius:1px;
  box-shadow:0 0 12px -1px var(--accent); transition:transform .15s ease;
}
input[type=range]::-moz-range-thumb{
  width:9px; height:14px; background:var(--accent); border:none; border-radius:1px;
  box-shadow:0 0 12px -1px var(--accent);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scaleY(1.18);}
input[type=range]:focus-visible{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 12px -1px var(--accent);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 12px -1px var(--accent);}

.console__row--actions{flex-wrap:wrap; gap:9px;}
.btn{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,243,247,.78); background:transparent;
  border:1px solid rgba(255,255,255,.16); border-radius:3px;
  padding:9px 16px; cursor:pointer; transition:all .16s ease;
}
.btn:hover{color:var(--ink); border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:none; color:var(--ink); border-color:var(--ink); box-shadow:0 0 0 2px var(--accent);}
.btn--mode{margin-right:auto; min-width:104px;}
.btn--mode::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:middle;
  box-shadow:0 0 8px var(--accent);
}
.btn--accent{color:var(--bg); background:var(--ink); border-color:var(--ink); font-weight:600;}
.btn--accent:hover{background:var(--accent); border-color:var(--accent); color:var(--bg);}

/* ---- mobile console toggle (revealed on small screens in responsive layer) ---- */
.console-toggle{display:none;}

/* ---- hint ---- */
.hint{
  bottom:11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,243,247,.3); animation:rise .9s .42s ease both;
}

/* ---- toast ---- */
.toast{
  position:fixed; z-index:20; bottom:34px; left:50%;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:9px 18px; border-radius:3px;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.toast[data-show="1"]{opacity:1; transform:translate(-50%,-58px);}

@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.telemetry{animation-name:rise;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:.25;}}

@media (prefers-reduced-motion:reduce){
  .mark,.telemetry,.console,.hint{animation:none;}
  .tel__pulse i{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ---- touch devices: larger hit targets at any width ---- */
@media (pointer:coarse){
  input[type=range]{height:36px;}
  input[type=range]::-webkit-slider-thumb{width:16px; height:28px; margin-top:-13px; border-radius:3px;}
  input[type=range]::-moz-range-thumb{width:16px; height:28px; border-radius:3px;}
  .btn{padding:13px 18px;}
  .swatch{width:52px; height:30px;}
}

/* ---- tablet ---- */
@media (max-width:1024px){
  .mark{top:30px; left:30px; max-width:58vw;}
  .telemetry{top:30px; right:30px;}
  .console{width:calc(100vw - 40px); padding:16px 18px 14px;}
  .console__grid{grid-template-columns:repeat(3,1fr); gap:18px 22px;}
}

/* ---- phone: console becomes a collapsible bottom sheet ---- */
@media (max-width:600px){
  .telemetry{display:none;}
  .corner{display:none;}
  .hint{display:none;}
  .mark{top:22px; left:22px; max-width:82vw;}

  .console-toggle{
    display:inline-block; bottom:calc(20px + env(safe-area-inset-bottom)); right:20px;
    font-family:var(--mono); font-size:10px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--bg);
    background:var(--ink); border:none; border-radius:999px;
    padding:13px 22px; cursor:pointer; z-index:11;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
  .console-toggle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent), 0 8px 24px rgba(0,0,0,.5);}

  .console{
    left:0; right:0; bottom:0; width:100%;
    transform:translateY(112%);
    border-radius:16px 16px 0 0;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    max-height:80vh; overflow-y:auto;
    animation:none;
    transition:transform .34s cubic-bezier(.16,1,.3,1);
  }
  body.console-open .console{transform:translateY(0);}

  .console__grid{grid-template-columns:repeat(2,1fr); gap:16px 18px;}
  .console__row--actions{gap:10px;}
  .console__row--actions .btn{flex:1 1 calc(50% - 5px); text-align:center;}
  .btn--mode{margin-right:0;}
}