/* ─────────────────────────────────────────────────────────────
   SPHERE — interface
   Chrome is deliberately quiet: thin type, low contrast, glass.
   The picture is the product; the UI gets out of the way.
   ───────────────────────────────────────────────────────────── */

:root{
  --accent: #58e8cf;
  --accent-dim: #58e8cf40;
  --ink: #d8dfe8;
  --ink-dim: #7b8494;
  --ink-faint: #545c6b;
  --glass: rgba(14,16,24,.62);
  --glass-hi: rgba(30,34,48,.72);
  --line: rgba(255,255,255,.09);
  --line-hi: rgba(255,255,255,.16);
  --r: 11px;
  --chrome-fade: 1;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  background:#04050a;
  color:var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:14px;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* very fine film grain over everything — kills banding in the dark falloff */
#grain{
  position:fixed; inset:-50%; pointer-events:none; z-index:2; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grainshift 1.1s steps(3) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce){ #grain{ animation:none } }

/* ── shared chrome behaviour ─────────────────────────────────── */
.chrome{
  z-index:12;
  opacity:var(--chrome-fade);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.uihidden .chrome{ opacity:0 !important; pointer-events:none !important; }
body.uihidden #rail{ transform:translateX(30px); }

/* ── boot ────────────────────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:60; display:grid; place-content:center; gap:22px; justify-items:center;
  background:#04050a; transition:opacity .8s var(--ease), visibility .8s;
}
#boot.gone{ opacity:0; visibility:hidden; }
.boot-mark{ display:flex; gap:7px; }
.boot-mark span{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:bpulse 1.15s var(--ease) infinite;
}
.boot-mark span:nth-child(2){ animation-delay:.15s } .boot-mark span:nth-child(3){ animation-delay:.3s }
@keyframes bpulse{ 0%,100%{opacity:.18; transform:scale(.7)} 40%{opacity:1; transform:scale(1)} }
#bootMsg{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); }
#boot.err #bootMsg{ color:#ff8a7a; letter-spacing:.06em; text-transform:none; max-width:36ch; text-align:center; line-height:1.6 }

/* ── top bar ─────────────────────────────────────────────────── */
#topbar{
  position:fixed; top:0; left:0; right:0; padding:18px 22px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  background:linear-gradient(rgba(4,5,10,.72), rgba(4,5,10,0));
  pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-glyph{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--accent-dim);
  position:relative; flex:none;
  box-shadow:0 0 22px -6px var(--accent);
}
.brand-glyph::after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px var(--accent);
  animation:corepulse 3.4s var(--ease) infinite;
}
@keyframes corepulse{ 0%,100%{transform:scale(.82); opacity:.75} 50%{transform:scale(1.12); opacity:1} }
.brand-text h1{ font-size:14px; font-weight:600; letter-spacing:.34em; }
.brand-text p{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }

.readout{ display:flex; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.ro{
  padding:6px 12px; min-width:64px; text-align:right;
  border-left:1px solid var(--line);
}
.ro:first-child{ border-left:0 }
.ro label{ display:block; font-size:8.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-faint); }
.ro b{ display:block; font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink); margin-top:2px; }
.ro b sub{ font-size:9px; color:var(--ink-dim) }

/* ── spectrum strip ──────────────────────────────────────────── */
#spectrum{
  position:fixed; left:0; right:0; bottom:0; height:74px; width:100%;
  pointer-events:none; opacity:.5;
}

