:root{
  --night:#070917;
  --ink:#f6f9ff;
  --muted:#929bb6;
  --line:rgba(160,180,255,.28);
  --cyan:#70eaff;
  --violet:#ac8aff;
  --blue:#748fff;
  --glass:rgba(18,24,48,.42);
  --glass-strong:rgba(16,22,44,.55);
  --glass-border:rgba(200,220,255,.22);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(120,210,255,.06);
  --radius:22px;
  --meter-green:#3dff8a;
  --meter-magenta:#ff4fd8;
  --meter-magenta-dim:#c44aff;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100svh;color:var(--ink);overflow-x:hidden;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(80,220,255,.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 8%, rgba(170,90,255,.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(60,100,220,.12), transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 80%, rgba(180,70,220,.10), transparent 50%),
    #070917;
  background-attachment:fixed;
}
button,input{font:inherit}
button{cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
button:hover{transform:translateY(-1px)}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.nav{height:84px;padding:0 clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.sym{width:30px;height:30px;border:2px solid #81e6fa;border-radius:8px;transform:rotate(45deg);box-shadow:0 0 18px #63dcf733}
.word{font-size:16px;font-weight:760;letter-spacing:-.05em}
.word em{font-style:normal;background:linear-gradient(95deg,#80dfff,#caa2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.powered{font-size:10px;letter-spacing:.17em;font-weight:780;color:#8791b1}
.powered b{color:#d2dcff}

main{width:min(980px,100%);margin:0 auto;padding:20px clamp(20px,5vw,60px) 80px}
.kicker{display:flex;align-items:center;gap:12px;color:#a9b8dc;font-size:10px;font-weight:820;letter-spacing:.25em}
.kicker i{height:7px;width:7px;border-radius:50%;background:#8beaff;box-shadow:0 0 0 6px #77dfff13,0 0 15px #87eaff92}
h1{margin:26px 0 18px;font-size:clamp(46px,7vw,92px);font-weight:590;line-height:.96;letter-spacing:-.07em}
h1 span{display:block;background:linear-gradient(105deg,#f8faff 0%,#9adfff 39%,#aea2ff 76%,#fff7fe 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-size:17px;line-height:1.6;color:#a4afc9;max-width:520px;margin:0 0 34px}

.entry{
  width:min(680px,100%);padding:7px;border-radius:18px;display:flex;gap:9px;
  border:1px solid var(--glass-border);
  background:linear-gradient(135deg,rgba(40,55,110,.35),rgba(20,24,55,.28));
  box-shadow:0 25px 80px rgba(0,0,0,.35), var(--glass-highlight);
  backdrop-filter:blur(36px) saturate(1.35);-webkit-backdrop-filter:blur(36px) saturate(1.35);
}
.entry input{background:none;border:0;outline:0;color:#fff;min-width:0;flex:1;font-size:15px;padding:16px 12px}
.entry input::placeholder{color:#7481a5}
.cta{border:0;border-radius:12px;min-width:150px;height:56px;background:linear-gradient(110deg,#7ce4ff,#bca4ff);color:#101b38;font-weight:810;font-size:14px;box-shadow:0 8px 28px rgba(120,200,255,.25)}
.cta:disabled{opacity:.5;cursor:wait}
.rights{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0 6px;color:#a4afc9;font-size:13px;line-height:1.5;max-width:640px}
.rights input{margin-top:3px;accent-color:#9adfff}
.msg{min-height:20px;margin:14px 0 0 6px;font-size:13px;color:#ffbbcd}.msg.ok{color:#9adfff}.msg a{color:#9adfff;text-decoration:underline}

.card{
  margin-top:28px;border-radius:var(--radius);padding:24px;
  border:1px solid var(--glass-border);
  background:linear-gradient(160deg,rgba(30,40,80,.40),rgba(14,18,40,.32));
  box-shadow:0 20px 60px rgba(0,0,0,.28), var(--glass-highlight);
  backdrop-filter:blur(34px) saturate(1.4);-webkit-backdrop-filter:blur(34px) saturate(1.4);
}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lamp{width:10px;height:10px;border-radius:50%;background:#556;box-shadow:0 0 0 5px #ffffff08}
.lamp.live{background:#6cf2a6;box-shadow:0 0 14px #6cf2a6}
.lamp.wait{background:#ffd36c}.lamp.bad{background:#ff6c8c}
.state{font-size:11px;letter-spacing:.2em;font-weight:800;color:#c9d4f5}
.np{color:#a4afc9;font-size:14px}
audio{width:100%;margin:18px 0 6px}

.url{display:flex;gap:8px;margin-top:10px}
.url input{
  flex:1;min-width:0;color:#dfe7ff;padding:11px 12px;font-size:13px;border-radius:10px;
  border:1px solid var(--glass-border);
  background:rgba(8,12,28,.45);
  box-shadow:var(--glass-highlight);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.btn{
  border:1px solid var(--glass-border);color:#e6ecff;border-radius:10px;padding:10px 14px;
  font-weight:700;font-size:12px;letter-spacing:.06em;
  background:rgba(30,40,80,.45);
  box-shadow:var(--glass-highlight);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.btn:hover{border-color:rgba(154,223,255,.45);background:rgba(40,55,100,.55)}

.groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.g{
  border:1px solid var(--glass-border);color:#fff;border-radius:12px;padding:8px 10px;text-align:left;min-height:52px;
  background:linear-gradient(160deg,rgba(35,50,100,.40),rgba(18,24,50,.35));
  box-shadow:var(--glass-highlight);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.g small{display:block;font-size:8px;letter-spacing:.16em;color:#8fa0cf;font-weight:800}
.g b{display:block;margin-top:3px;font-size:12px;font-weight:700;line-height:1.25}
.g.on{border-color:#9adfff;box-shadow:0 0 0 1px #9adfff55,0 10px 30px #6fd8ff22, var(--glass-highlight)}
.desc{color:#a4afc9;font-size:12px;margin-top:10px;min-height:16px}
.count{margin-top:14px;font-size:14px;color:#9adfff;min-height:20px}.count b{font-size:22px}

/* —— Prominent preset-change countdown (always visible, near meters) —— */
.preset-banner{
  margin-top:12px;padding:14px 18px;border-radius:16px;
  border:1px solid rgba(154,223,255,.45);
  background:linear-gradient(135deg,rgba(40,70,140,.55),rgba(90,40,140,.40));
  box-shadow:0 0 0 1px rgba(154,223,255,.15),0 12px 40px rgba(80,160,255,.18), var(--glass-highlight);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
}
.preset-banner[hidden]{display:none!important}
.preset-banner .pb-kicker{font-size:9px;font-weight:820;letter-spacing:.22em;color:#9adfff;width:100%}
.preset-banner .pb-main{font-size:16px;font-weight:650;color:#f0f6ff;flex:1;min-width:180px;line-height:1.35}
.preset-banner .pb-main b{color:#9adfff;font-weight:750}
.preset-banner .pb-time{
  font-size:42px;font-weight:720;letter-spacing:-.04em;line-height:1;
  color:#e8ffe8;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(61,255,138,.35);
  min-width:3.2ch;text-align:right;
}
.preset-banner.done{border-color:rgba(61,255,138,.5);box-shadow:0 0 0 1px rgba(61,255,138,.2),0 12px 40px rgba(61,255,138,.12), var(--glass-highlight)}
.preset-banner.done .pb-time{display:none}
.foot{margin-top:40px;color:#6e7d9c;font-size:12px;line-height:1.6}.foot a{color:#9fb0dd}

/* —— LYD UT meters (ATLAS language) —— */
.out-meter{margin-top:28px}
.out-meter .meter-body{display:flex;gap:22px;align-items:stretch;margin-top:16px;flex-wrap:wrap}
.play-main .out-meter .meter-body{margin-top:12px;gap:16px}
.play-main .meter-track{height:140px}
.play-main .meter-readout .lvl-val{font-size:30px}
.play-main .meter-scope{margin-top:12px;height:52px}
.meter-col{display:flex;gap:10px;align-items:stretch}
.meter-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:10px;font-weight:700;color:#7a89ad;letter-spacing:.02em;
  padding:2px 0;min-width:28px;text-align:right;user-select:none;
}
.meter-track{
  position:relative;width:28px;height:160px;border-radius:8px;overflow:hidden;
  background:rgba(4,8,20,.65);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 12px rgba(0,0,0,.5), var(--glass-highlight);
}
.meter-fill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,#b8ffd0 0%,var(--meter-green) 18%,#1ecf62 100%);
  box-shadow:0 0 14px rgba(61,255,138,.45);
  transition:height .05s linear;
  border-radius:0 0 6px 6px;
}
.meter-peak{
  position:absolute;left:1px;right:1px;height:2px;background:#e8ffe8;
  box-shadow:0 0 6px #3dff8a;opacity:0;pointer-events:none;
}
.meter-readout{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;min-width:110px}
.meter-readout .lvl-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:#8fa0cf;text-transform:uppercase}
.meter-readout .lvl-val{
  font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:#e8ffe8;font-variant-numeric:tabular-nums;
  text-shadow:0 0 20px rgba(61,255,138,.25);
}
.meter-readout .lvl-unit{font-size:11px;color:#7a89ad;font-weight:600}
.meter-readout .lvl-hint{font-size:11px;color:#6e7d9c;margin-top:4px;line-height:1.35;max-width:160px}
.meter-bands{flex:1;min-width:160px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.band{display:grid;grid-template-columns:28px 1fr 36px;gap:8px;align-items:center}
.band span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#c98ad8}
.band .btrack{
  height:10px;border-radius:6px;overflow:hidden;
  background:rgba(4,8,20,.55);border:1px solid rgba(255,100,220,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.band .bfill{
  height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,var(--meter-magenta-dim),var(--meter-magenta));
  box-shadow:0 0 10px rgba(255,79,216,.35);
  transition:width .06s linear;
}
.band .bval{font-size:11px;font-weight:700;color:#e8b8f0;font-variant-numeric:tabular-nums;text-align:right}
.meter-scope{
  margin-top:16px;width:100%;height:64px;border-radius:12px;display:block;
  background:rgba(4,8,20,.50);
  border:1px solid rgba(255,100,220,.20);
  box-shadow:var(--glass-highlight), inset 0 0 20px rgba(0,0,0,.35);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.meter-idle .meter-fill{height:0%!important;opacity:.35}
.meter-idle .meter-peak{opacity:0!important}
.meter-idle .lvl-val{color:#6e7d9c;text-shadow:none}
.meter-idle .bfill{width:0%!important;opacity:.35}

.modal{position:fixed;inset:0;background:rgba(3,5,14,.72);display:grid;place-items:center;padding:18px;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal[hidden]{display:none}
.sheet{
  position:relative;width:min(560px,100%);border-radius:22px;padding:26px;
  border:1px solid var(--glass-border);
  background:linear-gradient(160deg,rgba(28,38,80,.55),rgba(10,14,32,.60));
  box-shadow:0 30px 90px rgba(0,0,0,.55), var(--glass-highlight);
  backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
}
.sheet h2{margin:14px 0 8px;font-size:26px;letter-spacing:-.03em}
.x{position:absolute;top:12px;right:14px;background:none;border:0;color:#9fb0dd;font-size:26px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.tier{
  border:1px solid var(--glass-border);border-radius:16px;color:#fff;padding:16px;text-align:left;
  background:rgba(20,28,60,.45);
  box-shadow:var(--glass-highlight);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.tier b{display:block;font-size:30px;letter-spacing:-.03em}
.tier span{display:block;margin-top:4px;font-weight:700}
.tier small{display:block;margin-top:8px;color:#9fb0dd;font-size:12px}
.tier.on{border-color:#9adfff;box-shadow:0 0 0 1px #9adfff66, var(--glass-highlight)}
#ppbox{min-height:10px}
@media(max-width:520px){
  .tiers{grid-template-columns:1fr}
  .meter-track{height:130px;width:24px}
  .meter-readout .lvl-val{font-size:28px}
  .meter-scope{height:48px}
}

/* Homepage meter sits under the start form */
.home-meter{margin-top:8px}
.home-meter .out-meter{margin-top:22px}
/* Play page = same front page language, coming alive */
h1.live-hero{margin:18px 0 10px;font-size:clamp(34px,5.5vw,64px)}
.live-tag{margin:0 0 8px;max-width:560px}

/* —— Add-ons —— */
.home-addons{margin:18px 0 0;color:#8fa0cf;font-size:13px;max-width:560px}
.addons{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.addon{
  border:1px solid var(--glass-border);border-radius:16px;padding:16px;
  background:rgba(20,28,60,.40);
  box-shadow:var(--glass-highlight);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.addon .ah{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.addon .aname{font-size:16px;font-weight:780;letter-spacing:-.02em;color:#eef3ff}
.addon .aprice{font-size:12px;font-weight:700;color:#9adfff;letter-spacing:.04em;white-space:nowrap}
.addon .adesc{margin:8px 0 0;color:#a4afc9;font-size:13px;line-height:1.45}
.addon .actls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.addon .actls label{display:flex;align-items:center;gap:8px;color:#c9d4f5;font-size:13px}
.addon input[type=range]{width:min(220px,100%);accent-color:#9adfff}
.addon input[type=time],.addon input[type=number],.addon select{
  color:#e6ecff;border-radius:10px;padding:8px 10px;border:1px solid var(--glass-border);
  background:rgba(8,12,28,.45);
}
.addon .btn.on{border-color:#9adfff;box-shadow:0 0 0 1px #9adfff55}
.addon .badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;padding:4px 8px;border-radius:999px;background:rgba(108,242,166,.15);color:#6cf2a6}
.addon .badge.wait{background:rgba(154,223,255,.12);color:#9adfff}
.addon .badge.exp{background:rgba(255,108,140,.12);color:#ff9bb0}
#addonPay{margin-top:14px}


/* —— Play page: denser layout, collapsible sections —— */
.play-main{padding-top:8px}
.play-head{margin:0 0 10px}
.play-status{margin:8px 0 0;color:#a4afc9;font-size:13px;line-height:1.45;max-width:560px}
.play-main > .card,
.play-main > #meterMount .out-meter{margin-top:14px}
.play-main .out-meter{margin-top:10px}
.player-strip{padding:14px 16px}
.player-strip audio{margin:10px 0 4px}
.player-meta{margin-top:6px;justify-content:space-between}

.fold{padding:0;overflow:hidden}
.fold > .fold-sum{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;user-select:none;
}
.fold > .fold-sum::-webkit-details-marker{display:none}
.fold > .fold-sum::marker{content:''}
.fold .fold-body{padding:0 16px 14px}
.fold-lead{margin:0 0 10px;font-size:13px;line-height:1.4}
.fold .groups{margin-top:10px}
.chev{
  flex:0 0 auto;width:8px;height:8px;border-right:2px solid #9fb0dd;border-bottom:2px solid #9fb0dd;
  transform:rotate(45deg);transition:transform .18s ease;opacity:.85;margin-right:4px;
}
details[open] > .fold-sum .chev,
details.addon[open] > .addon-sum .chev{transform:rotate(225deg);margin-top:4px}

/* Compact add-on rows */
.addons{gap:8px;margin-top:4px}
.addon{
  padding:0;border-radius:12px;
}
.addon-sum{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 12px;user-select:none;
}
.addon-sum::-webkit-details-marker{display:none}
.addon-sum::marker{content:''}
.addon-sum-main{min-width:0;flex:1}
.addon-sum-side{display:flex;align-items:center;gap:10px;flex-shrink:0}
.addon .aname{font-size:14px;font-weight:780;letter-spacing:-.02em;color:#eef3ff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addon .apitch{margin:4px 0 0;color:#a4afc9;font-size:12px;line-height:1.35}
.addon .aprice{font-size:11px;font-weight:700;color:#9adfff;letter-spacing:.03em;white-space:nowrap}
.addon-body{padding:0 12px 12px;border-top:1px solid rgba(160,180,255,.12)}
.addon .adesc{margin:10px 0 0;color:#a4afc9;font-size:12.5px;line-height:1.45}
.addon .actls{margin-top:10px;gap:8px}
.addon .badge{padding:3px 7px;font-size:9px}

@media(min-width:720px){
  .addons{display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .addon{min-width:0}
}
@media(max-width:520px){
  .player-strip{padding:12px}
  .fold > .fold-sum,.fold .fold-body{padding-left:12px;padding-right:12px}
  .addon-sum-side{flex-direction:column;align-items:flex-end;gap:4px}
}


/* —— Always-visible stop / swap on player strip —— */
.player-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.player-actions .np{flex:1;min-width:100px}
.btn-danger{
  border-color:rgba(255,120,140,.45)!important;
  color:#ffd0d8!important;
  background:rgba(90,20,40,.45)!important;
}
.btn-danger:hover{border-color:rgba(255,140,160,.7)!important;background:rgba(120,30,50,.55)!important}
.swap-box{margin-top:14px;padding-top:12px;border-top:1px solid rgba(160,180,255,.18)}
.swap-lead{margin:0 0 10px;font-size:13px;line-height:1.4}
.swap-entry{margin-bottom:10px}
.swap-box .rights{margin:8px 0 6px;font-size:12px;color:#a4afc9;display:flex;gap:8px;align-items:flex-start}
.swap-box .rights input{margin-top:3px}
.player-strip audio{width:100%;margin-top:10px}

.pin-box{margin-top:14px;padding-top:12px;border-top:1px solid rgba(160,180,255,.18)}
.pin-lead{margin:0 0 10px;font-size:13px;line-height:1.4}
.pin-fields{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.pin-fields input{
  flex:1;min-width:120px;max-width:180px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--glass-border);background:rgba(10,14,30,.55);color:#fff;
}
.play-main.pin-locked .groups button,
.play-main.pin-locked #addonsCard,
.play-main.pin-locked #ext,
.play-main.pin-locked #upg,
.play-main.pin-locked #stop,
.play-main.pin-locked #stopTop,
.play-main.pin-locked #swapToggle,
.play-main.pin-locked #swapGo,
.play-main.pin-locked #presetKnob,
.play-main.pin-locked #presetKnobWrap{opacity:.45;pointer-events:none}
.play-main.pin-locked #pinBox{opacity:1;pointer-events:auto}
.play-main.pin-locked #pinToggle{opacity:1;pointer-events:auto}

audio#au{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}
.transport{margin-top:10px;gap:10px;align-items:center}
.play-btn{min-width:110px;font-weight:780;letter-spacing:.06em}
.play-btn.on{border-color:rgba(61,255,138,.5);color:#e8ffe8}
.fallback-box{margin-top:14px;padding-top:12px;border-top:1px solid rgba(160,180,255,.18)}
.fallback-lead{margin:0 0 10px;font-size:13px;line-height:1.4}
.play-main.pin-locked #fbSet,.play-main.pin-locked #fbClear,.play-main.pin-locked #fbUrl{opacity:.45;pointer-events:none}

.convert-card{margin-top:28px;padding:18px}
.convert-card select{padding:10px 12px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(10,14,30,.55);color:#fff}
.convert-card input[type=file]{color:#a4afc9;font-size:13px}
#cDl{display:inline-block;margin-top:10px;text-decoration:none}


/* —— t4598u/t4599u: 5 presets/row + dense add-ons —— */
.play-main .groups{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:820px){
  .play-main .groups,.groups{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .play-main .groups,.groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
#addonsCard .fold-lead{display:none}
.addons{
  display:flex!important;flex-direction:column!important;gap:6px!important;margin-top:4px;
}
.addon{
  padding:0!important;
}
.addon > .addon-sum{
  padding:8px 10px!important;gap:8px;align-items:center;
}
.addon .aname{font-size:13px;font-weight:750}
.addon .apitch{margin:2px 0 0!important;font-size:11.5px!important;line-height:1.3!important;color:#a4afc9}
.addon .aprice{font-size:11px;white-space:nowrap}
.addon .addon-body{padding:0 10px 8px!important}
.addon .adesc{display:none!important}
.addon .actls{margin-top:6px;gap:6px;flex-wrap:wrap}
@media (min-width:900px){
  /* still stack as compact rows — no skinny 3-col text */
  .addons{display:flex!important;flex-direction:column!important}
}

/* —— 2026 holographic HUD instrument (t4608u) —— */
.hud-panel{position:relative;overflow:hidden}
.hud-panel:before{
  content:"";position:absolute;inset:-20% -10% auto;height:55%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 30% 0%, rgba(112,234,255,.14), transparent 55%),
             radial-gradient(ellipse at 85% 10%, rgba(172,138,255,.12), transparent 50%);
}
.hud-panel > *{position:relative;z-index:1}
.hud-cluster{
  display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;
  gap:10px!important;margin-top:10px!important;
}
.hud-loud{
  display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:12px;
  flex:1 1 auto;min-width:0;justify-content:center;
}
.play-main .meter-bands.v-bands,
.hud-panel .v-bands,
.hud-panel #mBands{display:none!important}

/* Orbital holographic encoder */
.hud-encoder{margin:0!important;padding:0!important;min-width:0;flex:0 0 auto}
.hud-well{
  position:relative;width:148px;height:148px;display:grid;place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(20,28,64,.35), rgba(4,8,18,.92) 72%);
  box-shadow:
    inset 0 0 24px rgba(112,234,255,.08),
    inset 0 0 0 1px rgba(160,200,255,.16),
    0 0 40px rgba(112,234,255,.10),
    0 0 80px rgba(172,138,255,.08);
}
.hud-ring{
  position:absolute;border-radius:50%;pointer-events:none;
}
.hud-ring-outer{
  inset:4px;
  border:1px solid rgba(154,223,255,.22);
  box-shadow:0 0 18px rgba(112,234,255,.18), inset 0 0 20px rgba(172,138,255,.08);
}
.hud-ring-mid{
  inset:14px;
  border:1px solid rgba(172,138,255,.28);
  box-shadow:0 0 14px rgba(172,138,255,.2);
  opacity:.85;
}
.hud-well .knob-arc{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hud-well .knob-arc-track{
  stroke:rgba(160,190,255,.12);stroke-width:2.4;stroke-linecap:round;
}
.hud-well .knob-arc-value{
  stroke:#70eaff;stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(112,234,255,.9)) drop-shadow(0 0 14px rgba(112,234,255,.45));
}

.hud-core{
  width:108px;height:108px;border-radius:50%;border:0;padding:0;z-index:3;position:relative;
  background:
    radial-gradient(circle at 38% 30%, rgba(180,230,255,.28), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(40,48,100,.55), rgba(8,12,28,.92) 70%),
    linear-gradient(145deg, rgba(112,234,255,.12), rgba(172,138,255,.10));
  box-shadow:
    0 0 0 1px rgba(200,230,255,.28),
    0 0 28px rgba(112,234,255,.28),
    0 0 56px rgba(172,138,255,.18),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -12px 24px rgba(0,0,0,.35);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.hud-core:hover{transform:none}
.hud-core.dragging,.hud-core:active{cursor:grabbing}
.hud-core:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.hud-core-glow{
  position:absolute;inset:18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(112,234,255,.22), transparent 65%);
  filter:blur(1px);
}
.hud-core-label{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;padding:10px;text-align:center;
}
.hud-core .knob-name{
  margin:0;font-size:13px;font-weight:780;letter-spacing:-.02em;color:#f4fbff;
  text-shadow:0 0 12px rgba(112,234,255,.45);max-width:88px;line-height:1.15;
}
.hud-core .knob-group{
  margin:3px 0 0;font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#9adfff;opacity:.85;
}

/* Rim marker — glowing capsule, NOT a full-face needle */
.hud-marker,.hud-core .knob-pointer{
  position:absolute;left:50%;top:50%;
  width:9px;height:9px;margin:0;margin-left:-4.5px;margin-top:-4.5px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff, #70eaff 45%, #3db8ff 100%);
  box-shadow:
    0 0 0 2px rgba(7,9,23,.85),
    0 0 10px #70eaff,
    0 0 22px rgba(112,234,255,.85),
    0 0 36px rgba(172,138,255,.45);
  transform-origin:50% 50%;
  --knob-r:-52px;transform:rotate(-135deg) translateY(var(--knob-r));
  pointer-events:none;
  /* kill old short-pointer look */
  border:0!important;
}

/* OLED ribbon meters */
.hud-meters{flex:0 0 auto;padding:0;gap:2px;align-items:flex-start}
.hud-meters .meter-peak-read{
  font-size:10px;font-weight:750;color:#c8ffe0;
  text-shadow:0 0 10px rgba(61,255,138,.55);
  margin-bottom:2px;padding-left:0;
}
.hud-meters .led-row{gap:8px;align-items:center}
.hud-ribbon,.hud-meters .led-slot{
  width:12px;height:168px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,rgba(2,6,14,.96),rgba(6,12,28,.92));
  border:1px solid rgba(112,234,255,.18);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.75),
    0 0 16px rgba(61,255,138,.08);
}
.hud-ribbon-pk,.hud-meters .led-slot-pk{width:7px;opacity:.95}
.hud-meters .led-fill{
  background:linear-gradient(180deg,#e8fff4 0%,#70eaff 8%,#3dff8a 35%,#1ecf62 70%,#0a6b3a 100%);
  box-shadow:0 0 14px rgba(61,255,138,.7), 0 0 28px rgba(112,234,255,.35);
  filter:saturate(1.15);
}
.hud-meters .led-fill-pk{
  background:linear-gradient(180deg,#fff,#70eaff 40%,#3dff8a);
  box-shadow:0 0 10px rgba(112,234,255,.6);
  opacity:.9;
}
.hud-meters .led-cap{
  height:2px;background:#f5fff8;
  box-shadow:0 0 8px #70eaff,0 0 14px #3dff8a;
}
.hud-meters .meter-scale{
  height:168px;font-size:8px;color:#7a89ad;min-width:26px;
}
.hud-readout{
  min-width:78px;margin:0!important;padding:0!important;gap:2px;
  justify-content:center;
}
.hud-readout .lvl-label{font-size:8px;letter-spacing:.16em;color:#8fa0cf}
.hud-readout .lvl-val{
  font-size:34px!important;font-weight:720;letter-spacing:-.05em;line-height:.95;
  color:#f2fff8;
  text-shadow:0 0 18px rgba(61,255,138,.45), 0 0 40px rgba(112,234,255,.2);
}
.hud-readout .lvl-unit{font-size:9px;color:#7a89ad}
.hud-readout .lvl-hint{font-size:9px;color:#6e7d9c;max-width:90px}

/* Scope + unlabeled spectral veil */
.hud-scope-wrap{position:relative;margin-top:12px}
.hud-panel .meter-scope{
  margin-top:0!important;height:88px!important;border-radius:14px;
  border:1px solid rgba(112,234,255,.22)!important;
  box-shadow:0 0 24px rgba(112,234,255,.08), var(--glass-highlight), inset 0 0 24px rgba(0,0,0,.4);
}
.hud-band-veil{
  position:absolute;left:10px;right:10px;bottom:8px;height:42%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:6px;
  pointer-events:none;opacity:.9;
}
.hud-band-veil i{
  display:block;flex:1;height:8%;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,rgba(172,138,255,.55),rgba(112,234,255,.08));
  box-shadow:0 0 10px rgba(172,138,255,.25);
  transition:height .08s linear, opacity .08s linear;
}

/* Upgrade icon button */
.btn-icon-upg{
  width:40px;height:40px;padding:0!important;border-radius:12px;
  display:inline-grid;place-items:center;
  color:#9adfff;
  border-color:rgba(154,223,255,.35)!important;
  background:linear-gradient(160deg,rgba(40,60,120,.45),rgba(18,24,50,.55))!important;
  box-shadow:0 0 16px rgba(112,234,255,.12), var(--glass-highlight);
}
.btn-icon-upg:hover{color:#e8f7ff;border-color:rgba(112,234,255,.55)!important;box-shadow:0 0 22px rgba(112,234,255,.22)}
.btn-icon-upg .upg-ico{display:block;filter:drop-shadow(0 0 6px rgba(112,234,255,.45))}

/* Phone-first: keep encoder+meter side-by-side, never stack bands above */
@media (max-width:720px){
  .hud-cluster,.hud-loud{flex-wrap:nowrap!important}
  .hud-well{width:128px;height:128px}
  .hud-core{width:92px;height:92px}
  .hud-core .knob-name{font-size:12px;max-width:76px}
  .hud-marker,.hud-core .knob-pointer{--knob-r:-44px}
  .hud-ribbon,.hud-meters .led-slot{height:148px;width:11px}
  .hud-meters .meter-scale{height:148px}
  .hud-readout .lvl-val{font-size:28px!important}
  .hud-panel .meter-scope{height:72px!important}
}
@media (max-width:400px){
  .hud-marker,.hud-core .knob-pointer{--knob-r:-40px}
  .hud-well{width:118px;height:118px}
  .hud-core{width:84px;height:84px}
  .hud-loud{gap:8px}
  .hud-readout{min-width:64px}
  .hud-readout .lvl-val{font-size:24px!important}
  .hud-ribbon,.hud-meters .led-slot{height:132px;width:10px}
  .hud-meters .meter-scale{height:132px;font-size:7px;min-width:22px}
}

/* Kill leftover skeuomorphic knob look on player */
.play-main .preset-knob:not(.hud-core){display:none}
.play-main .knob-specular{display:none!important}


/* —— Silence detector UI (player) —— */
.silence-box{margin-top:12px;padding-top:12px;border-top:1px solid rgba(160,180,255,.16)}
.silence-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.silence-field{display:flex;align-items:center;gap:8px;font-size:12px;color:#a4afc9;font-weight:650}
.silence-field input[type=number]{
  width:64px;padding:8px 10px;border-radius:10px;border:1px solid var(--glass-border);
  background:rgba(10,14,30,.55);color:#fff;
}
.silence-field input[type=range]{width:120px;accent-color:#9adfff}
#silenceToggle.on{border-color:rgba(61,255,138,.45);color:#e8ffe8}
.silence-status{margin:8px 0 0;font-size:12px;color:#8fa0cf;min-height:1.2em}

/* —— Homepage: Filprosessering button + convert modal —— */
.home-tools{margin:18px 0 8px}
.home-tool-btn{
  border-radius:999px;padding:10px 18px;font-size:13px;font-weight:750;letter-spacing:.04em;
  border:1px solid var(--glass-border);
  background:rgba(18,24,48,.45);
  color:#e8f0ff;
  box-shadow:var(--glass-highlight);
}
.home-tool-btn:hover{border-color:rgba(154,223,255,.45)}
.convert-sheet{width:min(520px,100%)}
.convert-sheet h2{margin:12px 0 6px;font-size:24px;letter-spacing:-.03em}
.convert-lead{margin:0 0 16px;font-size:13px;line-height:1.4;color:#a4afc9}
.convert-fields{display:flex;flex-direction:column;gap:10px}
.file-pick{display:block;cursor:pointer}
.file-pick-ui{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(10,14,30,.5);
  box-shadow:var(--glass-highlight);
}
.file-pick-cta{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:780;
  background:linear-gradient(105deg,#70eaff,#ac8aff);color:#0a1020;
}
.file-pick-name{font-size:13px;color:#a4afc9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convert-fields select{
  padding:12px 14px;border-radius:14px;border:1px solid var(--glass-border);
  background:rgba(10,14,30,.55);color:#fff;
}
.convert-dl{display:inline-flex;margin-top:12px;text-decoration:none;justify-content:center}
.convert-card{display:none!important} /* legacy inline card gone */

/* —— Homepage exclusive idle meter (no dead B1–B5) —— */
.home-meter .out-meter.home-idle{margin-top:18px}
.home-idle-body{display:flex;align-items:flex-end;gap:18px;margin-top:14px;flex-wrap:wrap}
.home-idle-leds{display:flex;align-items:stretch;gap:5px}
.home-idle .home-led{
  width:12px;height:120px;border-radius:4px;
  background:linear-gradient(180deg,rgba(2,6,14,.95),rgba(6,12,28,.9));
  border:1px solid rgba(112,234,255,.16);
  box-shadow:inset 0 0 12px rgba(0,0,0,.65);
  position:relative;overflow:hidden;
}
.home-idle .led-slot-pk{width:8px}
.home-idle .led-fill{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(112,234,255,.35),rgba(61,255,138,.25));
  opacity:.55;
}
.home-idle-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:9px;font-weight:720;color:#7a89ad;height:120px;min-width:28px;padding:1px 0;
}
.home-idle-copy{min-width:100px}
.home-idle-copy .lvl-val{font-size:28px;color:#6e7d9c;text-shadow:none}
.home-idle-copy .lvl-hint{margin-top:6px;color:#8fa0cf}
.home-idle-scope,.home-meter .meter-scope{
  margin-top:12px!important;height:72px!important;border-radius:12px;
  border-color:rgba(112,234,255,.16)!important;
}
.home-meter .loud-cluster,
.home-meter .preset-knob-wrap,
.home-meter .v-bands,
.home-meter .inst-head-right{display:none!important}

/* Homepage must never show player HUD encoder/bands */
.home-meter .hud-encoder,
.home-meter .preset-knob-wrap,
.home-meter .hud-band-veil,
.home-meter .inst-head-right{display:none!important}
.home-meter .hud-cluster,
.home-meter .hud-loud{display:none!important}

/* —— Cinematic scope + reactive encoder halo (t4610u) —— */
.hud-well{
  --hud-level:0;
  box-shadow:
    inset 0 0 24px rgba(112,234,255,.08),
    inset 0 0 0 1px rgba(160,200,255,.16),
    0 0 calc(28px + var(--hud-level) * 36px) rgba(112,234,255, calc(.10 + var(--hud-level) * .28)),
    0 0 calc(50px + var(--hud-level) * 50px) rgba(172,138,255, calc(.08 + var(--hud-level) * .18));
  transition: box-shadow .12s linear;
}
.hud-scope-wrap{
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(6,10,24,.55),rgba(4,8,18,.72));
  border:1px solid rgba(112,234,255,.18);
  box-shadow:0 0 40px rgba(112,234,255,.06), inset 0 0 30px rgba(0,0,0,.35);
}
.hud-panel .meter-scope{
  margin-top:0!important;height:110px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;display:block;width:100%;
}
.hud-band-veil{
  height:48%;bottom:6px;opacity:.75;mix-blend-mode:screen;
}
.hud-band-veil i{
  background:linear-gradient(180deg,rgba(172,138,255,.4),rgba(112,234,255,.05));
  box-shadow:0 0 14px rgba(172,138,255,.2);
  filter:blur(.3px);
}
@media (max-width:720px){
  .hud-panel .meter-scope{height:96px!important}
}
.home-meter .meter-scope,.home-idle-scope{
  height:84px!important;
  border-radius:14px!important;
  border:1px solid rgba(112,234,255,.16)!important;
  box-shadow:0 0 28px rgba(112,234,255,.06)!important;
}


/* —— Share / Icecast / trial / ekstra strøm (t4609–t4610) —— */
.trial-banner{
  margin:0 0 14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(112,234,255,.10),rgba(172,138,255,.12));
  border:1px solid rgba(112,234,255,.22);
  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  box-shadow:0 0 40px rgba(112,234,255,.08);
}
.tb-kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:rgba(112,234,255,.9);width:100%}
.tb-main{flex:1;min-width:200px;font-size:14px;line-height:1.4;color:rgba(232,252,255,.88)}
.trial-banner .cta{margin:0;white-space:nowrap}
.push-grid{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.push-row label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:4px}
.create-more-card{margin-top:12px}
.create-more-row{display:flex;flex-wrap:wrap;gap:8px}
.create-more-row .btn{flex:1;min-width:140px}
#shareCard .url,#pushCard .url{margin:0}
#shareAll,#pushCopyAll{margin-top:10px;width:100%}
.hud-band-veil{
  position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 6%;gap:4%;opacity:.55;mix-blend-mode:screen;
}
.hud-band-veil i{
  display:block;flex:1;height:12%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(172,138,255,.35),rgba(112,234,255,.05));
  transition:height .18s ease-out,opacity .18s ease-out;
}


/* desk-inspired cyan ring depth (t4611u) — not Orbit, not plastic knob */
.hud-well{
  box-shadow:
    0 0 0 1px rgba(70,220,255,.18),
    0 0 calc(22px + var(--hud-level) * 28px) rgba(70,220,255, calc(.12 + var(--hud-level) * .32)),
    0 0 calc(48px + var(--hud-level) * 40px) rgba(112,234,255, calc(.06 + var(--hud-level) * .16)),
    inset 0 0 28px rgba(70,220,255,.06);
}
.hud-ring-outer{
  box-shadow:0 0 18px rgba(70,220,255,.35), inset 0 0 12px rgba(70,220,255,.15);
}
.hud-panel .meter-scope{
  height:108px!important;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(8,18,32,.65),rgba(4,10,18,.35));
  border:1px solid rgba(70,220,255,.12);
  box-shadow:inset 0 0 40px rgba(70,220,255,.05), 0 0 24px rgba(70,220,255,.06);
}
@media (min-width:420px){
  .hud-panel .meter-scope{height:118px!important}
}


/* —— Living organism in orbital encoder (t4612u) —— */
.org-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;pointer-events:none;z-index:1;
}
.hud-well .knob-arc{z-index:2}
.hud-well .hud-core{z-index:3}
.hud-core{
  background:
    radial-gradient(circle at 50% 45%, rgba(10,16,28,.18), rgba(6,10,20,.42) 62%, rgba(4,8,16,.55) 100%)!important;
  box-shadow:
    0 0 0 1px rgba(200,230,255,.18),
    0 0 28px rgba(112,234,255,.18),
    0 0 56px rgba(172,138,255,.12),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -12px 24px rgba(0,0,0,.25)!important;
}
.hud-core-glow{opacity:.35}
.hud-preset-caption{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-top:8px;text-align:center;min-height:28px;pointer-events:none;
}
.hud-preset-caption .knob-name{
  display:block;font-size:13px;font-weight:780;letter-spacing:-.02em;color:#f4fbff;
  text-shadow:0 0 12px rgba(112,234,255,.45);line-height:1.15;max-width:148px;
}
.hud-preset-caption .knob-group{
  display:block;margin-top:2px;font-size:8px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#9adfff;opacity:.85;
}
.hud-encoder{display:flex;flex-direction:column;align-items:center}
/* residual linear field stays secondary under instrument */
.hud-scope-wrap{opacity:.85}

.push-proto-note{margin:8px 0 0;font-size:12px;opacity:.55}
.share-lab{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin:8px 0 4px}


/* —— t4614 phone-first organism instrument (fixes invisible wave) ——
   Root cause: opaque #presetKnob (z-index:3) covered #orgCanvas (z-index:1).
   Fix: canvas is the visual; button is a transparent hit target only. */
.hud-encoder{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:6px;
}
.org-well.hud-well, .hud-well.org-well{
  position:relative!important;
  width:168px!important;height:168px!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 50% 45%, rgba(6,18,32,.55), rgba(2,6,14,.25) 70%, transparent 72%)!important;
  box-shadow:
    0 0 0 1px rgba(40,230,255,.28),
    0 0 28px rgba(40,230,255,.18),
    0 0 60px rgba(140,90,255,.12)!important;
  overflow:visible!important;
}
.org-canvas{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:2!important; /* ABOVE well bg, BELOW hit target */
  display:block!important;
}
.org-arc.knob-arc, .hud-well .org-arc{
  position:absolute!important;inset:0!important;z-index:3!important;
  pointer-events:none!important;width:100%!important;height:100%!important;
}
.org-arc .knob-arc-track{stroke:rgba(40,230,255,.16)!important;stroke-width:2.2!important}
.org-arc .knob-arc-value{
  stroke:#2ef0ff!important;stroke-width:3.2!important;
  filter:drop-shadow(0 0 8px rgba(40,230,255,.95)) drop-shadow(0 0 18px rgba(40,230,255,.55))!important;
}
/* TRANSPARENT hit target — never paint over the organism */
.preset-knob.org-hit, .hud-core.org-hit, button.org-hit#presetKnob{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  border-radius:50%!important;border:0!important;padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:4!important;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.preset-knob.org-hit:active, .hud-core.org-hit.dragging{cursor:grabbing}
.hud-core-glow{display:none!important}
.hud-ring, .hud-ring-outer, .hud-ring-mid{display:none!important} /* kill plastic rings */

.hud-preset-caption{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  margin-top:4px!important;min-height:32px;text-align:center;pointer-events:none;
  padding:4px 10px;border-radius:999px;
  background:rgba(4,10,20,.45);
  box-shadow:inset 0 0 0 1px rgba(40,230,255,.12);
}
.hud-preset-caption .knob-name{
  display:block!important;font-size:14px!important;font-weight:800!important;
  letter-spacing:-.02em;color:#f4fbff!important;
  text-shadow:0 0 14px rgba(40,230,255,.55);line-height:1.15;max-width:168px;
}
.hud-preset-caption .knob-group{
  display:block!important;margin-top:2px!important;font-size:9px!important;font-weight:800!important;
  letter-spacing:.16em;text-transform:uppercase;color:#7ef6ff!important;opacity:.9;
}
.hud-marker, .org-hit .knob-pointer, .hud-core .knob-pointer{
  z-index:5!important;
  --knob-r:-78px!important;
  width:11px!important;height:11px!important;margin-left:-5.5px!important;margin-top:-5.5px!important;
}
.hud-scope-wrap{
  margin-top:10px!important;opacity:.7;
}
.hud-panel .meter-scope{
  height:56px!important;border-radius:12px;
  border:1px solid rgba(40,230,255,.10);
}
@media (max-width:420px){
  .org-well.hud-well, .hud-well.org-well{width:156px!important;height:156px!important}
  .hud-marker, .org-hit .knob-pointer{--knob-r:-72px!important}
  .hud-preset-caption .knob-name{font-size:13px!important}
}


/* —— t4615 craft: desk ATLAS linear hero + Orbit glass orb (no flower) —— */
.hud-panel .meter-scope, .hud-scope-wrap .meter-scope{
  height:110px!important;
  border-radius:12px!important;
  border:1px solid rgba(112,234,255,.18)!important;
  background:linear-gradient(180deg,rgba(6,14,26,.75),rgba(3,8,16,.4))!important;
  box-shadow:inset 0 0 30px rgba(70,220,255,.06), 0 0 20px rgba(70,220,255,.05)!important;
}
.hud-scope-wrap{opacity:1!important;margin-top:14px!important}
@media (min-width:720px){
  .hud-panel .meter-scope{height:120px!important}
  .org-well.hud-well, .hud-well.org-well{width:176px!important;height:176px!important}
}
.org-well.hud-well{
  background:radial-gradient(circle at 35% 30%, rgba(160,190,255,.10), rgba(8,12,28,.35) 55%, rgba(2,6,14,.15) 72%)!important;
  box-shadow:
    0 0 0 1px rgba(112,234,255,.22),
    0 0 36px rgba(112,234,255,.14)!important;
}


/* —— t4617 density: waves occupy the card; compact disc knob; pills UNCHANGED —— */
.hud-panel.dense-panel{
  padding:10px 12px 12px!important;
  overflow:hidden;
}
.dense-head{margin:0 0 8px!important;min-height:0}
.dense-stage{
  position:relative;
  height:248px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(8,18,36,.5),rgba(4,10,20,.7));
  box-shadow:inset 0 0 0 1px rgba(112,234,255,.14);
}
@media (min-width:720px){
  .dense-stage{height:318px}
  .hud-panel.dense-panel{padding:12px 14px 14px!important}
}
.dense-scope, .hud-panel.dense-panel .meter-scope, .dense-stage .meter-scope{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  display:block!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  margin:0!important;
}
.dense-meters{
  position:absolute;right:8px;top:8px;bottom:8px;
  z-index:3;display:flex;flex-direction:column;align-items:flex-end;
  gap:6px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(4,10,20,.35) 40%);
  padding:6px 4px 6px 18px;border-radius:12px;
}
.dense-panel .hud-ribbon, .dense-panel .hud-meters .led-slot{
  height:108px!important;width:10px!important;
}
.dense-panel .hud-meters .meter-scale{height:108px!important;font-size:7px}
@media (min-width:720px){
  .dense-panel .hud-ribbon, .dense-panel .hud-meters .led-slot{height:156px!important}
  .dense-panel .hud-meters .meter-scale{height:156px!important}
}
.dense-readout{
  text-align:right;padding:4px 2px 0!important;margin-top:6px!important;
  background:transparent!important;flex:0 0 auto;
}
.dense-readout .lvl-val{font-size:24px!important;line-height:1;text-shadow:0 0 16px rgba(112,234,255,.35)}
.dense-meters{justify-content:flex-start!important;max-width:120px;}
.dense-knob{
  position:absolute!important;left:10px;bottom:10px;
  z-index:4;display:flex!important;flex-direction:row!important;
  align-items:center!important;gap:10px;
  pointer-events:none;
}
.disc-well, .dense-knob .disc-well{
  position:relative!important;
  width:68px!important;height:68px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 38% 30%, rgba(90,120,170,.28), transparent 42%),
    radial-gradient(circle at 50% 55%, #1b2740, #0c1424 72%)!important;
  box-shadow:
    0 0 0 1px rgba(160,200,240,.18),
    0 6px 16px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
  overflow:visible!important;
  pointer-events:auto;
}
.disc-arc, .dense-knob .knob-arc{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  z-index:2!important;pointer-events:none!important;
}
.disc-arc .knob-arc-track{stroke:rgba(140,180,220,.16)!important;stroke-width:3!important}
.disc-arc .knob-arc-value{
  stroke:#70eaff!important;stroke-width:3.4!important;
  filter:drop-shadow(0 0 4px rgba(112,234,255,.7))!important;
}
/* transparent hit target over the disc face — wave is not under this compact knob */
.disc-hit, button.disc-hit#presetKnob, .dense-knob .org-hit{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  border-radius:50%!important;border:0!important;padding:0!important;
  background:transparent!important;box-shadow:none!important;
  z-index:4!important;cursor:grab;touch-action:none;
  pointer-events:auto!important;
  -webkit-user-select:none;user-select:none;
}
.disc-hit.dragging, .disc-hit:active{cursor:grabbing}
/* simple LANDR-like center pointer (line), not a rim blob */
.disc-pointer, .dense-knob .hud-marker, .disc-hit .knob-pointer{
  position:absolute!important;left:50%!important;top:50%!important;
  width:2px!important;height:22px!important;
  margin:0!important;margin-left:-1px!important;margin-top:-22px!important;
  border-radius:1px!important;
  background:linear-gradient(180deg,#fff,#c8ecff)!important;
  box-shadow:0 0 6px rgba(200,240,255,.7)!important;
  transform-origin:50% 100%!important;
  --knob-r:0px;
  z-index:5!important;pointer-events:none!important;
  border:0!important;
}
.dense-caption{
  background:rgba(4,10,20,.55)!important;
  padding:5px 10px!important;
  margin:0!important;min-height:0!important;
  pointer-events:none;
}
.dense-caption .knob-name{font-size:13px!important;max-width:140px}
.dense-caption .knob-group{font-size:8px!important}
.hud-ring, .hud-ring-outer, .hud-ring-mid, .hud-core-glow{display:none!important}

/* homepage idle stays compact still-field */
.home-idle .meter-scope, .home-idle-scope{height:88px!important}

.dense-stage .dense-readout, .dense-readout{
  position:absolute!important;
  right:10px!important;bottom:10px!important;
  left:auto!important;top:auto!important;
  z-index:5!important;
  min-width:0!important;width:auto!important;
  text-align:right!important;
  pointer-events:none;
  padding:6px 8px!important;
  border-radius:10px;
  background:rgba(4,10,20,.45)!important;
}
.dense-meters{flex-direction:column!important;display:flex!important;bottom:auto!important;height:auto!important;}

/* t4621 no fill transition — JS ballistics own the bar */
.meter-fill, .led-fill, .led-fill-pk, .hud-meters .led-fill, .hud-ribbon .led-fill, .vu-track .led-fill, .home-idle .led-fill{
  transition:none!important;
  transition-property:none!important;
}


/* —— t4622/t4623/t4624 c4: horizontal ATLAS-style VU, shorter card, spekter strip —— */
.hud-panel.dense-panel{padding:8px 10px 8px!important}
.dense-head,.inst-head.dense-head{margin:0 0 6px!important;display:flex;justify-content:space-between;align-items:center}
.dense-stage{
  height:186px;
  display:flex!important;
  flex-direction:column;
}
@media (min-width:720px){
  .dense-stage{height:238px}
  .hud-panel.dense-panel{padding:10px 12px 10px!important}
}
.dense-wave{
  position:relative;
  flex:1 1 auto;
  min-height:96px;
  overflow:hidden;
}
.dense-scope, .hud-panel.dense-panel .meter-scope, .dense-stage .meter-scope, .dense-wave .dense-scope{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
}
.dense-spekter{display:none!important;height:0!important;width:0!important;opacity:0!important}
.dense-wave{min-height:110px}
.dense-knob{
  position:absolute!important;
  left:8px;bottom:8px;top:auto!important;right:auto;
  z-index:4;
}
/* Horizontal block VU along the bottom of the (now shorter) card */
.dense-meters, .dense-stage .dense-vu, .dense-vu.hud-meters{
  position:relative!important;
  inset:auto!important;
  right:auto!important;top:auto!important;bottom:auto!important;left:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:3px;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  padding:5px 8px 6px!important;
  margin:0!important;
  pointer-events:none;
  background:rgba(4,10,20,.62)!important;
  box-shadow:inset 0 1px 0 rgba(112,234,255,.08);
  border-radius:0!important;
  z-index:5;
}
.dense-vu .vu-scale, .dense-stage .vu-scale{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-end;
  width:100%;
  height:auto!important;
  min-width:0!important;
  padding:0 2px;
  font-size:8px;
  font-weight:720;
  color:#7a89ad;
  letter-spacing:.02em;
}
.dense-vu .vu-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.dense-vu .vu-track, .dense-panel .hud-ribbon, .dense-panel .hud-meters .led-slot, .dense-vu .led-slot{
  position:relative;
  flex:1 1 auto;
  width:auto!important;
  height:22px!important;
  min-height:22px;
  border-radius:4px!important;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,6,14,.96),rgba(6,12,28,.92))!important;
  border:1px solid rgba(112,234,255,.18);
  box-shadow:inset 0 0 10px rgba(0,0,0,.65);
}
@media (min-width:720px){
  .dense-vu .vu-track, .dense-panel .hud-ribbon, .dense-panel .hud-meters .led-slot{height:26px!important}
}
.dense-vu .vu-seg{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(4.166% - 2px),
    rgba(4,10,20,.78) calc(4.166% - 2px),
    rgba(4,10,20,.78) 4.166%
  );
}
.dense-vu .led-fill, .dense-vu #mFill, .dense-panel .hud-meters .led-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;height:100%!important;right:auto;
  background:linear-gradient(90deg,#0a6b3a 0%,#1ecf62 32%,#3dff8a 62%,#70eaff 100%)!important;
  box-shadow:0 0 12px rgba(61,255,138,.45), 0 0 18px rgba(112,234,255,.25);
  transition:none!important;
  z-index:1;
  border-radius:0!important;
  filter:saturate(1.1);
}
.dense-vu .led-fill-pk, .dense-vu #mFillPk{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;height:100%!important;
  background:linear-gradient(90deg,rgba(112,234,255,.12),rgba(232,255,248,.18))!important;
  box-shadow:none!important;
  opacity:.35;
  z-index:2;
  transition:none!important;
}
.dense-vu .led-cap, .dense-vu #mPeak, .dense-vu .vu-peak{
  position:absolute;
  top:0;bottom:0;
  width:3px!important;height:auto!important;
  left:0;
  background:#f5fff8!important;
  box-shadow:0 0 8px #70eaff, 0 0 14px #3dff8a;
  z-index:4;
  opacity:0;
  pointer-events:none;
  margin-left:-1px;
}
.dense-stage .dense-readout, .dense-vu .dense-readout, .dense-readout{
  position:relative!important;
  inset:auto!important;
  right:auto!important;bottom:auto!important;left:auto!important;top:auto!important;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:86px!important;
  width:auto!important;
  text-align:right!important;
  padding:0 0 0 4px!important;
  margin:0!important;
  background:transparent!important;
  border-radius:0;
  z-index:5!important;
}
.dense-readout .lvl-val{font-size:22px!important;line-height:1;text-shadow:0 0 16px rgba(112,234,255,.35)}
.dense-readout .lvl-hint{max-width:110px;margin-top:0}
.dense-vu .meter-peak-read{
  font-size:9px;margin:0;padding:0;color:#c8ffe0;
}
@media (max-width:400px){
  .dense-stage{height:176px}
  .dense-vu .vu-track{height:20px!important}
  .dense-readout .lvl-val{font-size:18px!important}
  .dense-readout{min-width:72px!important}
  .disc-well, .dense-knob .disc-well{width:58px!important;height:58px!important}
}

/* Homepage idle: same sidelengs VU, modest height */
.home-idle-body{align-items:flex-start;flex-direction:column;gap:10px}
.home-idle-vu{width:100%;display:flex;flex-direction:column;gap:4px}
.home-idle .home-led, .home-idle .vu-track.home-led{
  width:100%!important;height:18px!important;border-radius:4px;
  position:relative;overflow:hidden;
}
.home-idle .vu-scale, .home-idle-scale{
  flex-direction:row!important;
  justify-content:space-between;
  height:auto!important;min-width:0!important;width:100%;
  padding:0;
}
.home-idle .led-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:0;height:100%!important;right:auto;
  background:linear-gradient(90deg,rgba(61,255,138,.25),rgba(112,234,255,.4));
  opacity:.7;
  transition:none!important;
}
.home-idle-scope,.home-meter .meter-scope, .home-idle .meter-scope{
  margin-top:10px!important;height:64px!important;
}

/* In-page confirm — same glass as the player, never a native white OS sheet */
.ask-modal{z-index:80}
.ask-sheet{
  width:min(400px,100%);
  padding:22px 22px 18px;
}
.ask-sheet h2{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-.03em;
  line-height:1.25;
}
.ask-sheet #askLead{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.45;
  color:#c5cde0;
}
.ask-sheet #askLead:empty{display:none;margin:0}
.ask-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ask-actions .btn{min-width:96px}
@media (max-width:400px){
  .ask-sheet{padding:18px 16px 16px}
  .ask-sheet h2{font-size:20px}
}


/* —— Dine Atlas Engine list (home + player) —— */
.eng-card{margin-top:22px;padding:14px 14px 12px}
.play-main .eng-card{margin-top:16px}
.eng-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.eng-count{font-size:11px;font-weight:700;color:#8fa0cf;letter-spacing:.04em;white-space:nowrap}
.eng-list{display:flex;flex-direction:column;gap:8px}
.eng-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(160,180,255,.16);
  background:rgba(8,14,32,.45);
  box-shadow:var(--glass-highlight);
}
.eng-row.is-open{
  border-color:rgba(112,234,255,.4);
  background:linear-gradient(160deg,rgba(20,40,70,.5),rgba(8,14,32,.55));
  box-shadow:0 0 20px rgba(112,234,255,.08), var(--glass-highlight);
}
.eng-row.is-stopped{opacity:.62}
.eng-main{flex:1 1 180px;min-width:0;text-decoration:none;color:inherit;display:block}
a.eng-main:hover .eng-name{color:#e8f7ff}
.eng-top{display:flex;align-items:center;gap:8px;min-width:0}
.eng-name{
  flex:1 1 auto;min-width:0;
  font-size:16px;font-weight:750;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.eng-state{
  flex:0 0 auto;
  font-size:9px;font-weight:820;letter-spacing:.14em;
  color:#9adfff;
}
.eng-state.is-trial{color:#ffd59a}
.eng-state.is-open{color:#70eaff}
.eng-meta{margin:4px 0 0 15px;font-size:12px;color:#8fa0cf;line-height:1.35}
.eng-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.eng-actions .btn{padding:7px 11px;font-size:11px}
.eng-hint{margin:10px 2px 2px;font-size:12px;line-height:1.45}
@media (max-width:520px){
  .eng-row{padding:11px 10px}
  .eng-actions{width:100%;margin-left:0}
  .eng-actions .btn{flex:1 1 auto;text-align:center;justify-content:center}
  .eng-name{font-size:15px}
}

/* Player chassis: prominent and large on laptop/desktop, still full-width on phone.
   Does not have to be the first element, but must read clearly above the fold on a MacBook. */
.play-main > #meterMount{
  margin: 4px -8px 10px;
}
@media (min-width:800px){
  .play-main{padding-top:4px}
  .play-main > #meterMount{
    width:100vw;
    max-width:100vw;
    margin:0 0 14px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0 24px;
    box-sizing:border-box;
  }
  .play-main > #meterMount .chassis-stage{
    /* Fill the viewport width, but keep the whole box above the fold */
    max-width:min(1520px, calc((100svh - 112px) * 1672 / 941));
    margin-inline:auto;
  }
}
@media (max-width:799px){
  .play-main > #meterMount{margin:4px -12px 10px}
}
.chassis-panel.glass-panel,
#outMeter.glass-panel{
  margin-top:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.chassis-panel.glass-panel::before,
#outMeter.glass-panel::before{display:none!important;content:none!important}

.chassis-stage{
  position:relative;
  width:100%;
  aspect-ratio:1672 / 941;
  overflow:hidden;
  background:#07080c;
  border-radius:2px;
}
.chassis-stage .plate-off,
.chassis-stage .plate-on{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;object-position:center;
  pointer-events:none;user-select:none;display:block;
  z-index:1;
}
.chassis-stage .plate-on{
  opacity:0;
  transition:opacity 1.15s ease;
  z-index:2;
}
#outMeter:not(.meter-idle) .plate-on{opacity:1}

.glass-layer{
  position:absolute;left:0;top:0;
  z-index:3;
  transform-origin:0 0;
  opacity:0;
  transition:opacity 1.15s ease .12s;
  pointer-events:none;
  will-change:transform,opacity;
  overflow:hidden;
  container-type:size;
  container-name:glass;
}
#outMeter:not(.meter-idle) .glass-layer{
  opacity:1;
  pointer-events:auto;
}

.glass-scope{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;display:block;
}

/* Left readout — thin short-term LUFS (or dB fallback). Sizes are % of the glass face. */
#outMeter .glass-read{
  position:absolute;left:5.0%;top:18%;width:24%;
  max-height:72%;overflow:hidden;
  z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;
  color:#c8eff8;
}
#outMeter.glass-panel .glass-mono,
#outMeter .glass-lr[hidden],
#outMeter .glass-vu[hidden],
#outMeter .glass-mono[hidden]{display:none!important}
#outMeter .glass-read .lvl-label{
  font-size:5.2cqh;
  letter-spacing:.16em;text-transform:uppercase;
  color:#7e96a6;font-weight:500;margin:0;
  opacity:.7;line-height:1.2;flex:0 0 auto;
}
#outMeter .glass-num{display:flex;align-items:flex-start;gap:0.4em;line-height:.88;margin-top:0.4cqh;flex:0 0 auto}
#outMeter .glass-num .lvl-val,
#outMeter.glass-panel .lvl-val{
  font-family:"Helvetica Neue","SF Pro Display",Inter,"Segoe UI",Arial,sans-serif;
  font-size:20cqh!important;
  font-weight:300;font-synthesis-weight:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.05em;color:#b9faff;line-height:.88;
  text-shadow:0 0 0.8cqh rgba(80,210,255,.32),0 0 1px rgba(180,240,255,.4);
}
#outMeter .lvl-unit{
  margin-top:.42em;
  font-family:"Helvetica Neue","SF Pro Display",Inter,sans-serif;
  font-size:5.5cqh;
  letter-spacing:.16em;color:#8fb8c8;font-weight:300;
  font-synthesis-weight:none;
  text-transform:uppercase;
  line-height:1;
}
#outMeter .lvl-sub{
  font-size:max(6px,4.6cqh);
  color:#6e8494;margin-top:0.4cqh;letter-spacing:.08em;
  font-weight:400;opacity:.8;line-height:1.2;flex:0 0 auto;
}
#outMeter .lvl-unit{font-size:max(6px,5.5cqh)}
@media (max-width:720px){
  #outMeter .glass-num .lvl-val,
  #outMeter.glass-panel .lvl-val{
    font-size:26cqh!important;
  }
}
#outMeter .glass-lr{margin-top:2.8cqh;display:flex;flex-direction:column;gap:2.2cqh;flex:0 0 auto;width:100%}
#outMeter .lr-row{display:flex;align-items:center;gap:0.7cqw}
#outMeter .lr-row i{
  font-style:normal;font-size:4.8cqh;
  width:1.15em;color:#7fa0b0;font-weight:500;flex:0 0 auto;
  letter-spacing:.04em;
}
/* Slim segmented tick meters: unlit dark ticks, cyan fill, violet only at the hot end. */
#outMeter .lr-track{
  --ticks:22;
  position:relative;flex:1;
  height:4.6cqh;
  min-height:0;
  border-radius:1px;
  background:repeating-linear-gradient(90deg,
    rgba(28,52,72,.88) 0 calc(100% / var(--ticks) * .72),
    transparent calc(100% / var(--ticks) * .72) calc(100% / var(--ticks)));
  box-shadow:none;
  overflow:hidden;
}
#outMeter .lr-fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  border-radius:0;
  background:linear-gradient(90deg,
    #2ad8ea 0%,
    #45DDF4 32%,
    #65C4FF 68%,
    #8ec8ff 86%,
    #B77BFF 100%);
  box-shadow:0 0 5px rgba(69,221,244,.28);
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  -webkit-mask-image:repeating-linear-gradient(90deg,
    #000 0 calc(100% / 22 * .72),
    transparent calc(100% / 22 * .72) calc(100% / 22));
  mask-image:repeating-linear-gradient(90deg,
    #000 0 calc(100% / 22 * .72),
    transparent calc(100% / 22 * .72) calc(100% / 22));
}
#outMeter .lr-fill.lr-hold{
  background:transparent;box-shadow:none;
  border-right:1px solid rgba(200,240,255,.45);
  width:100%;
  -webkit-mask-image:none;mask-image:none;
}
#outMeter .lr-pip{
  position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
  background:rgba(185,230,255,.7);box-shadow:0 0 3px rgba(120,210,255,.35);opacity:0;pointer-events:none;
  z-index:2;
}
#outMeter .glass-read .meter-peak-read,
#outMeter .glass-read .lvl-hint{display:none}


/* Wheel on the 3q PRESET ring (UV from measured face quad + live ring). */
#outMeter .glass-knob,
#outMeter #presetKnobWrap.glass-knob,
#presetKnobWrap.glass-knob{
  position:absolute!important;
  left:82.25%!important;
  top:11.12%!important;
  width:14.43%!important;
  height:78.88%!important;
  margin:0!important;
  padding:0!important;
  z-index:6;
  display:flex!important;
  align-items:center;justify-content:center;
  pointer-events:auto;
}
#outMeter .glass-knob .hud-well,
#outMeter .glass-knob .disc-well,
#outMeter .glass-knob .chassis-well,
#outMeter .glass-knob .knob-well{
  position:relative!important;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
  display:block!important;
}
#outMeter .glass-knob .knob-arc,
#outMeter .glass-knob .disc-arc{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  z-index:2!important;pointer-events:none!important;
  opacity:.9;
}
#outMeter .glass-knob .knob-arc-track{stroke:rgba(200,230,255,.16)!important;stroke-width:2.4!important}
#outMeter .glass-knob .knob-arc-value{
  stroke:#d8f2ff!important;stroke-width:2.8!important;
  filter:drop-shadow(0 0 4px rgba(200,230,255,.55))!important;
}
#outMeter .glass-knob .preset-knob,
#outMeter .glass-knob .hud-core,
#outMeter .glass-knob button.disc-hit#presetKnob,
#outMeter .glass-knob button.org-hit#presetKnob{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  border-radius:50%!important;border:0!important;padding:0!important;
  background:transparent!important;box-shadow:none!important;
  z-index:4!important;cursor:grab;touch-action:none;
  display:flex!important;flex-direction:column!important;
  align-items:center;justify-content:center;
  color:#e8f6ff;
}
#outMeter:not(.meter-idle) .glass-knob .chassis-well{
  filter:drop-shadow(0 0 6px rgba(180,220,255,.35)) drop-shadow(0 0 14px rgba(150,120,220,.16));
}
#outMeter .glass-knob .knob-name,
#outMeter .glass-knob .hud-core .knob-name{
  display:block!important;
  margin:0!important;
  font-size:clamp(6px,1.05vw,11px)!important;
  font-weight:750!important;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;line-height:1.05;
  max-width:82%!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f2fbff!important;
  text-shadow:0 0 8px rgba(200,230,255,.45);
  pointer-events:none;z-index:2;position:relative;
}
#outMeter .glass-knob .knob-group,
#outMeter .glass-knob .hud-core .knob-group{
  display:block!important;
  margin:1px 0 0!important;
  font-size:clamp(5px,.5vw,7px)!important;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8aa8c4!important;opacity:.9;
  max-width:82%!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;
}
#outMeter .glass-knob .knob-pointer,
#outMeter .glass-knob .disc-pointer,
#outMeter .glass-knob .hud-marker{
  position:absolute!important;left:50%!important;top:50%!important;
  width:2px!important;height:46%!important;
  margin:0!important;margin-left:-1px!important;margin-top:-46%!important;
  border-radius:1px!important;
  /* Visible only on the outer rim so the PRESET label in the hub stays clear. */
  background:linear-gradient(180deg,#fff 0%,#cfe8ff 22%,rgba(207,232,255,0) 32%)!important;
  box-shadow:0 0 5px rgba(200,230,255,.55)!important;
  transform-origin:50% 100%!important;
  --knob-r:0px!important;
  z-index:5!important;pointer-events:none!important;border:0!important;
}

#outMeter .glass-chips{
  position:absolute;
  left:30%;right:19.5%;bottom:6.5%;
  height:13cqh;
  z-index:5;
  display:flex;align-items:center;justify-content:center;
  gap:1.4cqw;
  pointer-events:auto;
}
#outMeter .glass-chips .ch-save,
#outMeter .glass-chips .ch-slot{
  appearance:none;border:0;
  padding:1.6cqh 1.8cqw;
  min-width:4.2cqw;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(210,230,245,.16), rgba(16,24,36,.48));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 1px rgba(180,210,230,.2),
    0 0 10px rgba(160,200,220,.1);
  color:#e8f4ff;
  font-size:max(7px,6.2cqh);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;line-height:1;white-space:nowrap;
  transform:none;
}
#outMeter .glass-chips .ch-slot:hover,
#outMeter .glass-chips .ch-slot:focus-visible{
  transform:none;
}
#outMeter .glass-chips .ch-slot:not(.filled){opacity:.5}
#outMeter .glass-chips .ch-slot.filled,
#outMeter .glass-chips .ch-slot.active,
#outMeter .glass-chips .ch-save.on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 0 0 1px rgba(200,230,255,.4),
    0 0 12px rgba(180,220,245,.22);
  color:#fff;
}
#outMeter .glass-chips .ch-hint{
  position:absolute;left:0;right:0;top:-7cqh;
  text-align:center;font-size:4.8cqh;color:#8aa0c0;pointer-events:none;opacity:0;
}
#outMeter .glass-chips .ch-hint.show{opacity:1}

/* Custom player name — small line at the top of the left column, under the logo */
#outMeter .glass-read .player-alias{
  position:relative;left:auto;right:auto;top:auto;
  z-index:6;text-align:left;pointer-events:auto;
  max-height:max(15px,12cqh);overflow:hidden;
  margin:0 0 0.8cqh;width:100%;
}
#outMeter .player-alias-show{
  appearance:none;border:0;background:transparent;padding:0;
  cursor:text;max-width:100%;display:block;text-align:left;
  color:#e8f4fa;font:inherit;
}
#outMeter .player-alias-text{
  display:block;max-width:100%;
  font-size:max(6px,4.6cqh);
  font-weight:300;font-style:normal;font-synthesis:none;
  letter-spacing:.06em;text-transform:uppercase;
  color:#9aafbb;
  text-shadow:none;
  line-height:1.2;
  white-space:normal;overflow:hidden;word-break:break-word;
  border-bottom:1px solid transparent;
}
#outMeter .player-alias-show:hover .player-alias-text,
#outMeter .player-alias-show:focus-visible .player-alias-text{
  border-bottom-color:rgba(200,230,245,.28);
  color:#c5d6e0;
}
#outMeter .player-alias-input{
  width:100%;max-width:100%;
  margin:0;display:block;
  background:transparent;border:0;border-bottom:1px solid rgba(200,230,245,.45);
  color:#f4fbff;text-align:left;outline:none;
  font-size:max(6px,4.6cqh);
  font-weight:300;font-style:normal;font-synthesis:none;letter-spacing:.06em;text-transform:uppercase;
  padding:0 0 1px;
  text-shadow:0 0 0.6cqh rgba(8,16,28,.7);
}
#outMeter.meter-idle .player-alias{opacity:0;pointer-events:none}

/* Active preset — discreet overlay at the top of the wave window, never over the numeral or chips */
#outMeter .wave-preset{
  position:absolute;left:29%;right:19%;top:10%;
  bottom:auto;
  z-index:4;text-align:center;pointer-events:none;
  max-height:28%;overflow:hidden;
}
#outMeter .wave-preset-name{
  font-size:max(8px,6.8cqh);
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:#e8f4fa;
  text-shadow:0 0 0.7cqh rgba(8,16,28,.75);
  line-height:1.2;white-space:normal;overflow:hidden;word-break:break-word;
}
#outMeter .wave-preset-group{
  margin-top:0.4cqh;
  font-size:max(6px,4.8cqh);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#9bb4c6;
  text-shadow:0 0 0.5cqh rgba(8,16,28,.7);
  white-space:nowrap;overflow:hidden;
}
#outMeter.meter-idle .wave-preset{opacity:0}


#outMeter.meter-idle .glass-read{opacity:.0}
#outMeter.meter-idle .glass-chips{opacity:.0}
#outMeter.glass-panel.is-applying .chassis-stage{
  filter:saturate(1.05);
}
#outMeter.glass-panel.is-clip .chassis-stage{
  /* clip is shown on the number/VU, not a loud frame wash */
}

@media (max-width:520px){
  .play-main > #meterMount{margin-left:-12px;margin-right:-12px;margin-bottom:8px}
  #outMeter .glass-read .lvl-hint,
  #outMeter .glass-read .meter-peak-read{display:none}
}
#outMeter.meter-idle .glass-num .lvl-val{
  color:#9aacc4!important;min-width:2.2ch;display:inline-block;
}

/* optional FPS chip (preview ?fps=1) */
.lmm-fps{
  position:absolute;right:8px;top:8px;z-index:20;
  font:11px/1.3 ui-monospace,Menlo,monospace;
  color:#cfe8ff;background:rgba(0,0,0,.45);
  padding:4px 7px;border-radius:6px;pointer-events:none;
  text-shadow:0 0 6px rgba(0,0,0,.6);
}

/* Digitalt kontrollpanel — tasteful, not a joke banner */
.ctrl-panel{margin-top:6px}
.ctrl-label{
  margin:16px 2px 8px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7e90b3;
  font-weight:650;
}
.ctrl-panel > .card, .ctrl-panel > .eng-mount{margin-top:14px}
.home-idle.chassis-idle, .home-meter .out-meter.home-idle{
  box-shadow:
    0 0 0 1px rgba(112,234,255,.16),
    0 0 22px rgba(40,170,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-radius:16px;
}



/* ===== Floating Amplifier + c12 refinements (20261110c12) ===== */
:root{
  --page-w:1080px;
  --page-pad:clamp(20px,4vw,48px);
  --section-gap:28px;
  --card-radius:18px;
  --card-bg:rgba(12,16,32,.46);
  --card-bg-2:rgba(14,18,36,.40);
  --card-line:rgba(190,210,240,.055); /* c12: 54% quieter than .12 */
  --type-quiet:#8b95ad;
  --type-soft:#c5cde0;
}
body.variant-a, body.variant-b{
  background:
    radial-gradient(ellipse 50% 40% at 18% 8%, rgba(80,220,255,.13), transparent 62%),
    radial-gradient(ellipse 46% 36% at 86% 6%, rgba(170,90,255,.14), transparent 58%),
    radial-gradient(ellipse 55% 45% at 72% 78%, rgba(60,100,220,.10), transparent 58%),
    #070917;
  background-attachment:fixed;
}
body.variant-a .nav, body.variant-b .nav{
  height:72px;
  width:min(var(--page-w),100%);
  margin:0 auto;
  padding:0 var(--page-pad);
  box-sizing:border-box;
}
body.variant-a .powered, body.variant-b .powered{
  font-size:9px;letter-spacing:.16em;font-weight:600;color:#6f7894;
}
body.variant-a .powered b, body.variant-b .powered b{color:#b7c0d8;font-weight:650}

main, main.play-main, body.variant-a main, body.variant-b main{
  width:min(calc(var(--page-w) + 2 * 48px), 100%);
  margin:0 auto;
  padding:8px var(--page-pad) 88px;
}
body.variant-a .nav, body.variant-b .nav{
  width:min(calc(var(--page-w) + 2 * 48px), 100%);
}

/* Intro */
.page-intro{text-align:center;margin:6px 0 8px;padding:0 8px}
.intro-kicker{
  margin:0 0 8px;
  font-size:10px;font-weight:650;letter-spacing:.22em;
  color:#8a96b0;text-transform:uppercase;
}
.intro-line{
  margin:0 auto;
  max-width:28em;
  font-size:clamp(16px,1.6vw,20px);
  font-weight:300;letter-spacing:-.02em;line-height:1.45;
  color:var(--type-soft);
}

/* Product stage — no rectangular frame, no 100vw banner */
@media (min-width:800px){
  .play-main > #meterMount{
    width:auto!important;
    max-width:100%!important;
    margin:10px auto 8px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
  }
  .play-main > #meterMount .chassis-stage{
    max-width:100%!important;
    margin-inline:auto;
  }
}
@media (max-width:799px){
  .play-main > #meterMount{margin:4px 0 6px!important}
}
.chassis-panel.glass-panel, #outMeter.glass-panel{
  background:transparent!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;
}
.chassis-stage{
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  aspect-ratio:1774 / 540;
}
@media (max-width:720px){
  .chassis-stage{aspect-ratio:1672 / 398}
  .nav{height:60px}
  .page-intro{margin:2px 0 4px}
  .intro-line{font-size:15px}
}
.chassis-stage .plate-off,
.chassis-stage .plate-on{
  object-fit:fill;
}
.chassis-stage .plate-front{display:none!important}
@media (max-width:720px){
  .chassis-stage .plate-angled{display:none!important}
  .chassis-stage .plate-front{display:block!important}
}

/* Status row: LIVE + trial side by side on desktop, stack on mobile */
.status-row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:18px 0 8px;
}
@media (min-width:800px){
  .status-row{grid-template-columns:1fr 1fr;align-items:stretch}
  .status-row .trial-banner[hidden]{display:none}
  .status-row:not(:has(.trial-banner:not([hidden]))):not(:has(.preset-banner:not([hidden]))){
    grid-template-columns:1fr;
  }
}
.status-card, .play-head.status-card,
.status-row .trial-banner, .status-row .preset-banner{
  margin:0;
  padding:16px 18px;
  border-radius:var(--card-radius);
  border:1px solid var(--card-line);
  background:var(--card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.status-row .play-head{margin:0}
.status-row .play-status{margin:8px 0 0;color:var(--type-quiet);font-size:13px;line-height:1.45}
.status-row .trial-banner .tb-kicker,
.status-row .preset-banner .pb-kicker{
  font-size:10px;letter-spacing:.16em;font-weight:700;color:#8aa0c0;
}

/* Control panel — same width, typography, radii */
.ctrl-panel{margin-top:18px}
.ctrl-label{
  margin:0 0 12px;
  font-size:10px;font-weight:650;letter-spacing:.20em;
  text-transform:uppercase;color:#8a96b0;
}
body.variant-a .ctrl-panel > .card,
body.variant-a .ctrl-panel > .eng-mount,
body.variant-b .ctrl-panel > .card,
body.variant-b .ctrl-panel > .eng-mount,
body.variant-a .card,
body.variant-b .card{
  border-radius:var(--card-radius);
  border:1px solid var(--card-line);
  background:var(--card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.variant-a .btn, body.variant-b .btn{
  border-radius:14px;
}

/* Slim elegant L/R VU — white + muted cyan, under LUFS */
#outMeter .glass-vu{
  display:flex;
  flex-direction:column;
  gap:1.8cqh;
  width:92%;
  max-width:100%;
  margin-top:2.6cqh;
  flex:0 0 auto;
  z-index:5;
}
#outMeter .glass-vu[hidden]{display:none!important}
#outMeter .vu-row{
  display:flex;align-items:center;gap:0.7cqw;
}
#outMeter .vu-lab{
  flex:0 0 auto;
  width:1.05em;
  font-size:max(6px,4.4cqh);
  font-weight:400;font-style:normal;letter-spacing:.08em;
  color:rgba(230,244,250,.72);
  line-height:1;
}
#outMeter .vu-track{
  position:relative;flex:1;height:max(2px,2.2cqh);
  border-radius:99px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
#outMeter .vu-fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  border-radius:99px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.55) 0%,
    rgba(210,236,245,.90) 42%,
    rgba(140,210,220,.85) 100%);
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  box-shadow:none;
}

/* Variant A — Floating Amplifier: generous air, object sits in the atmosphere */
body.variant-a .page-intro{margin-bottom:4px}
body.variant-a .play-main > #meterMount{margin-top:12px;margin-bottom:6px}
body.variant-a .status-row{margin-top:28px}
body.variant-a .ctrl-panel{margin-top:22px}

/* Variant B — Integrated Studio: one continuous work surface under the amp */
body.variant-b .studio-deck,
body.variant-b .page-shell{
  position:relative;
}
body.variant-b #meterMount,
body.variant-b .status-row,
body.variant-b .ctrl-panel{
  position:relative;z-index:1;
}
body.variant-b .status-row{
  margin-top:0;
  padding:8px 16px 0;
  border:1px solid var(--card-line);
  border-top:0;
  border-radius:0;
  background:linear-gradient(180deg, rgba(10,14,28,.28), rgba(12,16,32,.52));
  gap:10px;
}
body.variant-b .status-row .status-card,
body.variant-b .status-row .trial-banner,
body.variant-b .status-row .preset-banner,
body.variant-b .status-row .play-head{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:12px 6px 10px;
}
body.variant-b .ctrl-panel{
  margin-top:0;
  padding:8px 16px 22px;
  border:1px solid var(--card-line);
  border-top:0;
  border-radius:0 0 var(--card-radius) var(--card-radius);
  background:rgba(12,16,32,.52);
}
body.variant-b .ctrl-panel > .card,
body.variant-b .ctrl-panel > .eng-mount{
  background:rgba(8,12,26,.35);
}
body.variant-b .play-main > #meterMount{margin-bottom:0!important}

@media (max-width:720px){
  .status-row{margin-top:14px}
  body.variant-a .status-row{margin-top:16px}
  body.variant-b .status-row, body.variant-b .ctrl-panel{padding-left:12px;padding-right:12px}
}


/* ===== c12 refinements (needle-free ring, mobile height, quieter frames, LIVE gap) ===== */
#outMeter #presetKnobWrap.glass-knob,
#presetKnobWrap.glass-knob{
  container-type:size;
}
#outMeter .glass-knob .knob-arc-track{
  stroke:rgba(200,230,255,.14)!important;
  stroke-width:2.2!important;
}
#outMeter .glass-knob .knob-arc-value{
  stroke:#e8f6ff!important;
  stroke-width:3.1!important;
  stroke-linecap:round!important;
  filter:drop-shadow(0 0 3px rgba(210,232,255,.55))!important;
}
#outMeter .glass-knob .knob-pointer,
#outMeter .glass-knob .disc-pointer,
#outMeter .glass-knob .hud-marker{
  display:none!important;
}
#outMeter .glass-knob .knob-name,
#outMeter .glass-knob .hud-core .knob-name{
  display:block!important;
  position:relative;
  z-index:3;
  margin:0!important;
  max-width:68%!important;
  font-size:clamp(6px,12cqw,13px)!important;
  font-weight:500!important;
  font-style:normal!important;
  font-synthesis:none!important;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.12;
  color:#f2fbff!important;
  text-shadow:0 0 6px rgba(200,230,255,.35);
  overflow:hidden;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal!important;
  text-overflow:ellipsis;
  pointer-events:none;
}
#outMeter .glass-knob .knob-group,
#outMeter .glass-knob .hud-core .knob-group{display:none!important}

/* LIVE sits just below the visible chassis (incl. soft floor reflection),
   not the transparent PNG bounds. Desktop pad below a>=8 is ~19px of the
   394px stage; pull the row up so the remaining air is ~10px. */
body.variant-a .status-row{margin-top:8px}

@media (max-width:720px){
  /* Visible mobile front +10–14%: break the 20px page pad so the 1672×398
     plate is nearly full-bleed (390px → 92.8px tall, +11.4% vs 83.3px). */
  .play-main > #meterMount{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    margin-top:4px!important;
    margin-bottom:6px!important;
    padding:0!important;
    box-sizing:border-box;
  }
  /* Square the PRESET wrap in face space so the ring is truly circular
     after the (near-identity) front homography. Same center as desktop
     percentages; height matches width (14.43% × 1628/320). */
  #outMeter .glass-knob,
  #outMeter #presetKnobWrap.glass-knob,
  #presetKnobWrap.glass-knob{
    left:82.25%!important;
    top:13.84%!important;
    width:14.43%!important;
    height:73.44%!important;
    aspect-ratio:1 / 1!important;
  }
  body.variant-a .status-row{margin-top:8px}
}

/* Hidden trial/preset banners must stay hidden on all widths.
   .trial-banner{display:flex} otherwise overrides the hidden attribute below 800px. */
.trial-banner[hidden],
.status-row .trial-banner[hidden],
.status-row .preset-banner[hidden]{display:none!important}


/* ===== c13: official glass silhouette, typography, ring, wave, compact controls ===== */
.chassis-stage{
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  aspect-ratio:1774 / 540;
}
@media (max-width:720px){
  .chassis-stage{aspect-ratio:2172 / 470}
}
.chassis-stage .plate-off,
.chassis-stage .plate-on{
  background:transparent!important;
  object-fit:fill;
  filter:none;
}
.chassis-stage .plate-off{
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.48));
}

/* Clip HUD to the official chamfered glass; no rectangular black punch. */
.glass-clip{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.15s ease .12s;
  -webkit-mask-image:url(/img/glass-mask-angled.png?v=20261110c15);
  mask-image:url(/img/glass-mask-angled.png?v=20261110c15);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
@media (max-width:720px){
  .glass-clip{
    -webkit-mask-image:url(/img/glass-mask-front.png?v=20261110c15);
    mask-image:url(/img/glass-mask-front.png?v=20261110c15);
  }
}
#outMeter:not(.meter-idle) .glass-clip{opacity:1}
#outMeter:not(.meter-idle) .glass-clip .glass-layer,
#outMeter:not(.meter-idle) .glass-clip .glass-knob{pointer-events:auto}
.glass-layer{
  background:transparent!important;
  overflow:hidden;
}
#outMeter:not(.meter-idle) .glass-layer{opacity:1}

/* LUFS: number + unit on one line, smaller type, "maks" fits, no overlap. */
#outMeter .glass-read{
  left:2.4%!important;top:15%!important;width:18.5%!important;
  max-height:68%!important;overflow:hidden;
}
#outMeter .glass-read .lvl-label{display:none!important}
#outMeter .glass-num{
  display:flex!important;align-items:baseline!important;gap:.32em;
  line-height:1!important;margin:0!important;flex:0 0 auto;
}
#outMeter .glass-num .lvl-val,
#outMeter.glass-panel .lvl-val{
  font-size:13.6cqh!important;
  letter-spacing:-.04em;line-height:1!important;
}
#outMeter .lvl-unit{
  margin-top:0!important;
  font-size:max(6px,4.8cqh)!important;
  letter-spacing:.12em;line-height:1;align-self:baseline;
  text-transform:uppercase;
}
#outMeter .lvl-sub{
  font-size:max(5px,3.8cqh)!important;
  margin-top:0.8cqh;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;
}
@media (max-width:720px){
  #outMeter .glass-read{
    left:2.6%!important;top:14%!important;width:19.5%!important;
  }
  #outMeter .glass-num .lvl-val,
  #outMeter.glass-panel .lvl-val{
    font-size:15.4cqh!important;
  }
}

/* PRESET ring in STAGE space, aligned to the engraved circle. */
#outMeter .glass-knob,
#outMeter #presetKnobWrap.glass-knob,
#presetKnobWrap.glass-knob{
  position:absolute!important;
  left:82.807%!important;
  top:34.074%!important;
  width:11.838%!important;
  height:38.889%!important;
  margin:0!important;padding:0!important;
  z-index:6;
  display:flex!important;
  align-items:center;justify-content:center;
  pointer-events:auto;
  container-type:size;
}
@media (max-width:720px){
  #outMeter .glass-knob,
  #outMeter #presetKnobWrap.glass-knob,
  #presetKnobWrap.glass-knob{
    left:81.308%!important;
    top:28.723%!important;
    width:11.971%!important;
    height:55.319%!important;
    aspect-ratio:auto!important;
  }
}
#outMeter .glass-knob .knob-arc-track{
  stroke:rgba(119,149,169,.22)!important;
  stroke-width:1.6!important;
}
#outMeter .glass-knob .knob-arc-chrome{
  stroke:#e8f6ff;
  stroke-width:2.3;
  stroke-linecap:round;
  fill:none;
  filter:drop-shadow(0 0 3px rgba(210,232,255,.45));
}
#outMeter .glass-knob .knob-arc-bead{
  fill:#eaffff;
  filter:drop-shadow(0 0 2px rgba(234,255,255,.8));
}
#outMeter .glass-knob .knob-arc-value{
  stroke:#e8f6ff!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  filter:drop-shadow(0 0 2px rgba(210,232,255,.5))!important;
}
#outMeter .glass-knob .knob-pointer,
#outMeter .glass-knob .disc-pointer,
#outMeter .glass-knob .hud-marker{display:none!important}

