@property --arc-start {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@property --arc-end {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@property --progress-dash-animation {
syntax: "*";
inherits: false;
initial-value: , progress-dash 3s ease-in-out infinite;
}
:root {
--target-size: 24px;
--bg-light: #faf6f1;
--bg-dark: #14100d;
--surface-light: rgba(255, 252, 248, 0.88);
--surface-dark: rgba(31, 24, 20, 0.88);
--surface-elevated-light: #ffffff;
--surface-elevated-dark: #281f1a;
--surface-subtle-light: #f1e9df;
--surface-subtle-dark: #211915;
--text-primary-light: #1e1611;
--text-primary-dark: #f7efe6;
--text-secondary-light: #5c4b3e;
--text-secondary-dark: #c4b2a1;
--border-light: rgba(120, 82, 52, 0.16);
--border-dark: rgba(245, 208, 175, 0.13);
--brand-light: #b93815;
--brand-dark: #f97316;
--brand-strong-light: #9a2c0f;
--brand-strong-dark: #fb923c;
--brand-contrast-light: #ffffff;
--brand-contrast-dark: #1c0d04;
--live-green-light: #15803d;
--live-green-dark: #4ade80;
--shadow-card-light: 0 20px 50px -16px rgba(69, 39, 18, 0.16);
--shadow-card-dark: 0 24px 60px -16px rgba(0, 0, 0, 0.62);
--bg: var(--bg-light);
--surface: var(--surface-light);
--surface-elevated: var(--surface-elevated-light);
--surface-subtle: var(--surface-subtle-light);
--text-primary: var(--text-primary-light);
--text-secondary: var(--text-secondary-light);
--border-color: var(--border-light);
--brand: var(--brand-light);
--brand-strong: var(--brand-strong-light);
--brand-contrast: var(--brand-contrast-light);
--live-green: var(--live-green-light);
--shadow-card: var(--shadow-card-light);
--scrollbar-track: #efe7dc;
--scrollbar-thumb: #967c66;
@media (prefers-color-scheme: dark) {
--bg: var(--bg-dark);
--surface: var(--surface-dark);
--surface-elevated: var(--surface-elevated-dark);
--surface-subtle: var(--surface-subtle-dark);
--text-primary: var(--text-primary-dark);
--text-secondary: var(--text-secondary-dark);
--border-color: var(--border-dark);
--brand: var(--brand-dark);
--brand-strong: var(--brand-strong-dark);
--brand-contrast: var(--brand-contrast-dark);
--live-green: var(--live-green-dark);
--shadow-card: var(--shadow-card-dark);
--scrollbar-track: #1e1713;
--scrollbar-thumb: #7b6655;
}
@supports (color: light-dark(white, black)) {
--bg: light-dark(var(--bg-light), var(--bg-dark));
--surface: light-dark(var(--surface-light), var(--surface-dark));
--surface-elevated: light-dark(var(--surface-elevated-light), var(--surface-elevated-dark));
--surface-subtle: light-dark(var(--surface-subtle-light), var(--surface-subtle-dark));
--text-primary: light-dark(var(--text-primary-light), var(--text-primary-dark));
--text-secondary: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
--border-color: light-dark(var(--border-light), var(--border-dark));
--brand: light-dark(var(--brand-light), var(--brand-dark));
--brand-strong: light-dark(var(--brand-strong-light), var(--brand-strong-dark));
--brand-contrast: light-dark(var(--brand-contrast-light), var(--brand-contrast-dark));
--live-green: light-dark(var(--live-green-light), var(--live-green-dark));
--shadow-card: light-dark(var(--shadow-card-light), var(--shadow-card-dark));
--scrollbar-track: light-dark(#efe7dc, #1e1713);
--scrollbar-thumb: light-dark(#967c66, #7b6655);
}
color-scheme: light dark;
accent-color: var(--brand);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
&:has(> head > meta[name="color-scheme"][content="dark"]) {
color-scheme: dark;
}
&:has(> head > meta[name="color-scheme"][content="light"]) {
color-scheme: light;
}
}
@media (pointer: coarse) {
:root {
--target-size: 44px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html,
body {
margin: 0;
padding: 0;
min-block-size: 100dvh;
background-color: var(--bg);
color: var(--text-primary);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
margin: 0;
line-height: 1.2;
text-wrap: balance;
}
p,
li {
margin: 0;
text-wrap: pretty;
}
img,
video {
max-inline-size: 100%;
block-size: auto;
display: block;
}
:where(button, select, textarea, input:not([type="checkbox"], [type="radio"]), [role="button"], nav a, label:has(input[type="checkbox"], input[type="radio"])) {
min-block-size: var(--target-size);
min-inline-size: var(--target-size);
}
:where([role="button"], nav a, label:has(input[type="checkbox"], input[type="radio"])) {
display: inline-flex;
align-items: center;
}
:where(.toolbar > :not(button, input, select, textarea, a, [role="button"], label)) {
min-inline-size: 0;
}
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mono-readout {
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ambient-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 18% 15%, rgba(234, 88, 12, 0.15), transparent 46%),
radial-gradient(circle at 82% 78%, rgba(217, 119, 6, 0.12), transparent 50%);
}
.app-shell {
container: app-shell / inline-size;
position: relative;
z-index: 1;
max-inline-size: 68rem;
margin-inline: auto;
min-block-size: 100dvh;
display: flex;
flex-direction: column;
gap: 0.85rem;
padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
padding-left: max(0.875rem, env(safe-area-inset-left, 0px));
padding-right: max(0.875rem, env(safe-area-inset-right, 0px));
}
.topbar {
position: sticky;
top: max(0.5rem, env(safe-area-inset-top, 0px));
z-index: 30;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand actions"
"player player";
align-items: center;
gap: 0.65rem 0.75rem;
padding: 0.7rem 0.875rem;
background: var(--surface);
backdrop-filter: blur(18px);
border: 1px solid var(--border-color);
border-radius: 1.15rem;
box-shadow: var(--shadow-card);
}
.brand-lockup {
grid-area: brand;
display: flex;
align-items: center;
gap: 0.65rem;
min-inline-size: 0;
}
.topbar-actions {
grid-area: actions;
justify-content: flex-end;
}
.topbar-player {
grid-area: player;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding-top: 0.65rem;
border-top: 1px solid var(--border-color);
min-inline-size: 0;
}
.brand-emblem {
border-radius: 0.5rem;
flex-shrink: 0;
}
.brand-copy {
min-inline-size: 0;
}
.brand-eyebrow {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand);
}
.brand-title {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.live-clock {
display: none;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: var(--surface-subtle);
color: var(--text-secondary);
font-size: 0.82rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@container app-shell (inline-size > 38rem) {
.live-clock {
display: inline-flex;
}
}
@container app-shell (inline-size > 56rem) {
.topbar {
grid-template-columns: auto minmax(22rem, 1fr) auto;
grid-template-areas: "brand player actions";
gap: 1rem;
padding: 0.75rem 1.125rem;
}
.topbar-player {
padding-top: 0;
padding-inline: 1rem;
border-top: 0;
border-inline: 1px solid var(--border-color);
justify-content: center;
gap: 1rem;
}
}
.icon-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.5rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--surface-elevated);
color: var(--text-primary);
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.icon-button:hover {
border-color: var(--brand);
}
.icon-button:active {
transform: scale(0.96);
}
.icon-button:focus-visible,
.bottom-bar-btn:focus-visible,
.secondary-btn:focus-visible,
.play-fab:focus-visible,
.pill-link:focus-visible,
.sleep-option:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.bottom-bar {
position: sticky;
bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
z-index: 25;
inline-size: 100%;
max-inline-size: 34rem;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.38rem;
background: var(--surface);
backdrop-filter: blur(18px);
border: 1px solid var(--border-color);
border-radius: 1.1rem;
box-shadow: var(--shadow-card);
}
.bottom-bar-btn {
position: relative;
flex: 1 1 4.75rem;
min-inline-size: var(--target-size);
min-block-size: var(--target-size);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.42rem;
padding: 0.48rem 0.6rem;
border-radius: 0.8rem;
border: 1px solid transparent;
background: var(--surface-elevated);
color: var(--text-primary);
font-size: 0.83rem;
font-weight: 700;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.bottom-bar-btn svg {
flex-shrink: 0;
}
.bottom-bar-btn:hover {
border-color: var(--brand);
}
.bottom-bar-btn:active {
transform: scale(0.97);
}
.bottom-bar-btn:has(#sleep-badge:not([hidden])) {
border-color: var(--brand);
}
.bottom-bar-btn:has(#sleep-badge:not([hidden])) .sleep-label {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.bottom-bar-btn--install {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-contrast);
}
.bottom-bar-btn--install:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
}
.install-label-full {
display: none;
}
@container app-shell (inline-size > 38rem) {
.install-label-short {
display: none;
}
.install-label-full {
display: inline;
}
.bottom-bar-btn:has(#sleep-badge:not([hidden])) .sleep-label {
position: static;
inline-size: auto;
block-size: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
}
.badge-pill {
font-size: 0.72rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: var(--brand);
color: var(--brand-contrast);
font-variant-numeric: tabular-nums;
}
.player-stage {
container: player-stage / inline-size;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.25rem;
}
.studio-card {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
background: var(--surface);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
box-shadow: var(--shadow-card);
}
@container player-stage (inline-size > 46rem) {
.studio-card {
grid-template-columns: minmax(19rem, 22.5rem) 1fr;
align-items: center;
padding: 1.75rem;
gap: 2rem;
}
}
.artwork-column {
display: flex;
flex-direction: column;
justify-content: center;
}
.artwork-frame {
position: relative;
inline-size: 100%;
aspect-ratio: 1 / 1;
border-radius: 1.125rem;
overflow: hidden;
border: 1px solid var(--border-color);
background: #121a21;
}
.station-photo {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
transition: transform 600ms ease;
}
.artwork-frame[data-playing="true"] .station-photo {
transform: scale(1.015);
}
@media (prefers-reduced-motion: reduce) {
.station-photo {
transition: none;
}
.artwork-frame[data-playing="true"] .station-photo {
transform: none;
}
}
.artwork-overlay {
position: absolute;
inset: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
padding: 0.75rem;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(10, 14, 20, 0.52) 0%,
rgba(10, 14, 20, 0) 28%
);
}
.status-pill {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.32rem 0.7rem;
border-radius: 999px;
background: rgba(15, 20, 27, 0.78);
backdrop-filter: blur(8px);
color: #fff7ed;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.pulse-dot {
inline-size: 0.52rem;
block-size: 0.52rem;
border-radius: 50%;
background: #f59e0b;
}
.status-pill[data-state="playing"] .pulse-dot {
background: #4ade80;
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.28);
}
.status-pill[data-state="error"] .pulse-dot {
background: #f87171;
}
.listener-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.68rem;
border-radius: 999px;
background: rgba(15, 20, 27, 0.78);
backdrop-filter: blur(8px);
color: #f5ebe0;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.console-column {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.9rem;
min-inline-size: 0;
}
@container player-stage (inline-size > 46rem) {
.console-column {
gap: 1.35rem;
}
}
.program-subtitle {
font-size: 0.94rem;
color: var(--text-secondary);
}
.visualizer-box {
position: relative;
contain: layout style paint;
border-radius: 1rem;
padding: 0.75rem 0.9rem 0.55rem;
background: var(--surface-subtle);
border: 1px solid var(--border-color);
}
#spectrum-canvas {
inline-size: 100%;
block-size: 5.5rem;
display: block;
}
@container player-stage (inline-size > 46rem) {
.visualizer-box {
padding: 0.85rem 0.95rem 0.6rem;
}
#spectrum-canvas {
block-size: 8.5rem;
}
}
.visualizer-caption {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.35rem;
font-size: 0.75rem;
color: var(--text-secondary);
}
.primary-transport {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.play-fab {
inline-size: 3.1rem;
block-size: 3.1rem;
border-radius: 50%;
border: 0;
background: var(--brand);
color: var(--brand-contrast);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 8px 20px -5px rgba(185, 56, 21, 0.48);
transition: transform 140ms ease, background-color 150ms ease;
}
.play-fab:hover {
background: var(--brand-strong);
}
.play-fab:active {
transform: scale(0.95);
}
.secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.55rem 0.65rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--surface-elevated);
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease;
}
.reconnect-label {
display: none;
}
@container app-shell (inline-size > 34rem) {
.secondary-btn {
padding: 0.55rem 0.85rem;
}
.reconnect-label {
display: inline;
}
}
.secondary-btn:hover {
border-color: var(--brand);
}
.volume-row {
flex: 1 1 7rem;
min-inline-size: 0;
max-inline-size: 16rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.volume-readout {
min-inline-size: 2.35rem;
text-align: right;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
}
input[type="range"] {
--slider-track-size: 0.45rem;
--slider-thumb-size: 1.2rem;
--slider-track-radius: 999px;
--slider-thumb-radius: 50%;
--slider-track-color: var(--border-color);
--slider-fill-color: var(--brand);
--slider-thumb-color: var(--slider-fill-color);
--slider-direction: to right;
&:dir(rtl) {
--slider-direction: to left;
}
--attr-min: attr(min type(<number>), 0);
--attr-max: attr(max type(<number>), 100);
--control-value: attr(value type(<number>), 85);
--slider-progress: calc(
progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
);
appearance: none;
inline-size: 100%;
block-size: 2.5rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
cursor: pointer;
}
@supports not (opacity: progress(1, 0, 100)) {
input[type="range"] {
--slider-progress: calc(
(var(--control-value) - var(--attr-min)) /
(var(--attr-max) - var(--attr-min)) * 100%
);
}
}
input[type="range"]::-webkit-slider-runnable-track {
block-size: var(--slider-track-size);
border: 0;
border-radius: var(--slider-track-radius);
background: linear-gradient(
var(--slider-direction),
var(--slider-fill-color) var(--slider-progress),
var(--slider-track-color) var(--slider-progress)
);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
inline-size: var(--slider-thumb-size);
block-size: var(--slider-thumb-size);
margin-block-start: calc(
(var(--slider-track-size) - var(--slider-thumb-size)) / 2
);
border: 0;
border-radius: var(--slider-thumb-radius);
background: var(--slider-thumb-color);
}
input[type="range"]::-moz-range-track {
block-size: var(--slider-track-size);
border: 0;
border-radius: var(--slider-track-radius);
background: var(--slider-track-color);
}
input[type="range"]::-moz-range-progress {
block-size: var(--slider-track-size);
border-radius: var(--slider-track-radius);
background: var(--slider-fill-color);
}
input[type="range"]::-moz-range-thumb {
inline-size: var(--slider-thumb-size);
block-size: var(--slider-thumb-size);
border: 0;
border-radius: var(--slider-thumb-radius);
background: var(--slider-thumb-color);
}
input[type="range"]:focus-visible {
outline: 2px solid var(--slider-fill-color);
outline-offset: 4px;
}
progress.loading-spinner:indeterminate::-webkit-progress-bar {
display: none;
background: none;
}
progress.loading-spinner:indeterminate::-webkit-progress-value {
display: none;
background: none;
}
progress.loading-spinner:indeterminate::-moz-progress-bar {
display: none;
background: none;
}
progress.loading-spinner:indeterminate::slider-fill {
display: none;
background: none;
}
progress.loading-spinner:indeterminate {
--_from: calc(90deg + var(--arc-start, 0deg));
--_to: calc(90deg + var(--arc-end, 158deg));
--size: 24px;
--thickness: 3px;
--spinner-color: var(--brand-contrast);
--track-color: rgba(255, 255, 255, 0.24);
--spinner-duration: 1.3s;
--_used-spinner-duration: var(--spinner-duration);
position: relative;
width: var(--size);
height: var(--size);
border-radius: 50%;
appearance: none;
border: 0;
background: conic-gradient(
from var(--_from),
var(--spinner-color) calc(var(--_to) - var(--_from)),
transparent 0
)
var(--track-color);
@supports (background-clip: border-area) {
background-clip: border-area;
border: var(--thickness) solid transparent;
background-origin: border-box;
}
@supports not (background-clip: border-area) {
--clip-boundary: calc(100% - var(--thickness));
mask-image: radial-gradient(
farthest-side,
transparent var(--clip-boundary),
black var(--clip-boundary)
);
border: 0;
}
@media (forced-colors: active) {
forced-color-adjust: none;
--spinner-color: CanvasText;
--track-color: Canvas;
}
animation:
progress-spin var(--_used-spinner-duration) linear infinite
var(--progress-dash-animation, );
}
@media (prefers-reduced-motion: reduce) {
progress.loading-spinner:indeterminate {
--_used-spinner-duration: 6s;
--progress-dash-animation: ;
--arc-end: 158deg;
}
}
@keyframes progress-spin {
to {
rotate: 1turn;
}
}
@keyframes progress-dash {
from {
--arc-start: 0deg;
--arc-end: 3deg;
}
50% {
--arc-start: 100deg;
--arc-end: 358deg;
}
to {
--arc-start: 360deg;
--arc-end: 363deg;
}
}
.info-strip {
display: grid;
grid-template-columns: 1fr;
}
.mini-card {
padding: 1rem 1.25rem;
border-radius: 1.125rem;
background: var(--surface);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mini-card-copy {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
@container player-stage (inline-size > 46rem) {
.mini-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
}
}
.mini-card h3 {
font-size: 0.95rem;
font-weight: 700;
}
.mini-card p {
font-size: 0.86rem;
color: var(--text-secondary);
}
.external-links {
flex-shrink: 0;
}
.pill-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.8rem;
border-radius: 0.65rem;
border: 1px solid var(--border-color);
background: var(--surface-elevated);
color: var(--text-primary);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.pill-link:hover {
border-color: var(--brand);
color: var(--brand);
}
.app-footer {
text-align: center;
font-size: 0.8rem;
color: var(--text-secondary);
padding-block: 0.35rem;
}
kbd {
display: inline-block;
padding: 0.1rem 0.38rem;
border-radius: 0.35rem;
border: 1px solid var(--border-color);
background: var(--surface-elevated);
font-size: 0.74rem;
font-family: inherit;
}
dialog:modal {
overscroll-behavior: contain;
inline-size: min(92vw, 29rem);
padding: 0;
border: 1px solid var(--border-color);
border-radius: 1.25rem;
background: var(--surface-elevated);
color: var(--text-primary);
box-shadow: var(--shadow-card);
}
dialog::backdrop {
overflow: hidden;
overscroll-behavior: contain;
background: rgba(10, 8, 6, 0.58);
backdrop-filter: blur(4px);
}
.dialog-inner {
padding: 1.35rem;
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.dialog-header h2 {
font-size: 1.125rem;
font-weight: 800;
}
.dialog-desc {
font-size: 0.88rem;
color: var(--text-secondary);
}
.sleep-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.65rem;
}
.sleep-option {
padding: 0.75rem;
border-radius: 0.85rem;
border: 1px solid var(--border-color);
background: var(--surface-subtle);
color: var(--text-primary);
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}
.sleep-option:hover,
.sleep-option[data-active="true"] {
border-color: var(--brand);
background: var(--brand);
color: var(--brand-contrast);
}
.sleep-cancel {
grid-column: 1 / -1;
}
.settings-section {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.settings-section h3 {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.theme-segmented {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
padding: 0.3rem;
border-radius: 0.85rem;
background: var(--surface-subtle);
border: 1px solid var(--border-color);
}
.segment-item {
position: relative;
justify-content: center;
padding: 0.45rem 0.5rem;
border-radius: 0.6rem;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
text-align: center;
}
.segment-item input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.segment-item:has(input:checked) {
background: var(--brand);
color: var(--brand-contrast);
}
.segment-item:has(input:focus-visible) {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem;
border-radius: 0.85rem;
background: var(--surface-subtle);
border: 1px solid var(--border-color);
}
.switch-copy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-inline-size: 0;
}
.switch-label {
font-size: 0.88rem;
font-weight: 700;
cursor: pointer;
}
.switch-desc {
font-size: 0.77rem;
color: var(--text-secondary);
}
input[type="checkbox"][switch] {
accent-color: var(--brand);
margin: 0;
flex-shrink: 0;
cursor: pointer;
}
input[type="checkbox"][switch]:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 4px;
}
.diag-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.85rem;
border-radius: 0.85rem;
background: var(--surface-subtle);
border: 1px solid var(--border-color);
}
.diag-list > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
font-size: 0.82rem;
}
.diag-list dt {
color: var(--text-secondary);
}
.diag-list dd {
margin: 0;
font-weight: 700;
text-align: right;
}
.install-preview {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.85rem;
border-radius: 0.9rem;
background: var(--surface-subtle);
border: 1px solid var(--border-color);
}
.install-app-icon {
border-radius: 0.85rem;
flex-shrink: 0;
}
.install-steps {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--text-primary);
}
.install-steps li {
line-height: 1.45;
}
.toast {
position: fixed;
left: 50%;
bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 50;
max-inline-size: calc(100vw - 2rem);
text-align: center;
padding: 0.6rem 1.1rem;
border-radius: 999px;
background: var(--text-primary);
color: var(--bg);
font-size: 0.85rem;
font-weight: 700;
box-shadow: var(--shadow-card);
}
@supports not (scrollbar-color: auto) {
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 999px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
}