:root{
  --app-bg:#000;
  --status-bg:#d6a65e;
  --strip-bg:#101414;
  --active:#d77a18;
  --active-low:#e13720;
  --text-dim:rgba(255,255,255,.09);
  --panel:rgba(0,0,0,.74);
  --panel-border:rgba(255,255,255,.10);
  --button:rgba(255,255,255,.07);
  --button-text:#f5f5f5;
  --safe-top:env(safe-area-inset-top, 0svh);
  --safe-right:env(safe-area-inset-right, 0svw);
  --safe-bottom:env(safe-area-inset-bottom, 0svh);
  --safe-left:env(safe-area-inset-left, 0svw);
  --radius:2.2svw;
  --line:.045svw;
  --dock-size:min(9.4svw, 8.3svh);
  --dock-radius:calc(var(--dock-size) * .23);
  --dock-gap:calc(var(--dock-size) * .12);
  --dock-icon:calc(var(--dock-size) * .62);
  --center-half-gap:max(3.2svh, calc(var(--dock-size) * .88));
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
.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;
}
html,body{ height:100%; }
body{
  margin:0;
  background:var(--status-bg);
  color:#fff;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  user-select:none;
  touch-action:manipulation;
}

button,input{ font:inherit; }
button{ color:inherit; }
a{ color:inherit; }

.clock-app{
  position:relative;
  width:100svw;
  height:100vh;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  background:var(--app-bg);
}

.clock-app::before{
  content:"";
  position:absolute;
  left:calc(2.2svw + var(--safe-left));
  right:calc(2.2svw + var(--safe-right));
  top:50%;
  height:calc(var(--center-half-gap) + var(--center-half-gap));
  transform:translateY(-50%);
  background:var(--strip-bg);
  box-shadow:
    inset 0 .16svw 0 rgba(255,255,255,.22),
    inset 0 -.16svw 0 rgba(255,255,255,.22);
  pointer-events:none;
}

.theme-oled{
  --app-bg:#000;
  --active:#d77a18;
  --active-low:#e13720;
  --text-dim:rgba(255,255,255,.09);
  --button:rgba(255,255,255,.07);
}

.theme-dim{
  --app-bg:#000;
  --active:#121516;
  --active-low:#f8eee8;
  --text-dim:rgba(18,21,22,.54);
  --button:rgba(255,255,255,.06);
}

.theme-amber{
  --app-bg:#000;
  --active:#ff9b2f;
  --active-low:#ff4a2f;
  --text-dim:rgba(255,155,47,.13);
  --button:rgba(255,155,47,.09);
}

.theme-red{
  --app-bg:#000;
  --active:#ef3f2d;
  --active-low:#ff321c;
  --text-dim:rgba(255,70,50,.12);
  --button:rgba(239,63,45,.10);
}

.player-zone{
  position:absolute;
  left:calc(2.2svw + var(--safe-left));
  right:calc(2.2svw + var(--safe-right));
  height:auto;
  overflow:hidden;
  border:0;
  background:#080808;
  box-shadow:none;
}

.player-top{
  top:0;
  bottom:calc(50% + var(--center-half-gap));
  border-radius:calc(var(--radius) * 1.34) calc(var(--radius) * 1.34) 0 0;
  background:#d6a65e;
}

.player-bottom{
  top:calc(50% + var(--center-half-gap));
  bottom:0;
  border-radius:0 0 calc(var(--radius) * 1.34) calc(var(--radius) * 1.34);
  background:#70b9ad;
}

.hit-target{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.hit-target:active{ background:rgba(255,255,255,.025); }

.player-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-block:4.5svh;
  padding-inline:4svw;
  color:var(--text-dim);
}

.player-top .player-content{ transform:rotate(180deg); }
.player-zone.is-active .player-content{ color:var(--active); }
.player-top.is-active{ background:#e0b36b; }
.player-bottom.is-active{ background:#7cc9bd; }
.player-zone.is-expired{ background:#9d2219; }
.player-zone.is-expired .player-content{ color:var(--active-low); }

.player-name{
  display:none;
  width:92svw;
  text-align:center;
  font-size:4.2svw;
  font-weight:650;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.clock-time{
  display:block;
  width:100%;
  text-align:center;
  font-size:18.8svw;
  font-weight:850;
  line-height:.92;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

.move-time{
  display:block;
  min-height:1.2em;
  margin-top:1.15svh;
  font-size:13.2svw;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:currentColor;
  opacity:.8;
}

.center-dock{
  position:absolute;
  left:calc(2.2svw + var(--safe-left));
  right:calc(2.2svw + var(--safe-right));
  width:auto;
  min-width:0;
  top:50%;
  z-index:4;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--dock-gap);
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--dock-radius);
  transition:opacity .16s linear;
}

.clock-app.is-running.is-dock-hidden .dock-btn-reset,
.clock-app.is-running.is-dock-hidden .dock-btn-volume,
.clock-app.is-running.is-dock-hidden .dock-volume-step,
.clock-app.is-running.is-dock-hidden .dock-btn-settings{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}

.clock-app.is-running.is-dock-hidden #pauseBtn{
  opacity:.46;
}

.status-line{
  position:absolute;
  left:50%;
  bottom:calc(100% + var(--dock-gap));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--dock-size) * .34);
  flex-wrap:wrap;
  width:100%;
  color:rgba(255,255,255,.72);
  font-size:calc(var(--dock-size) * .34);
  font-weight:650;
  line-height:1.1;
}

.status-line.is-hidden{
  display:none;
}

.dock-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dock-gap);
}

.dock-row-main{
  position:relative;
  display:grid;
  grid-template-columns:var(--dock-size) 1fr var(--dock-size) 1fr var(--dock-size);
  align-items:center;
  width:100%;
  height:var(--dock-size);
  flex-direction:row;
}

.dock-btn{
  appearance:none;
  border:var(--line) solid rgba(255,255,255,.14);
  border-radius:var(--dock-radius);
  background:var(--button);
  color:var(--button-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:9.7svw;
  min-width:27svw;
  padding-block:2svw;
  padding-inline:3svw;
  font-size:3.55svw;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  transition:transform .08s ease, opacity .08s ease, filter .08s ease;
  transform:translateZ(0);
  -webkit-tap-highlight-color:transparent;
}

.dock-btn:not(:disabled):active{
  transform:scale(.96);
  opacity:.88;
  filter:brightness(.96);
}

.center-dock .dock-btn{
  display:grid;
  place-items:center;
  width:var(--dock-size);
  height:var(--dock-size);
  min-width:var(--dock-size);
  min-height:var(--dock-size);
  padding:0;
  font-size:0;
}

#resetBtn{
  grid-column:1;
  justify-self:start;
  z-index:7;
}

#startBottomBtn,
#pauseBtn{
  grid-column:3;
  grid-row:1;
  justify-self:center;
}

#settingsBtn{
  grid-column:5;
  grid-row:1;
  justify-self:end;
  z-index:7;
}

#volumeBtn{
  grid-column:4;
  grid-row:1;
  justify-self:center;
  z-index:7;
}

#volumeBtn:not(:disabled):active{
  transform:scale(.96);
}

.dock-volume-step{
  grid-column:4;
  grid-row:1;
  justify-self:center;
  align-self:center;
  width:calc(var(--dock-size) * .78);
  height:calc(var(--dock-size) * .78);
  min-width:calc(var(--dock-size) * .78);
  min-height:calc(var(--dock-size) * .78);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#efe7df;
  font-size:calc(var(--dock-size) * .40);
  font-weight:850;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .14s linear, transform .16s ease;
  z-index:6;
}

.center-dock .dock-volume-step{
  font-size:calc(var(--dock-size) * .40);
}

.dock-volume-down{
  transform:translateX(calc((var(--dock-size) + var(--dock-gap)) * -1)) scale(.88);
}

.dock-volume-up{
  transform:translateX(calc(var(--dock-size) + var(--dock-gap))) scale(.88);
}

.center-dock.is-volume-open .dock-volume-step{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

.center-dock.is-volume-open .dock-volume-down{
  transform:translateX(calc((var(--dock-size) + var(--dock-gap)) * -1)) scale(1);
}

.center-dock.is-volume-open .dock-volume-up{
  transform:translateX(calc(var(--dock-size) + var(--dock-gap))) scale(1);
}

.center-dock.is-volume-open .dock-volume-down:not(:disabled):active{
  transform:translateX(calc((var(--dock-size) + var(--dock-gap)) * -1)) scale(.96);
}

.center-dock.is-volume-open .dock-volume-up:not(:disabled):active{
  transform:translateX(calc(var(--dock-size) + var(--dock-gap))) scale(.96);
}

.center-dock.is-volume-open #volumeBtn{
  background:#cc741f;
  border-color:#cc741f;
  color:#050200;
}

