@font-face { font-family:"Noto Naskh Arabic"; font-style:normal; font-weight:400 700; font-display:swap; src:url("./fonts/noto-naskh-arabic.ttf") format("truetype"); }
:root { color-scheme:light dark; --background:#f7f3e8; --surface:#fffef9; --surface-muted:#eeeadd; --selected:#e3ebe1; --border:#d8d0c1; --text:#1d2a22; --text-muted:#5c675f; --accent:#0f5b3a; --accent-hover:#0b4d30; --accent-foreground:#fffef9; --player-background:#134c36; --player-text:#fff8e7; --player-muted:#c4dbcb; --player-line:#7b9a88; --player-control:#255e47; --success:#236b46; --danger:#a43a32; --focus:#b96813; --radius:12px; font-family:Tahoma,Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--background); scrollbar-color:var(--border) var(--background); }
body { min-height:100vh; margin:0; color:var(--text); background:var(--background); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
::selection { color:var(--accent-foreground); background:var(--accent); }
h1,h2,p { margin:0; }
h1,.track-title,#active-title,#install-title { font-family:"Noto Naskh Arabic",Tahoma,sans-serif; font-weight:600; line-height:1.4; }
h1 { font-size:3rem; }
h2 { font-size:1.125rem; line-height:1.6; font-weight:700; }
.svg-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.line-icon { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.app-shell { width:min(100%,1120px); margin-inline:auto; padding:52px 32px 64px; }
.app-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block-end:30px; border-block-end:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:16px; }
.app-mark { flex:0 0 auto; width:48px; height:48px; border-radius:12px; }
.install-entry { color:var(--accent); background:transparent; border:1px solid var(--border); }
.install-entry:hover:not(:disabled) { background:var(--selected); border-color:var(--accent); }
#main-content { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr); gap:32px 48px; padding-block-start:36px; align-items:start; }
.track-section h2 { margin-block:4px 18px; color:var(--text-muted); }
.track-list { display:grid; gap:8px; border:0; padding:0; margin:0; min-width:0; }
.track-option { position:relative; display:flex; gap:14px; align-items:center; min-height:104px; padding:17px 14px; border:1px solid transparent; border-radius:var(--radius); cursor:pointer; transition:background-color 180ms cubic-bezier(.16,1,.3,1),border-color 180ms ease; }
.track-option:hover { background:var(--surface-muted); }
.track-option:has(input:checked) { background:var(--selected); }
.track-option:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:3px; }
.track-option input { position:absolute; z-index:2; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.track-symbol { color:var(--accent); width:28px; height:28px; }
.track-copy { display:grid; flex:1 1 auto; min-width:0; gap:4px; }
.track-title { font-size:1.625rem; }
.track-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--text-muted); font-size:.875rem; font-variant-numeric:tabular-nums; }
.track-check { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border:1px solid var(--text-muted); border-radius:50%; }
.track-option:has(input:checked) .track-check { background:var(--accent); border-color:var(--accent); }
.track-option:has(input:checked) .track-check::after { content:""; width:8px; height:5px; border-bottom:1.6px solid var(--accent-foreground); border-left:1.6px solid var(--accent-foreground); transform:rotate(-45deg); animation:check-settle 180ms cubic-bezier(.16,1,.3,1); }
@keyframes check-settle { from { transform:rotate(-45deg) scale(.65); } to { transform:rotate(-45deg) scale(1); } }
.player-section { min-width:0; padding:36px; color:var(--player-text); background:var(--player-background); border-radius:24px; box-shadow:0 12px 32px rgb(19 76 54 / 8%); --focus:#eac182; }
.player-section ::selection { color:var(--player-background); background:var(--player-text); }
.player-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.player-identity { min-width:0; }
#active-title { font-size:2.625rem; text-wrap:balance; }
.status-pill { display:flex; gap:8px; align-items:center; color:var(--player-muted); font-size:.875rem; margin-block-start:5px; }
.status-pill::before { content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--player-muted); }
.status-pill[data-state="playing"]::before { background:#a6e5af; }
.status-pill[data-state="loading"]::before,.status-pill[data-state="buffering"]::before { background:#eac182; }
.status-pill[data-state="error"] { color:#ffb7ac; }
.status-pill[data-state="error"]::before { background:currentColor; }
.player-art { display:none; width:76px; height:76px; color:#e1cda1; stroke-width:.8; }
body[data-track="morning"] .morning-art,body[data-track="evening"] .evening-art,body[data-track="sleep"] .sleep-art { display:block; }
.progress-block { margin-block:24px 20px; }
input[type="range"] { --range-fill:0%; display:block; width:100%; min-width:0; height:44px; margin:0; padding:0; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; touch-action:auto; }
input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right,var(--player-text) var(--range-fill),var(--player-line) var(--range-fill)); }
input[type="range"]::-moz-range-track { height:4px; border-radius:2px; background:var(--player-line); }
input[type="range"]::-moz-range-progress { height:4px; background:var(--player-text); }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; margin-block-start:-5px; background:var(--player-text); border:0; border-radius:50%; }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; background:var(--player-text); border:0; border-radius:50%; }
input[type="range"]:disabled { opacity:.5; cursor:not-allowed; }
.time-row { display:flex; justify-content:space-between; direction:ltr; color:var(--player-muted); font-size:.875rem; font-variant-numeric:tabular-nums; margin-block-start:-5px; }
.player-actions { display:flex; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; border-radius:10px; font-weight:700; transition:background-color 160ms ease,border-color 160ms ease; }
.button-primary { color:var(--accent-foreground); background:var(--accent); }
.button-primary:hover:not(:disabled) { background:var(--accent-hover); }
.button-secondary { color:var(--accent); background:transparent; border:1px solid var(--border); }
.button-secondary:hover:not(:disabled) { background:var(--selected); border-color:var(--accent); }
.button-quiet { color:var(--danger); background:transparent; border:1px solid var(--border); }
.player-section .button-primary { color:var(--player-background); background:var(--player-text); }
.player-section .button-primary:hover:not(:disabled) { background:#e1cda1; }
.player-section .button-secondary { color:var(--player-text); border-color:var(--player-line); }
.player-section .button-secondary:hover:not(:disabled) { background:var(--player-control); border-color:var(--player-muted); }
.play-button { flex:1 1 auto; font-size:1.0625rem; }
.button-icon { width:20px; height:20px; fill:currentColor; }
.speed-section { padding-block-start:22px; margin-block-start:26px; border-block-start:1px solid var(--player-line); }
.speed-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block-end:8px; }
.speed-heading h2 { font-size:.9375rem; font-weight:400; }
#speed-value { font-size:1.125rem; font-variant-numeric:tabular-nums; font-weight:700; }
.speed-control { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:16px; direction:ltr; }
.step-button { display:grid; place-items:center; width:44px; height:44px; color:var(--player-text); background:var(--player-control); border-radius:8px; transition:background-color 160ms ease; }
.step-button .line-icon { width:20px; height:20px; }
.step-button:hover:not(:disabled) { background:#396f57; }
.speed-marks { display:flex; justify-content:space-between; color:var(--player-muted); margin-inline:60px; margin-block-start:-2px; font-size:.875rem; font-variant-numeric:tabular-nums; }
.utility-section { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; grid-column:1 / -1; padding-block:24px; border-block-start:1px solid var(--border); }
.offline-heading { display:flex; align-items:center; gap:16px; }
.offline-heading > .line-icon { color:var(--accent); }
.offline-heading h2 { font-size:1rem; }
#offline-badge { color:var(--text-muted); font-size:.875rem; }
#offline-badge[data-state="saved"] { color:var(--success); }
.utility-actions { display:flex; gap:12px; }
.message { margin-block-start:14px; color:var(--text-muted); font-size:.9375rem; overflow-wrap:anywhere; }
.utility-section .message,.utility-section progress { flex:1 1 100%; margin:0; }
.message-error { padding:12px; color:#ffb7ac; background:#593d37; border:1px solid #ab776b; border-radius:8px; }
progress { width:100%; height:8px; accent-color:var(--accent); }
.install-dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:28px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:0 20px 64px rgb(0 0 0 / 20%); overscroll-behavior:contain; }
.install-dialog::backdrop { background:rgb(15 32 23 / 48%); }
body:has(.install-dialog[open]) { overflow:hidden; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:22px; }
#install-title { font-size:2rem; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; color:var(--text-muted); background:transparent; border-radius:8px; }
.icon-button:hover { background:var(--surface-muted); }
.platform-switch { display:flex; padding:4px; gap:4px; border:1px solid var(--border); border-radius:10px; background:var(--surface-muted); }
.platform-switch button { flex:1; min-height:44px; padding:8px; color:var(--text-muted); background:transparent; border-radius:7px; font-size:.9375rem; }
.platform-switch button[aria-pressed="true"] { color:var(--accent); background:var(--surface); font-weight:700; box-shadow:0 2px 5px rgb(29 42 34 / 5%); }
.install-steps { margin-block:26px; }
.install-steps ol { margin:0; padding-inline-start:24px; }
.install-steps li { padding-inline-start:8px; }
.install-steps li + li { margin-block-start:16px; }
.install-steps li::marker { color:var(--accent); font-weight:700; }
.install-link { display:flex; flex-wrap:wrap; gap:10px; }
.install-link input { flex:1 1 180px; min-width:0; width:100%; min-height:48px; padding:10px 12px; color:var(--text-muted); background:var(--background); border:1px solid var(--border); border-radius:8px; font-size:16px; }
.install-link button { flex:0 1 auto; }
.native-install { width:100%; margin-block-start:12px; }
.skip-link { position:fixed; z-index:20; inset-block-start:8px; inset-inline-start:8px; padding:10px 16px; color:var(--accent-foreground); background:var(--accent); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.noscript-message { position:fixed; inset:auto 16px 16px; margin:0; padding:14px; color:white; background:var(--danger); border-radius:10px; text-align:center; }
[hidden] { display:none !important; }
@media (max-width:820px) {
  .app-shell { max-width:600px; padding:28px 20px 32px; }
  .app-header { padding-block-end:20px; }
  h1 { font-size:2.5rem; }
  .brand { gap:12px; }
  #main-content { grid-template-columns:minmax(0,1fr); gap:24px; padding-block-start:24px; }
  .track-section h2 { margin-block:0 10px; font-size:1rem; }
  .track-list { gap:4px; }
  .track-option { min-height:76px; padding:12px; }
  .track-title { font-size:1.5rem; }
  .player-section { padding:24px; border-radius:20px; }
  #active-title { font-size:2.25rem; }
  .player-art { width:56px; height:56px; }
  .progress-block { margin-block:16px 18px; }
  .speed-section { padding-block-start:18px; margin-block-start:22px; }
  .utility-section { gap:16px; padding-block:20px; }
}
@media (max-width:420px) {
  .app-shell { padding:18px 16px 24px; }
  .app-mark { width:40px; height:40px; }
  h1 { font-size:2.125rem; }
  .app-header { gap:8px; padding-block-end:16px; }
  .install-entry { gap:6px; padding-inline:10px; font-size:.875rem; }
  .install-entry .line-icon { width:20px; height:20px; }
  #main-content { padding-block-start:18px; gap:20px; }
  .track-option { gap:12px; min-height:72px; padding-block:10px; }
  .track-symbol { width:24px; height:24px; }
  .track-title { font-size:1.375rem; }
  .track-meta { gap:5px; }
  .player-section { padding:22px; }
  #active-title { font-size:2rem; }
  .player-actions { gap:8px; }
  .player-actions .button { padding-inline:12px; }
  .offline-heading { gap:10px; }
  .offline-heading h2 { font-size:.9375rem; }
  .utility-actions .button { padding-inline:12px; font-size:.875rem; }
  .install-dialog { padding:22px; }
}
@media (prefers-color-scheme:dark) {
  :root { --background:#101a15; --surface:#19271e; --surface-muted:#223429; --selected:#243c2d; --border:#405347; --text:#f6f1e5; --text-muted:#bdcdbf; --accent:#95d2a8; --accent-hover:#b0e2be; --accent-foreground:#102e1e; --success:#a6e5af; --danger:#ffb7ac; --focus:#eac182; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media (forced-colors:active) {
  .track-option:has(input:checked),.track-check,.player-section,.platform-switch button[aria-pressed="true"] { border:1px solid CanvasText; }
  input[type="range"] { appearance:auto; }
}