@import"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Unbounded:wght@500;700&display=swap";.app{display:flex;flex-direction:column;gap:2rem;padding:2.5rem 6vw 4rem}.page{display:flex;flex-direction:column;gap:3rem}.top-nav{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}.nav-actions{display:flex;gap:.8rem;align-items:center}.tab{background:#ffffffb3;color:var(--purple-800);box-shadow:none;border:1px solid rgba(87,53,122,.2)}.tab.active{background:var(--purple-800);color:#fff}.hero{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}.eyebrow{text-transform:uppercase;letter-spacing:.4em;font-size:.72rem;font-weight:600;color:var(--purple-700);margin:0 0 .6rem}.hero h1{font-family:Unbounded,sans-serif;font-size:clamp(2.4rem,4vw,4rem);margin:0 0 .6rem;color:var(--purple-900)}.subtitle{margin:0;font-size:1rem;color:var(--purple-700);max-width:38rem}.hero-actions{display:flex;gap:.8rem;align-items:center}.hero-actions button{min-width:8.5rem}.content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2.5rem}.arcade{display:flex;flex-direction:column;gap:2rem}.arcade-header{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}.arcade-tabs{display:flex;flex-wrap:wrap;gap:.6rem}.game-shell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem;position:relative}.game-canvas-wrap{background:var(--glass);padding:1rem;border-radius:24px;box-shadow:var(--shadow)}.game-canvas-wrap canvas{width:100%;height:auto;display:block;border-radius:18px}.game-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.game-panel{background:var(--glass);border-radius:24px;padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1.1rem}.game-panel h3{margin:0;font-size:1.5rem;color:var(--purple-900);font-family:Unbounded,sans-serif}.game-controls{display:flex;flex-wrap:wrap;gap:.6rem}.game-status{display:grid;gap:.4rem}.game-hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;background:#ffffffb3;border-radius:18px;padding:.8rem 1rem}.game-hud div{display:flex;flex-direction:column;gap:.2rem;color:var(--purple-800);font-size:.9rem}.game-hud strong{color:var(--purple-900);font-size:.85rem}.game-list ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem;color:var(--purple-700);font-size:.9rem}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#f0e6ffa6;border-radius:24px}.game-overlay-card{background:#fff;padding:1.6rem;border-radius:20px;box-shadow:var(--shadow);text-align:center}.viewer-card{display:flex;flex-direction:column;gap:1rem;background:var(--glass);border-radius:28px;padding:1.5rem;box-shadow:var(--shadow);position:relative;overflow:hidden}.viewer{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16 / 9;background:radial-gradient(circle at 20% 20%,#f7f0ff,#e7d8ff 65%,#dac7ff)}.video,.overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video{transform:scaleX(-1);filter:saturate(.95) contrast(1.05)}.overlay{pointer-events:none;mix-blend-mode:screen;transform:scaleX(-1)}.glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%);opacity:.45}.status{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}.status-pill{font-size:.85rem;padding:.35rem .9rem;border-radius:999px;background:#ffffffb3;color:var(--purple-900);font-weight:600}.status-pill.running{background:#6756ff33}.status-pill.error{background:#ff787833}.status-text{color:var(--purple-700);font-size:.95rem}.panel{display:flex;flex-direction:column;gap:1.2rem;padding:1.8rem;border-radius:28px;background:var(--glass);box-shadow:var(--shadow)}.panel h2{margin:0;font-size:1.6rem;font-family:Unbounded,sans-serif;color:var(--purple-900)}.panel p{margin:0;color:var(--purple-700)}.controls{display:grid;gap:1.1rem}.controls label{display:flex;flex-direction:column;gap:.45rem;font-size:.92rem;color:var(--purple-800)}.controls input[type=range]{accent-color:var(--purple-700);width:100%}.tips{padding:1rem;border-radius:18px;background:#ffffffb3}.metrics{display:grid;gap:.75rem;padding:1rem;border-radius:18px;background:#ffffffa6}.metrics h3{margin:0;font-size:1rem;color:var(--purple-900)}.metric-row{display:grid;grid-template-columns:1fr 2fr auto;gap:.6rem;align-items:center;font-size:.9rem;color:var(--purple-800)}.metric-row--vector{grid-template-columns:1fr auto}.metric-vector,.metric-row strong{font-weight:600;color:var(--purple-900)}.meter{position:relative;height:8px;background:#57357a26;border-radius:999px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#c2a6ff,#7c56aa);border-radius:999px}.tips h3{margin:0 0 .5rem;font-size:1rem;color:var(--purple-900)}.tips ul{margin:0;padding-left:1.2rem;color:var(--purple-700);display:grid;gap:.35rem;font-size:.9rem}@media(max-width:960px){.game-shell,.content{grid-template-columns:1fr}.hero-actions{width:100%}}@media(max-width:640px){.app{padding:2rem 1.5rem 3rem}.hero-actions button{flex:1}}:root{color-scheme:light;--purple-900: #2a123d;--purple-800: #3c1c58;--purple-700: #57357a;--purple-600: #7c56aa;--glass: rgba(255, 255, 255, .75);--shadow: 0 22px 45px rgba(58, 32, 96, .12)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Sora,system-ui,sans-serif;background:radial-gradient(circle at top,#f7f0ff,#e7d9ff 45%,#d9c7ff);color:var(--purple-900)}#root{min-height:100vh}button{border:none;border-radius:999px;padding:.7rem 1.4rem;font-weight:600;font-family:inherit;background:var(--purple-800);color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 20px #3c1c582e}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}button.ghost{background:#ffffffbf;color:var(--purple-800);box-shadow:none;border:1px solid rgba(87,53,122,.2)}button.secondary{background:#57357a26;color:var(--purple-800);box-shadow:none;align-self:flex-start}a{color:inherit}
