:root {
  color-scheme: light;
  --space: #e6e7e5;
  --shell: #dd492e;
  --face: #080808;
  --glass: #100607;
  --unlit: #451018;
  --lit: #f72942;
  --plate: #b8bab8;
  --plate-light: #cdcfcc;
  --letter: #eeeae2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--space); }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--space); color: #202220; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #316a9a; outline-offset: 3px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10; padding: .65rem 1rem; background: #111; color: #fff; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage { position: relative; display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 38px 24px 22px; }
.fullscreen-button { position: fixed; z-index: 5; top: 16px; right: 19px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #555956; }
.fullscreen-button:hover { background: #d8dad7; color: #1a1c1a; }
svg { width: 24px; height: 24px; }
.fullscreen-button svg, .control svg, .utility-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-button svg { width: 21px; height: 21px; stroke-width: 1.5; }
.timer-rig { position: relative; width: min(1320px, 100%); background: var(--face); border-top: 10px solid var(--shell); border-left: 10px solid var(--shell); border-right: 10px solid var(--shell); border-bottom: 6px solid #161616; border-radius: 9px 9px 5px 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 4px 0 #762114, 0 27px 42px rgba(0,0,0,.16); }
.timer-rig::before { content: ""; position: absolute; inset: -9px -9px auto; height: 3px; border-radius: 4px 4px 0 0; background: rgba(255,185,148,.32); pointer-events: none; }
.timer-rig::after { content: ""; position: absolute; inset: 0 auto 0 -9px; width: 2px; background: linear-gradient(#fa7654, #b32c1d); pointer-events: none; }
.foot { position: absolute; z-index: 0; bottom: -21px; width: 50px; height: 22px; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, #111, #282828 45%, #0c0c0c); box-shadow: inset 0 2px 3px #000, 0 4px 3px rgba(0,0,0,.16); }
.foot-left { left: 5%; }
.foot-right { right: 5%; }
.rig-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(284px, 29vw, 320px); min-height: 450px; }
.timer-face { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 20px 34px 45px; background: linear-gradient(105deg, #080808 0%, #0b0b0b 78%, #121212 100%); }
.display-heading { display: flex; height: 36px; flex: none; align-items: center; justify-content: center; }
.display-heading, .display-window, .face-meta { width: min(100%, 710px); }
.dot-matrix { display: block; width: 100%; height: auto; max-height: 34px; fill: var(--lit); filter: drop-shadow(0 0 1.5px rgba(247,41,66,.65)); }
.display-window { display: flex; min-width: 0; align-items: center; justify-content: center; aspect-ratio: 2.8; max-height: 270px; padding: 25px 26px; border: 5px solid #171717; border-radius: 3px; background: radial-gradient(ellipse at 50% 40%, #18070a 0%, var(--glass) 63%, #070405 100%); box-shadow: inset 0 10px 20px rgba(0,0,0,.8), 0 1px 0 #252525; }
.seven-segment { display: block; width: 100%; height: 100%; overflow: visible; }
.segment { fill: var(--unlit); }
.segment.is-on { fill: var(--lit); filter: drop-shadow(0 0 3px rgba(247,41,66,.9)) drop-shadow(0 0 7px rgba(247,41,66,.65)); }
.colon { fill: #441018; }
.seven-segment.is-lit .colon { fill: var(--lit); filter: drop-shadow(0 0 5px rgba(247,41,66,.7)); }
.seven-segment.is-set .colon { fill: #441018; filter: none; }
.face-meta { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 25px 5px 0; }
.wordmark { margin: 0; color: var(--letter); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-stretch: condensed; font-weight: 900; line-height: .96; letter-spacing: -.03em; white-space: nowrap; }
.wordmark span { font-size: .78em; }
.control-bank { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 14px 14px 15px; background: linear-gradient(90deg, #050505, #111 6%, #0a0a0a); }
.control-plate { display: flex; min-width: 0; flex-direction: column; min-height: 300px; padding: 15px 15px 13px; border-radius: 18px; background: linear-gradient(110deg, #303131, #2c2d2d); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 #202121, 0 2px 3px rgba(0,0,0,.7); }
.mode-switcher { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; width: 100%; padding: 4px; border-radius: 29px; background: #303030; box-shadow: inset 0 2px 4px #171717, 0 1px 0 rgba(255,255,255,.08); }
.mode-tab { min-height: 44px; border: 0; background: linear-gradient(#2a2929, #252424); color: #969390; font-size: .88rem; font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 2px 3px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.05); transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.mode-tab:first-child { border-radius: 25px 7px 7px 25px; }
.mode-tab:last-child { border-radius: 7px 25px 25px 7px; }
.mode-tab.is-active { background: linear-gradient(#171616, #211f1f); color: #f7f4ef; box-shadow: inset 0 5px 9px #050505, inset 0 -1px 1px rgba(255,255,255,.04); }
.primary-actions { display: flex; position: relative; align-items: center; justify-content: center; min-height: 158px; flex: 1; padding: 0; }
.control { display: flex; position: relative; min-width: 0; flex-direction: column; align-items: center; gap: 6px; border: 0; padding: 0; background: none; color: #e7e3dd; }
.control-cap { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 38% 26%, #353635, #292a29 73%, #252625); color: #e5e6e1; box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 1px 1px rgba(0,0,0,.7); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.control:not(:disabled):active .control-cap, .control-start[aria-pressed="true"] .control-cap { transform: translateY(2px); background: radial-gradient(circle at 50% 55%, #202121, #141515); box-shadow: inset 0 5px 10px #050505, inset 0 -1px 1px rgba(255,255,255,.04); }
.control-cap svg { width: 26px; height: 26px; }
.control-start { top: 8px; }
.control-start .control-cap { width: 114px; height: 114px; }
.control-start .control-cap svg { width: 42px; height: 42px; }
.control-start .control-label { visibility: hidden; white-space: nowrap; }
.control-start[data-action="start-rest"] .control-label { visibility: visible; color: #f0f1eb; }
.control-start:not(:disabled) .control-cap svg { color: #76f39c; filter: drop-shadow(0 0 5px rgba(100,255,144,.7)); }
.control-skip { position: absolute; top: 7px; right: 0; }
.control-skip .control-cap { width: 40px; height: 40px; }
.control-skip:not(:disabled) .control-cap svg { color: #f0f1ec; filter: drop-shadow(0 0 3px rgba(238,244,238,.38)); }
.control:disabled .control-cap svg { color: #747a75; filter: none; }
.control-label { min-height: 16px; font-size: .7rem; font-weight: 400; letter-spacing: .01em; }
.control:disabled .control-label { color: #9a9b97; }
.bank-bottom { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: auto; padding-top: 8px; }
.control-stop .control-cap { width: 44px; height: 44px; }
.control-stop .control-cap svg { width: 24px; height: 24px; }
.control-stop:not(:disabled) .control-cap svg { color: #f72555; filter: drop-shadow(0 0 4px rgba(255,50,86,.35)); }
.utility-toggle { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 6px; color: #e7e3dd; font-size: .7rem; font-weight: 400; text-align: center; cursor: pointer; }
.utility-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.utility-toggle input:focus-visible + .utility-face { outline: 2px solid #316a9a; outline-offset: 3px; }
.utility-face { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 38% 26%, #353635, #292a29 73%, #252625); color: #e1e5df; box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 1px 1px rgba(0,0,0,.7); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.utility-face svg { grid-area: 1 / 1; width: 19px; height: 19px; }
.utility-toggle input:checked + .utility-face, .voice-control[aria-pressed="true"] .utility-face, .utility-toggle:active .utility-face { transform: translateY(1px); background: radial-gradient(circle at 50% 55%, #202121, #141515); box-shadow: inset 0 4px 8px #050505, inset 0 -1px 1px rgba(255,255,255,.04); }
.utility-face .off-icon { display: none; }
.utility-toggle input:not(:checked) + .utility-face { color: #7f8680; }
.utility-toggle input:not(:checked) + .utility-face .on-icon { display: none; }
.utility-toggle input:not(:checked) + .utility-face .off-icon { display: block; }
.sound-toggle input:not(:checked) + .utility-face { color: #e1e5df; }
.sound-toggle input:checked + .utility-face { color: #eeb3a4; }
.voice-control { border: 0; padding: 0; background: none; }
.voice-control:focus-visible .utility-face { outline: 2px solid #316a9a; outline-offset: 3px; }
.voice-control[aria-pressed="true"] .utility-face svg { color: #ff7457; filter: drop-shadow(0 0 4px rgba(255,91,62,.65)); }
.voice-control.is-listening .utility-face { box-shadow: inset 0 4px 8px #050505, 0 0 0 2px rgba(224,80,47,.65); }
.voice-note { position: fixed; z-index: 20; bottom: 18px; left: 50%; width: max-content; max-width: min(420px, calc(100vw - 24px)); margin: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 15px; background: linear-gradient(#393432, #211e1d); color: #f7ede9; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.12); font-size: .78rem; line-height: 1.25; text-align: center; transform: translateX(-50%); pointer-events: none; }
.voice-note[hidden] { display: none; }
.settings-panel { --dial-width: 44px; --dial-row-height: 28px; position: relative; flex: none; padding: 12px 1px 42px; color: var(--letter); }
.setting-label { color: #ddd9d3; font-size: .68rem; font-weight: 400; line-height: 1.15; white-space: nowrap; }
.settings-grid { display: flex; width: 100%; align-items: start; justify-content: space-between; gap: 10px; }
.settings-grid .setting-label { width: 0; overflow: visible; }
.setting-field { display: flex; min-width: 0; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px; transition: opacity .16s ease; }
.ready-corner { position: absolute; right: 2px; bottom: 0; flex-direction: row; align-items: center; gap: 5px; }
.setting-field.is-dimmed { opacity: .28; }
.dial-row { display: flex; max-width: 100%; align-items: center; justify-content: flex-start; gap: 2px; }
.dial { position: relative; display: flex; width: var(--dial-width); height: calc(var(--dial-row-height) * 3); flex: 0 0 var(--dial-width); align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: #1c1e1e; color: #f1eee7; box-shadow: inset 0 1px 2px #080909, 0 1px 0 #383a37; cursor: grab; touch-action: none; user-select: none; }
.dial::before { content: ""; position: absolute; inset: var(--dial-row-height) 2px; border-radius: 4px; background: #2c2f2e; }
.dial-track { position: relative; z-index: 1; display: flex; width: 100%; flex-direction: column; text-align: center; pointer-events: none; will-change: transform; }
.dial-neighbor, .dial-value { display: block; flex: none; height: var(--dial-row-height); line-height: var(--dial-row-height); font-variant-numeric: tabular-nums; }
.dial-neighbor { color: #8e938d; font-size: .82rem; }
.dial-value { color: #f5f2eb; font-size: 1.35rem; font-weight: 400; }
.dial-input { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; height: var(--dial-row-height); transform: translateY(-50%); border: 0; padding: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 1.35rem; font-variant-numeric: tabular-nums; text-align: center; opacity: 0; pointer-events: none; appearance: none; }
.dial.is-editing .dial-input { opacity: 1; pointer-events: auto; cursor: text; }
.dial.is-editing .dial-value { visibility: hidden; }
.dial.is-editing::before { background: #414641; }
.dial:has(.dial-input:focus-visible) { outline: 2px solid #b0b7a9; outline-offset: 2px; }
.dial.is-dragging { cursor: grabbing; }
.dial.is-disabled { cursor: default; }
.dial-colon { color: #8d8e89; font-size: .8rem; font-weight: 300; }
.prepare-switch { display: flex; width: 52px; height: 32px; flex: none; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 7px; padding: 0; background: #2c2e2c; color: #b9bcb5; font-size: .66rem; box-shadow: inset 0 1px 0 #424540, 0 1px 1px #030403; }
.prepare-switch::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #686c65; }
.prepare-switch[aria-checked="true"] { color: #d9f2dd; background: #171e19; box-shadow: inset 0 2px 4px #040705, inset 0 -1px 0 #3d4940; }
.prepare-switch[aria-checked="true"]::before { background: #87e8a0; box-shadow: 0 0 4px rgba(111,239,150,.45); }
.prepare-switch:disabled { cursor: default; }
.quiet-footer { margin-top: 33px; color: #6d706d; font-size: .72rem; text-align: center; }
.quiet-footer span { margin: 0 5px; }
.quiet-footer a { color: inherit; text-underline-offset: 2px; }
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .stage { width: 100%; height: 100dvh; min-height: 0; justify-content: center; overflow: hidden; padding: 10px 12px 20px; }
  .timer-rig { width: min(100%, 1100px); }
  .rig-body { display: block; min-height: 0; }
  .timer-face { padding: 14px 30px 18px; }
  .display-window { aspect-ratio: 3; max-height: min(29dvh, 225px); }
  .face-meta { margin-top: 13px; }
  .control-bank { padding: 8px 18px 12px; }
  .control-plate { display: grid; grid-template-columns: minmax(120px,1.5fr) minmax(74px,1fr) repeat(5,minmax(42px,.65fr)); align-items: center; gap: 7px; width: min(100%, 900px); min-height: 0; margin-inline: auto; padding: 32px 12px; border-radius: 18px; }
  .mode-switcher { align-self: center; }
  .mode-tab { min-height: 41px; font-size: .75rem; }
  .primary-actions, .bank-bottom { display: contents; }
  .control-plate .control, .control-plate .utility-toggle { align-self: center; justify-self: center; }
  .control-plate .control { top: 0; }
  .control-plate .control-label, .control-plate .utility-toggle > span:last-child { position: absolute; top: calc(100% + 4px); left: 50%; min-height: 0; transform: translateX(-50%); white-space: nowrap; }
  .control-plate .utility-toggle { position: relative; }
  .control-start .control-cap { width: 78px; height: 78px; }
  .control-start .control-cap svg { width: 29px; height: 29px; }
  .control-skip { position: relative; margin-top: 0; }
  .control-skip .control-cap, .control-stop .control-cap, .utility-face { width: 40px; height: 40px; }
  .control-skip .control-cap svg { width: 20px; height: 20px; }
  .control-label, .utility-toggle { font-size: .68rem; }
  .utility-toggle { gap: 5px; }
  .settings-panel { display: flex; align-items: center; gap: 32px; width: min(100%, 900px); margin-inline: auto; padding: 14px 16px 6px; }
  .settings-grid { width: max-content; justify-content: flex-start; gap: 32px; }
  .ready-corner { position: static; margin-top: 18px; }
  .quiet-footer { display: none; }
}
@media (max-width: 600px) {
  .stage { width: 100%; height: 100dvh; min-height: 0; justify-content: flex-end; overflow: hidden; padding: 8px 6px calc(32px + env(safe-area-inset-bottom)); }
  .fullscreen-button { top: 4px; right: 5px; width: 28px; height: 28px; }
  .fullscreen-button svg { width: 17px; height: 17px; }
  .timer-rig { width: min(100%, 600px); border-width: 6px 6px 4px; }
  .rig-body { display: block; min-height: 0; }
  .timer-face { padding: 8px 5px 0; }
  .display-heading { height: 30px; }
  .dot-matrix { max-height: 28px; }
  .display-window { aspect-ratio: 2.5; min-height: 0; max-height: min(32dvh, 175px); padding: 3px 3px; border-width: 3px; }
  .face-meta { margin: 14px 2px 16px; }
  .wordmark { font-size: clamp(1.2rem, 5vw, 1.7rem); }
  .control-bank { padding: 0 9px 10px; }
  .control-plate { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; column-gap: 4px; row-gap: 12px; min-height: 0; padding: 10px 10px 14px; border-radius: 16px; }
  .mode-switcher { grid-column: 1 / -1; gap: 2px; padding: 2px; }
  .mode-tab { min-height: 34px; font-size: .78rem; }
  .primary-actions, .bank-bottom { display: contents; }
  .control-plate .control, .control-plate .utility-toggle { align-self: center; justify-self: center; }
  .control-plate .control { top: 0; }
  .control-plate .control-label, .control-plate .utility-toggle > span:last-child { position: static; min-height: 14px; line-height: 14px; white-space: nowrap; }
  .control-plate .utility-toggle { position: relative; }
  .control-start { grid-column: 1 / -1; }
  .control-start .control-cap { width: clamp(78px,10.5dvh,92px); height: clamp(78px,10.5dvh,92px); }
  .control-start .control-cap svg { width: 32px; height: 32px; }
  .control-skip { position: relative; right: auto; left: auto; }
  .control-skip .control-cap, .control-stop .control-cap, .utility-face { width: 40px; height: 40px; }
  .control-skip .control-cap svg, .utility-face svg, .control-stop .control-cap svg { width: 19px; height: 19px; }
  .control-label, .utility-toggle { font-size: .7rem; }
  .settings-panel { padding: 14px 0 40px; }
  .setting-field { gap: 6px; }
  .setting-label { font-size: .65rem; }
  .ready-corner { gap: 6px; }
  .voice-note { bottom: 12px; }
  .foot { bottom: -12px; width: 36px; height: 13px; }
  .quiet-footer { display: none; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .stage { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .timer-face { padding-top: 6px; }
  .display-heading { height: 26px; }
  .display-window { max-height: min(22dvh, 150px); }
  .face-meta { margin-block: 7px; }
  .control-plate { padding: 8px 8px 12px; row-gap: 6px; }
  .mode-tab { min-height: 30px; }
  .control-start .control-cap { width: 60px; height: 60px; }
  .control-skip .control-cap, .control-stop .control-cap, .utility-face { width: 36px; height: 36px; }
  .control-label, .utility-toggle { font-size: .66rem; }
  .settings-panel { --dial-row-height: 22px; padding-block: 10px 38px; }
}
@media (max-width: 499px) and (max-height: 540px) {
  .stage { padding-top: 4px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .timer-face { padding-block: 4px 0; }
  .display-heading { height: 22px; }
  .dot-matrix { max-height: 21px; }
  .display-window { aspect-ratio: 2.8; max-height: 24dvh; padding-block: 3px; }
  .face-meta { margin-block: 5px; }
  .wordmark { font-size: 1.1rem; }
  .control-bank { padding-block: 0 6px; }
  .control-plate { padding-block: 6px 10px; row-gap: 5px; }
  .mode-tab { min-height: 26px; }
  .control, .utility-toggle { gap: 4px; }
  .control-plate .control-label, .control-plate .utility-toggle > span:last-child { min-height: 12px; line-height: 12px; }
  .control-label, .utility-toggle { font-size: .6rem; }
  .control-start .control-cap { width: 50px; height: 50px; }
  .control-start .control-cap svg { width: 24px; height: 24px; }
  .control-skip .control-cap, .utility-face, .control-stop .control-cap { width: 30px; height: 30px; }
  .settings-panel { --dial-row-height: 22px; padding-block: 7px 36px; }
  .setting-field { gap: 4px; }
}
@media (max-width: 499px) and (max-height: 420px) {
  .stage { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .display-heading { height: 18px; }
  .display-window { max-height: 16dvh; }
  .face-meta { margin-block: 4px; }
  .wordmark { font-size: 1rem; }
  .control-plate { padding-block: 5px; row-gap: 3px; }
  .mode-tab { min-height: 22px; }
  .control-start .control-cap { width: 42px; height: 42px; }
  .control-skip .control-cap, .utility-face, .control-stop .control-cap { width: 26px; height: 26px; }
  .settings-panel { --dial-row-height: 16px; padding-block: 4px 34px; }
  .setting-field { gap: 2px; }
  .setting-label { font-size: .6rem; }
  .dial-neighbor { font-size: .6rem; }
  .dial-value, .dial-input { font-size: 1rem; }
}
@media (max-height: 500px) and (min-width: 500px) {
  .stage { height: 100dvh; min-height: 0; justify-content: center; overflow: hidden; padding: 3px 6px 9px; }
  .timer-rig { width: min(100%, 1000px); border-width: 6px 6px 4px; }
  .rig-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(276px,42%); min-height: 0; }
  .timer-face { justify-content: flex-start; padding: 8px 12px 12px; }
  .display-heading { height: 25px; }
  .dot-matrix { max-height: 24px; }
  .display-window { aspect-ratio: 2.8; min-height: 0; max-height: 46dvh; padding: 7px; border-width: 3px; }
  .face-meta { margin: 7px 5px 0; }
  .wordmark { font-size: 1.35rem; }
  .control-bank { padding: 5px 7px; }
  .control-plate { display: flex; align-items: stretch; gap: 0; min-height: 0; padding: 6px 9px; border-radius: 16px; }
  .mode-switcher { grid-column: auto; padding: 3px; }
  .mode-tab { min-height: 28px; font-size: .75rem; }
  .primary-actions { display: flex; min-height: 75px; padding: 2px 0 0; }
  .bank-bottom { display: grid; padding-top: 4px; }
  .control-plate .control-label, .control-plate .utility-toggle > span:last-child { position: static; top: auto; left: auto; min-height: 12px; transform: none; }
  .control-start .control-cap { width: 60px; height: 60px; }
  .control-start { top: 0; }
  .control-start .control-cap svg { width: 25px; height: 25px; }
  .control-plate .control-skip { position: absolute; top: 4px; right: 4px; left: auto; }
  .control-skip .control-cap { width: 36px; height: 36px; }
  .utility-face, .control-stop .control-cap { width: 34px; height: 34px; }
  .utility-face svg, .control-stop .control-cap svg { width: 15px; height: 15px; }
  .settings-panel { --dial-row-height: 16px; padding: 5px 1px 32px; }
  .dial-neighbor { font-size: .6rem; }
  .dial-value, .dial-input { font-size: 1rem; }
  .quiet-footer { display: none; }
  .foot { bottom: -11px; width: 35px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.privacy-page { width: min(100% - 40px, 680px); margin: max(48px, 8vh) auto 72px; color: #252725; font-size: 1rem; line-height: 1.6; }
.privacy-page h1 { margin: 20px 0 16px; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
.privacy-page h2 { margin: 32px 0 8px; font-size: 1.22rem; }
.privacy-page p { margin: 0 0 15px; }
.privacy-page a { color: #873a29; }
.privacy-back { text-decoration: none; }
.privacy-choice { min-height: 44px; margin: 7px 0 10px; padding: 10px 18px; border: 1px solid #565957; border-radius: 24px; background: #242625; color: #fff; }
.privacy-choice:hover { background: #373a38; }
.privacy-choice:disabled { cursor: default; opacity: .65; }
.privacy-choice-note { color: #5a5e5a; }