#outMeter .glass-knob .preset-knob,
#outMeter .glass-knob .hud-core{
  display:flex!important;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.4cqh;
  width:100%;height:100%;
  background:transparent!important;
  border:0!important;box-shadow:none!important;
}
#outMeter .glass-knob .knob-kicker{
  display:block;
  font-size:clamp(5px,8.5cqw,9px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9cafbe;
  line-height:1;
  pointer-events:none;
}
#outMeter .glass-knob .knob-name,
#outMeter .glass-knob .hud-core .knob-name{
  display:-webkit-box!important;
  font-size:clamp(6px,13cqw,14px)!important;
  font-weight:650!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f0fcff!important;
  max-width:72%!important;
}

/* Chips: static fill only — no backdrop-filter over the live wave. */
#outMeter .glass-chips .ch-slot,
#outMeter .glass-chips .ch-save{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:linear-gradient(180deg, rgba(210,230,245,.18), rgba(16,24,36,.55));
}

/* LIVE gap is measured from the visible feet, not the transparent PNG pad.
   Official angled plate pad below last opaque (feet) is 48/540 of stage height
   (~29px at the 1080×329 desktop proof). Pull the row up so remaining air is
   ~18px (inside 12–24). Mobile front pad is ~1.4px; keep the 14px margin. */
