*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--void:#000308;--abyss:#010a14;--shadow:#0a0f1e;--shadow-elevated:#0d1326;--shadow-surface:#111832;--monarch:#7c3aed;--monarch-bright:#8b5cf6;--monarch-dim:#4c1d95;--monarch-deep:#3b0764;--monarch-glow:#7c3aed66;--monarch-glow-intense:#7c3aedb3;--monarch-surface:#7c3aed14;--monarch-surface-hover:#7c3aed26;--cyan:#06b6d4;--cyan-bright:#22d3ee;--cyan-glow:#06b6d44d;--cyan-surface:#06b6d414;--gold:#f59e0b;--gold-bright:#fbbf24;--gold-dim:#f59e0b26;--gold-surface:#f59e0b0f;--danger:#ef4444;--danger-glow:#ef44444d;--success:#10b981;--success-bright:#34d399;--success-glow:#10b98166;--ghost-1:#ffffff08;--ghost-2:#ffffff0f;--ghost-3:#ffffff17;--ghost-4:#ffffff1f;--ghost-5:#ffffff2e;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-tertiary:#64748b;--text-muted:#334155;--text-ghost:#1e293b;--font-mono:"JetBrains Mono", "Share Tech Mono", "Fira Code", monospace;--font-display:"Orbitron", monospace;--font-ui:"Rajdhani", system-ui, sans-serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-monarch:0 4px 24px var(--monarch-glow);--shadow-monarch-intense:0 8px 40px var(--monarch-glow-intense);--shadow-cyan:0 4px 24px var(--cyan-glow)}html{scroll-behavior:smooth}body{background:var(--void);color:var(--text-primary);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--monarch-dim);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--monarch)}::selection{color:#fff;background:#7c3aed59}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px var(--monarch-glow), 0 0 40px #7c3aed26}50%{box-shadow:0 0 30px var(--monarch-glow-intense), 0 0 60px var(--monarch-glow), 0 0 80px #7c3aed1a}}@keyframes border-flow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ripple-out{0%{opacity:.6;transform:scale(0)}to{opacity:0;transform:scale(4)}}@keyframes typewriter-cursor{0%,to{border-right-color:var(--monarch)}50%{border-right-color:#0000}}@keyframes matrix-fall{0%{opacity:1;transform:translateY(-100%)}90%{opacity:1}to{opacity:0;transform:translateY(100vh)}}@keyframes scanline-move{0%{top:-10%}to{top:110%}}@keyframes data-stream{0%{background-position:0 0}to{background-position:0 -200px}}.error-boundary{z-index:9999;background:var(--void,#000308);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.error-glitch-bg{pointer-events:none;position:absolute;inset:0}.glitch-line{background:#ef444426;height:1px;animation:3s ease-in-out infinite alternate glitch-scan;position:absolute;left:0;right:0}.glitch-line:nth-child(odd){background:#7c3aed1a}@keyframes glitch-scan{0%{opacity:.3;transform:translateY(0)}50%{opacity:.8}to{opacity:.1;transform:translateY(100vh)}}.error-content{z-index:1;text-align:center;max-width:520px;padding:32px;position:relative}.error-icon{margin-bottom:16px;font-size:48px;animation:2s ease-in-out infinite pulse}.error-title{color:#ef4444;text-shadow:0 0 30px #ef444466;letter-spacing:.1em;margin-bottom:4px;font-family:Orbitron,monospace;font-size:clamp(22px,4vw,36px);font-weight:900}.error-subtitle{color:#ef444499;letter-spacing:.3em;text-transform:uppercase;margin-bottom:28px;font-family:Rajdhani,sans-serif;font-size:14px;font-weight:600}.error-terminal{text-align:left;background:#010a14e6;border:1px solid #ffffff1a;border-radius:8px;margin-bottom:28px;overflow:hidden}.error-terminal-bar{background:#ffffff0a;border-bottom:1px solid #ffffff0f;align-items:center;gap:6px;padding:10px 14px;display:flex}.et-dot{border-radius:50%;width:10px;height:10px}.et-r{background:#ff5f57}.et-y{background:#ffbd2e}.et-g{background:#28c840}.et-filename{color:#ffffff4d;letter-spacing:.1em;margin-left:8px;font-family:Rajdhani,sans-serif;font-size:11px}.error-terminal-body{padding:16px;font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.6}.et-prefix{color:#ef4444;margin-right:8px;font-weight:700}.et-message{color:#f1f5f9;word-break:break-word}.et-stack{color:#fff6;white-space:pre-wrap;word-break:break-word;background:#0000004d;border-radius:4px;max-height:150px;margin-top:12px;padding:10px;font-size:10px;line-height:1.5;overflow:auto}.reboot-btn{color:#fff;letter-spacing:.15em;cursor:pointer;background:linear-gradient(135deg,#ef4444,#b91c1c);border:none;border-radius:8px;align-items:center;gap:10px;margin-bottom:16px;padding:14px 28px;font-family:Orbitron,monospace;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 24px #ef44444d}.reboot-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px #ef444480}.reboot-icon{font-size:18px}.error-hint{color:#ffffff40;letter-spacing:.05em;font-family:Rajdhani,sans-serif;font-size:12px}.header{z-index:10;padding:var(--space-3xl) var(--space-xl) var(--space-xl);border-bottom:1px solid var(--ghost-3);background:linear-gradient(#7c3aed0f 0%,#7c3aed05 40%,#0000 100%);position:relative;overflow:hidden}.header-border-glow{background:linear-gradient(90deg, transparent 0%, var(--monarch-dim) 20%, var(--monarch) 50%, var(--monarch-dim) 80%, transparent 100%);height:2px;box-shadow:0 0 20px var(--monarch-glow), 0 0 40px #7c3aed26;position:absolute;top:0;left:0;right:0}.header-content{max-width:1400px;margin:0 auto}.header-badge{background:var(--gold-dim);border-radius:var(--radius-full);margin-bottom:var(--space-lg);opacity:0;animation:fadeInDown .6s var(--ease-out) .2s forwards;border:1px solid #f59e0b40;align-items:center;gap:10px;padding:5px 16px;display:inline-flex}.badge-pulse{background:var(--gold);width:7px;height:7px;box-shadow:0 0 8px var(--gold);border-radius:50%;animation:1.4s step-end infinite blink}.badge-text{font-family:var(--font-ui);letter-spacing:.25em;color:var(--gold);text-transform:uppercase;font-size:10px;font-weight:600}.header-title-block{opacity:0;animation:fadeInUp .8s var(--ease-out) .4s forwards}.header-title{font-family:var(--font-display);letter-spacing:.04em;font-size:clamp(24px,4.5vw,52px);font-weight:900;line-height:1.1}.title-line-1{color:var(--text-primary);display:block}.title-line-2{margin-top:4px;display:block}.glitch-text{color:var(--monarch);text-shadow:0 0 30px var(--monarch-glow);display:inline-block;position:relative}.glitch-text:before,.glitch-text:after{content:attr(data-text);pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.glitch-text:before{color:var(--cyan);clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%);opacity:0;animation:5s infinite glitch-1;transform:translate(-2px)}.glitch-text:after{color:var(--danger);clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);opacity:0;animation:5s .4s infinite glitch-2;transform:translate(2px)}@keyframes glitch-1{0%,89%,to{opacity:0;transform:translate(0)}90%{opacity:.8;transform:translate(-4px,1px)}92%{opacity:0}94%{opacity:.6;transform:translate(3px,-1px)}96%{opacity:0}}@keyframes glitch-2{0%,90%,to{opacity:0;transform:translate(0)}91%{opacity:.7;transform:translate(4px,-2px)}93%{opacity:0}95%{opacity:.5;transform:translate(-2px,1px)}97%{opacity:0}}.header-subtitle{font-family:var(--font-ui);color:var(--text-tertiary);letter-spacing:.04em;margin-top:var(--space-md);max-width:720px;font-size:15px;font-weight:400;line-height:1.7}.header-subtitle em{color:var(--cyan);font-style:normal;font-weight:600}.stats-grid{margin-top:var(--space-xl);opacity:0;animation:fadeInUp .8s var(--ease-out) .7s forwards;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.stat-card{background:var(--ghost-1);border:1px solid var(--ghost-3);border-radius:var(--radius-md);cursor:default;transition:all .3s var(--ease-out);opacity:0;align-items:center;gap:12px;padding:14px 16px;display:flex;position:relative;overflow:hidden;transform:translateY(10px)}.stat-card.stat-visible{animation:fadeInUp .5s var(--ease-out) forwards}.stat-card:before{content:"";background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%), #7c3aed1f 0%, transparent 60%);opacity:0;transition:opacity .3s;position:absolute;inset:0}.stat-card:hover:before{opacity:1}.stat-card:hover{border-color:#7c3aed59;transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.stat-icon-wrap{background:var(--ghost-2);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;display:flex}.stat-info{flex:1;min-width:0}.stat-value{font-family:var(--font-display);color:var(--monarch-bright);letter-spacing:.05em;font-size:15px;font-weight:700}.stat-label{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase;margin-top:2px;font-size:9px;font-weight:600}.stat-detail{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.1em;opacity:0;font-size:10px;transition:opacity .3s;position:absolute;top:6px;right:10px}.stat-card:hover .stat-detail{opacity:1}@media (width<=768px){.header{padding:var(--space-xl) var(--space-md) var(--space-lg)}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}}.sidebar{height:100vh;padding:var(--space-lg) var(--space-md);border-right:1px solid var(--ghost-3);-webkit-backdrop-filter:blur(16px);z-index:20;scrollbar-width:none;background:#000308d9;position:sticky;top:0;overflow-y:auto}.sidebar::-webkit-scrollbar{display:none}.sidebar-close-btn{display:none}.sidebar-section{margin-bottom:var(--space-sm)}.sidebar-title{font-family:var(--font-ui);letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase;padding:0 var(--space-sm);margin-bottom:var(--space-md);align-items:center;gap:8px;font-size:10px;font-weight:700;display:flex}.sidebar-title-icon{color:var(--monarch-dim);font-size:8px}.sidebar-nav{flex-direction:column;gap:3px;display:flex}.nav-item{border-radius:var(--radius-md);cursor:pointer;transition:all .25s var(--ease-out);font-family:var(--font-ui);color:var(--text-tertiary);letter-spacing:.06em;text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:12px;font-weight:500;display:flex;position:relative;overflow:hidden}.nav-item:before{content:"";background:var(--nav-color,var(--monarch));border-radius:0 var(--radius-sm) var(--radius-sm) 0;width:3px;height:0;transition:height .25s var(--ease-out);box-shadow:0 0 8px var(--nav-color,var(--monarch-glow));position:absolute;top:50%;left:0;transform:translateY(-50%)}.nav-item:hover{background:var(--ghost-2);color:var(--text-secondary);border-color:var(--ghost-3)}.nav-item:hover:before{height:60%}.nav-item.nav-active{color:var(--monarch-bright);background:#7c3aed1a;border-color:#7c3aed40}.nav-item.nav-active:before{height:70%}.nav-icon{text-align:center;flex-shrink:0;width:22px;font-size:14px}.nav-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.nav-indicator{background:var(--nav-color,var(--monarch));opacity:0;border-radius:50%;flex-shrink:0;width:5px;height:5px;transition:opacity .2s}.nav-item.nav-active .nav-indicator{opacity:1;box-shadow:0 0 6px var(--nav-color,var(--monarch))}.sidebar-divider{background:linear-gradient(90deg, transparent, var(--ghost-4), transparent);height:1px;margin:var(--space-lg) var(--space-sm)}.model-card{border-radius:var(--radius-lg);padding:var(--space-md);background:linear-gradient(135deg,#7c3aed1f 0%,#06b6d40f 100%);border:1px solid #7c3aed33;position:relative;overflow:hidden}.model-card-glow{background:radial-gradient(circle, var(--monarch-glow) 0%, transparent 70%);filter:blur(20px);pointer-events:none;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.model-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.model-name{font-family:var(--font-display);color:var(--monarch-bright);letter-spacing:.1em;font-size:11px;font-weight:700}.model-tier{font-family:var(--font-ui);letter-spacing:.2em;color:var(--gold);background:var(--gold-dim);border-radius:var(--radius-sm);padding:2px 6px;font-size:8px;font-weight:700}.model-desc{font-family:var(--font-ui);color:var(--text-tertiary);margin-bottom:var(--space-sm);font-size:11px;line-height:1.6}.thinking-badge{background:var(--cyan-surface);border-radius:var(--radius-full);font-family:var(--font-ui);color:var(--cyan);letter-spacing:.12em;border:1px solid #06b6d440;align-items:center;gap:6px;padding:4px 12px;font-size:9px;font-weight:600;display:inline-flex}.thinking-dot{background:var(--cyan);width:5px;height:5px;box-shadow:0 0 6px var(--cyan);border-radius:50%;animation:.9s step-end infinite blink}.shortcuts-list{padding:0 var(--space-sm);flex-direction:column;gap:8px;display:flex}.shortcut-item{font-family:var(--font-ui);color:var(--text-muted);align-items:center;gap:6px;font-size:11px;display:flex}.shortcut-item kbd{background:var(--ghost-2);border:1px solid var(--ghost-4);border-radius:var(--radius-sm);min-width:22px;height:20px;font-family:var(--font-mono);color:var(--text-tertiary);justify-content:center;align-items:center;padding:0 5px;font-size:9px;display:inline-flex}.shortcut-item span:last-child{color:var(--text-muted);margin-left:auto}.sidebar-backdrop{display:none}@media (width<=900px){.sidebar{width:280px;transition:transform .35s var(--ease-out);z-index:1001;border-right:1px solid var(--ghost-4);position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.sidebar-close-btn{border-radius:var(--radius-md);background:var(--ghost-2);border:1px solid var(--ghost-3);width:32px;height:32px;color:var(--text-tertiary);cursor:pointer;z-index:10;justify-content:center;align-items:center;font-size:14px;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.sidebar-close-btn:hover{background:var(--ghost-3);color:var(--text-primary)}.sidebar-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;display:block;position:fixed;inset:0}}.prompt-panel{padding:var(--space-lg) var(--space-xl);gap:var(--space-lg);flex-direction:column;min-width:0;display:flex}.panel-header{justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.panel-title-row{align-items:center;gap:10px;display:flex}.panel-dot{background:var(--monarch);width:7px;height:7px;box-shadow:0 0 10px var(--monarch);border-radius:50%;animation:2.5s ease-in-out infinite pulse}.panel-title{font-family:var(--font-display);color:var(--text-tertiary);letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:600}.panel-size{font-family:var(--font-mono);color:var(--text-muted);background:var(--ghost-2);border-radius:var(--radius-sm);letter-spacing:.05em;padding:2px 8px;font-size:10px}.panel-actions{gap:10px;display:flex}.copy-btn{border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-ui);letter-spacing:.1em;text-transform:uppercase;transition:all .3s var(--ease-out);background:linear-gradient(135deg, var(--monarch) 0%, #6d28d9 100%);color:#fff;box-shadow:var(--shadow-monarch);border:none;align-items:center;gap:10px;padding:11px 24px;font-size:12px;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.copy-btn:hover{box-shadow:0 8px 32px var(--monarch-glow-intense);transform:translateY(-2px)}.copy-btn:active{transform:translateY(0)}.copy-btn.copy-success{background:linear-gradient(135deg, var(--success) 0%, #047857 100%);box-shadow:0 4px 24px var(--success-glow)}.copy-icon{font-size:16px}.copy-ripple{border-radius:inherit;pointer-events:none;background:#fff3;animation:.5s forwards ripple-out;position:absolute;inset:0}.section-divider{align-items:center;gap:var(--space-md);display:flex}.section-divider:after{content:"";background:linear-gradient(90deg, var(--ghost-4), transparent);flex:1;height:1px}.section-divider-text{font-family:var(--font-ui);letter-spacing:.2em;color:var(--text-muted);text-transform:uppercase;white-space:nowrap;font-size:10px;font-weight:700}.prompt-container{border:1px solid var(--ghost-3);border-radius:var(--radius-lg);background:var(--abyss);transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);position:relative;overflow:hidden}.prompt-container:hover{border-color:#7c3aed33}.prompt-highlight-active{box-shadow:0 0 30px #7c3aed1a;border-color:#7c3aed59!important}.prompt-topbar{background:var(--ghost-1);border-bottom:1px solid var(--ghost-2);align-items:center;gap:8px;padding:10px 16px;display:flex}.prompt-dots{gap:6px;display:flex}.p-dot{border-radius:50%;width:11px;height:11px;transition:opacity .2s}.p-dot-r{background:#ff5f57}.p-dot-y{background:#ffbd2e}.p-dot-g{background:#28c840}.prompt-filename{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.08em;flex:1;margin-left:4px;font-size:11px}.prompt-topbar-actions{gap:8px;display:flex}.prompt-lang-badge{font-family:var(--font-mono);color:var(--monarch-bright);background:var(--monarch-surface);border-radius:var(--radius-sm);letter-spacing:.1em;border:1px solid #7c3aed33;padding:2px 8px;font-size:9px;font-weight:600}.prompt-body{scrollbar-width:thin;scrollbar-color:var(--monarch-dim) transparent;max-height:60vh;display:flex;overflow-y:auto}.prompt-body::-webkit-scrollbar{width:5px}.prompt-body::-webkit-scrollbar-thumb{background:var(--monarch-dim);border-radius:var(--radius-full)}.prompt-gutter{border-right:1px solid var(--ghost-2);-webkit-user-select:none;user-select:none;z-index:2;background:#00030880;min-width:48px;padding:18px 0;position:sticky;left:0}.gutter-line{font-family:var(--font-mono);color:var(--text-muted);text-align:right;padding-right:12px;font-size:11px;line-height:1.75;transition:color .2s}.prompt-code{font-family:var(--font-mono);color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;flex:1;min-width:0;padding:18px 20px;font-size:12px;line-height:1.75}.prompt-line{display:block}.syn-tag{color:var(--monarch-bright);text-shadow:0 0 8px var(--monarch-glow);font-weight:700}.syn-tag-close{color:var(--monarch);opacity:.7;font-weight:600}.syn-code{color:var(--cyan-bright);background:#06b6d414;border-radius:3px;padding:1px 4px;font-size:11px}.syn-key{color:var(--cyan);font-weight:600}.syn-num{color:var(--gold);font-weight:600}.syn-bullet{color:var(--monarch-bright)}.syn-heading{color:var(--text-primary);letter-spacing:.05em;font-weight:700}.syn-operator{color:var(--text-muted)}.syn-emoji{font-style:normal}.prompt-bottombar{background:var(--ghost-1);border-top:1px solid var(--ghost-2);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.prompt-info{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.05em;font-size:10px}@media (width<=768px){.prompt-panel{padding:var(--space-md)}.panel-header{flex-direction:column;align-items:flex-start}.copy-btn{justify-content:center;width:100%}.prompt-gutter{min-width:36px}.gutter-line{padding-right:8px;font-size:9px}.prompt-code{padding:14px 12px;font-size:11px}}.usage-section{padding:0 var(--space-xl) var(--space-xl)}.usage-divider{margin-bottom:var(--space-lg)}.usage-divider:after{content:"";background:linear-gradient(90deg, var(--ghost-4), transparent);flex:1;height:1px}.usage-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.usage-card{background:var(--ghost-1);border:1px solid var(--ghost-3);border-radius:var(--radius-lg);cursor:default;transition:all .35s var(--ease-out);opacity:0;padding:24px 20px 20px;position:relative;overflow:hidden;transform:translateY(16px)}.usage-card.usage-visible{animation:fadeInUp .6s var(--ease-out) forwards}.usage-card:hover{background:var(--ghost-2);border-color:#7c3aed4d;transform:translateY(-4px);box-shadow:0 8px 32px #0000004d,0 0 0 1px #7c3aed1a}.usage-card-glow{opacity:0;pointer-events:none;background:radial-gradient(circle,#7c3aed0f 0%,#0000 50%);width:200%;height:200%;transition:opacity .4s;position:absolute;top:-50%;left:-50%}.usage-card:hover .usage-card-glow{opacity:1}.usage-step-badge{background:var(--monarch-surface);border-radius:var(--radius-md);border:1px solid #7c3aed33;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:12px;right:12px}.usage-step-num{font-family:var(--font-display);color:var(--monarch-bright);letter-spacing:.05em;font-size:10px;font-weight:700}.usage-icon{transition:transform .3s var(--ease-spring);margin-bottom:14px;font-size:28px;display:inline-block}.usage-card:hover .usage-icon{transform:scale(1.15)}.usage-title{font-family:var(--font-ui);color:var(--text-primary);letter-spacing:.02em;margin-bottom:8px;font-size:16px;font-weight:700}.usage-desc{font-family:var(--font-ui);color:var(--text-tertiary);margin-bottom:14px;font-size:12px;font-weight:400;line-height:1.65}.usage-accent{background:var(--gold-dim);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--gold);letter-spacing:.03em;border:1px solid #f59e0b26;align-items:center;gap:6px;padding:4px 10px;font-size:10px;font-weight:500;display:inline-flex}.usage-accent-dot{background:var(--gold);width:4px;height:4px;box-shadow:0 0 4px var(--gold);border-radius:50%}.usage-note{margin-top:var(--space-lg);background:var(--cyan-surface);border:1px solid #06b6d426;border-left:3px solid var(--cyan);border-radius:var(--radius-md);align-items:flex-start;gap:12px;padding:16px 20px;display:flex}.usage-note-icon{flex-shrink:0;margin-top:1px;font-size:18px}.usage-note-text{font-family:var(--font-ui);color:var(--text-tertiary);font-size:13px;line-height:1.6}.usage-note-text strong{color:var(--cyan);font-weight:600}@media (width<=768px){.usage-section{padding:0 var(--space-md) var(--space-lg)}.usage-grid{grid-template-columns:1fr}}.footer{z-index:10;padding:20px var(--space-xl);border-top:1px solid var(--ghost-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00030899;position:relative}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1400px;margin:0 auto;display:flex}.footer-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.footer-brand{align-items:center;gap:6px;display:flex}.footer-sword{font-size:14px}.footer-brand-text{font-family:var(--font-display);color:var(--monarch-bright);letter-spacing:.12em;font-size:11px;font-weight:700}.footer-separator{color:var(--text-muted);font-size:16px}.footer-tagline{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.06em;font-size:11px}.footer-right{align-items:center;display:flex}.footer-tech-stack{flex-wrap:wrap;gap:6px;display:flex}.footer-tech-badge{font-family:var(--font-mono);color:var(--text-muted);background:var(--ghost-2);border:1px solid var(--ghost-3);border-radius:var(--radius-sm);letter-spacing:.04em;padding:3px 8px;font-size:9px;font-weight:500;transition:all .2s}.footer-tech-badge:hover{color:var(--text-tertiary);border-color:var(--ghost-4);background:var(--ghost-3)}.footer-border-glow{background:linear-gradient(90deg, transparent 0%, var(--monarch-dim) 30%, var(--monarch) 50%, var(--monarch-dim) 70%, transparent 100%);opacity:.5;height:1px;position:absolute;bottom:0;left:0;right:0}@media (width<=768px){.footer{padding:16px var(--space-md)}.footer-content{flex-direction:column;align-items:flex-start}.footer-tech-stack{gap:4px}}.copy-toast{z-index:9999;border-radius:var(--radius-md,8px);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a0f1ef2;border:1px solid #10b9814d;align-items:center;gap:10px;padding:14px 22px;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards toastSlideIn;display:flex;position:fixed;bottom:24px;right:24px;overflow:hidden;box-shadow:0 8px 32px #0006,0 0 20px #10b9811a}@keyframes toastSlideIn{0%{opacity:0;transform:translate(30px)translateY(10px)}to{opacity:1;transform:translate(0)translateY(0)}}.copy-toast-icon{flex-shrink:0;font-size:18px}.copy-toast-progress{background:linear-gradient(90deg,#10b981,#34d399);border-radius:0 0 0 8px;height:2px;animation:2.5s linear forwards toastProgress;position:absolute;bottom:0;left:0}@keyframes toastProgress{0%{width:100%}to{width:0%}}.app{z-index:5;opacity:0;min-height:100vh;transition:opacity 1s var(--ease-out);position:relative}.app.app-visible{opacity:1}.main-grid{grid-template-columns:260px 1fr;min-height:calc(100vh - 280px);display:grid;position:relative}.content-area{flex-direction:column;min-width:0;display:flex}.copy-flash-overlay{z-index:9999;pointer-events:none;background:#7c3aed14;animation:.3s forwards flash-fade;position:fixed;inset:0}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}.mobile-menu-btn{z-index:100;border:1px solid var(--ghost-4);border-radius:var(--radius-md);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0f1ee6;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;transition:all .2s;display:none;position:fixed;top:16px;left:16px}.mobile-menu-btn:hover{background:#7c3aed1a;border-color:#7c3aed66}.hamburger-line{background:var(--text-tertiary);border-radius:var(--radius-full);width:20px;height:2px;transition:all .2s}.mobile-menu-btn:hover .hamburger-line{background:var(--monarch-bright)}.copy-toast{z-index:9999;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:slideInRight .4s var(--ease-spring) forwards;background:#0a0f1ef2;border:1px solid #10b9814d;align-items:center;gap:10px;padding:12px 20px;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 8px 32px #0006}.copy-toast-icon{font-size:18px}.copy-toast-text{font-family:var(--font-ui);color:var(--success-bright);letter-spacing:.05em;font-size:13px;font-weight:600}@media (width<=900px){.main-grid{grid-template-columns:1fr}.mobile-menu-btn{display:flex}}@media (width<=480px){.mobile-menu-btn{width:40px;height:40px;top:10px;left:10px}}