*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:hidden}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:unset;-webkit-tap-highlight-color:transparent;min-height:100vh;line-height:1.6;overflow-x:clip}a{color:var(--accent);text-decoration:none;transition:color .15s}a:hover{color:var(--accent-hover)}img{image-rendering:pixelated;image-rendering:crisp-edges;display:block}h1,h2,h3,h4{font-family:var(--font-pixel);color:var(--ink);font-weight:400;line-height:1.2}button{font-family:var(--font-pixel);font-size:var(--fs-d1);cursor:pointer;color:inherit;background:0 0;border:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-soft);color:var(--ink)}@font-face{font-family:ArkPixel12;src:url(/fonts/ark-pixel-12px-subset.woff2)format("woff2"),url(/fonts/ark-pixel-12px.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}:root{--bg:#fafaf7;--bg-elevated:#fff;--bg-sunken:#f0f0e8;--ink:#2c2c3e;--ink-dim:#6b6b7b;--ink-mute:#76768a;--border:#e8e8e0;--border-strong:#d4d4cc;--accent:#3a86ff;--accent-hover:#2c6fd9;--accent-soft:#e0eaff;--font-pixel:"ArkPixel12", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:"PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--fs-d1:12px;--fs-d2:24px;--fs-d3:36px;--fs-hero:72px;--fs-body:15px;--fs-lead:18px;--fs-note:13px;--fs-label:12px;--container-w:min(720px, 92vw);--container-w-wide:min(1080px, 94vw);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-8:48px;--space-10:64px;--space-12:96px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px #2c2c3e0f;--shadow-md:0 4px 12px #2c2c3e14;--shadow-lg:0 8px 24px #2c2c3e1a;--shadow-hard:4px 4px 0 var(--ink-dim)}@media (prefers-color-scheme:dark){:root{--bg:#18171a;--bg-elevated:#26252b;--bg-sunken:#111014;--ink:#e8e6e1;--ink-dim:#a8a8a8;--ink-mute:#767676;--border:#3a3a40;--border-strong:#44444a;--accent:#6ba0ff;--accent-hover:#8fb8ff;--accent-soft:#1e2a4a;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 12px #00000080;--shadow-lg:0 8px 24px #0009}}body{padding-top:56px}.page{flex-direction:column;min-height:100vh;display:flex}.page-main{width:100%;padding:var(--space-10) var(--space-5) var(--space-12);flex-direction:column;flex:1;align-items:center;display:flex}.container{width:var(--container-w);max-width:100%}.topbar{z-index:100;width:100%;height:56px;padding:0 var(--space-6);background:var(--bg);border-bottom:2px solid var(--border-strong);align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.topbar-logo{font-family:var(--font-pixel);font-size:var(--fs-d2);color:var(--ink);letter-spacing:2px;text-decoration:none}.topbar-logo:hover{color:var(--accent)}.topbar-divider{background:var(--border-strong);width:1px;height:24px;margin-left:var(--space-4);margin-right:var(--space-4);flex-shrink:0;align-self:center}.topbar-nav{align-items:center;gap:var(--space-5);margin-left:auto;display:flex}.topbar-link{font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-dim);padding:var(--space-2) 0;text-decoration:none;transition:color .15s}.topbar-link:hover,.topbar-link.active{color:var(--ink)}.topbar-link:before{content:"";width:4px;height:4px;margin-right:var(--space-2);vertical-align:middle;background:0 0;display:inline-block}.topbar-link.active:before{background:var(--ink)}.topbar-github{color:var(--ink-dim);padding:var(--space-2) 0;border-bottom:1px solid #0000;justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:inline-flex}.topbar-github:hover{color:var(--ink)}.topbar-github svg{width:18px;height:18px;display:block}.topbar-menu-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);justify-content:center;align-items:center;width:32px;height:32px;margin-left:auto;display:none}.topbar-menu-btn svg{width:18px;height:18px}.topbar-mobile-nav{z-index:99;background:var(--bg-elevated);border-bottom:1px solid var(--border);padding:var(--space-3) 0;box-shadow:var(--shadow-md);flex-direction:column;display:none;position:fixed;top:56px;left:0;right:0}.topbar-mobile-nav.open{display:flex}.topbar-mobile-link{padding:var(--space-3) var(--space-6);font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink);border-bottom:1px solid var(--bg-sunken);text-decoration:none}.topbar-mobile-link:last-child{border-bottom:none}.topbar-mobile-link.active{color:var(--accent);background:var(--accent-soft)}.footer{width:100%;padding:var(--space-6) var(--space-5);border-top:1px solid var(--border);background:var(--bg);align-items:center;gap:var(--space-3);font-size:var(--fs-label);color:var(--ink-mute);flex-wrap:wrap;display:flex}.footer-divider{background:var(--border-strong);width:1px;height:16px;margin:0 var(--space-3);flex-shrink:0;align-self:center}.footer-left{color:var(--ink);letter-spacing:1px;margin-right:auto}.footer-right{gap:var(--space-4);align-items:center;display:flex}.footer-link{font-family:var(--font-pixel);color:var(--ink-dim);text-decoration:none;transition:color .15s}.footer-link:hover{color:var(--accent)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--bg-elevated);background:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:background .15s,transform .15s;display:inline-flex}.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-elevated);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.work-item{padding:var(--space-6);background:var(--bg-elevated);border:2px solid var(--border);border-radius:var(--radius-lg)}.work-item-tag{font-size:var(--fs-label);color:var(--ink-mute);background:var(--bg-sunken);border-radius:var(--radius-sm);letter-spacing:1px;margin-bottom:var(--space-3);padding:2px 8px;display:inline-block}.work-item-name{font-family:var(--font-pixel);font-size:var(--fs-d2);color:var(--ink);letter-spacing:2px;margin-bottom:var(--space-2);font-weight:400}.work-item-kind{font-size:var(--fs-label);color:var(--ink-mute);margin-bottom:var(--space-3)}.work-item-desc{font-size:var(--fs-note);color:var(--ink-dim);max-width:640px;line-height:1.7}.explain{margin-top:var(--space-6);max-width:640px}.explain-fig{flex-direction:column;align-items:stretch;display:flex}.explain-fig svg{display:none}.explain-node{width:100%;padding:var(--space-3);background:var(--bg-sunken);border:2px solid var(--border-strong);border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:2px;display:flex}.explain-node-endpoint{border-color:var(--accent)}.explain-node-endpoint .explain-node-kind{color:var(--accent)}.explain-node-kind{font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-mute)}.explain-node-name{font-size:var(--fs-body);color:var(--ink);text-align:center;line-height:1.3}.explain-hop-label{padding:var(--space-2) 0;font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-mute);text-align:center;white-space:nowrap}.explain-hop-label:before{content:"";width:2px;height:var(--space-4);margin:0 auto var(--space-2);background:var(--accent);display:block}@media (width>=766px){.explain-fig{width:640px;height:165px;display:block;position:relative}.explain-fig svg{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.explain-node{width:150px;height:60px;padding:var(--space-2);justify-content:center;position:absolute}.explain-node:first-of-type{top:0;left:20px}.explain-node:nth-of-type(2){top:105px;left:245px}.explain-node:nth-of-type(3){top:0;left:470px}.explain-hop-label{padding:0;position:absolute;transform:translate(-50%,-50%)}.explain-hop-label:before{display:none}.explain-hop-a{top:96px;left:196px}.explain-hop-b{top:96px;left:444px}}.explain-cap{font-size:var(--fs-note);color:var(--ink-dim);margin-top:var(--space-4);line-height:1.8}.work-more{align-items:center;gap:var(--space-2);margin-top:var(--space-5);cursor:pointer;font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-mute);letter-spacing:1px;background:0 0;border:0;padding:0;display:inline-flex}.work-more:hover,.work-more:focus-visible{color:var(--accent)}.work-more-mark{border-top:4px solid #0000;border-bottom:4px solid #0000;border-left:6px solid;width:0;height:0;transition:transform .15s}.work-more[aria-expanded=true] .work-more-mark{transform:rotate(90deg)}.work-expand{grid-template-rows:0fr;transition:grid-template-rows .24s;display:grid}.work-expand.is-open{grid-template-rows:1fr}.work-expand-in{min-height:0;overflow:hidden}.l-scene{max-width:560px;margin-top:var(--space-5);font-size:var(--fs-body);color:var(--ink);line-height:1.85}.l-scene b{font-weight:600}.l-real{margin-top:var(--space-5)}.l-note{margin-top:var(--space-3);font-size:var(--fs-note);color:var(--ink-dim);line-height:1.8}.l-note b{color:var(--ink);font-weight:600}.real-fig{padding:var(--space-4);background:var(--bg-sunken);border-radius:var(--radius-sm);flex-direction:column;display:flex}.real-fig svg{display:none}.real-node{text-align:center;width:100%;font-size:var(--fs-note);white-space:nowrap;background:var(--bg-elevated);border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 0;line-height:1.3}.real-node-end{border-color:var(--accent)}.real-node-mid{background:0 0;border-style:dashed}.real-hop{padding:var(--space-2) 0;text-align:center;font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-mute);white-space:nowrap}.real-hop:before{content:"";width:2px;height:var(--space-4);margin:0 auto var(--space-2);background:var(--accent);display:block}@media (width>=766px){.real-fig{width:640px;height:88px;padding:0;display:block;position:relative}.real-fig svg{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.real-node{width:96px;position:absolute;top:44px}.real-node:first-of-type{left:24px}.real-node:nth-of-type(3){left:272px}.real-node:nth-of-type(5){left:520px}.real-hop{padding:0;position:absolute;transform:translate(-50%,-50%)}.real-hop:before{display:none}.real-hop:nth-of-type(2){top:22px;left:196px}.real-hop:nth-of-type(4){top:22px;left:444px}}.l-claim{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border)}.l-claim-line{font-family:var(--font-body);font-size:var(--fs-d2);color:var(--ink);font-weight:500;line-height:1.6}.l-claim-sub{margin-top:var(--space-3);font-size:var(--fs-note);color:var(--ink-mute);line-height:1.8}.page-title{font-size:var(--fs-d3);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.page-subtitle{font-size:var(--fs-body);color:var(--ink-dim);margin-bottom:var(--space-8)}.section{margin-bottom:var(--space-12);width:100%;min-width:0}.section-title{font-size:var(--fs-d3);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.section-desc{font-size:var(--fs-note);color:var(--ink-dim);margin-bottom:var(--space-5);max-width:640px;line-height:1.7}.skip-link{top:-100px;left:var(--space-2);z-index:1000;padding:var(--space-2) var(--space-4);font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--bg-elevated);background:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-sm);text-decoration:none;transition:top .15s;position:absolute}.skip-link:focus,.skip-link:focus-visible{top:var(--space-2);color:var(--bg-elevated);outline:none}[data-device=mobile] .skip-link{left:var(--space-2)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.hero{text-align:center;padding:var(--space-8) 0 var(--space-10);flex-direction:column;align-items:center;display:flex}.hero-compact{padding:var(--space-6) 0 var(--space-6)}.hero-kobo-link{cursor:default;border-radius:var(--radius-md);text-decoration:none;display:inline-block}.hero-kobo-link:focus,.hero-kobo-link:focus-visible{outline:none}.hero-kobo{width:80px;height:80px;margin-bottom:var(--space-3);justify-content:center;align-items:center;display:flex}.hero-kobo canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.hero-title{font-family:var(--font-pixel);font-size:var(--fs-hero);color:var(--ink);letter-spacing:4px;margin-bottom:var(--space-3)}.hero-subtitle{font-size:var(--fs-body);color:var(--ink-dim);margin-bottom:var(--space-4);letter-spacing:0}.kobo-display-wrap{margin-bottom:var(--space-8);flex-direction:column;align-items:center;display:flex}.kobo-display{background-color:var(--bg-sunken);border-radius:var(--radius-lg);width:256px;height:256px;margin-bottom:var(--space-4);border:2px solid var(--border);justify-content:center;align-items:center;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.kobo-display:not(.loaded){animation:1.8s ease-in-out infinite kobo-display-breathe}}@keyframes kobo-display-breathe{0%,to{background-color:var(--bg-sunken)}50%{background-color:var(--border)}}.kobo-display canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.kobo-state-info{text-align:center}.kobo-state-name{font-size:var(--fs-d2);color:var(--ink);margin-bottom:var(--space-1);letter-spacing:1px}.kobo-state-desc{font-size:var(--fs-note);color:var(--ink-dim)}.kobo-states-group{margin-bottom:var(--space-6)}.kobo-states-group-inside{margin-top:var(--space-3)}.kobo-states-label{font-size:var(--fs-label);color:var(--ink-mute);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-3)}.kobo-extras-details{margin-bottom:var(--space-6)}.kobo-extras-summary{cursor:pointer;font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-dim);letter-spacing:1px;padding:var(--space-2) 0;-webkit-user-select:none;user-select:none;list-style:none;transition:color .15s;display:inline-block}.kobo-extras-summary::-webkit-details-marker{display:none}.kobo-extras-summary:before{content:"▸ ";margin-right:2px;transition:transform .15s;display:inline-block}.kobo-extras-details[open] .kobo-extras-summary:before{content:"▾ "}.kobo-extras-summary:hover{color:var(--accent)}.kobo-viewer{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.kobo-state-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--bg-elevated);border:2px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-pixel);color:var(--ink);cursor:pointer;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s;display:flex}.kobo-state-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.kobo-state-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}.kobo-state-btn-icon{width:32px;height:32px;display:block}.kobo-state-btn-icon canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.kobo-state-btn-label{font-size:var(--fs-d1);letter-spacing:1px}.principles{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(2,1fr);max-width:540px;margin-left:auto;margin-right:auto;display:grid}.principle-card{background:var(--bg-elevated);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}.principle-card:hover{border-color:var(--ink-dim);box-shadow:var(--shadow-hard);transform:translateY(-2px)}.principle-title{font-size:var(--fs-d2);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.principle-desc{font-size:var(--fs-note);color:var(--ink-dim);line-height:1.7}.contact-list{gap:var(--space-3);font-size:var(--fs-body);flex-direction:column;list-style:none;display:flex}.contact-list a{color:var(--ink);align-items:center;gap:var(--space-2);text-decoration:none;display:inline-flex}.contact-list a:hover{color:var(--accent)}.contact-label{color:var(--ink-mute);font-size:var(--fs-label);letter-spacing:1px;margin-right:var(--space-2);text-transform:uppercase}.not-found{text-align:center;padding:var(--space-12) 0;flex-direction:column;align-items:center;display:flex}.not-found-kobo{width:128px;height:128px;margin-bottom:var(--space-5);justify-content:center;align-items:center;display:flex}.not-found-kobo canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.not-found-code{font-family:var(--font-pixel);color:var(--accent);letter-spacing:8px;margin-bottom:var(--space-3);font-size:96px;line-height:1}.not-found-title{font-size:var(--fs-d3);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.not-found-desc{font-size:var(--fs-note);color:var(--ink-dim);margin-bottom:var(--space-6);max-width:420px}.privacy-section{margin-bottom:var(--space-8)}.privacy-section .section-title{font-size:var(--fs-d2);margin-bottom:var(--space-3);letter-spacing:1px}.privacy-list{gap:var(--space-2);flex-direction:column;padding-left:0;list-style:none;display:flex}.privacy-list li{font-size:var(--fs-body);color:var(--ink-dim);line-height:1.7}.privacy-list code{font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink);background:var(--bg-sunken);border-radius:var(--radius-sm);padding:1px 6px}.privacy-list a{font-family:var(--font-pixel);font-size:var(--fs-d1);letter-spacing:1px}.privacy-meta{font-size:var(--fs-label);color:var(--ink-mute);letter-spacing:1px;margin-top:var(--space-10);text-align:right}.section+.section{border-top:1px solid var(--border);padding-top:var(--space-6)}.page-title,.section-title,.principle-title{letter-spacing:0}.principle-title,.kobo-state-name,.kobo-state-btn-label{font-family:var(--font-pixel)}.page-subtitle{color:var(--ink-mute);margin-top:var(--space-5);margin-bottom:var(--space-6)}.about-story{font-size:var(--fs-body);color:var(--ink);margin-bottom:var(--space-3);line-height:1.75}.about-cta{font-size:var(--fs-note);color:var(--ink-mute);margin-top:var(--space-5);margin-bottom:var(--space-10)}.about-cta a{font-family:var(--font-pixel);color:var(--accent);border-bottom:1px solid;padding-bottom:1px;text-decoration:none}.about-cta a:hover{color:var(--accent-hover)}.section{margin-bottom:var(--space-10)}.section-title{margin-bottom:var(--space-4)}.section-title[data-count]{justify-content:space-between;align-items:baseline;display:flex}.section-title[data-count]:after{content:attr(data-count);font-family:var(--font-pixel);font-size:var(--fs-d1);color:var(--ink-mute);letter-spacing:1px}.about-story,.page-subtitle,.about-cta{max-width:560px}[data-device=mobile] .topbar{height:48px;padding:0 var(--space-4)}[data-device=mobile] body{padding-top:48px}[data-device=mobile] .topbar-nav,[data-device=mobile] .topbar-divider{display:none}[data-device=mobile] .topbar-menu-btn{display:flex}[data-device=mobile] .topbar-logo{font-size:var(--fs-d1)}[data-device=mobile] .page-main{padding:var(--space-6) var(--space-4) calc(var(--space-12) + 80px)}[data-device=mobile] .page-title{font-size:var(--fs-d3);letter-spacing:1px}[data-device=mobile] .section{margin-bottom:var(--space-8)}[data-device=mobile] .card{padding:var(--space-5)}[data-device=mobile] .placeholder-card{padding:var(--space-6) var(--space-4)}[data-device=mobile] .footer{padding:var(--space-5) var(--space-4);align-items:flex-start;gap:var(--space-2);flex-direction:column}[data-device=mobile] .footer-left{margin-right:0}[data-device=mobile] .footer-divider{width:16px;height:1px;margin:var(--space-1) 0}[data-device=mobile] .footer-right{gap:var(--space-3);flex-wrap:wrap}[data-device=mobile] .kobo-viewer{gap:var(--space-2);grid-template-columns:repeat(2,1fr)}[data-device=mobile] .kobo-state-btn{padding:var(--space-2);gap:var(--space-1)}[data-device=mobile] .kobo-state-btn-icon{width:28px;height:28px}[data-device=mobile] .kobo-state-btn-label{font-size:var(--fs-d1)}[data-device=mobile] .kobo-display{width:200px;height:200px}[data-device=mobile] .hero{padding:var(--space-6) 0}[data-device=mobile] .hero-kobo{width:100px;height:100px}[data-device=mobile] .hero-title{font-size:var(--fs-d3);letter-spacing:0}[data-device=mobile] .hero-subtitle{font-size:var(--fs-note);margin-bottom:var(--space-6)}[data-device=mobile] .principles,[data-device=mobile] .exploring-grid{gap:var(--space-3);grid-template-columns:1fr}@supports (padding:max(0px)){[data-device=mobile] .topbar{padding-left:max(var(--space-4), env(safe-area-inset-left));padding-right:max(var(--space-4), env(safe-area-inset-right))}[data-device=mobile] .page-main{padding-top:max(var(--space-6), env(safe-area-inset-top));padding-bottom:max(calc(var(--space-12) + 80px), env(safe-area-inset-bottom))}[data-device=mobile] .footer{padding-bottom:max(var(--space-5), env(safe-area-inset-bottom))}}