.hero{isolation:isolate}
.hero-atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.8}
.hero-halo{position:absolute;inset:0;background:radial-gradient(ellipse 48% 55% at var(--halo-x,70%) var(--halo-y,60%),#8758fa10 0%,transparent 65%),radial-gradient(ellipse 30% 50% at 86% 48%,#dfff0009,transparent 70%);z-index:0;pointer-events:none}
.hero-eyebrow,.hero-grid{position:relative;z-index:1}
.work-carousel .project-photo video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;opacity:0;transition:opacity .45s;pointer-events:none;user-select:none;background:transparent}
.work-carousel .has-preview-frame .project-photo video{opacity:1}
.work-carousel .has-preview-frame .project-photo img{opacity:0}
.work-carousel .project-photo img{transition:opacity .45s}
.preview-label{position:absolute;left:14px;bottom:15px;display:flex;gap:7px;align-items:center;z-index:3;pointer-events:none;padding:7px 9px;border:1px solid #ffffff24;border-radius:20px;background:#101010b8;backdrop-filter:blur(8px);color:#d9dbce;font-size:7px;letter-spacing:.7px}
.preview-label:before{content:'';width:4px;height:4px;border-radius:50%;background:#717568;transition:background .3s,box-shadow .3s}
.is-preview-playing .preview-label:before{background:var(--lime);box-shadow:0 0 8px #dfff0080}


.good-radio{position:fixed;left:24px;bottom:max(19px,env(safe-area-inset-bottom));z-index:80;width:274px;color:var(--surface-ink);color-scheme:dark;font-family:Good Sans,Arial,sans-serif;--record-color:#b8c8a5}
.radio-dock{position:relative;display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--chrome);border:1px solid var(--chrome-line);border-radius:17px;box-shadow:0 12px 42px #0003;backdrop-filter:blur(24px);overflow:hidden}
.radio-record{position:relative;width:45px;height:45px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#141612;border:1px solid #45483c}
.record-groove{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:repeating-radial-gradient(circle at center,#151810 0 1px,#30342b 2px 2.5px,#151810 3px 4px);border:1px solid #35392e;animation:radio-spin 9s linear infinite;animation-play-state:paused}
.record-groove>span{display:grid;place-items:center;background:var(--record-color);color:#101010;width:19px;height:19px;border-radius:50%;font-weight:700;font-size:11px;transition:background .4s}
.is-playing .record-groove{animation-play-state:running}
.radio-equalizer{position:absolute;right:-5px;bottom:-3px;height:16px;display:flex;gap:2px;align-items:flex-end;background:var(--chrome);padding:4px;border-radius:5px;opacity:0;transition:opacity .3s}
.radio-equalizer i{width:2px;height:7px;background:var(--accent-readable);transform-origin:bottom;animation:radio-eq .8s ease-in-out infinite alternate;animation-play-state:paused}
.radio-equalizer i:nth-child(2){animation-delay:-.3s;height:10px}.radio-equalizer i:nth-child(3){animation-delay:-.55s;height:6px}
.is-playing .radio-equalizer{opacity:1}.is-playing .radio-equalizer i{animation-play-state:running}
.radio-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;line-height:1.1}
.radio-brand{font-size:7px;letter-spacing:1.3px;color:var(--surface-subtle)}
.radio-meta strong{font-size:12px;letter-spacing:.2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.radio-meta small{font-size:9px;color:var(--surface-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.radio-buttons{display:flex;gap:4px;align-items:center}
.radio-buttons button{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;color:var(--surface-ink);transition:background .25s,color .25s}
.radio-buttons button[data-radio-play]{width:32px;height:32px;background:var(--lime);color:var(--ink)}
.radio-buttons button[data-radio-play] span{font-size:13px;line-height:1;margin-left:1px}
.radio-buttons button[data-radio-next]{font-size:21px;width:22px}
.radio-buttons button:hover{background:var(--violet);color:white}
.radio-progress{position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--surface-line);opacity:.6}
.radio-progress span{display:block;width:100%;height:100%;background:var(--accent-readable);transform:scaleX(0);transform-origin:left}
.radio-status{display:block;padding:7px 5px 0;color:var(--surface-subtle);font-size:8px;letter-spacing:.3px;text-shadow:0 1px 8px var(--surface)}
.radio-panel{position:absolute;left:0;bottom:calc(100% + 12px);width:340px;max-width:calc(100vw - 40px);background:var(--chrome);border:1px solid var(--chrome-line);border-radius:20px;padding:17px;box-shadow:0 18px 65px #0004;backdrop-filter:blur(30px);transform-origin:bottom left;animation:radio-open .35s var(--ease);max-height:calc(100svh - 150px);overflow-y:auto;overscroll-behavior:contain}
.radio-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.radio-panel-head>span{font-size:10px;letter-spacing:1px;font-weight:700}
.radio-panel-head i{font-style:normal;font-size:8px;margin-left:10px;color:var(--surface-subtle);font-weight:400}
.radio-panel-head button{width:26px;height:26px;border:1px solid var(--surface-line);border-radius:50%;font-size:21px;display:grid;place-items:center}
.radio-hint{font-size:11px;color:var(--surface-muted);margin-bottom:15px}
.spotify-shell{min-height:152px;background:#181818;border-radius:12px;overflow:hidden}
.spotify-shell iframe{display:block;width:100%!important;height:152px;border:0;border-radius:12px}
.radio-queue{display:flex;flex-direction:column;gap:4px;margin:15px 0 10px}
.radio-queue button{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 9px;border:1px solid transparent;border-radius:9px;color:var(--surface-muted);transition:background .25s,border-color .25s}
.radio-queue button[aria-pressed=true]{color:var(--surface-ink);border-color:var(--surface-line);background:var(--chip-bg)}
.radio-queue button:hover{background:var(--chip-hover)}
.queue-number{font-size:9px;color:var(--surface-subtle)}
.radio-queue button>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px;line-height:1.1}
.radio-queue b{font-size:12px;font-weight:400}.radio-queue small{font-size:10px;color:var(--surface-subtle)}
.queue-arrow{font-size:17px;color:var(--accent-readable)}
.radio-spotify-link{display:inline-block;font-size:10px;color:var(--surface-subtle);padding:7px 0;border-bottom:1px solid var(--surface-line)}
.radio-spotify-link:hover{color:var(--surface-ink)}
.site-footer{padding-bottom:120px}
@keyframes radio-spin{to{transform:rotate(360deg)}}
@keyframes radio-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes radio-open{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:800px){.good-radio{left:19px;bottom:max(16px,env(safe-area-inset-bottom));width:255px}.radio-dock{gap:10px;padding:10px 11px}.radio-record{width:42px;height:42px}.record-groove{width:36px;height:36px}.radio-panel{width:330px}}
@media(max-width:520px){.good-radio{left:15px;bottom:max(13px,env(safe-area-inset-bottom));width:238px}.radio-meta strong{font-size:11px}.radio-brand{font-size:6px;letter-spacing:1.2px}.radio-meta small{font-size:8px}.radio-dock{border-radius:15px;padding:10px 11px;gap:9px}.radio-record{width:38px;height:38px}.record-groove{width:34px;height:34px}.record-groove>span{width:17px;height:17px;font-size:10px}.radio-buttons{gap:3px}.radio-buttons button[data-radio-play]{width:30px;height:30px}.radio-buttons button[data-radio-next]{width:19px;font-size:19px}.radio-panel{width:min(340px,calc(100vw - 30px));max-width:calc(100vw - 30px);padding:15px;border-radius:18px}.radio-status{font-size:7px;padding-top:5px}.work-carousel .project-photo video{padding:0}.preview-label{left:11px;bottom:13px;font-size:6px;padding:6px 8px;gap:6px;letter-spacing:.4px}.hero-atmosphere{opacity:.65}}
@media(prefers-reduced-motion:reduce){.record-groove,.radio-equalizer i{animation:none}.radio-panel{animation:none}.work-carousel .project-photo video,.work-carousel .project-photo img{transition:none}.hero-halo{display:none}}

/* Slightly larger radio dock, with a bounded queue for the extended selection. */
.good-radio{width:316px}
.radio-dock{padding:14px 15px;gap:14px;border-radius:19px}
.radio-record{width:50px;height:50px}
.record-groove{width:44px;height:44px}
.record-groove>span{width:21px;height:21px;font-size:12px}
.radio-brand{font-size:8px}
.radio-meta strong{font-size:14px}
.radio-meta small{font-size:10px}
.radio-buttons button[data-radio-play]{width:36px;height:36px}
.radio-buttons button[data-radio-next]{width:24px;font-size:23px}
.radio-panel{width:380px;padding:19px}
.radio-panel-head>span{font-size:11px}
.radio-hint{font-size:12px}
.radio-queue{max-height:236px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--surface-line) transparent}
.radio-queue button{flex-shrink:0}
.radio-queue button>span:nth-child(2){min-width:0}
.radio-queue b,.radio-queue small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-queue b{font-size:13px}
.radio-queue small{font-size:10px}
.radio-status{font-size:9px}
@media(max-width:800px){.good-radio{width:290px}.radio-dock{padding:12px 13px;gap:12px}.radio-record{width:46px;height:46px}.record-groove{width:40px;height:40px}.radio-panel{width:360px}.radio-meta strong{font-size:13px}}
@media(max-width:520px){.good-radio{width:274px;max-width:calc(100vw - 30px)}.radio-dock{padding:12px;gap:11px;border-radius:17px}.radio-record{width:44px;height:44px}.record-groove{width:38px;height:38px}.record-groove>span{width:19px;height:19px;font-size:11px}.radio-brand{font-size:7px}.radio-meta strong{font-size:12px}.radio-meta small{font-size:9px}.radio-buttons button[data-radio-play]{width:33px;height:33px}.radio-buttons button[data-radio-next]{width:21px;font-size:21px}.radio-panel{width:min(370px,calc(100vw - 30px));padding:17px}.radio-queue{max-height:205px}.radio-status{font-size:8px}}