@font-face{font-family:DM;src:url('./fonts/body-bold.woff2');font-weight:600 800;font-display:swap}@font-face{font-family:Bricolage;src:url('./fonts/display.woff2');font-weight:500 900;font-display:swap}@font-face{font-family:DM;src:url('./fonts/body.woff2');font-weight:400 500;font-display:swap}@font-face{font-family:Jet;src:url('./fonts/mono.woff2');font-weight:400 800;font-display:swap}
:root{--paper:#fff4d5;--white:#fffefa;--ink:#171614;--coral:#ef5b4f;--teal:#35aebf;--yellow:#ffe46f;--muted:#686052;color:var(--ink);font-family:DM,Arial,sans-serif;font-synthesis:weight}*{box-sizing:border-box}body{margin:0;background:var(--paper);overflow:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(#68605228 .7px,transparent .8px);background-size:6px 6px;opacity:.35}button,a,input,textarea{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #197281;outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.03)}.eyebrow{font:700 10px/1.5 Jet,monospace;letter-spacing:.13em;text-transform:uppercase}.masthead{height:92px;padding:22px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{display:grid;place-items:center;background:var(--coral);color:var(--white);width:44px;height:44px;font:800 20px Bricolage,sans-serif;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}.brand strong{font:800 18px Bricolage,sans-serif}.brand small{display:block;font:700 8px Jet,monospace;letter-spacing:.11em;margin-top:5px}.edition{display:flex;align-items:center;gap:10px;font:700 9px Jet,monospace;letter-spacing:.1em}.edition b{border-left:1px solid #17161450;padding-left:15px;margin-left:7px}.status-dot{height:7px;width:7px;background:var(--teal);border:1px solid var(--ink);border-radius:50%}.header-actions{display:flex;align-items:center;gap:10px}.square-button{width:36px;height:36px;border:1.5px solid var(--ink);border-radius:3px;background:var(--white);box-shadow:2px 2px 0 var(--ink);font:700 13px Jet,monospace;display:grid;place-items:center}.original-link{font-size:11px;font-weight:700;margin-left:10px;text-underline-offset:4px}.scene-heading{position:absolute;left:36px;top:12px;z-index:2;pointer-events:none}.scene-heading .eyebrow{color:#a84236}.scene-heading h1{font:800 clamp(30px,3.3vw,53px)/1.02 Bricolage,sans-serif;letter-spacing:-.06em;margin:8px 0 11px}.scene-heading h1 em{font-style:normal;color:var(--coral)}.scene-heading>p:last-child{font-size:12px;color:var(--muted);max-width:270px;line-height:1.55;margin:0}#universe{position:relative;height:calc(100dvh - 208px);min-height:260px}#stage{position:absolute;inset:0;touch-action:none}#stage canvas{display:block;width:100%;height:100%;outline:none}#stage canvas:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}#hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hotspot{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;transform:translate(-50%,-50%);pointer-events:auto;border:1.5px solid var(--ink);padding:6px 10px 6px 6px;background:var(--white);box-shadow:3px 3px 0 var(--ink);font:700 10px Jet,monospace;white-space:nowrap;transition:background .15s,opacity .2s}.hotspot .hotspot-index{background:var(--yellow);width:21px;height:21px;border:1px solid var(--ink);display:grid;place-items:center;font-size:9px}.hotspot[data-zone=ai] .hotspot-index,.hotspot[data-zone=automation] .hotspot-index{background:#97d9db}.hotspot:hover,.hotspot:focus-visible{background:var(--yellow);z-index:3}.hotspot:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:18px;background:var(--ink)}.studio-caption{position:absolute;bottom:14px;left:36px;display:flex;align-items:center;gap:10px;pointer-events:none}.caption-number{font:800 28px Bricolage,sans-serif;border-right:1px solid #17161450;padding-right:10px}.studio-caption strong{display:block;font:700 9px Jet,monospace;letter-spacing:.08em}.studio-caption div>span{font-size:10px;color:var(--muted);display:block;margin-top:4px}.room-actions{position:absolute;bottom:15px;right:36px;display:flex;gap:9px}.paper-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--white);border:2px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 var(--ink);padding:10px 15px;text-decoration:none;font-weight:700;font-size:12px;min-height:40px}.paper-button.primary{background:var(--coral);color:var(--white)}.room-actions .paper-button{font-size:10px;padding:8px 11px;min-height:34px}.explore-tip{position:absolute;right:36px;top:24px;display:flex;gap:10px;align-items:center;transform:rotate(4deg);pointer-events:none}.explore-tip p{font:700 14px/1.3 Bricolage,sans-serif}.tip-line{width:30px;height:30px;border-left:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(-15deg);border-radius:0 0 0 24px}.dock-area{height:116px;position:relative;z-index:4;display:flex;align-items:center;flex-direction:column;padding:8px 20px 18px;gap:10px;background:linear-gradient(0deg,var(--paper) 60%,transparent)}.control-hint{font:700 8px Jet,monospace;letter-spacing:.08em;color:var(--muted);display:flex;gap:13px}.control-hint span{color:var(--coral)}#navigation{display:flex;gap:3px;padding:5px;background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:4px}#navigation button{padding:10px 17px;display:flex;gap:8px;align-items:center;background:transparent;border:1px solid transparent;border-radius:2px;font-size:12px;font-weight:700;min-height:42px}#navigation button:hover{background:#fff4d5}#navigation button.active{background:var(--yellow);border-color:var(--ink)}.nav-num{font:700 8px Jet,monospace;color:#686052}.edition-note{position:absolute;bottom:30px;right:34px;font:700 8px Jet,monospace;letter-spacing:.04em;writing-mode:vertical-rl}.edition-note span{color:var(--coral)}#loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--paper);font:700 12px Jet,monospace}#loading[hidden]{display:none}.loading-dot{width:12px;height:12px;background:var(--coral);border:2px solid var(--ink);animation:blink 1s infinite}.skip-link{position:fixed;left:20px;top:-80px;z-index:100;padding:12px;background:var(--yellow)}.skip-link:focus{top:10px}#tooltip{position:fixed;z-index:12;background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:9px 12px;font:700 11px Jet,monospace;pointer-events:none;max-width:250px}#toast{position:absolute;bottom:65px;left:50%;transform:translate(-50%,15px) rotate(-2deg);opacity:0;pointer-events:none;background:var(--yellow);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:800 15px Bricolage,sans-serif;padding:13px 20px;z-index:15;transition:opacity .2s,transform .2s;max-width:85vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0) rotate(-2deg)}#intro{position:fixed;inset:0;background:#171614;color:var(--paper);z-index:50;display:grid;place-items:center;text-align:center;transition:opacity .45s,visibility .45s}#intro.done{opacity:0;visibility:hidden;pointer-events:none}#intro p{font:700 clamp(30px,6vw,70px) Jet,monospace;letter-spacing:-.05em;margin:25px 0}.intro-caption{font-size:13px;color:#dfd2b7;display:block}.cursor{color:var(--yellow);animation:blink .7s steps(2) infinite}#skip-intro{display:flex;margin:30px auto 0;background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--coral)}@keyframes blink{50%{opacity:.25}}#panel{position:fixed;left:auto;right:24px;top:90px;bottom:105px;margin:0;width:480px;max-width:calc(100vw - 32px);height:auto;max-height:none;padding:0;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:4px;box-shadow:7px 7px 0 var(--ink);overflow:hidden}#panel[open]{display:flex;flex-direction:column;animation:panel-in .25s cubic-bezier(.2,.8,.2,1)}#panel::backdrop{background:#17161410;backdrop-filter:blur(1px)}@keyframes panel-in{from{opacity:0;transform:translateX(35px) rotate(1deg)}to{opacity:1;transform:none}}.panel-top{padding:17px 20px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);background:var(--yellow)}.panel-top .square-button{box-shadow:none;width:32px;height:32px;font-size:21px}.panel-scroll{padding:24px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}.panel-scroll h2{font:800 36px/1 Bricolage,sans-serif;letter-spacing:-.045em;margin:0 0 20px;overflow-wrap:anywhere}.panel-scroll h3{font:800 20px/1.2 Bricolage,sans-serif;margin:20px 0 10px}.panel-scroll p{font-size:14px;line-height:1.7;color:#514b40}.panel-scroll .intro-copy{font-size:16px;margin-top:0}.panel-bottom{border-top:2px solid var(--ink);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;background:var(--paper);gap:10px}.panel-bottom button{border:0;background:none;font-size:12px;font-weight:700;padding:5px 0}.panel-bottom>span{font:700 7px Jet,monospace}.project-list{display:grid;gap:13px}.project-card{width:100%;text-align:left;display:grid;grid-template-columns:80px 1fr;gap:14px;padding:12px;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink)}.project-card:hover{background:var(--yellow)}.project-card .project-thumb{width:80px;height:75px;object-fit:cover;object-position:center;border:1px solid var(--ink);background:var(--teal)}.project-number{width:80px;height:75px;display:grid;place-items:center;font:800 35px Bricolage,sans-serif;background:var(--teal);border:1px solid var(--ink)}.project-card strong{display:block;font:800 16px Bricolage,sans-serif;overflow-wrap:anywhere}.project-card small{display:block;font-size:11px;line-height:1.5;margin-top:5px;color:#514b40}.project-card .mini-tech{font:700 8px/1.5 Jet,monospace;margin-top:5px;display:block;color:#915247}.filter-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}.filter-row button,.chip-button{border:1.5px solid var(--ink);background:var(--white);padding:8px 10px;font-size:11px;min-height:35px}.filter-row button.active{background:var(--teal);box-shadow:2px 2px 0 var(--ink)}.chips{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.chip{border:1px solid var(--ink);padding:5px 8px;background:var(--yellow);font:700 9px Jet,monospace}.links{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.project-media{width:100%;max-height:250px;object-fit:contain;display:block;background:#171614;border:2px solid var(--ink);margin:16px 0 6px}.media-caption{font-size:11px!important}.project-features{padding-left:20px;font-size:13px;line-height:1.7}.project-features li{margin:7px 0}.text-button{border:0;padding:7px 0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:700}.timeline-list{border-left:3px solid var(--coral);padding-left:17px;display:grid;gap:13px}.milestone{border:2px solid var(--ink);background:var(--paper);padding:13px;box-shadow:3px 3px 0 var(--ink)}.milestone summary{cursor:pointer;font-weight:700;font-size:13px;line-height:1.4}.milestone summary span{display:block;font:700 9px/1.5 Jet,monospace;color:#a84236;margin-bottom:8px}.milestone p{font-size:13px;margin-bottom:0}.about-note{border:2px solid var(--ink);padding:17px;background:var(--paper);box-shadow:4px 4px 0 var(--ink);margin:0 0 20px;transform:rotate(-.5deg)}.about-note:nth-child(even){background:#d1ebdf;transform:rotate(.5deg)}.about-note .eyebrow{font-size:9px}.about-note p{font-size:14px;margin-bottom:0}.about-id{background:var(--coral);color:var(--white);padding:20px;border:2px solid var(--ink);margin-bottom:20px;box-shadow:4px 4px 0 var(--ink)}.about-id h3{font-size:28px;margin:5px 0}.about-id p{color:var(--white);font-size:12px;margin:0}.stack-list{display:grid;gap:10px}.stack-button{display:flex;justify-content:space-between;text-align:left;align-items:center;border:2px solid var(--ink);padding:14px;background:var(--paper);font-weight:700;box-shadow:3px 3px 0 var(--ink)}.stack-button span{font:700 10px Jet,monospace;color:#686052}.machine-step{border:2px solid var(--ink);padding:14px;background:var(--paper);margin:12px 0}.machine-step summary{font:800 18px Bricolage,sans-serif;cursor:pointer}.machine-step p{margin-bottom:0;font-size:13px}.machine-step summary span{color:#aa4337;font:700 11px Jet,monospace;margin-right:10px}label{display:block;font-weight:700;font-size:12px;margin:18px 0 8px}input,textarea{width:100%;border:2px solid var(--ink);border-radius:2px;padding:12px;background:var(--paper);color:var(--ink);font:400 14px/1.5 DM,Arial,sans-serif}textarea{min-height:125px;resize:vertical}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.form-note{font-size:11px!important;color:var(--muted)}.messages{display:grid;gap:12px;margin:15px 0;max-height:300px;overflow-y:auto;overscroll-behavior:contain}.message{padding:13px;border:2px solid var(--ink);background:var(--paper);font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin-right:20px;box-shadow:3px 3px 0 var(--ink)}.message.user{background:#d1ebdf;margin-right:0;margin-left:20px}.message.error,.error-message{background:#ffdbd2;color:#8b281e}.message small{display:block;font:700 8px Jet,monospace;margin-bottom:6px}.result-score{font:800 64px Bricolage,sans-serif;color:#137b82;letter-spacing:-.04em}.result-score small{font-size:18px;color:var(--muted)}.error-message{padding:12px;border:2px solid var(--ink);font-size:13px}.console{background:#171b1a;color:#a4eadb;padding:16px;font:700 12px/1.7 Jet,monospace;white-space:pre-wrap;max-height:230px;overflow-y:auto}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid #17161430;font-size:13px;gap:15px}.settings-row input{width:22px;height:22px}.controls-table{width:100%;border-collapse:collapse;font-size:12px}.controls-table td{padding:10px 0;border-bottom:1px solid #17161430}.controls-table td:first-child{font-weight:700;width:48%}.audio-track{border:2px solid var(--ink);background:var(--paper);padding:14px;margin:14px 0}.audio-track audio{width:100%;margin-top:10px}#fallback{position:absolute;top:42%;left:50%;transform:translate(-50%,-35%);width:min(520px,90vw);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:28px;background:var(--white);z-index:3}#fallback h2{font:800 30px Bricolage,sans-serif;margin:15px 0}#fallback p{font-size:14px;line-height:1.7;margin-bottom:20px}#fallback .paper-button{margin:4px}.no-script{position:fixed;inset:0;background:var(--paper);z-index:100;padding:25vh 10vw;font-size:24px}.no-webgl .explore-tip,.no-webgl .studio-caption{display:none}.hidden{display:none!important}
@media(min-width:1700px){.masthead{padding:26px 50px}.scene-heading{left:50px;top:25px}.scene-heading h1{font-size:60px}.scene-heading>p:last-child{font-size:14px;max-width:300px}#panel{width:530px}.hotspot{font-size:12px;padding:7px 11px}}
@media(max-width:1050px){.edition{display:none}.scene-heading h1{font-size:36px}.scene-heading>p:last-child{font-size:11px;max-width:220px}.explore-tip{display:none}.hotspot{font-size:9px;gap:5px;padding:4px 7px 4px 4px}#navigation button{padding:10px 12px}.edition-note{display:none}}
@media(max-width:650px){.masthead{height:76px;padding:14px 18px;gap:8px}.brand-mark{width:36px;height:38px;font-size:17px}.brand{gap:9px}.brand strong{font-size:15px}.brand small{font-size:6px;letter-spacing:.04em}.header-actions{gap:8px}.square-button{height:34px;width:34px}.original-link{display:none}#universe{height:calc(100dvh - 184px);min-height:230px}.scene-heading{left:20px;top:7px}.scene-heading .eyebrow{font-size:8px}.scene-heading h1{font-size:33px;margin:7px 0 8px}.scene-heading>p:last-child{max-width:220px;font-size:11px}.studio-caption{display:none}.room-actions{left:20px;right:20px;bottom:8px;justify-content:space-between}.room-actions .paper-button{font-size:9px;padding:7px 10px;min-height:34px}.dock-area{height:108px;padding:5px 12px max(15px,env(safe-area-inset-bottom));gap:11px}.control-hint{font-size:6px;gap:8px;letter-spacing:0}#navigation{width:100%;gap:0;justify-content:space-between;box-shadow:3px 3px 0 var(--ink);padding:4px}#navigation button{padding:6px 6px;flex-direction:column;gap:5px;font-size:10px;flex:1;min-width:0;min-height:46px}.nav-num{font-size:7px}.hotspot{padding:4px;font-size:8px;gap:4px;box-shadow:2px 2px 0 var(--ink)}.hotspot-index{width:17px!important;height:17px!important;font-size:8px!important}.hotspot:after{height:10px}.hotspot[data-zone=automation],.hotspot[data-zone=journey],.hotspot[data-zone=contact]{display:none}#panel{left:10px;right:10px;top:80px;bottom:20px;width:auto;max-width:none;box-shadow:4px 4px 0 var(--ink)}.panel-scroll{padding:20px}.panel-scroll h2{font-size:30px}.panel-top{padding:12px 16px}.panel-bottom{padding:12px 16px}.panel-scroll p{font-size:13px}.project-card{grid-template-columns:65px 1fr;gap:10px}.project-card .project-thumb,.project-number{width:65px;height:70px}.project-card strong{font-size:14px}.project-card small{font-size:10px}.project-card .mini-tech{font-size:7px}#toast{font-size:13px;bottom:60px}#fallback{padding:22px;top:51%}#fallback h2{font-size:26px}}
@media(max-height:600px) and (min-width:651px){.masthead{height:65px;padding:12px 25px}#universe{height:calc(100dvh - 149px)}.dock-area{height:84px;padding-bottom:8px}.scene-heading{top:0}.scene-heading h1{font-size:30px}.scene-heading>p:last-child{display:none}.explore-tip{display:none}.room-actions{bottom:6px}.studio-caption{bottom:6px}#navigation button{padding:6px 12px}#panel{top:70px;bottom:20px}.control-hint{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.hotspot[hidden]{display:none!important}
@media(max-width:650px){.hotspot[data-zone=stack]{display:none}}

.no-webgl #stage{display:none}@media(max-width:650px){.hotspot{min-height:36px}.panel-top .square-button{width:40px;height:40px}}
/* The same taped notebook, ink borders and coloured offsets as the 2D portfolio. */
@font-face{font-family:Kalam;src:url('./fonts/hand.woff2');font-weight:700;font-display:swap}
body{background:#eadebf url('./paper.webp') center/768px;overscroll-behavior:none}body:before{opacity:.12;background-size:22px 22px}
.masthead{height:70px;margin:16px 28px 0;padding:12px 18px;border:2px solid var(--ink);border-radius:13px 9px 14px 8px;background:var(--white);box-shadow:6px 7px 0 var(--ink),-3px -3px 0 var(--teal)}
.brand-mark{border-radius:7px 4px 9px 5px}.square-button{border-radius:7px 5px 8px 5px;min-width:40px;min-height:40px;background:var(--paper)}.original-link{font-size:12px}.brand small{letter-spacing:.13em}.edition{font-size:9px}
#universe{height:calc(100dvh - 196px);min-height:0;isolation:isolate}#stage,.is-exploring #stage{inset:0}#stage canvas{touch-action:none;cursor:grab}
.scene-heading{left:40px;top:30px;z-index:2}.scene-heading h1{font:800 clamp(32px,3.3vw,52px)/1.05 Bricolage,sans-serif;letter-spacing:-.055em;color:var(--white);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--coral),5px 5px 0 var(--teal);max-width:340px;margin:9px 0 14px}.scene-heading h1 em{color:var(--white)}.scene-heading h1:after{content:'';display:block;width:85%;height:6px;margin-top:8px;background:var(--yellow);border:1px solid var(--ink);border-radius:50%;transform:rotate(-2deg)}.scene-heading>p:last-child{font-size:13px;max-width:280px;color:#514b40}.scene-heading .eyebrow{font-size:8px}
.explore-tip{right:45px;top:35px}.explore-tip p{font:700 21px/1.3 Kalam,cursive;color:#ad3e34}.studio-caption{bottom:18px}.studio-caption strong{font-size:10px}
.paper-button{border-radius:8px 5px 9px 5px;min-height:44px}.paper-button.primary{box-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--yellow)}.room-actions{bottom:18px}.room-actions .paper-button{min-height:42px;font-size:11px}#reset-view{background:var(--yellow)}
#hotspots{inset:0;overflow:hidden;pointer-events:none}.hotspot.room-target{display:flex;padding:8px 11px;min-height:48px;gap:8px;border:2px solid var(--ink);border-radius:8px 4px 9px 5px;box-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--teal);background:var(--white);transition:background .18s,box-shadow .18s}.hotspot:before{content:'';position:absolute;top:-6px;left:35%;width:33%;height:11px;background:repeating-linear-gradient(90deg,#efdb8bbf 0 3px,#e1c97fbc 3px 4px);transform:rotate(-3deg)}.room-target .hotspot-text{font:800 14px Bricolage,sans-serif;display:block}.room-target .enter-label{font:700 8px Jet,monospace;display:block;margin-top:4px;text-align:left}.room-target .room-arrow{font-size:18px;color:#a13d32}.room-target .hotspot-index{width:24px;height:24px}.hotspot.is-hovered,.hotspot:hover{background:var(--yellow);box-shadow:6px 6px 0 var(--ink)}.hotspot:after{height:20px}
#area-card{position:absolute;left:38px;top:28px;z-index:3;max-width:280px;padding:15px 18px;background:var(--white);border:2px solid var(--ink);border-radius:10px 6px 12px 7px;box-shadow:5px 5px 0 var(--ink),-3px -3px 0 var(--teal)}#area-card[hidden]{display:none}#area-card .eyebrow,#area-hint{display:none}#area-card h2{font:800 25px/1.1 Bricolage,sans-serif;margin:0 0 12px}#area-card .paper-button{font-size:11px}.is-exploring .scene-heading,.is-exploring .explore-tip,.is-exploring .studio-caption{display:none}
.dock-area{height:110px;padding-top:8px;gap:12px;background:linear-gradient(0deg,#f7eccf 65%,transparent)}.control-hint{font-size:9px;letter-spacing:.03em;color:#514b40}#navigation{padding:5px;border-radius:10px 7px 11px 6px;box-shadow:5px 5px 0 var(--ink),-2px -2px 0 var(--teal)}#navigation button{font-size:13px;padding:12px 26px;min-height:44px}.nav-num{display:none}#navigation button.active{background:var(--yellow);border-radius:6px 3px 7px 4px}
#panel{width:510px;top:105px;bottom:105px;border-radius:13px 8px 15px 9px;box-shadow:8px 8px 0 var(--ink),-4px -4px 0 var(--teal);background:var(--white)}#panel::backdrop{background:#17161412;backdrop-filter:none}.panel-scroll{padding:28px;background:repeating-linear-gradient(transparent 0 34px,#647c770b 34px 35px)}.panel-top{background:var(--paper)}.panel-top .square-button{width:42px;height:42px}.panel-scroll h2{margin-bottom:24px}.panel-bottom button{min-height:40px}.project-list{gap:18px}.project-card{padding:15px;border-radius:9px 5px 10px 6px;box-shadow:4px 4px 0 var(--ink)}.about-note,.milestone{border-radius:9px 5px 10px 6px}.about-note{position:relative;background:repeating-linear-gradient(var(--paper) 0 27px,#e8ddc2 27px 28px)}.about-note:before{content:'';position:absolute;top:-8px;left:40%;width:70px;height:18px;background:#edda93bf;transform:rotate(-3deg)}.timeline-list{margin:22px 0 28px}.music-player{display:grid;grid-template-columns:72px 1fr;gap:15px;padding:19px 15px;margin:22px 0;border:3px solid var(--ink);border-radius:11px 8px 12px 7px;background:repeating-linear-gradient(var(--white) 0 27px,#647c7710 27px 28px);box-shadow:5px 5px 0 var(--ink),-3px -3px 0 var(--teal)}.music-content{min-width:0}.music-content h3{margin:0 0 12px;font-size:26px}.vinyl-art,.mini-vinyl{display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:repeating-radial-gradient(circle,#171614 0 3px,#35322a 3px 5px);box-shadow:2px 2px 0 var(--coral);color:var(--ink);aspect-ratio:1}.vinyl-art{width:72px;height:72px}.vinyl-art span{display:grid;place-items:center;border:2px solid var(--ink);background:var(--yellow);border-radius:50%;width:28px;height:28px}.music-controls{display:flex;align-items:center;gap:10px}.music-play{flex-shrink:0;width:44px;height:44px;border:3px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink);background:var(--yellow);font-size:18px}.music-controls input{width:100%;min-width:35px;flex:1;padding:0;accent-color:var(--yellow)}.music-time{font:700 9px Jet,monospace;white-space:nowrap}.music-wave{display:flex;align-items:flex-end;gap:3px;height:36px;margin-bottom:14px;overflow:hidden}.music-wave i{flex:1;height:3px;background:linear-gradient(var(--coral) 50%,var(--teal) 50%);transition:height .4s}.is-playing .music-wave i{height:var(--height);animation:wave 1s ease-in-out infinite alternate;animation-delay:calc(var(--bar)*-.13s)}.is-playing .vinyl-art,.spinning{animation:vinyl 7s linear infinite}.music-volume{display:flex;align-items:center;gap:16px}.music-volume input{width:150px;padding:0;accent-color:var(--coral)}#music-error{color:#a13d32}select{font:inherit;background:var(--paper);border:2px solid var(--ink);padding:12px;min-height:44px;width:100%}
#music-dock{position:fixed;left:35px;bottom:120px;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--white);border:2px solid var(--ink);border-radius:10px 6px 11px 7px;box-shadow:4px 4px 0 var(--ink);max-width:330px}#music-dock[hidden]{display:none}.mini-vinyl{width:40px;height:40px;color:var(--yellow);font-size:20px;flex-shrink:0}.now-title{border:0;background:none;text-align:left;font:800 15px Bricolage,sans-serif;min-width:0}.now-title small{font:400 9px DM,sans-serif;display:block;margin-top:4px}.now-title:focus-visible{outline-offset:0}
#travel-caption{display:none!important}#welcome-guide{position:absolute;left:50%;top:18px;transform:translateX(-50%) rotate(-2deg);z-index:8;padding:14px 22px;border:2px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);pointer-events:none;text-align:center}#welcome-guide strong{font:800 17px Bricolage,sans-serif;display:block}#welcome-guide span{display:block;font-size:12px;margin-top:5px}#welcome-guide[hidden]{display:none}.no-webgl #area-card{display:none}
@keyframes vinyl{to{transform:rotate(360deg)}}@keyframes wave{to{height:calc(var(--height)*.35)}}
@media(max-width:1000px){.edition{display:none}.scene-heading h1{font-size:36px;max-width:260px}#navigation button{padding:11px 19px}.room-target .hotspot-text{font-size:12px}.room-target .hotspot-index{display:none}.explore-tip{display:none}}
@media(max-width:650px){
 .masthead{height:62px;margin:10px 12px 0;padding:8px 10px;gap:8px;box-shadow:4px 5px 0 var(--ink),-2px -2px 0 var(--teal)}.brand strong{font-size:14px}.brand small{font-size:5px}.brand-mark{width:32px;height:35px;font-size:16px}.brand{gap:8px}.header-actions{gap:7px}.square-button{min-width:40px;min-height:40px}.original-link{display:none}
 #universe{height:calc(100dvh - 166px);min-height:0}#stage,.is-exploring #stage{inset:0}#hotspots{display:none!important}.scene-heading{left:22px;top:23px}.scene-heading h1{font-size:34px;max-width:290px;margin:8px 0 12px}.scene-heading .eyebrow{font-size:7px}.scene-heading>p:last-child{font-size:11px;max-width:265px}.studio-caption,.room-actions,.edition-note,.explore-tip{display:none}#area-card{left:20px;top:20px;max-width:220px;padding:11px 13px;box-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--teal)}#area-card h2{font-size:21px;margin:0}#open-area{display:none}
 .dock-area{height:94px;padding:6px 12px max(12px,env(safe-area-inset-bottom));gap:9px}.control-hint{font-size:0;min-height:12px}.control-hint:after{content:'ONE FINGER: ROTATE · TWO FINGERS: PAN / PINCH';font:700 7px Jet,monospace;letter-spacing:0}html[lang=de] .control-hint:after{content:'1 FINGER: DREHEN · 2 FINGER: VERSCHIEBEN / ZOOM'}#navigation{width:100%;gap:0;padding:4px;box-shadow:3px 3px 0 var(--ink)}#navigation button{padding:8px 4px;font-size:11px;min-height:44px;flex:1;white-space:nowrap}#navigation button[data-go=room]{display:none}
 #panel{top:84px;bottom:18px;left:12px;right:14px;width:auto;max-width:none;box-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--teal)}.panel-scroll{padding:20px}.panel-scroll h2{font-size:30px}.panel-bottom{padding:8px 14px}.panel-top{padding:10px 14px}.panel-top .eyebrow{font-size:8px;max-width:210px}.music-player{grid-template-columns:52px 1fr;gap:10px;padding:15px 11px}.vinyl-art{width:52px;height:52px}.music-content h3{font-size:23px}.music-time{font-size:8px}.music-controls{flex-wrap:wrap;gap:8px}.music-controls .music-time{flex-basis:100%;text-align:right}.music-play{width:44px;height:44px}#music-dock{left:18px;right:18px;bottom:107px;max-width:none;padding:8px 11px}.now-title{flex:1}.now-title small{font-size:10px}#welcome-guide{top:auto;bottom:20px;width:85%;padding:12px 15px}#welcome-guide strong{font-size:14px}#welcome-guide span{font-size:11px}#fallback{top:45%;padding:20px}
}
@media(max-height:600px) and (min-width:651px){.masthead{height:54px;margin:8px 16px 0;padding:5px 12px}.brand-mark{height:32px;width:32px}.brand small{display:none}#universe{height:calc(100dvh - 140px)}#stage,.is-exploring #stage{inset:0}.dock-area{height:78px;padding:3px 12px 7px;gap:7px}.scene-heading{top:16px;left:25px}.scene-heading h1{font-size:28px;max-width:210px}.scene-heading>p:last-child{display:none}#hotspots{display:none}.studio-caption,.room-actions{display:none}#navigation button{padding:8px 20px;min-height:40px}#panel{top:70px;bottom:14px}.control-hint{font-size:7px}#area-card{top:16px;left:24px;padding:10px 13px}#area-card h2{font-size:22px}#area-card .paper-button{display:none}#music-dock{bottom:90px}.edition-note{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.motion-paused .vinyl-art,body.motion-paused .mini-vinyl,body.motion-paused .music-wave i{animation:none!important}
/* Keep the original paper texture soft enough to read the ink and scene. */
body{background:#eee3c7}body:before{inset:-25px;background:url('./paper.webp') center/cover no-repeat;opacity:.3;filter:blur(5px);z-index:-1}.scene-heading{padding:0}.no-webgl #universe{isolation:auto}

.workflow-json{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.6 Jet,monospace;background:var(--paper);border:2px solid var(--ink);padding:14px;max-height:400px;overflow:auto}
#workflow-dock{position:fixed;right:30px;bottom:115px;z-index:8;width:min(420px,calc(100vw - 36px));padding:16px 19px;border:2px solid var(--ink);border-radius:11px 6px 12px 7px;background:var(--white);box-shadow:5px 5px 0 var(--ink),-3px -3px 0 var(--teal)}#workflow-dock[hidden]{display:none}.demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.demo-head .eyebrow{font-size:8px}.demo-head .square-button{min-width:34px;min-height:34px;width:34px;height:34px}#demo-title{font:800 21px Bricolage,sans-serif}#demo-copy{font:13px/1.6 DM,sans-serif;margin:10px 0 14px}.demo-actions{display:flex;gap:10px;align-items:center}.demo-actions .paper-button{font-size:11px;padding:9px 12px}@media(max-width:650px){#workflow-dock{left:18px;right:18px;bottom:103px;width:auto;padding:12px 15px}#demo-title{font-size:17px}#demo-copy{font-size:11px;line-height:1.5;max-height:100px;overflow:auto;margin:8px 0}.demo-head{margin-bottom:5px}.demo-actions .paper-button{min-height:42px}}

/* Keyboard equivalents of the physical floor buttons; no fixed cube HUD. */
#cube-accessible-controls{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cube-accessible-controls:focus-within{clip-path:none;width:auto;height:auto;left:20px;top:20px;z-index:12;padding:12px;background:var(--paper);border:2px solid var(--ink)}
#cube-accessible-controls button{min-height:44px;padding:10px;border:2px solid var(--ink);background:var(--yellow);font:700 13px Bricolage,sans-serif}
#cube-accessible-controls span{display:block;font-size:12px;margin-top:8px}
.cube-focused .scene-heading,.cube-focused .studio-caption,.cube-focused #area-card{display:none}
/* The demo reads like a small production desk, with direct access to each machine. */
#workflow-dock{max-height:calc(100dvh - 230px);overflow:auto}.demo-stages{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:4px 0 13px}.demo-stage{min-width:0;height:32px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);font:700 10px DM,sans-serif;cursor:pointer;transition:transform .18s,background .18s}.demo-stage:hover:not(:disabled){transform:translateY(-3px);background:var(--yellow)}.demo-stage.done{background:#bce1ce}.demo-stage[aria-current=step]{background:var(--yellow);box-shadow:0 3px 0 var(--ink);transform:translateY(-3px)}.demo-stage.blocked{background:var(--coral)}.demo-stage:disabled{opacity:.35;cursor:default}#demo-packet{border-top:1px dashed var(--ink);padding:8px 0;margin-bottom:9px}#demo-packet summary{cursor:pointer;font:700 12px DM,sans-serif;min-height:25px}#demo-artifact{white-space:pre-wrap;overflow-wrap:anywhere;background:#edf0e8;border-left:3px solid var(--teal);padding:10px;font:11px/1.6 monospace;margin:7px 0 0}#demo-speed{border:1.5px solid var(--ink);background:var(--paper);border-radius:4px;height:36px;font:700 11px DM,sans-serif;max-width:62px}#demo-local{display:block;font:8px/1.5 DM,sans-serif;letter-spacing:.06em;margin-top:12px;opacity:.7}.demo-actions{gap:7px}.demo-actions .text-button{font-size:23px;min-width:32px}.demo-stage:focus-visible,#demo-speed:focus-visible{outline:3px solid var(--teal);outline-offset:3px}@media(max-width:650px){#workflow-dock{max-height:48dvh;bottom:101px}.demo-stages{gap:3px;margin-bottom:9px}.demo-stage{height:38px}#demo-speed{height:42px}.demo-actions .paper-button{padding:8px 9px}#demo-local{margin-top:8px}#demo-artifact{font-size:10px}.demo-head .eyebrow{font-size:7px}}@media(prefers-reduced-motion:reduce){.demo-stage{transition:none}}
@media(min-width:651px){#workflow-dock{left:30px;right:auto;width:min(390px,calc(100vw - 36px))}}

/* Composition machine — generator, engraved score and downloads inside the music panel. */
.composer{border:2px solid var(--ink);border-radius:10px 6px 10px 6px;box-shadow:5px 5px 0 var(--ink);background:var(--white);padding:20px;margin:0 0 26px}
.composer-head{margin-bottom:14px}
.composer-head h3{font:800 24px/1.15 Bricolage,sans-serif;margin:6px 0 8px}
.composer-head p{margin:0;font-size:14px;max-width:62ch;color:#3a352c}
.composer-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 0 4px;border-top:1.5px dashed #17161436}
.composer-cta{background:var(--coral);color:var(--white);font-size:14px;min-height:48px;padding:12px 20px;box-shadow:4px 4px 0 var(--ink)}
.composer-cta:disabled{opacity:.6}
.composer-style{display:inline-flex;align-items:center;gap:8px;font:700 10px/1.5 Jet,monospace;letter-spacing:.11em;text-transform:uppercase;margin-left:auto}
.composer-style select{font:inherit;font-size:11px;letter-spacing:0;text-transform:none;padding:9px 10px;border:2px solid var(--ink);border-radius:2px;background:var(--white);box-shadow:2px 2px 0 var(--ink)}
.composer-status{min-height:20px;margin:12px 0 0;font-size:13px;font-weight:600}
.composer-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;padding:12px 0 0;border-top:1.5px dashed #17161436}
.composer-meta div{min-width:88px}
.composer-meta dt{font:700 9px/1.6 Jet,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.composer-meta dd{margin:2px 0 0;font:800 14px Bricolage,sans-serif}
.composer-sheet{margin-top:16px;border:1.5px solid #17161430;border-radius:4px;background:var(--white);padding:8px;overflow-x:auto}
.composer-sheet svg{display:block;max-width:100%;height:auto}
.composer-downloads{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.composer-divider{font:700 10px/1.5 Jet,monospace;letter-spacing:.13em;text-transform:uppercase;margin:26px 0 10px;color:var(--muted)}
@media (max-width:650px){.composer{padding:15px;border-radius:8px 5px 8px 5px}.composer-head h3{font-size:19px}.composer-style{margin-left:0;width:100%}.composer-cta{width:100%}.composer-sheet{padding:4px}}
/* A generated piece can run to forty bars: keep the score in its own scroll pane. */
.composer-sheet{max-height:min(64vh,620px);overflow:auto;overscroll-behavior:contain}
/* Two kinds of music, kept clearly apart: Abbas's own recordings and the generator. */
.music-tabs{display:flex;gap:10px;margin:22px 0 16px;flex-wrap:wrap}
.music-tab{flex:1 1 220px;text-align:left;background:var(--white);border:2px solid var(--ink);border-radius:8px 5px 8px 5px;box-shadow:3px 3px 0 var(--ink);padding:11px 14px;opacity:.62}
.music-tab strong{display:block;font:800 15px Bricolage,sans-serif}
.music-tab small{display:block;margin-top:3px;font:700 9px/1.5 Jet,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.music-tab.active{opacity:1;background:var(--yellow);box-shadow:5px 5px 0 var(--ink)}
.music-tab.active small{color:var(--ink)}
.tab-note{margin:0 0 14px;font-size:13px;color:#3a352c}
#pane-machine .composer{margin-top:0}
@media (max-width:650px){.music-tab{flex:1 1 100%}}
/* Complexity dial: how many notes and chords the generator writes. */
.composer-density{display:block;margin:14px 0 2px}
.composer-density>span{display:flex;justify-content:space-between;align-items:baseline;font:700 10px/1.5 Jet,monospace;letter-spacing:.12em;text-transform:uppercase}
.composer-density b{font:800 13px Bricolage,sans-serif;letter-spacing:0;text-transform:none}
.composer-density input{width:100%;margin:8px 0 4px;accent-color:var(--coral)}
.composer-density small{display:block;font-size:12px;color:var(--muted)}
.ensemble-controls{border:2px solid var(--ink);border-radius:7px;padding:12px;display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}.ensemble-controls legend{font-weight:800;padding:0 7px}.ensemble-controls label{display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:12px}.ensemble-controls input{accent-color:var(--teal)}.ensemble-controls .ensemble-parts{display:flex;flex-wrap:wrap;gap:10px;width:100%}.ensemble-controls small{display:block;width:100%;font-size:11px}