.design-demo-shell{--demo-ease-out:cubic-bezier(.23, 1, .32, 1);--demo-ease-in-out:cubic-bezier(.77, 0, .175, 1);--demo-duration-fast:.16s;--demo-duration-enter:.28s;--design-demo-max-width:1200px;padding-bottom:4rem}.design-demo-header{max-width:var(--design-demo-max-width);margin:0 auto;padding:3rem 1.5rem 2rem}.design-demo-header h1{letter-spacing:-.02em;margin-bottom:.75rem;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700}.design-demo-header p{color:hsl(var(--muted-foreground));max-width:70ch;line-height:1.6}.design-demo-header code{background:hsl(var(--muted));border-radius:4px;padding:.1em .35em;font-family:JetBrains Mono,monospace;font-size:.85em}.design-demo-theme{max-width:var(--design-demo-max-width);margin:0 auto 3rem;padding:0 1.5rem}.design-demo-label{margin-bottom:1rem}.design-demo-number{border-radius:4px;margin-bottom:.5rem;padding:.25rem .5rem;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600;display:inline-block}.design-demo-label h2{margin-bottom:.25rem;font-size:1.5rem;font-weight:700}.design-demo-label>p{color:hsl(var(--muted-foreground));font-size:.95rem}.design-demo-canvas{border-radius:16px;position:relative;overflow:hidden}.design-demo-canvas .hero{grid-template-columns:1fr;gap:2rem;padding:2.5rem;display:grid}@media (width>=768px){.design-demo-canvas .hero{grid-template-columns:1.2fr .8fr;align-items:center}}.design-demo-canvas .badge-row{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.design-demo-canvas .badge{border-radius:9999px;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.design-demo-canvas h3{margin-bottom:1rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.1}.design-demo-canvas .hero-content>p{max-width:55ch;margin-bottom:1.5rem;font-size:1rem;line-height:1.6}.design-demo-canvas .hero-actions{flex-wrap:wrap;gap:.75rem;display:flex}.design-demo-canvas .btn{cursor:pointer;transition:transform var(--demo-duration-fast) var(--demo-ease-out), opacity var(--demo-duration-fast) var(--demo-ease-out);border:none;border-radius:8px;justify-content:center;align-items:center;padding:.65rem 1.25rem;font-size:.9rem;font-weight:600;display:inline-flex}.design-demo-canvas .btn:focus-visible{outline-offset:2px;outline:2px solid}.design-demo-canvas .btn:active{transition-duration:.1s;transform:scale(.97)}.design-demo-canvas .hero-art{aspect-ratio:1;justify-content:center;align-items:center;width:100%;max-width:280px;margin:0 auto;display:flex}.design-demo-canvas .art-inner{width:100%;height:100%}.design-demo-canvas .stats{border-top-width:1px;border-bottom-width:1px;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:1.5rem 2.5rem;display:grid}@media (width<=480px){.design-demo-canvas .stats{grid-template-columns:1fr;gap:.75rem}}.design-demo-canvas .stat{text-align:center}.design-demo-canvas .stat-value{font-variant-numeric:tabular-nums;font-family:JetBrains Mono,monospace;font-size:1.75rem;font-weight:700}.design-demo-canvas .stat-label{margin-top:.25rem;font-size:.8rem}.design-demo-canvas .cards{grid-template-columns:repeat(2,1fr);gap:1rem;padding:2rem 2.5rem;display:grid}@media (width>=640px){.design-demo-canvas .cards{grid-template-columns:repeat(4,1fr)}}.design-demo-canvas .card{transition:transform var(--demo-duration-fast) var(--demo-ease-out);border-radius:12px;padding:1.25rem;position:relative}@media (hover:hover) and (pointer:fine){.design-demo-canvas .btn-primary:hover{transform:translateY(-1px)}.design-demo-canvas .card:hover{transform:translateY(-2px)}.monochrome-data .design-demo-canvas .card:hover{transform:none}}.design-demo-canvas .btn-primary:active,.design-demo-canvas .btn-secondary:active,.design-demo-canvas .copy-btn:active{transition-duration:.1s;transform:scale(.97)}.design-demo-canvas .card-dot{border-radius:50%;width:8px;height:8px;margin-bottom:.75rem}.design-demo-canvas .card p{font-size:.9rem;line-height:1.4}.design-demo-canvas .codeblock{border-radius:12px;margin:0 2.5rem 2.5rem;overflow:hidden}.design-demo-canvas .codeblock-header{justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.8rem;font-weight:600;display:flex}.design-demo-canvas .codeblock pre{padding:1rem 1.25rem;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto}.design-demo-canvas .copy-btn{cursor:pointer;transition:transform var(--demo-duration-fast) var(--demo-ease-out);border:none;border-radius:4px;padding:.2rem .5rem;font-size:.75rem}@media (hover:hover) and (pointer:fine){.design-demo-canvas .copy-btn:hover{transform:scale(1.03)}}.design-demo-canvas .copy-btn[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none}.design-demo-canvas .stat,.design-demo-canvas .card{opacity:1;transition:opacity var(--demo-duration-enter) var(--demo-ease-out), transform var(--demo-duration-enter) var(--demo-ease-out);transition-delay:0s;transform:translateY(0);@starting-style{opacity:0;transform:translateY(8px)}}.design-demo-canvas .stat:first-child{transition-delay:0s}.design-demo-canvas .stat:nth-child(2){transition-delay:60ms}.design-demo-canvas .stat:nth-child(3){transition-delay:.12s}.design-demo-canvas .card:first-child{transition-delay:0s}.design-demo-canvas .card:nth-child(2){transition-delay:60ms}.design-demo-canvas .card:nth-child(3){transition-delay:.12s}.design-demo-canvas .card:nth-child(4){transition-delay:.18s}@media (prefers-reduced-motion:reduce){.design-demo-canvas .stat,.design-demo-canvas .card{transition:none}}.neural-quill .theme-number{color:#00e5ff;background:#00e5ff26;border:1px solid #00e5ff4d}.neural-quill .design-demo-canvas{background:radial-gradient(80% 50% at 20% 0,#00e5ff1f,#0000 60%),radial-gradient(60% 40% at 100% 100%,#ff5c0014,#0000 55%),#05080c;border:1px solid #00e5ff26;box-shadow:0 0 60px #00e5ff0f}.neural-quill .design-demo-canvas:before{content:"";pointer-events:none;background-image:linear-gradient(90deg,#00e5ff0a 1px,#0000 1px),linear-gradient(#00e5ff0a 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0;mask-image:radial-gradient(70% 70% at 50% 0,#000 0%,#0000 80%)}.neural-quill .badge{color:#00e5ff;background:#00e5ff1a;border:1px solid #00e5ff40}.neural-quill .badge-ghost{color:#94a3b8;background:0 0;border-color:#94a3b840}.neural-quill h3{color:#f8fafc;text-shadow:0 0 20px #00e5ff40}.neural-quill .hero-content>p{color:#94a3b8}.neural-quill .btn-primary{color:#020617;background:linear-gradient(135deg,#00e5ff,#00b8d4);box-shadow:0 0 20px #00e5ff59}@media (hover:hover) and (pointer:fine){.neural-quill .btn-primary:hover{box-shadow:0 0 30px #00e5ff80}}.neural-quill .btn-secondary{color:#00e5ff;background:0 0;border:1px solid #00e5ff66}@media (hover:hover) and (pointer:fine){.neural-quill .btn-secondary:hover{background:#00e5ff14}}.neural-quill .art-inner{clip-path:polygon(50% 0%,58% 35%,85% 40%,60% 55%,65% 100%,50% 75%,35% 100%,40% 55%,15% 40%,42% 35%);filter:drop-shadow(0 0 18px #00e5ff80);animation:neural-pulse 4s var(--demo-ease-in-out) infinite;background:radial-gradient(circle at 50% 40%,#ff5c0059,#0000 40%),conic-gradient(from 180deg,#00e5ff 0deg,#00b8d4 90deg,#00e5ff 180deg,#00b8d4 270deg,#00e5ff 360deg)}@keyframes neural-pulse{0%,to{filter:drop-shadow(0 0 12px #00e5ff66)}50%{filter:drop-shadow(0 0 28px #00e5ffb3)}}@media (prefers-reduced-motion:reduce){.neural-quill .art-inner{animation:none}}.neural-quill .stats{background:#00e5ff08;border-color:#00e5ff1a}.neural-quill .stat-value{color:#00e5ff}.neural-quill .stat-label{color:#64748b}.neural-quill .card{backdrop-filter:blur(8px);background:#02061799;border:1px solid #00e5ff1f}@media (hover:hover) and (pointer:fine){.neural-quill .card:hover{border-color:#00e5ff59;box-shadow:0 0 20px #00e5ff1a}}.neural-quill .card-dot{background:#ff5c00;box-shadow:0 0 8px #ff5c00}.neural-quill .card p{color:#cbd5e1}.neural-quill .codeblock{background:#020617cc;border:1px solid #00e5ff26}.neural-quill .codeblock-header{color:#00e5ff;background:#00e5ff14;border-bottom:1px solid #00e5ff1a}.neural-quill .codeblock pre{color:#e2e8f0}.neural-quill .copy-btn{color:#00e5ff;background:#00e5ff1f}.classical-scribe .theme-number{color:#3d2b1f;background:#f3e9d2;border:1px solid #d4c5a3}.classical-scribe .design-demo-canvas{background:radial-gradient(80% 60% at 50% 0,#d4c5a340,#0000 60%),#f8f3e8;border:1px solid #e6dcc3}.classical-scribe .badge{color:#5c4a32;background:#ede4cc;border:1px solid #d4c5a3}.classical-scribe .badge-ghost{color:#7d6b52;background:0 0}.classical-scribe h3{color:#2c1f16;font-family:Georgia,Times New Roman,serif}.classical-scribe .hero-content>p{color:#5c4a32}.classical-scribe .btn-primary{color:#f8f3e8;background:#2c1f16;border:1px solid #2c1f16}.classical-scribe .btn-secondary{color:#2c1f16;background:0 0;border:1px solid #2c1f16}.classical-scribe .art-inner{clip-path:polygon(50% 0%,55% 15%,62% 30%,68% 45%,72% 60%,74% 75%,75% 90%,70% 85%,65% 80%,60% 85%,55% 90%,50% 100%,45% 90%,40% 85%,35% 80%,30% 85%,25% 90%,26% 75%,28% 60%,32% 45%,38% 30%,45% 15%);background:radial-gradient(circle at 50% 45%,#c9a227 0%,#0000 50%),linear-gradient(135deg,#2c1f16 0%,#5c4a32 100%);box-shadow:0 12px 40px #2c1f1640}.classical-scribe .stats{background:#ffffff80;border-color:#e6dcc3}.classical-scribe .stat-value{color:#2c1f16;font-family:Georgia,Times New Roman,serif}.classical-scribe .stat-label{color:#5c4a32}.classical-scribe .card{background:#ffffffb3;border:1px solid #e6dcc3}@media (hover:hover) and (pointer:fine){.classical-scribe .card:hover{border-color:#c9a227;box-shadow:0 8px 24px #c9a2271f}}.classical-scribe .card-dot{background:#c9a227}.classical-scribe .card p{color:#3d2b1f}.classical-scribe .codeblock{background:#f4f0e4;border:1px solid #e6dcc3}.classical-scribe .codeblock-header{color:#5c4a32;background:#ede4cc;border-bottom:1px solid #e6dcc3}.classical-scribe .codeblock pre{color:#2c1f16}.classical-scribe .copy-btn{color:#2c1f16;background:#e6dcc3}.sovereign-command .theme-number{color:#e84545;background:#e845451f;border:1px solid #e8454540}.sovereign-command .design-demo-canvas{background:radial-gradient(70% 50% at 50% 0,#e845451a,#0000 60%),#0a0e17;border:1px solid #1e2d45}.sovereign-command .badge{color:#ff8a8a;background:#e845451a;border:1px solid #e8454540}.sovereign-command .badge-ghost{color:#94a3b8;background:0 0;border-color:#94a3b840}.sovereign-command h3{color:#f8fafc}.sovereign-command .hero-content>p{color:#94a3b8}.sovereign-command .btn-primary{color:#fff;background:linear-gradient(135deg,#e84545,#ff7373)}.sovereign-command .btn-secondary{color:#e84545;background:0 0;border:1px solid #e8454566}@media (hover:hover) and (pointer:fine){.sovereign-command .btn-secondary:hover{background:#e8454514}}.sovereign-command .art-inner{clip-path:polygon(50% 5%,85% 25%,85% 55%,50% 95%,15% 55%,15% 25%);background:radial-gradient(circle at 50% 45%,#06b6d44d,#0000 50%),linear-gradient(135deg,#e84545 0%,#ff7373 100%);box-shadow:0 0 30px #e8454559}.sovereign-command .stats{background:#11182799;border-color:#1e2d45}.sovereign-command .stat-value{color:#e84545}.sovereign-command .stat-label{color:#64748b}.sovereign-command .card{background:#111827;border:1px solid #1e2d45}@media (hover:hover) and (pointer:fine){.sovereign-command .card:hover{border-color:#2d4a6a;box-shadow:0 0 0 1px #06b6d41a}}.sovereign-command .card-dot{background:#06b6d4}.sovereign-command .card p{color:#cbd5e1}.sovereign-command .codeblock{background:#111827;border:1px solid #1e2d45}.sovereign-command .codeblock-header{color:#06b6d4;background:#1a2332;border-bottom:1px solid #1e2d45}.sovereign-command .codeblock pre{color:#e2e8f0}.sovereign-command .copy-btn{color:#06b6d4;background:#1e2d45}.monochrome-data .theme-number{color:#fff;background:#000;border:1px solid #333}.monochrome-data .design-demo-canvas{background:#fff;border:2px solid #000;border-radius:0}.monochrome-data .badge{color:#fff;background:#000;border-radius:0}.monochrome-data .badge-ghost{color:#333;background:0 0;border:1px solid #000}.monochrome-data h3{color:#000;text-transform:uppercase;letter-spacing:-.02em}.monochrome-data .hero-content>p{color:#333}.monochrome-data .btn-primary{color:#fff;background:#000;border-radius:0}.monochrome-data .btn-secondary{color:#000;background:0 0;border:2px solid #000;border-radius:0}.monochrome-data .art-inner{clip-path:polygon(20% 20%,80% 20%,80% 80%,20% 80%);background:#000}.monochrome-data .stats{background:#f5f5f5;border-style:solid;border-color:#000}.monochrome-data .stat-value{color:#000}.monochrome-data .stat-label{color:#555;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.monochrome-data .card{background:#fff;border:2px solid #000;border-radius:0}.monochrome-data .card:hover{background:#000}.monochrome-data .card:hover p,.monochrome-data .card:hover .card-dot{color:#fff}.monochrome-data .card:hover .card-dot{background:#fff}.monochrome-data .card-dot{background:#000}.monochrome-data .card p{color:#000;font-weight:500}.monochrome-data .codeblock{background:#fff;border:2px solid #000;border-radius:0}.monochrome-data .codeblock-header{color:#fff;background:#000;border-bottom:2px solid #000;border-radius:0}.monochrome-data .codeblock pre{color:#000}.monochrome-data .copy-btn{color:#000;background:#fff;border-radius:0}.open-concept .theme-number{color:#2563eb;background:#eff6ff;border:none}.open-concept .design-demo-canvas{background:linear-gradient(#fff 0%,#f8fafc 100%);border:none;border-radius:24px;box-shadow:0 10px 40px -10px #0000000d}.open-concept .hero{padding:4rem 3rem 2rem}.open-concept .badge{color:#2563eb;background:#eff6ff;border:none}.open-concept .badge-ghost{color:#6b7280;background:0 0;border:1px solid #e5e7eb}.open-concept h3{color:#111827;letter-spacing:-.03em;font-weight:800}.open-concept .hero-content>p{color:#4b5563;font-size:1.1rem}.open-concept .btn-primary{color:#fff;background:#2563eb;border-radius:999px}.open-concept .btn-secondary{color:#111827;background:#fff;border:1px solid #e5e7eb;border-radius:999px;box-shadow:0 1px 2px #0000000d}@media (hover:hover) and (pointer:fine){.open-concept .btn-secondary:hover{background:#f9fafb;border-color:#cbd5e1}}.open-concept .art-inner{background:radial-gradient(circle,#2563eb 0% 12%,#0000 13%),radial-gradient(circle,#0000 25%,#2563eb8c 25.5% 30%,#0000 30.5%);border-radius:50%;box-shadow:0 20px 60px -15px #2563eb59}.open-concept .stats{background:0 0;border:none;gap:2rem;padding:1rem 3rem 3rem}.open-concept .stat-value{color:#111827;letter-spacing:-.05em;font-size:3.25rem;line-height:1}.open-concept .stat-label{color:#6b7280;font-size:.95rem;font-weight:500}.open-concept .cards{gap:1.5rem;padding:2rem 3rem}.open-concept .card{background:#fff;border:none;border-radius:16px;padding:1.75rem 1.5rem;box-shadow:0 4px 20px -5px #0000000d}@media (hover:hover) and (pointer:fine){.open-concept .card:hover{box-shadow:0 12px 40px -8px #2563eb1f,0 4px 20px -5px #0000000d}}.open-concept .card-dot{background:#10b981;margin-bottom:1rem;box-shadow:0 0 0 4px #d1fae5}.open-concept .card p{color:#1f2937;font-weight:500}.open-concept .codeblock{background:#fff;border:1px solid #e5e7eb;border-radius:16px;margin:1rem 3rem 4rem;box-shadow:0 4px 6px -1px #00000005}.open-concept .codeblock-header{color:#374151;background:#f8fafc;border-bottom:1px solid #e5e7eb}.open-concept .codeblock pre{color:#1f2937}.open-concept .copy-btn{color:#374151;background:#fff;border:1px solid #d1d5db}