/* ============================================================ Still Theme system — premium brushed titanium (default) + deep-bone calm Two independent axes, both attributes on : data-still-theme dark | bone — the palette data-glass standard | ultra — how much the control surfaces hide All theme tokens live here. The Still Field canvas reads its own colours from the --still-field-* tokens once per theme change, so restyling the visualisation is a CSS edit, not a JavaScript one. ============================================================ */ :root, [data-still-theme="dark"] { --bg: #0C0C11; --bg-sheen: linear-gradient(160deg, #0E0E15 0%, #0A0A0F 45%, #12121A 100%); --surface: rgba(20, 20, 28, 0.46); --surface-elevated: rgba(28, 28, 38, 0.62); --titanium: #3A3A48; --text-primary: #D4D4DC; --text-secondary: #9A9AA8; --text-muted: #6E6E7C; --purple: #7C3AED; --purple-deep: #5B21B6; --purple-bright: #A78BFA; --purple-glow: rgba(124, 58, 237, 0.55); --border: rgba(255, 255, 255, 0.11); --still-accent: var(--purple); /* Still Field ramp — the canvas lerps node/edge → mid → spark as a node's energy rises, so the field rests in cool violet-silver and only reaches cyan on peaks. Alpha on the node and edge tokens sets the field's baseline opacity; mid and spark are used for hue only. */ --still-field-node: rgba(176, 170, 212, 0.78); --still-field-edge: rgba(148, 142, 192, 0.38); --still-field-mid: #A78BFA; --still-field-spark: #22D3EE; --still-field-glow: rgba(124, 58, 237, 0.60); /* Instrumentation ink. Separate tokens from the field ramp because text has a contrast requirement the field does not: the ramp may sink into the background, a readout may not. --still-plate is the backing behind a callout, which is what replaced the old text glow — a plate keeps glyph edges sharp where a halo blurred them. */ --still-ink: #DCDCE6; --still-ink-muted: #8E8EA0; --still-ink-accent: #B9A2FF; --still-plate: rgba(9, 9, 14, 0.74); /* Axis colours follow the convention every 3D tool shares (Blender, and the gizmo in most CAD packages): X warm red, Y green, Z blue. */ --still-axis-x: #E8656B; --still-axis-y: #8BD05A; --still-axis-z: #6096E8; --still-texture-opacity: 0.025; --still-energy: 0; --radius: 16px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --glass-blur: blur(16px) saturate(1.35); /* Minimised chrome — settled “Show controls” surface */ --chrome-toggle-bg: rgba(28, 28, 38, 0.62); --chrome-toggle-border: rgba(124, 58, 237, 0.42); /* Info readout — more opaque than a card, because it deliberately floats over the interface and has to stay legible against whatever is beneath. */ --nerd-hud-bg: rgba(16, 16, 23, 0.88); color-scheme: dark; } /* Deep bone — denser, warmer stone-white. Not creamy, not pure white. Premium bone / aged ivory feel that stays calm under long sessions. */ [data-still-theme="bone"] { --bg: #E0D6C8; --bg-sheen: linear-gradient(165deg, #E8DFD2 0%, #D6CCBE 100%); --surface: rgba(236, 228, 216, 0.64); --surface-elevated: rgba(228, 218, 204, 0.80); --titanium: #B5AA9A; --text-primary: #2A2A30; --text-secondary: #4E4E58; --text-muted: #787880; --purple: #7C3AED; --purple-deep: #5B21B6; --purple-bright: #8B5CF6; --purple-glow: rgba(124, 58, 237, 0.30); --border: rgba(0, 0, 0, 0.11); --still-accent: #7C3AED; /* Still Field — slightly denser so it reads cleanly on the deeper bone */ --still-field-node: rgba(88, 80, 112, 0.68); --still-field-edge: rgba(96, 88, 120, 0.34); --still-field-mid: #7C3AED; --still-field-spark: #0E9BB5; --still-field-glow: rgba(124, 58, 237, 0.36); /* Bone inverts the plate: dark ink on a light backing. The axis hues are darkened so they still clear contrast against a bone plate. */ --still-ink: #2A2A32; --still-ink-muted: #6A6A76; --still-ink-accent: #6D28D9; --still-plate: rgba(240, 234, 224, 0.82); --still-axis-x: #C0393F; --still-axis-y: #4E8C2A; --still-axis-z: #2F5FAE; --still-texture-opacity: 0.07; --glass-blur: blur(14px) saturate(1.18); /* Minimised chrome */ --chrome-toggle-bg: rgba(232, 224, 212, 0.88); --chrome-toggle-border: rgba(124, 58, 237, 0.40); --nerd-hud-bg: rgba(236, 228, 216, 0.94); color-scheme: light; } /* ------------------------------------------------------------ Ultra glass — surfaces become fully transparent so only labels, switches and text float over the Still Field. No card backgrounds, no borders, no edges. Text and controls keep full contrast. ------------------------------------------------------------ */ [data-still-theme="dark"][data-glass="ultra"] { --surface: transparent; --surface-elevated: rgba(28, 28, 38, 0.22); --border: transparent; --glass-blur: none; } [data-still-theme="bone"][data-glass="ultra"] { --surface: transparent; --surface-elevated: rgba(232, 224, 212, 0.30); --border: transparent; --glass-blur: none; } /* Force cards and panels to vanish in ultra — only content remains. */ [data-glass="ultra"] .control-group, [data-glass="ultra"] .types, [data-glass="ultra"] .still-field-controls, [data-glass="ultra"] .still-panel, [data-glass="ultra"] .status-card { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Keep a minimal elevated surface only for the theme segment so it remains tappable and readable. */ [data-glass="ultra"] .theme-segment { background: var(--surface-elevated); border-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-still-theme="bone"][data-glass="ultra"] .theme-segment { border-color: rgba(0, 0, 0, 0.08); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; background: var(--bg); background-image: var(--bg-sheen); color: var(--text-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; overflow-y: auto; user-select: none; touch-action: manipulation; /* Seamless scrolling — no visible bars */ scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; padding: calc(18px + var(--safe-top)) 16px calc(28px + var(--safe-bottom)); min-height: 100dvh; position: relative; z-index: 1; } /* Still Texture — procedural SVG noise overlay (feTurbulence) */ .still-texture { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--still-texture-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 180px 180px; mix-blend-mode: overlay; } /* Still Field canvases — full page, behind UI. Two surfaces: the field (which keeps a trail) and the info layer (cleared every frame so its text stays crisp). The info layer is later in the DOM, so it paints over the field without needing its own stacking context. */ #stillField, #stillFieldInfo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 1; transition: opacity 0.6s ease; } #stillField.still-field-off, #stillFieldInfo.still-field-off { opacity: 0; } /* ------------------------------------------------------------ Info layer readout (the "nerd stats") Sits above the controls rather than behind them, because the whole point is that it stays readable on a phone where the control column fills the viewport. Its only controls are the three disclosure tabs + fold; changing values are ordinary text, never a live region. Fixed top-left: the minimised chrome owns bottom-right, and the header text is centred, so this corner is free in both layouts. Foldable: .nerd-hud--folded collapses body so the panel becomes a compact header. Especially useful on mobile where space is scarce. ------------------------------------------------------------ */ .nerd-hud { position: fixed; top: calc(10px + var(--safe-top)); left: 10px; z-index: 6; width: min(330px, calc(100vw - 20px)); pointer-events: none; user-select: none; padding: 11px; border-radius: 14px; border: 1px solid var(--border); background: var(--nerd-hud-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); font-variant-numeric: tabular-nums; font-size: 0.66rem; line-height: 1.35; letter-spacing: 0.01em; transition: opacity 0.4s ease, box-shadow 0.25s ease; } .nerd-hud[hidden], .nerd-hud-view[hidden] { display: none; } /* Scroll affordance. The body can outrun a laptop screen, and a panel that simply stops at a hard edge reads as a rendering bug rather than as "there is more below". The gradient sits over the panel's own bottom padding. */ .nerd-hud:not(.nerd-hud--folded)::after { content: ""; position: absolute; right: 1px; bottom: 1px; left: 1px; height: 18px; border-radius: 0 0 13px 13px; background: linear-gradient(to bottom, transparent, var(--nerd-hud-bg)); pointer-events: none; } /* The body now carries five grouped tables, so it can outgrow a laptop screen. Bound it and let it scroll rather than running off the bottom — which needs pointer events on the view itself, since the panel is otherwise inert. */ .nerd-hud-view { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: none; } .nerd-hud-view::-webkit-scrollbar { width: 0; height: 0; } /* Group captions. The reader is usually after one of four questions, and a flat list of twenty-five rows answers none of them quickly. */ .nerd-group { margin: 9px 0 3px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--purple-bright); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .nerd-group:first-child { margin-top: 2px; padding-top: 0; border-top: 0; } /* Folded = only the head remains visible */ .nerd-hud--folded .nerd-hud-tabs, .nerd-hud--folded .nerd-hud-view { display: none; } .nerd-hud--folded { padding: 9px 11px; width: auto; min-width: 140px; } .nerd-hud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: auto; } .nerd-hud-head strong { display: block; color: var(--text-primary); font-size: 0.76rem; letter-spacing: 0.04em; } .nerd-hud-kicker { display: block; color: var(--text-muted); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .nerd-hud-health { display: flex; align-items: center; gap: 5px; color: var(--text-muted); text-transform: uppercase; font-size: 0.48rem; letter-spacing: 0.1em; } .nerd-hud-health i { width: 6px; height: 6px; border-radius: 50%; background: var(--still-field-spark); box-shadow: 0 0 8px var(--still-field-spark); } .nerd-hud[data-health="loaded"] .nerd-hud-health i { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; } .nerd-hud[data-health="strained"] .nerd-hud-health i { background: #ef4444; box-shadow: 0 0 8px #ef4444; } /* Fold control — ≥44px touch target so the a11y audit passes */ .nerd-hud-fold { flex-shrink: 0; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; } .nerd-hud-fold:hover, .nerd-hud-fold:focus-visible { color: var(--text-primary); background: color-mix(in srgb, var(--purple) 14%, transparent); outline: none; } .nerd-hud-fold svg { transition: transform 0.22s ease; } .nerd-hud--folded .nerd-hud-fold svg { transform: rotate(-90deg); } .nerd-hud-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 9px 0; padding: 3px; border-radius: 9px; background: color-mix(in srgb, var(--surface-elevated) 62%, transparent); pointer-events: auto; } .nerd-hud-tabs button { min-height: 44px; padding: 3px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 650; cursor: pointer; } .nerd-hud-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--purple) 22%, transparent); color: var(--purple-bright); } .nerd-hud-tabs button:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 1px; } .nerd-hud-grid { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; margin: 0; } .nerd-hud-grid dt { color: var(--text-muted); font-weight: 500; } .nerd-hud-grid dd { margin: 0; overflow: hidden; color: var(--text-secondary); text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .nerd-spectrum { display: grid; gap: 4px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); } .nerd-spectrum > div { display: grid; grid-template-columns: 34px minmax(70px, 1fr) 38px; align-items: center; gap: 7px; color: var(--text-muted); text-transform: uppercase; font-size: 0.52rem; } .nerd-spectrum i { height: 3px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); } .nerd-spectrum b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--still-field-spark)); transition: width 0.22s linear; } .nerd-spectrum > div > span:last-child { color: var(--text-secondary); text-align: left; } /* Rolling frame-time trace. The canvas is fixed-resolution and scaled down by CSS, which is the cheapest way to stay sharp on a 2× display. */ .nerd-trace { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--border); } .nerd-trace canvas { display: block; width: 100%; height: 32px; } .nerd-trace figcaption { margin-top: 4px; color: var(--text-muted); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; } .nerd-formulas { display: grid; gap: 8px; } .nerd-formulas div { display: grid; gap: 1px; } .nerd-formulas span, .nerd-code span { color: var(--purple-bright); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .nerd-formulas code, .nerd-code code { color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; } /* The live evaluation under each formula — the numbers currently going through it. Muted relative to the symbolic line so the equation still leads. */ .nerd-formulas em { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.55rem; font-style: normal; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Code view — one block per pipeline stage, with its measured share. */ .nerd-code { display: grid; gap: 8px; } .nerd-stage { display: grid; gap: 3px; padding: 6px 7px; border-radius: 8px; border: 1px solid transparent; background: color-mix(in srgb, var(--surface-elevated) 45%, transparent); transition: border-color 0.25s ease, background 0.25s ease; } /* The stage currently taking the most time. Same signal the on-canvas ticker uses to pace its program counter. */ .nerd-stage[data-hot="true"] { border-color: color-mix(in srgb, var(--purple) 42%, transparent); background: color-mix(in srgb, var(--purple) 12%, transparent); } .nerd-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .nerd-stage-head span { color: var(--purple-bright); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .nerd-stage-head em { color: var(--text-secondary); font-size: 0.54rem; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; } .nerd-stage-bar { height: 3px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); } .nerd-stage-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--still-field-spark)); transition: width 0.22s linear; } .nerd-stage code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nerd-stage b { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.52rem; font-variant-numeric: tabular-nums; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Whole-frame figure under the four stages: what they add up to, against the budget the current cap allows. */ .nerd-stage-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 7px; } .nerd-stage-total span { color: var(--purple-bright); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .nerd-stage-total b { color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.54rem; font-variant-numeric: tabular-nums; font-weight: 600; } /* Mobile Stats launcher — sits in the same top-left corner when the HUD is off. Only shown on narrow viewports so desktop keeps a clean surface. min-height 44px satisfies the touch-target audit. */ .nerd-mobile-toggle { position: fixed; top: calc(10px + var(--safe-top)); left: 10px; z-index: 6; display: none; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--nerd-hud-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .nerd-mobile-toggle svg { flex-shrink: 0; opacity: 0.9; } .nerd-mobile-toggle:hover, .nerd-mobile-toggle:focus-visible { outline: none; color: var(--text-primary); border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); } .nerd-mobile-toggle[aria-pressed="true"] { color: var(--purple-bright); border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); } @media (max-width: 520px) { .nerd-mobile-toggle { display: flex; } /* When HUD is visible the launcher is redundant */ .nerd-hud:not([hidden]) ~ .nerd-mobile-toggle, body:has(.nerd-hud:not([hidden])) .nerd-mobile-toggle { display: none; } } /* Distinctive Stats control inside the Still Field card */ .nerd-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-elevated) 70%, transparent); color: var(--text-secondary); font-size: 0.82rem; font-weight: 550; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .nerd-card-btn svg { flex-shrink: 0; opacity: 0.85; } .nerd-card-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple-bright); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); } .nerd-card-btn:hover, .nerd-card-btn:focus-visible { outline: none; color: var(--text-primary); border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); } .nerd-card-btn:disabled { opacity: 0.45; pointer-events: none; } /* On a phone the readout shares scarce space with the main controls. Keep the live view compact; Math and Code remain available on demand. */ @media (max-width: 480px) { .nerd-hud { width: min(260px, calc(100vw - 20px)); font-size: 0.58rem; padding: 8px; } .nerd-hud--folded { width: auto; min-width: 132px; } .nerd-hud-grid { grid-template-columns: 70px minmax(0, 1fr); gap: 1px 7px; } .nerd-hud-tabs { margin: 6px 0; } .nerd-spectrum { margin-top: 6px; padding-top: 6px; } } /* Ultra glass drops every card surface, so the readout follows suit. */ [data-glass="ultra"] .nerd-hud { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; } /* No surface to fade into, so the scroll gradient would just be a dark band. */ [data-glass="ultra"] .nerd-hud::after { display: none; } [data-glass="ultra"] .nerd-mobile-toggle { background: var(--surface-elevated); } @media (prefers-reduced-motion: reduce) { .nerd-hud-health i { box-shadow: none; } .nerd-spectrum b, .nerd-stage-bar i { transition: none; } .nerd-hud-fold svg { transition: none; } .nerd-stage, .lab-chip, .lab-chip svg { transition: none; } } header { text-align: center; width: 100%; max-width: 420px; position: relative; z-index: 2; flex-shrink: 0; } .logo { font-size: 1.65rem; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); } .byline { margin-top: 3px; font-size: 0.82rem; color: var(--text-secondary); letter-spacing: 0.02em; } .byline a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .byline a:hover, .byline a:focus-visible { color: var(--purple-bright); border-bottom-color: var(--purple); outline: none; } .tagline { margin-top: 8px; font-size: 0.9rem; color: var(--text-muted); } main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 420px; gap: 20px; position: relative; z-index: 2; } /* Play button — focal point, richer purple, glass-friendly */ .play-wrap { position: relative; margin-bottom: 0; } #playBtn { width: 100px; height: 100px; border-radius: 50%; border: none; background: linear-gradient(155deg, var(--purple-bright) 0%, var(--purple) 45%, var(--purple-deep) 100%); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.35s ease, box-shadow 0.4s ease, filter 0.25s; box-shadow: 0 4px 24px var(--purple-glow), 0 0 0 0 var(--purple-glow); /* Still Field gentle influence via CSS custom property */ transform: scale(calc(1 + var(--still-energy, 0) * 0.028)); -webkit-tap-highlight-color: transparent; } #playBtn:hover, #playBtn:focus-visible { outline: none; box-shadow: 0 6px 32px var(--purple-glow), 0 0 0 4px var(--purple-glow); filter: brightness(1.05); } #playBtn:active { transform: scale(0.96); } #playBtn.playing { box-shadow: 0 0 calc(32px + var(--still-energy, 0) * 20px) calc(8px + var(--still-energy, 0) * 6px) var(--purple-glow); animation: still-pulse 4s ease-in-out infinite; } #playBtn svg { display: block; pointer-events: none; } @keyframes still-pulse { 0%, 100% { transform: scale(calc(1 + var(--still-energy, 0) * 0.028)); } 50% { transform: scale(calc(1.025 + var(--still-energy, 0) * 0.028)); } } /* Status card — calm dedicated surface just under the play button */ .status-card { width: 100%; max-width: 280px; background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 999px; border: 1px solid var(--border); padding: 10px 18px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .status { font-size: 0.88rem; color: var(--text-muted); min-height: 1.2em; line-height: 1.3; } /* Type selector — two clean rows of three (Brown/Pink/White then Green/Fan/Rain) */ .types { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; padding: 5px; gap: 4px; width: 100%; border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .type-btn { padding: 14px 8px; border: none; border-radius: 12px; background: transparent; color: var(--text-secondary); font-size: 0.95rem; font-weight: 550; cursor: pointer; transition: all 0.2s; min-height: 48px; } .type-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--purple-glow); } .type-btn.active { background: var(--purple); color: white; box-shadow: 0 2px 14px var(--purple-glow); } /* Controls — a little more breathing room */ .controls { width: 100%; display: flex; flex-direction: column; gap: 14px; } .control-group { background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .control-group label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.06em; } /* Timer label + live value */ .timer-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .timer-label-row label { margin-bottom: 0; } .timer-value { font-size: 0.82rem; font-weight: 550; color: var(--text-secondary); letter-spacing: 0.02em; min-width: 3.2em; text-align: right; } /* Range inputs — larger touch thumbs for phone */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--titanium); border-radius: 3px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--purple-bright); cursor: pointer; box-shadow: 0 0 12px var(--purple-glow); border: 2px solid var(--bg); } input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--purple-bright); cursor: pointer; border: 2px solid var(--bg); } input[type="range"]:disabled { opacity: 0.45; pointer-events: none; } input[type="range"]:focus-visible { outline: none; } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--purple-glow); } /* Still Field controls — visualisation + theme + glass + minimise */ .still-field-controls { background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius); padding: 14px 16px 16px; border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 13px; } /* Integrated card title — calm uppercase label that belongs to the card */ .card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); } .still-section-divider { height: 1px; background: var(--border); margin: 2px 0; opacity: 0.7; } .still-field-controls .still-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .still-field-controls .still-toggle-row span { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .still-field-row { display: flex; flex-direction: column; gap: 6px; } /* Extra breathing room between intensity and speed for easier sliding */ .still-field-row--spaced { margin-top: 10px; } /* Glass transparency lives with the Still Field controls because that is the only reason to reach for it — it exists to let the field show through. */ .still-field-controls .still-toggle-row.is-secondary { border-top: 1px solid var(--border); padding-top: 13px; margin-top: 2px; } .still-field-controls .still-toggle-row.is-secondary span { color: var(--text-muted); font-size: 0.8rem; } .still-field-row label { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Theme segmented control — longer pill, clear active side. Individual buttons are ≥44px so the a11y touch-target audit passes. */ .theme-segment { display: inline-flex; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; min-height: 50px; } .theme-seg { flex: 1; min-width: 64px; padding: 10px 14px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 550; cursor: pointer; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; min-height: 44px; } .theme-seg[aria-pressed="true"] { background: var(--purple); color: white; box-shadow: 0 1px 8px var(--purple-glow); } .theme-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--purple-glow); } .theme-seg[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 3px var(--purple-glow), 0 1px 8px var(--purple-glow); } /* Dedicated minimise button — sits at the foot of the Still Field card */ .minimise-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-elevated); color: var(--text-secondary); font-size: 0.85rem; font-weight: 550; letter-spacing: 0.01em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } .minimise-btn:hover, .minimise-btn:focus-visible { outline: none; color: var(--text-primary); border-color: var(--purple); background: var(--surface-elevated); box-shadow: 0 0 0 3px var(--purple-glow); } .minimise-btn:active { transform: scale(0.98); } .minimise-btn-icon { flex-shrink: 0; opacity: 0.85; } /* Still settings panel (collapsible — Equaliser) */ .still-panel { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); overflow: hidden; } .still-panel summary { padding: 14px 16px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; min-height: 48px; } .still-panel summary::-webkit-details-marker { display: none; } .still-panel summary::after { content: "▾"; font-size: 0.75rem; opacity: 0.6; transition: transform 0.2s; text-transform: none; letter-spacing: 0; } .still-panel[open] summary::after { transform: rotate(180deg); } .still-panel summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--purple); } .still-panel-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); } .still-eq-row { display: flex; flex-direction: column; gap: 6px; } .still-eq-row label { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ------------------------------------------------------------ Field Lab — renderer parameters, under the equaliser. Same panel chrome as the equaliser, with a value readout beside each label so a slider position is a number rather than a guess. ------------------------------------------------------------ */ .lab-note { margin: 0 0 2px; color: var(--text-muted); font-size: 0.68rem; line-height: 1.45; } .lab-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .lab-value { color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .still-lab .still-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .still-lab .still-toggle-row span { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .still-lab .still-toggle-row.is-secondary { border-top: 1px solid var(--border); padding-top: 13px; } .still-lab .still-toggle-row.is-secondary span { color: var(--text-muted); font-size: 0.8rem; } /* Frame-rate segmented control. Mirrors the theme segment so the two read as the same kind of control; each button clears the 44px touch target. */ .fps-segment { display: inline-flex; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; min-height: 50px; } .fps-seg { flex: 1; min-width: 48px; min-height: 44px; padding: 10px 12px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 550; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; } .fps-seg[aria-pressed="true"] { background: var(--purple); color: white; box-shadow: 0 1px 8px var(--purple-glow); } .fps-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--purple-glow); } .fps-seg:disabled { opacity: 0.45; pointer-events: none; } /* ------------------------------------------------------------ Canvas overlay chips — callouts / dimensions / source listing. A group of related on/off states reads better as one bank of chips than as three more switch rows: the three things are alternatives you turn on and off against each other while looking at the field, not three unrelated settings. Icon over label so each chip clears the 44px touch target without needing the width three side-by-side pills would take on a phone. ------------------------------------------------------------ */ .lab-overlays { display: grid; gap: 8px; padding-top: 13px; border-top: 1px solid var(--border); } .lab-overlays .lab-label-row span:first-child { color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; } .lab-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lab-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: 11px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-elevated) 60%, transparent); color: var(--text-muted); font-size: 0.66rem; font-weight: 550; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .lab-chip svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; } .lab-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--purple) 18%, transparent); border-color: color-mix(in srgb, var(--purple) 40%, var(--border)); color: var(--purple-bright); } .lab-chip[aria-pressed="true"] svg { opacity: 1; } .lab-chip:hover, .lab-chip:focus-visible { outline: none; color: var(--text-primary); border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); } .lab-chip:disabled { opacity: 0.45; pointer-events: none; } .lab-hint { margin: 0; color: var(--text-muted); font-size: 0.64rem; line-height: 1.4; opacity: 0.8; } /* The listing needs 1000 px to be drawn at all, so below that the hint is describing something the reader cannot see. Matches CODE_MIN_VIEWPORT. */ @media (max-width: 999px) { .lab-hint { display: none; } } .still-lab input[type="range"]:disabled, .still-field-row input[type="range"]:disabled { opacity: 0.4; } .minimise-btn:disabled { opacity: 0.45; pointer-events: none; } /* Toggle switch. The button itself is a transparent 48×44 touch target; the visible 48×28 track is drawn by ::before and the knob by ::after, both vertically centred. This keeps the switch looking small while staying comfortably tappable. */ .still-switch { position: relative; width: 48px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; flex-shrink: 0; } /* Track */ .still-switch::before { content: ""; position: absolute; left: 0; top: 50%; width: 48px; height: 28px; transform: translateY(-50%); border-radius: 999px; background: var(--titanium); transition: background 0.2s, box-shadow 0.2s; } .still-switch[aria-checked="true"]::before { background: var(--purple); } /* Matches the disabled range sliders, so a switch that cannot act looks it. */ .still-switch:disabled { opacity: 0.45; pointer-events: none; } .still-switch:focus-visible { outline: none; } /* Ring hugs the visible track, not the invisible touch area. */ .still-switch:focus-visible::before { box-shadow: 0 0 0 3px var(--purple-glow); } /* Knob */ .still-switch::after { content: ""; position: absolute; top: 50%; left: 3px; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; background: white; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .still-switch[aria-checked="true"]::after { transform: translateY(-50%) translateX(20px); } footer { text-align: center; font-size: 0.72rem; color: var(--text-muted); width: 100%; max-width: 420px; z-index: 2; line-height: 1.55; padding-top: 4px; flex-shrink: 0; } footer a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } footer a:hover, footer a:focus-visible { color: var(--purple-bright); border-bottom-color: var(--purple); outline: none; } footer .sep { opacity: 0.45; margin: 0 5px; } /* Small phone safety */ @media (max-height: 700px) { main { gap: 14px; } #playBtn { width: 88px; height: 88px; } .tagline { display: none; } body { gap: 16px; } } /* ------------------------------------------------------------ UI chrome hide — immersion mode for sleep. When data-ui-chrome="hidden", header/main/footer fade out and the minimised chrome cluster becomes the only interactive surface. ------------------------------------------------------------ */ .minimised-chrome { position: fixed; z-index: 5; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; transform: scale(0.92); transition: opacity 0.4s ease, transform 0.35s ease; } /* Only appear when chrome is hidden. */ html[data-ui-chrome="hidden"] .minimised-chrome { opacity: 1; pointer-events: auto; transform: scale(1); animation: minimised-appear 2.8s ease forwards; } @keyframes minimised-appear { 0% { opacity: 0; transform: scale(1.45); } 18% { opacity: 1; transform: scale(1.28); } 55% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Minimised play — smaller sibling of the main play button */ .minimised-play { width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(155deg, var(--purple-bright) 0%, var(--purple) 50%, var(--purple-deep) 100%); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px var(--purple-glow); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s; -webkit-tap-highlight-color: transparent; } .minimised-play:hover, .minimised-play:focus-visible { outline: none; box-shadow: 0 6px 24px var(--purple-glow), 0 0 0 3px var(--purple-glow); filter: brightness(1.05); } .minimised-play:active { transform: scale(0.95); } .minimised-play.playing { box-shadow: 0 0 22px 6px var(--purple-glow); } .minimised-play svg { display: block; pointer-events: none; } /* Compact status line under the minimised play */ .minimised-status-card { background: var(--surface-elevated); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; max-width: 200px; text-align: center; } .minimised-status { font-size: 0.78rem; color: var(--text-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Show controls — pill with text + icon, larger target. Base styles are theme-aware via --chrome-toggle-* tokens so bone stays calm. The entrance animation only handles scale + temporary purple emphasis. */ .ui-chrome-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--chrome-toggle-border); background: var(--chrome-toggle-bg); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); color: var(--text-secondary); cursor: pointer; font-size: 0.82rem; font-weight: 550; letter-spacing: 0.01em; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 0 transparent; } /* Entrance: start larger and more purple, then settle to the theme tokens above. */ html[data-ui-chrome="hidden"] .ui-chrome-toggle { animation: toggle-settle 2.8s ease forwards; } @keyframes toggle-settle { 0% { background: rgba(124, 58, 237, 0.78); color: white; border-color: var(--purple-bright); box-shadow: 0 0 28px rgba(124, 58, 237, 0.55); transform: scale(1.15); } 40% { background: rgba(124, 58, 237, 0.42); color: white; border-color: rgba(124, 58, 237, 0.55); box-shadow: 0 0 16px rgba(124, 58, 237, 0.35); transform: scale(1.05); } 100% { /* Hand off to the theme-token base styles */ background: var(--chrome-toggle-bg); color: var(--text-secondary); border-color: var(--chrome-toggle-border); box-shadow: 0 0 0 0 transparent; transform: scale(1); } } .ui-chrome-toggle:hover, .ui-chrome-toggle:focus-visible { outline: none; color: var(--text-primary); border-color: var(--purple); background: var(--surface-elevated); box-shadow: 0 0 0 3px var(--purple-glow); } .ui-chrome-toggle:active { transform: scale(0.97); } .ui-chrome-toggle .chrome-toggle-icon { flex-shrink: 0; opacity: 0.9; } .ui-chrome-toggle .chrome-toggle-text { white-space: nowrap; } /* Soft hide of the main chrome — keep layout so the floating cluster is stable. */ html[data-ui-chrome="hidden"] header, html[data-ui-chrome="hidden"] main, html[data-ui-chrome="hidden"] footer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } html:not([data-ui-chrome="hidden"]) header, html:not([data-ui-chrome="hidden"]) main, html:not([data-ui-chrome="hidden"]) footer { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; } /* Reduced motion — the Still Field slows itself down and drops its glow in still-field.js; this covers the CSS-driven motion. The play button keeps its colour and focus ring, it just stops breathing. */ @media (prefers-reduced-motion: reduce) { #playBtn, #playBtn.playing { animation: none; transform: none; } #stillField { transition: none; } html[data-ui-chrome="hidden"] header, html[data-ui-chrome="hidden"] main, html[data-ui-chrome="hidden"] footer, html:not([data-ui-chrome="hidden"]) header, html:not([data-ui-chrome="hidden"]) main, html:not([data-ui-chrome="hidden"]) footer, .minimised-chrome, .ui-chrome-toggle { transition: none; animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } }