/* Scoped studio module; inherits current site typography and palette. */
#about .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(45px,7vw,110px);align-items:start;margin:65px 0 70px}
#about .computer-column{width:100%;max-width:580px;justify-self:center;position:sticky;top:130px;padding-top:5px}
#about .photo-computer{position:relative;width:100%;isolation:isolate}
#about .computer-photo{display:block;width:100%;height:auto;filter:saturate(.6) brightness(.85);mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 88%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 88%,transparent)}
#about .crt-screen{position:absolute;left:26.3%;top:20.7%;width:35.8%;height:24.1%;overflow:hidden;border-radius:8% / 7%;background:#070808;box-shadow:0 0 2px 2px #080909}
#about .crt-screen video{display:block;width:100%;height:100%;object-fit:contain;background:#050505;cursor:pointer}
#about .screen-reflection{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#ffffff12,transparent 43%);box-shadow:inset 0 0 10px 2px #0008;pointer-events:none}
#about .screen-play{position:absolute;inset:0;width:100%;border:0;background:#0003;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--white);cursor:pointer}
#about .screen-play[hidden]{display:none}
#about .screen-play>span{display:grid;place-items:center;padding-left:2px;border:1px solid #f0ede570;width:32px;height:32px;font-size:9px;background:#09090955}
#about .screen-play small{font:7px var(--mono);letter-spacing:.13em}
#about .screen-play:hover>span{background:var(--red);border-color:var(--red)}
#about .reel-controls{display:flex;gap:18px;align-items:center;margin:16px 4% 8px;font:9px var(--mono);color:var(--dim)}
#about .reel-controls button{border:0;background:none;color:var(--white);padding:5px 0;font:10px var(--sans);cursor:pointer}
#about .reel-controls button:last-child{margin-left:auto;color:var(--dim)}
#about .reel-seek{display:block;appearance:none;width:92%;height:12px;margin:0 4%;background:transparent;cursor:pointer;accent-color:var(--red)}
#about .reel-seek::-webkit-slider-runnable-track{height:1px;background:#44443f}
#about .reel-seek::-webkit-slider-thumb{appearance:none;width:5px;height:9px;background:var(--red);margin-top:-4px}
#about .reel-seek::-moz-range-track{height:1px;background:#44443f}
#about .reel-seek::-moz-range-thumb{width:5px;height:9px;background:var(--red);border:0;border-radius:0}
#about .reel-caption{display:flex;justify-content:space-between;gap:10px;margin:14px 4% 0;color:#76766e;font:8px var(--mono)}
#about .reel-caption small{font:9px var(--sans)}
#about #studio-video-status{font-size:11px;color:var(--dim);margin:10px 4%}
#about .intro{min-width:0}
#about .studio-wordmark h3{font:700 clamp(48px,5.6vw,85px)/1 var(--display);letter-spacing:-.025em;text-transform:uppercase;margin:0}
#about .studio-wordmark h3 span{font:11px var(--sans);vertical-align:top;margin-left:8px}
#about .studio-wordmark{margin-bottom:32px}
#about .intro-copy h3{font:600 15px var(--sans);letter-spacing:.05em;margin:0 0 23px}
#about .intro-copy p{font:400 13px/2.05 var(--sans);letter-spacing:.025em;color:#aaa69f;margin:0 0 18px}
#about .intro-copy p:last-child{margin-bottom:0}
#about .people{border-top:1px solid var(--line);padding-top:22px}
#about .people-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:22px}
#about .people-heading i{font:9px var(--mono);color:var(--dim);font-style:normal;margin-left:12px}
#about .people-heading small{font-size:10px;color:var(--dim)}
#about .people-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#about details{border-bottom:1px solid var(--line);padding:0 0 16px}
#about summary{list-style:none;display:flex;align-items:center;gap:15px;font-size:12px;cursor:pointer}
#about summary::-webkit-details-marker{display:none}
#about summary .number{font:10px var(--mono);color:var(--red)}
#about summary small{display:block;font-size:10px;color:var(--dim);margin-top:7px}
#about .plus{margin-left:auto;color:var(--red);font-size:19px;font-weight:300}
#about details[open] .plus{transform:rotate(45deg)}
#about details>p{font-size:12px;line-height:1.9;color:var(--dim);margin:18px 0 0 28px}
#about summary:focus-visible,#about input:focus-visible{outline:2px solid var(--red);outline-offset:6px}
@media(max-width:800px){#about .story{grid-template-columns:1fr;gap:45px;margin:35px 0 45px}
#about .computer-column{position:relative;top:auto;max-width:400px}
#about .intro-copy p{font-size:13px}
#about .studio-wordmark h3{font-size:70px}
#about .people-list{gap:18px}
#about .people-heading small{font-size:9px}
}
@media(max-width:520px){#about .people-list{grid-template-columns:1fr}
#about summary small{display:inline;margin-left:15px}
#about .people-heading{gap:10px}
#about .reel-caption{flex-direction:column;gap:7px}
#about .studio-wordmark h3{font-size:60px}
}
@media(prefers-reduced-motion:reduce){#about *{transition:none!important}
}
#about .computer-column{max-width:560px}
#about .reel-controls{margin-top:0}
#about .computer-photo{mask-image:none;-webkit-mask-image:none;filter:saturate(.6) brightness(.85)}
#about .photo-computer{background:var(--black)}
#about .computer-photo{mask-image:none;-webkit-mask-image:none;filter:saturate(.6) brightness(.85);mix-blend-mode:lighten}

