/* Floating mini timer: the Picture-in-Picture window, the Safari video and the in-page panel share this markup.
   Sizes use --u (about 1% of the smaller side of the window), so everything grows with the window. */
.tmini-body { margin: 0; background: var(--bg); overflow: hidden; font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; --u: min(1vw, 1.4vh); }
.tmini, .tmini * { box-sizing: border-box; }
.tmini { --u: inherit; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; justify-items: center; align-content: center; gap: calc(var(--u) * 3.3); padding: calc(var(--u) * 3.5) calc(var(--u) * 5); min-height: 100vh; width: 100%; --bar-c: var(--moon); }
.tmini[data-phase="break"] { --bar-c: var(--c-ocean); }
.tmini button { font: inherit; background: none; border: 1px solid transparent; color: inherit; cursor: pointer; padding: 0; }
.tmini__brand { display: flex; align-items: center; gap: calc(var(--u) * 1.4); font-weight: 600; font-size: calc(var(--u) * 3.6); letter-spacing: -.01em; color: var(--moon); }
.tmini__logo { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.9); background: var(--moon); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.tmini__phase { margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: calc(var(--u) * 3.2); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.tmini__clock { margin: 0; max-width: 100%; white-space: nowrap; font-weight: 500; font-size: calc(var(--u) * 17); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.tmini__bar { width: 100%; height: max(3px, calc(var(--u) * 1.1)); border-radius: 999px; background: var(--line-2); overflow: hidden; }
.tmini__bar i { display: block; height: 100%; width: 0; background: var(--bar-c); transition: width 1s linear; }
.tmini__btns { display: flex; align-items: center; gap: calc(var(--u) * 3.2); }
.tmini__btn { display: grid; place-items: center; flex: none; width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); padding: 0; border-radius: 50%; border: 1px solid var(--line-2) !important; color: var(--text-2); transition: background .2s, border-color .2s, color .2s; }
.tmini__btn:hover { border-color: var(--text-3) !important; color: var(--text); }
.tmini__btn--main { width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); background: var(--moon) !important; border-color: var(--moon) !important; color: var(--on-moon) !important; }
.tmini__btn--main:hover { background: #f6ecd9 !important; color: var(--on-moon) !important; }
.tmini__btn span { display: grid; place-items: center; }
.tmini__btn svg { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.tmini__btn--main svg { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); }
.tmini__vol { display: flex; align-items: center; gap: calc(var(--u) * 1.6); width: min(100%, calc(var(--u) * 60)); color: var(--text-3); }
.tmini__vol svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex: none; }
.tmini__vol input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: calc(var(--u) * 5); margin: 0; background: transparent; cursor: pointer; --fill: 50%; }
.tmini__vol input::-webkit-slider-runnable-track { height: max(3px, calc(var(--u) * 1.1)); border-radius: 999px; background: linear-gradient(to right, var(--moon) var(--fill), var(--line-2) var(--fill)); }
.tmini__vol input::-webkit-slider-thumb { -webkit-appearance: none; width: max(8px, calc(var(--u) * 3.4)); height: max(8px, calc(var(--u) * 3.4)); margin-top: calc((max(3px, var(--u) * 1.1) - max(8px, var(--u) * 3.4)) / 2); border-radius: 50%; background: var(--moon); border: 0; }
.tmini__vol input::-moz-range-track { height: max(3px, calc(var(--u) * 1.1)); border-radius: 999px; background: var(--line-2); }
.tmini__vol input::-moz-range-progress { height: max(3px, calc(var(--u) * 1.1)); border-radius: 999px; background: var(--moon); }
.tmini__vol input::-moz-range-thumb { width: max(8px, calc(var(--u) * 3.4)); height: max(8px, calc(var(--u) * 3.4)); border-radius: 50%; background: var(--moon); border: 0; }
.tmini [hidden] { display: none !important; }
@media (max-height: 200px) { .tmini__brand { display: none; } }
.tfloat { --u: 2.5px; position: fixed; right: 16px; bottom: 16px; z-index: 95; width: 270px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7); overflow: hidden; }
.tfloat__bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); cursor: grab; touch-action: none; user-select: none; border-bottom: 1px solid var(--line); }
.tfloat__bar[data-dragging] { cursor: grabbing; }
.tfloat__bar button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-3); border-radius: 50%; }
.tfloat__bar button:hover { color: var(--text); }
.tfloat__bar svg { width: 14px; height: 14px; }
.tfloat .tmini { min-height: 0; padding: 16px 18px 18px; gap: 12px; }
.tfloat .tmini__brand { display: none; }
@media (max-width: 640px) { .tfloat { right: 12px; bottom: 12px; width: 250px; } }