:root{
      --bg:#0b0f17;
      --panel:#11192a;
      --panel2:#0f1626;
      --text:#e9eefc;
      --muted:#9fb0d0;
      --accent:#5aa2ff;
      --accent2:#6cffc7;
      --danger:#ff5a7a;
      --border:rgba(255,255,255,.08);
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --radius:18px;
      --app-shell-max:1100px;
      --page-gutter:18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      background: radial-gradient(1200px 700px at 20% 15%, rgba(90,162,255,.18), transparent 60%),
                  radial-gradient(900px 600px at 80% 0%, rgba(108,255,199,.12), transparent 55%),
                  var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      align-items:stretch;
      justify-content:center;
      padding:18px;
    }

    .app{
      width:min(1100px, 100%);
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .topbar{
      display:flex;
      align-items:stretch;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow:var(--shadow);
    }
    .header-side{
      display:grid;
      gap:10px;
      justify-items:end;
      align-content:start;
      min-width:260px;
      justify-self:end;
      margin-left:auto;
    }
    .header-time-row{
      display:flex;
      align-items:center;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .format-tabs{
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:4px;
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(0,0,0,.18);
    }
    .format-tab{
      min-height:30px;
      padding:6px 10px;
      border-radius:9px;
      font-size:12px;
      font-weight:700;
      line-height:1;
    }
    .topbar-main{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:8px;
      min-width:280px;
      align-self:stretch;
    }
    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .tabs-card{
      display:inline-flex;
      align-items:center;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(0,0,0,.18);
      padding:6px;
      width:max-content;
      justify-self:start;
    }
    .tab{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.88);
      padding:10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      transition: transform .06s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    .tab:hover{ border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.24); }
    .tab:active{ transform: translateY(1px); }
    .tab.active{
      border-color:rgba(90,162,255,.8);
      background:rgba(90,162,255,.18);
      color:var(--text);
    }

    .rightbits{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.82);
      font-size:13px;
      white-space:nowrap;
    }
    .kbd{
      font-family:var(--mono);
      font-size:11px;
      padding:2px 6px;
      border:1px solid var(--border);
      border-radius:8px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.8);
    }

    .view{
      display:none;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .view.active{ display:block; }

    .realtime{
      min-height: calc(100vh - 120px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      position:relative;
    }
    .bigclock{
      width:100%;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
    }
    .bigclock .time{
      font-family:var(--mono);
      font-size: clamp(64px, 12vw, 170px);
      line-height:1;
      letter-spacing:2px;
      position: relative;
      display: inline-block;   
      text-align: center;
    }
    .bigclock .date{
      font-size: clamp(14px, 2.1vw, 18px);
      color:rgba(233,238,252,.78);
    }

    /* Timers view */
    .timers{
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .timers-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .timers-head-main{
      min-width:280px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .timers-head-main > button{
      min-height:40px;
    }
    .timers-title{
      font-size:14px;
      color:var(--muted);
      font-weight:700;
      letter-spacing:.6px;
      text-transform:uppercase;
    }
    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .inline-sound-controls{
      display:flex;
      justify-content:flex-end;
    }
    .sound-row{
      display:inline-flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    #ringtone-select{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      padding:10px 32px 10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      outline:none;
      max-width:170px;
      min-height:40px;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(233,238,252,.86) 50%),
        linear-gradient(135deg, rgba(233,238,252,.86) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 16px,
        calc(100% - 12px) 16px;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
      color-scheme:dark;
    }
    #ringtone-select:focus{
      border-color:rgba(90,162,255,.7);
      box-shadow:0 0 0 4px rgba(90,162,255,.15);
    }
    #ringtone-select option{
      background:#0f1626;
      color:#e9eefc;
    }
    .sound-row #snd-vol{
      width:min(152px, 30vw);
    }

    button{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      transition: transform .06s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    button:hover{ border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.24); }
    button:active{ transform: translateY(1px); }
    button.primary{
      border-color:rgba(90,162,255,.45);
      background:rgba(90,162,255,.14);
    }
    button.primary:hover{ border-color:rgba(90,162,255,.8); background:rgba(90,162,255,.18); }
    button.danger{
      border-color:rgba(255,90,122,.45);
      background:rgba(255,90,122,.12);
    }
    button.danger:hover{ border-color:rgba(255,90,122,.85); background:rgba(255,90,122,.16); }
    button:disabled{ opacity:.55; cursor:not-allowed; }

    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .grid.is-reordering{
      user-select:none;
    }
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
    }

    .single-timer[hidden],
    .timers.single-mode .grid{
      display:none;
    }
    .timers.single-mode .single-timer{
      display:block;
    }
    .single-card{
      border:1px solid var(--border);
      border-radius:18px;
      background:rgba(0,0,0,.14);
      padding:clamp(16px, 3vw, 28px);
      display:flex;
      flex-direction:column;
      gap:22px;
    }
    .single-section-divider{
      width:100%;
      height:1px;
      margin:18px 0;
      border:0;
      background:rgba(255,255,255,.1);
    }
    .single-active-card{
      border:1px solid var(--border);
      border-radius:18px;
      background:rgba(0,0,0,.14);
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .single-active-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .single-active-list{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    .single-active-item{
      min-width:0;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(0,0,0,.18);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .single-active-name{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-weight:700;
    }
    .single-active-phase{
      margin-top:3px;
      color:var(--muted);
      font-size:12px;
    }
    .single-active-time{
      flex:0 0 auto;
      font:700 22px/1 var(--mono);
      letter-spacing:.5px;
    }
    .single-active-empty{
      grid-column:1 / -1;
      padding:16px;
      border:1px dashed var(--border);
      border-radius:14px;
      color:rgba(233,238,252,.62);
      text-align:center;
    }
    .single-dial-wrap{
      position:relative;
      width:min(720px, 100%);
      margin:0 auto;
      touch-action:none;
      cursor:grab;
    }
    .single-dial-wrap.is-dragging{ cursor:grabbing; }
    .single-dial{
      width:100%;
      height:auto;
      display:block;
      overflow:visible;
      outline:none;
    }
    .single-dial:focus-visible,
    .single-progress:focus-visible{
      filter:drop-shadow(0 0 7px rgba(90,162,255,.7));
    }
    .single-dial-track,
    .single-dial-progress{
      fill:none;
      stroke-width:24;
      stroke-linecap:round;
    }
    .single-dial-track{ stroke:rgba(255,255,255,.1); }
    .single-dial-progress{
      stroke:var(--accent);
      stroke-dasharray:100;
      stroke-dashoffset:0;
    }
    .single-dial-tick{
      stroke:rgba(233,238,252,.45);
      stroke-width:2;
    }
    .single-dial-tick.major{
      stroke:rgba(233,238,252,.82);
      stroke-width:3;
    }
    .single-dial-label{
      fill:rgba(233,238,252,.72);
      font:600 15px var(--sans);
      text-anchor:middle;
      dominant-baseline:middle;
    }
    .single-dial-needle{
      stroke:#f4f8ff;
      stroke-width:7;
      stroke-linecap:round;
      filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
      pointer-events:none;
    }
    .single-dial-hub{
      fill:var(--accent);
      stroke:#f4f8ff;
      stroke-width:4;
      pointer-events:none;
    }
    .single-readout{
      position:relative;
      margin-top:-12px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:3px;
      pointer-events:none;
    }
    .single-readout strong{
      font:700 clamp(30px, 6vw, 54px)/1 var(--mono);
      letter-spacing:1px;
    }
    .single-readout span{
      color:var(--muted);
      font-size:13px;
    }
    .single-progress-wrap{
      width:min(760px, 100%);
      margin:0 auto;
    }
    .single-progress-labels{
      display:flex;
      justify-content:space-between;
      margin-bottom:8px;
      color:rgba(233,238,252,.62);
      font-size:12px;
    }
    .single-progress{
      position:relative;
      height:16px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(255,255,255,.1);
      touch-action:none;
      cursor:pointer;
      outline:none;
    }
    .single-progress-fill{
      position:absolute;
      inset:0 auto 0 0;
      width:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), var(--accent2));
      pointer-events:none;
    }
    .single-progress-ticks{
      position:absolute;
      inset:-5px 0;
      pointer-events:none;
      z-index:2;
    }
    .single-progress-tick{
      position:absolute;
      top:0;
      bottom:0;
      width:1px;
      transform:translateX(-50%);
      background:rgba(233,238,252,.48);
    }
    .single-progress-tick.major{
      width:2px;
      background:rgba(233,238,252,.82);
    }
    button.single-progress-marker{
      position:absolute;
      top:50%;
      left:100%;
      width:26px;
      height:26px;
      min-height:0;
      padding:0;
      border-radius:50%;
      transform:translate(-50%, -50%);
      background:#f4f8ff;
      border:3px solid var(--accent);
      box-shadow:0 4px 12px rgba(0,0,0,.4);
      cursor:grab;
      touch-action:none;
      z-index:3;
    }
    button.single-progress-marker:active{
      transform:translate(-50%, -50%);
      cursor:grabbing;
    }
    .single-controls{
      display:grid;
      grid-template-columns:max-content max-content max-content 1fr;
      gap:12px;
      align-items:end;
      width:min(760px, 100%);
      margin:0 auto;
    }
    .single-controls label{
      display:flex;
      flex-direction:column;
      gap:6px;
      color:rgba(233,238,252,.72);
      font-size:12px;
    }
    .single-controls .single-compact-input{
      width:10ch;
    }
    .single-controls .single-loop-toggle{
      align-self:end;
      flex-direction:row;
      color:rgba(233,238,252,.82);
    }
    .single-button-group{
      display:flex;
      gap:8px;
      justify-self:end;
    }
    @media (max-width: 680px){
      .single-controls{ grid-template-columns:max-content max-content max-content; }
      .single-button-group{ grid-column:1 / -1; justify-content:flex-end; }
      .single-dial-label{ font-size:13px; }
      .single-active-list{ grid-template-columns:1fr; }
    }

    .timer-card{
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(0,0,0,.14);
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition: border-color .15s ease, transform .06s ease;
    }
    .timer-card.is-reorder-source{
      opacity:.68;
      border-color:rgba(90,162,255,.72);
      background:rgba(90,162,255,.12);
    }
    .timer-card:active{ transform: translateY(1px); }
    .timer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .timer-name{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      min-width: 220px;
    }
    button.timer-drag-handle{
      width:34px;
      height:34px;
      min-height:0;
      padding:0;
      display:grid;
      place-items:center;
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:rgba(233,238,252,.64);
      cursor:grab;
      touch-action:none;
      font:800 15px/1 var(--mono);
      letter-spacing:0;
    }
    button.timer-drag-handle:hover{
      border-color:rgba(90,162,255,.7);
      background:rgba(90,162,255,.14);
      color:rgba(233,238,252,.9);
    }
    button.timer-drag-handle:active{
      cursor:grabbing;
    }
    .timer-name strong{
      font-size:14px;
      color:rgba(233,238,252,.9);
    }
    .status{
      font-size:12px;
      color:rgba(233,238,252,.75);
    }
    .timer-display{
      font-family:var(--mono);
      font-size:40px;
      letter-spacing:1px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      text-align:center;
    }
    .timer-display.is-delay{
      color:#ffd166;
      border-color:rgba(255,209,102,.38);
      background:rgba(255,209,102,.08);
    }

    .setrow{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
    }
    .setrow label{
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:12px;
      color:rgba(233,238,252,.7);
    }
    .delay-row{
      align-items:end;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .delay-row > *{
      min-width:0;
      width:100%;
    }
    .delay-row input{
      width:100%;
    }
    .delay-spacer{
      min-height:42px;
    }
    input[type="number"], input[type="text"]{
      font-family:var(--mono);
      font-size:14px;
      padding:10px 10px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      outline:none;
    }
    input[type="number"]:focus, input[type="text"]:focus{
      border-color:rgba(90,162,255,.7);
      box-shadow:0 0 0 4px rgba(90,162,255,.15);
    }
    input.scrub-input{
      cursor:ew-resize;
    }
    input.scrub-input.is-scrubbing{
      border-color:rgba(90,162,255,.82);
      box-shadow:0 0 0 4px rgba(90,162,255,.18);
    }
    body.scrub-active,
    body.scrub-active *{
      user-select:none;
      cursor:ew-resize !important;
    }

    .bar{
      --initial-pct:0%;
      --timer-end-pct:100%;
      --progress-pct:0%;
      height:10px;
      border-radius:999px;
      background:
        linear-gradient(90deg,
          rgba(255,209,102,.28) 0%,
          rgba(255,209,102,.28) var(--initial-pct),
          rgba(255,255,255,.08) var(--initial-pct),
          rgba(255,255,255,.08) var(--timer-end-pct),
          rgba(255,209,102,.28) var(--timer-end-pct),
          rgba(255,209,102,.28) 100%);
      border:1px solid var(--border);
      overflow:hidden;
      position:relative;
    }
    .bar > div{
      position:absolute;
      inset:0;
      height:100%;
      width:100%;
      background:
        linear-gradient(90deg,
          #ffd166 0%,
          #ffd166 var(--initial-pct),
          var(--accent) var(--initial-pct),
          var(--accent2) var(--timer-end-pct),
          #ffd166 var(--timer-end-pct),
          #ffd166 100%);
      clip-path:inset(0 calc(100% - var(--progress-pct)) 0 0);
      transition: clip-path .25s ease;
    }
    .small{ font-size:12px; color:rgba(233,238,252,.7); }
    .note{ font-size:12px; color:rgba(233,238,252,.62); line-height:1.35; margin-top:4px; }

    .compact .grid{ grid-template-columns: 1fr; }
    .compact .timer-display{ font-size:34px; padding:8px 10px; }
    .compact .timer-card{ padding:12px; gap:8px; }
    .compact input[type="number"], .compact input[type="text"]{ padding:9px 9px; }

    .sound-panel{
      width:100%;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(0,0,0,.12);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .sound-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .sound-title-wrap{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .no-margin{
      margin:0;
    }
    .sound-controls{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.82);
      font-size:12px;
      white-space:nowrap;
      min-height:40px;
    }
    .preset-group{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .flex-spacer{
      flex:1;
    }
    .preset{
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
    }
    .preset.active{
      border-color:rgba(90,162,255,.8);
      background:rgba(90,162,255,.18);
    }

    .slider-wrap{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .slider-label{
      font-size:12px;
      color:rgba(233,238,252,.72);
      min-width:60px;
    }
    #snd-vol{
      --vol-pct: 100%;
      -webkit-appearance:none;
      appearance:none;
      width:min(152px, 30vw);
      height:10px;
      padding:0;
      border-radius:999px;
      border:1px solid var(--border);
      outline:none;
      cursor:pointer;
      background:
        linear-gradient(90deg, rgba(90,162,255,.95) 0%, rgba(108,255,199,.95) var(--vol-pct), rgba(255,255,255,.12) var(--vol-pct), rgba(255,255,255,.12) 100%);
    }
    #snd-vol::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:16px;
      height:16px;
      border-radius:50%;
      background:#f4f8ff;
      border:1px solid rgba(255,255,255,.4);
      box-shadow:0 3px 10px rgba(0,0,0,.28);
      margin-top:-3px;
    }
    #snd-vol::-moz-range-track{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid var(--border);
    }
    #snd-vol::-moz-range-progress{
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(90,162,255,.95), rgba(108,255,199,.95));
      border:1px solid rgba(255,255,255,.16);
    }
    #snd-vol::-moz-range-thumb{
      width:16px;
      height:16px;
      border-radius:50%;
      background:#f4f8ff;
      border:1px solid rgba(255,255,255,.4);
      box-shadow:0 3px 10px rgba(0,0,0,.28);
    }

    .toggle{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      font-size:12px;
      color:rgba(233,238,252,.82);
      user-select:none;
      min-height:40px;
    }
    .toggle input{
      width:40px;
      height:22px;
      appearance:none;
      -webkit-appearance:none;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      position:relative;
      cursor:pointer;
      outline:none;
      transition: background .15s ease, border-color .15s ease;
    }
    .toggle input::after{
      content:"";
      position:absolute;
      top:50%;
      left:3px;
      transform:translateY(-50%);
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(255,255,255,.85);
      box-shadow:0 8px 18px rgba(0,0,0,.35);
      transition: left .15s ease;
    }
    .toggle input:checked{
      background:rgba(90,162,255,.22);
      border-color:rgba(90,162,255,.55);
    }
    .toggle input:checked::after{
      left:20px;
    }
    input:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .rt-controls{
      position:absolute;
      top:16px;
      right:16px;
      display:flex;
      gap:10px;
    }
    .rt-controls .knob-toggle{
      position:relative;
      border-radius:999px;
      padding:8px 12px 8px 66px;
      min-height:40px;
      font-size:13px;
      background:rgba(0,0,0,.18);
      border-color:var(--border);
    }
    .rt-controls .knob-toggle::before{
      content:"";
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      width:40px;
      height:22px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      transition:background .15s ease, border-color .15s ease;
    }
    .rt-controls .knob-toggle::after{
      content:"";
      position:absolute;
      left:15px;
      top:50%;
      transform:translateY(-50%);
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(255,255,255,.85);
      box-shadow:0 8px 18px rgba(0,0,0,.35);
      transition:left .15s ease;
    }
    .rt-controls .knob-toggle[aria-pressed="true"]::before{
      background:rgba(90,162,255,.22);
      border-color:rgba(90,162,255,.55);
    }
    .rt-controls .knob-toggle[aria-pressed="true"]::after{
      left:32px;
    }
    body.clock-fullscreen{
      padding:0;
      overflow:hidden;
    }
    body.clock-fullscreen .topbar{
      display:none;
    }
    body.clock-fullscreen .app{
      width:100vw;
      max-width:none;
      height:100vh;
      gap:0;
    }
    body.clock-fullscreen .view{
      border-radius:0;
      border:0;
      box-shadow:none;
    }
    body.clock-fullscreen .view.active{
      height:100vh;
    }
    body.clock-fullscreen .realtime{
      min-height:100vh;
      padding:24px;
    }
    .ampm{
      position: absolute;
      top: 2.2em;
      right: -1.60em;          
      font-size: 0.28em;
      opacity: 0.75;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }