:root{
    --bg:#F4F2EC;
    --surface:#FFFFFF;
    --surface-2:#ECE9E1;
    --border:#DEDAD0;
    --ink:#1D2126;
    --muted:#767267;
    --muted-2:#9B9789;
    --accent:#B4791F;
    --accent-ink:#FFFFFF;
    --danger:#B4432E;
    --good:#4C7A5A;
    --shadow: 0 1px 2px rgba(29,33,38,0.06), 0 8px 24px -12px rgba(29,33,38,0.18);
    --shadow-lg: 0 20px 60px -14px rgba(29,33,38,0.28);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
  }

  [data-theme="classic-dark"]{
    --bg:#14171B; --surface:#1C2026; --surface-2:#20242B; --border:#2C313A;
    --ink:#EDEEF0; --muted:#8A8F98; --muted-2:#5F636C;
    --accent:#E3A94C; --accent-ink:#14171B; --danger:#E17361; --good:#7FBE97;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.7);
  }
  [data-theme="forest"]{
    --bg:#F1F5EE; --surface:#FFFFFF; --surface-2:#E4EBDF; --border:#D3DECB;
    --ink:#233024; --muted:#5C6E58; --muted-2:#8CA084;
    --accent:#4C7A5A; --accent-ink:#FFFFFF; --danger:#B4432E; --good:#3E7A50;
    --shadow: 0 1px 2px rgba(35,48,36,0.08), 0 8px 24px -12px rgba(35,48,36,0.2);
    --shadow-lg: 0 20px 60px -14px rgba(35,48,36,0.3);
  }
  [data-theme="ocean"]{
    --bg:#EEF3F6; --surface:#FFFFFF; --surface-2:#DEE9EF; --border:#C9DAE3;
    --ink:#132430; --muted:#4F6B7A; --muted-2:#7E9AAA;
    --accent:#2E6E8E; --accent-ink:#FFFFFF; --danger:#B4432E; --good:#3E8A7A;
    --shadow: 0 1px 2px rgba(19,36,48,0.08), 0 8px 24px -12px rgba(19,36,48,0.2);
    --shadow-lg: 0 20px 60px -14px rgba(19,36,48,0.3);
  }
  [data-theme="sunset"]{
    --bg:#1D1520; --surface:#2A1F2E; --surface-2:#33253A; --border:#453353;
    --ink:#F5E9E9; --muted:#B79AAE; --muted-2:#8A7191;
    --accent:#E3714C; --accent-ink:#1D1520; --danger:#E15E5E; --good:#7FBE97;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.7);
  }
  [data-theme="mono"]{
    --bg:#F2F2F0; --surface:#FFFFFF; --surface-2:#E4E4E1; --border:#D2D2CE;
    --ink:#161616; --muted:#6B6B67; --muted-2:#9B9B96;
    --accent:#161616; --accent-ink:#FFFFFF; --danger:#8A3A3A; --good:#3A5A3A;
    --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.16);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.24);
  }
  /* Photo theme: warm sunset field. A soft dark scrim sits under the image so
     light, warm-toned text stays readable against both the bright sky and the
     golden field. Panels/buttons use tinted glass (blurred) instead of solid
     fills so the photo still reads through them. */
[data-theme="golden-hour"]{
    --bg:#2B1B0E; --surface:rgba(24,16,8,0.5); --surface-2:rgba(24,16,8,0.32); --border:rgba(255,248,235,0.22);
    --ink:#FFF9EE; --muted:rgba(255,249,238,0.76); --muted-2:rgba(255,249,238,0.52);
    --accent:#F2A93B; --accent-ink:#2B1B06; --danger:#FF8F6B; --good:#8FE3B0;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 12px 32px -16px rgba(0,0,0,0.55);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.65);
    background-image: linear-gradient(180deg, rgba(14,10,5,0.42) 0%, rgba(14,10,5,0.34) 40%, rgba(10,7,4,0.58) 100%), url("../assets/theme-backgrounds/Golden Hour.jpg");
    background-size: cover;
    background-position: center 60%;
    background-attachment: fixed;
  }