/* Give the computer more room while keeping the statement readable. */
#about .story{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,4vw,64px)}
#about .computer-column{max-width:720px}
#about .photo-computer{width:112%;margin-left:-6%}
#about .reel-caption>span{font-family:var(--sans);font-size:12px;letter-spacing:0;color:var(--white)}
@media(max-width:800px){#about .story{grid-template-columns:1fr}#about .computer-column{max-width:600px}#about .photo-computer{width:100%;margin-left:0}}

/* Align the visible hardware, rather than the empty top of its square image. */
#about .computer-column{position:relative;top:auto;padding-top:0}
#about .photo-computer{margin-top:-11.7%}
#about .mouse-fullscreen{position:absolute;left:84%;top:74.4%;width:14%;height:11.4%;padding:0;border:0;border-radius:12%;background:transparent;cursor:pointer;z-index:3}
#about .mouse-fullscreen span{display:grid;place-items:center;position:absolute;inset:0;color:#f0ede5;font:22px var(--sans);opacity:0;transition:opacity .18s;background:#06060644;border-radius:12%}
#about .mouse-fullscreen:hover span,#about .mouse-fullscreen:focus-visible span{opacity:1}
#about .crt-screen:fullscreen{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0;background:#000;box-shadow:none}
#about .crt-screen:fullscreen video{width:100%;height:100%;object-fit:contain}
#about .crt-screen:fullscreen .screen-reflection,#about .crt-screen:fullscreen .screen-play{display:none}
@media(max-width:800px){#about .photo-computer{margin-top:-10.45%}}

#about .fullscreen-exit,#about .fullscreen-toggle{display:none}
#about .crt-screen:fullscreen .fullscreen-exit,#about .crt-screen:fullscreen .fullscreen-toggle{display:block;position:absolute;z-index:6;border:1px solid #fff6;background:#0008;color:#fff;padding:10px 16px;cursor:pointer}
#about .crt-screen:fullscreen .fullscreen-exit{right:24px;top:24px;font-size:24px}
#about .crt-screen:fullscreen .fullscreen-toggle{left:24px;bottom:24px;font-size:16px}

/* Separate keycaps and fixed sockets; travel is clipped at the housing edge. */
#about .photo-computer{user-select:none;-webkit-user-select:none}
#about .computer-photo{pointer-events:none;user-select:none;-webkit-user-drag:none;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201254%201254%22%3E%3Crect%20width%3D%221254%22%20height%3D%221254%22%20fill%3D%22white%22/%3E%3Cpolygon%20points%3D%22337%2C935%20732%2C935%20744%2C974%20325%2C974%22%20fill%3D%22black%22/%3E%3Cpolygon%20points%3D%221095%2C937%201172%2C937%201176%2C950%201092%2C950%22%20fill%3D%22black%22/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201254%201254%22%3E%3Crect%20width%3D%221254%22%20height%3D%221254%22%20fill%3D%22white%22/%3E%3Cpolygon%20points%3D%22337%2C935%20732%2C935%20744%2C974%20325%2C974%22%20fill%3D%22black%22/%3E%3Cpolygon%20points%3D%221095%2C937%201172%2C937%201176%2C950%201092%2C950%22%20fill%3D%22black%22/%3E%3C/svg%3E");mask-mode:luminance;mask-size:100% 100%;-webkit-mask-size:100% 100%}
#about .key-wells{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201254%201254%22%3E%3Cpolygon%20points%3D%22337%2C935%20732%2C935%20744%2C974%20325%2C974%22%20fill%3D%22%2344423d%22/%3E%3Cpolygon%20points%3D%221095%2C937%201172%2C937%201176%2C950%201092%2C950%22%20fill%3D%22%2344423d%22/%3E%3C/svg%3E") center / 100% 100%;pointer-events:none}
#about .space-key-layer,#about .mouse-key-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
#about .space-key-layer{clip-path:polygon(26.874% 74.561%,58.373% 74.561%,59.33% 77.671%,25.917% 77.671%)}
#about .mouse-key-layer{clip-path:polygon(87.321% 74.721%,93.461% 74.721%,93.78% 75.758%,87.081% 75.758%)}
#about .space-key-layer::before,#about .mouse-key-layer::before{content:'';position:absolute;inset:0;background:url('computer-clean-plastic-v5.png') center / 100% 100%;filter:saturate(.6) brightness(.85);transition:transform 120ms cubic-bezier(.2,.7,.3,1)}
#about .space-key-layer::before{clip-path:polygon(26.874% 74.561%,58.373% 74.561%,59.33% 77.671%,25.917% 77.671%)}
#about .mouse-key-layer::before{clip-path:polygon(87.321% 74.721%,93.461% 74.721%,93.78% 75.758%,87.081% 75.758%)}
#about .keyboard-space{position:absolute;left:25.9%;top:74.5%;width:33.5%;height:3.2%;z-index:4;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
#about .mouse-fullscreen{touch-action:manipulation}
#about .mouse-fullscreen span{display:none}
#about .keyboard-space,#about .keyboard-space:hover,#about .keyboard-space:active,#about .mouse-fullscreen,#about .mouse-fullscreen:hover,#about .mouse-fullscreen:active{box-shadow:none;filter:none;transform:none;background:transparent;-webkit-tap-highlight-color:transparent}
#about .keyboard-space:focus-visible,#about .mouse-fullscreen:focus-visible{outline:1px solid var(--white);outline-offset:3px}
#about .photo-computer:has(.keyboard-space:active) .space-key-layer::before,#about .photo-computer:has(.keyboard-space.is-down) .space-key-layer::before{transform:translateY(.56%);transition-duration:55ms}
#about .photo-computer:has(.mouse-fullscreen:active) .mouse-key-layer::before,#about .photo-computer:has(.mouse-fullscreen.is-down) .mouse-key-layer::before{transform:translateY(.24%);transition-duration:55ms}
#about .crt-screen{z-index:2}
@media(prefers-reduced-motion:reduce){#about .space-key-layer::before,#about .mouse-key-layer::before{transition:none}}

/* Match the introduction to the visible hardware, from case top to mouse base. */
@media(min-width:1001px){
 #about .intro{height:var(--studio-intro-height,auto);display:flex;flex-direction:column}
 #about .studio-wordmark{margin-bottom:clamp(16px,1.8vw,26px)}
 #about .studio-wordmark h3{font-size:clamp(42px,4.5vw,65px)}
 #about .intro-copy{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
 #about .intro-copy h3{font-size:13px;margin:0 0 4px}
 #about .intro-copy p{font-size:var(--studio-copy-size,13px);line-height:1.75;letter-spacing:.02em;margin:0}
 html:lang(en) #about .intro-copy p{line-height:1.6;letter-spacing:0}
 html:lang(ja) #about .intro-copy p{line-height:1.7;letter-spacing:.01em}
}
@media(min-width:801px) and (max-width:1000px){
 #about .story{grid-template-columns:1fr;gap:45px}
 #about .computer-column{max-width:600px}
 #about .photo-computer{width:100%;margin-left:0;margin-top:-10.45%}
}

/* Circuit animation shares the page backdrop, including the photo's dark surround. */
#about{position:relative;isolation:isolate}
#about .studio-circuit-pulse{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#about .photo-computer{background:transparent;mix-blend-mode:lighten}
@media(prefers-reduced-motion:reduce){#about .studio-circuit-pulse{display:none}}
#about{background:#060606}

/* Compact, non-interactive member credits. */
#about .member{display:flex;align-items:center;gap:15px;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:16px}
#about .member .number{font:10px var(--mono);color:var(--red)}
#about .member small{display:block;font-size:10px;color:var(--dim);margin-top:7px}
@media(max-width:520px){#about .member small{display:inline;margin-left:15px}}

/* Compact volume controls alongside the playback controls. */
#about .reel-volume{display:flex;align-items:center;gap:9px;margin-left:auto}
#about .reel-volume button{white-space:nowrap;color:var(--dim)}
#about #studio-volume{appearance:none;-webkit-appearance:none;width:76px;height:20px;margin:0;background:transparent;cursor:pointer;accent-color:var(--red)}
#about #studio-volume::-webkit-slider-runnable-track{height:2px;background:#44443f}
#about #studio-volume::-webkit-slider-thumb{appearance:none;width:7px;height:10px;background:var(--red);margin-top:-4px;border:0;border-radius:0}
#about #studio-volume::-moz-range-track{height:2px;background:#44443f}
#about #studio-volume::-moz-range-thumb{width:7px;height:10px;background:var(--red);border:0;border-radius:0}
#about #studio-volume-value{font:9px var(--mono);color:var(--dim);width:30px;text-align:right}
@media(max-width:520px){#about .reel-controls{gap:10px;flex-wrap:wrap}#about .reel-volume{gap:7px}#about #studio-volume{width:60px}}