/* ── transport ───────────────────────────────────────────────── */
#transport{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:9px; align-items:center;
  padding:11px 13px;
  background:var(--glass); backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  max-width:calc(100vw - 28px);
}
.tbtns{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.sep{ width:1px; height:22px; background:var(--line); margin:0 3px; }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--ink-dim);
  font:inherit; font-size:11.5px; letter-spacing:.05em;
  transition:all .22s var(--ease); white-space:nowrap;
}
.btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.btn:hover{ background:var(--glass-hi); color:var(--ink); }
.btn:disabled{ opacity:.3; cursor:not-allowed; }
.btn:disabled:hover{ background:transparent; color:var(--ink-dim); }
.btn.on{ color:var(--accent); border-color:var(--accent-dim); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.btn.primary{ color:var(--ink); }
.btn.primary:not(:disabled){ background:var(--glass-hi); border-color:var(--line-hi); }
.btn.file{ position:relative; overflow:hidden; }
.btn.file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.btn.sm{ padding:6px 9px; font-size:10.5px; border:1px solid var(--line); }

.mini{ display:flex; align-items:center; gap:7px; padding:0 6px; }
.mini label{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.mini b{ font-size:10.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums; min-width:44px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
  width:88px; height:16px;
}
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--line-hi); border-radius:2px; }
input[type=range]::-moz-range-track{ height:2px; background:var(--line-hi); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%; margin-top:-4.5px;
  background:var(--accent); box-shadow:0 0 10px -1px var(--accent); transition:transform .18s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px -1px var(--accent);
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.25); }

/* seek */
.seek{ display:flex; align-items:center; gap:10px; width:100%; padding:2px 4px 0; }
.seek span{ font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:32px; }
.seek span:last-child{ text-align:right }
.seekbar{ position:relative; flex:1; height:14px; cursor:pointer; display:flex; align-items:center; min-width:180px; }
.seekbar::before{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--line-hi); border-radius:2px; }
.seekbar i{ position:absolute; left:0; height:2px; background:var(--accent); border-radius:2px; width:0; box-shadow:0 0 10px -2px var(--accent); }
.seekbar em{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); left:0; margin-left:-4.5px; opacity:0; transition:opacity .2s; box-shadow:0 0 10px -1px var(--accent); }
.seekbar:hover em{ opacity:1 }

/* ── rail ────────────────────────────────────────────────────── */
#railToggle{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line); border-radius:11px; color:var(--ink-dim);
  transition:all .25s var(--ease);
}
#railToggle svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round }
#railToggle:hover{ color:var(--ink); border-color:var(--line-hi) }
body.rail-open #railToggle{ opacity:0; pointer-events:none; }

#rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%) translateX(24px);
  width:272px; max-height:min(82vh, 760px); overflow-y:auto; overscroll-behavior:contain;
  padding:18px 18px 16px;
  background:var(--glass); backdrop-filter:blur(26px) saturate(1.3);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0; pointer-events:none;
}
body.rail-open #rail{ opacity:var(--chrome-fade); pointer-events:auto; transform:translateY(-50%) translateX(0); }
#rail::-webkit-scrollbar{ width:4px }
#rail::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:4px }
#rail section{ margin-bottom:18px }
#rail h2{
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:11px; padding-bottom:7px; border-bottom:1px solid var(--line);
}