[data-theme="bridge-fog"]{
  --bg:#241A2A; --surface:rgba(28,18,32,0.5); --surface-2:rgba(28,18,32,0.32); --border:rgba(255,240,246,0.22);
  --ink:#FBEFF4; --muted:rgba(251,239,244,0.76); --muted-2:rgba(251,239,244,0.52);
  --accent:#E8879E; --accent-ink:#2B1420; --danger:#FF8F8F; --good:#8FE3B0;
  background-image: linear-gradient(180deg, rgba(24,14,26,0.5) 0%, rgba(24,14,26,0.28) 45%, rgba(16,12,20,0.55) 100%), url("../assets/theme-backgrounds/Bridge with Fog.jpg");
  background-size: cover; background-position: center 55%; background-attachment: fixed;
}
[data-theme="bridge-fog"] .icon-btn,
[data-theme="bridge-fog"] .mode-tabs,
[data-theme="bridge-fog"] .btn-ghost,
[data-theme="bridge-fog"] .mode-tab.active,
[data-theme="bridge-fog"] .player,
[data-theme="bridge-fog"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="bridge-fog"] .settings-modal{
  background: rgba(28,18,32,0.94);
}

[data-theme="clouds"]{
  --bg:#E8EEF2; --surface:rgba(255,255,255,0.55); --surface-2:rgba(255,255,255,0.38); --border:rgba(30,45,60,0.18);
  --ink:#1C2733; --muted:rgba(28,39,51,0.68); --muted-2:rgba(28,39,51,0.46);
  --accent:#1D6FA5; --accent-ink:#FFFFFF; --danger:#B4432E; --good:#2E7A5A;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.34) 100%), url("../assets/theme-backgrounds/Clouds.jpg");
  background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="clouds"] .icon-btn,
[data-theme="clouds"] .mode-tabs,
[data-theme="clouds"] .btn-ghost,
[data-theme="clouds"] .mode-tab.active,
[data-theme="clouds"] .player,
[data-theme="clouds"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="clouds"] .settings-modal{
  background: rgba(255,255,255,0.94);
}

[data-theme="green-forest"]{
  --bg:#10160F; --surface:rgba(14,20,12,0.5); --surface-2:rgba(14,20,12,0.32); --border:rgba(235,240,225,0.2);
  --ink:#F1F5EA; --muted:rgba(241,245,234,0.74); --muted-2:rgba(241,245,234,0.5);
  --accent:#E8C468; --accent-ink:#2A2308; --danger:#FF8F6B; --good:#8FE3A4;
  background-image: linear-gradient(180deg, rgba(6,10,5,0.42) 0%, rgba(6,10,5,0.3) 45%, rgba(4,7,3,0.5) 100%), url("../assets/theme-backgrounds/Green Forest.jpg");
  background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="green-forest"] .icon-btn,
[data-theme="green-forest"] .mode-tabs,
[data-theme="green-forest"] .btn-ghost,
[data-theme="green-forest"] .mode-tab.active,
[data-theme="green-forest"] .player,
[data-theme="green-forest"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="green-forest"] .settings-modal{
  background: rgba(14,20,12,0.94);
}

[data-theme="rainy"]{
  --bg:#0E1210; --surface:rgba(14,18,16,0.5); --surface-2:rgba(14,18,16,0.34); --border:rgba(230,240,238,0.18);
  --ink:#F1F5F5; --muted:rgba(241,245,245,0.72); --muted-2:rgba(241,245,245,0.48);
  --accent:#6FA8C9; --accent-ink:#0E1F28; --danger:#E17361; --good:#7FBE97;
  background-image: linear-gradient(180deg, rgba(4,6,5,0.3) 0%, rgba(4,6,5,0.18) 45%, rgba(2,4,3,0.4) 100%), url("../assets/theme-backgrounds/Rainy.jpg");
  background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="rainy"] .icon-btn,
[data-theme="rainy"] .mode-tabs,
[data-theme="rainy"] .btn-ghost,
[data-theme="rainy"] .mode-tab.active,
[data-theme="rainy"] .player,
[data-theme="rainy"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="rainy"] .settings-modal{
  background: rgba(14,18,16,0.94);
}

[data-theme="snowy"]{
  --bg:#EAF1F6; --surface:rgba(255,255,255,0.55); --surface-2:rgba(255,255,255,0.38); --border:rgba(20,40,55,0.18);
  --ink:#172630; --muted:rgba(23,38,48,0.68); --muted-2:rgba(23,38,48,0.46);
  --accent:#1C5C82; --accent-ink:#FFFFFF; --danger:#B4432E; --good:#2E7A5A;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.32) 100%), url("../assets/theme-backgrounds/Snowy.jpg");
  background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="snowy"] .icon-btn,
