.introduction{padding-bottom:40px}
.project{padding:64px 0;scroll-margin-top:80px}
.media-panel{--control-ink:#be968d;position:relative;width:100%;padding:32px;border-radius:16px;isolation:isolate}
.peach-panel{background:linear-gradient(#ffeee9,#ffe6e0)}
.screen-showcase{margin-top:40px}
.screen-artwork{display:block;width:100%;height:auto}
.screens-dialog{width:min(1400px,calc(100vw - 48px),155vh)}
.screens-dialog .dialog-media{aspect-ratio:auto}
.screens-dialog .screen-artwork{max-height:calc(90vh - 96px);object-fit:contain}
.image-expand{cursor:zoom-in}
.blue-panel{background:linear-gradient(#e2f2ff,#d6ebff);--control-ink:#7fa2c3}
.media-expand{display:block;width:100%;border:0;background:none;padding:0;cursor:zoom-in;border-radius:8px}
.video-window{display:block;aspect-ratio:1280/926;width:100%;overflow:hidden;border-radius:8px;box-shadow:0 1px 1px #00000014,0 2px 2px #0000000d,0 3px 4px #00000009,0 5px 8px #00000005}
.video-window video{display:block;width:100%;height:100%;object-fit:contain}
.playback-control{position:absolute;right:4px;bottom:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:50%;color:var(--control-ink,#be968d);z-index:3}
.playback-control svg{width:20px;height:20px;fill:currentColor}
.playback-control .pause-symbol{display:none}
.playback-control[data-playing=true] .pause-symbol{display:block}
.playback-control[data-playing=true] .play-symbol{display:none}
.project-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;margin-top:24px}
.project h2{font:420 var(--heading-size)/var(--heading-line) var(--heading-font);letter-spacing:var(--heading-tracking);color:var(--ink);margin:0;text-wrap:balance}
.project-heading .glossy-button{margin-top:1px}
.glossy-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff;background:linear-gradient(#4b4b4b,#202020 55%,#151515);font:500 1rem/1 Geist,Arial,sans-serif;text-shadow:0 -1px #00000080;text-decoration:none;padding:12px 16px;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #000000eb,inset 0 0 6px #ffffff4d,0 1px 1px -1px #00000014,0 2px 4px -1px #00000014,0 4px 8px -2px #0000000f;transition:box-shadow 220ms,transform 90ms;white-space:nowrap}
.glossy-button:hover{box-shadow:inset 0 0 0 1px #000000c7,inset 0 0 0 200px #ffffff14,inset 0 0 8px #ffffff6b,0 2px 4px -1px #00000014,0 4px 8px -2px #0000000f}
.glossy-button:active{transform:scale(.97)}
.glossy-button:disabled{opacity:.6;cursor:wait;transform:none}
.project-summary{font-size:1rem;line-height:1.5;margin:16px 0 0;max-width:648px;text-wrap:pretty}
.project-afterword{margin-top:24px}
.project-divider{height:4px;background:radial-gradient(circle at center,#d4d4d4 1.8px,transparent 2px) left center/10px 4px repeat-x}
.gate-note a{color:inherit;text-decoration-color:#b6b6b6;text-underline-offset:3px}
.gate-note a:hover{text-decoration-color:currentColor}
.project-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:648px;margin:36px 0 0;font-size:1rem;line-height:1.5}
.project-facts dt,.project-story h3{font-weight:500;color:#171717}
.project-facts dd{margin:4px 0 0}
.project-story{max-width:648px;font-size:1rem;line-height:1.5}
.project-story h3{font-size:1rem;line-height:1.5;margin:36px 0 8px}
.project-story p{text-wrap:pretty}
.locked-panel{overflow:hidden}
.locked-window{width:100%;aspect-ratio:1440/960;position:relative;overflow:hidden;border-radius:8px;background:#f8f8f8;box-shadow:0 1px 2px #0000001f,0 4px 8px #0000000d}
.locked-window iframe{width:1440px;height:960px;border:0;transform-origin:top left;pointer-events:none;filter:blur(9px);opacity:.85;user-select:none}
.locked-window::after{content:'';position:absolute;inset:0;background:#ffffff18;pointer-events:none}
.stealth-project>h2{margin-top:24px}
.password-form{margin-top:32px}
.password-form label{display:block;margin-bottom:8px;font-size:1rem;line-height:1.5}
.password-row{display:flex;gap:8px;align-items:center}
.password-field{position:relative;width:280px;max-width:100%}
.password-field input{width:100%;height:44px;font:400 1rem/1.5 Geist,Arial,sans-serif;color:#404040;padding:9px 44px 9px 16px;border:1px solid #d4d4d4;box-shadow:inset 0 1px 3px #0000000f;border-radius:8px;background:#fff}
.password-field input:focus{outline:2px solid #6b879d;outline-offset:2px}
.password-field input[aria-invalid=true]{border-color:#b74141;box-shadow:inset 0 0 0 1px #b74141}
.password-visibility{position:absolute;right:2px;top:2px;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:#a3a3a3;border-radius:6px;padding:0}
.eye-slash{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset 200ms}
.password-visibility[aria-pressed=true] .eye-slash{stroke-dashoffset:0}
.form-error{font-size:.875rem;color:#b74141;margin-top:8px;line-height:1.5}
.unlocked-link{margin-top:32px}
.site-footer{padding:56px 0 64px;font-size:1rem;line-height:1.5}
.site-footer>p{max-width:648px;text-wrap:pretty}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:24px}
.footer-links a{color:#525252;text-decoration:none;position:relative;transition:transform 220ms,opacity 220ms}
.footer-links a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:4px;background:radial-gradient(circle,#829c88 1.7px,transparent 2px) 0 0/8px 4px;opacity:0;transition:opacity 220ms}
.footer-links a:hover{transform:translateY(-1px)}
.footer-links a:hover::after{opacity:1}
.back-to-top{margin-left:auto;border:0;border-radius:4px;background:none;padding:6px 0;font-size:1rem}
.media-dialog{padding:0;border:0;background:none;color:#fff;width:min(100%,1318px,135vh);max-width:calc(100vw - 48px);max-height:90vh;overflow:visible}
.media-dialog::backdrop{background:#000000e6}
.dialog-media{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:3/2;max-height:90vh;padding:48px;border-radius:16px}
.dialog-media video{display:block;width:100%;height:100%;max-width:100%;max-height:calc(90vh - 96px);object-fit:contain;border-radius:8px}
.dialog-close{position:fixed;right:8px;top:8px;display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:#fff;font:300 2rem/1 Arial,sans-serif;border-radius:50%;z-index:5}
.dialog-media .playback-control{width:40px;height:40px}
body.dialog-open{overflow:hidden}
.private-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:32px;font-size:1rem}
.private-header a,.private-header button{color:#606060;text-decoration:none;background:none;border:0;padding:4px 0}
.private-project{padding-top:48px}
.private-project>h1{margin:0 0 12px}
.private-project>.project-summary{margin-bottom:32px}
.interface-viewport{position:relative;width:100%;aspect-ratio:1440/960;overflow:hidden;border-radius:8px;box-shadow:0 1px 2px #0000001f,0 4px 8px #0000000d}
.interface-viewport iframe{width:1440px;height:960px;border:0;transform-origin:top left;background:#f8f8f8}
.private-expand{position:absolute;inset:0;border:0;background:none;border-radius:8px;cursor:zoom-in}
.interface-dialog{width:min(1400px,calc(100vw - 48px));max-height:90vh}
.interface-dialog .dialog-media{aspect-ratio:auto;max-height:none;padding:24px}
.interface-dialog .interface-viewport{height:calc(90vh - 48px);aspect-ratio:auto;overflow:auto}
.interface-dialog iframe{width:1440px;height:1080px;transform:none}
@media(max-width:767px){.screens-dialog .dialog-media{padding:24px;max-height:80svh;overflow:auto;justify-content:flex-start}.screens-dialog .screen-artwork{width:960px;max-width:none;max-height:none;flex-shrink:0}.media-expand.image-expand{cursor:zoom-in}}
@media(max-width:767px){.media-expand{cursor:default}.media-dialog{max-width:calc(100vw - 24px)}.media-panel{padding-bottom:16px}.playback-control{position:relative;right:auto;bottom:auto;width:48px;height:48px;margin:4px auto -8px}.playback-control svg{width:24px;height:24px}.private-expand{display:none}.interface-viewport{overflow:auto}.interface-dialog{display:none}}
@media(max-width:639px){.introduction{padding-bottom:0}.project{padding:40px 0;scroll-margin-top:24px}.media-panel{padding:16px;border-radius:12px}.project-heading{grid-template-columns:1fr;gap:16px;margin-top:16px}.project h2{font-size:1.625rem;line-height:2rem}.project-heading .glossy-button{justify-self:start;margin-top:0}.project-summary{margin-top:12px}.project-facts{gap:12px;font-size:.875rem;margin-top:28px}.project-story h3{margin-top:28px}.stealth-project>h2{margin-top:16px}.password-row{display:flex;flex-direction:column;align-items:stretch;gap:12px}.password-field{width:100%}.password-row .glossy-button{width:100%;height:44px}.site-footer{padding:40px 0 48px}.back-to-top{margin-left:0;width:100%;text-align:left}.private-header{padding-top:20px}.private-project{padding-top:32px}.project-heading .glossy-button{white-space:normal}.locked-window{aspect-ratio:1440/1100}}
