:root{color-scheme:dark;--accent:#b88aff;--muted:#aaa6be;--line:#a293c538}*{box-sizing:border-box}body{margin:0;background:#080910;color:#f4f1ff;font:15px/1.5 system-ui,sans-serif;min-height:100svh}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 15%,#6234a323,transparent 65%),radial-gradient(ellipse at 0% 80%,#333d641c,transparent 60%)}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c8a5ff;outline-offset:4px}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 3%;gap:20px;background:#0b0b1399}.brand{display:flex;align-items:center;gap:16px;font-size:21px;font-weight:650}.brand img{height:48px;width:48px;border-radius:50%}.brand em{font-style:normal;color:var(--accent);font-weight:500}.brand small{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.04em;display:block}.header-actions{display:flex;align-items:center;gap:28px}.header-actions>a{font-weight:600}.header-actions>a:before{content:'▶';display:inline-grid;place-items:center;background:#ff0033;border-radius:5px;width:25px;height:17px;font-size:11px;margin-right:8px;color:white}.languages{display:flex;gap:10px;border-left:1px solid var(--line);padding-left:20px}.languages button{background:transparent;border:0;color:#888198;padding:8px}.languages button[aria-pressed=true]{color:#eee3ff;box-shadow:0 2px #b88aff}main{width:min(1720px,100%);margin:auto;padding:18px 2.5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;gap:20px}.intro h1{font-size:26px;line-height:1.2;margin:0;font-weight:550;letter-spacing:-.025em}.intro .eyebrow,.lead{display:none}.note{margin:0;color:#9990ad;font-size:11px;letter-spacing:.08em}.modes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.mode{position:relative;isolation:isolate;overflow:hidden;min-width:0;height:clamp(135px,19vh,205px);border:1px solid #a89bc456;border-radius:12px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:18px 16px;background:#111322;transition:border-color .2s,box-shadow .2s}.mode:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 20%,#08091322 40%,#080913ed);z-index:-1}.mode-picture{position:absolute;inset:0;z-index:-2;background-image:url('mood-landscapes.png');background-size:200% 200%;background-position:0 0}.mode[data-mode=midday] .mode-picture{background-position:100% 0}.mode[data-mode=sunset] .mode-picture{background-position:0 100%}.mode[data-mode=night] .mode-picture{background-position:100% 100%}.mode[data-mode=mosquito] .mode-picture{background-image:url('mosquito-records.jpg');background-size:contain;background-position:50% 15%;background-repeat:no-repeat;background-color:#e7e6e4}.mode strong{font-size:clamp(15px,1.4vw,21px);font-weight:650;text-shadow:0 1px 10px #000}.mode>span:not(.mode-picture){font-size:12px;color:#ddd5ea;line-height:1.4;min-height:34px;max-width:95%;margin-top:3px}.mode small{display:none}.mode:hover{border-color:#d2b6ff;box-shadow:inset 0 0 25px #b58aff18}.mode[aria-pressed=true]{border-color:#cba3ff;box-shadow:0 0 0 1px #b88aff,0 0 22px #a263ff26}.player{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.8fr);gap:30px;padding:22px;border:1px solid #9e90bd65;border-radius:15px;background:linear-gradient(125deg,#252336a6,#11121b 60%,#0d0e17);box-shadow:inset 0 1px #e4d2ff15,0 16px 45px #0004}.art{min-width:0;position:relative;overflow:hidden;border:1px solid #8b70be55;border-radius:10px;background:radial-gradient(circle at 50% 45%,#6734a63d,transparent 62%),linear-gradient(150deg,#080b20,#160c2b 50%,#030612);display:flex;align-items:center;justify-content:center;isolation:isolate}.art:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#b9a0e777 1px,transparent 1px);background-size:39px 47px;opacity:.25}.orbit{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;border:2px solid #c996ff;box-shadow:0 0 15px #b873ffa0,inset 0 0 25px #9137ef50;transform:rotate(-20deg);border-left-color:#efe0ff;border-bottom-color:#50366c}.album-logo{position:relative;width:54%;aspect-ratio:1;object-fit:contain;border-radius:50%;box-shadow:0 0 50px #b070ff23;z-index:2}.art-waves{position:absolute;inset:60% -30% -15%;border-radius:50%;border-top:3px solid #b4a2ff;box-shadow:0 -6px 2px #7e4cee,0 -12px 2px #ad7fe880,0 -22px 2px #526ee970,0 -33px 2px #af69ed60,0 -45px 2px #744bdc40,0 -58px 2px #b495fa30;transform:rotate(-12deg);background:linear-gradient(#6741c522,transparent)}.art-label{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.35em;color:#c2b4d7}.controls{min-width:0;display:flex;flex-direction:column;position:relative}.status-line{height:24px;display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#d2b8ff}.status-dot{width:7px;height:7px;border-radius:50%;background:#cda6ff;box-shadow:0 0 10px #b784ff}#count{margin-left:auto;color:#9b93ac;font-size:10px;letter-spacing:0}#modeLabel{order:2;height:20px;line-height:20px;margin:1px 0;color:#bdb3cf;font-size:14px;letter-spacing:.04em}#trackTitle{order:1;font-size:clamp(23px,2.3vw,36px);font-weight:650;letter-spacing:-.025em;line-height:1.15;height:2.3em;min-height:2.3em;margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}#message{order:3;height:18px;min-height:18px;margin:2px 0 0;font-size:11px;line-height:18px;color:#ddbd91;overflow:hidden}.waveform{order:4;position:relative;height:72px;flex:none}#waveform{width:100%;height:100%;display:block}.wave-caption{position:absolute;right:0;bottom:0;font:8px ui-monospace,monospace;letter-spacing:.15em;color:#91829d}.progress{order:5;display:flex;align-items:center;gap:12px;height:26px;color:#bdb1ce;font:11px ui-monospace,monospace}.progress span{width:37px;flex:none;font-variant-numeric:tabular-nums}.progress input{flex:1;min-width:0}input[type=range]{accent-color:#bd93ff;height:20px;cursor:pointer}#seek{height:14px}.meter-panel{order:6;border:1px solid #9780b43a;border-radius:9px;padding:9px 13px;background:linear-gradient(120deg,#13121d,#080910);margin:10px 0;flex:none}.meter-heading{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#b5a3c8;letter-spacing:.1em;margin-bottom:5px}.meter-heading output{color:#e6c377}#levelMeter{height:35px;width:100%;display:block}.meter-scale{display:flex;justify-content:space-between;padding-left:22px;font:8px ui-monospace,monospace;color:#93869f;margin-top:4px}.bottom-controls{order:7;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}.transport{display:flex;align-items:center;gap:clamp(8px,1.4vw,22px);height:80px;flex:none}.transport button,.volume button{border:0;background:transparent;width:36px;height:40px;font-size:20px;padding:0;color:#d3c4ed;display:inline-grid;place-items:center}.transport #play{width:76px;height:76px;border:2px solid #c99bff;border-radius:50%;background:radial-gradient(circle at 45% 30%,#69488c,#261539 75%);box-shadow:0 0 0 4px #b078ff18,0 0 23px #a558ff60,inset 0 0 8px #dbc0ff4d;color:#e9d9ff;font-size:30px;line-height:1}.transport #play:disabled{opacity:.65}#repeat[aria-pressed=true]{color:#d0a2ff;text-shadow:0 0 10px #c388ff;border-bottom:2px solid #c08cff}.volume{display:flex;align-items:center;gap:8px;min-width:100px;flex:1;max-width:280px}.volume input{width:100%;min-width:45px}.volume span{font-size:11px;min-width:30px;color:#b9aec9}.volume button{font-size:15px;flex:none;width:30px}#retry{order:8;height:20px;align-self:flex-start;border:0;background:transparent;padding:0;color:#d4b0ff;font-size:11px}#retry[hidden]{display:block!important;visibility:hidden}footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#8a819f;padding:15px 0}footer a{white-space:nowrap}[hidden]{display:none!important}
@media(min-width:851px) and (max-height:900px){header{height:60px}main{padding-top:12px}.intro{margin-bottom:10px}.intro h1{font-size:22px}.mode{height:130px;padding:12px}.modes{margin-bottom:12px}.player{padding:16px;gap:22px}#trackTitle{font-size:24px}.waveform{height:45px}.meter-panel{margin:5px 0;padding:6px 10px}#levelMeter{height:28px}.transport{height:64px}.transport #play{height:60px;width:60px;font-size:25px}.bottom-controls{margin:0}footer{padding:9px 0}}
@media(min-width:851px) and (max-height:690px){header{height:52px}.brand img{width:36px;height:36px}.brand small{display:none}.mode{height:110px}.mode>span:not(.mode-picture){font-size:10px;min-height:28px}.intro h1{font-size:20px}.player{padding:12px}#trackTitle{font-size:21px}.waveform{height:30px}#message{height:16px;min-height:16px;line-height:16px}.transport{height:55px}.transport #play{width:50px;height:50px}footer{font-size:9px}}
@media(max-width:1100px){.bottom-controls{gap:10px}.transport{gap:7px}.transport button{width:30px}.volume{gap:3px}.player{gap:20px}.note{max-width:270px}.mode strong{font-size:15px}}
@media(max-width:850px){header{padding:10px 20px}.brand{font-size:17px;gap:9px}.brand img{width:42px;height:42px}.header-actions{gap:10px}.languages{padding-left:8px;gap:2px}main{padding:16px}.intro .note{display:none}.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode{height:155px}.mode[data-mode=mosquito]{grid-column:1/-1;height:125px}.mode[data-mode=mosquito] .mode-picture{background-position:right center}.mode[data-mode=mosquito]:after{background:linear-gradient(90deg,#090a13fa,#090a1333)}.player{grid-template-columns:1fr;padding:15px;gap:16px}.art{height:190px}.orbit{width:170px}.album-logo{width:130px}.art-waves{inset:75% -30% -50%}.art-label{bottom:10px}.controls{width:100%}.bottom-controls{flex-wrap:wrap}.volume{max-width:none;flex:1}.transport{gap:12px}.transport #play{width:64px;height:64px}#trackTitle{font-size:26px}.waveform{height:65px}footer{flex-direction:column;gap:5px}.brand small{font-size:9px}.header-actions>a{font-size:0}.header-actions>a:before{font-size:11px;margin:0}.volume{flex-basis:100%}.transport{width:100%;justify-content:space-evenly}.mode strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.transport svg,.volume svg{width:22px;height:22px;display:block}.transport #play svg{width:30px;height:30px}#play:not(:disabled){opacity:1}#play:hover:not(:disabled){box-shadow:0 0 0 4px #b078ff30,0 0 32px #a558ff90,inset 0 0 8px #dbc0ff4d}

/* Radio transport: automatic sequence, read-only progress. */
#seek{height:4px;flex:1;min-width:0;overflow:hidden;border-radius:3px;background:#3e354d;pointer-events:none}
#progressFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#8f5ce7,#d0a3ff);box-shadow:0 0 8px #a96fff}
.bottom-controls{justify-content:flex-start;gap:30px}.transport{justify-content:flex-start;width:auto}.volume{margin-left:auto}
.mode[data-mode=mosquito] .mode-picture{background-image:url('mosquito-mood.png');background-size:cover;background-position:center;background-color:#121020}
@media(max-width:850px){.mode[data-mode=mosquito] .mode-picture{background-position:center 55%}.bottom-controls{flex-wrap:nowrap;gap:20px}.volume{flex-basis:auto;max-width:260px}.transport{width:auto}}

/* Original Turkish music, separate from the time-of-day streams. */
@media(min-width:851px){.modes{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mode[data-mode=aican]{background:radial-gradient(ellipse at 85% 30%,#7546a9,#191027 70%)}
.mode[data-mode=aican] .mode-picture{background-image:url('aican-logo.jpg');background-size:auto 78%;background-repeat:no-repeat;background-position:85% 10%;opacity:.8;mix-blend-mode:screen}
@media(max-width:850px){.mode[data-mode=mosquito]{grid-column:auto;height:155px}.mode[data-mode=mosquito] .mode-picture{background-position:65% center}.mode[data-mode=aican]{height:155px}}

/* Ai Can Music scenic light artwork with the approved logo. */
.mode[data-mode=aican] .mode-picture{background-image:url('aican-mood.png');background-size:cover;background-position:center;opacity:1;mix-blend-mode:normal}
.mode[data-mode=aican] .mode-picture::after{content:'';position:absolute;width:21%;aspect-ratio:1;left:74%;top:29%;transform:translate(-50%,-50%);background:url('aican-logo.jpg') center/contain no-repeat;border-radius:50%;mix-blend-mode:screen;filter:drop-shadow(0 0 5px #bc88ff)}

/* Anchor the logo and halo to one undistorted 3:2 scene. */
.mode[data-mode=aican] .mode-picture{background:none;overflow:hidden;container-type:size}
.mode[data-mode=aican] .mode-picture::after{display:none}
.aican-scene{position:absolute;width:max(100cqw,150cqh);aspect-ratio:3/2;left:50%;top:50%;transform:translate(-50%,-50%);background:url('aican-mood.png') center/cover no-repeat}
.aican-scene::after{content:'';position:absolute;width:18%;aspect-ratio:1;left:74.4%;top:29.7%;transform:translate(-50%,-50%);background:url('aican-logo.jpg') center/contain no-repeat;border-radius:50%;mix-blend-mode:screen;opacity:.82;filter:drop-shadow(0 0 3px #bc88ff)}

#autoSchedule{border:1px solid #9980b955;border-radius:20px;background:#171221;padding:6px 13px;color:#a49ab5;font-size:11px;white-space:nowrap}#autoSchedule[aria-pressed=true]{color:#dbc5ff;border-color:#b588ff90;background:#a065ee15}#autoSchedule:before{content:'◷';margin-right:7px}.intro{align-items:center}

.local-clock{text-align:right;display:flex;flex-direction:column;justify-content:center;min-width:170px}.local-clock #localTime{font-size:20px;font-weight:500;line-height:1.2;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#dfcefa}.local-clock #localDate{font-size:10px;color:#aaa0b9;margin-top:3px;white-space:nowrap}@media(max-width:600px){header{height:auto;min-height:76px;flex-wrap:wrap;gap:8px}.header-actions{flex:1;justify-content:flex-end}.local-clock{min-width:140px}.local-clock #localTime{font-size:17px}.local-clock #localDate{font-size:9px}.brand{font-size:15px}}

/* Single waveform visual: no technical level panel. */
.waveform{height:116px;margin:10px 0 7px}.bottom-controls{margin-top:18px}.progress{margin-bottom:5px}
@media(min-width:851px) and (max-height:900px){.waveform{height:82px;margin:6px 0}.bottom-controls{margin-top:12px}}
@media(min-width:851px) and (max-height:690px){.waveform{height:58px;margin:4px 0}.bottom-controls{margin-top:8px}}
@media(max-width:850px){.waveform{height:100px;margin:8px 0}.bottom-controls{margin-top:14px}}