@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Cinzel;src:url('assets/fonts/Cinzel-Variable.ttf') format('truetype');font-weight:400 900;font-display:swap}
:root{--ink:#111413;--paper:#eae7df;--muted:#777a78;--rule:#c9c8be;--red:#9d282b;--blue:#9bdaef;--rail:72px;--sans:Manrope,Arial,sans-serif;--display:Cinzel,Georgia,serif;--mono:Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#090b0f;color:var(--ink);font:15px/1.75 var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:wait}img{display:block;max-width:100%}h1,h2,h3,p,figure,dl,dd{margin:0}h1,h2,h3{font-weight:500}button{border:0;background:none}a:focus-visible,button:focus-visible{outline:2px solid #72c5e7;outline-offset:6px}::selection{background:#9d282b;color:white}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:10px;left:100px;background:white;color:#111;padding:12px;z-index:100;transform:translateY(-160%)}.skip-link:focus{transform:none}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:30;background:#090b0f;border-right:1px solid #ffffff20;color:#f1eee5;display:flex;align-items:center;flex-direction:column}.rail-brand{font:600 35px var(--display);padding-top:24px}.rail-brand span{color:#bb373b}.menu-toggle{padding:20px 12px;margin-top:22px;font-size:28px;line-height:1}.rail-word{writing-mode:vertical-rl;letter-spacing:11px;font:26px Georgia,serif;position:absolute;top:45%;opacity:.6}.rail-github{margin-top:auto;padding:25px;font-size:20px}.navigation{position:fixed;left:var(--rail);top:0;bottom:0;width:min(420px,calc(100vw - var(--rail)));background:#11151a;color:#e9e6de;z-index:29;padding:70px 40px;transform:translateX(calc(-100% - var(--rail)));transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;gap:22px;visibility:hidden}.navigation.open{transform:none;visibility:visible}.navigation>.eyebrow{margin-bottom:22px;color:#9cb0bd}.navigation>a{font-size:27px;border-bottom:1px solid #ffffff15;padding:5px 0 16px}.navigation small{font:11px var(--mono);color:#bd7575;padding-right:15px}.navigation p{font-size:13px;color:#a2a6aa;margin-top:20px}.navigation .nav-external{margin-top:auto;font-size:15px;display:flex;justify-content:space-between}.nav-shade{position:fixed;inset:0;background:#0009;z-index:28;backdrop-filter:blur(4px)}main{margin-left:var(--rail)}
.hero{height:100svh;min-height:740px;position:relative;isolation:isolate;overflow:hidden;color:#ecece8;background:#060c14}.hero-backdrop{position:absolute;inset:0;z-index:-4;background:#060c14;opacity:.45}#infinity{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:0;transition:opacity 1.5s}#infinity.ready{opacity:1}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,9,15,.8),transparent 66%),linear-gradient(0deg,#070b11 0%,transparent 24%,transparent 85%,#070b1170);pointer-events:none}.topline{position:absolute;left:5.2%;right:4.4%;top:30px;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:8}.wordmark{font:600 27px var(--display);letter-spacing:4px;white-space:nowrap}.wordmark>span{font:10px var(--sans);vertical-align:top;margin-left:5px}.topline-caption{font:9px/1.7 var(--mono);letter-spacing:1.8px;color:#c7d1d5a8;margin-left:auto}.scene-controls{display:flex;gap:22px;margin-left:30px}.scene-controls button{padding:8px 0;color:#d1d8dc;display:flex;align-items:center;gap:7px;font:9px var(--mono);letter-spacing:.8px}.scene-controls .bi{font-size:17px}.scene-controls button:hover{color:white}.hero-copy{position:absolute;left:8%;top:26%;z-index:5;transition:opacity .8s,transform 1.2s}.eyebrow{font:10px/1.8 var(--mono);letter-spacing:2px;text-transform:uppercase}.eyebrow.light{color:#b8c4cc;display:flex;align-items:center;gap:13px}.red-line{width:26px;height:1px;background:#c94c4d}.hero h1{font:500 clamp(65px,8.4vw,143px)/1.05 var(--display);letter-spacing:-5px;margin:24px 0 27px;text-shadow:0 3px 35px #0005}.hero h1 em{font-style:normal;color:#b8dce9;font-weight:400}.hero-description{font-size:16px;line-height:1.85;color:#c0cbd3;margin:0 0 35px;letter-spacing:.3px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;padding:16px 24px;font:600 12px var(--sans);letter-spacing:.5px;min-height:54px;transition:background .25s,color .25s,transform .25s}.button .bi{font-size:18px}.button-light{background:#e4e6de;color:#11181e}.button-light:hover{background:white;transform:translateY(-3px)}.button-dark{background:#131819;color:#f1eee8}.button-dark:hover{background:#283d46}.domain-caption{position:absolute;right:8%;top:28%;writing-mode:vertical-rl;z-index:6;pointer-events:none;opacity:0;transition:opacity .8s,transform 1.2s;transform:translateY(15px);letter-spacing:13px;text-shadow:0 0 40px #5ec3ff80}.domain-caption span{font:21px Georgia,serif;letter-spacing:10px}.domain-caption strong{font:500 clamp(40px,4.5vw,70px) Georgia,serif;margin:0 12px;letter-spacing:18px}.domain-caption small{font:9px var(--mono);writing-mode:horizontal-tb;position:absolute;bottom:-46px;right:0;width:200px;letter-spacing:4px}.hero-bottom{position:absolute;bottom:37px;left:5.2%;right:4.4%;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:9}.space-action{display:flex;align-items:center;gap:13px;color:#e5e9eb;text-align:left;padding:8px 0}.space-action>.bi{font-size:31px;color:#a6c6d8}.space-action span{font-size:12px;line-height:1.6}.space-action small{display:block;font:8px var(--mono);letter-spacing:1.3px;color:#96a8b5;margin-top:6px}.space-action:hover>.bi{color:white}.hero-coordinate{font:9px/2 var(--mono);letter-spacing:2px;color:#bdc9d1;opacity:.55;text-align:center}.hero-coordinate span{font-size:8px}.scroll-cue{font:8px var(--mono);letter-spacing:2px;display:flex;align-items:center;gap:18px}.scroll-cue .bi{font-size:20px}
.paper{background:var(--paper) url('assets/art/movie-texture.jpg') center/1200px auto;color:var(--ink)}.works{padding:100px 6.5% 65px;position:relative}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px}.section-heading .eyebrow{color:#74766f;margin-bottom:23px}.section-heading h2,.contact h2{font-size:clamp(32px,3.8vw,58px);line-height:1.3;letter-spacing:-2px;font-weight:500}.section-heading h2 em,.contact h2 em{font-style:normal;color:#737c77}.section-intro{font-size:13px;line-height:1.9;color:#60665f;padding-bottom:5px}.works-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:19px 0;margin-top:50px}.index-label{font:10px var(--mono);letter-spacing:2px}.index-label span{display:inline-block;padding-left:15px;color:#9b292c}.filters{display:flex;gap:26px}.filters button{font-size:12px;position:relative;padding:4px 0;color:#777b75}.filters button[aria-pressed=true]{color:#171c18}.filters button[aria-pressed=true]:after{content:'';position:absolute;height:1px;bottom:-20px;left:0;right:0;background:#8d2429}.filters sup{font:8px var(--mono);margin-left:4px}.project{padding:40px 0 45px;border-bottom:1px solid var(--rule)}.project-meta{display:flex;align-items:center;gap:20px;margin-bottom:17px}.project-number{font:24px Georgia,serif;color:#972b2f;display:flex;align-items:center;gap:9px}.project-number small{font:9px var(--mono);color:#797c75}.project-type{font:10px var(--mono);letter-spacing:2px}.project-version{margin-left:auto;font:10px var(--mono);color:#71786f}.project-banner{display:block;position:relative;overflow:hidden;background:#0b0f17}.project-banner img{width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.7,.3,1);aspect-ratio:auto}.project-banner:hover img{transform:scale(1.025)}.banner-link{position:absolute;bottom:18px;right:18px;width:42px;height:42px;display:grid;place-items:center;background:#f5f2e8e8;color:#1b2427;font-size:21px;transition:background .3s,transform .3s}.project-banner:hover .banner-link{background:white;transform:translate(2px,-2px)}.project-bottom{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:35px;padding-top:28px}.project-title>.eyebrow{font-size:8px;color:#7b8178;letter-spacing:1.2px}.project-title h3{font:500 clamp(31px,3.8vw,54px)/1.45 var(--display);letter-spacing:-2px}.project-title h3>span{font:13px Georgia,serif;letter-spacing:5px;color:#9e3034;margin-left:13px;vertical-align:middle}.stack{font:9px/1.8 var(--mono);color:#6f766e;margin-top:4px}.project-description>p{font-size:13px;line-height:1.85;color:#515b52}.project-description ul{padding-left:13px;font-size:11px;line-height:1.9;color:#72796e;margin:13px 0 0}.project-description li::marker{font-size:7px;color:#a64745}.project-actions{display:flex;flex-direction:column;gap:12px;align-self:start;padding-top:5px}.text-link{display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;font:500 11px var(--sans);padding:7px 0;border-bottom:1px solid #b8bdb1;transition:color .2s}.text-link:hover{color:#97282e}.text-link .bi{font-size:14px}.release-link{font:600 10px var(--sans);color:#8e2529;padding:6px 0;display:flex;justify-content:space-between}.release-link .bi{font-size:14px}.banner-note{font-size:10px;color:#777f75;text-align:right;margin-top:25px}
.approach{background:#141a1c;color:#e1e3dc;display:grid;grid-template-columns:.85fr 1.15fr;gap:9%;padding:110px 9%;position:relative;overflow:hidden}.edo-art{align-self:center;position:relative}.edo-art img{width:100%;max-height:700px;object-fit:cover;filter:saturate(.65) brightness(.75);border:1px solid #cec6ad33}.edo-art:after{content:'江戸';position:absolute;top:20px;right:19px;writing-mode:vertical-rl;font:38px Georgia,serif;letter-spacing:9px;color:#e4dfc7;text-shadow:1px 2px 3px #000}.edo-art figcaption{font:8px var(--mono);letter-spacing:1.2px;color:#7d8c8f;margin-top:13px}.approach-content>.eyebrow{color:#8a9b9c;margin-bottom:25px}.approach h2{font-size:clamp(30px,3.8vw,54px);line-height:1.3;letter-spacing:-2px}.approach h2 em{font-style:normal;color:#aabdbd}.approach-lead{font-size:13px;color:#9facad;line-height:1.9;max-width:380px;margin-top:28px}.principles{margin-top:30px}.principles>div{border-top:1px solid #b5c6c329;padding:18px 0}.principles dt{font-size:13px;display:flex;align-items:center;gap:18px}.principles dt small{font:9px var(--mono);color:#c26b68}.principles dd{font-size:11px;line-height:1.9;color:#93a2a0;margin:9px 0 0 34px;max-width:350px}.contact{padding:75px 6.5% 25px}.contact-top{display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-top .eyebrow{color:#7d8479;margin-bottom:25px}.contact h2{font-size:clamp(29px,3.4vw,49px)}.contact-github{width:110px;height:110px;border:1px solid #a6ad9f;display:grid;place-items:center;font-size:49px;transition:background .3s,color .3s}.contact-github:hover{background:#171c1b;color:var(--paper)}.footer-links{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 0 25px;margin-top:40px;border-top:1px solid var(--rule);font:10px var(--mono)}.footer-links button{font:10px var(--mono);padding:5px}.footer-links a:hover,.footer-links button:hover{color:#9d282b}.footer-fine{border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:25px;color:#889083;font:8px/1.8 var(--mono)}.footer-fine>span:last-child{font:17px Georgia,serif;letter-spacing:4px}
dialog{border:0;padding:0;width:min(1000px,calc(100% - 40px));max-height:90svh;background:#ebe9e1 url('assets/art/movie-texture.jpg') center/1000px auto;color:var(--ink);overscroll-behavior:contain}dialog::backdrop{background:#020810bd;backdrop-filter:blur(9px)}.dialog-head{position:sticky;top:0;background:#e8e7dff2;backdrop-filter:blur(12px);border-bottom:1px solid #c7cbbf;display:flex;align-items:center;justify-content:space-between;padding:18px 30px;z-index:2}.dialog-head>.eyebrow{font-size:9px}.icon-button{display:grid;place-items:center;width:40px;height:36px;font-size:18px}.icon-button:hover{background:#ffffff88}.dialog-body{padding:35px 45px 45px}.dialog-body h2{font:500 clamp(30px,4vw,53px) var(--display);letter-spacing:-1px;line-height:1.3}.dialog-intro{font-size:15px;line-height:1.9;color:#5c655d;max-width:730px;margin:20px 0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:30px 0}.detail-grid h3{font-size:14px;font-weight:700;margin-bottom:9px}.detail-grid p,.detail-grid ul{font-size:12px;line-height:1.9;color:#636e63}.detail-grid ul{padding-left:17px;margin:0}.screenshot{background:#d7dcd2;border:1px solid #bec6b9}.screenshot img{width:100%;height:auto}.screenshot.secondary{max-width:750px;margin:0 auto}.screenshot figcaption{font-size:10px;color:#5d6b5d;padding:10px 15px;background:#e3e8dc}.dialog-links{display:flex;align-items:center;gap:35px;margin-top:35px}.dialog-links .text-link{min-width:155px}.credit-list>div{padding:23px 0;border-bottom:1px solid #c1c9bb}.credit-list dt{font-weight:700;font-size:13px;margin-bottom:9px}.credit-list dd{font-size:12px;color:#606c60;line-height:1.9}.credit-list a{color:#8b2b30;text-decoration:underline;text-underline-offset:3px}#credits-dialog .dialog-body>p{font-size:13px;color:#606c60;margin:20px 0}.reveal{transition:opacity .8s,transform .8s}.js-motion .reveal:not(.revealed){opacity:0;transform:translateY(22px)}.reduced-motion *, .reduced-motion *:before,.reduced-motion *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reduced-motion .reveal{opacity:1!important;transform:none!important}.reduced-motion .domain-caption{opacity:.4}
@media(min-width:1800px){.hero h1{font-size:160px}.hero-copy{left:10%}.works,.contact{padding-left:9%;padding-right:9%}}
@media(max-width:1100px){:root{--rail:60px}.topline{left:5%;right:4%;gap:15px}.topline-caption{display:none}.scene-controls{margin-left:0}.hero{min-height:680px}.hero h1{font-size:86px;letter-spacing:-4px}.hero-copy{left:7%;top:29%}.hero-description{font-size:14px}.hero-coordinate{display:none}.domain-caption{right:6%;top:25%}.section-heading{gap:25px}.section-intro{max-width:260px}.project-bottom{grid-template-columns:1fr 1.2fr;gap:25px}.project-actions{grid-column:1/-1;flex-direction:row;gap:30px;padding-top:0}.project-actions>a,.project-actions>button{min-width:140px}.approach{gap:8%;padding:85px 7%}.principles dd{margin-left:0}.footer-fine>span:nth-child(2){max-width:260px}.project-type{font-size:9px}}
@media(max-width:760px){:root{--rail:0px}.rail{height:62px;width:100%;bottom:auto;flex-direction:row;padding:0 20px;border-right:0;border-bottom:1px solid #ffffff20;background:#080c12ed;backdrop-filter:blur(12px)}.rail-brand{font-size:29px;padding:0}.rail-word{display:none}.menu-toggle{margin:0 0 0 auto;order:3;padding:9px 0 9px 20px}.rail-github{margin:0 0 0 auto;padding:0;font-size:18px}.navigation{top:62px;left:0;width:min(420px,100%);padding:45px 28px;z-index:31}.rail{z-index:32}.nav-shade{top:62px;z-index:30}main{margin:0}.hero{height:100svh;min-height:720px;padding-top:62px}.topline{top:83px;left:24px;right:24px}.wordmark{font-size:17px;letter-spacing:2px}.scene-controls{gap:16px}.scene-controls span{display:none}.scene-controls .bi{font-size:19px}.hero-copy{left:25px;right:20px;top:33%}.hero-copy .eyebrow{font-size:8px;letter-spacing:1px}.hero h1{font-size:clamp(52px,12.8vw,88px);letter-spacing:-2px;line-height:1.12;margin:20px 0}.hero-description{font-size:13px;margin-bottom:25px;max-width:255px}.hero .button{padding:13px 17px;min-height:47px;font-size:11px}.hero-bottom{left:25px;right:25px;bottom:26px}.scroll-cue{font-size:0;gap:0}.scroll-cue .bi{font-size:23px}.space-action small{font-size:7px}.space-action>.bi{font-size:26px}.hero-shade{background:linear-gradient(90deg,#030910c9,transparent),linear-gradient(0deg,#070b11,transparent 30%)}.domain-caption{top:25%;right:26px;letter-spacing:5px}.domain-caption span{font-size:15px;letter-spacing:6px}.domain-caption strong{font-size:34px;letter-spacing:12px}.domain-caption small{display:none}.works{padding:65px 24px 40px}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:18px}.section-heading h2,.contact h2{font-size:32px;letter-spacing:-1.5px}.section-intro{margin-top:24px;font-size:12px;max-width:none}.section-intro br{display:none}.works-toolbar{margin-top:30px;padding:15px 0;align-items:flex-start;gap:15px;flex-direction:column}.filters{gap:27px}.filters button{font-size:11px}.filters button[aria-pressed=true]:after{bottom:-16px}.index-label{font-size:9px}.project{padding:28px 0 35px}.project-meta{gap:12px;margin-bottom:14px}.project-number{font-size:20px;gap:5px}.project-type{font-size:8px;letter-spacing:1px}.project-version{font-size:8px}.project-banner{margin:0 -24px}.banner-link{width:31px;height:31px;right:12px;bottom:12px;font-size:16px}.project-bottom{display:block;padding-top:22px}.project-title h3{font-size:40px}.project-title .eyebrow{font-size:8px}.stack{font-size:9px}.project-description{margin-top:17px}.project-description>p{font-size:12px}.project-description ul{font-size:11px;margin-top:11px}.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:20px}.project-actions>a,.project-actions>button{min-width:0}.project-actions .release-link{grid-column:1/-1;padding-top:10px;border-top:1px solid #bdc3b8}.banner-note{font-size:9px;text-align:left;line-height:1.8}.approach{padding:65px 24px;display:flex;flex-direction:column-reverse;gap:35px}.approach h2{font-size:37px;letter-spacing:-1.5px}.approach h2 br:last-of-type{display:none}.approach-lead{font-size:12px}.approach-content>.eyebrow{font-size:9px}.principles dd{font-size:11px;max-width:none}.edo-art{width:100%;max-width:400px;align-self:start}.edo-art img{max-height:330px;object-position:center 65%}.contact{padding:55px 24px 25px}.contact-top{align-items:flex-end;gap:15px}.contact-github{width:52px;height:52px;min-width:52px;font-size:27px}.contact h2{font-size:27px}.contact-top .eyebrow{font-size:9px;margin-bottom:18px}.footer-links{font-size:9px;gap:15px;flex-wrap:wrap;margin-top:28px;padding:23px 0}.footer-links button{font-size:9px}.footer-fine{font-size:7px;align-items:flex-start;flex-wrap:wrap;gap:12px}.footer-fine>span:nth-child(2){max-width:none;width:85%}.footer-fine>span:last-child{position:absolute;right:24px}.dialog-head{padding:10px 15px}.dialog-head>.eyebrow{font-size:8px;max-width:80%}.dialog-body{padding:25px 22px 30px}.dialog-body h2{font-size:34px}.dialog-intro{font-size:12px}.detail-grid{grid-template-columns:1fr;gap:22px;margin:25px 0}.detail-grid p,.detail-grid ul{font-size:11px}.detail-grid h3{font-size:13px}.dialog-links{flex-direction:column;align-items:stretch;gap:18px}.dialog-links .button{font-size:11px}.screenshot{margin-left:-10px;margin-right:-10px}.credit-list dd{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.project-banner img{transition:none}}
@media(max-width:760px){.filters button{min-height:40px}.project-actions .text-link,.project-actions .release-link{min-height:44px}.icon-button{width:44px;height:44px}.footer-links button,.footer-links>a{min-height:40px;display:flex;align-items:center}.filters button[aria-pressed=true]:after{bottom:-16px}}
@media(max-width:760px){.section-intro{font-size:13px}.project-description>p{font-size:14px;line-height:1.8}.project-description ul{font-size:12px}.project-actions .text-link,.project-actions .release-link{font-size:12px}.dialog-intro{font-size:14px}.detail-grid p,.detail-grid ul{font-size:13px}.credit-list dd{font-size:12px}.approach-lead{font-size:14px}.principles dd{font-size:12px}}