.presets{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
.pchip{
  display:flex; align-items:center; gap:8px; padding:7px 9px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink-dim); font:inherit; font-size:10.5px; letter-spacing:.04em;
  transition:all .2s var(--ease); text-align:left;
}
.pchip:hover{ border-color:var(--line-hi); color:var(--ink) }
.pchip.on{ color:var(--ink); border-color:var(--accent-dim); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.pswatch{ width:13px; height:13px; border-radius:4px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }

.ctl{ margin-bottom:11px }
.ctl label{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; color:var(--ink-dim); margin-bottom:5px; }
.ctl label em{ font-style:normal; font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums }
.ctl input[type=range]{ width:100% }
.ctl.row{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:12px }

.chk{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:10.5px; color:var(--ink-dim); margin-bottom:0 !important; }
.chk input{ appearance:none; -webkit-appearance:none; width:13px; height:13px; border:1px solid var(--line-hi); border-radius:4px; cursor:pointer; position:relative; transition:all .2s; flex:none }
.chk input:checked{ background:var(--accent); border-color:var(--accent) }
.chk input:checked::after{ content:""; position:absolute; inset:0; background:#04050a; clip-path:polygon(19% 47%,10% 57%,40% 85%,90% 26%,79% 17%,39% 65%) }
.chk:hover{ color:var(--ink) }

.seg{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.seg button{
  padding:6px 2px; font:inherit; font-size:10px; cursor:pointer; color:var(--ink-dim);
  background:transparent; border:1px solid var(--line); border-radius:7px; transition:all .2s var(--ease);
}
.seg button:hover{ color:var(--ink); border-color:var(--line-hi) }
.seg button.on{ color:var(--accent); border-color:var(--accent-dim); background:color-mix(in srgb, var(--accent) 9%, transparent) }

.railbtns{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin-top:12px }
.railbtns .btn{ justify-content:center }
.btn.rec{ color:#ff6b6b; border-color:#ff6b6b55; background:#ff6b6b14 }
.rail-foot{ font-size:9.5px; color:var(--ink-faint); line-height:1.6; border-top:1px solid var(--line); padding-top:11px }
kbd{
  display:inline-block; padding:1px 5px; border:1px solid var(--line-hi); border-radius:4px;
  font:inherit; font-size:9.5px; color:var(--ink-dim); background:rgba(255,255,255,.04)
}

/* ── toast ───────────────────────────────────────────────────── */
#toast{
  position:fixed; left:50%; bottom:112px; transform:translate(-50%,10px);
  padding:9px 16px; border-radius:9px; z-index:30;
  background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); font-size:11.5px; color:var(--ink);
  opacity:0; pointer-events:none; transition:all .35s var(--ease); white-space:nowrap;
  max-width:90vw; overflow:hidden; text-overflow:ellipsis;
}
#toast.show{ opacity:1; transform:translate(-50%,0) }

/* ── dropzone ────────────────────────────────────────────────── */
#dropzone{
  position:fixed; inset:0; z-index:50; display:none; place-items:center;
  background:rgba(4,5,10,.86); backdrop-filter:blur(8px);
}
#dropzone.on{ display:grid }
#dropzone div{
  border:1.5px dashed var(--accent-dim); border-radius:20px; padding:52px 76px; text-align:center;
}
#dropzone b{ display:block; font-size:17px; font-weight:500; letter-spacing:.03em }
#dropzone span{ display:block; margin-top:7px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint) }

/* ── guide ───────────────────────────────────────────────────── */
#guide{
  position:fixed; inset:0; z-index:55; display:grid; place-items:center; padding:24px;
  background:rgba(2,3,7,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:fadein .3s var(--ease);
}
#guide[hidden]{ display:none }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.guide-card{
  position:relative; max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
  padding:34px 38px 30px;
  background:linear-gradient(rgba(18,20,30,.96), rgba(10,11,18,.96));
  border:1px solid var(--line-hi); border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,1);
  line-height:1.72; font-size:13.5px; color:#aeb6c4;
  animation:cardin .4s var(--ease);
}
@keyframes cardin{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
.guide-card::-webkit-scrollbar{ width:5px }
.guide-card::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:5px }
.guide-card h2{ font-size:19px; font-weight:500; color:#eaeef5; letter-spacing:.01em; margin-bottom:12px }
.guide-card h3{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:24px 0 9px }
.guide-card p{ margin-bottom:8px }
.guide-card em{ color:#cfd6e2; font-style:italic }
.guide-card b{ color:#dde3ec; font-weight:500 }
.guide-card ul{ list-style:none; }
.guide-card li{ padding-left:15px; position:relative; margin-bottom:6px }
.guide-card li::before{ content:""; position:absolute; left:0; top:.72em; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.55 }
#guideClose{
  position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:8px;
  background:transparent; border:1px solid var(--line); color:var(--ink-faint);
  font-size:19px; line-height:1; cursor:pointer; transition:all .2s;
}
#guideClose:hover{ color:var(--ink); border-color:var(--line-hi) }
.keys{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; color:var(--ink-dim) }
.keys span{ display:inline-flex; align-items:center; gap:5px }
.guide-foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-faint) }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 880px){
  .ro:nth-child(n+4){ display:none }
  #rail{ width:min(300px, calc(100vw - 32px)) }
  .btn span{ display:none }
  .btn.file span, .btn.primary span{ display:inline }
  #spectrum{ height:56px }
}
@media (max-width: 560px){
  #topbar{ padding:14px 16px }
  .brand-text p{ display:none }
  #transport{ bottom:16px; left:12px; right:12px; transform:none; max-width:none }
  #toast{ bottom:96px }
  .seekbar{ min-width:0 }
  #railToggle{ right:14px }
  .guide-card{ padding:28px 22px 24px; font-size:13px }
}