:root,:root[data-theme=dark]{--bg:#0b0c10;--surface:#14161c;--surface-2:#1c1f27;--line:#262a35;--line-strong:#3a3f4d;--text:#e8eaf0;--muted:#8b91a1;--accent:#7c6cff;--accent-soft:#7c6cff24;--accent-2:#22d3ee;--topbar:#0b0c10cc;--shadow:0 12px 36px #0006;--checker-a:#101218;--checker-b:#0d0f14;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f6f7fa;--surface:#fff;--surface-2:#f0f1f5;--line:#e3e5eb;--line-strong:#c9cdd6;--text:#16181d;--muted:#6a7080;--accent:#5b4bf0;--accent-soft:#5b4bf01a;--accent-2:#0891b2;--topbar:#f6f7fad9;--shadow:0 12px 32px #1418281a;--checker-a:#eceef3;--checker-b:#e4e6ec;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root{--radius:14px}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font:15px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;transition:background .2s,color .2s}a{color:inherit}button,input,select{font:inherit;color:inherit}.topbar{z-index:20;background:var(--topbar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:10px 24px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;font-weight:700;text-decoration:none}.brand-mark{color:var(--accent)}.container{max-width:1400px;margin:0 auto;padding:28px 24px 80px}.icon-btn{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;color:var(--muted);cursor:pointer;border-radius:10px;place-items:center;text-decoration:none;transition:all .15s;display:inline-grid}.icon-btn:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-2)}.icon-btn.lg{width:42px;height:42px}.icon-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.icon-btn.primary:hover{filter:brightness(1.1);background:var(--accent);color:#fff}.layout{grid-template-columns:230px 1fr;align-items:start;gap:32px;display:grid}.sidebar{flex-direction:column;gap:8px;display:flex;position:sticky;top:80px}.side-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 2px 10px;font-size:11px;font-weight:600}.search{color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;align-items:center;gap:8px;padding:0 12px;display:flex}.search:focus-within{border-color:var(--accent)}.search input{min-width:0;color:var(--text);background:0 0;border:0;outline:none;flex:1;padding:9px 0}.cat-list{flex-direction:column;gap:2px;display:flex}.cat-list button{text-align:left;cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:14px;display:flex}.cat-list button span{opacity:.8;font-size:12px}.cat-list button:hover{background:var(--surface-2);color:var(--text)}.cat-list button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}.select{background:var(--surface);border:1px solid var(--line);border-radius:10px;outline:none;padding:8px 10px}.select:focus{border-color:var(--accent)}.results-head{align-items:baseline;gap:10px;margin-bottom:16px;display:flex}.results-head h1{letter-spacing:-.01em;margin:0;font-size:22px}.results-head span{color:var(--muted);font-size:14px}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;transition:all .2s;display:flex;overflow:hidden}.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}.thumb{aspect-ratio:16/10;background:#000;display:block;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%;transition:transform .4s;display:block}.card:hover .thumb img{transform:scale(1.03)}.no-preview{text-align:center;color:var(--muted);background:var(--surface-2);place-items:center;padding:16px;font-size:13px;display:grid;position:absolute;inset:0}.no-preview.big{border-radius:var(--radius);border:1px solid var(--line);height:360px;position:static}.badge{color:#fff;background:#7c6cffeb;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;position:absolute;top:10px;left:10px}.card{color:inherit;text-decoration:none}.card-body{padding:12px 16px 14px}.card-cat{color:var(--accent-2);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}.card-title{white-space:nowrap;text-overflow:ellipsis;margin:2px 0 0;font-size:15px;line-height:1.3;overflow:hidden}.pills{flex-wrap:wrap;gap:6px;display:flex}.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12px}.pill.muted{color:var(--muted)}.empty{color:var(--muted);text-align:center;padding:40px 0}.crumbs{color:var(--muted);margin-bottom:12px;font-size:14px}.crumbs a{color:var(--muted)}.crumbs span{margin:0 6px}.detail-head{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px;display:flex}.detail-head h1{letter-spacing:-.02em;margin:0 0 6px;font-size:clamp(24px,3.5vw,32px)}.lead{color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;max-width:760px;margin:0;display:-webkit-box;overflow:hidden}.detail-actions{flex-shrink:0;gap:8px;display:flex}.preview{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.preview-bar{border-bottom:1px solid var(--line);justify-content:space-between;gap:8px;padding:8px;display:flex}.seg{background:var(--bg);border:1px solid var(--line);border-radius:9px;gap:2px;padding:3px;display:flex}.seg button{cursor:pointer;width:32px;height:28px;color:var(--muted);background:0 0;border:0;border-radius:6px;place-items:center;display:grid}.seg button:hover{color:var(--text)}.seg button.on{background:var(--surface-2);color:var(--accent)}.preview-stage{background:repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 24px 24px;justify-content:center;display:flex}.preview-stage iframe{background:#fff;border:0;max-width:100%;height:72vh;min-height:480px;transition:width .3s}.preview-stage:fullscreen iframe{height:100vh}.meta{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:28px 0;display:grid}.meta h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px;font-size:12px}.meta p{margin:0}.section-title{margin:36px 0 12px;font-size:18px}.code{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.code-tabs{border-bottom:1px solid var(--line);display:flex;overflow-x:auto}.code-tabs button{border:0;border-right:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;padding:9px 14px;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.code-tabs button.on{color:var(--text);background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--accent)}.code-tabs .copy{border-left:1px solid var(--line);border-right:0;margin-left:auto}.code pre{tab-size:2;max-height:520px;margin:0;padding:16px;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}.code-note{color:var(--muted);margin:0;padding:0 16px 12px;font-size:13px}.related{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.related-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;text-decoration:none;display:block;overflow:hidden}.related-card img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}.related-card span{padding:8px 12px;font-size:14px;font-weight:500;display:block}.related-card:hover{border-color:var(--accent)}@media (max-width:820px){.container{padding:20px 16px 60px}.topbar{padding:10px 16px}.layout{grid-template-columns:1fr;gap:16px}.sidebar{position:static}.side-title{display:none}.cat-list{flex-direction:row;gap:6px;padding-bottom:4px;overflow-x:auto}.cat-list button{border:1px solid var(--line);border-radius:999px;flex-shrink:0;gap:6px;padding:6px 12px}.grid{grid-template-columns:1fr}.detail-head{flex-direction:column;align-items:flex-start}.preview-stage iframe{min-height:420px}}