[data-theme="snowy"] .mode-tabs,
[data-theme="snowy"] .btn-ghost,
[data-theme="snowy"] .mode-tab.active,
[data-theme="snowy"] .player,
[data-theme="snowy"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="snowy"] .settings-modal{
  background: rgba(255,255,255,0.94);
}

[data-theme="tokyo-sakura"]{
  --bg:#2A1E28; --surface:rgba(30,20,28,0.5); --surface-2:rgba(30,20,28,0.32); --border:rgba(255,240,246,0.22);
  --ink:#FFF3F6; --muted:rgba(255,243,246,0.76); --muted-2:rgba(255,243,246,0.52);
  --accent:#F2A6C0; --accent-ink:#2B1420; --danger:#FF8F8F; --good:#8FE3B0;
  background-image: linear-gradient(180deg, rgba(24,14,22,0.34) 0%, rgba(24,14,22,0.2) 40%, rgba(14,10,16,0.5) 100%), url("../assets/theme-backgrounds/Tokyo Sakura.jpg");
  background-size: cover; background-position: center 40%; background-attachment: fixed;
}
[data-theme="tokyo-sakura"] .icon-btn,
[data-theme="tokyo-sakura"] .mode-tabs,
[data-theme="tokyo-sakura"] .btn-ghost,
[data-theme="tokyo-sakura"] .mode-tab.active,
[data-theme="tokyo-sakura"] .player,
[data-theme="tokyo-sakura"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="tokyo-sakura"] .settings-modal{
  background: rgba(30,20,28,0.94);
}

[data-theme="warm-fireplace"]{
  --bg:#1C130C; --surface:rgba(24,16,10,0.5); --surface-2:rgba(24,16,10,0.32); --border:rgba(250,235,215,0.2);
  --ink:#F7ECDD; --muted:rgba(247,236,221,0.74); --muted-2:rgba(247,236,221,0.5);
  --accent:#E8834A; --accent-ink:#2B1706; --danger:#FF8F6B; --good:#8FE3A4;
  background-image: linear-gradient(180deg, rgba(10,6,3,0.34) 0%, rgba(10,6,3,0.2) 45%, rgba(6,4,2,0.42) 100%), url("../assets/theme-backgrounds/Warm Fireplace.jpg");
  background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="warm-fireplace"] .icon-btn,