.center-dock.is-confirm-open-left #startBottomBtn,
.center-dock.is-confirm-open-left #pauseBtn,
.center-dock.is-confirm-open-left #volumeBtn,
.center-dock.is-confirm-open-left .dock-volume-step,
.center-dock.is-confirm-open-left #settingsBtn,
.center-dock.is-confirm-open-right #startBottomBtn,
.center-dock.is-confirm-open-right #pauseBtn,
.center-dock.is-confirm-open-right #resetBtn,
.center-dock.is-confirm-open-right #volumeBtn,
.center-dock.is-confirm-open-right .dock-volume-step{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}

.center-dock.is-confirm-open-left #resetBtn{
  background:#2d180b;
  border-color:rgba(204,116,31,.72);
  color:#fff3e4;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

.center-dock.is-confirm-open-right #settingsBtn{
  background:#2d180b;
  border-color:rgba(204,116,31,.72);
  color:#fff3e4;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}

.dock-row.compact .dock-btn{
  min-width:20.5svw;
  min-height:8.6svw;
  padding-inline:2.1svw;
  font-size:3.05svw;
}

.dock-row.compact{
  display:none;
}

.dock-confirm-panel{
  position:absolute;
  left:0;
  top:50%;
  z-index:6;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:calc(var(--dock-size) * .08);
  width:calc(var(--dock-size) * 3.6);
  min-height:var(--dock-size);
  padding:calc(var(--dock-size) * .08);
  border:var(--line) solid rgba(204,116,31,.72);
  border-radius:var(--dock-radius);
  background:#2d180b;
  color:#fff3e4;
  box-shadow:0 0 0 var(--line) rgba(255,196,112,.12) inset;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s linear, transform .18s ease;
}

.dock-confirm-panel[data-side="left"]{
  left:var(--dock-size);
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  transform:translate(calc(var(--dock-size) * -.35), -50%) scaleX(.72);
  transform-origin:left center;
}

.dock-confirm-panel[data-side="right"]{
  left:auto;
  right:var(--dock-size);
  grid-template-columns:auto auto 1fr;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  transform:translate(calc(var(--dock-size) * .35), -50%) scaleX(.72);
  transform-origin:right center;
}

.dock-confirm-panel.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translate(0, -50%) scaleX(1);
}

