:root{--demo-gold:#d6ae55;--demo-gold2:#f4d989;--demo-ink:#f8f2e7;--demo-muted:#bdb4a6;--demo-panel:#11100d;--demo-line:rgba(230,190,100,.28);--demo-good:#9ecb9b;--demo-warn:#e0b06a;--demo-bad:#d98a7c}
.demo-shell{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:42px 0 90px}.demo-hero{display:grid;grid-template-columns:1fr .72fr;gap:34px;align-items:center;margin-bottom:34px}.demo-cover{border:1px solid var(--demo-line);padding:9px;background:#090806}.demo-cover img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.demo-kicker{color:var(--demo-gold2);letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;font-weight:700}.demo-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.7rem,5.6vw,5.8rem);font-weight:500;line-height:.96;margin:.16em 0 .25em}.demo-hero p{color:var(--demo-muted);max-width:720px}.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.demo-btn,.demo-link{appearance:none;border:1px solid var(--demo-gold);background:linear-gradient(135deg,rgba(214,174,85,.18),rgba(214,174,85,.04));color:var(--demo-ink);padding:11px 15px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}.demo-btn:hover,.demo-link:hover{transform:translateY(-1px);background:rgba(214,174,85,.16)}.demo-btn.secondary,.demo-link.secondary{border-color:rgba(255,255,255,.14);background:#0b0a08;color:var(--demo-muted)}.demo-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.demo-stage{border:1px solid var(--demo-line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));padding:26px;min-height:440px}.demo-titleline{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:22px}.demo-titleline h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(1.9rem,3.5vw,3.1rem);line-height:1.05;margin:0}.demo-titleline p{color:var(--demo-muted);margin:4px 0 0;max-width:640px}.demo-status{font-size:.78rem;color:var(--demo-gold2);letter-spacing:.12em;text-transform:uppercase}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.demo-card{border:1px solid rgba(255,255,255,.12);background:#0c0b09;padding:18px}.demo-card h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;margin:0 0 8px}.demo-card p{color:var(--demo-muted);font-size:.9rem;margin:.25em 0}.demo-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.demo-choice{border:1px solid rgba(255,255,255,.14);background:#0c0b09;color:var(--demo-ink);padding:16px;text-align:left;cursor:pointer;min-height:112px}.demo-choice:hover,.demo-choice.active{border-color:var(--demo-gold);background:rgba(214,174,85,.07)}.demo-choice strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;font-weight:500;margin-bottom:6px}.demo-choice small{color:var(--demo-muted);line-height:1.45}.demo-meters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.meter{border:1px solid rgba(255,255,255,.1);padding:12px;background:#0b0a08}.meter-head{display:flex;justify-content:space-between;gap:8px;color:var(--demo-muted);font-size:.76rem;margin-bottom:8px}.meter-track{height:7px;background:rgba(255,255,255,.08);overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#8a6c2d,var(--demo-gold2));width:50%;transition:width .35s}.demo-log{margin-top:18px;border-left:2px solid var(--demo-gold);background:rgba(214,174,85,.05);padding:16px;color:#ddd4c7;min-height:58px}.demo-result{border:1px solid var(--demo-line);padding:24px;margin-top:20px;background:radial-gradient(circle at 80% 0,rgba(214,174,85,.12),transparent 34%),#0c0b09}.demo-result h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.75rem;margin:0 0 8px}.demo-result p{color:var(--demo-muted)}.demo-chiprow{display:flex;gap:8px;flex-wrap:wrap}.demo-chip{border:1px solid rgba(255,255,255,.12);padding:7px 10px;color:var(--demo-muted);font-size:.75rem}.demo-scenario{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.25;margin:10px 0 4px;max-width:900px}.demo-sub{color:var(--demo-muted);font-size:.93rem}.demo-note{margin-top:20px;padding:13px 15px;border:1px solid rgba(214,174,85,.22);background:rgba(214,174,85,.04);color:var(--demo-muted);font-size:.82rem}.demo-resource{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}.token{width:34px;height:34px;border:1px solid var(--demo-gold);display:grid;place-items:center;color:var(--demo-gold2);background:rgba(214,174,85,.06)}.alloc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.alloc-box{border:1px solid rgba(255,255,255,.12);padding:16px;background:#0c0b09;text-align:center}.alloc-box strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.1rem}.alloc-count{font-size:2.4rem;font-family:Georgia,"Times New Roman",serif;color:var(--demo-gold2);margin:8px 0}.alloc-actions{display:flex;justify-content:center;gap:8px}.square-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);background:#0a0907;color:var(--demo-ink);cursor:pointer}.square-btn:hover{border-color:var(--demo-gold)}.puzzle{border:1px solid rgba(255,255,255,.12);padding:22px;background:#0c0b09;margin-top:12px}.puzzle-q{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.5rem);margin-bottom:16px}.answer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.answer-btn{min-height:50px;border:1px solid rgba(255,255,255,.14);background:#0a0907;color:var(--demo-ink);cursor:pointer}.answer-btn:hover{border-color:var(--demo-gold)}.seal-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.seal{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#6d665d}.seal.on{border-color:var(--demo-gold);color:var(--demo-gold2);box-shadow:inset 0 0 0 5px rgba(214,174,85,.05)}.strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.strategy{border:1px solid rgba(255,255,255,.12);padding:18px;background:#0c0b09;cursor:pointer}.strategy:hover{border-color:var(--demo-gold)}.strategy strong{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.1rem}.strategy span{display:block;color:var(--demo-muted);font-size:.82rem;margin-top:6px}.portfolio{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.pyramid{min-height:240px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;padding:18px;background:#090806}.tier{height:52px;border:1px solid rgba(214,174,85,.26);display:grid;place-items:center;margin-top:4px;background:rgba(214,174,85,.04);color:var(--demo-muted);transition:.3s}.tier.t1{width:34%}.tier.t2{width:54%}.tier.t3{width:74%}.tier.t4{width:94%}.look-stage{min-height:250px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;background:radial-gradient(circle,rgba(214,174,85,.12),transparent 50%),#090806;margin-top:18px}.look-figure{width:120px;height:210px;position:relative}.look-head{width:42px;height:42px;border-radius:50%;border:2px solid var(--demo-gold);margin:0 auto 7px}.look-body{width:92px;height:150px;margin:auto;border:2px solid var(--demo-gold);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(214,174,85,.16),rgba(255,255,255,.02))}.look-body.fluid{clip-path:polygon(35% 0,65% 0,95% 100%,5% 100%);border-radius:40% 40% 10% 10%}.look-body.sculptural{clip-path:polygon(10% 0,90% 0,72% 42%,100% 100%,0 100%,28% 42%)}.look-body.mirror{box-shadow:inset 0 0 0 8px rgba(255,255,255,.08)}.look-body.raw{background:repeating-linear-gradient(45deg,rgba(214,174,85,.16),rgba(214,174,85,.16) 8px,rgba(255,255,255,.02) 8px,rgba(255,255,255,.02) 16px)}.look-body.veil{opacity:.62}.starfield{border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 45%,rgba(214,174,85,.12),transparent 32%),#070707;min-height:360px;position:relative;overflow:hidden;margin-top:18px}.star{position:absolute;width:54px;height:54px;border-radius:50%;border:1px solid rgba(244,217,137,.5);background:rgba(214,174,85,.05);color:var(--demo-ink);cursor:pointer;display:grid;place-items:center;font-size:.72rem;text-align:center;padding:5px;transition:.25s}.star:hover,.star.on{background:rgba(214,174,85,.18);border-color:var(--demo-gold2);transform:scale(1.06)}.star:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--demo-gold2);top:-4px;left:50%;transform:translateX(-50%)}.chess-wrap{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-top:16px}.chess-board{display:grid;grid-template-columns:repeat(5,58px);grid-template-rows:repeat(5,58px);border:1px solid var(--demo-gold);width:max-content}.cell{width:58px;height:58px;border:0;background:#17140f;color:var(--demo-ink);display:grid;place-items:center;font-size:1.5rem;cursor:pointer}.cell:nth-child(odd){background:#0b0a08}.cell.valid{box-shadow:inset 0 0 0 2px var(--demo-gold);background:rgba(214,174,85,.12)}.cell.player{color:var(--demo-gold2);font-weight:700}.cell.target{color:#e9dfcf}.cell.block{color:#6b6254;cursor:not-allowed}.ability-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.ability{border:1px solid rgba(255,255,255,.14);background:#0b0a08;color:var(--demo-muted);padding:10px 12px;cursor:pointer}.ability.active{border-color:var(--demo-gold);color:var(--demo-ink);background:rgba(214,174,85,.07)}.species-card,.augment-card{border:1px solid rgba(255,255,255,.12);background:#0c0b09;padding:18px}.species-icon{font-size:2.2rem}.augment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.augment-card button{width:100%;margin-top:12px}.augment-card.on{border-color:var(--demo-gold);background:rgba(214,174,85,.06)}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.trace{border:1px solid rgba(255,255,255,.12);padding:18px;background:#0c0b09;min-height:190px}.trace.active{border-color:var(--demo-gold)}.trace h3{font-family:Georgia,"Times New Roman",serif;font-weight:500}.trace p{color:var(--demo-muted);font-size:.9rem}.group-orbit{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.orbit-card{border:1px solid rgba(255,255,255,.12);padding:18px;background:#0c0b09}.orbit-card .big{font-family:Georgia,"Times New Roman",serif;font-size:2rem;color:var(--demo-gold2)}
@media(max-width:900px){.demo-hero{grid-template-columns:1fr}.demo-cover{max-width:560px}.demo-grid,.demo-choices,.alloc-grid,.strategy-grid,.augment-list,.timeline,.group-orbit{grid-template-columns:1fr 1fr}.demo-meters{grid-template-columns:1fr 1fr}.portfolio,.chess-wrap{grid-template-columns:1fr}.chess-board{grid-template-columns:repeat(5,52px);grid-template-rows:repeat(5,52px)}.cell{width:52px;height:52px}}
@media(max-width:600px){.demo-shell{width:min(100% - 20px,1160px);padding-top:24px}.demo-stage{padding:18px}.demo-grid,.demo-choices,.alloc-grid,.strategy-grid,.augment-list,.timeline,.group-orbit,.demo-meters{grid-template-columns:1fr}.answer-grid{grid-template-columns:1fr 1fr}.chess-board{grid-template-columns:repeat(5,48px);grid-template-rows:repeat(5,48px)}.cell{width:48px;height:48px}.starfield{min-height:430px}.demo-cover{max-width:none}}