@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Space+Mono:wght@400;700&display=swap');
:root{--cream:#e8d5ad;--ink:#0d100f;--olive:#7f8058}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--ink);color:var(--cream);font-family:'Space Mono',monospace}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ffce79;outline-offset:6px}header{position:absolute;z-index:20;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:linear-gradient(#080b0b70,transparent)}.home{font:700 22px Kalam,cursive;opacity:0;pointer-events:none}nav{display:flex;align-items:center;gap:40px;font:16px Kalam,cursive;transform:rotate(-2deg)}nav a{position:relative}nav a.active:after{content:'';position:absolute;left:-4px;right:-4px;bottom:0;height:2px;background:var(--cream);transform:rotate(-4deg)}#sound{background:#10130e70;border:1px solid #c3ad7d50;color:var(--cream);padding:7px 12px;font:10px 'Space Mono',monospace}#sound span{color:#b8b88b;margin-left:8px}#intro{height:calc(clamp(420px,42vw,760px) + 65vh);position:relative;background:#0c0f10}.stage{position:sticky;top:0;height:clamp(420px,42vw,760px);overflow:hidden}.scene-art{position:absolute;inset:-1px;background-image:url('assets/scenes-v2.png');background-repeat:no-repeat;background-size:100% 200%;will-change:transform}.city-art{background-position:center top;transform-origin:55% 70%}.studio-art{background-position:center bottom;transform-origin:53% 63%}.sun-glow{position:absolute;left:44%;top:48%;width:23%;height:35%;background:radial-gradient(ellipse,#ff9f2025,transparent 70%);mix-blend-mode:screen;pointer-events:none}.scroll-note{position:absolute;right:4%;bottom:8%;font:20px/1.15 Kalam,cursive;transform:rotate(-6deg);text-align:center;text-shadow:0 2px 6px #000}.scroll-note span{display:block;font:32px Kalam,cursive;margin-top:5px}.scene-meta{position:absolute;bottom:18px;left:4%;display:flex;gap:25px;font-size:8px;letter-spacing:2px;text-shadow:0 1px 5px #000}.iris{position:absolute;inset:0;background:#090c0c;opacity:0;pointer-events:none}.torn-edge{position:absolute;bottom:-1px;left:0;right:0;height:11px;background:#dbcbaa;clip-path:polygon(0 25%,6% 65%,12% 44%,18% 68%,26% 35%,34% 73%,40% 50%,48% 70%,56% 25%,63% 54%,70% 34%,77% 77%,84% 42%,91% 56%,97% 24%,100% 40%,100% 75%,94% 81%,88% 72%,80% 95%,70% 66%,60% 88%,50% 82%,40% 91%,30% 68%,20% 88%,10% 70%,0 65%);z-index:5}#lab{position:relative;margin-top:-2px;background:#101311}.lab-stage{height:clamp(420px,43vw,760px);position:relative;overflow:hidden}.paper-title{display:inline-block;background:var(--cream);color:#15160f;padding:8px 19px 3px;font:700 clamp(20px,2.7vw,36px)/1.2 Kalam,cursive;transform:rotate(-5deg);box-shadow:3px 5px 0 #0009;clip-path:polygon(1% 3%,100% 0,98% 100%,0 96%)}h1.paper-title{position:absolute;left:2.5%;top:5%;margin:0;z-index:4}.lamp-glow{position:absolute;right:6%;top:0;width:30%;height:70%;background:radial-gradient(ellipse,#ffd0681f,transparent 65%);pointer-events:none}.studio-indicator{position:absolute;bottom:6%;left:4%;background:#0d100cbb;padding:10px 15px;border:1px solid #d8ba7640;font-size:10px;letter-spacing:2px;display:flex;gap:9px;align-items:center}.instrument-link{position:absolute;right:4%;bottom:6%;font:16px Kalam,cursive;text-shadow:0 2px 4px #000}.studio-indicator i,.led{display:inline-block;width:6px;height:6px;background:#c5b174;border-radius:50%;box-shadow:0 0 10px #ffc85f}.workbench{position:relative;padding:45px 6% 24px;background:radial-gradient(ellipse at 40% 0,#5b412b60,transparent 75%),repeating-linear-gradient(0deg,transparent 0 64px,#bda37708 65px 66px),#111411;border-bottom:1px solid #dfcba53a}.workbench-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 35px}.workbench-heading .paper-title{font-size:20px}.session-note{font-size:9px;letter-spacing:2px;color:#b4aa8e}.panels{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:1150px;margin:auto}.panel{position:relative;border:1px solid #9c875c50;background:radial-gradient(ellipse at 50% 25%,#6b503334,#11130f 80%);padding:40px 35px 12px;box-shadow:10px 14px 0 #0004;will-change:transform,opacity}.panel-label{position:absolute;left:15px;top:12px;font:14px Kalam,cursive;color:#b8a987}.sampler-unit{max-width:400px;width:100%;margin:auto;background:linear-gradient(135deg,#3c3d31,#191f18);padding:18px 22px;border:5px solid #080c08;border-radius:6px;box-shadow:8px 12px 0 #0007;transform:perspective(800px) rotateX(8deg) rotateZ(-3deg)}.hardware-top,.hardware-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px}.screen{background:#b5b58a;color:#303b25;border:4px solid #10150e;margin:13px 0 18px;padding:9px;font-size:11px;height:65px}.screen small{font-size:8px}.wave{height:12px;margin:2px 0;background:repeating-linear-gradient(90deg,transparent 0 2px,#465332 2px 3px);clip-path:polygon(0 40%,10% 20%,20% 60%,30% 0,40% 80%,50% 20%,60% 60%,70% 0,80% 70%,90% 30%,100% 40%,100% 60%,0 60%)}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pad{aspect-ratio:1.22;border:2px solid #11180f;background:linear-gradient(#bfb495,#92896c);color:#41462f;box-shadow:0 4px 0 #070d07;border-radius:3px;font:10px 'Space Mono',monospace;transition:transform .08s,background .08s}.pad:nth-child(-n+4){background:linear-gradient(#899066,#626f4e)}.pad.hit,.pad:active{background:#f2c376;transform:translateY(3px);box-shadow:0 0 20px #efb75180}.hardware-bottom{margin-top:14px;font-size:7px}.knob{width:22px;height:22px;border:3px solid #0b1009;border-radius:50%;background:linear-gradient(90deg,#85816b 40%,#20271b 40% 60%,#85816b 60%)}.deck{width:100%;max-width:400px;aspect-ratio:1.07;margin:auto;background:linear-gradient(135deg,#85856b,#535b46);border:6px solid #10160f;box-shadow:7px 12px 0 #0007;position:relative;transform:perspective(800px) rotateX(8deg) rotate(2deg);border-radius:4px}.deck-label{position:absolute;top:5%;left:5%;font-size:9px;color:#242d20}.vinyl{position:absolute;width:78%;left:3%;top:11%;animation:spin 1.8s linear infinite;animation-play-state:paused;filter:drop-shadow(4px 8px 3px #0005)}.playing .vinyl{animation-play-state:running}.tonearm{position:absolute;right:9%;top:15%;width:9%;height:62%;border:8px solid #252b20;border-top-width:18px;border-bottom:0;transform:rotate(-23deg);transform-origin:top center;border-radius:40px 40px 0 0;transition:transform .5s}.playing .tonearm{transform:rotate(16deg)}#play{position:absolute;bottom:6%;left:6%;background:#222d1e;color:var(--cream);border:2px solid #10170e;width:43px;height:32px}.rpm{position:absolute;right:8%;bottom:8%;font-size:9px;color:#222d1e}.strobe{position:absolute;bottom:9%;left:25%;width:6px;height:6px;background:#e1b166;border-radius:50%}.equipment-hint{text-align:center;margin:24px 0 4px;font-size:9px;letter-spacing:2px;color:#b7ad8e}footer{display:flex;justify-content:space-between;align-items:center;padding:25px 6%;font-size:9px;letter-spacing:2px;color:#a59c83}footer button{font-size:9px;color:inherit;border:0;background:none;letter-spacing:1px}.progress{position:fixed;bottom:0;left:0;z-index:30;height:2px;background:#c7ad76;width:0}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:25;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:650px){header{height:55px;padding:0 5%}nav{gap:20px;font-size:13px}.home{display:none}header{justify-content:flex-end}#sound{font-size:8px}.stage{height:340px}#intro{height:calc(340px + 45vh)}.lab-stage{height:330px}.scene-art{background-size:140% 200%}.city-art{background-position:48% top}.studio-art{background-position:48% bottom}.scroll-note{font-size:13px;right:3%;bottom:9%}.scene-meta{font-size:6px;gap:12px}.paper-title{font-size:22px}.studio-indicator{font-size:8px;padding:6px 10px}.instrument-link{font-size:12px}.workbench{padding:30px 5% 20px}.workbench-heading{margin-bottom:25px}.workbench-heading .paper-title{font-size:16px}.session-note{display:none}.panels{grid-template-columns:1fr;gap:25px}.panel{padding:42px 20px 15px}.sampler-unit{max-width:340px}.deck{max-width:340px}footer{font-size:7px;padding:22px 5%;letter-spacing:1px}footer>span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-art,.panel{will-change:auto}.vinyl{animation:none}.tonearm{transition:none}}

/* Continuous comic-strip composition: no empty spacer between scenes. */
#intro{height:auto}.stage{position:relative;height:clamp(300px,34vw,680px)}.lab-stage{height:clamp(330px,34vw,680px)}
@media(max-width:650px){.stage{height:240px}.lab-stage{height:270px}.scene-art{background-size:100% 200%}header{height:40px}nav{font-size:11px;gap:16px}.scroll-note{font-size:11px;bottom:6%}.scene-meta{bottom:12px}}
/* A full-width finishing session bridges the studio desk and mixtapes. */
.finish-scene{position:relative;height:clamp(340px,48vw,780px);overflow:hidden;background:#111611}.finish-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%;will-change:transform}.finish-label{position:absolute;z-index:3;top:5%;left:3%;font-size:clamp(20px,2.6vw,36px)}.finish-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#070b0a18,transparent 25%,transparent 75%,#080c0b66)}@media(max-width:650px){.finish-scene{height:380px}.finish-image{object-position:50% 50%}.finish-label{font-size:22px}}@media(prefers-reduced-motion:reduce){.finish-image{will-change:auto}}
.rolling-scene .finish-image{object-position:center 50%}
.coffee-scene .finish-image{object-position:center 52%}

.coffee-scene .finish-image{object-position:center top}
.mpc-portrait-scene{position:relative;height:clamp(330px,34vw,680px);overflow:hidden;background:#101311}@media(max-width:650px){.mpc-portrait-scene{height:270px}}
/* Preserve the full grounded pose, including both feet. */
.smoke-break-scene{height:auto;aspect-ratio:1.5}.smoke-break-scene .finish-image{object-fit:contain;transform:none!important}
.lighting-scene{height:auto;aspect-ratio:1.5}.lighting-scene .finish-image{object-fit:contain;transform:none!important}