:root{color-scheme:light;--bg: #f7f4ef;--surface: #fffdf9;--text: #1f1a17;--muted: #6f655d;--accent: #d65a31;--accent-soft: #f4ddd3;--border: #e6ddd3;--shadow: 0 20px 50px rgba(47, 34, 22, .07);font-family:Inter,Noto Sans SC,system-ui,sans-serif;line-height:1.5;color:var(--text);background:radial-gradient(circle at top left,rgba(214,90,49,.1),transparent 30%),var(--bg)}*{box-sizing:border-box}body{margin:0}.page{width:min(920px,calc(100% - 32px));margin:0 auto;padding:40px 0 64px}.header{margin-bottom:32px}.header h1{margin:0 0 8px;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em}.header p{margin:0;color:var(--muted);font-size:1.05rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.showcase{margin-bottom:24px}.demo-stage{position:relative;min-height:220px;padding:28px 24px 20px}.perf-panel{position:absolute;top:12px;right:12px;z-index:2;min-width:168px;padding:10px 12px;border-radius:10px;background:#201915e0;color:#f6efe8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.45;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.perf-title{margin-bottom:6px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c8b9ad}.perf-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}.perf-row strong{margin-left:auto;font-weight:600}.perf-row.good strong{color:#8fd5a6}.perf-row.ok strong{color:#e8c27a}.perf-row.bad strong{color:#f08a7a}.perf-fps strong{font-size:.875rem}.perf-hint{width:100%;font-size:.625rem;color:#a8988c}.control-check{flex-direction:row;align-items:center;gap:10px;grid-column:1 / -1}.control-check input{width:auto}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 16px;padding:18px 20px 22px;border-top:1px solid var(--border)}.control{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;font-weight:600;color:var(--muted)}.control-wide{grid-column:1 / -1}.control input,.control select,.control textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-weight:400}.control input[type=color]{height:40px;padding:4px}.control textarea{resize:vertical;min-height:72px;font:inherit}.install{padding:24px}.install h2{margin:0 0 16px;font-size:1.125rem}.snippets{display:grid;gap:12px}.snippet{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#201915}.snippet-label{display:block;padding:8px 14px;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#c8b9ad;background:#2a211c;border-bottom:1px solid rgba(255,255,255,.06)}.snippet pre{margin:0;padding:14px 16px;overflow-x:auto;color:#f6efe8;font-size:.875rem;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}@media(max-width:640px){.page{padding-top:24px}.demo-stage{padding:20px 16px 16px}.controls{grid-template-columns:1fr;padding-inline:16px}}