.dock-confirm-text{
  min-width:0;
  padding-left:calc(var(--dock-size) * .10);
  color:#fff3e4;
  font-size:calc(var(--dock-size) * .31);
  font-weight:750;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dock-confirm-panel[data-side="right"] .dock-confirm-text{
  grid-column:3;
  grid-row:1;
  padding-left:0;
  padding-right:calc(var(--dock-size) * .10);
  text-align:right;
}

.dock-confirm-panel[data-side="right"] .dock-confirm-cancel{
  grid-column:1;
  grid-row:1;
}

.dock-confirm-panel[data-side="right"] .dock-confirm-accept{
  grid-column:2;
  grid-row:1;
}

.dock-confirm-btn{
  appearance:none;
  display:grid;
  place-items:center;
  width:calc(var(--dock-size) * .82);
  height:calc(var(--dock-size) * .82);
  min-width:calc(var(--dock-size) * .82);
  min-height:calc(var(--dock-size) * .82);
  padding:0;
  border:var(--line) solid rgba(255,255,255,.12);
  border-radius:calc(var(--dock-radius) * .72);
  background:rgba(255,255,255,.06);
  color:#efe7df;
  font-size:0;
  cursor:pointer;
  transition:transform .08s ease, opacity .08s ease, filter .08s ease;
  -webkit-tap-highlight-color:transparent;
}

.dock-confirm-btn:not(:disabled):active{
  transform:scale(.96);
  opacity:.88;
  filter:brightness(.96);
}

.dock-confirm-accept{
  background:#cc741f;
  border-color:#cc741f;
  color:#050200;
}

.dock-confirm-cancel{
  background:rgba(255,255,255,.07);
}

.dock-btn.primary{
  background:#cc741f;
  border-color:#cc741f;
  color:#050200;
}

.dock-btn-settings{
  background:rgba(200,100,22,.08);
  border-color:rgba(200,100,22,.18);
  color:rgba(255,255,255,.78);
}

.dock-btn-volume{
  background:rgba(200,100,22,.08);
  border-color:rgba(200,100,22,.18);
  color:rgba(255,255,255,.78);
}

.dock-btn-reset{
  background:rgba(200,100,22,.08);
  border-color:rgba(200,100,22,.18);
  color:rgba(255,255,255,.78);
}

.dock-icon{
  position:relative;
  display:block;
  width:calc(var(--dock-size) * .54);
  height:calc(var(--dock-size) * .54);
  color:currentColor;
}

.dock-btn[data-icon="play"] .dock-icon{
  width:0;
  height:0;
  margin-left:calc(var(--dock-size) * .05);
  border-top:calc(var(--dock-size) * .18) solid transparent;
  border-bottom:calc(var(--dock-size) * .18) solid transparent;
  border-left:calc(var(--dock-size) * .29) solid currentColor;
}

.dock-btn[data-icon="pause"] .dock-icon::before,
.dock-btn[data-icon="pause"] .dock-icon::after{
  content:"";
  position:absolute;
  top:calc(var(--dock-size) * .06);
  width:calc(var(--dock-size) * .10);
  height:calc(var(--dock-size) * .43);
  background:currentColor;
}

.dock-btn[data-icon="pause"] .dock-icon::before{ left:calc(var(--dock-size) * .14); }
.dock-btn[data-icon="pause"] .dock-icon::after{ right:calc(var(--dock-size) * .14); }

.dock-btn[data-icon="gear"] .dock-icon,
.dock-btn[data-icon="volume"] .dock-icon,
.dock-btn[data-icon="reset"] .dock-icon{
  display:block;
  width:var(--dock-icon);
  height:var(--dock-icon);
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.dock-btn[data-icon="gear"] .dock-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.47 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.5.42l-.38 2.65c-.61.25-1.18.59-1.69.98l-2.49-1c-.23-.08-.48 0-.6.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.59 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.47 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.5.42l-.38 2.65c-.61.25-1.18.59-1.69.98l-2.49-1c-.23-.08-.48 0-.6.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.59 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
}

.dock-btn[data-icon="volume"] .dock-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm13.5 3c0-1.77-1-3.29-2.5-4.03v8.05c1.5-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm13.5 3c0-1.77-1-3.29-2.5-4.03v8.05c1.5-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}

.dock-btn[data-icon="reset"] .dock-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h8V3l-3.35 3.35z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h8V3l-3.35 3.35z'/%3E%3C/svg%3E");
}

.dock-btn[data-icon="confirm"] .dock-icon,
.dock-confirm-btn[data-icon="confirm"] .dock-icon,
.dock-confirm-btn[data-icon="close"] .dock-icon{
  width:calc(var(--dock-size) * .50);
  height:calc(var(--dock-size) * .50);
}

.dock-btn[data-icon="confirm"] .dock-icon::before,
.dock-confirm-btn[data-icon="confirm"] .dock-icon::before{
  content:"";
  position:absolute;
  left:calc(var(--dock-size) * .09);
  top:calc(var(--dock-size) * .13);
  width:calc(var(--dock-size) * .30);
  height:calc(var(--dock-size) * .16);
  border-left:calc(var(--dock-size) * .07) solid currentColor;
  border-bottom:calc(var(--dock-size) * .07) solid currentColor;
  transform:rotate(-45deg);
}

.dock-confirm-btn[data-icon="close"] .dock-icon::before,
.dock-confirm-btn[data-icon="close"] .dock-icon::after{
  content:"";
  position:absolute;
  left:calc(var(--dock-size) * .07);
  top:calc(var(--dock-size) * .21);
  width:calc(var(--dock-size) * .36);
  height:calc(var(--dock-size) * .07);
  background:currentColor;
  border-radius:0;
}

.dock-confirm-btn[data-icon="close"] .dock-icon::before{ transform:rotate(45deg); }
.dock-confirm-btn[data-icon="close"] .dock-icon::after{ transform:rotate(-45deg); }

.dock-btn.danger{
  color:#ff8c7c;
  border-color:rgba(255,82,60,.32);
}

.dock-btn:disabled{
  opacity:.45;
  cursor:default;
}

.setup-panel{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-block:calc(4svh + var(--safe-top)) calc(3svh + var(--safe-bottom));
  padding-inline:calc(3svw + var(--safe-left)) calc(3svw + var(--safe-right));
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 18%),
    #0b3041;
}

.setup-panel.is-hidden{ display:none; }

