/* 320 FM · IN MOTION / ISOLATED DESIGN STUDY */
:root {color-scheme:dark; font-family:Inter,"Arial",sans-serif; background:#090d16; -webkit-font-smoothing:antialiased;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090d16;color:#f1f2ef}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent,#a85c95);outline-offset:5px}
::selection{background:#8d568a;color:#081012}
#app{min-height:100vh}
.prototyp{--accent:#a85c95;--accent-soft:#c897be;--accent-rgb:168,92,149;position:relative;isolation:isolate;overflow:hidden;min-height:100vh;background:radial-gradient(ellipse 82% 58% at 91% 29%,rgba(var(--accent-rgb),.07),transparent 58%),#090d16;transition:background 900ms ease}
.prototyp:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5;background-image:linear-gradient(90deg,rgba(201,211,228,.016) 1px,transparent 1px),linear-gradient(0deg,rgba(201,211,228,.016) 1px,transparent 1px);background-size:94px 94px;mask-image:linear-gradient(90deg,transparent,black 22%,black 90%,transparent)}
.w{max-width:1440px;padding:0 clamp(22px,5vw,76px);margin:0 auto}
.micro,.mono{font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.mono{font-family:"Inter",Arial,sans-serif}
.muted{color:#8b999d}
.rule{border:0;border-top:1px solid rgba(211,215,234,.14);margin:0}



.signal-led{display:inline-block;width:6px;height:6px;flex:none;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(var(--accent-rgb),.13);animation:pulse 2.8s ease-in-out infinite}
.nav{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(221,237,235,.15)}
.logo{width:140px;min-width:120px;max-height:72px;display:flex;align-items:center;position:relative}
.logo img{display:block;width:100%;height:70px;object-fit:contain;object-position:left center;position:relative;z-index:2}
.logo-fallback{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;font-family:Inter,Arial,sans-serif;font-size:30px;font-weight:900;letter-spacing:-.065em;white-space:nowrap}
.logo.loaded .logo-fallback{display:none}
.logo.unavailable img{display:none}
.logo.unavailable .logo-fallback{display:block}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.6vw,41px)}
.navlinks a{position:relative;color:#b6c1c1;font-size:10px;font-weight:700;letter-spacing:.14em;transition:color .2s}
.navlinks a:hover{color:#fff}
.navlinks a:after{content:"";position:absolute;height:1px;background:var(--accent);bottom:-14px;left:0;right:100%;transition:right .22s}
.navlinks a:hover:after{right:0}
.navright{display:flex;align-items:center;gap:17px}

.head-live{border:1px solid #ffffff29;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s}
.head-live:hover{background:rgba(var(--accent-rgb),.16);border-color:var(--accent)}
.head-live svg{width:14px;height:14px;fill:var(--accent);margin-left:2px}




.hero{min-height:565px;display:grid;grid-template-columns:49% 51%;align-items:center;position:relative;padding:36px 0 20px}
.copy{position:relative;z-index:3;padding:34px 0 36px 24px;min-width:0}
.copy:before{content:"";position:absolute;left:0;top:28px;height:calc(100% - 56px);width:1px;background:linear-gradient(var(--accent),rgba(183,209,211,.14),transparent)}
.copy:after{content:"01  /  THE LIVE EXPERIENCE";position:absolute;left:-12px;top:48px;transform:translateX(-100%) rotate(-90deg);transform-origin:right center;font-size:9px;letter-spacing:.23em;color:#86999c;white-space:nowrap}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--accent);margin-bottom:21px}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--accent)}
.artist{font-size:clamp(50px,6.3vw,94px);line-height:.94;letter-spacing:-.078em;margin:0;white-space:nowrap;font-weight:750}
.artist span{display:block}
.artist .artist2{color:#dce3e3;font-weight:270;letter-spacing:-.072em}
.artist-wrap{animation:enter .65s cubic-bezier(.2,.75,.1,1) both}
.subtitle{margin:30px 0 0;font-size:clamp(17px,1.7vw,23px);font-weight:550;letter-spacing:-.035em;line-height:1.4}
.subline{font-size:12px;letter-spacing:.015em;color:#95a4a7;margin:10px 0 0;line-height:1.65}
.pills{display:flex;gap:8px;align-items:center;margin-top:23px;flex-wrap:wrap}
.pill{padding:8px 11px;border:1px solid #a6b9bd2d;border-radius:99px;font-size:9px;letter-spacing:.15em;color:#a6b9bd;font-weight:650}
.primaryrow{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:36px}
.playbutton{display:flex;gap:13px;align-items:center;border:0;background:none;padding:0;text-align:left}
.playcircle{width:61px;height:61px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#071014;box-shadow:0 12px 42px rgba(var(--accent-rgb),.17);transition:transform .25s,box-shadow .25s}
.playbutton:hover .playcircle{transform:scale(1.06);box-shadow:0 12px 52px rgba(var(--accent-rgb),.32)}
.playcircle svg{width:20px;height:20px;margin-left:2px;fill:#0e161b}
.playcopy strong{display:block;font-size:11px;letter-spacing:.18em;font-weight:750}
.playcopy small{display:block;margin-top:7px;color:#899b9e;font-size:11px;letter-spacing:.015em}
.nextlink{font-size:10px;letter-spacing:.13em;font-weight:700;color:#b1c5c5;border:0;border-bottom:1px solid #ffffff38;background:none;padding:12px 0 8px;display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.nextlink:hover{color:var(--accent)}
.nextlink svg{width:15px;height:15px}
.hero-art{min-width:0;height:540px;position:relative;display:grid;place-items:center;--x:0px;--y:0px;overflow:visible}
.art-glow{position:absolute;width:87%;aspect-ratio:1;max-height:100%;top:4%;left:5%;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18) 0%,rgba(var(--accent-rgb),.065) 32%,transparent 70%);filter:blur(10px);transition:background 1s}
.art-grid{position:absolute;width:73%;height:75%;top:9%;left:15%;border-radius:50%;border:1px solid #ffffff1a;box-shadow:0 0 0 45px #ffffff04,0 0 0 100px #ffffff02;transform:translate(var(--x),var(--y));transition:transform .6s ease}
.big320{font-weight:800;font-size:clamp(165px,18vw,295px);letter-spacing:-.14em;position:absolute;top:26%;left:51%;transform:translate(-51%,-8%);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(208,227,227,.19);opacity:.7;white-space:nowrap;pointer-events:none}
.orbit{position:absolute;width:340px;height:340px;max-width:73%;max-height:73%;border:1px solid rgba(206,222,223,.15);border-radius:50%;left:50%;top:51%;transform:translate(-50%,-50%) rotate(20deg)}
.orbit:before{content:"";position:absolute;width:8px;height:8px;background:var(--accent);top:13%;right:13%;border-radius:50%;box-shadow:0 0 24px var(--accent);transition:background .6s}
.orbit.two{width:440px;height:440px;border:1px dashed rgba(227,244,241,.15);transform:translate(-50%,-50%) rotate(-20deg);animation:spin 110s linear infinite}
.orbit.two:before{width:3px;height:3px;top:31%;left:4%;background:#daffff}
.wavebox{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 17px rgba(var(--accent-rgb),.15))}
.wavebox path{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:10 12;animation:waveflow 16s linear infinite}
.wavebox path:nth-child(2){stroke-width:1.3;animation-duration:19s;animation-direction:reverse}
.wavebox path:nth-child(3){stroke-width:1.1;animation-duration:13s;stroke-dasharray:3 14}
.wavebox path:nth-child(4){stroke-width:1;animation-duration:24s;animation-direction:reverse;stroke-dasharray:2 17}
/* Set cover stays in original square aspect ratio. Surface below is explicit demo artwork. */
.set-visual{position:absolute;z-index:4;left:52%;top:49%;width:clamp(205px,22vw,290px);transform:translate(-50%,-50%);animation:cover-in .75s cubic-bezier(.2,.7,.15,1) both}
.cover-surface{width:100%;aspect-ratio:1;position:relative;isolation:isolate;overflow:hidden;border:1px solid #f0f0f04a;box-shadow:0 34px 85px #000b,0 0 65px rgba(var(--accent-rgb),.17);background:radial-gradient(ellipse at 72% 25%,#4a2445 0%,transparent 55%),linear-gradient(150deg,#24142f 7%,#191626 44%,#0d1f30 100%)}
.cover-surface:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(116deg,transparent 0 14px,#ffffff06 14.5px 15px,transparent 15.5px 29px);opacity:.6}
.cover-surface:after{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse at 36% 70%,#6483bf2f,transparent 48%);mix-blend-mode:screen}
.cover-surface--martin{background:radial-gradient(ellipse at 68% 30%,#234656 0%,transparent 60%),linear-gradient(140deg,#102b38,#1d243c 60%,#09202c)}
.cover-surface--khabiar{background:radial-gradient(ellipse at 75% 25%,#433059 0%,transparent 60%),linear-gradient(145deg,#262044,#1b2137 55%,#101728)}
.cover-surface .cover-graphic{position:absolute;z-index:1;width:75%;height:75%;top:14%;left:13%;border:1px solid #ffffff22;border-radius:50%;box-shadow:0 0 0 22px #ffffff07,0 0 0 51px #ffffff04;transform:rotate(-20deg)}
.cover-surface .cover-graphic:before{content:"";position:absolute;inset:13%;border:1px dashed #ffffff45;border-radius:50%;animation:spin-cover 44s linear infinite}
.cover-surface .cover-graphic:after{content:"";position:absolute;width:20%;height:20%;border:1px solid #ffffff5b;border-radius:50%;top:40%;left:40%;background:rgba(var(--accent-rgb),.22);box-shadow:0 0 40px rgba(var(--accent-rgb),.45)}
.cover-surface .cover-identity{z-index:3;position:absolute;top:18px;left:17px;right:17px;font-size:10px;letter-spacing:.14em;line-height:1.35;color:#e5e9f0;font-weight:700;text-shadow:0 1px 15px #0008}
.cover-surface .cover-title{z-index:3;position:absolute;left:17px;right:17px;bottom:34px;font-size:clamp(22px,2vw,31px);line-height:1;letter-spacing:-.065em;font-weight:750;color:#f1f2f3;text-shadow:0 2px 15px #0007}
.cover-surface .cover-type{z-index:3;position:absolute;left:17px;right:17px;bottom:15px;font-size:9px;letter-spacing:.19em;color:#ffffffab}
.cover-frame{position:absolute;inset:-10px;border:1px solid rgba(var(--accent-rgb),.26);z-index:-1;pointer-events:none}
.cover-note{margin-top:18px;display:flex;justify-content:space-between;gap:8px;color:#d8dce4;font-size:9px;letter-spacing:.16em;font-weight:650}
.cover-note em{font-style:normal;color:#879aa7;font-weight:400}
.cover-surface.small{height:43px;width:43px;flex:none;box-shadow:none;border-color:#ffffff37}
.cover-surface.small .cover-graphic{box-shadow:none}
.cover-surface.small .cover-identity,.cover-surface.small .cover-title,.cover-surface.small .cover-type{display:none}
.hud{position:absolute;z-index:5;font-size:9px;letter-spacing:.19em;color:#bbccce;line-height:1.7}
.hud em{color:var(--accent);font-style:normal}
.hud-1{top:13%;right:1%;text-align:right}
.hud-2{bottom:13%;left:8%}
.hud-3{right:0;bottom:12%;text-align:right}
.hud-1:after,.hud-2:before{content:"";height:1px;width:58px;background:rgba(223,241,240,.3);display:block;margin-top:10px;margin-left:auto}
.hud-2:before{margin:0 0 10px}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff22;padding:16px 0;color:#849399}
.hero-bottom .left{display:flex;gap:19px;align-items:center}
.hero-bottom .left strong{color:#dce6e5;font-size:10px;letter-spacing:.17em}
.hero-bottom .right{display:flex;align-items:center;gap:10px}
.hero-bottom button{background:none;border:0;color:#899c9c;font-size:10px;letter-spacing:.12em;display:flex;align-items:center;gap:9px;padding:5px 0}
.hero-bottom button:hover{color:#fff}
.hero-bottom svg{width:16px;height:16px}
.timeline-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-top:68px;margin-bottom:22px}
.section-kicker{font-size:10px;letter-spacing:.24em;color:var(--accent);font-weight:750}
.timeline-head h2{font-size:clamp(24px,3vw,39px);line-height:1;letter-spacing:-.055em;font-weight:650;margin:14px 0 0}
.timeline-head a{font-size:11px;color:#a6b3b5;display:inline-flex;gap:11px;align-items:center;letter-spacing:.055em;transition:color .2s}
.timeline-head a:hover{color:#fff}
.timeline-head a svg{width:16px;height:16px}
.timegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ffffff2a;border-bottom:1px solid #ffffff2a}
.timeitem{padding:23px 27px 27px 25px;text-align:left;display:block;position:relative;min-width:0;background:none;border:0;border-left:1px solid #ffffff23;transition:background .28s}
.timeitem:first-child{border-left:0;padding-left:0}
.timeitem:hover{background:rgba(255,255,255,.022)}
.timeitem.active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.055),transparent 85%)}
.timeitem:before{content:"";height:2px;position:absolute;left:0;right:100%;top:-1px;background:var(--accent);transition:right .35s ease}
.timeitem.active:before{right:0}
.slot-top{display:flex;justify-content:space-between;align-items:center;gap:5px;color:#87979b;font-size:10px;letter-spacing:.15em}
.slot-index{color:#899c9f}
.timeitem.active .slot-top,.timeitem.active .slot-index{color:var(--accent)}
.slot-name{margin-top:21px;font-size:clamp(17px,2vw,24px);letter-spacing:-.045em;font-weight:650;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.slot-show{font-size:11px;color:#8c9ca0;margin-top:7px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.slot-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:27px}
.slot-footer small{font-size:9px;letter-spacing:.16em;color:#7e9094}
.slot-footer svg{width:17px;height:17px;color:#84999b;transition:transform .2s}
.timeitem:hover .slot-footer svg{transform:translateX(5px)}
.progress-line{height:2px;background:#ffffff22;position:relative;width:100%;margin-top:15px;overflow:hidden}
.progress-line div{height:100%;background:var(--accent);transition:width .65s linear}
.presentation{margin-top:78px;border-top:1px solid #ffffff21;display:grid;grid-template-columns:1.28fr .7fr;gap:50px;padding-top:27px;padding-bottom:130px}
.statement{font-size:clamp(27px,3.4vw,54px);line-height:1.06;letter-spacing:-.06em;font-weight:620;max-width:730px;margin:13px 0 21px}
.statement span{color:#74878c}
.presentation p{max-width:570px;font-size:13px;line-height:1.75;color:#84969b;margin:0}
.explore{display:grid;gap:0;align-self:center}
.explore a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #ffffff20;font-size:12px;color:#cfd6d5;transition:padding .2s,color .2s}
.explore a:hover{padding-left:8px;color:var(--accent)}
.explore a span{font-size:9px;letter-spacing:.13em;color:#7b9397}
.explore a svg{width:16px;height:16px}
.footer{padding-top:28px;padding-bottom:35px;border-top:1px solid #ffffff20;display:flex;align-items:center;justify-content:space-between;gap:22px;color:#7d9092;font-size:10px;letter-spacing:.11em}
.footer strong{color:#dde3e3;letter-spacing:.17em}
.preview-badge{position:fixed;z-index:30;bottom:92px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:15px;border:1px solid #ffffff2e;background:#172329ef;backdrop-filter:blur(18px);box-shadow:0 10px 35px #0007;border-radius:100px;padding:12px 19px;font-size:10px;line-height:1.35;letter-spacing:.055em;max-width:calc(100% - 28px);white-space:nowrap}
.preview-badge strong{font-size:9px;letter-spacing:.15em;color:var(--accent)}
.preview-badge button{border:0;background:none;color:#eef3f3;padding:0;display:flex;gap:8px;align-items:center;font-weight:700;font-size:10px;letter-spacing:.12em}
.preview-badge button:hover{color:var(--accent)}
.preview-badge svg{width:14px;height:14px}
.prototyp.paused *, .prototyp.paused *:before,.prototyp.paused *:after{animation-play-state:paused!important}
@keyframes enter{0%{opacity:0;transform:translateY(17px);filter:blur(5px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse{50%{opacity:.5;box-shadow:0 0 0 12px rgba(var(--accent-rgb),.03)}}
@keyframes waveflow{to{stroke-dashoffset:-264}}
@keyframes cover-in{from{opacity:0;transform:translate(-50%,-46%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes spin-cover{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(340deg)}}
@media(max-width:1150px){.nav{height:86px}.hero{grid-template-columns:48% 52%;min-height:505px}.artist{font-size:clamp(54px,7.2vw,92px)}.hero-art{height:465px}.copy:after{display:none}.art-grid{top:13%}.timeline-head{margin-top:52px}}
@media(max-width:800px){.w{padding:0 26px}.navlinks{gap:15px}.navlinks a{font-size:9px}.logo{width:116px;min-width:105px}.hero{grid-template-columns:1fr;min-height:unset;padding-top:35px}.copy{padding:35px 0 18px 18px}.artist{font-size:clamp(65px,11vw,100px)}.hero-art{height:365px}.artist-wrap{max-width:700px}.art-grid{width:50%;left:26%;top:10%;height:75%}.set-visual{width:245px}.orbit{width:260px;height:260px}.orbit.two{width:330px;height:330px}.big320{font-size:260px;left:50%;top:14%}.hud-2{left:7%}.timeitem{padding:22px 16px}.presentation{grid-template-columns:1fr;gap:30px;padding-bottom:125px}.footer{flex-wrap:wrap}.preview-badge{max-width:calc(100% - 20px)}}
@media(max-width:560px){.w{padding:0 19px}.nav{height:70px}.logo{width:105px;min-width:95px}.logo img{height:50px}.logo-fallback{font-size:24px}.navlinks{display:none}.head-live{width:40px;height:40px}.hero{padding-top:15px}.copy{padding-top:43px}.eyebrow{font-size:9px;letter-spacing:.18em}.artist{font-size:clamp(56px,12vw,73px)}.subtitle{margin-top:25px;font-size:17px}.subline{font-size:11px}.pills{margin-top:18px}.primaryrow{margin-top:26px;gap:21px}.playcircle{width:54px;height:54px}.playcopy small{font-size:10px}.nextlink{font-size:9px}.hero-art{height:270px;margin-top:-8px}.art-grid{width:57%;left:22%;top:7%;height:86%}.big320{font-size:210px;top:20%}.orbit{width:200px;height:200px}.orbit.two{width:260px;height:260px}.set-visual{width:176px}.cover-identity{font-size:8px}.cover-surface .cover-title{font-size:21px}.cover-note{font-size:8px}.cover-surface .cover-identity{font-size:8px}.cover-surface .cover-graphic{box-shadow:0 0 0 13px #ffffff08,0 0 0 28px #ffffff05}.hud{font-size:7px}.hud-1{top:4%;right:2%}.hud-2{bottom:6%;left:0}.hud-3{right:0;bottom:6%}.hero-bottom{font-size:9px}.hero-bottom .left{gap:10px}.hero-bottom .left strong{font-size:9px}.hero-bottom .right button{font-size:0}.hero-bottom svg{width:19px;height:19px}.timeline-head{margin-top:54px;margin-bottom:20px}.timeline-head h2{font-size:31px}.timeline-head a{font-size:10px}.timegrid{grid-template-columns:1fr}.timeitem{border-left:0!important;border-top:1px solid #ffffff1f;padding:20px 5px!important}.timeitem:first-child{border-top:0}.slot-top{font-size:9px}.slot-name{font-size:21px;margin-top:12px}.slot-footer{margin-top:14px}.progress-line{margin-top:11px}.presentation{margin-top:65px}.statement{font-size:34px}.footer{font-size:9px}.preview-badge{position:fixed;transform:translateX(-50%);bottom:83px;margin:0 auto;width:calc(100% - 38px);max-width:none;border-radius:9px;gap:8px;justify-content:space-between;white-space:normal;padding:11px}.preview-badge .explain{display:none}.preview-badge button{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Single-line player: fixed, matching the selected cover. Links to actual station. */
.preview-player{position:sticky;z-index:20;bottom:0;background:#0d1420f2;border-top:1px solid #ffffff22;backdrop-filter:blur(18px);width:100%;box-shadow:0 -12px 42px #0004}
.player-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.player-left{display:flex;align-items:center;gap:15px;min-width:0}
.player-pict{height:43px;width:43px;flex:none}
.player-text{min-width:0}
.player-text strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-text small{display:block;font-size:10px;color:#93a3ac;margin-top:6px}
.player-actions{display:flex;align-items:center;gap:19px;flex:none}
.player-label{font-size:9px;letter-spacing:.16em;color:#9ca9b4}
.player-link{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(var(--accent-rgb),.7);border-radius:24px;font-size:10px;letter-spacing:.1em;font-weight:700;color:#e9eaf0;white-space:nowrap}
.player-link:hover{background:rgba(var(--accent-rgb),.14)}
.player-link svg{width:14px;height:14px;fill:var(--accent)}
@media(max-width:560px){.player-inner{height:68px;gap:8px}.player-actions{gap:6px}.player-label{display:none}.player-link{padding:9px;font-size:9px}.player-text strong{font-size:11px}.player-text small{font-size:9px}.player-left{gap:9px}.cover-surface.small{width:40px;height:40px}}

@media(max-width:560px){
 .hero-art{height:290px;margin-top:4px}
 .set-visual{width:184px;top:45%}
 .cover-surface .cover-title{font-size:20px;bottom:31px}
 .cover-surface .cover-identity{font-size:7px;top:12px;left:11px}
 .cover-surface .cover-title{left:11px;right:11px}
 .cover-surface .cover-type{font-size:6px;left:11px;right:11px;letter-spacing:.12em;bottom:12px;white-space:nowrap}
 .cover-note{font-size:8px;margin-top:15px}
 .hud{display:none}
 .preview-badge{display:none}
}


/* 320 FM IN MOTION V4 — Modular React programme, only the programme area. */
/* Avoid duplicate floating demo control over actual programme text; Hero already has a switch control. */
.preview-badge{display:none}
.program-v4{padding-top:72px}
.program-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:29px}
.program-intro h2{font-weight:650;font-size:clamp(28px,3.8vw,46px);letter-spacing:-.06em;line-height:1;margin:14px 0 10px}
.program-intro p{font-size:12px;line-height:1.7;color:#8c9aa7;margin:0}
.program-intro-right{display:flex;align-items:flex-end;flex-direction:column;gap:12px;white-space:nowrap}
.program-demo-mark{font-size:9px;letter-spacing:.14em;color:#a1a8b7}
.program-intro-right>a{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.12em;color:#dae0e9;font-weight:650}
.program-intro-right>a:hover{color:var(--accent)}
.program-intro-right>a svg{width:17px;height:17px}
.daybar{display:grid;grid-template-columns:155px minmax(0,1fr) 84px;gap:12px;align-items:center;min-height:72px;border-top:1px solid #ffffff2b;border-bottom:1px solid #ffffff2b}
.daybar-title span{display:block;color:#e4e4ee;letter-spacing:.12em;font-size:10px;font-weight:750}
.daybar-title small{display:block;font-size:9px;letter-spacing:.08em;color:#778797;margin-top:8px}
.day-scroll{min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;align-items:center;padding:10px 0}
.day-scroll::-webkit-scrollbar{display:none}
.day-chip{border:1px solid transparent;border-radius:7px;background:none;color:#8a99a9;min-width:73px;min-height:52px;padding:9px 9px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;transition:background .25s,border-color .25s,color .25s;flex:none}
.day-chip span{font-size:10px;font-weight:700;letter-spacing:.12em}
.day-chip small{font-size:9px;letter-spacing:.05em;color:#788997}
.day-chip:hover{color:#f4f5f9;background:#ffffff0c}
.day-chip.picked{color:#f2eaf0;background:rgba(var(--accent-rgb),.11);border-color:rgba(var(--accent-rgb),.48)}
.day-chip.picked small{color:var(--accent-soft,#d2b3d4)}
.day-arrows{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.day-arrows button{border:1px solid #ffffff20;border-radius:50%;background:#ffffff07;width:34px;height:34px;display:grid;place-items:center}
.day-arrows button:hover:not(:disabled){border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.day-arrows button:disabled{opacity:.25;cursor:default}
.day-arrows svg{height:16px;width:16px}
.rail-caption{display:flex;justify-content:space-between;gap:12px;color:#8f9da9;font-size:9px;letter-spacing:.17em;font-weight:600;margin:26px 0 14px}
.rail-caption span:last-child{color:#8a7b9b}
.rail-viewport{width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff39 transparent;outline-offset:3px}
.rail-inner{min-width:830px;position:relative}
.hour-marks{height:29px;position:relative;border-bottom:1px solid #ffffff26;color:#80909e;font-size:10px;letter-spacing:.06em;display:flex}
.hour-marks span{position:absolute;top:0;transform:translateX(-50%)}
.hour-marks span:first-child{transform:none}
.hour-marks span:last-child{transform:translateX(-100%)}
.hour-marks span:after{content:"";display:block;width:1px;height:12px;background:#ffffff2b;position:absolute;top:22px;left:50%}
.program-tracks{display:flex;align-items:stretch;width:100%;height:156px;padding-top:15px;gap:0}
.track{--track-color:#ad6da3;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;isolation:isolate;padding:15px 13px 17px;overflow:hidden;background:linear-gradient(180deg,#ffffff0b,#ffffff06);border:0;border-left:1px solid #0e1620;color:#f1f0f6;transition:background .25s,transform .25s}
.track:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--track-color);opacity:.38;transition:opacity .25s,height .25s}
.track:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-140%);transition:transform .75s;pointer-events:none}
.track:hover:after{transform:translateX(140%)}
.track:hover{background:#ffffff15}
.track.selected{background:linear-gradient(145deg,rgba(var(--accent-rgb),.17),#ffffff0b)}
.track.selected:before{height:3px;opacity:1;background:var(--accent)}
.track-top{color:#91a1ad;font-size:10px;font-weight:650;letter-spacing:.09em;margin-bottom:18px;white-space:nowrap}
.track.demo-now .track-top{color:#d7a7ce}
.track strong{display:block;font-size:clamp(11px,1.15vw,16px);line-height:1.2;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-weight:650}
.track-sub{display:block;font-size:10px;color:#8b9ca8;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.track-under{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#acc5d1);box-shadow:0 0 16px rgba(var(--accent-rgb),.4)}
.rail-bottom{margin-top:8px;display:flex;align-items:center;gap:15px;color:#677989;font-size:9px;letter-spacing:.09em;padding-bottom:10px}
.bottom-moving-line{height:1px;flex:1;background:linear-gradient(90deg,#b1659e50,#81b7c688,#b1659e50);background-size:180% 100%;animation:rail-flow 9s linear infinite}
@keyframes rail-flow{to{background-position:180% 0}}
.program-focus{min-height:220px;margin-top:24px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;display:grid;grid-template-columns:150px minmax(200px,1fr) 265px;gap:27px;align-items:center;padding:22px 0}
.focus-cover{width:146px;aspect-ratio:1;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 65% 32%,rgba(var(--accent-rgb),.35),transparent 65%),linear-gradient(145deg,#1a2536,#131323 70%,#222033);border:1px solid #ffffff31;overflow:hidden;box-shadow:0 8px 35px #0004}
.focus-cover:before,.focus-cover:after{content:"";position:absolute;border:1px solid #d9d3ec27;border-radius:50%;width:125px;height:125px}
.focus-cover:after{width:82px;height:82px;border-style:dotted;animation:spin-cover 45s linear infinite}
.focus-glyph{font-size:45px;color:#e1ddeb;font-weight:720;letter-spacing:-.085em;z-index:1}
.focus-caption{position:absolute;bottom:12px;left:12px;font-size:8px;color:#9eb0c0;letter-spacing:.12em}
.focus-main{min-width:0}
.focus-kicker{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.focus-bullet{color:#8c9da8;padding:0 8px}
.focus-main h3{font-size:clamp(25px,2.6vw,37px);letter-spacing:-.06em;line-height:1.05;margin:11px 0 8px;white-space:normal}
.focus-show{font-size:14px;font-weight:500;color:#d7dbe5;margin:0 0 11px}
.focus-description{font-size:12px;color:#8b9ba9;line-height:1.65;max-width:490px;margin:0}
.focus-time{height:156px;padding:1px 0 0 27px;border-left:1px solid #ffffff22;display:flex;flex-direction:column;align-items:flex-start}
.focus-time-label{display:flex;align-items:center;gap:10px;color:#afb8c6;font-size:11px;letter-spacing:.08em}
.focus-time-label svg{width:14px;height:14px;color:var(--accent)}
.focus-time strong{font-size:34px;letter-spacing:-.055em;margin-top:14px;line-height:1;font-weight:650}
.focus-counter-caption{color:#8795a4;letter-spacing:.11em;font-size:9px;margin-top:7px}
.focus-meter{height:2px;width:100%;background:#ffffff27;margin-top:17px;position:relative}
.focus-meter>div{height:100%;background:var(--accent);transition:width .5s linear}
.focus-next{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-size:9px;text-align:left;font-weight:700;letter-spacing:.07em;padding:14px 0 0;background:none;border:0;color:#cad5df}
.focus-next:hover{color:var(--accent)}
.focus-next svg{height:14px;width:14px;flex:none}
.program-outro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:17px;color:#718494;font-size:9px;letter-spacing:.105em}
.program-outro>span{display:flex;align-items:center;gap:10px}
.program-outro-led{height:6px;width:6px;background:var(--accent);display:inline-block;border-radius:50%}
.program-outro button{display:flex;align-items:center;gap:10px;padding:6px 0;border:0;background:none;color:#b5becb;letter-spacing:.1em;font-weight:700;font-size:9px}
.program-outro button:hover{color:var(--accent)}
.program-outro button svg{width:15px;height:15px}
@media(max-width:1000px){
 .daybar{grid-template-columns:118px minmax(0,1fr) 74px;gap:8px}
 .day-chip{min-width:65px}
 .program-focus{grid-template-columns:120px minmax(170px,1fr) 207px;gap:22px}
 .focus-cover{width:120px}.focus-time{padding-left:19px}
 .program-intro-right{gap:9px}.program-intro p{max-width:410px}
}
@media(max-width:700px){
 .program-v4{padding-top:52px}
 .program-intro{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:22px}
 .program-intro h2{font-size:34px;margin:11px 0 8px}
 .program-intro-right{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%}
 .program-intro-right>a{font-size:9px}.program-demo-mark{font-size:8px}
 .daybar{display:grid;grid-template-columns:minmax(0,1fr) 70px;grid-template-rows:auto auto;gap:0;padding-top:9px;padding-bottom:9px;position:relative}
 .daybar-title{grid-column:1/-1;grid-row:1;width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:5px}
 .daybar-title small{margin:0;font-size:8px}
 .day-scroll{grid-column:1;grid-row:2;min-width:0;width:100%;gap:2px}
 .day-chip{min-width:67px;min-height:50px}
 .day-arrows{grid-column:2;grid-row:2;width:70px;gap:3px}
 .day-arrows button{height:30px;width:30px}
 .rail-caption{font-size:8px;line-height:1.4}
 .rail-inner{min-width:780px}
 .program-tracks{height:135px}.track{padding:13px 10px 15px}.track-top{margin-bottom:15px}.track strong{font-size:13px}
 .program-focus{grid-template-columns:85px 1fr;gap:16px;padding:18px 0}
 .focus-cover{width:85px}.focus-glyph{font-size:28px}.focus-caption{font-size:6px;bottom:7px;left:7px}
 .focus-main h3{font-size:25px;margin-top:9px}.focus-show{font-size:12px}.focus-description{font-size:11px}
 .focus-time{grid-column:1/-1;border-left:0;border-top:1px solid #ffffff23;padding:14px 0 0;height:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:center}
 .focus-time-label{grid-column:1/2;font-size:10px}.focus-time strong{grid-column:2;grid-row:1/3;font-size:27px;margin:0;text-align:right}
 .focus-counter-caption{grid-column:1;font-size:8px;margin:7px 0}
 .focus-meter{grid-column:1/-1;margin-top:11px}.focus-next{grid-column:1/-1;padding:12px 0 0}
 .program-outro{font-size:8px;line-height:1.5}.program-outro button{font-size:8px;flex:none}
}

/* Programme is now a separate preview page, never part of homepage. */
.programme-only .program-v4{padding-top:53px;min-height:640px}
.programme-only .program-intro h2{font-size:clamp(29px,3.5vw,44px)}
.programme-only .preview-player{margin-top:10px}
.programme-only .footer{margin-top:66px}
.programme-only .preview-badge{display:none}
.programme-only .logo img{display:block}
.programme-only .logo.loaded .logo-fallback{display:none}
@media(max-width:700px){.programme-only .program-v4{padding-top:35px}.programme-only .footer{margin-top:36px}}

/* Compact language selection beside the menu, before the player. */
.language-switch{display:flex;align-items:center;gap:9px;padding-right:16px;border-right:1px solid #ffffff23;flex:none}
.language-switch>span{display:inline-flex;align-items:center;gap:9px}
.language-switch button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:29px;padding:5px 2px;border:0;background:transparent;color:#8d9ba5;font-size:11px;font-weight:650;letter-spacing:.08em;transition:color .2s}
.language-switch button:hover{color:#f1f2ef}
.language-switch button[aria-pressed="true"]{color:var(--accent);font-weight:750}
.language-divider{color:#ffffff35;font-size:10px}
@media(max-width:560px){.navright{gap:12px}.language-switch{gap:5px;padding-right:12px}.language-switch>span{gap:5px}.language-switch button{min-height:40px;min-width:27px;font-size:10px}}

/* Keep programme names complete; intrinsic grid height follows wrapped content. */
.programme-only .program-tracks{display:grid;height:auto;min-height:172px;align-items:stretch}
.programme-only .track strong,.programme-only .track-sub{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35;flex-shrink:0}
.programme-only .focus-main h3,.programme-only .focus-show,.programme-only .focus-next{overflow-wrap:anywhere}
.programme-only .focus-time{height:auto;min-height:156px}
@media(max-width:700px){.programme-only .program-tracks{min-height:160px}.programme-only .focus-time{min-height:0}}

/* Current Berlin time stays independent of the selected programme. */
.programme-only .programme-now{position:absolute;top:0;bottom:28px;width:1px;z-index:3;pointer-events:none;color:var(--accent)}
.programme-only .programme-now:before{content:"";position:absolute;top:29px;bottom:0;left:0;width:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.65),rgba(var(--accent-rgb),.24))}
.programme-only .programme-now:after{content:"";position:absolute;top:26px;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09)}
.programme-only .programme-now-label{position:absolute;top:0;left:0;transform:translateX(-50%);padding:3px 6px;border:1px solid rgba(var(--accent-rgb),.24);border-radius:3px;background:#090d16f2;font-size:9px;font-weight:650;letter-spacing:.08em;line-height:1.4;white-space:nowrap}
.programme-only .programme-now.at-start .programme-now-label{transform:none}
.programme-only .programme-now.at-end .programme-now-label{transform:translateX(-100%)}