:root{--ink:#e8eee8;--muted:#a9bebc;--accent:#d2ed9c;--bg:#071016}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}button,a{color:inherit;font:inherit}button{cursor:pointer;border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}button:hover,a:hover{color:var(--accent)}button{min-height:44px}header{position:fixed;z-index:20;top:0;left:0;right:0;padding:30px 4vw;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.wordmark{font-size:28px;letter-spacing:-1.5px;font-weight:600}.wordmark span{font-size:10px;letter-spacing:.05em;margin-left:18px;font-weight:400;color:var(--muted)}.controls{display:flex;gap:20px}.controls button{font-size:10px;letter-spacing:.06em}.skip{position:fixed;top:-100px;z-index:100;background:var(--bg);padding:15px}.skip:focus{top:10px}#world{position:fixed;inset:0;pointer-events:none}#world canvas{width:100%;height:100%;display:block}.atmosphere{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#04101687,transparent 60%),radial-gradient(ellipse at center,transparent 30%,#02070e66);z-index:1}#journey{height:430svh}.sticky{height:100svh;position:sticky;top:0;overflow:hidden;z-index:2}.intro{position:absolute;left:8vw;top:23%;will-change:opacity,transform}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent);line-height:1.6}h1{font-size:clamp(80px,9vw,145px);font-weight:400;letter-spacing:-.07em;line-height:.88;margin:26px 0 30px}h1 em{font-family:Georgia,serif;font-weight:400;color:#d2edb1}.role{font-size:15px;letter-spacing:.02em}.description{font-size:12px;line-height:2;color:#bacbc8}.link-button{padding:12px 0;margin-top:20px;border-bottom:1px solid #b4c8bd70;font-size:12px;display:flex;justify-content:space-between;width:175px}.link-button span{color:var(--accent);font-size:20px}.bridge{position:absolute;bottom:18%;left:8vw;opacity:0}.bridge span{font-size:9px;letter-spacing:.18em;color:var(--accent)}.bridge p{font:italic 36px Georgia,serif;margin:16px 0}.project{position:absolute;left:8vw;top:26%;opacity:0;max-width:340px}.project h2{font-size:clamp(55px,7vw,108px);font-weight:400;line-height:.93;letter-spacing:-.055em;margin:25px 0}.model-note{position:absolute;bottom:15%;right:6vw;color:#a9bebc;font-size:10px;opacity:0}.navigation{position:fixed;bottom:28px;left:4vw;right:4vw;z-index:15;display:flex;gap:15px;align-items:center;font-size:9px;letter-spacing:.08em}.navigation button{font-size:9px}.navigation button span{margin-left:10px}.navigation .track{height:1px;background:#ffffff30;width:90px}.track i{display:block;width:0;height:1px;background:var(--accent)}.scroll-cue{margin-left:auto;color:var(--muted)}#loading{position:fixed;inset:0;background:#071016;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;font-size:11px;letter-spacing:.15em;transition:opacity .7s}#loading.done{opacity:0;pointer-events:none}.loading-line{height:1px;background:var(--accent);width:60px}#fallback{position:fixed;z-index:25;top:95px;left:6vw;right:6vw;background:#10212c;padding:20px;font-size:12px}#fallback a{text-decoration:underline}[hidden]{display:none!important}.story{position:relative;z-index:10;background:#0b171c;padding:100px 8vw 100px;border-top:1px solid #d2ed9c30}.story-heading h2{font-size:clamp(40px,5vw,76px);font-weight:400;letter-spacing:-.04em;margin:20px 0}.story p{font-size:13px;color:#b9c8c5;line-height:2;max-width:750px}.story figure{margin:50px 0}.story img{display:block;width:100%;max-height:650px;object-fit:cover}.story figcaption{font-size:10px;color:var(--muted);margin-top:14px}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.story-grid span{font-size:9px;letter-spacing:.1em;color:var(--accent)}.story-grid h3{font-size:18px;font-weight:400;line-height:1.7}.story-end{border-top:1px solid #ffffff25;padding-top:30px;margin-top:50px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.story-end a{padding:14px 0}body.reduced *{scroll-behavior:auto!important;transition:none!important}@media(max-width:700px){header{padding:18px 6vw}.wordmark{font-size:25px}.wordmark span{display:none}.controls{gap:13px}.controls button{font-size:9px}.intro{left:8vw;top:18%}h1{font-size:84px;margin:22px 0}.role{font-size:13px}.description{font-size:11px}.intro .link-button{margin-top:12px}.project{top:18%;left:8vw}.project h2{font-size:56px;margin:15px 0}.project .link-button{margin-top:8px}.bridge{bottom:20%}.model-note{bottom:13%;left:8vw;right:auto;font-size:9px}.navigation{left:6vw;right:6vw;bottom:18px;gap:8px}.navigation .track{width:35px}.scroll-cue{font-size:7px;max-width:65px;text-align:right;line-height:1.6}.navigation button span{margin-left:5px}.story{padding:65px 8vw 95px}.story-grid{grid-template-columns:1fr;gap:25px}.story figure{margin:30px 0}.story-end{gap:20px;font-size:10px}.story-heading p br{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#room{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:30px 5vw 40px;background:transparent;color:var(--ink);overflow-y:auto}#room::backdrop{background:#020a0d33}#room[open]{animation:room-enter 1.2s both}body.inside header,body.inside .sticky,body.inside .navigation{opacity:0;pointer-events:none}body.inside .atmosphere{background:radial-gradient(ellipse at center,transparent,#02070e88)}.room-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em}.room-top button{font-size:12px}.room-layout{min-height:75vh;display:grid;grid-template-columns:1fr 1.9fr;gap:5vw;align-items:center}.room-copy h2{font-size:clamp(32px,4vw,60px);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin:22px 0}.room-copy p{font-size:12px;line-height:1.9;color:#bdcecb;max-width:340px}.room-copy h3{font-size:17px;font-weight:400;line-height:1.6}.room-steps{display:flex;gap:18px;margin-top:30px;border-bottom:1px solid #c4d9cd40}.room-steps button{padding:10px 0;font-size:10px;color:#a9bebc}.room-steps button[aria-pressed=true]{color:#e1f3b5;border-bottom:1px solid #e1f3b5}.room-media{margin:0;position:relative;box-shadow:0 30px 100px #0007;transform:perspective(1200px) rotateY(-5deg)}.room-media img,.room-media video{width:100%;aspect-ratio:1.65;object-fit:contain;background:#132129;display:block}.room-media figcaption{position:absolute;bottom:0;left:0;right:0;padding:30px 18px 12px;background:linear-gradient(transparent,#051014cc);font-size:9px;color:#dfebe6;pointer-events:none}@keyframes room-enter{0%{opacity:0;transform:scale(.88)}35%{opacity:0}100%{opacity:1;transform:scale(1)}}@media(max-width:700px){#room{padding:20px 6vw 40px}.room-layout{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:25px;padding-top:30px}.room-media{width:100%;transform:none}.room-copy{width:100%}.room-copy h2{font-size:37px;margin:12px 0}.room-steps{margin-top:18px}.room-copy p{max-width:100%}.room-top{font-size:9px}.room-media figcaption{font-size:8px}.room-copy .link-button{margin-top:12px}}
body.inside .navigation{opacity:0!important}#room-sound{margin-left:auto;margin-right:28px;font-size:10px;letter-spacing:0}
/* The work is a luminous screen in a shared space, not a project-specific model. */
#journey{height:600svh;pointer-events:none}.sticky{pointer-events:none}.intro,.project{pointer-events:auto}#world canvas{pointer-events:auto;touch-action:pan-y}.project{left:4.5vw;top:47%;max-width:220px}.project h2{font-size:23px;line-height:1.15;letter-spacing:-.02em;margin:16px 0}.project .description{font-size:11px;line-height:1.9}.project .eyebrow{font-size:8px}.project .link-button{font-size:10px;width:145px;margin-top:12px}.intro{left:6vw;top:30%}h1{font-size:clamp(65px,7vw,110px)}.model-note{bottom:17%;right:7%;font-size:9px}.work-list{position:fixed;left:4.5vw;bottom:17%;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;opacity:0}.work-list button{font-size:9px;min-height:30px;color:#a3b6c5}.work-list button[aria-current=true]{color:#d4e6af}.inside .work-list{visibility:hidden!important}.inside .navigation{visibility:hidden!important}#room-design{aspect-ratio:1.65;padding:8%;background:#10202e;color:#cbe1de}#room-design>span{font:24px monospace;color:#d2edba}#room-design p{font:11px monospace;letter-spacing:.06em}.diagram{display:flex;gap:12px;margin-top:40px}.diagram i{font:12px/1.8 monospace;border:1px solid #678990;padding:20px;flex:1}.room-copy h2{font-size:34px}.room-steps{gap:12px}.room-media{transform:perspective(1400px) rotateY(-3deg)}
@media(max-width:700px){.intro{top:18%;left:8vw}h1{font-size:76px}.project{top:auto;bottom:19%;left:8vw;max-width:84vw}.project h2{font-size:26px;margin:10px 0}.project .description{max-width:295px;font-size:11px}.project .link-button{margin-top:0}.work-list{bottom:9%;left:8vw;right:8vw;flex-direction:row;justify-content:space-between;gap:7px}.work-list button{font-size:8px;min-height:44px;text-align:left}.model-note{top:16%;left:8vw;bottom:auto;right:auto;font-size:8px}.navigation{bottom:10px}.navigation #booth{display:none}.room-copy h2{font-size:32px}.diagram{gap:5px;margin-top:20px}.diagram i{padding:9px;font-size:9px}#room-design>span{font-size:20px}.room-steps button{font-size:9px}}
@media(min-width:701px){.project{top:42%}.work-list{bottom:12%;gap:3px}.work-list button{min-height:34px}}
body.reduced *{animation:none!important}#booth{display:none}.work-list button{min-height:44px}.room-steps button{min-height:44px}
@media(min-width:701px){.work-list{bottom:10%}.project{top:37%}}

/* Reference-led orbit: fixed screens, restrained chrome, one continuous camera path. */
#journey{height:400svh}.intro,.bridge{display:none}h1 em{font-style:normal}.wordmark{font:16px monospace;letter-spacing:-.05em}.wordmark span{font:9px monospace}.controls{border:1px solid #93acb54d;border-radius:30px;padding:0 18px;gap:24px;background:#080e12aa;box-shadow:0 7px 26px #8fb3c512}.controls button{font:10px monospace}.project{top:auto;bottom:29%;left:4.5vw;max-width:190px}.project h2{font:18px monospace;letter-spacing:-.04em}.project .eyebrow{font:8px monospace;color:#b7c4cd}.project .description{font-size:10px}.project .link-button{font:10px monospace;border:1px solid #9ba8c440;border-radius:30px;padding:0 15px;align-items:center;min-height:38px;width:165px}.work-list{bottom:11%;gap:0}.work-list button{font:10px monospace;color:#aaa1c8}.work-list button[aria-current=true]{color:#e0e9ed}.atmosphere{background:radial-gradient(ellipse at center,transparent 35%,#02090d88)}.model-note{bottom:10%;right:5vw}.navigation .scroll-cue{font:9px monospace}.room-media{transform:perspective(1200px) rotateY(-8deg)}
@keyframes room-enter{0%,30%{opacity:0}100%{opacity:1}}
@media(max-width:700px){header{padding:18px 5vw}.controls{gap:12px;padding:0 12px}.controls button{font-size:8px}.project{left:7vw;bottom:20%;max-width:85vw}.project h2{font-size:20px;margin:8px 0}.project .description{max-width:300px}.project .link-button{min-height:40px}.work-list{bottom:10%;left:7vw}.work-list button{font-size:8px}.model-note{top:15%;bottom:auto}.room-media{transform:none}}

/* White particle DNA on black, following the supplied image reference. */
:root{--bg:#000}.atmosphere{background:radial-gradient(ellipse at center,transparent 45%,#0008)}body.inside .atmosphere{background:radial-gradient(ellipse at center,transparent,#0008)}

.contact-end{position:relative;z-index:10;min-height:100svh;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}.end-logo{font-size:clamp(80px,18vw,240px);font-weight:500;letter-spacing:-.085em;line-height:1}.contact-link{font:13px monospace;min-height:48px;padding:0 26px;border:1px solid #ffffff50;border-radius:30px;display:flex;align-items:center;gap:50px}.contact-link:hover{border-color:#fff;color:#fff}#contact-status{font-size:11px;color:#a9bebc}.contact-end a:hover{color:white}

/* The final contact area stays inside the same uninterrupted universe. */
.contact-end{background:transparent;min-height:100svh;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:0 8vw 13vh;pointer-events:none}.contact-end>a{pointer-events:auto}.end-logo{font-size:clamp(52px,8vw,100px);text-shadow:0 2px 25px #000}.contact-link{background:#0007;backdrop-filter:blur(8px)}@media(max-width:700px){.contact-end{padding:0 7vw 15vh;gap:24px}.contact-link{gap:24px;padding:0 20px}.end-logo{font-size:60px}}

/* Project index stays in the lower-left; titles belong to the media surfaces. */
#project{display:none}.work-list{left:4.5vw;right:auto;bottom:12%;display:flex;flex-direction:column;gap:15px;align-items:flex-start;max-width:220px}.work-list button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:4px 0 4px 14px;border-left:1px solid transparent;color:#8f9caa;min-height:44px}.work-list button[aria-current=true]{border-color:#e4ecee;color:#f2f5f5}.index-category{font:8px monospace;letter-spacing:.08em}.index-title{font:12px 'Helvetica Neue',Arial,sans-serif}.work-list button:hover{color:white}.model-note{display:none}@media(max-width:700px){.work-list{left:7vw;bottom:10%;gap:9px;max-width:220px}.index-category{font-size:7px}.index-title{font-size:11px}.work-list button{gap:4px;min-height:40px;padding-left:10px}}

.work-list .index-open{font:9px monospace;min-height:32px;color:#c8d2d7;padding-left:14px;margin-top:2px}

/* Fullscreen destinations share the space; closing restores the exact scroll position. */
#open-contact{order:3;border-left:1px solid #ffffff30;padding-left:22px;color:#f2f4f4}.full-page{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:30px 5vw;color:#e3e9ee;background:#060a10e8;overflow:auto}.full-page::backdrop{background:#02060a40;backdrop-filter:blur(5px)}.full-page[open]{animation:page-reveal .45s ease both}.page-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font:12px monospace}.page-top button{min-width:100px;border:1px solid #a9bbce50;border-radius:30px}.contact-content{position:relative;z-index:1;min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center}.contact-content h2{font-size:clamp(64px,12vw,170px);font-weight:300;letter-spacing:-.06em;margin:55px 0 70px}.contact-email{font:clamp(15px,2vw,24px) monospace;border-bottom:1px solid #d4dfe7;padding:12px 0}.blog-page{background:#090e13f5}.blog-content{max-width:900px;margin:9vh auto 70px}.blog-content h2{font-size:clamp(40px,6vw,76px);font-weight:400;letter-spacing:-.04em;margin:20px 0 45px}.blog-empty{border-top:1px solid #ffffff25;padding:35px 0;color:#a9b6c4;font-size:14px;line-height:1.9}.blog-entry{display:block;width:100%;text-align:left;padding:28px 0;border-top:1px solid #ffffff25}.blog-entry time,#article-date{display:block;font:11px monospace;color:#92a8bc}.blog-entry h3{font-size:25px;font-weight:400;margin:14px 0}.blog-entry p{color:#a9b6c4;font-size:13px;line-height:1.8}#blog-back{font:11px monospace;margin-bottom:36px}#article-body{font-size:16px;line-height:2;overflow-wrap:anywhere}#article-body h2{font-size:28px;margin:45px 0 20px}#article-body h3{font-size:22px;margin-top:35px}#article-body img{max-width:100%;height:auto}#article-body pre{overflow:auto;padding:20px;background:#141e29}#article-body a{text-decoration:underline}.page-open header,.page-open .work-list,.page-open .navigation{visibility:hidden!important}.page-open #world{filter:brightness(.4)}.contact-end>button{pointer-events:auto}@keyframes page-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-width:700px){#open-contact{padding-left:12px}.controls{gap:9px}.full-page{padding:20px 6vw}.contact-content h2{margin:50px 0}.blog-content{margin-top:8vh}.blog-content h2{font-size:42px}.contact-email{font-size:17px}.blog-entry h3{font-size:21px}}

/* Keep the index out of the media's projected area, including short phone viewports. */
.atmosphere{background:linear-gradient(90deg,#000b 0%,#0005 23%,transparent 48%),radial-gradient(ellipse at center,transparent 25%,#0008)}
.work-list{max-width:205px}.work-list button{color:#a9b5c1;text-shadow:0 1px 8px #000}.work-list button[aria-current=true]{color:#f0f2f4}
@media(max-width:700px){.work-list{top:64svh;bottom:auto;left:7vw;gap:6px;max-width:75vw}.work-list button{min-height:42px}.work-list .index-open{min-height:32px;margin-top:0}.atmosphere{background:linear-gradient(180deg,#0002 0%,transparent 35%,#0003 50%,#000c 65%,#000b 100%)}.navigation{bottom:max(14px,env(safe-area-inset-bottom));}.index-title{font-size:12px}.index-category{font-size:8px}}
@media(max-width:700px) and (max-height:650px){.work-list{top:59svh;gap:2px}.work-list button{min-height:38px}.work-list .index-open{min-height:28px}.index-category{font-size:7px}.index-title{font-size:11px}}

/* A brief signal sweep on entry; article content remains still. */
#room[open] .room-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 47%,#e8f3ff55 49.5%,#fff8 50%,transparent 52%);background-size:100% 220%;animation:crt-arrive .85s ease-out both;mix-blend-mode:screen}@keyframes crt-arrive{0%{background-position:0 180%;opacity:0}15%{opacity:.7}100%{background-position:0 -60%;opacity:0}}body.reduced #room .room-media:after{display:none}

/* Detail is a readable layer over the original DNA environment. */
body.inside #world{filter:brightness(.55);transition:filter .6s ease}#room{background:transparent}#room::backdrop{background:rgba(3,6,13,.48);backdrop-filter:blur(1px)}body.inside .atmosphere{background:radial-gradient(ellipse at center,#02061110,#02061166)}.room-copy{text-shadow:0 2px 16px #000}.room-copy p{color:#c4d0d6}.room-media{box-shadow:0 20px 70px #0008}.room-top{position:relative;z-index:2}#room .room-media img,#room .room-media video{filter:brightness(.88)}

/* The supplied reference is analog snow, so remove the earlier sharp entry streak. */
#room[open] .room-media:after{display:none}
/* Optional hand controls, kept separate from the cinematic scene. */
#gesture-guide{max-width:520px;width:90vw;background:#0c121c;color:#e8eeee;border:1px solid #697d8b;padding:32px;line-height:1.85}#gesture-guide::backdrop{background:#000b}#gesture-guide h2{font-size:28px;font-weight:400}#gesture-guide p{font-size:14px}.gesture-close{float:right}.gesture-note{color:#9eafba;font-size:12px!important}#gesture-start{border:1px solid #b9cbd4;padding:10px 20px}#gesture-start:disabled{opacity:.45;cursor:default}#gesture-message{color:#d2ed9c}#gesture-hud{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;color:#e8eeee;pointer-events:none}#gesture-hud::backdrop{pointer-events:none}.gesture-monitor{position:absolute;right:18px;bottom:18px;width:210px;padding:10px;background:#080e18ee;border:1px solid #566876;pointer-events:auto;font-size:11px}.gesture-monitor video{width:70px;height:52px;object-fit:cover;transform:scaleX(-1);float:left;margin-right:10px}.gesture-monitor span{display:block;min-height:52px;line-height:1.6}.gesture-monitor button{width:100%;font:11px monospace}#gesture-cursor{position:absolute;width:25px;height:25px;border:1px solid #d2ed9c;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 14px #d2ed9c77;pointer-events:none}#gesture-cursor.pinching{background:#d2ed9c88;transform:translate(-50%,-50%) scale(.65)}.gesture-target{outline:2px solid #d2ed9c!important;outline-offset:4px}@media(max-width:700px){.controls{gap:6px;padding:0 9px}.controls button{font-size:8px}header .wordmark{font-size:23px}#open-contact{padding-left:8px}.gesture-monitor{width:180px;bottom:60px}}

/* Safari toolbar motion does not stretch the scene during native scrolling. */
@media(max-width:700px){#world canvas{height:100lvh}}
.gesture-monitor{width:250px}.gesture-camera{position:relative;width:120px;height:90px;float:left;margin:0 10px 8px 0}.gesture-monitor .gesture-camera video{width:120px;height:90px;margin:0;float:none;object-fit:fill}.gesture-camera canvas{position:absolute;inset:0;width:120px;height:90px;pointer-events:none}.gesture-monitor span{min-height:90px}.gesture-hint{clear:both;line-height:1.8;margin:8px 0;font-size:11px;color:#d1dfdf}#gesture-cursor{background:conic-gradient(#d2ed9c66 var(--hold,0deg),transparent 0)}#gesture-cursor.ready{border-width:3px;box-shadow:0 0 18px #d2ed9caa}

/* Ten projects share a bounded index; the scene remains unobstructed. */
.work-list{max-height:46svh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#697784 transparent;padding:4px 10px 4px 2px}.work-list button{flex-shrink:0}.work-list .index-open{position:sticky;bottom:0;background:#080d12e8;min-height:38px}.work-list .index-open:disabled{color:#879399;cursor:default}@media(max-width:700px){.work-list{max-height:24svh;max-width:80vw}.work-list button{min-height:42px}.work-list .index-open{min-height:30px}}

/* The left navigation is a category index; project names stay on the screens. */
.category-list{overflow:visible;max-height:none;gap:2px;padding:0;max-width:205px}.category-list button[data-category]{min-height:36px;font:12px monospace;text-align:left;padding:8px 14px;color:#89949e}.category-list button[data-category][aria-current=true]{color:#eef3f3;border-left:1px solid #eef3f3}.category-list .index-open{position:static;background:none;margin-top:12px}@media(max-width:700px){.category-list{top:64svh;gap:0;max-width:80vw}.category-list button[data-category]{min-height:28px;font-size:10px;padding:6px 10px}.category-list .index-open{margin-top:5px;min-height:28px}}@media(max-width:700px) and (max-height:650px){.category-list{top:59svh}.category-list button[data-category]{min-height:25px;padding:5px 10px}}

.track-picker{background:#0b121b;color:#d4dfe5;border:1px solid #ffffff30;border-radius:3px;font:11px monospace;padding:6px;max-width:85px;min-height:32px}.track-picker:focus-visible{outline:2px solid var(--accent)}.controls{gap:12px}@media(max-width:700px){.controls{gap:4px;padding:0 7px}.track-picker{font-size:9px;max-width:65px;padding:3px}.controls button{letter-spacing:0}header{padding-left:3vw;padding-right:3vw}}

.sound-control{display:inline-flex;align-items:center;gap:0;flex-shrink:0}.sound-control>button{min-height:44px}.sound-control .sound-arrow{font:22px Arial;min-width:30px;padding:0 6px;color:#a9bebc}.sound-control #sound,.sound-control #room-sound{min-width:74px;padding:0 6px;font:11px monospace}.sound-control button:hover{color:#d2ed9c}.room-top .sound-control{margin-left:auto}.room-top .sound-control button{border:0}@media(max-width:700px){.sound-control .sound-arrow{min-width:26px;padding:0 4px;font-size:19px}.sound-control #sound,.sound-control #room-sound{font-size:9px;min-width:58px}}
/* Decorative music note stays inside the shared playback button. */
.sound-control #sound::before,.sound-control #room-sound::before{content:'';display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6 2.5 14 1v10a2 2 0 1 1-1.5-1.94V4L7.5 5v8a2 2 0 1 1-1.5-1.94V2.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6 2.5 14 1v10a2 2 0 1 1-1.5-1.94V4L7.5 5v8a2 2 0 1 1-1.5-1.94V2.5Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sound-control #sound,.sound-control #room-sound{min-width:92px}@media(max-width:700px){.sound-control #sound,.sound-control #room-sound{min-width:76px}}
.sound-control #sound[aria-pressed="false"]::before,.sound-control #room-sound[aria-pressed="false"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1 6h3l4-3v10l-4-3H1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='m11 6 4 4m0-4-4 4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1 6h3l4-3v10l-4-3H1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='m11 6 4 4m0-4-4 4'/%3E%3C/svg%3E")}
.sound-control #sound[aria-pressed="false"]::before,.sound-control #room-sound[aria-pressed="false"]::before{transform:translateY(1px)}