body.variant-a .status-row{margin-top:-18px}
@media (max-width:720px){
  body.variant-a .status-row{margin-top:14px}
  .play-main > #meterMount{margin-bottom:4px!important}
}

/* Compact play/pause + source-switch icons. STOPP STRØMMEN and BRUK PIN stay text. */
.btn-icon-ctl{
  width:40px;height:40px;min-width:40px;min-height:40px;
  padding:0!important;border-radius:12px;
  display:inline-grid;place-items:center;
  color:#e6ecff;
}
.btn-icon-ctl .ctl-ico{display:block;width:20px;height:20px}
.btn-icon-ctl .ctl-ico[hidden]{display:none!important}
.play-btn.btn-icon-ctl{min-width:40px;font-weight:inherit;letter-spacing:0}
.play-btn.btn-icon-ctl.on{border-color:rgba(61,255,138,.5);color:#e8ffe8}
@media (max-width:720px){
  .btn-icon-ctl{
    width:44px;height:44px;min-width:44px;min-height:44px;
  }
}

/* ===== c14 (t4669): preset ring — name only, smaller, subtle 4–6° tilt; kicker only without a name ===== */
#outMeter .glass-knob .preset-knob.has-name .knob-kicker{display:none!important}
#outMeter .glass-knob .knob-name,
#outMeter .glass-knob .hud-core .knob-name{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:visible!important;
  font-size:clamp(5px,10.6cqw,12px)!important;
  font-weight:500!important;
  letter-spacing:.075em!important;
  line-height:1.22!important;
  text-align:center;
  white-space:normal!important;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
  max-width:70%!important;
  color:#eef9ff!important;
  text-shadow:0 0 6px rgba(200,236,255,.22);
  transform:rotate(-5deg);
  transform-origin:50% 50%;
}
#outMeter .glass-knob .knob-name.kn-long{font-size:clamp(5px,9.6cqw,11px)!important;letter-spacing:.06em!important}
#outMeter .glass-knob .knob-name.kn-xlong{font-size:clamp(4.5px,8.6cqw,10px)!important;letter-spacing:.05em!important}
@media (max-width:720px){
  #outMeter .glass-knob .knob-name,
  #outMeter .glass-knob .hud-core .knob-name{transform:rotate(-4deg);max-width:74%!important}
}

