:root{color-scheme:light;--color-bg:#faf8f4;--color-surface:#fff;--color-surface-muted:#f4f1ec;--color-surface-deep:#eee9e1;--color-text:#1d1d1f;--color-text-secondary:#626266;--color-text-tertiary:#6f6b66;--color-border:#e7e2da;--color-border-strong:#d8d1c7;--color-brand:#e87932;--color-brand-hover:#b6541f;--color-brand-soft:#fff0e5;--color-brand-softer:#fff7f1;--color-blue:#3978e8;--color-blue-soft:#edf4ff;--color-green:#2d8b64;--color-green-soft:#eaf7f1;--color-yellow:#a76b12;--color-yellow-soft:#fff5df;--color-purple:#7655a8;--color-purple-soft:#f3effb;--color-overlay:#1d1d1f75;--color-white-overlay:#ffffffd6;--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-size-xs:.875rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-md:1.0625rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.75rem;--line-height-tight:1.16;--line-height-heading:1.28;--line-height-body:1.72;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--radius-sm:.75rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-xl:1.625rem;--radius-modal:1.375rem;--radius-pill:999px;--shadow-soft:0 18px 48px #26201a12;--shadow-modal:0 28px 80px #1d1d1f33;--shadow-header:0 1px 0 #40342914;--container-max:73.75rem;--reading-max:72ch;--page-gutter:1.25rem;--header-height:4.25rem;--section-space:5rem;--control-min:2.75rem;--motion-fast:.18s;--motion-base:.26s;--motion-slow:.32s;--ease-out:cubic-bezier(.22, 1, .36, 1)}@media (width>=640px){:root{--page-gutter:1.75rem;--section-space:6rem}}@media (width>=768px){:root{--page-gutter:2.5rem;--header-height:4.5rem;--section-space:7rem}}@media (width>=1024px){:root{--page-gutter:3rem;--section-space:8rem}}@media (width>=1280px){:root{--page-gutter:3.5rem}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;min-width:20rem;scroll-padding-top:calc(var(--header-height) + var(--space-4));background:var(--color-bg)}body{background:var(--color-bg);min-width:20rem;color:var(--color-text);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-body);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}body.menu-open{overflow:hidden}main{min-height:70svh}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}p,h1,h2,h3,dl,dd{margin:0}h1,h2,h3{letter-spacing:-.035em;font-weight:650;line-height:var(--line-height-tight);text-wrap:balance}p{text-wrap:pretty}[hidden]{display:none!important}:focus-visible{outline:3px solid color-mix(in srgb, var(--color-brand) 78%, white);outline-offset:3px}::selection{background:var(--color-brand-soft);color:var(--color-text)}.container,.narrow-container{width:min(calc(100% - var(--page-gutter) * 2), var(--container-max));margin-inline:auto}.narrow-container{max-width:50rem}.skip-link{z-index:1000;top:var(--space-3);left:var(--space-3);min-height:var(--control-min);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--color-text);color:var(--color-surface);font-weight:650;position:fixed;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.eyebrow{color:var(--color-brand-hover);font-size:var(--font-size-xs);letter-spacing:.16em;font-weight:750;line-height:1.4}.text-link{min-height:var(--control-min);align-items:center;gap:var(--space-2);color:var(--color-brand-hover);font-size:var(--font-size-base);font-weight:650;display:inline-flex}.text-link span,.card-arrow,.tutorial-card-meta i{transition:transform var(--motion-fast) var(--ease-out)}.button{min-height:var(--control-min);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);transition:background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);border:1px solid #0000;justify-content:center;align-items:center;font-weight:650;line-height:1.2;display:inline-flex}.button-primary{background:var(--color-brand-hover);color:var(--color-surface)}.button-secondary{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.site-header{z-index:100;height:var(--header-height);background:color-mix(in srgb, var(--color-bg) 87%, transparent);box-shadow:var(--shadow-header);backdrop-filter:blur(18px)saturate(140%);border-bottom:1px solid #0000;position:sticky;top:0}.site-nav{justify-content:space-between;align-items:center;height:100%;display:flex}.brand-mark{min-height:var(--control-min);color:var(--color-text);font-size:var(--font-size-lg);letter-spacing:-.045em;align-items:center;font-weight:700;line-height:1;display:inline-flex;position:relative}.brand-mark strong{color:var(--color-brand-hover);font-weight:800}.brand-mark i{background:var(--color-brand);border-radius:50%;width:.32rem;height:.32rem;margin-top:-1.25rem;margin-left:.14rem}.desktop-nav{display:none}.menu-toggle{width:var(--control-min);height:var(--control-min);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);place-content:center;gap:.33rem;padding:0;display:grid;position:relative}.menu-toggle span{width:1.15rem;height:1.5px;transition:transform var(--motion-fast) var(--ease-out);background:currentColor;display:block}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(.25rem)rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-.25rem)rotate(-45deg)}.mobile-menu{inset:var(--header-height) 0 auto;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-bg) 96%, transparent);box-shadow:var(--shadow-soft);backdrop-filter:blur(18px);position:absolute}.mobile-menu nav{padding-block:var(--space-3) var(--space-5);display:grid}.mobile-menu nav>a{border-bottom:1px solid var(--color-border);min-height:3.5rem;font-size:var(--font-size-lg);justify-content:space-between;align-items:center;font-weight:600;display:flex}.mobile-menu nav>a:last-of-type{border-bottom:0}.mobile-menu a[aria-current=page]{color:var(--color-brand-hover)}.preview-banner{min-height:var(--control-min);justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--page-gutter);background:var(--color-text);color:var(--color-surface);font-size:var(--font-size-sm);text-align:center;display:flex}.preview-banner strong{padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-brand)}.hero-section{min-height:calc(88svh - var(--header-height));padding:var(--space-10) 0 var(--space-8);background:radial-gradient(circle at 50% 18%, var(--color-surface) 0, transparent 43%), var(--color-bg);place-items:center;display:grid;overflow:hidden}.hero-inner{text-align:center;flex-direction:column;align-items:center;display:flex}.hero-avatar{width:clamp(8.25rem,31vw,11.5rem);height:clamp(8.25rem,31vw,11.5rem);margin-bottom:var(--space-5);object-fit:contain;animation:hero-enter var(--motion-slow) var(--ease-out) both}.hero-eyebrow{min-height:2rem;padding:var(--space-1) var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);animation:hero-enter var(--motion-slow) 60ms var(--ease-out) both;align-items:center;font-weight:600;display:inline-flex}.hero-inner h1{max-width:12em;animation:hero-enter var(--motion-slow) .1s var(--ease-out) both;font-size:clamp(2.5rem,1.9rem + 2.6vw,4rem)}.hero-subtitle{max-width:16em;margin-top:var(--space-2);color:var(--color-brand-hover);letter-spacing:-.055em;text-wrap:balance;animation:hero-enter var(--motion-slow) .14s var(--ease-out) both;font-size:clamp(1.75rem,1.45rem + 1.25vw,2.625rem);font-weight:580;line-height:1.16}.hero-description{max-width:35rem;margin-top:var(--space-6);color:var(--color-text-secondary);font-size:var(--font-size-base);animation:hero-enter var(--motion-slow) .18s var(--ease-out) both;flex-direction:column;align-items:center;line-height:1.75;display:flex}.scroll-cue{align-items:center;gap:var(--space-2);color:var(--color-text-tertiary);font-size:var(--font-size-xs);letter-spacing:.08em;animation:hero-enter var(--motion-slow) .22s var(--ease-out) both;flex-direction:column;margin-top:clamp(1.5rem,6svh,3.75rem);display:flex}.scroll-cue i{background:linear-gradient(var(--color-brand), transparent);width:1px;height:1.75rem}@keyframes hero-enter{0%{opacity:0;transform:translateY(.6rem)}}.section{padding-block:var(--section-space)}.section-heading{max-width:42rem;margin-bottom:var(--space-10)}.section-heading.is-center{text-align:center;margin-inline:auto}.section-heading .eyebrow{margin-bottom:var(--space-3)}.section-heading h2,.follow-layout h2{font-size:clamp(2rem,1.625rem + 1.55vw,3rem)}.section-description{margin-top:var(--space-4);color:var(--color-text-secondary);font-size:var(--font-size-md)}.section-products{scroll-margin-top:var(--header-height);background:var(--color-surface)}.product-grid{gap:var(--space-4);margin-inline:calc(var(--page-gutter) * -1);padding:var(--space-1) var(--page-gutter) var(--space-5);scroll-padding-inline:var(--page-gutter);scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;touch-action:pan-x pan-y;display:flex;overflow-x:auto}.product-grid::-webkit-scrollbar{display:none}.product-slide{scroll-snap-align:start;flex:0 0 min(86vw,23rem)}.product-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);width:100%;height:100%;min-height:31.5rem;box-shadow:none;color:var(--color-text);cursor:pointer;text-align:left;transition:transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);flex-direction:column;padding:0;display:flex;position:relative;overflow:hidden}.product-card-trigger{border-radius:inherit;cursor:pointer;background:0 0;border:0;position:absolute;inset:0}.product-card-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.product-visual{min-height:15rem;padding:var(--space-5);border-bottom:1px solid var(--color-border);place-items:center;display:grid;position:relative;overflow:hidden}.product-real-image{background:var(--color-surface-muted);padding:0}.product-real-image img{object-fit:cover;width:100%;height:100%}.product-visual-jobs{background:linear-gradient(145deg, var(--color-blue-soft), var(--color-surface) 78%)}.mock-window{border:1px solid color-mix(in srgb, var(--color-blue) 15%, var(--color-border));border-radius:var(--radius-sm);background:var(--color-surface);width:100%;max-width:20rem;overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 1rem 2.5rem #3978e81f}.mock-window-bar{align-items:center;gap:var(--space-1);height:1.7rem;padding-inline:var(--space-3);border-bottom:1px solid var(--color-border);background:var(--color-surface-muted);display:flex}.mock-window-bar span{background:var(--color-border-strong);border-radius:50%;width:.35rem;height:.35rem}.jobs-layout{grid-template-columns:.72fr 1.5fr;display:grid}.jobs-filters{gap:var(--space-2);min-height:10rem;padding:var(--space-3);border-right:1px solid var(--color-border);background:var(--color-blue-soft);flex-direction:column;display:flex}.mock-line{border-radius:var(--radius-pill);background:var(--color-border-strong);width:40%;height:.36rem;display:block}.mock-line.is-long{width:85%;margin-bottom:var(--space-2);background:color-mix(in srgb, var(--color-blue) 40%, white)}.mock-line.is-medium{width:68%}.mock-line.is-short{width:43%}.mock-pill{border-radius:var(--radius-pill);background:var(--color-surface);width:75%;height:1rem}.mock-pill.is-blue{background:color-mix(in srgb, var(--color-blue) 17%, white)}.jobs-results{gap:var(--space-2);padding:var(--space-3);display:grid}.mock-position{gap:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--space-2);flex-direction:column;display:flex;position:relative}.mock-position strong{top:var(--space-2);right:var(--space-2);color:var(--color-blue);letter-spacing:0;font-size:.52rem;position:absolute}.product-visual-game{background:radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--color-brand) 15%, white), transparent 30%), var(--color-brand-softer)}.game-scene{width:100%;max-width:19rem;padding:var(--space-5);border:1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border));border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:0 1rem 2.5rem #a85e261a}.game-day{margin-bottom:var(--space-4);color:var(--color-brand-hover);font-size:var(--font-size-xs);letter-spacing:.05em;font-weight:700;display:inline-block}.game-scene p{margin-bottom:var(--space-4);font-size:var(--font-size-sm);font-weight:650;line-height:1.55}.game-choice{padding:var(--space-2) var(--space-3);border:1px solid var(--color-brand);border-radius:var(--space-2);color:var(--color-brand-hover);font-size:var(--font-size-xs)}.game-choice+.game-choice{margin-top:var(--space-2)}.game-choice.is-muted{border-color:var(--color-border);color:var(--color-text-secondary)}.product-visual-todo{gap:var(--space-5);background:linear-gradient(145deg, var(--color-green-soft), var(--color-surface));grid-template-columns:auto 1fr}.todo-timer{border:.42rem solid color-mix(in srgb, var(--color-green) 26%, white);border-top-color:var(--color-green);background:var(--color-surface);text-align:center;border-radius:50%;place-content:center;width:7.25rem;height:7.25rem;display:grid;transform:rotate(-4deg)}.todo-timer span{color:var(--color-green);font-size:var(--font-size-xl);letter-spacing:-.04em;font-weight:720}.todo-timer small{color:var(--color-text-tertiary);font-size:.58rem}.todo-list{gap:var(--space-3);font-size:var(--font-size-xs);display:grid}.todo-list div{align-items:center;gap:var(--space-2);display:flex}.todo-check{border:1px solid color-mix(in srgb, var(--color-green) 35%, var(--color-border));width:1.2rem;height:1.2rem;color:var(--color-surface);border-radius:.38rem;flex:none;place-content:center;display:grid}.todo-check.is-done{border-color:var(--color-green);background:var(--color-green)}.product-visual-test{align-items:stretch;gap:var(--space-4);background:linear-gradient(145deg, var(--color-purple-soft), var(--color-surface));flex-direction:column;display:flex}.fit-score{align-items:center;gap:var(--space-4);padding:var(--space-4);border:1px solid color-mix(in srgb, var(--color-purple) 18%, var(--color-border));border-radius:var(--radius-lg);background:var(--color-surface);display:flex}.fit-score-ring{border:.3rem solid color-mix(in srgb, var(--color-purple) 30%, white);border-top-color:var(--color-purple);width:4rem;height:4rem;color:var(--color-purple);font-size:var(--font-size-lg);border-radius:50%;flex:none;place-content:center;font-weight:750;display:grid}.fit-score div{flex-direction:column;display:flex}.fit-score small{color:var(--color-text-tertiary);font-size:var(--font-size-xs)}.fit-score strong{font-size:var(--font-size-base)}.fit-bars{gap:var(--space-2);display:grid}.fit-bars span{z-index:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-surface);font-size:var(--font-size-xs);position:relative;overflow:hidden}.fit-bars span:before{z-index:-1;width:var(--score);background:color-mix(in srgb, var(--color-purple) 18%, white);content:"";position:absolute;inset:0 auto 0 0}.product-card-copy{padding:var(--space-5);flex-direction:column;flex:1;display:flex}.status-badge,.access-badge,.publish-badge,.tutorial-category,.recommended-label{width:fit-content;min-height:1.7rem;padding:0 var(--space-2);border-radius:var(--radius-pill);font-size:var(--font-size-xs);align-items:center;font-weight:700;line-height:1.2;display:inline-flex}.status-badge{background:var(--color-surface-muted);color:var(--color-text-secondary);gap:.4rem}.status-badge>span{background:currentColor;border-radius:50%;width:.4rem;height:.4rem}.status-badge[data-status=live]{background:var(--color-green-soft);color:var(--color-green)}.status-badge[data-status=comingSoon]{background:var(--color-brand-soft);color:#b4511e}.status-badge[data-status=inDevelopment]{background:var(--color-blue-soft);color:var(--color-blue)}.status-badge[data-status=planned]{background:var(--color-purple-soft);color:var(--color-purple)}.product-card-title-row{justify-content:space-between;align-items:start;gap:var(--space-4);margin-top:var(--space-4);display:flex}.product-card h3{font-size:var(--font-size-xl)}.card-arrow{background:var(--color-surface-muted);width:2rem;height:2rem;color:var(--color-brand-hover);font-size:var(--font-size-base);border-radius:50%;flex:none;place-content:center;display:grid}.product-card-copy>p{margin-top:var(--space-3);color:var(--color-text-secondary);line-height:1.65}.product-pagination{margin-top:var(--space-2);justify-content:center;display:flex}.product-pagination button{width:var(--control-min);height:var(--control-min);cursor:pointer;background:0 0;border:0;place-content:center;padding:0;display:grid}.product-pagination button span{border-radius:var(--radius-pill);background:var(--color-border-strong);width:.42rem;height:.42rem;transition:width var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)}.product-pagination button[aria-current=true] span{background:var(--color-brand);width:1.35rem}.section-after-link{align-items:flex-start;gap:var(--space-1);margin-top:var(--space-8);color:var(--color-text-secondary);flex-direction:column;display:flex}.modal-backdrop{z-index:500;width:100%;max-width:none;height:100%;max-height:none;padding:var(--space-5);animation:backdrop-in var(--motion-fast) var(--ease-out);background:0 0;border:0;place-items:center;display:grid;position:fixed;inset:0;overflow-y:auto}.modal-backdrop:not([open]){display:none}.modal-backdrop::backdrop{background:var(--color-overlay);animation:backdrop-in var(--motion-fast) var(--ease-out)}body:has(.modal-backdrop[open]){overflow:hidden}.modal-panel{width:min(100%,28rem);padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-modal);background:var(--color-surface);box-shadow:var(--shadow-modal);animation:modal-in var(--motion-base) var(--ease-out);position:relative}.modal-close{top:var(--space-3);right:var(--space-3);width:var(--control-min);height:var(--control-min);background:var(--color-surface-muted);color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-xl);border:0;border-radius:50%;place-content:center;padding:0;line-height:1;display:grid;position:absolute}.modal-status-dot{width:.6rem;height:.6rem;margin-bottom:var(--space-4);background:var(--color-brand);box-shadow:0 0 0 .45rem var(--color-brand-soft);border-radius:50%}.modal-panel h2{padding-right:var(--space-8);font-size:var(--font-size-2xl)}.modal-panel>p{margin-top:var(--space-4);color:var(--color-text-secondary)}.modal-confirm{width:100%;margin-top:var(--space-6);cursor:pointer}.qr-code-image{width:min(100%,15rem);margin:var(--space-6) auto 0;border:1px solid var(--color-border);border-radius:var(--radius-md)}@keyframes backdrop-in{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:scale(.97)translateY(.5rem)}}.section-recent{background:var(--color-bg)}.recent-work-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);display:grid;overflow:hidden}.recent-work-visual{min-height:22rem;padding:var(--space-6);background:radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--color-brand) 18%, white), transparent 28%), var(--color-brand-softer)}.recent-work-image{padding:0}.recent-work-image img{object-fit:cover;width:100%;height:100%}.recent-scene-top{color:var(--color-brand-hover);font-size:var(--font-size-xs);justify-content:space-between;font-weight:700;display:flex}.recent-character{align-items:center;gap:var(--space-3);margin-top:var(--space-8);display:flex}.recent-character i{border:.3rem solid var(--color-surface);background:radial-gradient(circle at 50% 42%, var(--color-text) 0 19%, transparent 20%), var(--color-brand);width:2.5rem;height:2.5rem;box-shadow:0 0 0 1px var(--color-border);border-radius:50%;display:block}.recent-character span{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.recent-work-visual>p{max-width:24rem;margin-top:var(--space-5);font-size:var(--font-size-lg);font-weight:650;line-height:1.55}.recent-choice{align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);display:flex}.recent-choice b{background:var(--color-surface-muted);width:1.5rem;height:1.5rem;font-size:var(--font-size-xs);border-radius:50%;flex:none;place-content:center;display:grid}.recent-choice.is-active{border-color:var(--color-brand);color:var(--color-text)}.recent-choice.is-active b{background:var(--color-brand-hover);color:var(--color-surface)}.recent-work-copy{padding:var(--space-8) var(--space-6);flex-direction:column;justify-content:center;display:flex}.recent-work-copy h3{margin-top:var(--space-5);font-size:clamp(1.75rem,7vw,2.75rem)}.recent-work-copy>p{margin-top:var(--space-4);color:var(--color-text-secondary);font-size:var(--font-size-md)}.quiet-note{margin-top:var(--space-6);color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.section-tutorials{background:var(--color-surface)}.section-heading-row{justify-content:space-between;align-items:end;gap:var(--space-6);display:flex}.desktop-section-link{margin-bottom:var(--space-10);display:none}.tutorial-grid{gap:var(--space-4);display:grid}.tutorial-card{min-width:0}.tutorial-card>a{min-height:19.5rem;padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);transition:transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);flex-direction:column;display:flex}.tutorial-card-top,.tutorial-labels{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.tutorial-labels{justify-content:flex-end}.tutorial-category{background:var(--color-surface-muted);color:var(--color-text-secondary)}.access-badge{background:var(--color-green-soft);color:#277d59}.access-badge.is-member{background:var(--color-purple-soft);color:var(--color-purple)}.publish-badge{background:var(--color-brand-soft);color:#b4511e}.tutorial-card h3{margin-top:var(--space-8);font-size:var(--font-size-xl);line-height:var(--line-height-heading)}.tutorial-card>a>p{margin-top:var(--space-3);color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.tutorial-card-meta{align-items:center;gap:var(--space-3);padding-top:var(--space-6);color:var(--color-text-tertiary);font-size:var(--font-size-xs);grid-template-columns:auto 1fr auto;margin-top:auto;display:grid}.tutorial-card-meta time{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tutorial-card-meta i{color:var(--color-brand-hover);font-size:var(--font-size-base);font-style:normal}.mobile-section-link{margin-top:var(--space-6)}.section-about-home{background:var(--color-bg)}.profile-intro{gap:var(--space-8);padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);display:grid}.profile-person{align-items:center;gap:var(--space-5);display:flex}.profile-person img{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);object-fit:contain;flex:none;width:6rem;height:6rem}.profile-person :is(h2,h3){font-size:var(--font-size-2xl)}.profile-person p{margin-top:var(--space-1);color:var(--color-text-secondary)}.profile-bio{color:var(--color-text-secondary);font-size:var(--font-size-md)}.profile-bio span{display:block}.metrics-grid{gap:var(--space-4);margin-top:var(--space-8);display:grid}.metrics-grid>div{padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface-muted)}.metrics-grid dt{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.metrics-grid dd{margin-top:var(--space-1);font-size:var(--font-size-xl);letter-spacing:-.035em;font-weight:700}.metrics-grid small{margin-top:var(--space-1);color:var(--color-text-tertiary);font-size:var(--font-size-xs);line-height:1.4;display:block}.profile-story .text-link{margin-top:var(--space-6)}.section-follow{background:var(--color-text);color:var(--color-surface)}.follow-layout{gap:var(--space-10);display:grid}.follow-layout h2{max-width:16ch;margin-top:var(--space-3)}.follow-layout>div:first-child>p:last-child{margin-top:var(--space-4);color:color-mix(in srgb, var(--color-surface) 68%, transparent)}.social-actions{gap:var(--space-3);display:grid}.social-action{align-items:center;gap:var(--space-4);min-height:5.25rem;padding:var(--space-4);border-radius:var(--radius-lg);color:var(--color-surface);cursor:pointer;text-align:left;transition:background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);background:#ffffff12;border:1px solid #ffffff26;grid-template-columns:auto 1fr auto;display:grid}button.social-action{width:100%}.social-action-icon{border-radius:var(--radius-md);background:var(--color-brand-hover);place-content:center;width:2.75rem;height:2.75rem;font-weight:750;display:grid}.social-action>span:nth-child(2){flex-direction:column;display:flex}.social-action small{color:color-mix(in srgb, var(--color-surface) 62%, transparent)}.social-action.is-disabled{cursor:default;opacity:.66}.unconfigured-label{padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:var(--font-size-xs);background:#ffffff17}.site-footer{padding-block:var(--space-12);border-top:1px solid var(--color-border);background:var(--color-bg)}.footer-inner{gap:var(--space-8);display:grid}.footer-identity p{margin-top:var(--space-1);color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.footer-nav{gap:var(--space-2) var(--space-5);flex-wrap:wrap;display:flex}.footer-nav a,.footer-meta a{min-height:var(--control-min);color:var(--color-text-secondary);font-size:var(--font-size-sm);align-items:center;display:inline-flex}.footer-meta{align-items:flex-start;gap:var(--space-3);color:var(--color-text-tertiary);font-size:var(--font-size-sm);flex-direction:column;display:flex}.footer-meta nav{gap:var(--space-5);display:flex}.page-hero{background:radial-gradient(circle at 88% 20%, var(--color-brand-soft), transparent 32%), var(--color-bg);padding-block:clamp(5.5rem,15vw,9rem)}.page-hero h1{max-width:11em;margin-top:var(--space-4);font-size:clamp(2.5rem,1.9rem + 2.6vw,4rem)}.page-hero .container>p:last-child{max-width:42rem;margin-top:var(--space-6);color:var(--color-text-secondary);font-size:var(--font-size-md)}.compact-page-hero{padding-block:clamp(4.5rem,8vw,6rem)}.tutorials-page-section{background:var(--color-surface)}.recommended-tutorial{gap:var(--space-6);padding:var(--space-6);margin-bottom:var(--section-space);border:1px solid color-mix(in srgb, var(--color-brand) 20%, var(--color-border));border-radius:var(--radius-xl);background:linear-gradient(145deg, var(--color-brand-softer), var(--color-surface));transition:transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);display:grid}.recommended-tutorial>div:first-child{gap:var(--space-2);display:flex}.recommended-label{background:var(--color-brand-hover);color:var(--color-surface)}.recommended-copy h2{max-width:20ch;font-size:clamp(1.8rem,6vw,3.2rem)}.recommended-copy p{max-width:42rem;margin-top:var(--space-4);color:var(--color-text-secondary)}.recommended-meta{align-items:center;gap:var(--space-3);color:var(--color-text-tertiary);font-size:var(--font-size-sm);flex-wrap:wrap;display:flex}.recommended-meta i{color:var(--color-brand-hover);font-size:var(--font-size-xl);margin-left:auto;font-style:normal}.tutorial-list-heading{margin-bottom:var(--space-10)}.tutorial-list-heading .section-heading{margin-bottom:var(--space-6)}.filter-bar{gap:var(--space-2);margin-inline:calc(var(--page-gutter) * -1);padding:0 var(--page-gutter) var(--space-2);scrollbar-width:none;display:flex;overflow-x:auto}.filter-bar::-webkit-scrollbar{display:none}.filter-bar button{min-width:fit-content;min-height:var(--control-min);padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer}.filter-bar button[aria-pressed=true]{border-color:var(--color-text);background:var(--color-text);color:var(--color-surface)}.tutorial-empty{padding:var(--space-16) var(--space-6);border:1px dashed var(--color-border-strong);border-radius:var(--radius-xl);text-align:center}.tutorial-empty>span{color:var(--color-brand-hover);font-size:var(--font-size-3xl)}.tutorial-empty h2{margin-top:var(--space-4)}.tutorial-empty p{margin-top:var(--space-2);color:var(--color-text-secondary)}.article-header{border-bottom:1px solid var(--color-border);background:var(--color-bg);padding-block:clamp(4rem,12vw,7rem)}.back-link{min-height:var(--control-min);align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);display:inline-flex}.article-labels{align-items:center;gap:var(--space-2);margin-top:var(--space-10);flex-wrap:wrap;display:flex}.article-header h1{max-width:14em;margin-top:var(--space-5);font-size:clamp(2.4rem,1.8rem + 2.5vw,3.75rem)}.article-excerpt{max-width:42rem;margin-top:var(--space-6);color:var(--color-text-secondary);font-size:var(--font-size-md)}.article-author{align-items:center;gap:var(--space-3);margin-top:var(--space-6);color:var(--color-text-secondary);font-size:var(--font-size-sm);display:flex}.article-author img{border-radius:var(--radius-md);background:var(--color-surface);object-fit:contain;width:3rem;height:3rem}.article-meta{gap:var(--space-2) var(--space-5);margin-top:var(--space-6);color:var(--color-text-tertiary);font-size:var(--font-size-sm);flex-wrap:wrap;display:flex}.article-content-section{background:var(--color-surface)}.article-layout{gap:var(--space-10);max-width:68rem;margin-inline:auto;display:grid}.article-toc{height:fit-content;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg)}.article-toc strong{font-size:var(--font-size-sm)}.article-toc ol{gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none;display:grid}.article-toc li{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.5}.article-toc li.is-subsection{padding-left:var(--space-4);font-size:var(--font-size-xs)}.article-toc a{align-items:center;min-height:2rem;display:inline-flex}.tutorial-prose{width:100%;max-width:var(--reading-max);color:#29282a;min-width:0;font-size:var(--font-size-md);margin-inline:auto;line-height:1.86}.tutorial-prose h2,.tutorial-prose h3{scroll-margin-top:calc(var(--header-height) + var(--space-6))}.tutorial-prose h2{padding-top:var(--space-8);margin-top:var(--space-8);border-top:1px solid var(--color-border);font-size:clamp(1.7rem,5vw,2.25rem)}.tutorial-prose h2:first-child{border-top:0;margin-top:0;padding-top:0}.tutorial-prose h3{margin-top:var(--space-8);font-size:var(--font-size-xl)}.tutorial-prose p,.tutorial-prose ul,.tutorial-prose ol,.tutorial-prose blockquote{margin-block:var(--space-5)}.tutorial-prose ul,.tutorial-prose ol{padding-left:1.35em}.tutorial-prose li+li{margin-top:var(--space-2)}.tutorial-prose li::marker{color:var(--color-brand-hover);font-weight:700}.tutorial-prose blockquote{padding:var(--space-5);border-left:.25rem solid var(--color-brand);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--color-brand-softer);color:var(--color-text-secondary)}.content-placeholder{max-width:42rem;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg);text-align:center;margin-inline:auto}.content-placeholder .status-badge{margin-inline:auto}.content-placeholder h2{margin-top:var(--space-5);font-size:var(--font-size-2xl)}.content-placeholder>p{margin-top:var(--space-4);color:var(--color-text-secondary)}.content-placeholder .text-link{margin-top:var(--space-5)}.article-pagination{gap:var(--space-3);padding-block:var(--space-12);display:grid}.article-pagination>a{min-height:7rem;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);flex-direction:column;justify-content:center;display:flex}.article-pagination span{color:var(--color-text-tertiary);font-size:var(--font-size-xs)}.article-pagination strong{margin-top:var(--space-2);line-height:1.45}.about-page-hero{padding-block:clamp(4rem,12vw,8rem)}.about-hero-grid{align-items:center;gap:var(--space-10);display:grid}.about-avatar-wrap{width:min(100%,23rem);margin-inline:auto;position:relative}.about-avatar-wrap img{aspect-ratio:1;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);object-fit:contain;width:100%}.about-avatar-wrap figcaption{right:var(--space-4);bottom:var(--space-4);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-white-overlay);color:var(--color-text-secondary);font-size:var(--font-size-sm);backdrop-filter:blur(12px);position:absolute}.about-metrics-section{background:var(--color-surface)}.about-story-section{background:var(--color-bg)}.about-story-grid{gap:var(--space-5);margin-top:var(--space-10);display:grid}.about-story-heading{max-width:50rem}.about-story-grid article{padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.about-story-grid h2{margin-top:var(--space-3);font-size:var(--font-size-xl)}.about-story-grid article>p:last-child{margin-top:var(--space-4);color:var(--color-text-secondary)}.direction-section{background:var(--color-surface)}.direction-layout{gap:var(--space-8);display:grid}.direction-list{margin:0;padding:0;list-style:none}.direction-list li{align-items:center;gap:var(--space-4);border-top:1px solid var(--color-border);grid-template-columns:2.5rem 1fr;min-height:5.5rem;display:grid}.direction-list li:last-child{border-bottom:1px solid var(--color-border)}.direction-list span{color:var(--color-brand-hover);font-size:var(--font-size-xs);font-weight:750}.direction-list strong{font-size:var(--font-size-lg);font-weight:600}.about-follow{background:var(--color-text)}.experiments-hero{min-height:56svh}.experiments-section{background:var(--color-surface)}.experiments-empty{align-items:center;gap:var(--space-10);max-width:60rem;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg);margin-inline:auto;display:grid}.experiments-orbit{border:1px solid var(--color-border-strong);border-radius:50%;place-content:center;width:9rem;height:9rem;margin-inline:auto;display:grid;position:relative}.experiments-orbit:before,.experiments-orbit:after{border:1px solid var(--color-border);content:"";border-radius:50%;position:absolute}.experiments-orbit:before{inset:1.25rem -.5rem;transform:rotate(38deg)}.experiments-orbit:after{inset:-.5rem 1.25rem;transform:rotate(-38deg)}.experiments-orbit i{background:var(--color-brand);width:1.25rem;height:1.25rem;box-shadow:2.6rem -2.3rem 0 -.35rem var(--color-text);border-radius:50%}.experiments-empty h2{margin-top:var(--space-3);font-size:var(--font-size-2xl)}.experiments-empty div>p:not(.eyebrow){margin-top:var(--space-4);color:var(--color-text-secondary)}.experiments-empty .text-link{margin-top:var(--space-5)}.not-found-page{min-height:calc(82svh - var(--header-height));padding-block:var(--space-16);background:radial-gradient(circle at 50% 45%, var(--color-brand-soft), transparent 35%), var(--color-bg);place-items:center;display:grid}.not-found-inner{text-align:center}.error-code{color:color-mix(in srgb, var(--color-brand) 20%, var(--color-bg));letter-spacing:-.1em;font-size:clamp(7rem,35vw,18rem);font-weight:800;line-height:.72}.not-found-inner .eyebrow{margin-top:var(--space-10)}.not-found-inner h1{margin-top:var(--space-3);font-size:clamp(2rem,8vw,3.6rem)}.not-found-inner>p:not(.error-code,.eyebrow){margin-top:var(--space-4);color:var(--color-text-secondary)}.not-found-actions{justify-content:center;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap;display:flex}.legal-page{background:var(--color-surface);min-height:70svh}.legal-page h1{margin-top:var(--space-3);font-size:clamp(2.5rem,9vw,4.5rem)}.legal-updated{margin-top:var(--space-3);color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.legal-page h2{padding-top:var(--space-8);margin-top:var(--space-8);border-top:1px solid var(--color-border);font-size:var(--font-size-xl)}.legal-page h2+p{margin-top:var(--space-3);color:var(--color-text-secondary)}.reveal-ready [data-reveal]{opacity:0;transition:opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);transform:translateY(.7rem)}.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}@media (hover:hover) and (pointer:fine){.desktop-nav a:hover,.footer-nav a:hover,.footer-meta a:hover,.back-link:hover,.article-toc a:hover{color:var(--color-brand-hover)}.text-link:hover span,.tutorial-card>a:hover .tutorial-card-meta i{transform:translate(.2rem)}.button:hover{transform:translateY(-1px)}.button-primary:hover{background:var(--color-brand-hover)}.product-card:hover,.tutorial-card>a:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-soft);transform:translateY(-.25rem)scale(1.005)}.product-card:hover .card-arrow{transform:translate(.12rem,-.12rem)}.social-action:not(.is-disabled):hover{background:#ffffff1f;border-color:#ffffff47;transform:translateY(-2px)}.recommended-tutorial:hover{box-shadow:var(--shadow-soft);transform:translateY(-.2rem)}}@media (width>=640px){.hero-description{font-size:var(--font-size-md)}.product-slide{flex-basis:min(74vw,25rem)}.tutorial-grid,.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-card:last-child:nth-child(odd){grid-column:1/-1}.recommended-tutorial,.experiments-empty{padding:var(--space-10)}.article-pagination{grid-template-columns:repeat(2,minmax(0,1fr))}.article-pagination .is-next{text-align:right;align-items:flex-end}.experiments-empty{grid-template-columns:12rem 1fr}}@media (width>=768px){body.menu-open{overflow:auto}.desktop-nav{align-items:center;gap:var(--space-8);display:flex;position:absolute;left:50%;transform:translate(-50%)}.desktop-nav a{min-height:var(--control-min);color:var(--color-text-secondary);align-items:center;font-size:.9375rem;font-weight:600;display:inline-flex}.desktop-nav a[aria-current=page]{color:var(--color-text)}.menu-toggle,.mobile-menu{display:none}.hero-section{min-height:calc(89svh - var(--header-height))}.hero-avatar{margin-bottom:var(--space-6)}.hero-description{max-width:42rem;margin-top:var(--space-8);flex-direction:row}.hero-description span{white-space:nowrap}.product-grid{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0;padding:0;display:grid;overflow:visible}.product-slide{min-width:0}.product-card{min-height:34rem}.product-visual{min-height:17rem;padding:var(--space-8)}.product-pagination{display:none}.section-after-link{align-items:center;gap:var(--space-2);flex-direction:row}.recent-work-card{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.recent-work-visual{min-height:29rem;padding:var(--space-10)}.recent-work-copy{padding:var(--space-10)}.desktop-section-link{display:inline-flex}.mobile-section-link{display:none}.tutorial-grid{gap:var(--space-5)}.tutorial-card>a{min-height:21rem}.profile-intro{padding:var(--space-10);grid-template-columns:minmax(14rem,.68fr) minmax(0,1.5fr)}.profile-person{flex-direction:column;align-items:flex-start}.profile-person img{width:9rem;height:9rem}.metrics-grid>div{min-height:7.5rem}.follow-layout{grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);align-items:center}.footer-inner{grid-template-columns:.8fr 1.35fr 1fr;align-items:end}.footer-meta{text-align:right;align-items:flex-end}.recommended-tutorial{grid-template-columns:.5fr 1.5fr .72fr;align-items:end}.recommended-meta{flex-direction:column;align-items:flex-end}.recommended-meta i{margin:var(--space-4) 0 0}.filter-bar{margin-inline:0;padding-inline:0}.about-story-grid{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.direction-layout{gap:var(--space-16);grid-template-columns:minmax(0,.85fr) minmax(20rem,1.15fr)}.experiments-empty{grid-template-columns:15rem 1fr}}@media (width>=1024px){.tutorial-grid,.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tutorial-card:last-child:nth-child(odd){grid-column:auto}.about-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(17rem,.8fr)}.product-card-copy{padding:var(--space-8)}.article-layout{grid-template-columns:12.5rem minmax(0,1fr);align-items:start}.article-toc{top:calc(var(--header-height) + var(--space-6));position:sticky}}@media (width>=1280px){.section-products{padding-block:var(--space-16)}.product-grid{gap:var(--space-5);grid-template-columns:repeat(4,minmax(0,1fr))}.product-card{min-height:28rem}.product-visual{min-height:14rem;padding:var(--space-6)}.product-card-copy{padding:var(--space-6)}}@media (width>=1440px){.page-hero{padding-block:9.5rem}.compact-page-hero{padding-block:6rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.reveal-ready [data-reveal]{opacity:1;transform:none}}