[data-theme="warm-fireplace"] .mode-tabs,
[data-theme="warm-fireplace"] .btn-ghost,
[data-theme="warm-fireplace"] .mode-tab.active,
[data-theme="warm-fireplace"] .player,
[data-theme="warm-fireplace"] .view-tabs{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
[data-theme="warm-fireplace"] .settings-modal{
  background: rgba(24,16,10,0.94);
}
  [data-theme="golden-hour"] .icon-btn,
  [data-theme="golden-hour"] .mode-tabs,
  [data-theme="golden-hour"] .btn-ghost,
  [data-theme="golden-hour"] .mode-tab.active,
  [data-theme="golden-hour"] .player{
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
  [data-theme="golden-hour"] .settings-modal{
    background: rgba(20,14,7,0.94);
  }

  *{box-sizing:border-box;}
html,body{height:100%;}
  html{
    overflow:hidden;
    scrollbar-width:none;
  }
  html::-webkit-scrollbar{ display:none; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-main);
    -webkit-font-smoothing:antialiased;
    transition: background .35s ease, color .35s ease;
    height:100vh;
    overflow:hidden;
  }
  ::selection{ background: var(--accent); color: var(--accent-ink); }
  button{ font-family:inherit; }
  input, select{ font-family:inherit; }

.app{
    max-width:1100px;
    margin:0 auto;
    padding: 26px 40px 100px;
    height:100vh;
    overflow-y:auto;
    scrollbar-width:none;
    display:flex;
    flex-direction:column;
  }
  .app::-webkit-scrollbar{ display:none; }


/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--muted-2);
  border-radius: 4px;
  transition: background .2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-2) var(--surface-2);
}

  /* ---------- Header ---------- */
  .topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  .brand-block{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .brand .mark{
    width:11px;height:11px;border-radius:4px;
    background: var(--accent);
    display:inline-block;
    flex:none;
    transition: background .3s ease;
  }
  .brand-text h1{
    font-size: 16px;
    letter-spacing: 0.01em;
    margin:0;
    font-weight:700;
    line-height:1.2;
  }
  .brand-text .sub{
    font-size:10.5px;
    color:var(--muted);
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:600;
  }

  .header-right{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .icon-btn{
    width:36px;height:36px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition: border-color .2s ease, transform .12s ease, background .2s ease;
    flex:none;
  }
  .icon-btn:hover{ border-color: var(--muted-2); }
  .icon-btn:active{ transform: scale(0.94); }
  .icon-btn svg{ width:16px;height:16px; }
  .icon-btn.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

  /* ---------- Main stage ---------- */
  .stage{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 4vh 0;
  }

  .mode-tabs{
    display:flex;
    gap:2px;
    background:var(--surface-2);
    border:1px solid var(--border);
    padding:3px;
    border-radius: 999px;
    margin-bottom: 8vh;
  }
.view-tabs{
  display:flex;
  gap:2px;
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:3px;
  border-radius: 999px;
  margin-top: 12px;
  margin-bottom: 4vh;
}
.view-tab{
  border:none;
  background:transparent;
  color:var(--muted);
  padding:7px 16px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:650;
  letter-spacing:0.01em;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
  white-space:nowrap;
}
.view-tab.active{
  background:var(--surface);
  color:var(--ink);
  box-shadow: var(--shadow);
}
  .mode-tab{
    border:none;
    background:transparent;
    color:var(--muted);
    padding:9px 18px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:650;
    letter-spacing:0.01em;
    cursor:pointer;
    transition: background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .mode-tab.active{
    background:var(--surface);
    color:var(--ink);
    box-shadow: var(--shadow);
  }

  .timer{
    font-family:var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(80px, 18vw, 180px);
    font-weight:700;
    letter-spacing: -0.02em;
    line-height:1;
    color:var(--ink);
  }
.timer.analog{
  font-family:var(--font-main);
  font-size: clamp(140px, 22vw, 240px);
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.timer.analog svg{
  width: clamp(160px, 22vw, 260px);
  height: clamp(160px, 22vw, 260px);
}
.clock-face{
  fill:var(--surface);
  stroke:var(--border);
  stroke-width:2;
}
.clock-hour-hand{
  stroke:var(--ink);
  stroke-width:4;
  stroke-linecap:round;
}
.clock-minute-hand{
  stroke:var(--ink);
  stroke-width:3;
  stroke-linecap:round;
}
.clock-second-hand{
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
}
.clock-center{
  fill:var(--accent);
}
.clock-tick{
  stroke:var(--muted-2);
  stroke-width:1.5;
  stroke-linecap:round;
}
.clock-tick.major{
  stroke-width:2.5;
  stroke:var(--ink);
}
.clock-number{
  fill:var(--muted);
  font-size:12px;
  font-weight:600;
  font-family:var(--font-main);
  text-anchor:middle;
  dominant-baseline:central;
}
  .session-label{
    margin-top:16px;
    font-size:11.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--muted-2);
  }
  .session-label.running{ color: var(--good); }

  .controls{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: 6vh;
  }
  .btn{
    border:none;
    cursor:pointer;
    font-weight:650;
    font-size:14px;
    border-radius: 999px;
    padding: 15px 30px;
    transition: transform .12s ease, filter .15s ease, background .2s ease;
  }
  .btn:active{ transform: scale(0.96); }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ filter:brightness(1.06); }
  .btn-ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--border); }
  .btn-ghost:hover{ border-color:var(--muted-2); }

  /* ---------- Info panel: plain text directly on the app background,
     no scrim, no card. Fades at top/bottom while scrolling. ---------- */
/* ---------- About page (full page revealed behind the app) ---------- */
.app{
    position:relative;
    z-index:20;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease .1s, visibility 0s linear .45s;
  }
  body.about-open{ overflow:hidden; }
  body.about-open .app{
    transform: translateY(110vh);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear 0s;
  }

  .about-page{
    position:fixed;
    inset:0;
    z-index:10;
    background:var(--bg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .about-page.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition: opacity .35s ease, visibility 0s linear 0s;
  }

  .about-scroll{
    position:relative;
    height:100%;
    overflow-y:auto;
    padding: 90px 34px 80px;
    box-sizing:border-box;
  }
  .about-scroll::-webkit-scrollbar{ width:6px; }
  .about-scroll::-webkit-scrollbar-track { background: transparent; }
  .about-scroll::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius:4px; }
  .about-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.about-content{
    max-width:920px;
    margin:0 auto;
  }
  .about-content h2{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
    font-weight:700;
    margin: 0 0 28px;
  }
  .about-content p{
    font-size:19px;
    line-height:1.85;
    font-weight:400;
    letter-spacing:-0.005em;
    color:var(--ink);
    margin: 0 0 26px;
  }
  .about-content p:first-of-type::first-letter{
    font-size:3.2em;
    font-weight:700;
    color:var(--accent);
    float:left;
    line-height:0.8;
    margin: 6px 8px 0 0;
  }
  .about-content p:last-of-type{
    font-size:21px;
    font-weight:650;
    color:var(--ink);
    margin-top:36px;
  }
  .about-content a{
    color:var(--accent);
    font-weight:650;
    text-decoration:none;
    border-bottom:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
    transition: border-color .15s ease;
  }