/* ===== c14 (t4670): preset/genre buttons show the full name — no « …», wrap to 2 lines if needed ===== */
.groups .g{min-width:0;padding:8px 9px}
.groups .g b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:normal;word-break:keep-all;hyphens:none;font-size:12px;letter-spacing:0;line-height:1.2}
.groups .g small{white-space:nowrap;overflow:hidden;text-overflow:clip}
@media (max-width:520px){ .groups .g b{font-size:12.5px} }

/* c15 (André t4675u): clean, empty glowing wheel — no preset text inside the switch; the active preset lives in the wave window */
#outMeter .glass-knob .knob-kicker,
#outMeter .glass-knob .knob-name{display:none!important}
#outMeter .wave-preset{max-height:none;overflow:visible}

/* ===================== c16 — landing page (André t4673u) =====================
   Same design system as the c15 player: dark premium glass, thin type, official chassis plate in OFF/standby.
   Static only: no meters, no fake activity. All home functions/IDs unchanged. */
body.home-c16{background:
  radial-gradient(1200px 600px at 50% 38%, rgba(70,110,210,.16), transparent 60%),
  radial-gradient(900px 520px at 85% 8%, rgba(150,110,255,.10), transparent 62%),
  radial-gradient(800px 500px at 10% 20%, rgba(80,220,255,.07), transparent 60%),
  var(--night)}
