/* homepage.malmqvist.dev * * A colour field with the timer standing in it. The gradient is the page's one * indulgence; everything else is white type and translucent glass, kept quiet * so the timer is never competing with anything. * * The mesh tracks the real hour — theme.js sets data-phase on . Each * phase supplies four blob colours and a ground; the mesh geometry is shared, * so a new phase is five values and nothing else. * * Nothing here is fetched. The gradients are CSS, the fonts are local, and the * page must stay instant because it opens on every new tab. */ @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/plex-sans-var.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; } :root { --glass: rgb(0 0 0 / 0.30); --glass-line: rgb(255 255 255 / 0.16); --glass-hover: rgb(255 255 255 / 0.14); --ink: #ffffff; --ink-soft: rgb(255 255 255 / 0.74); --ink-faint: rgb(255 255 255 / 0.55); /* The dark counterpart of --ink: type on a filled white control. The theme-color meta in index.html carries the same value by hand. */ --ink-invert: #1b1035; /* One red for the error role — errors and invalid state, nothing else. */ --ink-danger: #ffc9d1; --radius: 12px; --pill: 999px; } /* Four phases. Blob colours are deliberately saturated; the scrim below pulls the whole field down far enough for white type to hold contrast. */ [data-phase="dawn"] { --ground: #3d2447; --blob-1: #ffa25c; --blob-2: #ff5f95; --blob-3: #8a6bff; --blob-4: #ffd08a; } [data-phase="day"] { --ground: #1e3a7a; --blob-1: #3d7bff; --blob-2: #35d6f5; --blob-3: #9b5cff; --blob-4: #46e8c0; } [data-phase="dusk"] { --ground: #371352; --blob-1: #ff2d6f; --blob-2: #d43cff; --blob-3: #3d5cff; --blob-4: #ff74ad; } [data-phase="night"] { --ground: #140b30; --blob-1: #4632c9; --blob-2: #8a3fd4; --blob-3: #1e46a8; --blob-4: #c04a92; } * { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html, body { height: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; overflow: hidden; } h1, h2, p, ul, fieldset, legend { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* ---------- The colour field ---------- */ .mesh { position: fixed; inset: -10%; z-index: -3; background: radial-gradient(62% 58% at 12% 20%, var(--blob-1) 0%, transparent 72%), radial-gradient(58% 56% at 86% 14%, var(--blob-2) 0%, transparent 72%), radial-gradient(68% 64% at 78% 86%, var(--blob-3) 0%, transparent 74%), radial-gradient(58% 58% at 18% 88%, var(--blob-4) 0%, transparent 72%), var(--ground); transition: background 1.6s linear; } /* White type over a saturated field needs help. This darkens the whole thing slightly and pulls the corners down, which is where the dock sits. */ .scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* The band the date, weather and clock sit in. The corner-weighted gradient below is at its lightest along the top edge, and on the day and dawn blobs even pure white measures under 4.5:1 there — no ink change can reach it, so the shade has to come from here. */ linear-gradient(rgb(0 0 0 / 0.34), rgb(0 0 0 / 0.20) 55%, rgb(0 0 0 / 0)) top / 100% 170px no-repeat, radial-gradient(115% 85% at 50% 46%, rgb(0 0 0 / 0.00) 0%, rgb(0 0 0 / 0.26) 100%), linear-gradient(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.05)); } /* A photograph needs a heavier veil than the colour field, or white type drops out of the bright bits. The first layer is a pool of shade under the centre column: the corner-weighted gradient below is at its lightest exactly where the tabs and task line sit, so on a busy photo they wash out. */ html[data-wallpaper] .scrim { background: radial-gradient(42% 46% at 50% 44%, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.17) 55%, rgb(0 0 0 / 0) 100%), radial-gradient(115% 85% at 50% 46%, rgb(0 0 0 / 0.22) 0%, rgb(0 0 0 / 0.50) 100%), linear-gradient(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.16)); } /* The soft inks are tuned against a smooth gradient. Photo detail eats them, so the quiet type (tabs, the intention line) gets a higher floor over a photo. */ html[data-wallpaper] { --ink-soft: rgb(255 255 255 / 0.86); --ink-faint: rgb(255 255 255 / 0.62); } .wallpaper { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } .wallpaper.is-on { opacity: 1; } .wallpaper-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 0.8s ease; } .wallpaper-layer.is-show { opacity: 1; } /* ---------- Shell ---------- */ /* One row, with the topbar and the stage sharing it. The topbar used to take a row of its own, which left the stage centring itself in the space below and put the timer ~30px under the true centre of the window. Overlaying keeps the padding in one place, and nothing in the topbar is interactive, so the stage sitting over it costs nothing. */ .app { position: relative; height: 100%; display: grid; grid-template-rows: 1fr; padding: 26px 30px; } .app > .topbar, .app > .stage { grid-area: 1 / 1; } .app > .topbar { align-self: start; } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .topbar-date { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .topbar-weather { display: flex; gap: 7px; font-size: 13px; color: var(--ink); } .topbar-weather .weather-temp { color: var(--ink); font-weight: 600; } .topbar-clock { font-size: clamp(28px, 2.2vw, 38px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); } /* ---------- Centre stage ---------- */ .stage { position: relative; display: grid; min-height: 0; } /* A quiet segmented pill in the empty band between date and clock. */ .stage-tabs { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; gap: 2px; padding: 3px; background: rgb(0 0 0 / 0.22); border: 1px solid var(--glass-line); border-radius: var(--pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .stage-tab { font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-faint); background: none; border: 0; border-radius: var(--pill); padding: 6px 16px; cursor: pointer; } .stage-tab:hover { color: var(--ink); } .stage-tab[aria-selected="true"] { background: rgb(255 255 255 / 0.92); color: var(--ink-invert); } /* Three rows: chrome above, the readout, chrome below. Equal 1fr tracks pin the clock and the timer to the same viewport centre. */ .stage-view { width: 100%; min-height: 0; justify-items: center; } .stage-view:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; } .stage-north { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 15px; min-width: 0; min-height: 0; max-width: 100%; align-self: stretch; } .stage-south { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; min-height: 0; max-width: 100%; align-self: stretch; } .stage-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 60ch; } .stage-intention, .stage-task { font: inherit; background: none; border: 0; padding: 2px 8px; border-radius: var(--radius); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stage-intention { font-size: 15px; font-weight: 500; color: var(--ink-soft); } .stage-intention:hover { background: rgb(255 255 255 / 0.10); } .stage-intention.is-empty { color: var(--ink-faint); } .stage-intention[contenteditable] { overflow: visible; text-overflow: clip; white-space: normal; cursor: text; background: rgb(255 255 255 / 0.08); } .stage-task { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .stage-task:hover { background: rgb(255 255 255 / 0.10); } .stage-task.is-empty { color: var(--ink-faint); font-weight: 600; font-size: 18px; } /* One voice above the timer: when both the day line and a task are set, the stack tightens and the intention drops to a whisper under the task. */ .stage-copy.is-combined { gap: 0; } .stage-copy.is-combined .stage-intention { font-size: 13px; color: var(--ink-faint); } /* ---------- Timer ---------- */ #timer-root { display: flex; justify-content: center; } .modes { display: flex; gap: 10px; justify-content: center; } .mode { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: none; border: 1.5px solid rgb(255 255 255 / 0.55); border-radius: var(--pill); padding: 8px 20px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .mode:hover { background: rgb(255 255 255 / 0.14); } .mode.is-active { background: rgb(255 255 255 / 0.95); border-color: transparent; color: var(--ink-invert); } /* One dot per pomodoro in the current long-break cycle. */ .dots { display: flex; gap: 7px; justify-content: center; height: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.30); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset; } .dot.is-done { background: var(--ink); } .readout { font-size: clamp(84px, 15vw, 168px); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; text-shadow: 0 6px 40px rgb(0 0 0 / 0.22); } .controls { display: flex; align-items: center; gap: 14px; } .btn { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--pill); padding: 11px 24px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn:hover { background: var(--glass-hover); } .btn--primary { background: rgb(255 255 255 / 0.95); border-color: transparent; color: var(--ink-invert); min-width: 128px; } .btn--primary:hover { background: #fff; } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink-soft); background: none; border: 0; border-radius: 50%; cursor: pointer; } .icon-btn:hover { color: var(--ink); background: rgb(255 255 255 / 0.12); } /* ---------- Jump: search + favorites ---------- */ .jump { width: min(560px, 100%); display: flex; flex-direction: column; gap: 16px; align-items: center; } .search { display: flex; position: relative; width: 100%; } .search-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--pill); padding: 12px 7.5em 12px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .search-input::placeholder { color: var(--ink-faint); } .search-input:focus { border-color: rgb(255 255 255 / 0.55); background: rgb(0 0 0 / 0.38); } .search-engine { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ink-soft); pointer-events: none; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-engine.is-bang { color: var(--ink-soft); } .search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px; list-style: none; background: rgb(18 12 34 / 0.94); border: 1px solid var(--glass-line); border-radius: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 48px rgb(0 0 0 / 0.35); } .search-suggest[hidden] { display: none; } .sug { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; } .sug.is-active { background: rgb(255 255 255 / 0.12); } .sug-tag { flex: none; min-width: 4ch; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid rgb(255 255 255 / 0.25); border-radius: 6px; padding: 2px 5px; } .sug.is-active .sug-tag { color: var(--ink); border-color: rgb(255 255 255 / 0.5); } .sug-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .sug-detail { flex: none; font-size: 12px; color: var(--ink-faint); } .fav-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .fav-empty { font-size: 13px; color: var(--ink-faint); } .fav { display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--pill); background: rgb(255 255 255 / 0.10); border: 1px solid transparent; font-size: 14px; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; } .fav:hover { background: rgb(255 255 255 / 0.20); } .fav-mark { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; } .fav-mark img { width: 17px; height: 17px; display: block; } .fav-label { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fav-key { font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--ink-faint); border: 1px solid rgb(255 255 255 / 0.25); border-radius: 5px; padding: 1px 4px; opacity: 0.75; } .fav:hover .fav-key { opacity: 1; color: var(--ink); border-color: rgb(255 255 255 / 0.5); } @media (hover: none) { .fav-key { opacity: 0.9; } } .dock { position: fixed; bottom: 22px; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--pill); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .dock--left { left: 22px; } .dock--right { right: 22px; } .dock-btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-soft); background: none; border: 0; border-radius: 50%; cursor: pointer; } .dock-btn:hover { color: var(--ink); background: rgb(255 255 255 / 0.14); } .dock-btn.is-active { color: var(--ink-invert); background: rgb(255 255 255 / 0.92); } .dock-count { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: 0; padding: 0 12px 0 8px; border-radius: var(--pill); cursor: pointer; white-space: nowrap; height: 34px; } .dock-count:hover { color: var(--ink); background: rgb(255 255 255 / 0.14); } .dock-count.is-active { color: var(--ink-invert); background: rgb(255 255 255 / 0.92); } .sync-status { font-size: 11px; font-weight: 600; color: var(--ink-soft); padding-left: 8px; white-space: nowrap; } .sync-status--offline, .sync-status--error { color: var(--ink-danger); } .sync-status--saving::before { content: '●'; font-size: 7px; margin-right: 5px; } /* ---------- Floating panel ---------- */ .panel { position: fixed; left: 22px; bottom: 74px; z-index: 5; width: min(360px, calc(100vw - 44px)); max-height: min(60vh, 520px); display: flex; flex-direction: column; background: rgb(18 12 34 / 0.72); border: 1px solid var(--glass-line); border-radius: 16px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 2px; } .panel-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .panel-close { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink-faint); background: none; border: 0; border-radius: 50%; cursor: pointer; } .panel-close:hover { color: var(--ink); background: rgb(255 255 255 / 0.12); } .panel-body { padding: 8px 16px 16px; overflow-y: auto; } .panel--right { left: auto; right: 22px; transform-origin: bottom right; } /* ---------- Tasks ---------- */ .task-section + .task-section { margin-top: 18px; } .task-heading { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--glass-line); } .task-list { margin-bottom: 10px; } .task-empty { font-size: 13px; color: var(--ink-faint); padding: 2px 0 8px; } .task-hint { font-size: 12px; color: var(--ink-faint); padding-top: 14px; } /* Four inline action buttons took 121px of a 313px row — more than the task title beside them at 107px. One menu button costs 24px and hands the width back to the thing you actually read. */ .task-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 3px 0; min-height: 34px; } .task-item--later { grid-template-columns: minmax(0, 1fr) auto; } .task-toggle { flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 1.5px solid var(--ink-faint); border-radius: 50%; background: none; cursor: pointer; position: relative; } /* The dot stays 15px; the target around it is 24px, which fits inside the 10px gap to the label without reaching the label's own box. */ .task-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .task-item.is-done .task-toggle { background: var(--ink); border-color: var(--ink); } .task-text { flex: 1; min-width: 0; font: inherit; font-size: 14px; text-align: left; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-item.is-current .task-text { color: var(--ink); font-weight: 600; } .task-item.is-done .task-text { text-decoration: line-through; color: var(--ink-faint); } .task-text[contenteditable] { white-space: normal; cursor: text; } .task-est { flex: none; display: grid; place-items: center; min-height: 24px; font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink-soft); background: rgb(255 255 255 / 0.08); border: 1px solid var(--glass-line); border-radius: var(--pill); padding: 0 8px; cursor: pointer; } .task-est:hover { color: var(--ink); border-color: var(--ink-faint); } /* No estimate yet: invisible until hover, so rows stay quiet. Touch devices have no hover, so it stays visible there. */ .task-est.is-off { color: var(--ink-faint); background: none; border-color: transparent; opacity: 0; } .task-item:hover .task-est.is-off, .task-est.is-off:focus-visible { opacity: 1; } @media (hover: none) { .task-est.is-off { opacity: 0.8; } } .task-more { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--ink-faint); background: none; border: 0; border-radius: 6px; cursor: pointer; } .task-more:hover, .task-more[aria-expanded="true"] { color: var(--ink); background: rgb(255 255 255 / 0.10); } /* Top layer, so it clears the panel's own overflow: auto instead of being clipped by it. Width is fixed here because tasks.js positions from it. */ .task-menu { position: fixed; width: 172px; margin: 0; padding: 4px; color: var(--ink); background: rgb(18 12 34 / 0.96); border: 1px solid var(--glass-line); border-radius: 10px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); } .task-menu:popover-open { animation: menuIn 0.12s var(--swift); } @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .task-menu button { display: block; width: 100%; min-height: 30px; font: inherit; font-size: 13px; text-align: start; color: var(--ink-soft); background: none; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; } .task-menu button:hover:not(:disabled) { color: var(--ink); background: rgb(255 255 255 / 0.10); } .task-menu button:disabled { opacity: 0.35; cursor: default; } .task-menu .is-danger { color: var(--ink-danger); } .task-menu .is-danger:hover:not(:disabled) { color: var(--ink-danger); background: rgb(255 201 209 / 0.12); } .task-menu hr { height: 1px; margin: 4px 8px; border: 0; background: var(--glass-line); } .task-input { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--glass-line); padding: 6px 0; } .task-input::placeholder { color: var(--ink-faint); } .task-input:focus { border-bottom-color: var(--ink-soft); } /* ---------- Recap ---------- */ .recap { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } .recap-lead { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .recap-time { font-size: 15px; font-weight: 600; color: var(--ink-soft); } .recap-meta { font-size: 13px; color: var(--ink-soft); padding-top: 8px; } .recap-intention { font-size: 13px; color: var(--ink-faint); padding-top: 2px; } .recap-stats { font-size: 13px; color: var(--ink-soft); padding-top: 2px; } .recap-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; } .recap-foot .recap-hint { padding-top: 0; } .recap-export { font: inherit; font-size: 12px; color: var(--ink-faint); background: none; border: 0; padding: 0; cursor: pointer; } .recap-export:hover { color: var(--ink); } .week { display: flex; justify-content: space-between; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-line); } .week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; } .week-n { font-size: 11px; font-weight: 600; color: var(--ink-soft); height: 14px; } .week-label { font-size: 11px; color: var(--ink-faint); } .week-day.is-today .week-label { color: var(--ink); font-weight: 600; } .recap-hint { font-size: 12px; color: var(--ink-faint); padding-top: 14px; } /* ---------- Shortcuts overlay ---------- */ /* Full-viewport , so the card still centres the way it always did while the element supplies focus handling and Escape. The UA sheet hides a closed dialog, hence the [open] guard on display. */ .keys { position: fixed; inset: 0; z-index: 8; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: rgb(0 0 0 / 0.28); place-items: center; } .keys[open] { display: grid; } /* The tint stays on the element, at the 0.28 it always was; without this the UA's own ::backdrop stacks another 0.1 on top of it. */ .keys::backdrop { background: none; } .keys-card { min-width: 240px; padding: 18px 22px; background: rgb(18 12 34 / 0.86); border: 1px solid var(--glass-line); border-radius: 16px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); } .keys-list { display: flex; flex-direction: column; gap: 8px; } .keys-list div { display: flex; align-items: center; justify-content: space-between; gap: 28px; font-size: 13px; color: var(--ink-soft); } .keys-list kbd { font: inherit; font-weight: 600; font-size: 12px; color: var(--ink); min-width: 3.2em; } /* In the overlay the card is narrow enough that space-between reads as a pair. At settings width it opened a 20rem river between the key and its meaning, twelve times over. Here the rows flatten into one four-column grid so both halves stay adjacent and the descriptions share an axis. */ .keys-list--settings { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 14px; row-gap: 5px; max-width: none; margin-top: 0; } .keys-list--settings > div { display: contents; } .keys-list--settings kbd { justify-self: start; min-width: 0; padding: 2px 7px; font-size: 12px; line-height: 1.45; background: rgb(255 255 255 / 0.08); border: 1px solid var(--glass-line); border-radius: 5px; } .keys-list--settings span { align-self: center; font-size: 13px; color: var(--ink-soft); } /* Odd children are always the left-hand pair, so this widens the gutter between the two columns without touching the gap inside a pair. */ .keys-list--settings > div:nth-child(odd) span { padding-right: 20px; } /* ---------- Notes ---------- */ .notes-area { width: 100%; min-height: 150px; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); background: rgb(255 255 255 / 0.06); border: 1px solid transparent; border-radius: 10px; padding: 11px; resize: vertical; } .notes-area::placeholder { color: var(--ink-faint); } .notes-area:focus { border-color: var(--glass-line); } .notes-status { display: block; font-size: 11px; color: var(--ink-faint); min-height: 15px; padding-top: 4px; } /* ---------- Listen ---------- */ .stations { display: flex; flex-wrap: wrap; gap: 7px; } .station-empty { font-size: 13px; color: var(--ink-faint); } .station { font: inherit; font-size: 13px; color: var(--ink-soft); background: rgb(255 255 255 / 0.10); border: 1px solid transparent; border-radius: var(--pill); padding: 6px 13px; cursor: pointer; } .station::before { content: '▸ '; color: var(--ink-faint); } .station:hover { color: var(--ink); background: rgb(255 255 255 / 0.18); } .station.is-playing { color: var(--ink-invert); background: rgb(255 255 255 / 0.92); } .station.is-playing::before { content: '■ '; color: var(--ink-invert); } /* ---------- Player ---------- */ .player { position: fixed; right: 22px; bottom: 74px; /* Narrow enough to clear the centred favorites row on a ~1280px window, which the wider version used to clip. */ width: min(320px, calc(100vw - 44px)); background: rgb(18 12 34 / 0.80); border: 1px solid var(--glass-line); border-radius: 16px; padding: 8px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); } .player-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .player-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-hide, .player-stop { font: inherit; font-size: 12px; color: var(--ink-soft); background: none; border: 0; padding: 2px 4px; cursor: pointer; } .player-hide:hover, .player-stop:hover { color: var(--ink); } .player-stage { position: relative; } .player-frame { width: 100%; border: 0; border-radius: 8px; display: block; } .player-frame.is-video { aspect-ratio: 16 / 9; height: auto; } .player-note { font-size: 13px; color: var(--ink-soft); padding: 4px 6px 8px; } /* Hide must not use display:none or [hidden] — YouTube (and sometimes Spotify) pause the embed the moment the iframe leaves the viewport or the layout. The chrome collapses; the iframe stays in the corner at full size, invisible, still intersecting the page so audio keeps going. */ .player.is-tucked { width: auto; max-width: min(320px, calc(100vw - 44px)); padding: 6px 10px; } .player.is-tucked .player-bar { margin-bottom: 0; } .player.is-tucked .player-stage { position: fixed; right: 0; bottom: 0; width: 280px; height: 160px; opacity: 0; pointer-events: none; overflow: hidden; } .player.is-tucked .player-frame, .player.is-tucked .player-frame.is-video, .player.is-tucked .yt-video-wrap { width: 280px; height: 160px; aspect-ratio: auto; } /* ---------- Spotify Connect player ---------- */ /* Our own DOM rather than Spotify's iframe, which is the whole point: these controls cannot exist inside a cross-origin embed. */ .sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sp-art { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; background: rgb(255 255 255 / 0.08); } .sp-art:not([src]) { visibility: hidden; } .sp-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sp-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-artist { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-transport { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; } .sp-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--ink-soft); background: none; border: 0; border-radius: var(--pill); cursor: pointer; } .sp-btn:hover:not(:disabled) { color: var(--ink); background: var(--glass-hover); } .sp-btn:disabled { opacity: 0.3; cursor: default; } .sp-btn.is-on { color: var(--ink); } /* The only marker distinguishing repeat-one from repeat-all at this icon size. */ .sp-btn.is-on[data-mode="track"]::after { content: '1'; position: absolute; right: 4px; bottom: 2px; font-size: 9px; font-weight: 700; line-height: 1; } .sp-btn--play { width: 40px; height: 40px; color: var(--ink-invert); background: var(--ink); } .sp-btn--play:hover:not(:disabled) { color: var(--ink-invert); background: #fff; } .sp-btn--quiet { width: 28px; height: 28px; flex: none; } .sp-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-top: 2px; } .sp-volume { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-faint); } .sp-volume svg { flex: none; } .sp-seek, .sp-vol { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 0; border-radius: var(--pill); cursor: pointer; /* --fill is set from JS; native range inputs have no elapsed portion. */ background: linear-gradient( to right, var(--ink) var(--fill, 0%), rgb(255 255 255 / 0.20) var(--fill, 0%) ); } .sp-seek::-webkit-slider-thumb, .sp-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 0; } .sp-seek::-moz-range-thumb, .sp-vol::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 0; } .player-stage.is-idle { opacity: 0.55; } .player-connect { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 0; cursor: pointer; } .player-connect:disabled { opacity: 0.4; cursor: default; } /* Popped out, the player is the whole window, so the fixed corner placement and the entry animation both have to go. */ .pip-body { margin: 0; background: #160f2b; } .player.is-pip { position: static; width: auto; border: 0; border-radius: 0; box-shadow: none; animation: none; } /* ---------- YouTube player ---------- */ .yt-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; } .yt-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } .yt-meta { display: flex; flex-direction: column; min-width: 0; margin: 8px 2px 6px; } .yt-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yt-author { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Settings ---------- */ /* One dialog, one grid. Every label sits on the --set-label axis and every control starts where that axis ends, so nine sections read as one list instead of nine stacks. Rhythm comes from a single flex gap per group rather than four competing margins. */ .ghost-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: 0; padding: 6px 8px; margin: -6px -8px; border-radius: 8px; cursor: pointer; } .ghost-btn:hover { color: var(--ink); background: rgb(255 255 255 / 0.08); } .settings { --set-label: 190px; --set-gap: 10px; --set-h: 36px; --set-field: 210px; width: min(620px, calc(100vw - 32px)); max-height: 84vh; padding: 0; color: var(--ink); background: rgb(18 12 34 / 0.94); border: 1px solid var(--glass-line); border-radius: 16px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.22) transparent; } .settings::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(3px); } .settings::-webkit-scrollbar { width: 10px; } .settings::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.18); border: 3px solid transparent; background-clip: content-box; border-radius: var(--pill); } .settings::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.3); background-clip: content-box; } .settings-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: rgb(18 12 34 / 0.96); border-bottom: 1px solid var(--glass-line); } .settings-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .settings-body { padding: 0 24px 24px; container-type: inline-size; container-name: settings; } /* ---------- Section ---------- */ .field { border: 0; padding: 0; margin: 0; } .field + .field { margin-top: 32px; } .field legend { display: block; width: 100%; padding: 0 0 8px; margin-bottom: 14px; border-bottom: 1px solid var(--glass-line); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } .field:first-of-type { margin-top: 24px; } .set-body { display: flex; flex-direction: column; gap: var(--set-gap); } .set-sub { padding-left: 14px; border-left: 1px solid var(--glass-line); margin: 2px 0; } /* ---------- Rows ---------- */ .set-row { display: grid; grid-template-columns: var(--set-label) minmax(0, 1fr); align-items: center; gap: 8px 16px; min-height: var(--set-h); } .set-row > label, .set-rowlabel { font-size: 14px; color: var(--ink-soft); line-height: 1.35; } .set-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .set-unit { font-size: 13px; color: var(--ink-faint); } /* The auth line is a note plus one button, so the label column would only hold a fragment of a sentence. It spans instead. */ .set-row--auth { grid-template-columns: minmax(0, 1fr) auto; } .set-row--auth .set-note { margin: 0; } .set-note { font-size: 13px; line-height: 1.5; color: var(--ink-faint); max-width: 62ch; text-wrap: pretty; } .set-row + .set-note, .set-toggle + .set-note { margin-top: -4px; } .set-note:empty { display: none; } /* ---------- Toggle rows ---------- */ /* The switch trails the label so every toggle in the dialog shares one right edge, and the sentence keeps the full width it needs. */ .set-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: var(--set-h); font-size: 14px; color: var(--ink-soft); line-height: 1.35; cursor: pointer; } .set-toggle:hover { color: var(--ink); } /* A real checkbox with its pixels redrawn: role, state, keyboard and the :checked selector all stay native. The knob is a background layer rather than ::after, because generated content on a replaced element is not dependable — and background-position animates just as well. */ .switch { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 22px; margin: 0; border-radius: var(--pill); border: 1px solid var(--glass-line); background-color: rgb(0 0 0 / 0.35); background-image: radial-gradient(circle, var(--ink-soft) 49%, transparent 51%); background-repeat: no-repeat; background-size: 14px 14px; background-position: 3px center; cursor: pointer; transition: background-color 0.18s ease, background-position 0.2s var(--swift), border-color 0.18s ease; } .switch:hover { border-color: var(--ink-faint); } .switch:checked { background-color: rgb(255 255 255 / 0.92); background-image: radial-gradient(circle, var(--ink-invert) 49%, transparent 51%); background-position: 21px center; } @media (forced-colors: active) { .switch { appearance: auto; width: auto; height: auto; background-image: none; } } /* ---------- Fields ---------- */ .field input[type="text"], .field input[type="url"], .field input[type="number"], .field select { font: inherit; font-size: 14px; height: var(--set-h); color: var(--ink); background: rgb(255 255 255 / 0.08); border: 1px solid var(--glass-line); border-radius: 8px; padding: 0 10px; min-width: 0; } .field select { appearance: none; -webkit-appearance: none; width: var(--set-field); padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; } .field select:hover { background-color: rgb(255 255 255 / 0.12); } @media (forced-colors: active) { .field select { appearance: auto; background-image: none; padding-right: 10px; } } /* Fills flatten in high contrast, so "current" survives as outline instead: the selected tab, active mode, and active dock button are otherwise identical to their siblings. Dots keep their filled/ring split in system colours; range inputs fall back to native sliders like .switch does. */ @media (forced-colors: active) { .stage-tab[aria-selected="true"], .mode.is-active, .dock-btn.is-active, .dock-count.is-active { outline: 2px solid ButtonText; outline-offset: 2px; } .dot.is-done { background: ButtonText; } .sp-seek, .sp-vol { appearance: auto; } } /* Sized to its content: three digits, not a text field. */ .set-num { width: 76px; } .set-control > input[type="url"], .set-control > input[type="text"] { width: var(--set-field); flex: none; } /* Not --ink-invert: this is the surface behind the ink, the same value in the opposite role. Native option popups take little else. */ .field select option { background: #1b1035; color: var(--ink); } .field input:focus, .field select:focus { border-color: var(--ink-soft); } /* One button weight inside the dialog. The pill .btn is the timer's primary control and outranked everything here; this matches the field it sits beside, down to the radius. */ .set-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; height: var(--set-h); padding: 0 12px; color: var(--ink-soft); background: rgb(255 255 255 / 0.08); border: 1px solid var(--glass-line); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .set-btn:hover { color: var(--ink); background: rgb(255 255 255 / 0.14); } .set-btn:active { background: rgb(255 255 255 / 0.2); } .set-btn:disabled { opacity: 0.45; cursor: default; } .set-btn svg { flex: none; } .results { display: flex; flex-direction: column; gap: 2px; } .result { font: inherit; font-size: 13px; text-align: start; color: var(--ink-soft); background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; } .result:hover { color: var(--ink); background: rgb(255 255 255 / 0.10); } /* ---------- Row editors ---------- */ .editor { display: flex; flex-direction: column; gap: 8px; } .edit-row { display: grid; grid-template-columns: 1fr 1.7fr auto; gap: 8px; align-items: center; } .edit-row input { font: inherit; font-size: 13px; height: var(--set-h); color: var(--ink); background: rgb(255 255 255 / 0.08); border: 1px solid var(--glass-line); border-radius: 8px; padding: 0 10px; min-width: 0; } .edit-row input:focus { border-color: var(--ink-soft); } .edit-row.is-invalid input:nth-child(2) { border-color: var(--ink-danger); } .edit-error { grid-column: 2 / 3; font-size: 12px; color: var(--ink-danger); } .edit-remove { display: grid; place-items: center; font: inherit; font-size: 12px; color: var(--ink-faint); background: none; border: 0; cursor: pointer; min-width: 24px; min-height: 24px; padding: 4px; border-radius: 6px; } .edit-remove:hover { color: var(--ink); background: rgb(255 255 255 / 0.10); } .edit-add { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: 1px dashed var(--glass-line); border-radius: 8px; height: var(--set-h); padding: 0 14px; cursor: pointer; } .edit-add:hover { color: var(--ink); border-color: var(--ink-faint); background: rgb(255 255 255 / 0.05); } .settings-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--glass-line); } /* Narrow dialog: the label axis costs more than it buys, so rows stack and every control takes the full width it can get. */ @container settings (max-width: 440px) { .set-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .set-row--auth { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .field select, .set-control > input[type="url"], .set-control > input[type="text"] { width: 100%; } .set-num { width: 76px; } .edit-row { grid-template-columns: 1fr auto; } .edit-row input:nth-child(2) { grid-column: 1 / -1; } .edit-error { grid-column: 1 / -1; } .keys-list--settings { grid-template-columns: auto minmax(0, 1fr); } .keys-list--settings > div:nth-child(odd) span { padding-right: 0; } } /* ---------- Login ---------- */ .login { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); } .login-card h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; } .login-card input { font: inherit; font-size: 15px; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--pill); padding: 12px 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .login-card input::placeholder { color: var(--ink-faint); } .login-card input:focus { border-color: rgb(255 255 255 / 0.55); } .login-card .btn--primary { width: 100%; } .login-err { font-size: 12px; color: var(--ink-danger); min-height: 32px; line-height: 1.4; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .app { padding: 18px; } .readout { font-size: clamp(64px, 22vw, 110px); } .stage-view:not([hidden]) { gap: 14px; } .stage-tabs { top: 42px; } .stage-tab { font-size: 13px; padding: 5px 12px; } .dock--left { left: 14px; } .dock--right { right: 14px; } .panel, .panel--right { left: 14px; right: 14px; bottom: 78px; width: auto; } .search-engine { display: none; } .search-input { padding: 12px 20px; } /* iOS Safari zooms the whole page when a focused field renders below 16px, which throws the fixed docks and the panel off mid-typing. The desktop density above is deliberate, so the lift only applies down here. */ .field input, .field select, .edit-row input, .task-input, .notes-area, .search-input, .login-card input { font-size: 16px; } } /* Narrow phones stack the docks only while a sync state is visible: side by side, "Sync failed" plus the session count collides with the left dock below ~430px, but slim docks fit and stay bottom-aligned. The status hides itself when idle, so :has tracks exactly the wide case. */ @media (max-width: 480px) { body:has(#sync-status:not([hidden])) .dock--right { bottom: 70px; } body:has(#sync-status:not([hidden])) .panel, body:has(#sync-status:not([hidden])) .panel--right { bottom: 122px; } body:has(#sync-status:not([hidden])) .player { bottom: 122px; } .sync-status { max-width: 68px; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 380px) { .dock--right { bottom: 70px; } .panel, .panel--right { bottom: 122px; } .player { bottom: 122px; } } /* Short windows shrink the timer rather than dropping search and favorites. Those are the reason the page is worth opening on a new tab, so they're the last thing that should go. */ @media (max-height: 780px) { .stage-north { gap: 11px; } .readout { font-size: clamp(64px, 11vw, 124px); } .stage-view:not([hidden]) { gap: 14px; } } @media (max-height: 620px) { .app { padding: 16px 22px; } .stage-intention { font-size: 13px; } .stage-task { font-size: 19px; } .stage-task.is-empty { font-size: 16px; } .readout { font-size: clamp(52px, 9vw, 92px); } .mode { padding: 7px 16px; font-size: 13px; } .stage-view:not([hidden]) { gap: 10px; } .jump { gap: 10px; } } /* Below this the overlay stops being safe. Measured with the worst case — a two-line intention and a long task title — the gap between the topbar and the timer holds down to about 440px and goes negative shortly after, so this is where the topbar needs its own row back. */ @media (max-height: 440px) { .app { grid-template-rows: auto 1fr; } .app > .topbar { grid-area: auto; align-self: auto; } .app > .stage { grid-area: auto; } .stage-tabs { top: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ Motion Springy rather than smooth: overshoot is what makes a press feel physical. Everything here is either user-triggered or a one-shot celebration — the only thing that loops is the colon, and only while the timer runs. The prefers-reduced-motion block above switches all of it off (it uses !important, so its position in the file does not matter). ══════════════════════════════════════════════════════════════════════════ */ :root { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --swift: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Presses and hovers ---------- */ .btn, .mode, .fav, .dock-btn, .dock-count, .icon-btn, .station, .edit-add, .result, .stage-tab, .set-btn, .ghost-btn, .switch { transition: transform 0.22s var(--spring), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.22s var(--spring); } .btn:active, .mode:active, .station:active, .edit-add:active { transform: scale(0.94); } .set-btn:active { transform: scale(0.97); } .dock-btn:active, .icon-btn:active { transform: scale(0.88); } .fav:active { transform: scale(0.96); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.28); } .mode:hover:not(.is-active) { transform: translateY(-2px); } .fav:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.22); } .dock-btn:hover, .icon-btn:hover { transform: translateY(-2px) scale(1.06); } .dock-count:hover { transform: translateY(-1px); } .stage-intention:hover { transform: scale(1.02); } .stage-tab:hover { transform: translateY(-1px); } .stage-intention { transition: transform 0.22s var(--spring), background 0.18s ease; } .station:hover { transform: translateY(-2px); } .stage-task:hover { transform: scale(1.02); } .stage-task { transition: transform 0.22s var(--spring), background 0.18s ease; } /* The active pill lands with a little bounce. */ .mode.is-active { animation: pillIn 0.34s var(--spring); } @keyframes pillIn { from { transform: scale(0.86); } to { transform: scale(1); } } /* ---------- Readout ---------- */ .readout .colon { transition: opacity 0.15s ease; } /* A heartbeat while it runs — the one continuous motion on the page. */ .readout.is-running .colon { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } } /* Setting off: a confident kick. */ .readout.is-kick { animation: kick 0.5s var(--spring); } @keyframes kick { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } } /* Switching mode: the numbers swap in from below. */ .readout.is-swap { animation: swap 0.34s var(--swift); } @keyframes swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Finishing: three happy pulses. */ .readout.is-finished { animation: finished 1.1s var(--spring); } @keyframes finished { 0% { transform: scale(1); filter: brightness(1); } 18% { transform: scale(1.11); filter: brightness(1.35); } 36% { transform: scale(1); filter: brightness(1); } 54% { transform: scale(1.07); filter: brightness(1.25); } 72% { transform: scale(1); filter: brightness(1); } 86% { transform: scale(1.03); } 100% { transform: scale(1); filter: brightness(1); } } .timer-reset.is-spin svg { animation: spin 0.6s var(--swift); } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } } /* ---------- Cycle dots ---------- */ .dot { transition: background 0.3s ease, transform 0.3s var(--spring); } .dot.is-new { animation: dotPop 0.55s var(--spring); } @keyframes dotPop { 0% { transform: scale(0.3); } 55% { transform: scale(1.7); } 100% { transform: scale(1); } } /* ---------- Panels ---------- */ .panel { animation: panelIn 0.3s var(--swift); transform-origin: bottom left; } .panel--right { animation-name: panelInRight; transform-origin: bottom right; } @keyframes panelInRight { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .keys-card { animation: dialogIn 0.22s var(--swift); } @keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .player { animation: panelIn 0.3s var(--swift); transform-origin: bottom right; } .settings[open] { animation: dialogIn 0.28s var(--swift); } @keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* No load entrance on .stage. This page is a new tab, glanced at for half a second: translateY(10px) with fill-mode backwards held the whole column 10px below centre for the entire view, which is why the timer looked low. */ /* ---------- Confetti ---------- */ .confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; } .confetti i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; border-radius: 2px; opacity: 0; animation: confetti 1.4s var(--swift) var(--delay) forwards; } @keyframes confetti { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.4); } 20% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.5), calc(-50% + var(--dy) * 0.18)) rotate(calc(var(--spin) * 0.35)) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(0.85); } } /* Invisible target expansion keeps compact controls comfortable without changing their drawn size or taking space in the layout. */ .dock-btn, .dock-count, .panel-close, .icon-btn, .task-more, .mode, .stage-tab, .sp-btn { position: relative; } .dock-btn::after, .dock-count::after, .panel-close::after, .icon-btn::after, .task-more::after, .mode::after, .stage-tab::after, .sp-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .timer-locality { margin: 8px 0 0; color: var(--ink-faint); font-size: 11px; line-height: 1.2; }