:root{--bg: #060e20;--surface-low: #091328;--surface: #0f1930;--primary: #ba9eff;--primary-dim: #8455ef;--secondary: #699cff;--tertiary: #ff97b5;--text: #dee5ff;--muted: #a3aac4;--outline-soft: rgba(64, 72, 93, .32);--danger: #ff6e84;--shadow: 0 20px 50px rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(circle at top right,rgba(132,85,239,.22),transparent 22%),radial-gradient(circle at bottom left,rgba(105,156,255,.14),transparent 24%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit}input,textarea{width:100%;padding:12px 14px;border:1px solid var(--outline-soft);border-radius:18px;background:#192540e6;color:var(--text)}textarea{min-height:58px;resize:vertical}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;border-bottom:1px solid var(--outline-soft);background:#060e20db;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:14px}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary-dim),var(--primary));color:#180b35;font-family:Space Grotesk,sans-serif;font-weight:800;box-shadow:var(--shadow)}.brand-copy h1,.brand-copy p,.hero h2,.card-title,.project-name,.section-title,.display{margin:0;font-family:Space Grotesk,sans-serif;letter-spacing:-.04em}.brand-copy h1{font-size:1.18rem;color:var(--primary)}.brand-copy p,.eyebrow,.route-note{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}.nav-links,.button-row,.meta-row,.inline-row,.toolbar,.tag-row,.footer-nav,.split,.word-bank,.tab-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.nav-link,.button,.button-ghost,.button-danger,.chip,.pill,.word-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--outline-soft);border-radius:999px;background:#141f38b3;color:var(--muted);transition:transform .16s ease,border-color .16s ease,background .16s ease}.nav-link:hover,.button:hover,.button-ghost:hover,.button-danger:hover,.chip:hover,.word-chip:hover,.project-card:hover,.mode-card:hover,.option-card:hover,.line-card:hover{transform:translateY(-1px)}.nav-link.is-active,.chip.is-active,.pill.primary,.mode-card.is-selected{border-color:#ba9eff52;color:var(--primary);background:#8455ef24}.button{background:linear-gradient(135deg,var(--primary-dim),var(--primary));color:#190b37;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}.button-danger{background:#ff6e841f;color:var(--danger)}.pill.secondary{color:var(--secondary)}.pill.tertiary{color:var(--tertiary)}.container{width:min(1480px,calc(100vw - 40px));margin:0 auto;padding:28px 0 44px}.hero{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.hero h2{font-size:clamp(2.2rem,4vw,4.1rem)}.hero p,.lede,.project-preview,.status-line{color:var(--muted);line-height:1.7}.surface,.card,.sidebar,.editor-surface,.banner,.option-card,.mode-card,.list-item,.metric,.project-card,.line-card,.utility-item,.variation-card{border:1px solid var(--outline-soft);border-radius:24px;background:#0f1930d6;box-shadow:var(--shadow)}.card,.sidebar,.editor-surface,.banner,.option-card,.mode-card,.list-item,.metric,.project-card,.line-card,.utility-item,.variation-card,.helper-surface{padding:18px}.library-grid,.layout-3,.layout-variation,.metric-list,.list,.editor-lines,.variation-list,.mode-list,.utility-list,.helper-grid{display:grid;gap:18px}.library-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.card.featured{grid-column:span 7;min-height:320px;background:radial-gradient(circle at top right,rgba(186,158,255,.18),transparent 28%),#091328f0}.card.standard{grid-column:span 5}.card.quarter,.card.half{grid-column:span 6}.layout-3{grid-template-columns:270px minmax(0,1fr) 330px}.layout-variation{grid-template-columns:290px minmax(0,1fr) 320px}.helper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric,.project-card,.line-card,.mode-card,.utility-item{background:#19254080}.metric{display:flex;justify-content:space-between}.metric strong,.status-line strong{color:var(--text)}.section-block,.sidebar-section{margin-top:20px;padding-top:20px;border-top:1px solid rgba(64,72,93,.24)}.toolbar{justify-content:space-between;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(64,72,93,.24)}.line-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center}.line-card.is-active{border-color:#ba9eff6b;background:#192540e6}.line-card textarea{border:0;padding:0;background:transparent;font-family:JetBrains Mono,monospace}.line-number,.mono{font-family:JetBrains Mono,monospace}.project-name,.card-title-small{margin-top:14px;font-size:1.45rem}.lede{margin:16px 0 24px}.banner{margin-top:26px;justify-content:space-between}.split{justify-content:space-between}.dial{width:180px;height:180px;margin:0 auto 16px;display:grid;place-items:center;border:4px solid rgba(64,72,93,.35);border-radius:999px;background:conic-gradient(from 210deg,transparent 0 26%,var(--primary) 26% 72%,transparent 72% 100%),#0f1930eb}.dial-core{width:118px;height:118px;display:grid;place-items:center;border-radius:999px;background:#060e20f5;border:1px solid rgba(64,72,93,.28)}.range{height:6px;border-radius:999px;overflow:hidden;background:#192540db}.range span{display:block;height:100%;background:linear-gradient(90deg,var(--primary-dim),var(--primary))}.top-gap-sm{margin-top:12px}.top-gap-md{margin-top:18px}.bottom-gap-sm{margin-bottom:12px}.bottom-none{margin-bottom:0}.flow-space{margin-top:18px}@media(max-width:1100px){.library-grid,.layout-3,.layout-variation,.helper-grid{grid-template-columns:1fr}.card.featured,.card.standard,.card.quarter,.card.half{grid-column:span 1}}@media(max-width:720px){.topbar,.hero,.banner,.line-card{flex-direction:column;grid-template-columns:1fr;align-items:flex-start}.container{width:min(100vw - 24px,1480px)}}