@font-face{font-family:Zpix;src:url(/fonts/zpix.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--bg:#fafaf7;--bg-elevated:#fff;--bg-sunken:#f0f0e8;--ink:#2c2c3e;--ink-dim:#6b6b7b;--ink-mute:#9b9bab;--border:#e8e8e0;--border-strong:#d4d4cc;--accent:#3a86ff;--accent-hover:#2c6fd9;--accent-soft:#e0eaff;--coral:#ff7a5c;--pink:#ff9eb5;--deep-pink:#ff5c8a;--blue:#4dabf7;--font-pixel:"Zpix", "Courier New", monospace;--font-body:"Zpix", "Courier New", monospace;--fs-xs:clamp(10px, .8vw, 12px);--fs-sm:clamp(11px, .95vw, 14px);--fs-md:clamp(13px, 1.1vw, 17px);--fs-lg:clamp(16px, 1.5vw, 21px);--fs-xl:clamp(20px, 2vw, 26px);--fs-2xl:clamp(28px, 3vw, 44px);--fs-hero:clamp(40px, 6vw, 80px);--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}*{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-md);-webkit-font-smoothing:none;-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-md);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)}.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%}.container-wide{width:var(--container-w-wide);max-width:100%}.topbar{z-index:100;width:100%;height:56px;padding:0 var(--space-6);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#fafaf7d9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.topbar-logo{font-family:var(--font-pixel);font-size:var(--fs-lg);color:var(--ink);letter-spacing:2px;text-decoration:none}.topbar-logo:hover{color:var(--accent)}.topbar-nav{align-items:center;gap:var(--space-5);display:flex}.topbar-link{font-size:var(--fs-sm);color:var(--ink-dim);padding:var(--space-2) 0;border-bottom:1px solid #0000;text-decoration:none;transition:color .15s,border-color .15s}.topbar-link:hover{color:var(--ink)}.topbar-link.active{color:var(--accent);border-bottom-color:var(--accent)}.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;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-size:var(--fs-md);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);justify-content:space-between;align-items:center;gap:var(--space-3);font-size:var(--fs-xs);color:var(--ink-mute);flex-wrap:wrap;display:flex}.footer-left{letter-spacing:1px}.footer-right{gap:var(--space-4);align-items:center;display:flex}.footer-link{color:var(--ink-dim);text-decoration:none}.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-md);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)}.btn-outline{color:var(--accent);background:0 0}.btn-outline:hover{color:var(--bg-elevated);background:var(--accent)}.btn-secondary{color:var(--ink);background:var(--bg-elevated);border-color:var(--border)}.btn-secondary:hover{border-color:var(--ink);background:var(--bg-elevated);color:var(--ink)}.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow .2s,transform .2s}.card:hover{box-shadow:var(--shadow-md)}.card-title{font-size:var(--fs-xl);color:var(--ink);margin-bottom:var(--space-2)}.card-desc{font-size:var(--fs-sm);color:var(--ink-dim);margin-bottom:var(--space-4);line-height:1.6}.card-meta{font-size:var(--fs-xs);color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm);margin-bottom:var(--space-3);letter-spacing:1px;padding:2px 8px;display:inline-block}.placeholder-card{border:2px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;color:var(--ink-mute);background:0 0}.placeholder-card-label{font-size:var(--fs-xs);letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--space-2)}.placeholder-card-desc{font-size:var(--fs-sm);color:var(--ink-dim)}.page-title{font-size:var(--fs-2xl);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.page-subtitle{font-size:var(--fs-md);color:var(--ink-dim);margin-bottom:var(--space-8)}.section{margin-bottom:var(--space-12)}.section-title{font-size:var(--fs-xl);color:var(--ink);margin-bottom:var(--space-3);letter-spacing:2px}.section-desc{font-size:var(--fs-sm);color:var(--ink-dim);margin-bottom:var(--space-5);max-width:640px;line-height:1.7}.exploring-grid{gap:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}.exploring-card{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-elevated);transition:border-color .15s,transform .15s}.exploring-card:hover{border-color:var(--accent);transform:translateY(-2px)}.exploring-tag{font-size:var(--fs-xs);color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm);letter-spacing:1px;margin-bottom:var(--space-3);padding:2px 8px;display:inline-block}.exploring-name{font-family:var(--font-pixel);font-size:var(--fs-md);color:var(--ink);letter-spacing:1px}.works-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}.work-card{flex-direction:column;display:flex}.work-card .card-meta{align-self:flex-start}.work-card-actions{margin-top:var(--space-4);gap:var(--space-3);align-items:center;display:flex}.side-projects{margin-top:var(--space-10);font-size:var(--fs-xs);color:var(--ink-mute);border-top:1px dashed var(--border);padding-top:var(--space-4)}.side-projects summary{cursor:pointer;letter-spacing:2px;text-transform:uppercase;-webkit-user-select:none;user-select:none;padding:var(--space-2) 0;outline:none;list-style:none;transition:color .15s;display:inline-block}.side-projects summary::-webkit-details-marker{display:none}.side-projects summary:before{content:"▸ ";margin-right:2px;transition:transform .15s;display:inline-block}.side-projects[open] summary:before{content:"▾ "}.side-projects summary:hover{color:var(--ink-dim)}.side-projects-content{padding:var(--space-3) var(--space-2) var(--space-2);gap:var(--space-3);font-size:var(--fs-sm);flex-wrap:wrap;align-items:baseline;display:flex}.side-projects-content a{color:var(--ink-dim);font-family:var(--font-pixel);letter-spacing:1px;text-decoration:none}.side-projects-content a:hover{color:var(--accent)}.side-projects-hint{color:var(--ink-mute)}.arrow-link{align-items:center;gap:var(--space-2);font-size:var(--fs-md);color:var(--accent);font-weight:500;text-decoration:none;display:inline-flex}.arrow-link:after{content:"→";transition:transform .15s}.arrow-link:hover:after{transform:translate(2px)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hero{text-align:center;padding:var(--space-8) 0 var(--space-10);flex-direction:column;align-items:center;display:flex}.hero-kobo{width:240px;height:240px;margin-bottom:var(--space-6);justify-content:center;align-items:center;display:flex}.hero-kobo canvas{image-rendering:pixelated;image-rendering:crisp-edges}.hero-title{font-family:var(--font-pixel);font-size:var(--fs-hero);color:var(--ink);letter-spacing:8px;margin-bottom:var(--space-3)}.hero-subtitle{font-size:var(--fs-md);color:var(--ink-dim);margin-bottom:var(--space-8);letter-spacing:2px}.hero-cta{font-size:var(--fs-md);padding:var(--space-3) var(--space-6)}.kobo-intro{text-align:center;margin-bottom:var(--space-8)}.kobo-intro h1{font-size:var(--fs-2xl);letter-spacing:2px;margin-bottom:var(--space-2)}.kobo-intro p{color:var(--ink-dim);font-size:var(--fs-sm)}.kobo-display-wrap{margin-bottom:var(--space-8);flex-direction:column;align-items:center;display:flex}.kobo-display{background:var(--bg-sunken);border-radius:var(--radius-lg);width:256px;height:256px;margin-bottom:var(--space-4);border:1px solid var(--border);justify-content:center;align-items:center;display:flex}.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-lg);color:var(--ink);margin-bottom:var(--space-1);letter-spacing:1px}.kobo-state-desc{font-size:var(--fs-sm);color:var(--ink-dim)}.kobo-states-group{margin-bottom:var(--space-6)}.kobo-states-label{font-size:var(--fs-xs);color:var(--ink-mute);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-3)}.kobo-viewer{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.kobo-state-btn{padding:var(--space-3) var(--space-2);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-pixel);font-size:var(--fs-sm);color:var(--ink);cursor:pointer;transition:all .15s}.kobo-state-btn:hover{border-color:var(--accent);color:var(--accent)}.kobo-state-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg-elevated)}.product-card{margin-bottom:var(--space-5);flex-direction:column;display:flex}.product-card .card-meta{align-self:flex-start}.product-card .card-title{font-size:var(--fs-xl)}.product-card-actions{margin-top:var(--space-4);gap:var(--space-3);align-items:center;display:flex}.about-story{font-size:var(--fs-md);color:var(--ink-dim);margin-bottom:var(--space-8);line-height:1.8}.principles{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}.principle-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;transition:transform .2s,box-shadow .2s}.principle-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.principle-icon{width:64px;height:64px;margin:0 auto var(--space-3);justify-content:center;align-items:center;display:flex}.principle-icon canvas{image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:100%}.principle-title{font-size:var(--fs-lg);color:var(--ink);margin-bottom:var(--space-2);letter-spacing:1px}.principle-desc{font-size:var(--fs-sm);color:var(--ink-dim);line-height:1.6}.contact-list{gap:var(--space-3);font-size:var(--fs-md);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-xs);letter-spacing:1px;margin-right:var(--space-2);text-transform:uppercase}[data-device=mobile] .topbar{height:48px;padding:0 var(--space-4)}[data-device=mobile] .topbar-nav{display:none}[data-device=mobile] .topbar-menu-btn{display:flex}[data-device=mobile] .topbar-logo{font-size:var(--fs-md)}[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-xl);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-right{gap:var(--space-3);flex-wrap:wrap}[data-device=mobile] .kobo-viewer{gap:var(--space-2)!important;grid-template-columns:repeat(2,1fr)!important}[data-device=mobile] .kobo-state-btn{padding:var(--space-2) var(--space-2)!important;font-size:var(--fs-xs)!important}[data-device=mobile] .kobo-display{width:200px!important;height:200px!important}[data-device=mobile] .hero{padding:var(--space-6) 0}[data-device=mobile] .hero-kobo{width:160px!important;height:160px!important}[data-device=mobile] .hero-title{letter-spacing:2px;font-size:clamp(32px,8vw,48px)!important}[data-device=mobile] .hero-subtitle{font-size:var(--fs-sm);margin-bottom:var(--space-6)!important}[data-device=mobile] .principles,[data-device=mobile] .exploring-grid{gap:var(--space-3)!important;grid-template-columns:1fr!important}@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))}}