/* ============================================================
   MIXLAR MIX DEMO — Immersive full-screen experience
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#08080a;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#fff;user-select:none;-webkit-user-select:none}

/* ════ PICKER ════ */
.picker{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#08080a;position:relative;overflow:hidden}
.picker::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(212,43,43,.08),transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none;animation:pk-pulse 6s ease-in-out infinite}
@keyframes pk-pulse{0%,100%{opacity:.6;transform:translate(-50%,-55%) scale(1)}50%{opacity:1;transform:translate(-50%,-55%) scale(1.15)}}

.picker__in{text-align:center;padding:2rem;position:relative;z-index:2;max-width:900px;width:100%}
.picker__logo{font-size:1.6rem;font-weight:800;color:rgba(255,255,255,.15);margin-bottom:1rem;letter-spacing:-.02em}
.picker__logo span{color:#D42B2B}
.picker__in h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.04em;margin-bottom:.6rem;background:linear-gradient(180deg,#fff 40%,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.15}
.picker__sub{font-size:clamp(.85rem,1.5vw,1rem);color:rgba(255,255,255,.3);margin-bottom:3rem;font-weight:400}
.picker__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;padding:0 1rem}

.pk{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:1.5rem 1.2rem 1.2rem;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:.8rem;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.pk::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 80%,rgba(212,43,43,.06),transparent 70%);opacity:0;transition:opacity .4s}
.pk:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);transform:translateY(-8px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 40px rgba(212,43,43,.05);color:#fff}
.pk:hover::before{opacity:1}

/* Label under screen */
.pk__label{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:.4rem;transition:color .4s}
.pk__label i{font-size:.9rem;color:rgba(255,255,255,.25);transition:color .4s}
.pk:hover .pk__label{color:#fff}
.pk:hover .pk__label i{color:#D42B2B}

/* ── Mini monitor ── */
.pk__screen{display:flex;flex-direction:column;align-items:center;width:100%}
.pk__monitor{width:100%;aspect-ratio:16/10;background:#111;border-radius:6px;border:2px solid rgba(255,255,255,.06);overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s,box-shadow .4s}
.pk:hover .pk__monitor{border-color:rgba(255,255,255,.12);box-shadow:0 0 30px rgba(0,0,0,.5)}
.pk__stand{width:30%;height:4px;background:rgba(255,255,255,.06);border-radius:0 0 3px 3px;margin-top:-1px}

/* Titlebar */
.pk__titlebar{display:flex;align-items:center;gap:3px;padding:4px 6px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.pk__dot{width:5px;height:5px;border-radius:50%}
.pk__dot--r{background:#ff5f57}
.pk__dot--y{background:#febc2e}
.pk__dot--g{background:#28c840}
.pk__app{font-size:.4rem;color:rgba(255,255,255,.3);margin-left:4px;font-weight:600}

/* Desktop area */
.pk__desktop{flex:1;display:flex;gap:3px;padding:4px;position:relative}
.pk__win{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:rgba(255,255,255,.4)}

/* Gaming */
.pk__desktop--gaming{flex-direction:row}
.pk__desktop--gaming .pk__win--game{flex:2;background:linear-gradient(135deg,#1a1520,#2a1a2a);color:rgba(255,107,53,.5)}
.pk__desktop--gaming .pk__win--game i{font-size:1.2rem}
.pk__desktop--gaming .pk__win--discord{flex:1;background:linear-gradient(135deg,#1a1a2e,#2a2040);color:rgba(88,101,242,.6)}

/* Streaming */
.pk__desktop--stream{flex-direction:row}
.pk__desktop--stream .pk__win--obs{flex:2;background:linear-gradient(135deg,#1a1418,#2a1a1e);display:flex;align-items:center;justify-content:center;gap:3px;font-size:.35rem;font-weight:800;color:rgba(229,57,53,.7)}
.pk__desktop--stream .pk__win--chat{flex:1;background:linear-gradient(135deg,#141820,#1a2030);color:rgba(255,255,255,.2)}

/* Work */
.pk__desktop--work{flex-direction:row}
.pk__desktop--work .pk__win--zoom{flex:2;background:linear-gradient(135deg,#101828,#1a2540);color:rgba(45,140,255,.5)}
.pk__desktop--work .pk__win--zoom i{font-size:1rem}
.pk__desktop--work .pk__win--slack{flex:1;background:linear-gradient(135deg,#1a1220,#2a1830);color:rgba(224,30,90,.4)}

/* Music / DAW */
.pk__desktop--music{flex-direction:column}
.pk__desktop--music .pk__win--daw{flex:1;background:linear-gradient(135deg,#12181a,#1a2220);padding:6px}
.pk__bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;width:100%}
.pk__bars span{display:block;width:14%;border-radius:2px 2px 0 0;transition:height .3s}
.pk__bars span:nth-child(1){height:60%;background:rgba(224,96,96,.4)}
.pk__bars span:nth-child(2){height:80%;background:rgba(249,158,26,.4)}
.pk__bars span:nth-child(3){height:45%;background:rgba(76,175,80,.4)}
.pk__bars span:nth-child(4){height:90%;background:rgba(80,144,224,.4)}
.pk__bars span:nth-child(5){height:55%;background:rgba(180,80,220,.4)}

/* ════ EXPERIENCE ════ */
.exp{height:100vh;display:flex;align-items:center;justify-content:center;background:#08080a;position:relative;overflow:hidden;opacity:0;transition:opacity .6s ease}
.exp.visible{opacity:1}

/* Ambient glow behind device */
.exp__glow{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:1}
.exp__glow::before{content:'';position:absolute;width:60vw;height:60vh;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(120px);opacity:.15;transition:background 1s ease}
.exp__glow.gaming::before{background:radial-gradient(circle,#ff6b35,#5865F2)}
.exp__glow.streaming::before{background:radial-gradient(circle,#E53935,#F99E1A)}
.exp__glow.work::before{background:radial-gradient(circle,#2D8CFF,#1DB954)}
.exp__glow.music::before{background:radial-gradient(circle,#E06060,#4CAF50)}

/* Toasts */
.toasts{position:fixed;top:1.5rem;right:1.5rem;z-index:100;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{padding:.6rem 1.2rem;border-radius:12px;font-size:.75rem;font-weight:600;backdrop-filter:blur(16px);opacity:0;transform:translateX(30px);animation:ti .4s ease forwards;white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.toast i{font-size:.65rem}
.toast--ok{background:rgba(40,200,64,.12);color:#28c840;border:1px solid rgba(40,200,64,.15)}
.toast--warn{background:rgba(212,43,43,.12);color:#D42B2B;border:1px solid rgba(212,43,43,.15)}
.toast--info{background:rgba(90,150,255,.1);color:#5a96ff;border:1px solid rgba(90,150,255,.12)}
@keyframes ti{to{opacity:1;transform:translateX(0)}}
.toast.out{animation:to .3s ease forwards}
@keyframes to{to{opacity:0;transform:translateX(30px)}}

/* ════ LAYOUT: device center, panels on sides ════ */
.exp__layout{display:flex;align-items:center;justify-content:center;gap:2.5rem;position:relative;z-index:10;width:100%;max-width:1400px;padding:0 2rem;height:100vh}

/* Side panels */
.side-panel{display:flex;flex-direction:column;gap:1.2rem;width:220px;flex-shrink:0;opacity:0;transform:translateX(-20px);transition:all .7s cubic-bezier(.16,1,.3,1) .3s}
.side-panel--right{transform:translateX(20px)}
.side-panel--right .sp-card{animation-delay:.5s}
.exp.visible .side-panel{opacity:1;transform:translateX(0)}

.sp-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:1.2rem;transition:all .3s}
.sp-card:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.sp-card__icon{font-size:1rem;color:#D42B2B;margin-bottom:.6rem;opacity:.7}
.sp-card__title{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:.3rem}
.sp-card__desc{font-size:.65rem;color:rgba(255,255,255,.3);line-height:1.5}

/* ════ TUTORIAL ════ */
.tut{position:absolute;inset:0;z-index:50;pointer-events:none}
.tut.hidden{display:none}
.tut__bubble{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);background:rgba(22,20,18,.95);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.4rem 1.8rem;max-width:480px;width:92%;pointer-events:auto;box-shadow:0 24px 80px rgba(0,0,0,.7);z-index:51;animation:fu .5s ease;backdrop-filter:blur(20px)}
@keyframes fu{from{opacity:0;transform:translateX(-50%) translateY(15px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.tut__step{font-size:.55rem;font-weight:700;color:#D42B2B;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.tut__text{font-size:.85rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.1rem}
.tut__text b{color:#fff}
.tut__btns{display:flex;justify-content:space-between;align-items:center}
.tut__skip{background:none;border:none;font-family:inherit;font-size:.65rem;color:#555;cursor:pointer;padding:.3rem 0;transition:color .15s}
.tut__skip:hover{color:#999}
.tut__next{background:#D42B2B;color:#fff;border:none;font-family:inherit;font-size:.72rem;font-weight:600;padding:.55rem 1.4rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .15s}
.tut__next:hover{background:#b82424;transform:translateY(-1px)}
.tut__ring{position:absolute;border:2px solid rgba(212,43,43,.5);border-radius:14px;box-shadow:0 0 0 4000px rgba(0,0,0,.5);transition:all .5s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:49}

/* ════ EXPERIENCE MONITOR ════ */
.exp__center{display:flex;flex-direction:column;align-items:center;gap:.8rem;flex-shrink:0}
.exp__monitor{display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .6s .2s}
.exp.visible .exp__monitor{opacity:1}
.exp__mon-inner{width:min(400px,38vw);aspect-ratio:16/10}
.exp__mon-stand{width:50px;height:5px;background:rgba(255,255,255,.06);border-radius:0 0 3px 3px;margin-top:-1px}

/* ════ DEVICE ════ */
.device{position:relative;z-index:10;flex-shrink:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:0;transform:scale(.92)}
.exp.visible .device{opacity:1;transform:scale(1)}
.device__bezel{background:linear-gradient(145deg,#1e1c1a,#161412);border:2px solid rgba(255,255,255,.04);border-radius:24px;padding:12px;box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.03),0 0 80px rgba(0,0,0,.4)}

/* ── SCREEN ── */
.screen{background:#1c1c1e;border-radius:16px;overflow:hidden;width:min(680px,55vw);aspect-ratio:auto}

.s-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem .35rem}
.s-logo{font-size:.85rem;font-weight:800}.s-logo span{color:#D42B2B}
.s-badge{font-size:.38rem;font-weight:700;color:#28c840;border:1.5px solid #28c840;border-radius:4px;padding:.08rem .4rem;letter-spacing:.04em;display:flex;align-items:center;gap:.2rem}
.s-badge i{font-size:.32rem}
.s-master{font-size:.5rem;color:#666;margin-left:.2rem}

/* Body */
.s-body{display:grid;grid-template-columns:.85fr 1fr;padding:.2rem .6rem .35rem;gap:.5rem;min-height:280px}

/* ── Sliders ── */
.s-sliders{display:flex;justify-content:space-around;gap:.25rem;padding:.15rem 0}
.sl{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}
.sl__track{width:6px;flex:1;background:rgba(255,255,255,.08);border-radius:4px;position:relative;cursor:pointer;touch-action:none;min-height:170px;transition:background .2s}
.sl__track:hover{background:rgba(255,255,255,.12)}
.sl__fill{position:absolute;bottom:0;left:0;right:0;border-radius:4px;transition:height .08s}
.sl__thumb{position:absolute;left:50%;transform:translate(-50%,50%);width:18px;height:18px;background:radial-gradient(circle at 40% 35%,#fff,#bbb);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.7);cursor:grab;transition:bottom .08s;touch-action:none;z-index:2}
.sl__thumb:active{cursor:grabbing;box-shadow:0 2px 14px rgba(0,0,0,.9),0 0 0 4px rgba(255,255,255,.08)}
.sl__icon{font-size:.55rem;color:rgba(255,255,255,.2);height:18px;display:flex;align-items:center;justify-content:center}
.sl__name{font-size:.38rem;font-weight:600;color:rgba(255,255,255,.25);white-space:nowrap}

/* ── Right column ── */
.s-right{display:flex;flex-direction:column;gap:.3rem;min-height:0}

/* Widget — fill all available space */
.s-widget{background:rgba(255,255,255,.03);border-radius:12px;position:relative;overflow:hidden;flex:1 1 0;min-height:150px;cursor:pointer;display:flex;flex-direction:column}

/* Macro wrap: grid + dots underneath */
.s-macro-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.s-macro-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:4px;width:100%}
.s-pdots{display:flex;gap:5px;justify-content:center}
.s-pd{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.06);transition:background .3s}
.s-pd.on{background:#D42B2B}

/* Macro button */
.mc{background:rgba(255,255,255,.03);border-radius:10px;font-size:.48rem;font-weight:600;color:rgba(255,255,255,.4);text-align:center;padding:.55rem .3rem;cursor:pointer;transition:all .15s;font-family:'Montserrat','Inter',sans-serif;text-transform:uppercase;letter-spacing:.02em;border:1px solid rgba(255,255,255,.04);white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.3rem}
.mc i{font-size:.44rem;opacity:.5}
.mc:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.08);transform:translateY(-1px)}
.mc:active,.mc.flash{background:rgba(212,43,43,.15);color:#fff;border-color:rgba(212,43,43,.25);transform:scale(.94)}

/* ── FIRMWARE WIDGETS ── */
.fw{position:absolute;inset:0;padding:.6rem;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s;font-family:'Montserrat','Inter',sans-serif}
.fw.on{opacity:1;pointer-events:auto;position:relative;flex:1}

/* Spotify */
.fw[data-w="spotify"]{background:#2A2430;border-radius:12px;overflow:hidden;position:relative}
.fw[data-w="spotify"]::before{content:'';position:absolute;inset:-12px;background:linear-gradient(135deg,#1DB954,#191414 50%,#2A2430);z-index:0}
.fw[data-w="spotify"]::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}
.fw-st,.fw-sa,.fw-sb{position:relative;z-index:2}
.fw-st{font-size:1rem;font-weight:700;color:#fff;text-align:center;margin-top:auto}
.fw-sa{font-size:.55rem;color:#aaa;text-align:center;margin-bottom:.5rem}
.fw-sb{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.fw-sf{height:100%;width:35%;background:#1DB954;border-radius:2px;transition:width .3s}

/* Stats */
.fw[data-w="stats"]{gap:.5rem;padding:.7rem}
.fw-row{display:flex;align-items:center;gap:.4rem}
.fw-row-lbl{font-size:.52rem;font-weight:700;width:34px;flex-shrink:0}
.fw-row-bar{flex:1;height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.fw-row-fill{height:100%;border-radius:3px;transition:width 1s}
.fw-row-v{font-size:.46rem;color:#666;width:30px;text-align:right;font-variant-numeric:tabular-nums}

/* Clock */
.fw[data-w="clock"]{align-items:center;text-align:center;gap:.4rem}
.fw-ck{font-size:2.8rem;font-weight:800;color:#fff;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fw-cd{font-size:.5rem;color:#5EC4C4;background:#1A3A3A;padding:.18rem .7rem;border-radius:8px}

/* Weather */
.fw[data-w="weather"]{gap:.15rem;padding:.6rem}
.fw-wt{font-size:2rem;font-weight:800;color:#fff;line-height:1}
.fw-wt span{font-size:.6rem;color:#888}
.fw-wl{font-size:.5rem;color:#ccc}
.fw-wp{font-size:.42rem;color:#B0DCF0;background:#1A2A3A;padding:.14rem .6rem;border-radius:7px;margin-top:auto;align-self:center}

/* Gaming */
.fw[data-w="gaming"]{align-items:center;text-align:center;gap:.25rem}
.fw-gp{font-size:2rem;font-weight:800;color:#fff;line-height:1}
.fw-gp span{font-size:.65rem;color:#00FF66;font-weight:600}
.fw-gpill{font-size:.42rem;font-weight:700;color:#00FF66;background:rgba(0,255,102,.06);padding:.12rem .6rem;border-radius:8px}
.fw-gg{display:flex;gap:.8rem;margin-top:.2rem}
.fw-gg>div{display:flex;flex-direction:column;align-items:center;gap:.04rem}
.fw-gg .gl{font-size:.32rem;color:#666}
.fw-gg .gv{font-size:.55rem;font-weight:700}
.fw-gg .gu{font-size:.28rem;color:#555}

/* OBS */
.fw[data-w="obs"]{gap:.2rem;padding:.6rem}
.fw-ob-top{display:flex;justify-content:space-between;align-items:center}
.fw-ob-dur{font-size:1.4rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.fw-ob-live{font-size:.42rem;font-weight:800;color:#fff;background:#E53935;padding:.12rem .4rem;border-radius:6px;display:flex;align-items:center;gap:.2rem}
.fw-ob-live i{font-size:.32rem}
.fw-ob-sc{font-size:.58rem;color:#ccc;font-weight:600}
.fw-ob-pill{font-size:.38rem;color:#8e8e93;background:rgba(255,255,255,.03);padding:.14rem .5rem;border-radius:8px;text-align:center;align-self:center;margin-top:auto}

/* Smart Home */
.fw[data-w="home"]{padding:.35rem}
.fw-hg{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;height:100%}
.fw-ht{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:.3rem .35rem;font-size:.46rem;font-weight:600;color:#666;transition:all .2s;cursor:pointer;display:flex;align-items:center;gap:.3rem}
.fw-ht i{font-size:.44rem;opacity:.4}
.fw-ht.on{color:#28c840;border-color:rgba(40,200,64,.2);background:rgba(40,200,64,.04)}
.fw-ht.on i{opacity:1;color:#28c840}

/* Buddy */
.fw[data-w="buddy"]{align-items:center;gap:.3rem;background:#1A1A1E;border-radius:12px}
.fw-bf{width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;cursor:pointer;transition:transform .3s}
.fw-bf:hover{transform:scale(1.08)}
.fw-be{display:flex;gap:14px}
.fw-be span{width:9px;height:13px;background:#fff;border-radius:50%;display:block;animation:bl 4s ease infinite}
@keyframes bl{0%,45%,55%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
.fw-bm{width:11px;height:5px;border-bottom:2px solid rgba(255,255,255,.4);border-radius:0 0 50% 50%}
.fw-blbl{font-size:.44rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.06em}

/* Stocks */
.fw[data-w="stocks"]{gap:.25rem;padding:.6rem}
.fw-stk-main{background:rgba(255,255,255,.03);border-radius:10px;padding:.4rem .5rem}
.fw-stk-t{font-size:.46rem;font-weight:600;color:#00FF66;display:flex;align-items:center;gap:.25rem}
.fw-stk-t i{font-size:.38rem}
.fw-stk-r{display:flex;justify-content:space-between;align-items:baseline;margin-top:.2rem}
.fw-stk-p{font-size:1.1rem;font-weight:700;color:#fff}
.fw-stk-c{font-size:.52rem;font-weight:700;color:#00FF66;display:flex;align-items:center;gap:.18rem}
.fw-stk-c i{font-size:.38rem}

/* Printer */
.fw[data-w="printer"]{gap:.15rem;padding:.6rem}
.fw-pr-top{display:flex;justify-content:space-between;align-items:center}
.fw-pr-f{font-size:.46rem;color:#ccc;font-weight:600}
.fw-pr-badge{font-size:.38rem;font-weight:800;color:#fff;background:rgba(255,255,255,.06);padding:.1rem .35rem;border-radius:6px}
.fw-pr-big{font-size:1.7rem;font-weight:800;color:#fff}
.fw-pr-eta{font-size:.46rem;color:#666}
.fw-pr-bar{height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden;margin-top:auto}
.fw-pr-fill{height:100%;background:#00AED6;border-radius:3px;transition:width .5s}

/* ── Scenario tabs (bottom bar) ── */
.scene-tabs{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:30;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:.4rem .5rem;backdrop-filter:blur(16px)}
.scene-tab{background:none;border:1px solid transparent;border-radius:10px;padding:.45rem 1rem;font-family:inherit;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.3);cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:.4rem}
.scene-tab i{font-size:.7rem}
.scene-tab:hover{color:rgba(255,255,255,.6)}
.scene-tab.active{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}

/* ── Back button ── */
.back{position:absolute;top:1.2rem;left:1.2rem;font-size:.65rem;font-weight:600;color:rgba(255,255,255,.25);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:.5rem 1rem;cursor:pointer;font-family:inherit;transition:all .2s;z-index:30;display:flex;align-items:center;gap:.4rem;backdrop-filter:blur(12px)}
.back:hover{background:rgba(255,255,255,.06);color:#fff}

/* ── Scene title (top center) ── */
.scene-title{position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);z-index:30;text-align:center;opacity:0;transition:opacity .5s .2s}
.exp.visible .scene-title{opacity:1}
.scene-title__label{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:rgba(212,43,43,.6)}
.scene-title__name{font-size:1.1rem;font-weight:800;color:rgba(255,255,255,.8);letter-spacing:-.02em}

/* ════ RESPONSIVE ════ */
@media(max-width:1100px){
    .side-panel{display:none}
    .exp__layout{gap:0}
    .screen{width:min(680px,88vw)}
    .exp__mon-inner{width:min(400px,70vw)}
}
@media(max-width:768px){
    .exp__monitor{display:none}
}
@media(max-width:640px){
    .screen{width:96vw}
    .s-body{min-height:200px}
    .sl__track{min-height:120px}
    .picker__row{grid-template-columns:1fr 1fr;gap:.6rem}
    .pk{padding:1.8rem 1rem}
    .pk i{font-size:1.8rem}
    .tut__bubble{bottom:3%;padding:1rem 1.2rem}
    .scene-tabs{bottom:.8rem;gap:.3rem;padding:.3rem}
    .scene-tab{padding:.35rem .6rem;font-size:.6rem}
    .scene-tab span{display:none}
}
@media(max-width:400px){
    .pk{padding:1.4rem .8rem}
    .pk__desc{display:none}
}