/* Standalone activities: the same paper, ink, type and quiet actions as Now. */
:root { color-scheme: light; --paper:#f4f0ec; --ink:#111; color:var(--ink); background:var(--paper); font-family:"neue-haas-grotesk-text",sans-serif; font-weight:400; }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none!important; }
button, textarea, a { font:inherit; color:inherit; }
button, .actions a { border:0; border-radius:0; background:transparent; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { min-height:44px; padding:10px; }
button:disabled { opacity:.3; cursor:default; }
button:focus-visible, a:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
::selection { background:var(--ink); color:var(--paper); }
.actions { position:fixed; z-index:2; bottom:max(8px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:12px; line-height:1.4; }
.actions a { display:inline-flex; align-items:center; min-height:44px; padding:10px; font-size:12px; font-weight:400; line-height:1.4; }
.feedback { position:fixed; z-index:2; left:16px; right:16px; bottom:64px; margin:0; text-align:center; font-size:12px; line-height:1.5; pointer-events:none; }
.writing { width:min(100%, 42rem); margin:0 auto; padding:24svh 24px 116px; }
#writing { display:block; width:100%; min-height:44svh; padding:0; border:0; outline:0; resize:none; overflow:hidden; background:transparent; font-size:18px; line-height:1.65; border-radius:0; }
#writing::placeholder { color:var(--ink); opacity:.35; }
.writing-page .actions { background:var(--paper); }
.timer { min-height:100svh; display:grid; place-items:center; padding:90px 16px; }
.timer-content { position:relative; text-align:center; }
#countdown { margin:0; font-size:clamp(64px, min(28vw, 24svh), 180px); line-height:1.1; font-variant-numeric:tabular-nums; white-space:pre; }
.timer-controls { position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); }
.timer-duration-slot { min-height:44px; }
.durations { display:flex; justify-content:center; }
.durations button { min-width:44px; padding:10px 8px; font-size:14px; opacity:.4; }
.durations button[aria-pressed="true"] { opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.session-controls { font-size:14px; }
.actions button[aria-pressed="true"] { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.timer-page .actions, .session-controls { transition:opacity 1.4s ease; }
.timer-page[data-quiet] .actions, .timer-page[data-quiet] .session-controls { opacity:.18; }
.timer-page .actions:has(:focus-visible), .timer-page .session-controls:has(:focus-visible), .timer-page .actions:hover, .timer-page .session-controls:hover { opacity:1; }
@media(max-height:500px) { .timer { padding:12px 16px; } .timer-controls { top:calc(100% + 8px); } }
@media(max-width:480px) { .writing { padding-left:24px; padding-right:24px; } #writing { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }

:root[data-atmosphere] .writing-page .actions { background:transparent; }
.writing-page .actions { width:max-content; max-width:calc(100% - 16px); flex-wrap:nowrap; }
@media(max-width:480px) {
  .writing-page .actions :is(button,a) { padding-inline:7px; }
}