.settings-sheet{
  position:relative;
  width:94svw;
  max-height:92svh;
  overflow:auto;
  background:
    linear-gradient(145deg, #ffffff 0%, #fffdf8 48%, #f1f8fb 100%);
  border:var(--line) solid rgba(230,237,245,.95);
  border-radius:calc(var(--radius) * 1.05);
  padding:3.6svw;
  box-shadow:
    0 2svw 5svw rgba(2,21,30,.18),
    0 6svw 12svw rgba(2,21,30,.18),
    inset 0 .16svw .12svw rgba(255,255,255,.98);
}

.sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.8svw;
  margin-bottom:3.8svw;
}

.safari-install-tip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.4svw;
  margin:-1.4svw 0 3svw;
  padding:2.6svw 3svw;
  border:var(--line) solid rgba(245,158,11,.42);
  border-radius:calc(var(--radius) * .72);
  background:linear-gradient(135deg, #fff7e8 0%, #edf8fb 100%);
  color:#0b3041;
}

.safari-install-tip[hidden]{
  display:none !important;
}

.safari-install-tip strong,
.safari-install-tip span{
  display:block;
}

.safari-install-tip strong{
  font-size:3.15svw;
  font-weight:900;
  line-height:1.15;
}

.safari-install-tip span{
  margin-top:.8svw;
  color:#395463;
  font-size:2.45svw;
  font-weight:700;
  line-height:1.25;
}

.install-steps{
  display:grid;
  gap:1.15svw;
  margin:1.8svw 0 0;
  padding:0;
  list-style:none;
}

.install-steps li{
  display:grid;
  grid-template-columns:7svw minmax(0,1fr);
  align-items:center;
  gap:1.5svw;
  min-height:7.2svw;
  color:#0b3041;
  font-size:2.7svw;
  font-weight:850;
  line-height:1.16;
}

.install-step-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:7svw;
  height:7svw;
  border:var(--line) solid rgba(11,48,65,.18);
  border-radius:1.7svw;
  background:#ffffff;
  color:#0b3041;
}

.install-icon-menu::before{
  content:"...";
  margin-top:-1.3svw;
  font-size:4.5svw;
  font-weight:950;
  line-height:1;
  letter-spacing:.18svw;
}

.install-icon-share::before{
  content:"";
  position:absolute;
  left:2.1svw;
  top:1.3svw;
  width:2.4svw;
  height:2.4svw;
  border-left:.55svw solid currentColor;
  border-top:.55svw solid currentColor;
  transform:rotate(45deg);
}

.install-icon-share::after{
  content:"";
  position:absolute;
  left:1.75svw;
  bottom:1.4svw;
  width:3.5svw;
  height:3.1svw;
  border:.5svw solid currentColor;
  border-top:0;
  border-radius:.35svw;
}

.install-icon-add::before,
.install-icon-add::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3.4svw;
  height:.5svw;
  background:currentColor;
  transform:translate(-50%, -50%);
}

.install-icon-add::after{
  width:.5svw;
  height:3.4svw;
}

.safari-install-tip button{
  appearance:none;
  display:grid;
  place-items:center;
  width:8.2svw;
  height:8.2svw;
  min-width:8.2svw;
  min-height:8.2svw;
  padding:0;
  border:var(--line) solid rgba(11,48,65,.14);
  border-radius:2.2svw;
  background:#ffffff;
  color:#0b3041;
  font-size:5.2svw;
  font-weight:850;
  line-height:1;
}

.sheet-title-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.sheet-brand{
  display:inline-flex;
  align-items:center;
  gap:1.8svw;
  color:#d97706;
  font-size:5.9svw;
  font-weight:950;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}

.sheet-logo{
  display:block;
  width:12.4svw;
  height:12.4svw;
  object-fit:contain;
  flex:0 0 auto;
}

.sheet-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:var(--line) solid #d9e5ef;
  border-radius:var(--radius);
  min-height:9.4svw;
  padding-block:1.9svw;
  padding-inline:3.2svw;
  background:#f8fbfd;
  color:#0b3041;
  box-shadow:0 .8svw 2.4svw rgba(11,48,65,.07);
  font-size:3.45svw;
  font-weight:750;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}

.time-controls{
  display:grid;
  gap:3.2svw;
}

