@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Press+Start+2P&display=swap";:root{--bg-sunrise: #f7f1ec;--bg-blossom: #f2edf8;--ink: #1c1c24;--muted: rgba(28, 28, 36, .68);--card: rgba(255, 255, 255, .92);--card-border: rgba(12, 12, 16, .08);--accent-peach: #f9b4a5;--accent-mint: #8cd3c4;--accent-lilac: #c9b5ff;--pill-bg: rgba(12, 12, 16, .06);--pill-border: rgba(12, 12, 16, .15);--sl-color-primary-600: #ef9a9a;--sl-color-primary-500: #fbc0b8;--sl-input-background-color: rgba(255, 255, 255, .6)}*{box-sizing:border-box;font-family:Space Grotesk,system-ui,-apple-system,sans-serif}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 20%,rgba(255,188,173,.5) 0%,transparent 45%),radial-gradient(circle at 80% 0%,rgba(198,190,255,.45) 0%,transparent 55%),linear-gradient(140deg,var(--bg-sunrise) 0%,var(--bg-blossom) 60%,#fefefe 100%);overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:url('data:image/svg+xml,%3Csvg width="240" height="240" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"%3E%3Cg fill="none" stroke="rgba(28,28,36,0.04)" stroke-width="1"%3E%3Cpath d="M0 120h240M120 0v240"/%3E%3C/g%3E%3C/svg%3E');opacity:.8;mix-blend-mode:multiply}.webgl{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;outline:none;background:transparent}.scene-glow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(60% 70% at 55% 65%,rgba(255,198,170,.25),transparent 70%);z-index:1}.ui-shell{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;align-items:flex-end;padding:clamp(1.5rem,5vw,3rem);pointer-events:none;z-index:2}.ui-stack{width:min(460px,95vw);display:flex;flex-direction:column;gap:.85rem;pointer-events:auto}.ui-pillbar{display:flex;justify-content:space-between;gap:.5rem}.pill::part(base){background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:999px;padding:.5rem 1rem;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:"Press Start 2P",cursive}.pill--status::part(base){background:#8cd3c459;border-color:#8cd3c499;color:#0f4e40}.pill__dot{width:6px;height:6px;border-radius:50%;background:#3ba48d;box-shadow:0 0 8px #3ba48d}.ui-card::part(base){background:var(--card);border-radius:32px;border:1px solid var(--card-border);padding:1.5rem;box-shadow:0 25px 60px #1e1b1826;display:flex;flex-direction:column;gap:1.1rem}.ui-row{display:flex;justify-content:space-between;align-items:baseline}.ui-label{font-family:"Press Start 2P",cursive;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}.ui-mode{font-family:"Press Start 2P",cursive;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-peach)}.ui-battery{display:flex;flex-direction:column;gap:.35rem}.ui-battery__top{display:flex;justify-content:space-between;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.ui-battery__meter{height:14px;border-radius:999px;background:#0c0c1014;overflow:hidden}.ui-battery__fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(1);background:linear-gradient(90deg,var(--accent-mint),var(--accent-lilac));transition:transform .35s ease}.ui-status{margin:0;font-size:.95rem;line-height:1.4;color:var(--ink)}.mode-buttons{width:100%}.mode-buttons::part(base){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;background:transparent;padding:0}.mode-button{width:100%}.mode-button::part(base){width:100%;border-radius:32px;border:1px solid rgba(12,12,16,.12);background:#0c0c100a;color:var(--ink);letter-spacing:.12em;font-size:.6rem;text-transform:uppercase;transition:border-color .2s ease,background .2s ease}.mode-button.is-active::part(base){border-color:var(--accent-peach);background:#f9b4a526;color:var(--ink);box-shadow:inset 0 0 0 1px #f9b4a54d}.ui-primary::part(base){width:100%;border-radius:32px;padding-inline:1.4rem;letter-spacing:.18em;text-transform:uppercase;font-size:.65rem;background:linear-gradient(120deg,#ffe9d4,#ffd3d3);color:var(--ink);box-shadow:0 12px 25px #f9b4a559;border:none}.ui-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:.5rem}.ui-actions sl-button{width:100%}.ui-secondary::part(base){width:100%;border-radius:28px;border:1px solid rgba(12,12,16,.12);background:#0c0c100a;color:var(--ink);letter-spacing:.08em;font-size:.72rem}.ui-secondary:not([disabled])::part(base):hover{border-color:var(--accent-lilac);background:#c9b5ff1f}.ui-secondary[disabled]::part(base){opacity:.4;cursor:not-allowed}.ui-log{background:#0c0c100a;border-radius:24px;border:1px solid rgba(12,12,16,.08);padding:.85rem}.log{list-style:none;margin:.35rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:110px;overflow:hidden}.log li{font-family:"Press Start 2P",cursive;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.toast{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:"Press Start 2P",cursive;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--ink);z-index:3}.toast[hidden]{display:none}.github-link{position:fixed;bottom:clamp(1.5rem,5vw,3rem);left:clamp(1.5rem,5vw,3rem);z-index:2;text-decoration:none}.github-button::part(base){background:var(--card);border:1px solid var(--card-border);color:var(--muted);font-size:.6rem;font-family:"Press Start 2P",cursive;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1rem;box-shadow:0 8px 20px #1e1b181f;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.github-button::part(base):hover{background:#fffffffa;border-color:var(--accent-lilac);color:var(--ink);box-shadow:0 12px 28px #1e1b182e;transform:translateY(-2px)}button:focus-visible,.mode-button:focus-visible::part(base),.ui-primary:focus-visible::part(base),.ui-secondary:focus-visible::part(base){outline:2px dashed var(--accent-lilac);outline-offset:3px}.lil-gui{display:none!important}@media (max-width: 640px){body{overflow-y:auto}.ui-shell{justify-content:center}.ui-stack{width:min(440px,100%)}.ui-pillbar{flex-direction:column}}