:root{--bg: #f3ead7;--bg-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'%3E%3Cpath fill='%23e4d8bd' d='M8 8h4v4H8zM40 40h4v4h-4z'/%3E%3C/svg%3E");--ink: #262b44;--ink-soft: #474c68;--ink-faint: #a89e8a;--line: #262b44;--panel: #fffaf0;--shadow: #262b44;--mark-bg: #feae34;--mark-ink: #181425;--btn-fill: #feae34;--btn-fill-ink: #181425;--accent: #c42430;--accent-2: #124e89;--note-ink: #181425;--note-yellow: #fee761;--note-pink: #f6a2b4;--note-blue: #8cd6f5;--sky: #8cd6f5;--grass: #63c74d;--dirt: #b86f50;--on-title: #fffaf0;--px: 4px;--frame: 0 calc(var(--px) * -1) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(var(--px) * -1) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);--frame-thin: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);--bevel: inset -4px -4px 0 0 rgba(0, 0, 0, .2), inset 4px 4px 0 0 rgba(255, 255, 255, .28);--font-pixel: "Press Start 2P", "Courier New", monospace;--font-term: "VT323", "Courier New", monospace}html[data-theme=dark]{--bg: #181425;--bg-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'%3E%3Cpath fill='%233a4466' d='M12 20h4v4h-4zM92 8h4v4h-4zM140 64h4v4h-4zM36 124h4v4h-4zM108 136h4v4h-4z'/%3E%3Cpath fill='%238b9bb4' d='M60 72h4v4h-4zM124 104h4v4h-4z'/%3E%3C/svg%3E");--ink: #f2ecdc;--ink-soft: #c0cbdc;--ink-faint: #5a6988;--line: #c0cbdc;--panel: #262b44;--shadow: #3a4466;--accent: #ff7a86;--accent-2: #2ce8f5;--note-yellow: #f7d95a;--note-pink: #ee9aad;--note-blue: #7fc8e8;--sky: #3a4466;--grass: #265c42;--dirt: #3e2731;--on-title: #181425}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;min-height:100vh;font-family:var(--font-term);font-size:24px;line-height:1.25;color:var(--ink);background-color:var(--bg);background-image:var(--bg-tile);-webkit-font-smoothing:none;font-smooth:never;overflow-x:hidden}html[data-theme=dark] body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.14) 2px 4px);pointer-events:none}h1,h2,h3{font-family:var(--font-pixel);font-weight:400;line-height:1.5;margin:0}p{margin:0}a{color:inherit}img{display:block;max-width:100%}mark{color:var(--mark-ink);background:var(--mark-bg);padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}strong{font-weight:400;background:var(--mark-bg);color:var(--mark-ink);padding:0 .2em}::selection{color:var(--bg);background:var(--accent)}:focus-visible{outline:4px solid var(--accent);outline-offset:6px}.panel{position:relative;background-color:var(--panel);box-shadow:var(--frame),8px 8px 0 0 var(--shadow)}.panel.yellow,.panel.pink,.panel.blue{--ink: var(--note-ink);--ink-soft: var(--note-ink);--ink-faint: var(--note-ink);--mark-bg: #181425;--mark-ink: #fee761;color:var(--note-ink)}.panel.yellow{background-color:var(--note-yellow)}.panel.pink{background-color:var(--note-pink)}.panel.blue{background-color:var(--note-blue)}.sprite{display:block}.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-pixel);font-size:12px;line-height:1.4;padding:16px 18px;color:var(--ink);background:var(--panel);border:0;box-shadow:var(--frame),var(--bevel),6px 6px 0 0 var(--shadow);text-decoration:none;cursor:pointer}.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--frame),var(--bevel),8px 8px 0 0 var(--shadow)}.btn:active{transform:translate(4px,4px);box-shadow:var(--frame),inset 4px 4px #0003}.btn svg,.card-link svg,.visit svg{flex:none;width:16px;height:16px}.card-link svg,.visit svg{width:20px;height:20px}.btn.primary{background:var(--btn-fill);color:var(--btn-fill-ink)}.actions{display:flex;flex-wrap:wrap;gap:20px}.logo-box{flex:none;width:64px;height:64px;display:grid;place-items:center;overflow:hidden;box-shadow:var(--frame)}.logo-box img{width:80%;height:80%;object-fit:contain;image-rendering:pixelated}.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}.tags li{font-size:20px;line-height:1.2;padding:2px 8px;border:2px solid var(--ink-faint)}.top-nav{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:50;width:min(1040px,calc(100% - 40px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px 10px 20px;background:var(--panel);box-shadow:var(--frame),6px 6px 0 0 var(--shadow)}.top-nav.compact{top:8px;padding-top:4px;padding-bottom:4px}.brand,.nav-link{padding:0;background:none;border:0;cursor:pointer}.brand{color:var(--ink);font-family:var(--font-pixel);font-size:12px;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:14px}.nav-link{padding:0 6px;font-family:var(--font-term);font-size:24px;color:var(--ink-soft);white-space:nowrap}.nav-link:hover,.nav-link.active{color:var(--panel);background:var(--ink)}.nav-tools{display:flex;gap:8px}.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;color:var(--ink);background:var(--panel);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}.icon-btn:hover{color:var(--btn-fill-ink);background:var(--btn-fill)}.icon-btn:active{transform:translateY(2px)}.icon-btn svg{width:24px;height:24px}.menu-toggle{display:none}.page{max-width:1040px;margin:0 auto;padding:0 24px;counter-reset:stage}.section{padding-top:112px;counter-increment:stage}.section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;margin-bottom:36px}.section-head:before{content:"stage " counter(stage,decimal-leading-zero);flex-basis:100%;font-family:var(--font-pixel);font-size:12px;color:var(--accent)}.section-head h2{font-size:32px}.section-note{font-size:26px;color:var(--ink-soft)}.hero{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:64px;padding-top:152px}.hello{font-size:30px;color:var(--ink-soft);margin-bottom:16px}.hero h1{font-size:32px;line-height:1.6;margin-bottom:28px}.accent-text{color:var(--accent)}.caret{display:inline-block;width:.6em;height:.9em;margin-left:.3em;vertical-align:-.08em;background:var(--accent);opacity:0}.visible .caret{animation:caret 1s steps(1) var(--caret-d, 0ms) infinite}@keyframes caret{0%{opacity:1}50%{opacity:0}}.hero-role{font-size:26px;line-height:1.35;color:var(--ink-soft);max-width:580px;margin-bottom:32px}.player-card{position:relative;justify-self:center;width:min(300px,100%);margin:0;padding:12px;background:var(--panel);box-shadow:var(--frame),8px 8px 0 0 var(--shadow)}.player-stage{aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(var(--sky) 82%,var(--grass) 82% 88%,var(--dirt) 88%)}.avatar{display:block;width:84%;height:auto}.av-body{animation:av-bob 1.2s step-end infinite}.av-hand-r{animation:av-wave 5s step-end infinite}.player-card:hover .av-hand-r{animation-duration:1.4s}.av-glasses{transition:transform .4s steps(4),opacity 0s}.av-glint{animation:av-glint 3.6s step-end infinite}.av-eyes{opacity:0;transition:opacity 0s}.av-blink{animation:av-blink 4s step-end infinite}html[data-theme=dark] .av-glasses{opacity:0;transform:translateY(-12px);transition:transform .4s steps(4),opacity 0s linear .4s}html[data-theme=dark] .av-eyes{opacity:1;transition:opacity 0s linear .3s}@keyframes av-bob{0%{transform:translateY(0)}50%{transform:translateY(1px)}}@keyframes av-wave{0%{transform:translateY(0)}64%{transform:translateY(-2px)}70%{transform:translateY(-4px)}76%{transform:translateY(-2px)}82%{transform:translateY(-4px)}88%{transform:translateY(0)}}@keyframes av-glint{0%{visibility:visible}70%{visibility:hidden}78%{visibility:visible}}@keyframes av-blink{0%{visibility:visible}93%{visibility:hidden}97%{visibility:visible}}.player-card figcaption{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:12px;font-size:24px;line-height:1}.player-card figcaption svg{flex:none;width:24px;height:24px;color:var(--accent)}.bubble{position:absolute;top:-32px;left:-64px;padding:4px 12px;color:var(--ink);background:var(--panel);box-shadow:var(--frame);font-size:24px;line-height:1.2;white-space:nowrap}.bubble:after{content:"";position:absolute;bottom:-12px;right:16px;width:8px;height:8px;background:var(--line);box-shadow:8px 8px 0 0 var(--line)}.star{position:absolute;width:28px;height:28px;animation:twinkle 1.6s steps(1) infinite}.star-a{top:-24px;right:-20px;color:var(--accent-2)}.star-b{bottom:56px;right:-20px;width:21px;height:21px;color:var(--accent);animation-delay:-.8s}@keyframes twinkle{0%{opacity:1}50%{opacity:.25}}.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}.about-text{padding:28px;font-size:28px;line-height:1.3}.about-text p+p{margin-top:16px}.checklist{padding:24px 28px 28px}.checklist h3{font-size:16px;margin-bottom:16px}.checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.checklist li{display:flex;align-items:center;gap:14px;font-size:26px;line-height:1.1}.box{flex:none;display:grid;place-items:center;width:24px;height:24px;box-shadow:inset 0 0 0 2px var(--ink)}.tick{width:20px;height:20px;color:var(--accent);opacity:0}.visible .tick{animation:type-on 1ms step-start forwards}.checklist li:nth-child(1) .tick{animation-delay:.3s}.checklist li:nth-child(2) .tick{animation-delay:.45s}.checklist li:nth-child(3) .tick{animation-delay:.6s}.checklist li:nth-child(4) .tick{animation-delay:.75s}.checklist li:nth-child(5) .tick{animation-delay:.9s}.checklist li:nth-child(6) .tick{animation-delay:1.05s}.checklist li:nth-child(7) .tick{animation-delay:1.2s}.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 52px;display:grid;gap:36px}.timeline:before{content:"";position:absolute;left:10px;top:10px;bottom:10px;border-left:4px dashed var(--ink-faint)}.timeline-item{position:relative}.dot{position:absolute;left:-52px;top:32px;width:24px;height:24px;background:var(--bg);box-shadow:inset 0 0 0 4px var(--ink)}.timeline-item:first-child .dot{background:var(--accent)}.job-card{padding:24px 28px}.card-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.card-top h3{font-size:16px;margin-bottom:6px}.role{font-size:24px;line-height:1.1;color:var(--accent)}.card-link{display:inline-flex;align-items:center;gap:6px;font-size:24px;color:var(--accent-2);text-decoration:none;white-space:nowrap}.card-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.job-card .desc{margin:16px 0;color:var(--ink-soft)}.job-card .desc:last-child{margin-bottom:0}.project-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:40px 32px}.project{display:flex;flex-direction:column;gap:12px;padding:24px;text-decoration:none}.project:hover{transform:translate(-4px,-4px);box-shadow:var(--frame),12px 12px 0 0 var(--shadow)}.project .logo-box{width:60px;height:60px}.project h3{font-size:16px;margin-top:8px}.kicker{font-size:24px;line-height:1.1}.project .desc{flex:1;line-height:1.2}.visit{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;font-family:var(--font-pixel);font-size:12px}.project:hover .visit{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}.side-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:44px 40px}.side-card{display:flex;flex-direction:column;min-width:0;padding:16px 16px 20px}.browser{overflow:hidden;border:4px solid var(--line);background:var(--bg)}.browser-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--accent-2);border-bottom:4px solid var(--line)}.browser-bar span{flex:none;width:12px;height:12px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--ink)}.browser-bar span:first-child{background:var(--mark-bg)}.browser-bar em{flex:1;margin-left:6px;font-style:normal;font-size:20px;line-height:1;color:var(--on-title);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.shot-stage{position:relative}.shot-main{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}.shot-main img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:top}.shot-zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:36px;height:36px;color:#181425;background:#fffaf0;box-shadow:inset 0 0 0 2px #181425;opacity:0}.shot-zoom svg{width:20px;height:20px}.shot-main:hover .shot-zoom,.shot-main:focus-visible .shot-zoom{opacity:1}.shot-nav{position:absolute;top:50%;margin-top:-20px;color:#181425;background:#fffaf0;box-shadow:inset 0 0 0 2px #181425,2px 2px #18142580}.shot-nav.prev{left:10px}.shot-nav.next{right:10px}.shot-caption{margin:12px 4px 10px;font-size:24px;line-height:1.1}.shot-caption span{color:var(--accent)}.thumbs{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.thumbs button{padding:0;overflow:hidden;background:var(--bg);border:2px solid var(--ink-faint);cursor:pointer;opacity:.6}.thumbs button:hover{opacity:1}.thumbs button.active{opacity:1;border-color:var(--accent)}.thumbs img{width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:grid;place-items:center;padding:24px;background:#181425db}.lightbox-frame{position:relative;width:min(1100px,100%);margin:0;padding:14px 14px 12px;animation:pop-in .16s steps(2)}.lightbox-frame img{width:100%;max-height:calc(100vh - 160px);object-fit:contain}.lightbox-frame figcaption{padding:10px 4px 2px;font-size:26px;line-height:1.1}.lightbox-frame figcaption span{margin-right:10px;color:var(--accent)}.lightbox .icon-btn{position:absolute;box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 0 var(--shadow)}.lightbox .icon-btn:hover{background:var(--btn-fill)}.lb-close{top:-18px;right:-18px}.lb-prev{left:-20px;top:50%;margin-top:-20px}.lb-next{right:-20px;top:50%;margin-top:-20px}.side-body{display:flex;flex-direction:column;gap:8px;padding:16px 8px 0}.side-body h3{font-size:16px}.side-body .desc{color:var(--ink-soft)}.side-body .visit{margin-top:6px;color:var(--accent-2);text-decoration:none}.side-body .visit:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}.toolbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:32px}.tool-group{padding:20px 22px 24px}.tool-group h3{font-size:12px;line-height:1.6;margin-bottom:14px;color:var(--accent)}.tool-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.chip{font-size:22px;line-height:1.2;padding:2px 10px;border:2px solid var(--ink)}.chip:hover{color:var(--mark-ink);background:var(--mark-bg)}.letter{max-width:740px;margin:0 auto;padding:36px 40px}.letter .dear{font-size:28px;color:var(--ink-soft)}.letter h3{font-size:24px;margin:8px 0 16px}.letter>p:not(.dear):not(.sign){font-size:26px;line-height:1.25;color:var(--ink-soft);max-width:540px}.letter .sign{font-size:30px;color:var(--accent);text-align:right;margin:8px 0 24px}.hearts{position:absolute;top:20px;right:20px;display:flex;gap:6px;color:var(--accent)}.hearts .sprite{width:21px;height:18px}.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:96px;padding:24px 0 40px;border-top:4px dashed var(--ink-faint);color:var(--ink-soft)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tw-word{display:inline-block;white-space:nowrap}.tw-char{display:inline-block;opacity:0}.visible .tw-char{animation:type-on 1ms step-start forwards;animation-delay:calc(var(--tw-d, 0ms) + var(--i) * var(--tw-s, 40ms))}@keyframes type-on{to{opacity:1}}.hero .hero-role,.hero .actions{opacity:0}.hero.visible .hero-role{animation:pop-in .32s steps(4) 1.1s forwards}.hero.visible .actions{animation:pop-in .32s steps(4) 1.4s forwards}.reveal{opacity:0;transform:translateY(12px);transition:opacity .3s steps(3),transform .3s steps(3)}.reveal.visible{opacity:1;transform:none}.pop-in{opacity:0}.pop-in.visible{opacity:1;animation:pop-in .32s steps(4) backwards}@keyframes pop-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.hero .avatar,.pop-in .logo-box img,.pop-in .shot-main img{clip-path:inset(0 0 100% 0)}.hero.visible .avatar,.pop-in.visible .logo-box img,.pop-in.visible .shot-main img{animation:scan-in .8s steps(10) .3s forwards}@keyframes scan-in{to{clip-path:inset(0)}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.av-body,.av-hand-r,.av-glint,.av-blink,.star,.caret{animation:none}.reveal,.pop-in{opacity:1;transform:none;transition:none;animation:none!important}.av-glasses,.av-eyes{transition:none!important}.tick,.tw-char,.hero .hero-role,.hero .actions{opacity:1;animation:none!important}.hero .avatar,.pop-in .logo-box img,.pop-in .shot-main img{clip-path:none;animation:none!important}}@media (max-width: 1020px){.menu-toggle{display:inline-grid}.nav-links{position:absolute;top:calc(100% + 14px);right:0;left:0;display:none;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 22px;background:var(--panel);box-shadow:var(--frame),6px 6px 0 0 var(--shadow)}.nav-links.open{display:flex}.nav-link{font-size:28px}.nav-tools{margin-top:8px}}@media (max-width: 860px){.hero{grid-template-columns:1fr;gap:72px;padding-top:128px}.player-card{width:min(260px,80%)}.bubble{left:-48px}.about-grid{grid-template-columns:1fr}}@media (max-width: 560px){body{font-size:22px}.page{padding:0 20px}.top-nav{width:calc(100% - 32px);padding-left:16px}.section{padding-top:88px}.section-head h2,.hero h1{font-size:24px}.hello{font-size:26px}.hero-role{font-size:24px}.bubble,.star{display:none}.timeline{padding-left:36px}.timeline:before{left:6px}.dot{left:-36px;width:16px;height:16px}.job-card{padding:20px 18px}.card-top{grid-template-columns:auto 1fr;gap:14px}.card-top .logo-box{width:56px;height:56px}.card-top h3{font-size:12px;line-height:1.6}.card-link{grid-column:1 / -1}.about-text{padding:22px 20px;font-size:26px}.project h3,.side-body h3{font-size:14px}.thumbs{grid-template-columns:repeat(5,1fr)}.shot-nav{width:36px;height:36px;margin-top:-18px}.lightbox{padding:12px}.lb-prev{left:6px}.lb-next{right:6px}.lb-close{top:-14px;right:-6px}.letter{padding:56px 22px 28px}.letter h3{font-size:18px}.btn{padding:14px}.actions{gap:18px}}
