:root{--bg: #0b1014;--bg-raised: #11181f;--bg-card: #141d26;--border: #233140;--text: #dbe7f0;--text-dim: #8aa0b2;--accent: #2dd4bf;--accent-soft: rgba(45, 212, 191, .14);--warn: #f0b429;--radius: 10px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.45}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg-raised);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:9px}.brand-icon{width:26px;height:26px;filter:drop-shadow(0 0 6px var(--accent))}.brand-name{font-size:1.15rem;font-weight:700;letter-spacing:.4px}.brand-name em{color:var(--accent);font-style:normal}.site-nav{display:flex;gap:4px}.site-nav a{color:var(--text-dim);padding:6px 13px;border-radius:7px;font-weight:600;font-size:.92rem}.site-nav a:hover{color:var(--text);background:var(--accent-soft);text-decoration:none}.site-nav a.active{color:var(--accent);background:var(--accent-soft)}.demo-main{max-width:1280px;margin:0 auto;padding:16px}.viewport-wrap{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:radial-gradient(1200px 500px at 50% 120%,#14202b,#0a0e13 70%)}#viewport{display:block;width:100%;height:min(58vh,560px);cursor:grab}#viewport:active{cursor:grabbing}.viewport-hud{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;pointer-events:none;gap:10px}.hud-left h1{margin:0;font-size:1.35rem;text-shadow:0 2px 8px rgba(0,0,0,.8)}.hud-left p{margin:2px 0 8px;color:var(--text-dim);font-size:.88rem;max-width:380px;text-shadow:0 1px 4px rgba(0,0,0,.8)}.tints{display:flex;gap:7px;pointer-events:auto}.tint-swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;transition:transform .12s ease,border-color .12s ease}.tint-swatch:hover{transform:scale(1.15)}.tint-swatch[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 8px var(--accent)}.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}.stats{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--text-dim);background:#080c10a6;border:1px solid var(--border);padding:4px 10px;border-radius:6px}.hud-buttons{display:flex;gap:8px}.btn{background:var(--accent);color:#06251f;border:none;font-weight:700;font-size:.88rem;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:inherit;transition:filter .12s ease}.btn:hover{filter:brightness(1.15);text-decoration:none}.btn-ghost{background:#080c10a6;color:var(--text);border:1px solid var(--border)}.hint{position:absolute;bottom:6px;right:14px;margin:0;font-size:.74rem;color:#aac3d28c}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:16px}.card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;cursor:pointer;text-align:left;color:var(--text);font-family:inherit;transition:border-color .15s ease,transform .15s ease}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card[aria-pressed=true]{border-color:var(--accent);background:#16222d;box-shadow:inset 0 0 0 1px var(--accent)}.card-top{display:flex;align-items:center;gap:10px;width:100%}.card-icon{width:38px;height:38px;border-radius:8px;background:radial-gradient(circle at 50% 50%,#1d2c3a,#0d141b);padding:5px;flex-shrink:0}.card-name{font-weight:700;font-size:.98rem}.card-badge{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}.card-badge.oneshot{background:#f0b42924;color:var(--warn)}.card-desc{margin:0;color:var(--text-dim);font-size:.8rem}.site-footer{border-top:1px solid var(--border);margin-top:26px;padding:18px;text-align:center;color:var(--text-dim);font-size:.85rem}@media(max-width:700px){.viewport-hud{flex-direction:column}.hud-right{align-items:flex-start}#viewport{height:46vh}.hud-left p,.hint{display:none}}