*,*:before,*:after{box-sizing:border-box}:root{--bg: #0b0f1a;--bg-soft: #111827;--surface: #ffffff;--surface-muted: #f8fafc;--border: #e2e8f0;--border-strong: #cbd5e1;--text: #0f172a;--text-muted: #64748b;--text-faint: #94a3b8;--accent: #7c3aed;--accent-2: #06b6d4;--radius: 0;--radius-sm: 0;--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);--shadow-hover: 0 4px 16px rgba(15, 23, 42, .1), 0 12px 32px rgba(15, 23, 42, .08);--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--cols: 3;--header-h: 65px;--shell-max: none}[data-font=jetbrains]{--font-mono: "JetBrains Mono", ui-monospace, monospace}[data-font=fira]{--font-mono: "Fira Code", ui-monospace, monospace}[data-font=geist]{--font-mono: "Geist Mono", ui-monospace, monospace}[data-font=source]{--font-mono: "Source Code Pro", ui-monospace, monospace}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);color:var(--text);background:#f1f5f9;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}code{font-family:var(--font-mono);font-size:.9em}.site-header{position:sticky;top:0;z-index:20;background:#ffffffe6;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}.site-header__inner{max-width:var(--shell-max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand__logo{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;font-size:20px;font-weight:800}.brand__title{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.1}.site-nav{display:flex;gap:14px;font-size:13px;font-weight:600}.site-nav a{color:var(--text-muted);padding:6px 10px;border-radius:999px;border:1px solid transparent}.site-nav a:hover{color:var(--text);background:var(--surface-muted);text-decoration:none;border-color:var(--border)}@media(max-width:640px){.site-nav{display:none}}.controls{position:sticky;top:var(--header-h);z-index:15;background:#fff;border-bottom:1px solid #f1f5f9}.controls__inner{max-width:var(--shell-max);margin:0 auto;padding:10px 20px 8px}.controls__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.icon-group{display:flex;background:#f8fafc;border:0;border-radius:6px;padding:2px;gap:2px}.icon-group--scroll{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;max-width:100%;min-width:0;scrollbar-width:none;overscroll-behavior-x:contain}.icon-group--scroll::-webkit-scrollbar{display:none}.icon-group--scroll .icon-btn{flex:0 0 auto;scroll-snap-align:start}.icon-btn{width:32px;height:28px;display:grid;place-items:center;border:0;background:transparent;border-radius:4px;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;line-height:1}.icon-btn.is-active{background:#0f172a;color:#fff}.icon-btn[data-filter=all]:not(.is-active),.icon-btn[data-filter=light]:not(.is-active),.icon-btn[data-filter=dark]:not(.is-active){color:#64748b}.select{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:500;background:#f8fafc;border:0;padding:5px 8px;border-radius:6px}.select select{border:0;background:transparent;font-size:12px;font-weight:600;color:var(--text);outline:none;cursor:pointer}.rows-control{gap:4px}.rows-control input[type=range]{width:64px;accent-color:var(--text);cursor:pointer}.rows-control input[type=range]:disabled{opacity:.35;cursor:not-allowed}.rows-value{font-size:11px;font-weight:600;color:var(--text-muted);min-width:1em;text-align:right}.custom-code-row{display:flex;gap:6px;margin:0 0 14px}.custom-code-row textarea{flex:1;min-height:72px;max-height:240px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#f8fafc;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text);resize:vertical;outline:none}.custom-code-row textarea:focus{border-color:#cbd5e1;background:#fff}.custom-code-row textarea::placeholder{color:var(--text-faint)}.main{max-width:var(--shell-max);margin:0 auto;padding:18px 20px 32px}.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px}@media(max-width:900px){.grid{grid-template-columns:repeat(min(var(--cols),2),1fr)}}@media(max-width:640px){.grid{grid-template-columns:1fr}}.grid[data-cols="1"] .preview pre{font-size:13.5px}.grid[data-cols="2"] .preview pre{font-size:12.5px}.grid[data-cols="3"] .preview pre{font-size:11.8px}.empty{text-align:center;color:var(--text-muted);padding:40px 0}.card__name{display:none;padding:6px 10px;font-size:11px;font-weight:600;color:var(--text-muted);background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(hover:none){.card__name{display:block}}.card{background:#fff;border:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px #0f172a0f,0 4px 12px #0f172a0d;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0f172a1a,0 8px 24px #0f172a12}.card:active{transform:translateY(0)}.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card__spot{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:800;letter-spacing:-.01em;text-align:center;color:var(--card-fg, var(--text));opacity:0;transform:scale(.92);transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.5,.64,1);pointer-events:none}.card .preview pre{transition:opacity .22s ease,filter .22s ease}@media(hover:hover){.card:hover .preview pre{opacity:.18;filter:blur(1.5px)}.card:hover .card__spot{opacity:1;transform:scale(1)}}.card:focus-visible .preview pre{opacity:.18;filter:blur(1.5px)}.card:focus-visible .card__spot{opacity:1;transform:scale(1)}@media(prefers-reduced-motion:reduce){.card__spot,.card .preview pre,.preview{transition:none}}.preview{position:relative;margin:0;border:0;border-radius:0;overflow:hidden;background:#fff;min-height:72px;transition:background-color .18s ease}.preview pre{margin:0;padding:12px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;overflow:auto;white-space:pre}.preview code{font-family:inherit}.preview .shiki{margin:0}.site-footer{max-width:var(--shell-max);margin:0 auto;padding:18px 20px 28px;font-size:12px;color:var(--text-faint);text-align:center}.dialog{width:min(880px,calc(100vw - 24px));height:min(78vh,720px);max-height:78vh;border:1px solid var(--border);border-radius:16px;padding:0;box-shadow:0 20px 60px #0f172a33;overflow:hidden;flex-direction:column}.dialog[open]{display:flex}.dialog::backdrop{background:#0f172a80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog__form{position:absolute;top:10px;right:10px;z-index:2}.dialog__close{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}.dialog__inner{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}.dialog__head{padding:20px 56px 16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dialog__title{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}.dialog__subtitle{margin:4px 0 0;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.dialog__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.badge{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.02em}.badge--light{background:#f1f5f9;color:#475569;border:1px solid var(--border)}.badge--dark{background:#0f172a;color:#fff}.dialog__preview-wrap{padding:16px;background:var(--surface-muted);border-bottom:1px solid var(--border)}.dialog__preview{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;flex:1;min-height:0}.dialog__preview pre{margin:0;padding:16px 18px;font-family:var(--font-mono);font-size:13px;line-height:1.7;overflow:auto;max-height:420px}.dialog__lang-switch{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.dialog__lang-switch button{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer}.dialog__lang-switch button.is-active{background:var(--text);color:#fff;border-color:var(--text)}.preview pre::-webkit-scrollbar,.dialog__preview pre::-webkit-scrollbar{height:6px}.preview pre::-webkit-scrollbar-thumb,.dialog__preview pre::-webkit-scrollbar-thumb{background:#94a3b880;border-radius:999px}