:root{color-scheme:light dark;--brand-50:#f3f8ff;--brand-100:#e4efff;--brand-200:#c9dfff;--brand-400:#4f9aff;--brand-500:#1473ef;--brand-600:#0757d3;--brand-700:#0645a8;--ink-950:#0a1830;--ink-800:#203250;--ink-600:#5b6d88;--ink-500:#71819a;--surface:#fff;--surface-soft:#f5f7fa;--surface-raised:#fff;--line:#dce4ef;--shadow:0 18px 50px #1e416e14;--shadow-small:0 6px 22px #1e416e12;--radius-large:24px;--radius:16px;--radius-small:12px;--page-width:1200px}@media (prefers-color-scheme:dark){:root{--ink-950:#f2f7ff;--ink-800:#dbe7f8;--ink-600:#a5b5ca;--ink-500:#8799b2;--surface:#0b172b;--surface-soft:#071225;--surface-raised:#0b172b;--line:#203754;--brand-50:#0d203d;--brand-100:#102d55;--brand-200:#17447e;--brand-400:#61a4ff;--brand-500:#4593ff;--brand-600:#6cabff;--brand-700:#9bc7ff;--shadow:0 22px 70px #0000004d;--shadow-small:0 10px 34px #0000003d}}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth;background:var(--surface-soft)}body{min-width:320px;color:var(--ink-950);background:var(--surface-soft);text-rendering:optimizelegibility;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.65}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}:focus-visible{outline:3px solid color-mix(in srgb, var(--brand-500) 65%, transparent);outline-offset:3px}.container{width:min(calc(100% - 40px), var(--page-width));margin-inline:auto}.skip-link{z-index:1000;background:var(--brand-600);color:#fff;border-radius:10px;padding:10px 16px;position:fixed;top:12px;left:12px;transform:translateY(-140%)}.skip-link:focus{transform:translateY(0)}.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}.site-header{z-index:50;border-bottom:1px solid color-mix(in srgb, var(--line) 74%, transparent);background:color-mix(in srgb, var(--surface-soft) 80%, transparent);backdrop-filter:blur(22px)saturate(150%);position:sticky;top:0}.header-inner{grid-template-columns:auto 1fr;align-items:center;gap:28px;min-height:76px;display:grid}.brand-link{letter-spacing:-.02em;align-items:center;gap:10px;font-weight:800;display:inline-flex}.brand-link img{object-fit:contain;width:42px;height:42px}.menu-toggle,.menu-close-icon,.menu-toggle[aria-expanded=true] .menu-open-icon{display:none}.menu-toggle[aria-expanded=true] .menu-close-icon{display:block}.main-nav{justify-content:end;gap:6px;display:flex}.main-nav a,.footer-links a{color:var(--ink-600);border-radius:10px;align-items:center;gap:6px;padding:8px 12px;font-size:.94rem;font-weight:650;transition:color .18s,background .18s;display:inline-flex}.main-nav a:hover,.footer-links a:hover{color:var(--brand-600);background:var(--brand-100)}main{min-height:65vh;animation:.48s cubic-bezier(.2,.72,.2,1) both page-enter}@keyframes page-enter{0%{opacity:0;transform:translateY(10px)}}.site-footer{border-top:1px solid var(--line);background:color-mix(in srgb, var(--surface) 62%, transparent);margin-top:64px}.footer-inner{grid-template-columns:1fr auto;align-items:center;gap:22px;padding-block:28px;display:grid}.footer-brand{align-items:center;gap:11px;display:flex}.footer-brand img{object-fit:contain;width:38px;height:38px}.footer-brand strong{font-size:.94rem;display:block}.footer-brand p{color:var(--ink-500);margin:1px 0 0;font-size:.78rem}.footer-links{flex-wrap:wrap;justify-content:end;display:flex}.footer-inner small{color:var(--ink-500);grid-column:1/-1;font-size:.75rem}.eyebrow{color:var(--brand-600);letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;font-size:.78rem;font-weight:850;display:block}.button{cursor:pointer;border:1px solid #0000;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:9px 17px;font-weight:750;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--brand-600);color:#fff;box-shadow:0 8px 20px #0959d32e}.button-secondary{border-color:var(--line);background:var(--surface);color:var(--ink-800)}.category-chip,.status-chip{background:var(--brand-100);color:var(--brand-700);border-radius:999px;align-items:center;padding:4px 9px;font-size:.72rem;font-weight:800;display:inline-flex}.status-chip{background:color-mix(in srgb, #f59e0b 16%, var(--surface));color:#a85d00}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;display:grid}.project-card{background:0 0;border-radius:18px;min-width:0;transition:transform .18s,background .18s;overflow:hidden}.project-card:hover{background:color-mix(in srgb, var(--surface) 78%, transparent);transform:translateY(-1px)}.project-card-link{grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:96px;padding:10px;display:grid;position:relative}.project-icon{border:1px solid var(--line);background:var(--surface);border-radius:16px;place-items:center;width:64px;height:64px;display:grid;overflow:hidden;box-shadow:0 5px 14px #25508e1a}.project-icon img{object-fit:cover;width:100%;height:100%}.project-icon-fallback{color:#fff;background:var(--brand-600);font-size:1.5rem;font-weight:900}.project-card-copy{flex-direction:column;flex:1;min-width:0;margin-top:0;display:flex}.project-title-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.project-card h3{margin:0;font-size:1rem;line-height:1.25}.project-author{color:var(--brand-600);font-size:.74rem;font-weight:700}.project-card p{color:var(--ink-600);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0;font-size:.76rem;display:-webkit-box;overflow:hidden}.card-action{background:var(--brand-100);min-height:32px;color:var(--brand-600);border-radius:999px;justify-content:center;justify-self:end;align-items:center;gap:3px;padding:6px 11px 6px 13px;font-size:.74rem;font-weight:800;transition:background .18s,transform .18s;display:inline-flex}.project-card:hover .card-action{background:var(--brand-200);transform:translate(2px)}.section-heading{justify-content:space-between;align-items:end;gap:30px;margin-bottom:24px;display:flex}.section-heading h1,.section-heading h2{letter-spacing:-.04em;margin:0;line-height:1.15}.section-heading h2{align-items:center;gap:9px;font-size:clamp(1.7rem,4vw,2.35rem);display:flex}.section-heading p{max-width:520px;color:var(--ink-600);margin:0}.content-section{margin-top:74px}.screenshot-rail{overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-color:var(--brand-200) transparent;gap:16px;padding:7px 3px 21px;display:flex;overflow-x:auto}.screenshot-button{background:color-mix(in srgb, var(--surface) 90%, var(--brand-50));height:320px;box-shadow:var(--shadow-small);cursor:zoom-in;scroll-snap-align:start;border:0;border-radius:22px;flex:none;padding:0;overflow:hidden}.screenshot-button img{object-fit:contain;width:auto;height:100%;display:block}dialog{color:var(--ink-950)}dialog::backdrop{backdrop-filter:blur(10px);background:#020916bd}.dialog-close{border:1px solid var(--line);background:var(--surface);width:40px;height:40px;color:var(--ink-800);cursor:pointer;border-radius:50%;place-items:center;font-size:1.6rem;line-height:1;display:grid}.lightbox{background:color-mix(in srgb, var(--surface-soft) 96%, transparent);width:min(92vw,960px);height:min(78dvh,700px);box-shadow:var(--shadow);border:0;border-radius:22px;padding:24px 68px 42px}.lightbox .dialog-close{z-index:2;position:absolute;top:16px;right:16px}.lightbox>img{object-fit:contain;width:100%;height:100%;display:block}.lightbox-nav{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:14px;place-items:center;width:46px;height:64px;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:14px}.lightbox-next{right:14px}.lightbox p{color:var(--ink-600);text-align:center;margin:0;position:absolute;bottom:10px;left:0;right:0}.share-dialog{border:1px solid var(--line);background:var(--surface);width:min(92vw,620px);max-height:92vh;box-shadow:var(--shadow);border-radius:26px;padding:26px;overflow:auto}.share-dialog-head{justify-content:space-between;align-items:start;gap:20px;display:flex}.share-dialog-head h2{margin:0}.share-text-panel{margin-top:16px}.share-card-canvas{border:1px solid var(--line);background:#0757d3;border-radius:20px;width:min(100%,380px);height:auto;margin:18px auto 14px;display:block;box-shadow:0 16px 40px #0757d329}.share-actions{flex-wrap:wrap;gap:8px;display:flex}.share-text-panel .share-actions{justify-content:end;margin-top:8px}.share-image-panel .button-primary{width:min(100%,380px);min-height:50px;margin-inline:auto;font-size:.98rem}.share-link-preview{border:1px solid var(--line);background:var(--surface-soft);min-height:64px;color:var(--ink-800);word-break:break-all;border-radius:13px;padding:11px 13px;font-size:.86rem;line-height:1.55}.share-feedback{min-height:1.5em;color:var(--brand-600);margin:14px 0 0;font-size:.86rem}.mdx-callout{border:1px solid var(--brand-200);background:var(--brand-50);border-radius:18px;margin-block:28px;padding:20px}.mdx-callout>strong{color:var(--brand-700)}.mdx-callout div>:last-child{margin-bottom:0}.mdx-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:28px;display:grid}.mdx-feature{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:20px}.mdx-feature h3{margin-top:0}.mdx-feature div>:last-child{margin-bottom:0}.mdx-media{margin:30px 0}.mdx-media img{width:100%;box-shadow:var(--shadow-small);border-radius:22px;display:block}.mdx-media figcaption{color:var(--ink-500);text-align:center;margin-top:8px;font-size:.86rem}@media (width<=900px){.header-inner{grid-template-columns:auto 1fr;gap:12px;padding-block:10px}.main-nav{justify-content:end}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=720px){.header-inner{grid-template-columns:1fr auto;min-height:60px;padding-block:8px;position:relative}.menu-toggle{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:12px;place-items:center;width:40px;height:40px;padding:0;display:grid}.main-nav{z-index:90;border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 96%, transparent);backdrop-filter:blur(20px);border-radius:16px;grid-template-columns:1fr;gap:5px;padding:8px;display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;box-shadow:0 16px 44px #0e2a532e}.main-nav[data-open]{display:grid}.main-nav a{background:var(--surface-soft);justify-content:flex-start;min-height:44px;padding:9px 11px}}@media (width<=640px){.container{width:min(calc(100% - 28px), var(--page-width))}.site-header{position:sticky}.header-inner{grid-template-columns:1fr auto;min-height:58px;padding-block:7px}.brand-link{justify-self:start;font-size:.94rem}.brand-link img{width:36px;height:36px}.main-nav a{white-space:nowrap;flex-direction:row;gap:7px;padding:9px 11px;font-size:.82rem}.main-nav a svg{width:18px;height:18px}.project-grid{grid-template-columns:1fr}.project-card-link{grid-template-columns:56px minmax(0,1fr) auto;gap:11px;min-height:84px;padding:8px 6px}.project-icon{border-radius:14px;width:56px;height:56px}.project-title-row{gap:4px}.category-chip,.status-chip{padding:2px 7px;font-size:.66rem}.project-card h3{font-size:.96rem}.project-author{font-size:.72rem}.project-card p{font-size:.78rem}.card-action{min-height:32px;padding:5px 9px 5px 11px;font-size:.72rem}.section-heading{flex-direction:column;align-items:start;gap:8px}.screenshot-button{border-radius:16px;height:238px}.lightbox{border-radius:18px;width:calc(100vw - 20px);height:min(66dvh,520px);padding:52px 12px 62px}.lightbox-nav{width:44px;height:44px;top:auto;bottom:10px;transform:none}.share-dialog{border-radius:22px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px}.share-actions{flex-direction:column;align-items:stretch}.share-actions .button{width:100%}.footer-inner{grid-template-columns:1fr;gap:14px;padding-block:24px}.footer-links{justify-content:start;gap:2px}.footer-links a{padding:6px 9px;font-size:.8rem}.footer-inner small{grid-column:auto}.mdx-feature-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}