.about-content a:hover{ border-bottom-color: var(--accent); }

  .about-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0 48px;
    align-items:start;
  }
  .about-grid-col{
    min-width:0;
  }
  .about-version-bottom{
    display:flex;
    justify-content:center;
    margin-top:44px;
  }
  @media (max-width: 780px){
    .about-grid{
      grid-template-columns: 1fr;
      gap:0;
    }
  }

  .about-close{
    position:fixed;
    top: 20px; right: 20px;
    z-index:2;
  }

  /* Smaller / shorter windows: keep About safe and simple — no slide-reveal parallax,
     no scroll-to-close gesture (wired up in JS via matchMedia), just a plain full page. */
@media (max-width: 640px), (max-height: 560px){
    body.about-open .app{
      transform: translateY(30px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
.about-scroll{ padding: 76px 20px 60px; }
  }

  /* ---------- Settings modal ---------- */
  /* Solid darken behind the settings panel, no blur — cheap to render on any device. */
  .modal-scrim{
    position:fixed; inset:0;
    background: rgba(8,9,10,0.6);
    z-index: 65;
    opacity:0; pointer-events:none;
    transition: opacity .25s ease;
  }
  .modal-scrim.open{ opacity:1; pointer-events:auto; }


/*
.settings-modal{
    position:fixed;
    top:0; right:0; bottom:0;
    width: min(440px, 92vw);
    background: var(--surface);
    border-left:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 70;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    display:flex;
    flex-direction:column;
  }
  .settings-modal.open{ transform: translateX(0); }

  .settings-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 22px 22px 16px;
    border-bottom:1px solid var(--border);
    flex:none;
  }
  .settings-head h2{ font-size:15px; margin:0; font-weight:700; }

  .settings-body{
    overflow-y:auto;
    padding: 20px 22px 40px;
    flex:1;
  }
*/



.settings-modal{
    position:fixed;
    top:20px; right:20px; bottom:20px;
    width: min(420px, calc(92vw - 40px));
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow: var(--shadow-lg);
    z-index: 70;
    transform: translateX(calc(100% + 20px));
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .settings-modal.open{ transform: translateX(0); }

  .settings-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 22px 22px 16px;
    border-bottom:1px solid var(--border);
    flex:none;
  }
  .settings-head h2{ font-size:15px; margin:0; font-weight:700; }

  .settings-body{
    overflow-y:auto;
    padding: 20px 22px 40px;
    flex:1;
    border-radius: 0 0 24px 24px;
  }
  .settings-section{ margin-bottom: 32px; }
  .settings-section:last-child{ margin-bottom:0; }
  .settings-section h3{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--muted);
    font-weight:700;
    margin: 0 0 14px;
  }

  /* ---------- Theme previews (mini mock UI card, like a real theme picker) ---------- */
  .theme-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap:10px;
  }
  .theme-swatch{
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:7px;
    transition: transform .12s ease;
  }
  .theme-swatch:active{ transform: scale(0.96); }
  .theme-preview{
    height:66px;
    border-radius:12px;
    border:2px solid var(--border);
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:5px;
    padding:9px;
    background-size:cover;
    background-position:center;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .theme-swatch.active .theme-preview{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  }
  .theme-preview .p-bar{
    position:absolute; top:9px; left:9px;
    width:26px; height:5px; border-radius:3px;
  }
  .theme-preview .p-line{ height:8px; border-radius:4px; width:78%; }
  .theme-preview .p-line.short{ width:52%; }
.theme-name{ font-size:10.5px; font-weight:650; color:var(--ink); text-align:center; cursor:default; }

  .theme-name-row{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
  }

  .theme-info-btn{
    width:15px; height:15px;
    border-radius:50%;
    border:none;
    background:var(--surface-2);
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    flex:none;
    transition: background .15s ease, color .15s ease;
  }
  .theme-info-btn:hover{ background:var(--accent); color:var(--accent-ink); }
  .theme-info-btn svg{ width:9px; height:9px; }

  .theme-tooltip{
    position:absolute;
    top:100%;
    left:50%;
    transform: translate(-50%, -4px);
    margin-top:8px;
    width:200px;
    max-width: 62vw;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,0.45));
    font-size:11px;
    line-height:1.5;
    color:var(--ink);
    text-align:left;
    z-index:50;
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .theme-tooltip.open{
    opacity:1;
    transform: translate(-50%, 0);
    pointer-events:auto;
  }
  .theme-tooltip a{ color:var(--accent); text-decoration:none; font-weight:650; }
  .theme-tooltip a:hover{ text-decoration:underline; }
  .theme-tooltip::before{
    content:'';
    position:absolute;
    bottom:100%;
    left:50%;
    transform: translateX(-50%);
    border:5px solid transparent;
    border-bottom-color: var(--surface);
  }

  /* ---------- Font previews ---------- */
  .font-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:8px;
  }
  .font-option{
    border:2px solid var(--border);
    border-radius: 12px;
    padding: 12px 6px 10px;
    cursor:pointer;
    background: var(--surface-2);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    transition: border-color .2s ease, transform .12s ease;
  }
  .font-option:active{ transform: scale(0.97); }
  .font-option.active{ border-color: var(--accent); }
  .font-option .f-preview{
    font-size:19px;
    line-height:1;
    color:var(--ink);
  }
  .font-option .f-name{
    font-size:9.5px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  .duration-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .duration-field{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .duration-field label{
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
  }
  .duration-field .stepper{
    display:flex;
    align-items:center;
    gap:0;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
  }
  .duration-field .stepper button{
    border:none;
    background:var(--surface-2);
    color:var(--ink);
    width:32px; height:32px;
    font-size:16px;
    cursor:pointer;
    font-weight:700;
  }
  .duration-field .stepper button:hover{ background:var(--border); }
  .duration-field .stepper input{
    width:44px;
    text-align:center;
    border:none;
    background:var(--surface);
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:14px;
    padding:6px 0;
    outline:none;
    -moz-appearance:textfield;
  }
  .duration-field input::-webkit-outer-spin-button,
  .duration-field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  .sound-list{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .sound-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 11px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface-2);
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    transition: border-color .2s ease;
  }
  .sound-option.active{ border-color:var(--accent); color:var(--accent); }
  .sound-option .radio{
    width:16px;height:16px;
    border-radius:50%;
    border:2px solid var(--muted-2);
    flex:none;
    position:relative;
  }
  .sound-option.active .radio{ border-color:var(--accent); }
  .sound-option.active .radio::after{
    content:'';
    position:absolute; inset:3px;
    border-radius:50%;
    background:var(--accent);
  }
.sound-hint{
    font-size:11px;
    color:var(--muted-2);
    margin-top:10px;
    line-height:1.5;
  }

  #effectsCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
  }

  /* ---------- Effects (settings) ---------- */
  .effect-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
  }
  .effect-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 11px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface-2);
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
    transition: border-color .2s ease;
  }
  .effect-option.active{ border-color:var(--accent); color:var(--accent); }
  .effect-option .radio{
    width:16px;height:16px;
    border-radius:50%;
    border:2px solid var(--muted-2);
    flex:none;
    position:relative;
  }
  .effect-option.active .radio{ border-color:var(--accent); }
  .effect-option.active .radio::after{
    content:'';
    position:absolute; inset:3px;
    border-radius:50%;
    background:var(--accent);
  }
  .effect-intensity{
    opacity:1;
    max-height:200px;
    transition: opacity .2s ease, max-height .2s ease;
    overflow:hidden;
  }
  .effect-intensity.disabled{
    opacity:0.35;
    pointer-events:none;
  }
  .effect-intensity-label{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    font-weight:650;
    color:var(--muted);
    margin-bottom:8px;
  }
  .effect-intensity-label span:last-child{ color:var(--ink); }
  .effect-intensity input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:4px;
    border-radius:2px;
    background:var(--surface-2);
    border:1px solid var(--border);
    cursor:pointer;
  }
  .effect-intensity input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:14px; height:14px;
    border-radius:50%;
    background:var(--accent);
    cursor:pointer;
    margin-top:-6px;
  }
  .effect-intensity input[type="range"]::-moz-range-thumb{
    width:14px; height:14px;
    border-radius:50%;
    background:var(--accent);
    border:none;
    cursor:pointer;
  }

  /* ---------- Music track list (settings) ---------- */
  .track-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
  }
  .track-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 8px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface-2);
    cursor:pointer;
    transition: border-color .2s ease;
  }
  .track-row.active{ border-color:var(--accent); }
  .track-cover{
    width:34px;height:34px;
    border-radius:8px;
    background:var(--surface);
    flex:none;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted-2);
  }
  .track-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
  .track-cover svg{ width:16px;height:16px; }
  .track-meta{ min-width:0; text-align:left; }
  .track-title{ display:block; font-size:12.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .track-artist{ display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .track-playing-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; margin-left:auto; display:none; }
  .track-row.active .track-playing-dot{ display:block; }

  .upload-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 11px 12px;
    border-radius:10px;
    border:1.5px dashed var(--border);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:12.5px;
    font-weight:650;
    transition: border-color .2s ease, color .2s ease;
  }
  .upload-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .upload-btn svg{ width:15px; height:15px; }

  /* ---------- Toggle switch (settings) ---------- */
  .toggle-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .toggle-row-label{ font-size:13px; font-weight:600; color:var(--ink); }
  .toggle-switch{ position:relative; display:inline-block; cursor:pointer; }
  .toggle-switch input{ position:absolute; opacity:0; width:0; height:0; }
  .toggle-track{
    display:block;
    width:38px; height:22px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    transition: background .2s ease, border-color .2s ease;
  }
  .toggle-thumb{
    display:block;
    width:16px; height:16px;
    margin:2px;
    background:var(--muted);
    border-radius:50%;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease;
  }
  .toggle-switch input:checked + .toggle-track{
    background:var(--accent);
    border-color:var(--accent);
  }
  .toggle-switch input:checked + .toggle-track .toggle-thumb{
    transform: translateX(16px);
    background:var(--accent-ink);
  }

  /* ---------- Coming soon bar (Music section) ---------- */
  .coming-soon-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    border:1px dashed var(--border);
    background:var(--surface-2);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
  }
  .coming-soon-bar svg{ width:16px; height:16px; flex:none; }

  .player-hidden{ display:none !important; }

  /* ---------- Custom scrollbar (all scrollable containers) ---------- */
  *{
    scrollbar-width: thin;
    scrollbar-color: var(--muted-2) transparent;
  }
  ::-webkit-scrollbar{
    width:8px;
    height:8px;
  }
  ::-webkit-scrollbar-track{
    background:transparent;
  }
  ::-webkit-scrollbar-thumb{
    background-color: var(--muted-2);
    border-radius:8px;
    border:2px solid transparent;
    background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{
    background-color: var(--accent);
  }
  ::-webkit-scrollbar-corner{
    background:transparent;
  }

  /* ---------- Mini music player (bottom-left, floating) ---------- */
  .player{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:40;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding: 10px 14px;
    box-shadow: var(--shadow-lg);
    max-width: min(300px, calc(100vw - 40px));
    overflow:hidden;
  }
  .player-row{
    display:flex;
    align-items:center;
    gap:10px;
  }
 .player-seek-row{
    position:relative;
    width:100%;
    height:12px;
    display:flex;
    align-items:center;
  }
  .player-progress{
    position:absolute; left:0; bottom:0;
    height:2px;
    background:var(--accent);
    width:0%;
    transition: width .15s linear;
  }
  .player-cover{
    width:42px;height:42px;
    border-radius:10px;
    background:var(--surface-2);
    flex:none;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted-2);
  }
  .player-cover img{ width:100%;height:100%;object-fit:cover;display:block; }
  .player-cover svg{ width:18px;height:18px; }
  .player-meta{ min-width:0; }
  .player-title{ font-size:12.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
  .player-artist{ font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.player-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:none;
  transition: transform .12s ease, filter .15s ease;
}
.player-seeker{
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  width:100%;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:pointer;
  margin:0;
  padding:0;
  z-index:2;
}
.player-seeker::-webkit-slider-runnable-track{
  height:4px;
  background:var(--border);
  border-radius:2px;
}
.player-seeker::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  margin-top:-4px;
  cursor:pointer;
  opacity:0;
  transform:scale(0.6);
  transition: opacity .15s ease, transform .15s ease;
}
.player-seeker:hover::-webkit-slider-thumb,
.player-seeker:focus::-webkit-slider-thumb,
.player-seeker:active::-webkit-slider-thumb{
  opacity:1;
  transform:scale(1);
}
.player-seeker::-moz-range-track{
  height:4px;
  background:var(--border);
  border-radius:2px;
  border:none;
}
.player-seeker::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  border:none;
  cursor:pointer;
  opacity:0;
  transform:scale(0.6);
  transition: opacity .15s ease, transform .15s ease;
}
.player-seeker:hover::-moz-range-thumb,
.player-seeker:focus::-moz-range-thumb,
.player-seeker:active::-moz-range-thumb{
  opacity:1;
  transform:scale(1);
}
.player-progress{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  height:4px;
  background:var(--accent);
  width:0%;
  transition:width .15s linear;
  pointer-events:none;
  border-radius:2px;
  z-index:1;
}
.player-btn:hover{ filter:brightness(1.06); }
.player-btn:active{ transform: scale(0.92); }
.player-btn svg{ width:15px; height:15px; }

