/* tokens.css — the design tokens style.css consumes. In the SolarFleet build these came from that site's /page/shell.css, which also carried its masthead and starfield. This app is standalone, so the tokens live here and the site chrome is gone. The `--mu-*` properties are the themeable surface: theme.js sets them per project at boot, and everything below derives from them, so a project theme reaches the whole UI without touching style.css. */ :root { /* Per-project, overwritten by theme.js. These defaults are SolarFleet's, so the app renders correctly even if theming never runs. */ --mu-accent: #5ec8ff; --mu-accent-ink: #04121c; --mu-bg: #05060a; --mu-panel: #0b0e16; --mu-glow: radial-gradient(1200px 600px at 70% -10%, #0a1729 0%, #05060a 60%); /* Structural tokens, inherited from the original shell. */ --void: var(--mu-bg); --text: #e8eaed; --label: #6e7479; --blurb: #9aa0a6; --line: var(--mu-accent); --rule: rgba(232, 234, 237, 0.16); --focus: var(--mu-accent); --display: "Helvetica Neue", Helvetica, Arial, sans-serif; --edge: clamp(20px, 4.4vw, 64px); --tap: 44px; /* mobile hit target floor — do not shrink */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { position: relative; background: var(--mu-bg); background-image: var(--mu-glow); background-attachment: fixed; color: var(--text); font-family: var(--display); -webkit-font-smoothing: antialiased; /* Safe areas: the player bar sits on the bottom edge on phones. */ padding-bottom: env(safe-area-inset-bottom); } /* Starfield: two tiled star layers behind all content, under the per-project glow. Pure CSS (radial-gradient tiles, no canvas/JS) so it costs nothing beyond paint and works identically across every theme. */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; } body::before { background-image: radial-gradient(1.6px 1.6px at 23px 31px, #fff 100%, transparent), radial-gradient(1.2px 1.2px at 97px 113px, #fff 100%, transparent), radial-gradient(1.4px 1.4px at 149px 52px, #fff 100%, transparent), radial-gradient(1px 1px at 203px 181px, #fff 100%, transparent), radial-gradient(1.3px 1.3px at 52px 197px, #fff 100%, transparent), radial-gradient(1px 1px at 177px 14px, #fff 100%, transparent), radial-gradient(1.1px 1.1px at 281px 97px, #fff 100%, transparent), radial-gradient(0.9px 0.9px at 11px 143px, #fff 100%, transparent); background-size: 307px 251px; opacity: 0.55; animation: mu-twinkle 7s ease-in-out infinite alternate; } body::after { background-image: radial-gradient(1px 1px at 44px 87px, #fff 100%, transparent), radial-gradient(1px 1px at 138px 163px, #fff 100%, transparent), radial-gradient(0.8px 0.8px at 199px 33px, #fff 100%, transparent), radial-gradient(1px 1px at 269px 129px, #fff 100%, transparent), radial-gradient(0.8px 0.8px at 93px 7px, #fff 100%, transparent), radial-gradient(1px 1px at 349px 211px, #fff 100%, transparent); background-size: 397px 337px; opacity: 0.35; animation: mu-twinkle 11s ease-in-out infinite alternate-reverse; } @keyframes mu-twinkle { from { opacity: 0.2; } to { opacity: 0.65; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* The animated 3D backdrop (js/space-scene.js). It paints its own starfield, so while it runs the flat CSS one above is hidden — one background layer, not two. `.mu-scene-3d` is set on by the scene itself. */ .mu-space { position: fixed; inset: 0; z-index: -1; display: block; pointer-events: none; /* Held back so the foreground reads clearly and the scene feels distant. */ opacity: 0.45; } html.mu-scene-3d body::before, html.mu-scene-3d body::after { display: none; } button, input { font-family: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }