:root{--sg-accent: #7f77dd;--sg-accent-ink: #5a51c8;--sg-accent-soft: rgba(127, 119, 221, .12);--sg-bg: #ffffff;--sg-bg-soft: #fafafa;--sg-bg-inset: #f4f4f5;--sg-text: #18181b;--sg-text-soft: #55555e;--sg-border: #e4e4e7;--sg-ok: #1a7f4e;--sg-err: #c03434;--sg-radius: 12px;--sg-maxw: 1200px;--sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--sg-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;color-scheme:light}:root[data-theme=dark]{--sg-accent-ink: #9c95e8;--sg-accent-soft: rgba(127, 119, 221, .18);--sg-bg: #111113;--sg-bg-soft: #18181b;--sg-bg-inset: #202024;--sg-text: #ececf0;--sg-text-soft: #a3a3af;--sg-border: #2a2a30;--sg-ok: #3dbf82;--sg-err: #e06c6c;color-scheme:dark}*{box-sizing:border-box}html{font-family:var(--sg-font);scroll-behavior:smooth}body{margin:0;background:var(--sg-bg);color:var(--sg-text);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-weight:600;line-height:1.25;margin:0 0 .5em}h1{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.02em}h2{font-size:1.35rem}h3{font-size:1.05rem}p{margin:0 0 1em}a{color:var(--sg-accent-ink);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px;border-radius:4px}.sg-skip-link{position:absolute;left:-9999px;top:0;background:var(--sg-accent);color:#fff;padding:.5rem 1rem;border-radius:0 0 8px;z-index:100}.sg-skip-link:focus{left:0}.sg-container{max-width:var(--sg-maxw);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}.sg-header{border-bottom:1px solid var(--sg-border);background:color-mix(in srgb,var(--sg-bg) 88%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}.sg-header-inner{display:flex;align-items:center;gap:1.25rem;min-height:60px}.sg-logo{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:1.1rem;color:var(--sg-text);letter-spacing:-.01em}.sg-logo:hover{text-decoration:none}.sg-logo svg{display:block}.sg-nav{display:flex;gap:1rem;margin-left:auto;align-items:center}.sg-nav a{color:var(--sg-text-soft);font-size:.925rem}.sg-nav a:hover,.sg-nav a[aria-current=page]{color:var(--sg-text);text-decoration:none}.sg-theme-toggle{appearance:none;border:1px solid var(--sg-border);background:var(--sg-bg-soft);color:var(--sg-text-soft);width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0}.sg-theme-toggle:hover{color:var(--sg-text);border-color:var(--sg-text-soft)}.sg-theme-toggle .sg-icon-sun{display:none}[data-theme=dark] .sg-theme-toggle .sg-icon-sun{display:block}[data-theme=dark] .sg-theme-toggle .sg-icon-moon{display:none}.sg-footer{border-top:1px solid var(--sg-border);margin-top:4rem;padding:1.75rem 0 2.25rem;color:var(--sg-text-soft);font-size:.875rem}.sg-footer a{color:inherit;text-decoration:underline}.sg-hero{padding:3rem 0 1.5rem}.sg-hero p{max-width:56ch;color:var(--sg-text-soft);font-size:1.05rem}.sg-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;padding:1rem 0 1.5rem}.sg-search{flex:1 1 260px;position:relative;max-width:420px}.sg-search input{width:100%;padding:.55rem 2.4rem .55rem 2.3rem;border:1px solid var(--sg-border);border-radius:999px;background:var(--sg-bg-soft);color:var(--sg-text);font:inherit;font-size:.925rem}.sg-search input::placeholder{color:var(--sg-text-soft)}.sg-search svg{position:absolute;left:.8rem;top:50%;translate:0 -50%;color:var(--sg-text-soft);pointer-events:none}.sg-search kbd{position:absolute;right:.7rem;top:50%;translate:0 -50%;border:1px solid var(--sg-border);border-radius:5px;padding:0 .4rem;font-family:var(--sg-mono);font-size:.72rem;color:var(--sg-text-soft);background:var(--sg-bg)}.sg-chips{display:flex;flex-wrap:wrap;gap:.4rem}.sg-chip{appearance:none;font:inherit;font-size:.8rem;padding:.28rem .75rem;border-radius:999px;border:1px solid var(--sg-border);background:var(--sg-bg-soft);color:var(--sg-text-soft);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.sg-chip:hover{border-color:var(--sg-accent);color:var(--sg-text);text-decoration:none}.sg-chip[aria-pressed=true],.sg-chip.sg-chip-active{background:var(--sg-accent-soft);border-color:var(--sg-accent);color:var(--sg-accent-ink)}.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;padding-bottom:2rem}.sg-card{border:1px solid var(--sg-border);border-radius:var(--sg-radius);background:var(--sg-bg-soft);overflow:hidden;transition:transform .15s ease,border-color .15s ease;display:flex;flex-direction:column}.sg-card:hover{transform:translateY(-2px);border-color:var(--sg-accent)}.sg-card[hidden]{display:none}.sg-card-preview{position:relative;height:170px;background:linear-gradient(45deg,var(--sg-bg-inset) 25%,transparent 25%,transparent 75%,var(--sg-bg-inset) 75%) 0 0 / 20px 20px,linear-gradient(45deg,var(--sg-bg-inset) 25%,transparent 25%,transparent 75%,var(--sg-bg-inset) 75%) 10px 10px / 20px 20px,var(--sg-bg);border-bottom:1px solid var(--sg-border)}.sg-card-preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}.sg-card-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}.sg-card-title{font-weight:600;font-size:1rem;color:var(--sg-text);margin:0}.sg-card-title a{color:inherit}.sg-card-title a:after{content:"";position:absolute;inset:0}.sg-card{position:relative}.sg-card-meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:auto}.sg-badge{font-size:.72rem;padding:.12rem .55rem;border-radius:999px;border:1px solid var(--sg-border);color:var(--sg-text-soft);background:var(--sg-bg);white-space:nowrap}.sg-badge-cat{border-color:var(--sg-accent);color:var(--sg-accent-ink);background:var(--sg-accent-soft)}.sg-badge-new{background:var(--sg-accent-ink);border-color:var(--sg-accent-ink);color:var(--sg-bg);font-weight:600}.sg-badge-beginner{color:var(--sg-ok);border-color:currentColor}.sg-badge-intermediate{color:var(--sg-accent-ink);border-color:currentColor}.sg-badge-advanced{color:var(--sg-err);border-color:currentColor}.sg-empty{padding:3rem 0;text-align:center;color:var(--sg-text-soft)}.sg-count{font-size:.85rem;color:var(--sg-text-soft);margin-left:auto}.sg-detail-head{padding:2rem 0 1rem}.sg-breadcrumb{font-size:.85rem;color:var(--sg-text-soft);margin-bottom:.75rem}.sg-breadcrumb a{color:inherit}.sg-detail-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}.sg-detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:1.5rem;align-items:start}@media(max-width:860px){.sg-detail-grid{grid-template-columns:1fr}}.sg-panel{border:1px solid var(--sg-border);border-radius:var(--sg-radius);background:var(--sg-bg-soft);overflow:hidden}.sg-panel-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-bottom:1px solid var(--sg-border);font-size:.85rem;color:var(--sg-text-soft)}.sg-panel-bar strong{color:var(--sg-text);font-weight:600}.sg-panel-bar .sg-spacer{margin-left:auto}.sg-preview-stage{position:relative;height:340px}.sg-preview-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.sg-bg-toggle{display:inline-flex;border:1px solid var(--sg-border);border-radius:999px;overflow:hidden}.sg-bg-toggle button{appearance:none;border:0;background:transparent;color:var(--sg-text-soft);font:inherit;font-size:.78rem;padding:.2rem .7rem;cursor:pointer}.sg-bg-toggle button[aria-pressed=true]{background:var(--sg-accent-soft);color:var(--sg-accent-ink)}.sg-customizer{display:flex;flex-direction:column;gap:.9rem;padding:1rem}.sg-control{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;align-items:center}.sg-control label{font-size:.85rem;font-weight:600}.sg-control output{font-family:var(--sg-mono);font-size:.78rem;color:var(--sg-text-soft);justify-self:end}.sg-control input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--sg-accent)}.sg-control input[type=color]{grid-column:1 / -1;width:100%;height:32px;padding:2px;border:1px solid var(--sg-border);border-radius:8px;background:var(--sg-bg);cursor:pointer}.sg-customizer-actions{display:flex;gap:.5rem}.sg-btn{appearance:none;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.875rem;font-weight:600;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--sg-border);background:var(--sg-bg-soft);color:var(--sg-text);cursor:pointer;transition:border-color .15s ease,background .15s ease}.sg-btn:hover{border-color:var(--sg-accent);text-decoration:none}.sg-btn-primary{background:var(--sg-accent-ink);border-color:var(--sg-accent-ink);color:var(--sg-bg)}.sg-btn-primary:hover{filter:brightness(.94)}.sg-btn-sm{padding:.3rem .7rem;font-size:.8rem}.sg-btn.sg-btn-done{border-color:var(--sg-ok);color:var(--sg-ok)}.sg-btn-primary.sg-btn-done{background:var(--sg-ok);color:#fff}.sg-codeblock{position:relative}.sg-codeblock pre{margin:0;padding:1rem 1.1rem;overflow:auto;font-family:var(--sg-mono);font-size:.82rem;line-height:1.55;max-height:560px;border-radius:0 0 var(--sg-radius) var(--sg-radius)}.sg-codeblock pre code{font-family:inherit}.sg-prose{max-width:72ch}.sg-prose p{color:var(--sg-text)}.sg-how{border-left:3px solid var(--sg-accent);background:var(--sg-accent-soft);border-radius:0 var(--sg-radius) var(--sg-radius) 0;padding:1rem 1.25rem;margin:1.25rem 0}.sg-how h2{font-size:1.05rem;margin-bottom:.35rem}.sg-how p{margin:0;color:var(--sg-text)}.sg-support-note{display:flex;gap:.5rem;align-items:baseline;border:1px solid var(--sg-border);border-radius:var(--sg-radius);background:var(--sg-bg-soft);padding:.65rem .9rem;font-size:.85rem;color:var(--sg-text-soft);margin:1rem 0 0}.sg-support-note strong{color:var(--sg-text);font-weight:600;white-space:nowrap}.sg-section{padding:1.5rem 0 0}.sg-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.sg-about{max-width:72ch;padding-top:2rem}.sg-about li{margin-bottom:.4em}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sg-card,.sg-chip,.sg-btn{transition:none}}