.player-btn-sm{
  width:28px;
  height:28px;
}
.player-btn-sm svg{ width:12px; height:12px; }

.player-controls{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
}

.player-settings-btn{
  background:var(--surface-2);
  color:var(--muted);
  border:1px solid var(--border);
}
.player-settings-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  @media (max-width: 720px){
    .app{ padding: 18px 18px 100px; }
  }
  @media (max-width: 480px){
    .brand-text h1{ font-size:14.5px; }
    .timer{ font-size: clamp(58px, 17vw, 110px); }
    .controls{ flex-wrap:wrap; justify-content:center; }
    .btn{ padding:14px 24px; }
    .mode-tabs{ margin-bottom:6vh; }
    .theme-grid{ grid-template-columns: repeat(3, 1fr); }
    .font-grid{ grid-template-columns: repeat(2, 1fr); }
    .player{ left:12px; right:12px; max-width:none; }
    .player-title, .player-artist{ max-width: none; }
  }

  /* ---------- About: version badge, changelog, feedback form ---------- */
  .about-version-badge{
    display:inline-flex;
    align-items:center;
    padding: 5px 12px;
    border-radius:999px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.04em;
    margin-bottom:18px;
  }
  .about-body-text{
    font-size:16px !important;
    line-height:1.75 !important;
    color:var(--ink);
    margin: 0 0 18px !important;
  }
  .about-body-text::first-letter{ font-size:inherit !important; font-weight:inherit !important; float:none !important; margin:0 !important; }
  .changelog{ margin-bottom:26px; }
  .changelog-entry{
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-2);
    margin-bottom:10px;
  }
  .changelog-version{
    font-size:11px;
    font-weight:800;
    letter-spacing:0.06em;
    color:var(--accent);
    margin-bottom:8px;
  }
  .changelog-entry ul{ margin:0; padding-left:18px; }
  .changelog-entry li{ font-size:14px; line-height:1.6; color:var(--ink); margin-bottom:4px; }
