:root{color-scheme:light;--paper: #e9e1ce;--paper-deep: #d9cfb8;--ink: #17140f;--muted: #70695d;--red: #b3372b;--line: rgba(23, 20, 15, .2);--shadow: rgba(58, 46, 30, .18);font-family:SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-synthesis:none}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background-color:var(--paper);background-image:linear-gradient(90deg,rgba(255,255,255,.08),transparent 22%,rgba(62,45,24,.025) 56%,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}button,input,select{font:inherit}button{color:inherit}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}.gallery-shell{width:min(1180px,calc(100% - 48px));margin:0 auto}.gallery-header{position:relative;min-height:640px;padding:clamp(68px,10vw,128px) 0 74px;border-bottom:1px solid var(--line)}.header-index{position:absolute;right:0;top:24px;color:var(--muted);font-size:11px;letter-spacing:.14em}.mark{width:15px;height:15px;margin-bottom:32px;background:var(--red);transform:rotate(7deg)}.eyebrow{margin:0 0 14px;color:var(--red);font-size:11px;font-weight:500;letter-spacing:.18em}h1{margin:0;font-family:Iowan Old Style,Baskerville,Songti SC,STSong,serif;font-size:clamp(52px,10vw,132px);font-weight:900;letter-spacing:-.065em;line-height:.82}h1>span{color:var(--red)}h1 em{display:block;margin-top:.26em;font-size:.38em;font-style:normal;font-weight:700;letter-spacing:.08em;line-height:1.25}.intro-grid{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(240px,.8fr);gap:clamp(32px,8vw,120px);width:min(760px,100%);margin:72px 0 0 auto;font-size:12px;line-height:2}.intro-grid p{margin:0}.intro-grid .note{color:var(--muted)}kbd{padding:1px 5px;border:1px solid var(--line);background:#fff3}.works{padding:86px 0 36px}.work{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:clamp(28px,6vw,82px);align-items:end;padding:0 0 100px}.work:nth-child(2n){grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr)}.work:nth-child(2n) .preview{grid-column:2}.work:nth-child(2n) .work-copy{grid-column:1;grid-row:1}.preview{position:relative;display:block;width:100%;min-height:470px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:0;background:var(--paper-deep);box-shadow:0 18px 60px var(--shadow);cursor:crosshair;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}.preview:hover,.preview:focus-visible{transform:translateY(-8px);box-shadow:0 34px 90px #3a2e1e42}.preview canvas{display:block;width:100%;height:100%;min-height:470px}.preview-index,.preview-action{position:absolute;z-index:2;padding:8px 10px;color:var(--paper);background:#17140fbd;font-size:10px;letter-spacing:.12em}.preview-index{top:12px;left:12px}.preview-action{right:12px;bottom:12px;opacity:0;transform:translateY(5px);transition:opacity .24s ease,transform .24s ease}.preview:hover .preview-action,.preview:focus-visible .preview-action{opacity:1;transform:translateY(0)}.work-copy{padding-bottom:10px}.work h2{margin:0 0 20px;font-family:Iowan Old Style,Baskerville,Songti SC,STSong,serif;font-size:clamp(28px,4vw,50px);line-height:.98;letter-spacing:-.03em}.work h2 small{display:block;margin-top:12px;color:var(--red);font-family:SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:.28em;font-weight:500;letter-spacing:.14em}.work-copy>p{margin:0;color:var(--muted);font-family:Iowan Old Style,Baskerville,Songti SC,STSong,serif;font-size:13px;line-height:1.9}.work-meta{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding-top:13px;border-top:1px dashed var(--line);color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.work-meta span:last-child{color:var(--red)}.gallery-footer{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center;padding:30px 0 52px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.1em}.gallery-footer button,.scene-topbar button{padding:0;border:0;border-bottom:1px solid currentColor;background:none;cursor:pointer}.scene-open{overflow:hidden;background:#17140f}.scene-shell{position:fixed;inset:0;display:grid;grid-template-rows:54px minmax(0,1fr) 44px;color:#e9e1ce;background:#17140f}.scene-topbar{display:grid;grid-template-columns:120px minmax(0,1fr) auto 80px;gap:24px;align-items:center;padding:0 18px;border-bottom:1px solid rgba(233,225,206,.2);font-size:10px;letter-spacing:.1em}.scene-topbar>div:nth-child(2){display:flex;gap:10px}.scene-topbar strong{color:#f0e6d2;font-weight:500}.scene-topbar span,.scene-tech{color:#e9e1ce7a}.scene-root{position:relative;min-height:0;overflow:hidden;background:#e9e1ce}.scene-canvas,.svg-stage,.typing-stage,.rain-stage{display:block;width:100%;height:100%}.scene-caption{position:absolute;z-index:12;right:16px;bottom:14px;left:16px;display:flex;justify-content:space-between;pointer-events:none;color:#17140f73;font-size:8px;letter-spacing:.12em;mix-blend-mode:multiply}.scene-root--night .scene-caption,.scene-root--rain .scene-caption{color:#e9e1ce8c;mix-blend-mode:normal}.scene-help{display:grid;place-items:center;padding:0 18px;color:#e9e1ce80;font-family:Iowan Old Style,Baskerville,Songti SC,STSong,serif;font-size:10px;text-align:center}.svg-stage svg{display:block;width:100%;height:100%;background:#211f1c}.typing-stage{position:relative;display:grid;place-items:center;background:#211f1c}.typing-paper{position:relative;width:min(64vw,620px);height:min(70vh,720px);overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(72,112,151,.15) 39px 40px),#ede5d2;box-shadow:0 28px 90px #0000006b}.typing-margin{position:absolute;top:0;bottom:0;left:72px;width:1px;background:#b3372b61}.typing-copy{position:absolute;z-index:2;top:88px;right:58px;left:98px;color:#17140f;font-size:clamp(16px,2.3vw,26px);line-height:1.84;letter-spacing:.08em;word-break:break-all}.typing-flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.typewriter{position:absolute;bottom:-78px;left:50%;width:min(78vw,760px);height:178px;padding:42px 48px;background:#24211c;transform:translate(-50%) perspective(500px) rotateX(5deg);box-shadow:0 -16px 50px #00000038}.typewriter-slot{position:absolute;top:19px;right:12%;left:12%;height:5px;background:#090806}.typewriter-keys{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.typewriter-keys span{display:grid;height:22px;place-items:center;border:1px solid rgba(233,225,206,.16);color:#e9e1ce99;font-size:8px}.typing-hint,.rain-label{position:absolute;z-index:4;margin:0;color:#e9e1ce8c;font-size:9px;letter-spacing:.13em}.typing-hint{top:18px}.rain-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 24% 28%,rgba(70,92,130,.42),transparent 24%),linear-gradient(#08101d,#151b26 60%,#080b10);cursor:none}.rain-city{position:absolute;inset:30% 0 0;display:flex;align-items:end;justify-content:center;gap:2vw;filter:url(#rain-distort)}.rain-city i{position:relative;width:clamp(45px,8vw,120px);height:var(--h, 50%);background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(216,153,74,.62) 12px 17px,transparent 17px 28px),repeating-linear-gradient(0deg,#101722 0 13px,transparent 13px 27px),#111927}.rain-city i:nth-child(1){--h: 48%}.rain-city i:nth-child(2){--h: 72%}.rain-city i:nth-child(3){--h: 54%}.rain-city i:nth-child(4){--h: 86%}.rain-city i:nth-child(5){--h: 63%}.rain-city i:nth-child(6){--h: 76%}.rain-city i:nth-child(7){--h: 46%}.rain-blur{position:absolute;inset:0;background:#1a263857;backdrop-filter:blur(13px) saturate(.7)}.rain-drops{position:absolute;inset:0}.rain-drops i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * 1.7);border:1px solid rgba(222,235,249,.34);border-radius:50% 50% 58% 42%;background:linear-gradient(135deg,#eef7ff59,#3b526c0d);box-shadow:inset 1px 1px 2px #ffffff40}.rain-drops i.runner{animation:rain-run var(--d) linear var(--delay) infinite}@keyframes rain-run{0%{transform:translateY(-20vh) scaleY(.7)}to{transform:translateY(115vh) scaleY(1.8)}}.rain-wipe{position:absolute;inset:0;opacity:0;background:radial-gradient(circle 130px at var(--wipe-x, 50%) var(--wipe-y, 50%),transparent 0 52%,rgba(18,28,43,.34) 76%);backdrop-filter:blur(0);transition:opacity .32s ease;pointer-events:none}.rain-wipe.active{opacity:1}.rain-label{top:18px;left:20px}.debug-panel{position:fixed;z-index:100;top:16px;right:16px;width:min(310px,calc(100vw - 32px));padding:16px;border:1px solid rgba(233,225,206,.25);color:#e9e1ce;background:#12110ef5;box-shadow:0 24px 70px #0000006b;opacity:0;transform:translateY(-12px);transition:opacity .26s ease,transform .36s cubic-bezier(.16,1,.3,1);pointer-events:none}.debug-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.debug-head{display:flex;justify-content:space-between;margin-bottom:22px;color:#d85b48;font-size:11px;letter-spacing:.15em}.debug-head button{padding:0;border:0;color:inherit;background:none;font-size:18px;cursor:pointer}.debug-panel label{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:15px;color:#e9e1ceb3;font-size:9px;letter-spacing:.12em}.debug-panel label input[type=range],.debug-panel label select,.debug-panel label input[type=number]{grid-column:1 / -1;width:100%}.debug-panel input,.debug-panel select{min-height:31px;border:1px solid rgba(233,225,206,.2);border-radius:0;color:#e9e1ce;background:#25221c}.debug-panel input[type=range]{accent-color:#d85b48}.debug-panel .toggle-row{display:flex;justify-content:space-between}.debug-apply{width:100%;margin-top:22px;padding:11px;border:0;color:#17140f;background:#d85b48;cursor:pointer}.debug-panel>p{margin:14px 0 0;color:#e9e1ce6b;font-family:Iowan Old Style,Baskerville,Songti SC,STSong,serif;font-size:9px;line-height:1.8}@media(max-width:760px){.gallery-shell{width:min(100% - 28px,620px)}.gallery-header{min-height:0;padding-top:68px}h1{font-size:clamp(42px,12vw,58px);letter-spacing:-.072em;line-height:.92}h1 em{font-size:.31em}.intro-grid{grid-template-columns:1fr;margin-top:48px}.work,.work:nth-child(2n){grid-template-columns:1fr;gap:26px;padding-bottom:74px}.work:nth-child(2n) .preview,.work:nth-child(2n) .work-copy{grid-column:1}.work:nth-child(2n) .preview{grid-row:1}.work:nth-child(2n) .work-copy{grid-row:2}.preview,.preview canvas{min-height:min(132vw,580px)}.gallery-footer{grid-template-columns:1fr}.scene-topbar{grid-template-columns:68px minmax(0,1fr) 52px;gap:12px}.scene-tech{display:none}.scene-topbar>div:nth-child(2){display:block}.scene-topbar span{display:block;margin-top:3px;font-size:8px}.scene-help{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.typing-paper{width:90vw;height:68vh}.typing-margin{left:42px}.typing-copy{right:28px;left:58px}.typewriter{width:100vw;padding-inline:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}