.time-control{
  --card-title:#0b3041;
  --card-unit:#f59e0b;
  --card-value:#0b3041;
  --card-accent:#f59e0b;
  --plus-bg:#f59e0b;
  --plus-text:#061e32;
  --minus-bg:#0b3041;
  --minus-text:#fffaf2;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:1.4svw;
  padding-block:3.2svw 7svw;
  padding-inline:3.4svw;
  border:var(--line) solid #d8e5ef;
  border-radius:var(--radius);
  background:
    linear-gradient(145deg, #fff7e8 0%, #fbfdff 46%, #eef7fb 100%);
  box-shadow:
    0 2svw 4.4svw rgba(11,48,65,.10),
    inset 0 .16svw .12svw rgba(255,255,255,.96);
}

.time-control::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:.8svw;
  z-index:1;
  border-radius:inherit inherit 0 0;
  background:linear-gradient(90deg, #f59e0b 0%, #0b3041 48%, #f59e0b 100%);
  pointer-events:none;
}

.time-control::after{
  content:none;
}

.time-control > *{
  position:relative;
  z-index:2;
}

.time-control-move{
  --card-title:#0b3041;
  --card-unit:#b98522;
  --card-value:#b98522;
  width:86%;
  justify-self:center;
}

.time-control-match{
  --card-title:#0b3041;
  --card-unit:#0b3041;
  --card-value:#0b3041;
  background:
    linear-gradient(145deg, #fffaf0 0%, #f7fbff 42%, #eef7fb 100%);
}

.control-title{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:1.4svw;
  color:var(--card-title);
  font-size:4svw;
  font-weight:850;
  line-height:1;
}

.title-unit{
  font-size:3.15svw;
  font-weight:800;
  color:var(--card-value);
}

.adjust-row{
  display:grid;
  grid-template-columns:18svw 1fr 18svw;
  align-items:center;
  gap:2.5svw;
}

.control-value{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:1.4svw;
  min-height:22svw;
  color:var(--card-value);
  font-variant-numeric:tabular-nums;
}

.control-value output{
  font-size:17svw;
  font-weight:850;
  line-height:.78;
  letter-spacing:0;
}

.control-value span{
  align-self:center;
  margin-top:6.4svw;
  font-size:4.5svw;
  font-weight:800;
  line-height:1;
  color:var(--card-value);
}

.adjust-btn{
  appearance:none;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18svw;
  height:18svw;
  padding:0;
  border:var(--line) solid rgba(11,48,65,.14);
  border-radius:var(--radius);
  background:#0b3041;
  color:#fffaf2;
  font-size:0;
  font-weight:850;
  line-height:0;
  cursor:pointer;
  transition:transform .08s ease, opacity .08s ease, filter .08s ease;
  -webkit-tap-highlight-color:transparent;
}

.adjust-btn::before,
.adjust-btn.plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5.6svw;
  height:.86svw;
  background:currentColor;
  border-radius:0;
  transform:translate(-50%, -50%);
}

.adjust-btn.plus::after{
  width:.86svw;
  height:5.6svw;
}

.adjust-btn.plus{
  border-color:rgba(245,158,11,.44);
  background:var(--plus-bg);
  color:var(--plus-text);
}

.adjust-btn.minus{
  border-color:rgba(11,48,65,.16);
  background:var(--minus-bg);
  color:var(--minus-text);
}

.adjust-btn:active{
  opacity:.88;
  filter:brightness(.96);
  transform:scale(.96);
}

.sheet-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.9svw;
  flex-wrap:wrap;
  margin-top:3.6svw;
}

.settings-sheet .dock-btn.primary{
  min-width:min(48svw, 18rem);
  min-height:10.8svw;
  background:#f59e0b;
  border-color:#f59e0b;
  border-radius:var(--radius);
  color:#0b1f33;
  box-shadow:0 1.4svw 3.2svw rgba(245,158,11,.18);
  font-size:3.7svw;
  font-weight:850;
}

.clock-app.is-low .player-zone.is-active .clock-time{
  animation:lowPulse 1s steps(2, end) infinite;
}

@keyframes lowPulse{
  0%,49%{ color:var(--active-low); }
  50%,100%{ color:var(--active); }
}

@media (prefers-reduced-motion: reduce){
  .clock-app.is-low .player-zone.is-active .clock-time{ animation:none; }
  .center-dock,
  .dock-btn,
  .dock-confirm-btn,
  .adjust-btn{ transition:none; }
}

@media (orientation: landscape){
  .clock-app{
    width:100svw;
    height:100svh;
  }
}