:root{color-scheme:light dark;--canvas: #ffffff;--bg: #fbfdfc;--surface: #f5f8f7;--surface-soft: #eef5f2;--ink: #111827;--charcoal: #26313d;--slate: #64748b;--muted: #8a97a8;--hairline: #dce5e2;--hairline-soft: #edf2f0;--brand-green: #1ac99a;--brand-green-deep: #0f9f79;--brand-green-soft: #e8fbf5;--tag-blue: #2563eb;--code-bg: #ffffff;--code-border: #d0d7de;--code-text: #0b1220;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);--shadow-card: 0 8px 24px rgba(15, 23, 42, .06);--max-width: 1320px;--content-width: 720px;--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Geist Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace}html.dark{--canvas: #111817;--bg: #0b1110;--surface: #151f1d;--surface-soft: #1b2825;--ink: #eff6f3;--charcoal: #d4dfda;--slate: #9aaba5;--muted: #74857f;--hairline: #2a3935;--hairline-soft: #1f2b28;--brand-green: #35d6aa;--brand-green-deep: #7ce8c9;--brand-green-soft: #14342b;--tag-blue: #8bb7ff;--shadow-sm: none;--shadow-card: none}*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth;background:var(--bg);color:var(--ink);font-family:var(--font-sans)}body{min-height:100%;margin:0;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration-color:color-mix(in srgb,var(--brand-green) 50%,transparent);text-underline-offset:.2em;transition:color .16s ease,border-color .16s ease,background-color .16s ease}a:hover{color:var(--brand-green-deep)}img{display:block;max-width:100%;height:auto}button,input,textarea{font:inherit}::selection{background:color-mix(in srgb,var(--brand-green) 24%,transparent)}.site-shell{width:min(100% - 40px,var(--max-width));margin-inline:auto}.site-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--canvas) 88%,transparent);border-bottom:1px solid var(--hairline-soft);backdrop-filter:blur(16px)}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:.96rem;font-weight:700;text-decoration:none}.brand-dot{width:10px;height:10px;border-radius:999px;background:var(--brand-green);box-shadow:0 0 0 5px var(--brand-green-soft);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.brand-dot:hover{transform:scale(1.15)}.brand-dot-pop{animation:brand-dot-pop .6s ease}@keyframes brand-dot-pop{0%{transform:scale(1)}35%{transform:scale(1.8);box-shadow:0 0 0 10px var(--brand-green-soft)}to{transform:scale(1);box-shadow:0 0 0 5px var(--brand-green-soft)}}.nav-links{display:flex;align-items:center;gap:6px}.nav-links a,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border:1px solid transparent;border-radius:999px;color:var(--slate);background:transparent;font-size:.9rem;font-weight:500;text-decoration:none}.nav-links a:hover,.theme-toggle:hover{border-color:var(--hairline);color:var(--ink);background:var(--canvas)}.theme-toggle{cursor:pointer}.page{padding-block:56px 80px}.hero{display:grid;gap:18px;max-width:760px;padding-block:20px 36px}.eyebrow{margin:0;color:var(--brand-green-deep);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}h1,h2,h3{color:var(--ink);line-height:1.18;letter-spacing:0}h1{margin:0;font-size:clamp(2.35rem,7vw,3.7rem);font-weight:650}h2{margin:44px 0 14px;font-size:1.55rem;font-weight:650}h3{margin:30px 0 10px;font-size:1.15rem;font-weight:650}.lead{max-width:680px;margin:0;color:var(--slate);font-size:1.08rem;line-height:1.65}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-block:34px 18px}.section-heading h2{margin:0;font-size:1.35rem}.section-heading a{color:var(--slate);font-size:.92rem;font-weight:600;text-decoration:none}.post-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}.home-section{margin-top:0}.home-section+.home-section{margin-top:48px}.section-title{margin:0 0 18px;font-size:1.1rem;font-weight:600;color:var(--slate);letter-spacing:-.01em}.post-grid .post-card.post-card--grid{display:flex;flex-direction:column;gap:0;padding:0;grid-template-columns:none}.post-grid .post-card.post-card--grid .post-thumbnail{width:100%;aspect-ratio:16 / 9;min-height:0;max-height:none;border:0;border-bottom:1px solid var(--hairline-soft);border-radius:12px 12px 0 0}.post-grid .post-card.post-card--grid .post-card-content{padding:18px}.post-grid .post-card.post-card--grid:not(.has-thumbnail) .post-card-content{padding:18px}.post-card{position:relative;display:grid;gap:12px;padding:24px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas);box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.post-card.has-thumbnail{grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:stretch;padding:18px}.post-card:hover{border-color:color-mix(in srgb,var(--brand-green) 45%,var(--hairline));box-shadow:var(--shadow-card);transform:translateY(-2px) scale(1.012)}@media(prefers-reduced-motion:reduce){.post-card{transition:box-shadow .18s ease,border-color .18s ease}.post-card:hover{transform:none}}.post-card-content{display:grid;align-content:start;gap:12px;min-width:0}.post-thumbnail{width:100%;height:100%;min-height:132px;max-height:164px;border:1px solid var(--hairline-soft);border-radius:8px;background:var(--surface);object-fit:cover}.post-card h2,.post-card h3{margin:0;font-size:1.18rem}.post-card h2 a,.post-card h3 a{text-decoration:none}.post-card h2 a:after,.post-card h3 a:after{position:absolute;inset:0;border-radius:12px;content:"";z-index:1}.post-card p{margin:0;color:var(--slate);font-size:.98rem}.meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:var(--muted);font-size:.84rem;font-weight:500}.meta span:not(:first-child):before{margin-right:12px;color:var(--hairline);content:"/"}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.tag{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid var(--hairline);border-radius:999px;color:var(--slate);background:var(--surface);font-size:.82rem;font-weight:600;text-decoration:none}.tag:hover{color:var(--brand-green-deep);border-color:color-mix(in srgb,var(--brand-green) 50%,var(--hairline));background:var(--brand-green-soft)}.article-doc{display:grid;grid-template-columns:minmax(0,var(--content-width)) 220px;align-items:start;justify-content:center;gap:56px}.article-main{min-width:0}.article-header{display:grid;gap:16px;padding-bottom:28px;border-bottom:1px solid var(--hairline)}.article-header h1{font-size:clamp(2.15rem,6vw,3.15rem)}.article-body{padding-top:20px;color:var(--charcoal);font-size:1rem;line-height:1.75}.article-body :where(p,ul,ol,blockquote,pre,table){margin-block:18px}.article-body :where(ul,ol){padding-left:1.35rem}.article-body :where(li+li){margin-top:6px}.article-body :where(h2,h3){scroll-margin-top:92px}.article-body h2{padding-top:8px;border-top:1px solid var(--hairline-soft)}.article-body a{color:var(--brand-green-deep);font-weight:550}.article-body blockquote{margin-left:0;padding:10px 0 10px 18px;border-left:3px solid var(--brand-green);color:var(--slate);background:linear-gradient(90deg,var(--brand-green-soft),transparent)}.article-body :not(pre)>code{padding:.18em .42em;border:1px solid color-mix(in srgb,var(--brand-green) 18%,var(--hairline));border-radius:5px;color:color-mix(in srgb,var(--brand-green) 35%,var(--ink));background:color-mix(in srgb,var(--brand-green) 8%,var(--surface));font-family:var(--font-mono);font-size:.88em;font-weight:500}.article-body pre{overflow-x:auto;margin-block:24px;padding:22px 24px;border:1px solid var(--code-border);border-radius:10px;background:var(--code-bg)!important;color:var(--code-text)!important;font-family:var(--font-mono);font-size:.95rem;line-height:1.7;tab-size:2;-moz-tab-size:2;color-scheme:light;box-shadow:0 1px #0f172a08;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--code-text) 25%,transparent) transparent}.article-body pre[data-language=plaintext] span{color:var(--code-text)!important}.article-body pre::-webkit-scrollbar{height:8px}.article-body pre::-webkit-scrollbar-track{background:transparent}.article-body pre::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--code-text) 22%,transparent);border-radius:999px}.article-body pre code{display:block;padding:0;border:0;background:transparent;font-family:inherit;font-variant-ligatures:none}.article-body .mermaid-diagram{overflow-x:auto;margin-block:24px;padding:20px;border:1px solid var(--hairline);border-radius:10px;background:#fff;color:#0f172a;box-shadow:0 1px #0f172a08}.article-body .mermaid-diagram svg{display:block;max-width:100%;height:auto;margin-inline:auto}.article-body .mermaid-diagram-error{white-space:pre;font-family:var(--font-mono);font-size:.9rem}.article-body table{display:block;overflow-x:auto;width:100%;border:1px solid var(--hairline);border-radius:8px;border-spacing:0;background:var(--canvas);font-size:.92rem}.article-body :where(th,td){padding:10px 12px;border-bottom:1px solid var(--hairline-soft);text-align:left;vertical-align:top}.article-body th{color:var(--ink);background:var(--surface);font-weight:650}.article-body tr:last-child :where(th,td){border-bottom:0}.article-body img{margin-block:22px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas)}.article-body aside{margin-block:22px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--brand-green) 38%,var(--hairline));border-radius:12px;color:var(--charcoal);background:var(--brand-green-soft)}.toc{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow-y:auto;padding-left:18px;padding-block:8px;border-left:1px solid var(--hairline);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--slate) 30%,transparent) transparent;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 18px,black calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 18px,black calc(100% - 18px),transparent 100%)}.toc::-webkit-scrollbar{width:4px}.toc::-webkit-scrollbar-track{background:transparent}.toc::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--slate) 24%,transparent);border-radius:999px}.toc::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--slate) 45%,transparent)}.toc-title{margin:0 0 12px;color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.toc ol{display:grid;gap:7px;margin:0;padding:0;list-style:none}.toc a{display:block;color:var(--slate);font-size:.86rem;line-height:1.45;text-decoration:none}.toc a:hover{color:var(--ink)}.toc a.toc-link-active{color:var(--brand-green-deep);font-weight:650;transform:translate(2px);transition:color .18s ease,transform .18s ease}.toc-depth-3{padding-left:14px}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}.reading-progress-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--brand-green),var(--brand-green-deep));transform:scaleX(0);transform-origin:left center;transition:transform .12s ease-out}.related-posts{margin-top:56px;padding-top:28px;border-top:1px solid var(--hairline)}.related-posts-title{margin:0 0 18px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.01em}.related-posts-list{display:grid;gap:14px;list-style:none;margin:0;padding:0}.article-image-zoomable{cursor:zoom-in;transition:transform .18s ease}.article-image-zoomable:hover{transform:scale(1.01)}.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;background:#0f172ad1;opacity:0;transition:opacity .18s ease;z-index:1000;cursor:zoom-out}.lightbox[hidden]{display:none}.lightbox-visible{opacity:1}.lightbox-image{max-width:min(96vw,1400px);max-height:92vh;border-radius:10px;background:var(--canvas);box-shadow:0 20px 60px #00000080;cursor:default}.lightbox-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border:0;border-radius:999px;color:#fff;background:#ffffff1f;font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease}.lightbox-close:hover{background:#ffffff3d}.mini-game{margin-top:48px;padding:24px;border:1px solid var(--hairline);border-radius:14px;background:var(--canvas);box-shadow:var(--shadow-sm)}.mini-game-head{display:grid;gap:6px;margin-bottom:18px}.mini-game-head h2{margin:0;font-size:1.15rem;font-weight:700;color:var(--ink)}.mini-game-status{margin:0;color:var(--slate);font-size:.9rem}.mini-game-score{margin:0;color:var(--brand-green-deep);font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}.mini-game-canvas-wrap{position:relative;display:flex;justify-content:center}.mini-game canvas{display:block;max-width:100%;border-radius:10px;background:#0f172a;touch-action:none}.mini-game-start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 20px;border:0;border-radius:999px;background:var(--brand-green-deep);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 6px 20px #00000040;transition:transform .15s ease,background .15s ease}.mini-game-start:hover{transform:translate(-50%,-50%) scale(1.04)}.mini-game-start[hidden]{display:none}.toc-empty{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5}.footer{padding-block:28px 44px;border-top:1px solid var(--hairline-soft);color:var(--slate);background:var(--canvas);font-size:.9rem}.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}.empty{padding:32px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas);color:var(--slate)}@media(max-width:980px){.article-doc{grid-template-columns:minmax(0,var(--content-width));gap:28px}.toc{position:static;order:-1;max-height:none;padding:16px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas)}}@media(max-width:680px){.site-shell{width:min(100% - 24px,var(--max-width))}.nav{align-items:flex-start;flex-direction:column;gap:10px;padding-block:12px}.nav-links{width:100%;justify-content:space-between;gap:4px}.nav-links a,.theme-toggle{min-height:40px;padding-inline:10px;font-size:.88rem}.page{padding-block:36px 60px}.hero{padding-block:10px 28px}h1{font-size:clamp(2rem,13vw,2.75rem)}.section-heading{align-items:start;flex-direction:column}.post-card{padding:18px}.post-card.has-thumbnail{grid-template-columns:1fr;gap:14px;padding:14px}.post-grid{grid-template-columns:1fr;gap:14px}}@media(min-width:641px)and (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.post-thumbnail{aspect-ratio:16 / 9;min-height:0;max-height:none}.article-header h1{font-size:clamp(2rem,12vw,2.55rem)}}.category-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--brand-green) 14%,transparent);color:color-mix(in srgb,var(--brand-green) 80%,var(--slate));font-size:.82rem;font-weight:600;text-decoration:none}.category-badge:hover{background:color-mix(in srgb,var(--brand-green) 22%,transparent)}.category-jump{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px;padding:14px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas)}.category-jump a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--slate);font-size:.9rem;font-weight:600;text-decoration:none}.category-jump a:hover{background:color-mix(in srgb,var(--brand-green) 14%,var(--surface))}.category-jump .count{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--brand-green) 16%,transparent);color:color-mix(in srgb,var(--brand-green) 80%,var(--slate));font-size:.78rem}.category-block{margin-top:40px;scroll-margin-top:80px}.category-block-header{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}.category-block-header h2{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;font-size:1.35rem}.category-block-header h2 a{color:inherit;text-decoration:none}.category-block-header h2 a:hover{color:color-mix(in srgb,var(--brand-green) 80%,var(--slate))}.category-block-header .count{color:var(--muted);font-size:.92rem;font-weight:500}.category-block-header p{margin:0;color:var(--muted);font-size:.95rem}.category-post-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.category-post-list li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed var(--hairline-soft)}.category-post-list li:last-child{border-bottom:0}.category-post-list a{flex:1;color:var(--slate);text-decoration:none}.category-post-list a:hover{color:color-mix(in srgb,var(--brand-green) 80%,var(--slate))}.category-post-list time{flex-shrink:0;color:var(--muted);font-size:.84rem}.category-block .empty{color:var(--muted);font-size:.92rem}.notice-list{display:grid;gap:8px;margin-bottom:28px}.notice{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--brand-green) 28%,var(--hairline));border-radius:10px;background:color-mix(in srgb,var(--brand-green) 8%,var(--canvas));color:var(--ink);text-decoration:none;transition:background .15s ease,border-color .15s ease}.notice:hover{background:color-mix(in srgb,var(--brand-green) 14%,var(--canvas));border-color:color-mix(in srgb,var(--brand-green) 50%,var(--hairline))}.notice-badge{flex-shrink:0;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--brand-green) 22%,transparent);color:color-mix(in srgb,var(--brand-green) 85%,var(--slate));font-size:.76rem;font-weight:700;letter-spacing:.02em}.notice-title{flex:1;min-width:0;font-size:.96rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notice-arrow{flex-shrink:0;color:var(--muted);font-size:.95rem}.notice:hover .notice-arrow{color:color-mix(in srgb,var(--brand-green) 70%,var(--slate))}.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}.home-main{min-width:0}.home-sidebar{position:sticky;top:88px;display:grid;gap:20px}.sidebar-widget{padding:18px;border:1px solid color-mix(in srgb,var(--hairline) 60%,transparent);border-radius:14px;background:color-mix(in srgb,var(--canvas) 55%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:none}.widget-title{margin:0 0 12px;font-size:.92rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.widget-category-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.widget-category-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;color:var(--slate);font-size:.95rem;font-weight:500;text-decoration:none}.widget-category-list a:hover{background:color-mix(in srgb,var(--brand-green) 12%,transparent);color:var(--ink)}.widget-category-list .count{flex-shrink:0;min-width:24px;padding:1px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.78rem;font-weight:600;text-align:center}.widget-tag-cloud{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.widget-tag-cloud a{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--slate);font-size:.84rem;font-weight:500;text-decoration:none}.widget-tag-cloud a:hover{background:color-mix(in srgb,var(--brand-green) 16%,var(--surface));color:var(--ink)}.widget-tag-cloud .count{color:var(--muted);font-size:.75rem}.widget-empty{margin:0;color:var(--muted);font-size:.88rem}@media(max-width:900px){.home-layout{grid-template-columns:1fr;gap:28px}.home-sidebar{position:static;order:2}}.toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%,24px) scale(.96);z-index:100;padding:14px 24px;border:1px solid color-mix(in srgb,var(--brand-green) 40%,transparent);border-radius:999px;background:color-mix(in srgb,var(--brand-green) 70%,white 30%);color:#fff;font-size:1rem;font-weight:600;letter-spacing:-.01em;box-shadow:0 18px 38px color-mix(in srgb,var(--brand-green) 35%,transparent),0 4px 12px #0f172a2e;opacity:0;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.toast-visible{opacity:1;transform:translate(-50%) scale(1)}.article-body pre{position:relative}.code-copy{position:absolute;top:8px;right:8px;padding:4px 10px;border:1px solid var(--code-border);border-radius:6px;background:var(--canvas);color:var(--slate);font-size:.74rem;font-weight:500;cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease,border-color .15s ease}.article-body pre:hover .code-copy,.code-copy:focus-visible{opacity:1}.code-copy:hover{background:color-mix(in srgb,var(--brand-green) 14%,var(--canvas));border-color:color-mix(in srgb,var(--brand-green) 40%,var(--code-border));color:var(--ink)}.code-copy-done{opacity:1!important;border-color:color-mix(in srgb,var(--brand-green) 60%,transparent);color:color-mix(in srgb,var(--brand-green) 80%,var(--code-text))}.not-found-actions{display:flex;align-items:center;gap:10px;color:var(--muted)}.not-found-actions a{color:var(--ink);font-weight:500}.not-found-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}.not-found-list li{padding:16px 18px;border:1px solid var(--hairline);border-radius:10px;background:var(--canvas)}.not-found-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--ink);font-weight:600;text-decoration:none}.not-found-list a:hover .title{color:color-mix(in srgb,var(--brand-green) 80%,var(--ink))}.not-found-list time{flex-shrink:0;color:var(--muted);font-size:.84rem;font-weight:500}.not-found-list p{margin:6px 0 0;color:var(--slate);font-size:.92rem}