body.home-c16 main.c16{width:min(1240px,100%);padding:6px clamp(18px,4vw,56px) 72px}
body.home-c16 .c16-hero{text-align:center;display:flex;flex-direction:column;align-items:center}
body.home-c16 .c16-hero .kicker{justify-content:center;font-weight:600;letter-spacing:.32em;color:#9fb1d6}
body.home-c16 .c16-hero h1{margin:20px 0 14px;font-size:clamp(40px,6.2vw,82px);font-weight:250;letter-spacing:-.045em;line-height:1.02}
body.home-c16 .c16-hero h1 span{display:inline;padding:0 .08em}
body.home-c16 .c16-hero .tag{margin:0 auto 6px;max-width:600px;font-size:16px;font-weight:350;color:#9eabc8;line-height:1.65}

/* Hero chassis — OFF plate with a faint static rim light */
body.home-c16 .c16-stage{position:relative;margin:clamp(6px,2vw,22px) auto 0;width:min(1060px,100%)}
body.home-c16 .c16-halo{position:absolute;left:8%;right:2%;top:18%;bottom:6%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(110,170,255,.20), rgba(150,110,255,.08) 55%, transparent 100%);filter:blur(28px);pointer-events:none}
body.home-c16 .c16-plate{position:relative;aspect-ratio:1774/540}
body.home-c16 .c16-plate img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
body.home-c16 .c16-off{filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
body.home-c16 .c16-rim{opacity:.38;mix-blend-mode:screen;filter:blur(.3px) drop-shadow(0 0 10px rgba(120,200,255,.35))}
body.home-c16 .c16-standby{position:absolute;left:24%;right:22%;top:43%;display:flex;align-items:center;justify-content:center;gap:.9em;
  font-size:clamp(6px,0.95vw,11px);letter-spacing:.34em;color:rgba(190,205,230,.55);text-transform:uppercase;pointer-events:none;white-space:nowrap}
body.home-c16 .c16-standby i{width:.55em;height:.55em;border-radius:50%;background:rgba(220,235,255,.55);box-shadow:0 0 6px rgba(200,225,255,.35)}
body.home-c16 .c16-standby em{font-style:normal;letter-spacing:.18em;color:rgba(160,178,210,.42)}
body.home-c16 .c16-floor{height:46px;margin:-26px 6% 0;border-radius:50%;background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);pointer-events:none}

/* Start card */
body.home-c16 .c16-start{width:min(720px,100%);margin:clamp(4px,1.4vw,14px) auto 0;padding:clamp(16px,2.2vw,24px);border-radius:26px;
  background:linear-gradient(160deg,rgba(30,40,80,.42),rgba(12,16,36,.38));border:1px solid rgba(200,220,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3)}
body.home-c16 .c16-start .entry{width:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);background:rgba(8,12,30,.55)}
body.home-c16 .c16-start .entry input{font-weight:350}
body.home-c16 .c16-start .cta{font-weight:700;letter-spacing:.02em}
body.home-c16 .c16-start .rights{margin:14px 2px 0;max-width:none;font-weight:350}
body.home-c16 .c16-extras{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(160,180,255,.10)}
body.home-c16 .c16-extras .home-addons{margin:0;max-width:440px;font-size:12.5px;line-height:1.55;font-weight:350;color:#8796bd}
body.home-c16 .c16-extras .home-tools{margin:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none}

/* Sections */
body.home-c16 .c16-how,body.home-c16 .c16-presets{margin:clamp(54px,7vw,96px) auto 0;width:min(1060px,100%)}
body.home-c16 .c16-how .kicker,body.home-c16 .c16-presets .kicker{justify-content:center;font-weight:600;letter-spacing:.32em;color:#9fb1d6}
body.home-c16 .c16-how h2,body.home-c16 .c16-presets h2{text-align:center;margin:14px 0 28px;font-size:clamp(26px,3.2vw,40px);font-weight:250;letter-spacing:-.03em;color:#eef3ff}
body.home-c16 .c16-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.home-c16 .c16-steps li,body.home-c16 .c16-genre{position:relative;padding:22px 22px 20px;border-radius:20px;
  background:linear-gradient(160deg,rgba(32,42,84,.34),rgba(12,16,36,.30));border:1px solid rgba(200,220,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body.home-c16 .c16-steps .n{display:block;font-size:12px;letter-spacing:.3em;color:#7fe0ff;font-weight:500;margin-bottom:14px}
body.home-c16 .c16-steps b{display:block;font-size:18px;font-weight:450;color:#f1f5ff;letter-spacing:-.01em}
body.home-c16 .c16-steps p{margin:8px 0 0;font-size:14px;line-height:1.6;color:#95a3c4;font-weight:350}
body.home-c16 .c16-genres{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
body.home-c16 .c16-genre{padding:16px 16px 14px;border-radius:16px}
body.home-c16 .c16-genre-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
body.home-c16 .c16-genre-head b{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#dfe8fb}
body.home-c16 .c16-genre-head small{font-size:11px;color:#7f8fb4;font-variant-numeric:tabular-nums}
body.home-c16 .c16-genre p{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:#93a1c2;font-weight:350}
body.home-c16 .c16-genre::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,220,255,.35),rgba(170,140,255,.30),transparent)}
body.home-c16 main.c16 > .foot{margin:56px auto 0;max-width:760px;text-align:center}

@media (max-width:900px){
  body.home-c16 .c16-genres{grid-template-columns:repeat(2,1fr)}
  body.home-c16 .c16-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  body.home-c16 main.c16{padding:0 16px 56px}
  body.home-c16 .c16-hero h1{font-size:clamp(36px,11vw,48px);margin:16px 0 12px}
  body.home-c16 .c16-hero h1 span{display:block}
  body.home-c16 .c16-hero .tag{font-size:15px}
  body.home-c16 .c16-stage{margin:10px -10px 0;width:auto}
  body.home-c16 .c16-standby{font-size:6px;letter-spacing:.28em;gap:.7em}
  body.home-c16 .c16-standby em{display:none}
  body.home-c16 .c16-floor{height:26px;margin-top:-14px}
  body.home-c16 .c16-start{padding:14px;border-radius:22px}
  body.home-c16 .c16-extras{flex-direction:column;align-items:stretch}
  body.home-c16 .c16-extras .home-tools{justify-content:flex-start}
  body.home-c16 .c16-genres{grid-template-columns:1fr 1fr;gap:10px}
  body.home-c16 .c16-genre{padding:13px 13px 12px}
  body.home-c16 .c16-steps li{padding:18px}
}
body.home-c16 .c16-start #ts:empty,body.home-c16 .c16-start #msg:empty{display:none}
body.home-c16 .c16-stage{width:min(1000px,100%)}
@media (max-width:560px){
  body.home-c16 .c16-start .cta{min-width:104px;height:50px}
  body.home-c16 .c16-start .entry input{font-size:14px;padding:14px 8px}
}

/* ===================== c17 — Three states + GlowKit v2 (André t4676u) =====================
   One stable hardware base (kit 01_OFF_ALPHA) + separate layers: table glow SVG, edge light, vector logo SVG,
   VU / wave canvas, preset ring. States: OFF (data-power=off) · ON/KLAR (on + no signal) · I DRIFT (on + real signal). */
#outMeter .chassis-stage{isolation:isolate}
#outMeter .c17-table-glow{
  position:absolute;z-index:0;left:4%;width:92%;bottom:-17%;height:44%;
  object-fit:fill;pointer-events:none;user-select:none;display:block;
  opacity:0;transition:opacity 1.3s ease;
}
#outMeter .chassis-stage .plate-off{z-index:1}
#outMeter .chassis-stage .plate-on.c17-edge{z-index:2;opacity:0;transition:opacity 1.1s ease}
#outMeter .c17-logo{
  position:absolute;z-index:5;left:16.4%;top:35.1%;width:13%;height:auto;display:block;
  pointer-events:none;user-select:none;opacity:.88;transform:rotate(-.7deg);transform-origin:0 50%;
}
@media (max-width:720px){
  #outMeter .c17-logo{left:6.15%;top:8.6%;width:13.2%;transform:none}
  #outMeter .c17-table-glow{left:3%;width:94%;bottom:-34%;height:52%}
}
/* glass silhouette of the new base */
#outMeter .glass-clip{
  -webkit-mask-image:url(/img/c17-glass-mask-angled.png?v=20261110c18);
  mask-image:url(/img/c17-glass-mask-angled.png?v=20261110c18);
}
@media (max-width:720px){
  #outMeter .glass-clip{
    -webkit-mask-image:url(/img/glass-mask-front.png?v=20261110c18);
    mask-image:url(/img/glass-mask-front.png?v=20261110c18);
  }
}
/* preset ring re-aligned to the engraved circle of the new base (ellipse 210×222 at 1570,304) */
@media (min-width:721px){
  #outMeter .glass-knob,
  #outMeter #presetKnobWrap.glass-knob,
  #presetKnobWrap.glass-knob{left:82.58%!important;top:35.74%!important;width:11.84%!important;height:41.11%!important}
}

/* —— OFF: fully black glass, nothing lit —— */
#outMeter[data-power="off"] .c17-edge,
#outMeter[data-power="off"]:not(.meter-idle) .plate-on{opacity:0!important}
#outMeter[data-power="off"] .c17-table-glow{opacity:0!important}
#outMeter[data-power="off"] .glass-clip{opacity:0!important}
#outMeter[data-power="off"] .glass-clip .glass-layer,
#outMeter[data-power="off"] .glass-clip .glass-knob{pointer-events:none!important}

/* —— ON / KLAR: thin cyan–violet edge, faint outer glow, ring + preset name, no wave/VU —— */
#outMeter[data-power="on"] .plate-on.c17-edge{opacity:1}
#outMeter[data-power="on"] .c17-table-glow{opacity:.62}
#outMeter[data-power="on"] .glass-clip{opacity:1}
#outMeter[data-power="on"] .glass-clip .glass-knob{pointer-events:auto}
#outMeter[data-power="on"].meter-idle .glass-layer,
#outMeter[data-power="on"].no-signal .glass-layer{opacity:1}
#outMeter[data-power="on"] .glass-scope,
#outMeter[data-power="on"] .glass-read{transition:opacity 1.2s ease}
#outMeter[data-power="on"].meter-idle .glass-scope,
#outMeter[data-power="on"].no-signal .glass-scope,
#outMeter[data-power="on"].meter-idle .glass-read .glass-vu,
#outMeter[data-power="on"].no-signal .glass-read .glass-vu{opacity:0}
#outMeter[data-power="on"].meter-idle .wave-preset,
#outMeter[data-power="on"].no-signal .wave-preset{opacity:.72}

/* —— I DRIFT: real signal → wave, VU, light (inline opacity follows the processed level) —— */
#outMeter[data-power="on"]:not(.meter-idle):not(.no-signal) .c17-table-glow{opacity:.78}
#outMeter[data-power="on"]:not(.meter-idle):not(.no-signal) .c17-table-glow{transition:opacity .45s linear}

/* Active preset in the wave window: small, slightly tilted; wheel stays clean (t4675u) */
#outMeter .wave-preset{transform:rotate(-4.5deg);transform-origin:50% 50%;transition:opacity 1s ease}
#outMeter .wave-preset-name{font-size:max(7px,5.6cqh)!important;font-weight:500!important;letter-spacing:.12em!important}
#outMeter .wave-preset-group{font-size:max(5.5px,3.9cqh)!important;font-weight:500!important;letter-spacing:.2em!important}

/* Subtle static grid behind the living network (fades out at the glass ends; never moves by itself) */
#outMeter .glass-layer::before{
  content:"";position:absolute;left:20%;right:18%;top:12%;bottom:14%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(140,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.045) 1px,transparent 1px);
  background-size:4.2% 16%;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);
  opacity:0;transition:opacity 1.4s ease;
}
#outMeter[data-power="on"]:not(.meter-idle):not(.no-signal) .glass-layer::before{opacity:1}
/* c17 header: the kit's vector logo, identical to the one on the glass */
.logo.c17-navlogo img{display:block;width:clamp(150px,15vw,206px);height:auto}
/* c17 landing hero: ON/KLAR state of the same base (static, no meters) */
body.home-c16 .c16-plate{isolation:isolate}
body.home-c16 .c16-plate img.c17-hero-glow{position:absolute;z-index:0;left:4%;width:92%;top:auto;bottom:-17%;height:44%;object-fit:fill;opacity:.66;pointer-events:none}
body.home-c16 .c16-off{z-index:1}
body.home-c16 .c16-rim{z-index:2;opacity:1!important;filter:none!important}
body.home-c16 .c17-hero-logo{position:absolute!important;z-index:3;left:16.4%!important;top:35.1%!important;width:13%!important;height:auto!important;inset:auto;opacity:.88;transform:rotate(-.7deg);transform-origin:0 50%}
body.home-c16 .c16-halo{opacity:.55}
body.home-c16 .c16-floor{display:none}

@media (max-width:720px){
  #outMeter .player-alias-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
}


/* ===== c18 (t4691u): mobile chassis same width as the cards, perfectly straight-on =====
   The c12 100vw breakout made the front plate bleed past the cards (~20px each side
   at 412px). Keep the official front plate, living waves, VU and clean wheel, but
   size the stage to the same content box as .status-row / .card. Desktop (721px+)
   stays the angled c17 layout, unchanged. */
@media (max-width:720px){
  .play-main > #meterMount{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-top:4px!important;
    margin-bottom:6px!important;
    padding:0!important;
    box-sizing:border-box;
  }
  #outMeter .chassis-stage,
  #outMeter .chassis-stage .plate-off,
  #outMeter .chassis-stage .plate-on,
  #outMeter .c17-logo,
  #outMeter .glass-clip{
    transform:none;
  }
  #outMeter .glass-layer{
    transform:none;
  }
}