:root{--ivory:#f1efe9;--blue:#154cb4;--teal:#008881;--line:#154cb426}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--blue);font-family:'Space Grotesk',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}a:hover,button:hover{color:var(--teal)}:focus-visible{outline:2px solid var(--teal);outline-offset:6px}header{display:flex;align-items:center;justify-content:space-between;margin:0 4%;padding:27px 0;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:24px;letter-spacing:-1px}.brand span{display:block;font:9px 'Space Mono',monospace;letter-spacing:1.5px;margin-top:7px}nav{display:flex;gap:25px;font-size:13px}.intro{padding:48px 6% 0;position:relative;z-index:1;pointer-events:none}.eyebrow,.number{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.2px}.eyebrow{margin:0 0 16px}h1{font-size:clamp(36px,4.8vw,68px);font-weight:400;letter-spacing:-3px;margin:0 0 12px}p{line-height:1.6}.intro>p:last-child{font-size:14px;margin:0}.workbench{position:relative;height:min(61vw,790px);min-height:400px;margin-top:-35px;overflow:hidden}.fallback{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.ready .fallback{opacity:0}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}.load-state{position:absolute;left:6%;bottom:72px;font-size:12px}.ready .load-state{display:none}.scene-controls{position:absolute;bottom:20px;left:6%;right:6%;display:flex;justify-content:space-between;font:10px 'Space Mono',monospace;letter-spacing:1px}.scene-controls button{padding:8px 12px;border:1px solid var(--line);border-radius:30px;font-size:10px}.scene-controls span{padding:9px 0}#hint{position:absolute;pointer-events:none;background:var(--blue);color:var(--ivory);padding:9px 13px;border-radius:4px;font-size:12px;opacity:0;transition:opacity .15s;z-index:2}#hint.visible{opacity:1}.index{display:grid;grid-template-columns:repeat(4,1fr);margin:0 6%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.index button{text-align:left;padding:25px 20px 25px 0;display:flex;flex-direction:column;gap:12px}.index button+button{padding-left:22px;border-left:1px solid var(--line)}strong{font-size:19px;font-weight:500;display:flex;justify-content:space-between;gap:10px}small{font-size:12px;opacity:.8}.number{font-size:9px}h2{font-weight:400;font-size:31px;letter-spacing:-1px;margin:0}h3{font-size:26px;font-weight:400;letter-spacing:-.8px;margin:18px 0 28px}.selected{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:35px;padding:85px 6%}.selected a{padding:22px 0;border-top:1px solid var(--blue)}.selected a>span:last-child{font-size:12px}footer{margin:0 6%;padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px}dialog{color:var(--blue);background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:50px;width:min(780px,92vw);max-height:90vh}dialog::backdrop{background:#15294766;backdrop-filter:blur(8px)}dialog h2{margin-bottom:22px}dialog p{font-size:16px}.close{position:absolute;right:16px;top:10px;font-size:30px}.project-link{display:block;border-top:1px solid var(--line);padding:20px 0;font-size:23px}.project-link span{display:block;font-size:12px;margin-top:6px}.video{width:100%;aspect-ratio:16/9;border:0;margin-top:10px}.skip{position:absolute;left:20px;top:-80px;background:var(--ivory);padding:10px;z-index:5}.skip:focus{top:10px}@media(max-width:700px){header{align-items:flex-start;flex-direction:column;gap:22px}nav{gap:17px;flex-wrap:wrap;font-size:12px}.intro{padding-top:34px}h1{letter-spacing:-1.5px}.workbench{height:330px;min-height:0;margin-top:0}.index{grid-template-columns:1fr 1fr}.index button{padding:20px 12px!important}.index button:nth-child(3){border-left:0;border-top:1px solid var(--line)}.index button:nth-child(4){border-top:1px solid var(--line)}strong{font-size:16px}.number{font-size:8px}.selected{grid-template-columns:1fr;padding-top:55px;gap:25px}footer{flex-wrap:wrap;gap:15px}dialog{padding:40px 24px}.scene-controls{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media(max-width:700px){.scene-controls{gap:8px;flex-wrap:wrap;bottom:10px}.scene-controls span{width:100%;text-align:center;font-size:8px}.workbench{height:370px}.scene-controls button{min-height:40px}.index button{min-height:126px}nav button{min-height:36px}}

@media(pointer:coarse){#motion{display:none}}

/* Immersive workbench: one opening, no repeated top navigation. */
.intro{padding:30px 6% 0}.intro h1{font-size:32px;letter-spacing:-1px}.intro .eyebrow{font-size:9px;margin-bottom:10px}.intro>p:last-child{font-size:12px}.workbench{height:min(74vw,840px);margin-top:-20px}.scene-controls{justify-content:center;bottom:12px}.scene-controls span{opacity:.65}.index{margin-top:0}@media(max-width:700px){.intro{padding-top:25px}.intro h1{font-size:28px}.workbench{height:440px;margin-top:0}.scene-controls span{font-size:8px}.index button{min-height:120px}}

@media(max-width:700px){.workbench{height:350px}}

.playground-feature{display:grid;grid-template-columns:1fr 1.4fr;gap:7%;align-items:center;padding:70px 6% 100px;border-top:1px solid #174aaf30}.playground-feature h2{font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-1px}.playground-feature p{line-height:1.8}.playground-feature>div>a{display:inline-block;border-bottom:1px solid;margin-top:20px;padding-bottom:7px}.mirror-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;border:12px solid #d4dade;outline:1px solid #b3c0d0;box-shadow:0 20px 55px #203f5f15;background:linear-gradient(120deg,#b7c9d6,#f3f4ed 35%,#bfcbd9 65%,#e6ece9);text-align:center}.mirror-preview>span{font:italic 42px/1.2 Georgia;color:#174aafaa}.mirror-preview small{font:8px 'Space Mono',monospace;letter-spacing:2px;margin-top:30px}@media(max-width:700px){.playground-feature{grid-template-columns:1fr;padding:40px 6% 70px;gap:30px}.mirror-preview{min-height:280px}.mirror-preview>span{font-size:35px}.playground-feature h2{font-size:34px}}
@media(min-width:901px){.index{grid-template-columns:repeat(5,minmax(0,1fr))}.index strong{font-size:17px}.index small{font-size:11px}}
@media(max-width:700px){.index button:nth-child(5){grid-column:1/-1;border-top:1px solid var(--line);border-left:0}#camera-sound{bottom:35px!important;font-size:9px!important;padding:7px 10px!important}}

/* Keep the longer introduction outside the 3D canvas. */
.workbench{margin-top:12px}.fallback{display:block;mix-blend-mode:normal;transition:opacity .25s}.intro>p:last-child{max-width:640px}@media(max-width:700px){.workbench{margin-top:16px}}