.changelog-entry li:last-child{ margin-bottom:0; }
  /* ---------- Settings: data management ---------- */
  .data-btn-row{ display:flex; gap:10px; margin-bottom:10px; }
  .data-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding: 11px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--ink);
    cursor:pointer;
    font-size:12px;
    font-weight:650;
    text-align:center;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  .data-btn svg{ width:15px; height:15px; flex:none; }
  .data-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .data-btn-danger{
    width:100%;
    color:var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  }
  .data-btn-danger:hover{ border-color:var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); color:var(--danger); }
  .data-status{ font-size:12px; color:var(--good); margin-top:10px; min-height:16px; }

  /* Hide the floating music player while the About page is open */
  body.about-open #musicPlayer{ display:none !important; }

  /* ---------- Extra mobile polish ---------- */
  @media (max-width: 640px){
    .settings-modal{ top:10px; right:10px; left:10px; bottom:10px; width:auto; border-radius:20px; }
.settings-head{ padding: 16px 18px 14px; }
    .settings-body{ padding: 16px 18px 32px; }
    .about-content h2{ font-size:12px; margin-bottom:20px; }
    .about-content p{ font-size:16.5px; }
    .about-body-text{ font-size:15px !important; }
    .data-btn-row{ flex-direction:column; }
    .header-right{ gap:8px; }
    .icon-btn{ width:34px; height:34px; }
    .brand{ gap:8px; }
  }
  @media (max-width: 380px){
    .brand-text .sub{ display:none; }
  }