:root{--bg:#111414;--fg:#f1f0e9;--muted:#a6aaa5;--line:#343b38;--accent:#d8ec98;--panel:#171b1b;--serif:Fraunces,Georgia,serif;--sans:Manrope,Arial,sans-serif;scroll-behavior:smooth;scroll-padding-top:100px;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
button:hover,a:hover{color:var(--accent)}
img{display:block;max-width:100%}
button[disabled]{opacity:.4;cursor:default}
[hidden]{display:none!important}
.page-width{width:min(1440px,calc(100% - 112px));margin-inline:auto}
.skip{position:fixed;top:-100px;left:20px;background:var(--fg);color:var(--bg);padding:12px;z-index:100}
.skip:focus{top:55px}
.site-header{display:flex;align-items:center;justify-content:space-between;height:116px;border-bottom:1px solid var(--line)}
.wordmark{font-size:27px;line-height:1;letter-spacing:-1.4px;font-weight:800;display:inline-flex;align-items:center;gap:0}
.wordmark span{font-weight:400}
.wordmark b{font-size:38px;font-weight:400;margin-left:13px;color:var(--accent);line-height:.8}
.site-header nav{display:flex;gap:42px;font-size:12px;font-weight:600}
.site-header sup{font:9px Mono;vertical-align:super;margin-left:4px}
.site-header nav a:last-child span{padding-left:20px}
.eyebrow,.section-index{font:10px/1.8 Mono,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0}
.small-line{display:inline-block;width:26px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px}
.hero-dark{display:grid;grid-template-columns:42% 58%;align-items:center;padding-block:80px 64px;min-height:690px}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{font-size:clamp(72px,7.5vw,112px);font-weight:400;line-height:.99;letter-spacing:-.066em;margin:36px 0 28px}
.hero-copy h1 em{font-family:var(--serif);font-weight:300;letter-spacing:-.055em;color:var(--accent)}
.hero-deck{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 30px}
.primary-link{display:inline-flex;gap:36px;align-items:center;background:var(--accent);color:#222b1b;padding:16px 22px;font-size:12px;font-weight:600}
.primary-link:hover{background:#edffc2;color:#111}
.primary-link span{font-size:20px;line-height:1}
.hero-annotation{margin:49px 0 0;color:var(--muted);font:10px Mono}
.hero-annotation span{color:var(--accent);padding-right:14px}
.dark-exhibit{margin:0 -32px 0 -20px;align-self:center;min-width:0}
.render-stage{position:relative;width:100%;isolation:isolate}
.render-base{width:100%;height:auto}
.screen-film{position:absolute;left:20.1786190271%;top:12.5265359879%;width:71.3093787432%;height:60.798034072%;transform-origin:0 0;transform:matrix(1,.008387456,0,1,0,0);opacity:0;pointer-events:none;object-fit:fill}
.screen-film.ready{opacity:1}
.frame-mark{position:absolute;color:#8e9c8e;font:8px/1.6 Mono;letter-spacing:.13em}
.top-mark{top:0;left:20.2%;padding-top:4px}
.exhibit-caption{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:19px;margin:14px 8% 0 20%}
.exhibit-caption strong{display:block;font-size:14px;font-weight:600}
.exhibit-caption span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.exhibit-actions{display:flex;align-items:center;gap:16px}
.exhibit-actions button{padding:8px 0;font-size:11px;white-space:nowrap}
.exhibit-actions #motion-control span{display:inline;font-size:10px;padding-right:6px;color:var(--accent)}
.exhibit-actions .round-button{border:1px solid var(--line);border-radius:50%;font-size:20px;width:40px;height:40px;line-height:1}
.media-note{font:8px/1.7 Mono;color:var(--muted);margin:12px 8% 0 20%}
.text-link{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:26px;padding:9px 0;border-bottom:1px solid currentColor;line-height:1.5}
.text-link span{font-size:18px}
.feature-meta{display:block;font:8px/1.8 Mono;color:var(--muted);margin-top:44px;max-width:220px;letter-spacing:.03em}
.collection{padding-block:74px 95px;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.section-head h2{font:400 clamp(38px,4.3vw,65px)/1.08 var(--sans);letter-spacing:-.055em;margin:23px 0 0}
.section-head h2 em{font-family:var(--serif);font-weight:300;color:var(--accent)}
.section-head>p{margin:0 0 4px;font-size:12px;color:var(--muted);line-height:1.8}
.collection-toolbar{margin-top:42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}
.filters{display:flex;gap:27px}
.filters button{padding:15px 0;border-bottom:2px solid transparent;font-size:12px;color:var(--muted);white-space:nowrap}
.filters button[aria-pressed=true]{color:var(--fg);border-color:var(--accent)}
.filters sup{font:8px Mono;color:var(--muted);margin-left:5px}
.collection-toolbar>span{font:9px Mono;color:var(--muted)}
.featured-reminder{color:var(--muted);font-size:12px;padding:20px 0 0;margin:0}
.featured-reminder a{color:var(--accent);border-bottom:1px solid var(--line)}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 36px;padding-top:32px}
.project-card{min-width:0}
.project-media{display:block;width:100%;position:relative;background:#192323;aspect-ratio:1.49;padding:22px;overflow:hidden;text-align:left;border:1px solid var(--line)}
.project-media img{width:100%;height:100%;object-fit:contain;transition:transform .35s}
.project-media:hover img{transform:scale(1.025)}
.project-media .media-open{position:absolute;bottom:12px;right:12px;border:1px solid #7a837c70;background:#161e1be8;border-radius:50%;width:32px;height:32px;color:#f4f3eb;text-align:center;line-height:29px;font-size:18px}
.project-media .film-label{position:absolute;top:12px;left:12px;background:#111915e8;color:#e0ebd2;font:8px Mono;letter-spacing:.08em;padding:5px 8px;border:1px solid #7a837c50}
.project-card[data-category=tools] .project-media{background:#ddd9d0}
.project-card[data-category=android] .project-media{height:500px;aspect-ratio:auto;background:#d9dcd4;padding:28px}
.project-card[data-category=concept] .project-media{background:#e3dfd6}
.project-title-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:19px;gap:15px}
.project-title-row h3{margin:0;font-size:21px;font-weight:400;letter-spacing:-.04em}
.project-title-row h3 button{padding:0;text-align:left;font:inherit}
.project-title-row>span{font:9px Mono;color:var(--muted);white-space:nowrap}
.project-card>p{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.7}
.approach{border-top:1px solid var(--line);padding-block:78px 90px;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:50px}
.approach h2{font:400 clamp(36px,3.5vw,52px)/1.1 var(--serif);letter-spacing:-.035em;margin:0}
.approach h2 em{font-weight:300;color:var(--accent)}
.approach-body{color:var(--muted);font-size:12px}
.approach-body p:first-child{margin-top:0;color:var(--fg);font-size:15px}
.approach-body .text-link{color:var(--fg);margin-top:8px}
footer{border-top:1px solid var(--line);padding-block:38px 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
footer p{color:var(--muted);font-size:11px}
footer>a:last-child{font-size:11px}
dialog{width:min(1160px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);background:var(--bg);color:var(--fg);overscroll-behavior:contain}
dialog::backdrop{background:#020908d9;backdrop-filter:blur(10px)}
.dialog-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--bg);border-bottom:1px solid var(--line);font:11px Mono}
.dialog-bar>div{display:flex;gap:10px;align-items:center}
.dialog-bar button{padding:8px 12px;border:1px solid var(--line)}
.dialog-position{color:var(--muted)}
.dialog-content{padding:26px}
.dialog-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:20px}
.dialog-heading h2{font:400 36px/1.2 var(--serif);letter-spacing:-.035em;margin:0}
.dialog-heading p{font:10px Mono;color:var(--muted)}
.dialog-media{background:#070d0c;display:flex;justify-content:center}
.dialog-media img,.dialog-media video{display:block;max-width:100%;max-height:64vh;width:auto;height:auto;object-fit:contain}
.dialog-media img.icon{width:230px;padding:35px}
.dialog-footage{font:9px/1.7 Mono;color:var(--muted);margin:12px 0 28px}
.dialog-copy{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:start}
.dialog-copy p{font-size:13px;color:var(--muted);margin:0;line-height:1.85}
.dialog-copy h3{font-size:19px;font-weight:400;line-height:1.5;margin:0 0 14px}
.dialog-copy ul{margin:6px 0 18px;padding-left:18px;font-size:12px;line-height:2}
.dialog-copy .project-note{font-size:10px;line-height:1.7}
.body-locked{overflow:hidden}
@media(min-width:1700px){.hero-dark{padding-block:90px}
.hero-copy h1{font-size:118px}}
@media(max-width:1100px){.page-width{width:calc(100% - 72px)}
.site-header{height:100px}
.hero-dark{padding-block:60px;min-height:600px;grid-template-columns:43% 57%}
.hero-copy h1{font-size:83px}
.eyebrow{font-size:9px}
.hero-copy .eyebrow{max-width:220px}
.dark-exhibit{margin-left:-30px;margin-right:-25px}
.exhibit-caption{gap:16px;margin-left:12%;margin-right:4%}
.media-note{margin-left:12%;margin-right:4%;font-size:7px}
.filters{gap:20px}
.approach{gap:30px;grid-template-columns:.7fr 1.2fr 1fr}
.project-card[data-category=android] .project-media{height:430px}}
@media(max-width:800px){.page-width{width:calc(100% - 40px)}
.site-header{height:88px}
.site-header nav{gap:22px;font-size:10px}
.wordmark{font-size:24px}
.wordmark b{font-size:31px}
.hero-dark{padding-block:47px 45px;grid-template-columns:1fr;gap:30px}
.hero-copy h1{font-size:clamp(67px,12vw,96px);margin:25px 0 20px}
.hero-copy .eyebrow{max-width:none;font-size:8px}
.hero-copy h1 br:last-of-type{display:none}
.hero-copy h1 em:after{content:" "}
.hero-deck{font-size:13px}
.hero-annotation{display:none}
.dark-exhibit{margin:12px -8px 0 -35px}
.top-mark{font-size:7px}
.exhibit-caption{margin:8px 7% 0 20%}
.media-note{font-size:7px;margin-left:20%;margin-right:7%}
.feature-meta{grid-column:1;grid-row:4;margin:0;max-width:none;font-size:7px}
.collection{padding-block:45px 65px}
.section-head{display:block}
.section-head h2{font-size:44px;margin-top:18px}
.section-head>p{margin:22px 0 0;font-size:12px}
.collection-toolbar{margin-top:26px;display:block}
.filters{gap:23px;overflow-x:auto}
.filters button{font-size:11px}
.collection-toolbar>span{display:block;padding:10px 0}
.project-grid{gap:37px 24px;padding-top:24px}
.project-media{padding:12px}
.project-title-row{display:block;margin-top:14px}
.project-title-row h3{font-size:18px}
.project-title-row>span{font-size:8px;display:block;margin-top:5px}
.project-card>p{font-size:11px}
.project-card[data-category=android] .project-media{height:340px;padding:15px}
.approach{grid-template-columns:1fr 1fr;gap:28px;padding-block:45px 50px}
.approach>.eyebrow{grid-column:1/-1}
.approach h2{font-size:36px}
.approach-body p:first-child{font-size:13px}
.approach-body{font-size:11px}
footer{padding-block:28px;flex-wrap:wrap}
footer p{font-size:10px}
dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
.dialog-content{padding:18px}
.dialog-bar{padding:10px 14px}
.dialog-copy{gap:30px}
.dialog-heading h2{font-size:28px}}
@media(max-width:480px){.site-header nav a:last-child{display:none}
.site-header nav{font-size:10px}
.hero-copy h1{font-size:71px}
.primary-link{font-size:11px;padding:13px 18px}
.hero-deck{margin-bottom:23px}
.hero-dark{gap:23px}
.exhibit-caption strong{font-size:12px}
.exhibit-caption span{font-size:9px}
.exhibit-actions{gap:10px}
.exhibit-actions button{font-size:10px}
.exhibit-actions .round-button{width:32px;height:32px;font-size:18px}
.media-note{font-size:6.7px}
.project-grid{grid-template-columns:1fr}
.project-media{padding:16px}
.project-title-row{display:flex;gap:10px}
.project-title-row h3{font-size:21px}
.project-title-row>span{margin:0;font-size:8px}
.project-card[data-category=android] .project-media{height:460px;padding:26px}
.section-head h2{font-size:40px}
.approach{grid-template-columns:1fr;gap:22px}
.approach h2{font-size:43px}
.approach-body{max-width:330px}
.approach-body p:first-child{font-size:14px}
.approach-body p{font-size:12px}
footer .wordmark{font-size:22px}
footer p{display:none}
.dialog-copy{grid-template-columns:1fr;gap:20px}
.dialog-heading{display:block}
.dialog-heading p{margin:8px 0 0}
.dialog-bar{font-size:9px}
.dialog-bar button{padding:7px 9px}
.dialog-bar>div{gap:6px}
.dialog-copy h3{font-size:17px}
.dialog-copy p{font-size:12px}
.dialog-media img,.dialog-media video{max-height:62vh}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}}
.render-base{mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0%,#000 10%,#000 97%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0%,#000 10%,#000 97%,transparent 100%);-webkit-mask-composite:source-in}
@media(max-width:480px){.hero-copy h1{font-size:60px;line-height:1.02}
.hero-copy h1 br:last-of-type{display:none}}
@media(max-width:360px){.hero-copy h1{font-size:52px}
.exhibit-caption{margin-left:16%;margin-right:3%}
.exhibit-actions{gap:7px}
.media-note{margin-left:16%;margin-right:3%}}
.card-film{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain;pointer-events:none;opacity:0}
.card-film.ready{opacity:1}
.card-note{display:flex;justify-content:space-between;gap:18px;align-items:baseline;margin-top:5px}
.card-note p{font-size:12px;color:var(--muted);margin:0;line-height:1.7}
.card-film-control{font-size:10px;white-space:nowrap;color:var(--accent);padding:5px 0}
@media(max-width:800px){.card-film{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.card-note{display:block}
.card-note p{font-size:11px}
.card-film-control{padding-top:9px}}
@media(max-width:480px){.card-film{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px)}
.card-note{display:flex;gap:12px}
.card-film-control{font-size:9px;padding-top:0}}
.hero-figure{margin:0}.anchor-alias{position:absolute;scroll-margin-top:30px}.approach{position:relative}.js-only{display:none!important}.js .js-only{display:flex!important}.js .project-fallback{display:none}.project-fallback{font-size:13px;line-height:1.8;margin-top:20px;color:var(--muted)}.project-fallback summary{cursor:pointer;color:var(--fg)}.dark-exhibit>.project-fallback{margin-left:20%;margin-right:8%}.project-fallback a{text-decoration:underline}.card-film-control.js-only{display:none!important}.js .card-film-control.js-only{display:inline-flex!important}.film-status{font:9px/1.7 Mono;color:var(--muted);margin:8px 0 0}.film-status:empty{display:none}.error-page{padding-block:100px;min-height:65vh}.error-page h1{font-size:clamp(60px,8vw,110px);line-height:1;letter-spacing:-.06em;font-weight:400}.error-page h1 em{font-family:var(--serif);color:var(--accent);font-weight:300}.error-page>p{color:var(--muted)}.dialog-direct{font:10px Mono;margin-top:24px}.dialog-direct a{text-decoration:underline}.project-media:hover .card-film.ready+span{opacity:1}
.inline-footage{font:8px/1.7 Mono;color:var(--muted);margin:9px 0 0}.inline-footage[hidden]{display:none}.film-status a{color:var(--accent);text-decoration:underline}.js .exhibit-actions .round-button{display:block}html:not(.js) .exhibit-actions .round-button{display:none}