/* Responsive matte aluminum enclosure; original artwork remains in assets. */
html,body{width:100%;height:100%;overflow:hidden}body{display:block;padding:0;background:#c4c6c9}.device{width:100%;height:100svh;min-height:360px;aspect-ratio:auto;border-radius:0;background:linear-gradient(115deg,#dddfe1 0%,#c5c7ca 38%,#d4d6d8 72%,#bfc2c5);box-shadow:inset 0 1px #fff8;--deck:clamp(88px,13vh,150px);--rim:clamp(10px,2vw,30px)}.shell{display:none}.device:before{content:'';position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.screen{left:var(--rim);top:var(--rim);width:calc(100% - 2 * var(--rim));height:calc(100% - var(--deck) - var(--rim));border-radius:clamp(18px,2.2vw,34px);box-shadow:0 1px 0 #fff9;}.hardware{position:absolute;bottom:0;left:0;width:100%;height:var(--deck);display:flex;justify-content:center;align-items:center;gap:clamp(5px,.6vw,10px);padding:10px var(--rim);}.hardware:before,.hardware:after{content:'';flex:1;max-width:32%;height:74%;margin:0 clamp(10px,2.5vw,42px);background:radial-gradient(circle,#303235 1.5px,transparent 2px) 0 0/7px 7px;opacity:.85}.hardware-button{position:relative;left:auto;top:auto;width:clamp(38px,5vw,76px);height:clamp(44px,5vw,76px);flex-shrink:0;border-radius:9px;border:1px solid #999da1;background:linear-gradient(145deg,#d7d9db,#b5b8bb);box-shadow:inset 0 1px 1px #ffffffe0,0 3px 5px #30343a40;transition:background .18s,box-shadow .18s,transform .18s}.hardware-button img{opacity:.9;width:48%;height:48%}.hardware-button.active,.hardware-button:active{background:linear-gradient(145deg,#daeaff,#81adf1);box-shadow:inset 0 1px 2px #fff,0 0 9px #5191ff,0 0 22px #448aff88;border-color:#d5e9ff;filter:none;transform:translateY(1px)}.hardware-button.active img,.hardware-button:active img{filter:brightness(0) invert(1);opacity:1}.knob{position:relative;left:auto;top:auto;width:clamp(54px,7vw,108px);flex-shrink:0;margin-left:clamp(8px,1.5vw,24px);background:linear-gradient(130deg,#85888b,#45484b);border:2px solid #a2a5a8;box-shadow:inset 0 1px 2px #fff8,0 4px 6px #0004;overflow:visible}.knob span{inset:0;background:radial-gradient(ellipse at 35% 25%,#75787a,#494c4e 75%);border-radius:50%}.knob span:before{display:block;left:calc(50% - 1px);top:6%;height:40%;width:2px;background:#e7e9ea;border-radius:2px;box-shadow:1px 0 1px #1119,-1px 0 1px #fff7}.identity{font-size:clamp(12px,1.1vw,18px)}.identity span{font-size:clamp(17px,1.7vw,28px)}.mobile-gallery{display:none}#panel{max-height:75%;overflow:auto}
@media(max-width:700px){.device{--deck:94px;--rim:11px}.screen{border-radius:26px}.hardware{gap:5px;padding:10px 8px}.hardware:before,.hardware:after{max-width:none;margin:0 5px;background-size:5px 5px;background-image:radial-gradient(circle,#393c40 1px,transparent 1.5px)}.hardware-button{width:36px;height:42px;border-radius:6px}.knob{width:54px;margin-left:7px}.screen header{inset:20px 15px auto}.gallery-heading{top:18%;gap:10px}.categories{width:55vw;height:52px;border-radius:12px}.categories button{font-size:11px;padding:0 5px}.categories button[aria-selected=true]{font-size:12px}.gallery-heading>button{width:38px;height:38px;font-size:28px;border-width:4px}.categories:after{height:8px}.categories:before{height:11px}.webgl-surface,.stage{display:none}.mobile-gallery{display:flex;position:absolute;left:0;right:0;top:34%;bottom:17%;align-items:center;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;}.mobile-gallery::-webkit-scrollbar{display:none}.mobile-card{flex:0 0 86%;position:relative;aspect-ratio:17/12;padding:0;border-radius:18px;overflow:hidden;background:#243c69;box-shadow:0 12px 28px #092c5233}.mobile-card img{width:100%;height:100%;object-fit:cover;display:block}.mobile-card strong{position:absolute;bottom:0;left:0;right:0;padding:30px 16px 16px;background:linear-gradient(transparent,#101a35cc);text-align:left;font-size:15px;font-weight:400}.screen footer{bottom:12px;height:50px;gap:20px}.screen nav{gap:10px}.screen nav button{font-size:12px;padding-bottom:12px}.screen nav button:after{width:5px;height:5px;left:calc(50% - 2px)}.player img{width:34px}#panel{top:12%;left:5%;right:5%;width:90%;padding:26px}#panel h2{font-size:24px}#panel p,#panel a{font-size:14px}#panel .eyebrow{font-size:10px}#close{font-size:28px;top:8px;right:12px}}
@media(prefers-reduced-motion:reduce){.hardware-button{transition:none}}
/* Navigation labels follow the centers of the physical controls. */
.screen footer{left:50%;right:auto;transform:translateX(-50%);width:auto;display:grid;grid-template-columns:repeat(4,clamp(38px,5vw,76px)) clamp(54px,7vw,108px);gap:clamp(5px,.6vw,10px);bottom:16px;height:68px}.screen footer nav{display:contents}.screen footer nav button{font-size:clamp(11px,1.2vw,18px);text-align:center;white-space:nowrap;padding-bottom:14px}.screen footer .player{position:relative;display:flex;align-items:center;justify-content:center;margin-left:clamp(8px,1.5vw,24px);width:clamp(54px,7vw,108px);height:68px;flex-direction:column;gap:5px}.player .vinyl-label{display:block;font-size:12px}.player .record{display:block;position:relative;width:clamp(40px,3.8vw,60px);height:clamp(40px,3.8vw,60px);animation:vinyl-spin 8s linear infinite;animation-play-state:paused}.player.is-playing .record{animation-play-state:running}.player .record img{width:100%;height:100%;display:block;filter:none}.player .record .record-cover{position:absolute;inset:17%;width:66%;height:66%;object-fit:cover;border-radius:50%}@keyframes vinyl-spin{to{transform:rotate(360deg)}}
.music-popup{position:absolute;z-index:50;bottom:105px;left:50%;transform:translateX(-50%);width:280px;max-width:calc(100% - 28px);padding:20px;border:1px solid #ffffff70;border-radius:22px;background:linear-gradient(140deg,#dce7f5f5,#acc4e5ed);box-shadow:0 15px 50px #031b4c55,inset 0 1px #fff9;backdrop-filter:blur(24px);color:#192d4e}.music-popup[hidden]{display:none}.music-close{position:absolute;right:8px;top:5px;font-size:24px;color:#234}.album-cover{width:112px;height:112px;object-fit:cover;border-radius:12px;display:block;margin:0 auto 15px;box-shadow:0 5px 12px #1233}.track-info{text-align:center;display:grid;gap:5px}.track-info strong{font-size:17px}.track-info span{font-size:12px;opacity:.7}.music-seek{width:100%;margin:16px 0 0;accent-color:#376ee9}.music-times{display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums}.music-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.music-controls button{font-size:20px;padding:8px;color:#234}.music-controls .toggle{border-radius:50%;background:#edf5ff;min-width:44px;min-height:44px}.music-status{font-size:11px;text-align:center;margin-top:6px}
@media(max-width:700px){.mobile-gallery{flex-direction:column;align-items:stretch;top:28%;bottom:0;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;gap:14px;padding:0 14px 110px;mask-image:linear-gradient(#000 0%,#000 75%,transparent 97%)}.mobile-card{flex:0 0 auto;width:100%;aspect-ratio:17/12;min-height:0}.screen footer{grid-template-columns:repeat(4,36px) 54px;gap:5px;bottom:9px;height:66px;z-index:6}.screen footer nav button{font-size:10px}.screen footer .player{width:54px;height:66px;margin-left:7px;gap:3px}.player .vinyl-label{font-size:10px}.player .record{width:39px;height:39px}.music-popup{bottom:87px}.gallery-heading{top:13%;}.screen footer:before{content:'';position:absolute;inset:-20px -80px -10px;background:linear-gradient(transparent,#184393aa 80%);z-index:-1;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.player .record{animation:none}}
.mobile-gallery{overflow-anchor:none}
/* Screen-wide fades are independent of the navigation cluster. */
.screen:before,.screen:after{content:'';position:absolute;left:0;right:0;width:100%;pointer-events:none;z-index:3;box-shadow:none}.screen:before{top:0;bottom:auto;height:29%;background:linear-gradient(to bottom,#17449dd9 0%,#2458ad75 45%,#2458ad00 100%)}.screen:after{top:auto;bottom:0;height:24%;background:linear-gradient(to bottom,#1c4baf00,#1848abc7 64%,#1746a9ed)}.screen footer:before{display:none}.screen footer{display:block;left:0;right:0;width:100%;transform:none;height:68px;bottom:14px;z-index:6;padding:0}.screen footer nav{display:contents}.screen footer nav button{position:absolute;top:50%;transform:translate(-50%,-50%);margin:0;padding:0 0 14px;width:max-content}.screen footer .player{position:absolute;top:50%;transform:translate(-50%,-50%);margin:0;width:auto;height:auto;display:block}.screen footer .player .record{display:block}.gallery-heading{width:min(405px,92%);gap:0;justify-content:space-between}.gallery-heading>button{width:12.2%;height:auto;aspect-ratio:1;border:5px solid #d3d4d6c0;background:linear-gradient(#fcfcfc,#eaeef1);box-shadow:inset 0 1px 2px #fff,0 2px 1px #ffffff63;color:#1e68f0;font-size:30px;flex-shrink:0}.categories{width:61%;height:auto;aspect-ratio:247/65;display:block;padding:0;border-radius:12px;border:1px solid #ffffff80;background:#f4f5f780;backdrop-filter:blur(18px);box-shadow:inset 0 1px 3px #fff4;overflow:hidden}.category-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;width:max-content;transform:translateX(var(--tape-x,0));transition:transform .5s cubic-bezier(.22,.8,.25,1)}.categories .category-track button{flex:0 0 90px;width:90px;white-space:nowrap;padding:0 3px 5px;font-size:12px;border:0;color:#4b5260;opacity:.75}.categories .category-track button[aria-selected=true]{font-size:14px;color:#101217;font-weight:600;opacity:1}.categories:before{left:calc(50% - 1px);bottom:0;width:2px;height:12px;background:#e63b52}.categories:after{left:8px;right:8px;bottom:0;height:9px;background:repeating-linear-gradient(90deg,#596375 0 1px,transparent 1px 7px)}
@media(max-width:700px){.screen:before{height:30%}.screen:after{height:22%}.screen footer{bottom:13px;height:50px}.screen footer nav button{font-size:11px}.gallery-heading{width:92%;top:13%}.gallery-heading>button{border-width:4px;font-size:28px}.categories{border-radius:10px}.categories .category-track button{width:80px;flex-basis:80px;font-size:11px}.categories .category-track button[aria-selected=true]{font-size:13px}.mobile-gallery{mask-image:none;padding-bottom:110px}.screen header{z-index:5}}
@media(prefers-reduced-motion:reduce){.category-track{transition:none}}
.categories .category-track button[data-category="Branding & Others"]{width:145px;flex-basis:145px}@media(max-width:700px){.categories .category-track button[data-category="Branding & Others"]{width:135px;flex-basis:135px}.screen footer nav button{font-size:10px}}
/* Let the vertical feed continue behind the mobile header instead of clipping
   against a rectangular viewport below the category tuner. */
@media(max-width:700px){
 .mobile-gallery{top:0;bottom:0;padding:20px 14px 110px;scroll-padding-top:20px;}
 .screen:before{height:32%;background:linear-gradient(to bottom,#17449df2 0%,#2458ad99 28%,#2458ad3d 65%,#2458ad00 100%);}
}



/* Reserve label widths in the hardware row without shifting labels off their buttons. */
.hardware { gap: max(8px, .6vw); }
.hardware:before, .hardware:after { min-width: 0; }
@media(max-width:400px) {
 .hardware:before, .hardware:after { margin: 0; }
}