@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}:root,[data-theme=dark]{--bg-canvas:#0a0a12;--bg-card:#15121f;--bg-raised:#1c1830;--bg-border:#2e2842;--bg-hover:#221d35;--indigo:#7c3aed;--indigo-brand:#8b5cf6;--indigo-label:#a78bfa;--indigo-light:#c4b2fb;--indigo-dim:#1e1638;--amber:#fb6514;--amber-dark:#ea580c;--gold:#facc15;--gold-dark:#d4a017;--logo-q:#facc15;--blue:#93c5fd;--error:#f87171;--success:#34d399;--warning:#fbbf24;--text-primary:#ece6f7;--text-secondary:#a39bc4;--text-tertiary:#6e6796;--text-on-indigo:#fff;--text-on-amber:#0a0a12;--text-on-gold:#0a0a12;--logo-wordmark:#ece6f7;--font-display:"Montserrat", sans-serif;--font-body:"Montserrat", sans-serif;--font-data:"Roboto Mono", ui-monospace, monospace;--font-mono:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}[data-theme=light]{--bg-canvas:#f8f6ff;--bg-card:#fff;--bg-raised:#f1ecfe;--bg-border:#e3dafb;--bg-hover:#ece4fd;--indigo:#6d28d9;--indigo-brand:#7c3aed;--indigo-label:#6d28d9;--indigo-light:#a78bfa;--indigo-dim:#f1ecfe;--amber:#c2410c;--amber-dark:#9a3412;--gold:#92590e;--gold-dark:#78460f;--logo-q:#facc15;--blue:#1d4ed8;--error:#b91c1c;--success:#047857;--warning:#92400e;--text-primary:#1a1530;--text-secondary:#4a4170;--text-tertiary:#6e6796;--text-on-indigo:#fff;--text-on-amber:#fff;--text-on-gold:#fff;--logo-wordmark:#1a375d}body{background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-body);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-kerning:normal;font-size:16px;font-weight:400;line-height:1.62;transition:background .25s,color .25s}.header{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:.5px solid var(--bg-border);background:#0a0a12d1;transition:background .25s;position:sticky;top:0}[data-theme=light] .header{background:#f8f6ffe0}.header-inner{justify-content:space-between;align-items:center;max-width:1100px;height:60px;margin:0 auto;padding:0 32px;display:flex}.logo-text{font-family:var(--font-display);letter-spacing:-.035em;color:var(--text-primary);font-size:18px;font-weight:900}.header-right{align-items:center;gap:16px;display:flex}.version-tag{font-family:var(--font-data);color:var(--text-tertiary);letter-spacing:.02em;font-size:11px}@media (max-width:600px){.version-tag{display:none}}.theme-toggle{background:var(--bg-card);border:.5px solid var(--bg-border);cursor:pointer;font-family:var(--font-body);color:var(--text-secondary);border-radius:24px;align-items:center;gap:7px;padding:7px 14px;font-size:13px;font-weight:600;transition:background .15s,color .15s;display:flex}.theme-toggle:hover{background:var(--bg-raised);color:var(--text-primary)}.page{max-width:1100px;margin:0 auto;padding:0 32px 120px}@media (max-width:720px){.page{padding:0 20px 80px}}.hero{border-bottom:.5px solid var(--bg-border);margin-bottom:64px;padding:72px 0 56px;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#8b5cf61f 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-120px;right:-160px}.hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#facc150f 0%,#0000 70%);border-radius:50%;width:400px;height:400px;position:absolute;bottom:-80px;left:30%}.hero-eyebrow{font-family:var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-label);align-items:center;gap:10px;margin-bottom:20px;font-size:11px;font-weight:700;display:flex}.hero-eyebrow:before{content:"";background:var(--indigo-label);width:28px;height:1px}.hero-title{font-family:var(--font-display);letter-spacing:-.055em;color:var(--text-primary);margin-bottom:24px;font-size:clamp(46px,7vw,86px);font-weight:900;line-height:.94}.hero-title span{color:var(--gold)}.hero-sub{color:var(--text-secondary);max-width:560px;margin-bottom:40px;font-size:16px;font-weight:500;line-height:1.75}.hero-meta{flex-wrap:wrap;gap:32px;display:flex}.hero-meta-item{flex-direction:column;gap:4px;display:flex}.hero-meta-label{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);font-size:10px;font-weight:700}.hero-meta-val{font-family:var(--font-display);color:var(--text-primary);font-size:14px;font-weight:700}.section{margin-bottom:80px}.section-header{border-bottom:.5px solid var(--bg-border);flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:32px;padding-bottom:16px;display:flex}.section-num{font-family:var(--font-data);color:var(--text-tertiary);letter-spacing:.08em;min-width:28px;font-size:11px;font-weight:700}.section-title{font-family:var(--font-display);letter-spacing:-.035em;color:var(--text-primary);font-size:24px;font-weight:800}.section-desc{color:var(--text-secondary);text-align:right;max-width:360px;margin-left:auto;font-size:14px;font-weight:500;line-height:1.55}@media (max-width:680px){.section-desc{display:none}}.rule-bar{border:.5px solid var(--bg-border);border-radius:14px;height:56px;margin-bottom:16px;display:flex;overflow:hidden}.rule-seg{font-family:var(--font-body);color:var(--text-secondary);justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.rule-bar-legend{flex-wrap:wrap;gap:24px;margin-top:12px;display:flex}.rbl-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.rbl-dot{border-radius:3px;flex-shrink:0;width:10px;height:10px}.rule-note{color:var(--text-secondary);background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:12px;margin-top:20px;padding:16px 20px;font-size:13px;line-height:1.7}.rule-note strong{color:var(--text-primary)}.ramp{margin-bottom:20px}.ramp-name{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:8px;font-size:11px;font-weight:700}.ramp-stops{border-radius:10px;grid-template-columns:repeat(12,1fr);gap:4px;display:grid;overflow:hidden}@media (max-width:640px){.ramp-stops{grid-template-columns:repeat(6,1fr)}}.ramp-stop{aspect-ratio:1;cursor:pointer;transition:transform .15s;position:relative}.ramp-stop:hover{z-index:2;transform:scaleY(1.3)}.ramp-stop-inner{flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:6px 4px 4px;display:flex}.ramp-stop-num{font-family:var(--font-mono);opacity:0;font-size:9px;font-weight:500;line-height:1;transition:opacity .15s}.ramp-stop:hover .ramp-stop-num{opacity:1}.ramp-star{outline-offset:-4px;outline:2px solid #fffc}.semantic-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.sem-card{background:var(--bg-card);border:.5px solid var(--bg-border);border-top-width:3px;border-radius:14px;padding:20px;transition:background .2s}.sem-card:hover{background:var(--bg-raised)}.sem-swatch{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:14px;font-size:18px;display:flex}.sem-name{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.02em;margin-bottom:4px;font-size:15px;font-weight:800}.sem-hex{font-family:var(--font-mono);color:var(--text-tertiary);margin-bottom:10px;font-size:12px}.sem-use{color:var(--text-secondary);font-size:12px;line-height:1.5}.sem-ratio{font-family:var(--font-mono);border-radius:6px;margin-top:10px;padding:3px 8px;font-size:11px;display:inline-block}.ct-wrap{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;overflow:hidden}.contrast-table{border-collapse:collapse;width:100%}.contrast-table th{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);text-align:left;border-bottom:.5px solid var(--bg-border);padding:10px 14px;font-size:10px;font-weight:700}.contrast-table td{border-bottom:.5px solid var(--bg-border);vertical-align:middle;color:var(--text-primary);padding:12px 14px;font-size:13px}.contrast-table tr:last-child td{border-bottom:none}.contrast-table tr:hover td{background:var(--bg-hover)}.ct-swatch{border:.5px solid #ffffff14;border-radius:8px;flex-shrink:0;width:32px;height:32px}.ct-name{color:var(--text-primary);font-weight:600}.ct-hex{font-family:var(--font-mono);color:var(--text-tertiary);font-size:11px}.ct-ratio{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.ct-pass{color:var(--success)}.ct-context{color:var(--text-secondary);font-size:12px}@media (max-width:640px){.ct-context,.contrast-table th:last-child,.contrast-table td:last-child{display:none}}.comp-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;display:grid}.comp-card{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;padding:24px}.comp-label{font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:20px;font-size:10px;font-weight:700}.comp-note{font-family:var(--font-data);color:var(--text-tertiary);letter-spacing:.04em;margin-top:12px;font-size:10px}.btn-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn{font-family:var(--font-body);cursor:pointer;letter-spacing:-.01em;border:none;border-radius:10px;align-items:center;gap:7px;padding:10px 20px;font-size:14px;font-weight:700;transition:opacity .15s,transform .12s;display:inline-flex}.btn:hover{opacity:.86;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--amber);color:var(--text-on-amber)}.btn-brand{background:var(--indigo);color:var(--text-on-indigo)}.btn-ghost{color:var(--indigo-label);border:1px solid var(--indigo);background:0 0}.btn-premium{background:var(--gold);color:var(--text-on-gold)}.btn-danger{color:var(--error);border:1px solid var(--error);background:0 0}.stepper{align-items:center;gap:10px;display:flex}.step-btn{background:var(--indigo);color:#fff;cursor:pointer;width:34px;height:34px;font-size:16px;font-family:var(--font-body);border:none;border-radius:50%;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.step-btn:hover{opacity:.8}.step-val{font-family:var(--font-display);text-align:center;min-width:28px;color:var(--text-primary);font-size:18px;font-weight:800}.cart-bar{background:var(--amber);border-radius:32px;justify-content:space-between;align-items:center;margin-top:12px;padding:13px 20px;display:flex}.cart-bar-text{color:var(--text-on-amber);font-size:13px;font-weight:500}.badge-row{flex-wrap:wrap;gap:8px;display:flex}.badge{font-family:var(--font-body);letter-spacing:.01em;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.badge-paid{color:var(--indigo-label);background:#8b5cf62e;border:1px solid #8b5cf652}.badge-vip{color:var(--gold);background:#facc1526;border:1px solid #facc154d}.badge-live{color:var(--success);background:#34d39926;border:1px solid #34d3994d}.badge-urgent{color:var(--amber);background:#fb651426;border:1px solid #fb651452}.badge-info{color:var(--blue);background:#93c5fd26;border:1px solid #93c5fd4d}.status-row{background:var(--bg-raised);border:.5px solid var(--bg-border);border-radius:12px;align-items:center;gap:12px;padding:14px;display:flex}.status-icon{background:#93c5fd26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.status-title{color:var(--text-primary);font-size:13px;font-weight:500}.status-sub{color:var(--blue);margin-top:2px;font-size:12px}.status-check{border:1.5px solid var(--blue);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;display:flex}.event-card{background:var(--bg-raised);border:.5px solid var(--bg-border);border-radius:12px;align-items:center;gap:12px;padding:14px;display:flex}.event-thumb{background:#8b5cf633;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.event-name{color:var(--text-primary);font-size:13px;font-weight:700}.event-meta{color:var(--text-tertiary);margin-top:2px;font-size:11px}.event-price{font-family:var(--font-display);color:var(--gold);margin-left:auto;font-size:15px;font-weight:800}.nav-bar{background:var(--bg-card);border-top:.5px solid var(--bg-border);border-radius:16px;justify-content:space-around;padding:12px 8px 8px;display:flex}.nav-item{cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:6px 14px;font-size:11px;transition:background .15s;display:flex}.nav-item:hover{background:var(--bg-raised)}.nav-active .nav-lbl{color:var(--indigo-label);font-weight:500}.nav-inactive .nav-lbl{color:var(--text-tertiary)}.type-wrap{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;padding:28px 32px}.type-samples{gap:24px;display:grid}.type-sample{border-bottom:.5px solid var(--bg-border);flex-wrap:wrap;align-items:baseline;gap:24px;padding-bottom:24px;display:flex}.type-sample:last-child{border-bottom:none}.type-meta{flex-shrink:0;min-width:140px}.type-meta-name{color:var(--text-secondary);margin-bottom:2px;font-size:12px;font-weight:700}.type-meta-spec{font-family:var(--font-data);color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-size:10px}.rules-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (max-width:680px){.rules-grid{grid-template-columns:1fr}}.rule-card{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:14px;padding:20px 22px}.rule-card.do{border-left:3px solid var(--success)}.rule-card.dont{border-left:3px solid var(--error)}.rule-tag{font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;font-size:10px;font-weight:800}.rule-card.do .rule-tag{color:var(--success)}.rule-card.dont .rule-tag{color:var(--error)}.rule-text{color:var(--text-secondary);font-size:13px;line-height:1.6}.rule-text strong{color:var(--text-primary);font-weight:700}.code-inline{font-family:var(--font-mono);color:var(--indigo-label);background:#8b5cf626;border-radius:4px;padding:1px 5px;font-size:11px}.token-section{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;overflow:hidden}.token-header{border-bottom:.5px solid var(--bg-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:14px 20px;display:flex}.token-header-name{font-family:var(--font-display);color:var(--text-primary);font-size:14px;font-weight:800}.token-header-desc{color:var(--text-tertiary);font-size:12px}.token-row{cursor:pointer;border-bottom:.5px solid #2e2b5266;grid-template-columns:40px 200px 1fr 110px;align-items:center;gap:12px;padding:10px 20px;transition:background .12s;display:grid}[data-theme=light] .token-row{border-bottom-color:#ddd6fe99}.token-row:last-child{border-bottom:none}.token-row:hover{background:var(--bg-hover)}.token-swatch{border:.5px solid #ffffff0f;border-radius:8px;flex-shrink:0;width:32px;height:32px}.token-name{font-family:var(--font-mono);color:var(--indigo-label);font-size:12px}.token-rgb{font-family:var(--font-mono);color:var(--text-tertiary);font-size:11px}.token-hex{font-family:var(--font-mono);color:var(--text-secondary);text-align:right;font-size:12px}@media (max-width:680px){.token-row{grid-template-columns:36px 1fr 90px}.token-rgb{display:none}}.copy-toast{background:var(--indigo);color:#fff;font-family:var(--font-mono);opacity:0;pointer-events:none;z-index:9999;white-space:nowrap;border-radius:32px;padding:10px 20px;font-size:13px;transition:opacity .2s,transform .2s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(12px)}.copy-toast.show{opacity:1;transform:translate(-50%)translateY(0)}.footer{border-top:.5px solid var(--bg-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:40px 0 0;display:flex}.footer-logo{font-family:var(--font-display);letter-spacing:-.035em;color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:900}.footer-sub{font-family:var(--font-data);color:var(--text-tertiary);font-size:11px}.footer-meta{color:var(--text-tertiary);text-align:right;font-size:12px;line-height:1.8}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.section{animation:.5s both fadeUp}.section:first-child{animation-delay:40ms}.section:nth-child(2){animation-delay:80ms}.section:nth-child(3){animation-delay:.12s}.section:nth-child(4){animation-delay:.16s}.section:nth-child(5){animation-delay:.2s}.section:nth-child(6){animation-delay:.24s}.section:nth-child(7){animation-delay:.28s}.section:nth-child(8){animation-delay:.32s}.section:nth-child(9){animation-delay:.36s}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-canvas)}::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:3px}.logo{align-items:center;gap:12px;display:flex}.logo-lockup{flex-shrink:0;width:auto;height:22px;display:block}.logo-divider{background:var(--bg-border);width:.5px;height:20px}.logo-tag{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);font-size:10px;font-weight:600}.hero-logo{align-items:center;margin-bottom:28px;display:flex}.hero-logo .logo-lockup{height:58px}.footer-logo-lockup{align-items:center;margin-bottom:8px;display:flex}.footer-logo-lockup .logo-lockup{height:26px}.logo-locked{background:var(--bg-card);border:.5px solid var(--bg-border);border-left:3px solid var(--gold);border-radius:0 16px 16px 0;margin-bottom:16px;padding:18px 22px}.logo-locked-label{font-family:var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px;font-size:10px}.logo-locked-text{color:var(--text-secondary);font-size:13.5px;line-height:1.65}.logo-locked-text strong{color:var(--text-primary);font-weight:700}.logo-never{background:var(--bg-canvas);border:.5px solid var(--bg-border);font-family:var(--font-mono);color:var(--error);border-radius:10px;margin-top:14px;padding:11px 15px;font-size:12px;line-height:1.5}.logo-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;display:grid}.logo-card{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;overflow:hidden}.logo-stage{justify-content:center;align-items:center;gap:12px;min-height:116px;padding:34px 24px;display:flex}.logo-stage.on-dark{background:#0a0a12}.logo-stage.on-light{background:#fff}.logo-stage.stacked{flex-direction:column;gap:12px}.logo-stage .logo-lockup{width:auto;height:34px}.logo-caption{border-top:.5px solid var(--bg-border);padding:13px 16px}.logo-caption-title{color:var(--text-primary);margin-bottom:3px;font-size:13px;font-weight:700}.logo-caption-sub{font-family:var(--font-mono);color:var(--text-tertiary);font-size:11px}.app-icon{background:#0a0a12;border:1.5px solid #2a2740;border-radius:18px;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.app-icon .logo-q-only{width:auto;height:48px}.type-families{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}@media (max-width:680px){.type-families{grid-template-columns:1fr}}.type-family-card{background:var(--bg-card);border:.5px solid var(--bg-border);border-radius:16px;padding:24px 26px}.type-family-spec{font-family:var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);font-variant-numeric:tabular-nums;margin-bottom:12px;font-size:10px}.type-family-name{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text-primary);margin-bottom:14px;font-size:40px;font-weight:800;line-height:1}.type-family-name.mono{font-family:var(--font-mono);letter-spacing:-.01em;font-size:34px;font-weight:600}.type-family-glyphs{color:var(--text-secondary);word-break:break-word;font-size:15px;line-height:1.5}.type-family-glyphs.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.type-family-use{border-top:.5px solid var(--bg-border);color:var(--text-secondary);margin-top:14px;padding-top:14px;font-size:12.5px;line-height:1.55}.type-family-use strong{color:var(--text-primary);font-weight:700}.type-weights{flex-wrap:wrap;gap:10px;margin-bottom:22px;display:flex}.type-weight{background:var(--bg-card);border:.5px solid var(--bg-border);text-align:center;border-radius:10px;min-width:96px;padding:10px 14px}.type-weight-glyph{font-family:var(--font-display);color:var(--text-primary);font-size:26px;line-height:1.1}.type-weight-name{font-family:var(--font-data);color:var(--text-tertiary);letter-spacing:.04em;margin-top:4px;font-size:10px}