/* A quiet surface, precise rules, and numerals with room to breathe. */
@font-face {
  font-family:"37 Digits";
  src:url("fonts/37-digits.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root {
  color-scheme:light;
  --paper:#f3f4f4;
  --ink:#171919;
  --muted:#6b7070;
  --line:#d5d9d9;
  --soft:#e5e8e8;
  --progress-tint:0;
  --pad:clamp(24px,4.6vw,76px);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#181b1c;
  --ink:#ecefef;
  --muted:#a0a7a7;
  --line:#3b4243;
  --soft:#2a3031;
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --paper:#181b1c;
    --ink:#ecefef;
    --muted:#a0a7a7;
    --line:#3b4243;
    --soft:#2a3031;
  }
}

* {
  box-sizing:border-box;
}

[hidden] {
  display:none!important;
}

html {
  min-width:280px;
  min-height:100%;
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

body {
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  transition:background-color .25s,color .25s;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  background:#8b9aa0;
  opacity:var(--progress-tint);
  pointer-events:none;
  z-index:-0;
}

body>* {
  position:relative;
}

button,input,select,textarea,a {
  -webkit-tap-highlight-color:transparent;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  touch-action:manipulation;
}

button {
  cursor:pointer;
  color:inherit;
}

button {
  border:0;
}

button:disabled {
  cursor:default;
}

a {
  color:inherit;
}

button, input, a {
  outline-offset:6px;
}

:focus-visible {
  outline:2px solid var(--ink);
}

button:focus:not(:focus-visible),[tabindex="-1"]:focus {
  outline:none;
}

button svg,svg.headphones-icon {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.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;
}

.site-header {
  display:flex;
  align-items:center;
  gap:38px;
  padding:24px var(--pad);
  min-height:100px;
}

.wordmark {
  font-family:"37 Digits","Arial Narrow",sans-serif;
  font-size:36px;
  font-weight:400;
  letter-spacing:0;
  text-decoration:none;
  line-height:1;
  min-height:44px;
  display:flex;
  align-items:center;
  padding-right:5px;
}

.wordmark-period {
  margin-left:2px;
}

.eyebrow {
  font-size:11px;
  font-weight:500;
  letter-spacing:1.7px;
  line-height:1.5;
}

.header-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.text-button,.icon-button,.quiet-button {
  min-height:44px;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  padding:10px 0;
}

.text-button:hover,.quiet-button:hover {
  opacity:.6;
}

.icon-button {
  width:44px;
  border-radius:50%;
  padding:10px;
}

.icon-button:hover {
  background:var(--soft);
}

#theme-button,#fullscreen-button {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  height:44px;
  padding:0;
  width:44px;
}

#theme-button svg,#fullscreen-button svg { display:block; width:20px; height:20px; }

:root:fullscreen { overflow:auto; background:var(--paper); }
:root:-webkit-full-screen { overflow:auto; background:var(--paper); }

.text-button svg {
  width:18px;
  height:18px;
}

.quiet-button {
  color:var(--muted);
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:5px;
}

main {
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
}

.focus-shell {
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Session tools have their own space in the first screen. Long content can scroll. */
body:is([data-state="active"],[data-state="reveal"]) .focus-shell {
  height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
body:is([data-state="active"],[data-state="reveal"]) .focus-shell>main {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}
.focus-shell>.site-header,.focus-shell>.site-footer { flex-shrink:0; }
body:is([data-state="active"],[data-state="reveal"]) .session-view { flex:1 0 auto; }

.prepare-view {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:7vw;
  width:100%;
  max-width:1440px;
  margin:auto;
  padding:50px var(--pad) 80px;
  min-height:640px;
}

.brand-display {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:0 0 0 4.1vw;
}

.condensed {
  font-family:Impact,"Arial Narrow","Avenir Next Condensed","Helvetica Neue",sans-serif;
  font-weight:900;
  font-stretch:condensed;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.055em;
  user-select:none;
  -webkit-user-select:none;
}

.brand-number {
  display:inline-grid;
  grid-template-columns:repeat(2, 1fr);
  width:2ch;
  font-size:clamp(250px,32vw,470px);
  line-height:.96;
  margin-left:-8px;
  transform:scaleX(.91);
  transform-origin:left center;
  letter-spacing:-.06em;
}

.prepare-form {
  width:100%;
  max-width:430px;
  justify-self:start;
}

h1 {
  font-size:clamp(36px,4.3vw,62px);
  line-height:1.06;
  letter-spacing:-2.8px;
  font-weight:500;
  margin:0;
}

h2 {
  font-size:30px;
  line-height:1.15;
  letter-spacing:-1px;
  font-weight:500;
}

#draw-button { width:100%; }
.time-start-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.time-start-options .primary-button { padding:15px 13px; gap:6px; min-width:0; }
.time-start-options svg { width:16px; height:16px; flex-shrink:0; }
.prepare-preferences { display:flex; flex-direction:column; gap:3px; margin:28px 0 0; }
select { color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:4px; min-height:44px; padding:8px 28px 8px 10px; font-size:14px; max-width:100%; }
.prepare-preferences+.headphones-control { margin-top:6px; }

.account-features { position:relative; margin-top:12px; text-align:center; }
.account-features-trigger { background:transparent; color:var(--muted); font-size:12px; line-height:1.5; min-height:44px; padding:10px 4px; text-decoration:underline dotted; text-underline-offset:5px; text-decoration-thickness:1px; }
.account-features-panel { position:absolute; z-index:30; bottom:calc(100% - 1px); left:50%; transform:translateX(-50%); width:min(360px,100%); padding:23px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:0 12px 44px #00000017; text-align:left; }
.account-features:not(.is-touch) .account-features-panel { max-height:var(--feature-space,calc(100svh - 24px)); overflow-y:auto; }
.account-features-panel h2 { font-size:18px; letter-spacing:-.4px; font-weight:500; margin:0 0 20px; }
.account-features-panel dl { margin:0 0 20px; }
.account-features-panel dt { font-size:13px; font-weight:600; margin-top:16px; }
.account-features-panel dd { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.account-features-panel .primary-button { width:100%; min-height:48px; font-size:13px; padding:12px 14px; gap:12px; }
#account-features-close { position:absolute; top:8px; right:8px; }
.account-features.is-touch .account-features-panel { position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom)); transform:none; width:auto; max-width:440px; margin-inline:auto; max-height:calc(100svh - 24px); overflow-y:auto; padding-top:28px; box-shadow:0 12px 70px #00000030; }
.account-features.is-touch h2 { margin-right:28px; }
@media(max-width:360px) { .time-start-options { gap:6px; } .time-start-options .primary-button { padding-inline:10px; font-size:13px; } }

.task-field {
  position:relative;
  margin-top:0;
  border-bottom:1px solid var(--ink);
}

.task-field input {
  width:100%;
  min-height:58px;
  border:0;
  background:transparent;
  color:var(--ink);
  border-radius:0;
  font-size:20px;
  letter-spacing:-.5px;
  padding:12px 24px 12px 0;
  outline-offset:4px;
}

.task-field input::placeholder {
  color:var(--muted);
  opacity:.75;
}

.input-mark {
  position:absolute;
  right:0;
  bottom:18px;
  color:var(--muted);
  font-size:18px;
  pointer-events:none;
}

.headphones-control {
  margin-top:24px;
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  font-size:14px;
  cursor:pointer;
  margin-bottom:20px;
}

.headphones-control input {
  position:absolute;
  opacity:0;
  width:24px;
  height:24px;
  left:0;
  margin:0;
}

.checkbox-art {
  width:21px;
  height:21px;
  border:1px solid var(--line);
  border-radius:3px;
  display:grid;
  place-items:center;
  background:transparent;
  transition:background .15s;
}

.checkbox-art svg {
  fill:none;
  stroke:var(--paper);
  stroke-width:1.8;
  width:17px;
  height:17px;
  opacity:0;
}

.headphones-control input:checked+.checkbox-art {
  background:var(--ink);
  border-color:var(--ink);
}

.headphones-control input:checked+.checkbox-art svg {
  opacity:1;
}

.headphones-control input:focus-visible+.checkbox-art {
  outline:2px solid var(--ink);
  outline-offset:5px;
}

.headphones-icon {
  margin-left:auto;
  color:var(--muted);
}

.primary-button,.secondary-button {
  min-height:57px;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 21px;
  gap:20px;
  font-size:14px;
  font-weight:500;
  transition:background .2s,transform .2s,opacity .2s;
}

.primary-button {
  background:var(--ink);
  color:var(--paper);
}

.primary-button:not(:disabled):hover {
  opacity:.84;
}

.primary-button:not(:disabled):active,.secondary-button:active {
  transform:translateY(1px);
}

.primary-button:disabled {
  background:var(--soft);
  color:var(--muted);
}

.secondary-button {
  background:transparent;
  border:1px solid var(--line);
}

.secondary-button:hover {
  background:var(--soft);
}

.site-footer {
  min-height:84px;
  margin:0 var(--pad);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
}

.session-view {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px var(--pad) 28px;
  text-align:center;
}

.timer-display {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 25px;
  user-select:none;
  -webkit-user-select:none;
  min-height:0;
  overflow:hidden;
  opacity:1;
  transition:opacity 1.2s;
}

.timer-space { position:relative; display:grid; grid-template-rows:1fr; transition:grid-template-rows 1.4s,padding 1.4s; }
body[data-time-hidden="true"] .timer-space { grid-template-rows:0fr; padding-block:35px; }
body[data-time-hidden="true"] .timer-display { opacity:0; pointer-events:none; }
.peek-time-button { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; background:transparent; color:var(--muted); font-size:13px; }
.peek-time-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
body[data-time-hidden="true"] .progress-line { opacity:0; }
body[data-time-hidden="true"] .session-task { font-size:clamp(24px,3.5vw,42px); line-height:1.3; letter-spacing:-.7px; }
.next-step { text-align:left; max-width:380px; margin:26px auto 18px; }
.next-step label { display:block; font-size:16px; margin-bottom:5px; }
.next-step input { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); min-height:48px; padding:10px 0; font-size:16px; }
.next-step input::placeholder { color:var(--muted); }
.next-step p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
body.has-next-step:not([data-time-hidden="true"]) .timer-number { font-size:clamp(190px,min(46vw,42svh),600px); }

.timer-number {
  position:relative;
  display:inline-grid;
  grid-template-columns:repeat(2, 1fr);
  width:2ch;
  text-align:center;
  font-size:clamp(240px,min(51vw,59svh),800px);
  line-height:.96;
  transform:scaleX(.88);
  margin-left:-.03em;
  letter-spacing:-.055em;
  padding:0;
  background:transparent;
}

.digit-window {
  position:relative;
  height:1em;
  overflow:hidden;
}

.digit-track {
  position:absolute;
  inset:0 0 auto;
  display:flex;
  flex-direction:column;
  height:2em;
  transform:translateY(-50%);
}

.wheel-digit {
  display:block;
  flex:0 0 1em;
  height:1em;
  line-height:1;
  text-align:center;
}

.timer-caption {
  display:flex;
  align-items:center;
  min-height:44px;
  gap:0;
}

.timer-unit {
  font-size:12px;
  letter-spacing:2px;
}

#edit-time-button { width:36px; min-height:44px; padding:8px; color:var(--muted); }
#edit-time-button svg { width:14px; height:14px; }
.timer-number:enabled:hover + .timer-caption #edit-time-button { color:var(--ink); }
body[data-state="active"] .timer-number:focus-visible { border-radius:4px; }

.session-bottom {
  margin-top:32px;
  max-width:580px;
  width:100%;
}

.session-bottom>.eyebrow {
  font-size:10px;
  color:var(--muted);
  margin:0 0 12px;
}

.session-task {
  font-size:18px;
  line-height:1.5;
  margin:0 auto 12px;
  overflow-wrap:anywhere;
  max-width:520px;
}

#end-button {
  font-size:12px;
}

.progress-line {
  position:fixed;
  z-index:5;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none;
  transition:transform 1s linear;
}

body[data-state="reveal"] .timer-display {
  animation:reveal 1.5s cubic-bezier(.2,.8,.2,1) both;
}

body[data-state="reveal"] .session-bottom,body[data-state="reveal"] #sound-control {
  visibility:hidden;
}

body[data-state="complete"] .timer-number {
  font-size:clamp(220px,min(43vw,46svh),620px);
}

body[data-state="complete"] .timer-unit {
  white-space:nowrap;
}

body[data-state="complete"] .timer-display {
  display:block;
  padding-bottom:0;
}

body[data-state="complete"] .session-bottom {
  margin-top:26px;
}

.completion-actions {
  display:flex;
  gap:12px;
  max-width:400px;
  margin:27px auto 0;
}

.completion-actions>button {
  flex:1;
}

.sound-control {
  margin-left:auto;
  position:relative;
}

#session-footer { flex-wrap:wrap; gap:8px 20px; }
#park-thought-button { font-size:13px; }
#hide-time-button { font-size:12px; margin-left:auto; }
.volume-panel select { width:100%; margin:8px 0 18px; }

.sound-control>.text-button {
  font-size:12px;
}

.volume-panel {
  position:absolute;
  right:0;
  bottom:55px;
  background:var(--paper);
  border:1px solid var(--line);
  width:300px;
  max-width:calc(100vw - 40px);
  padding:18px;
  box-shadow:0 8px 40px #0000000b;
  text-align:left;
  z-index:10;
}

.volume-panel>label {
  font-size:14px;
  display:block;
}

.volume-panel>input {
  width:100%;
  min-height:44px;
  accent-color:var(--ink);
  cursor:pointer;
  margin:8px 0 0;
}

.volume-panel p {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin:0;
}

.volume-panel .quiet-button {
  font-size:13px;
  color:var(--ink);
}

.history-view {
  width:100%;
  max-width:1000px;
  margin:30px auto 70px;
  padding:0 var(--pad);
}

.history-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:55px;
}

.back-icon {
  transform:rotate(180deg);
}

.history-title-row {
  margin-bottom:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.history-title-row h1 {
  font-size:clamp(38px,4vw,58px);
}

.history-empty {
  border-top:1px solid var(--line);
  padding:65px 0;
  text-align:center;
}

.history-empty>svg {
  width:27px;
  height:27px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1;
}

.history-empty h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:24px 0 10px;
}

.history-list {
  list-style:none;
  padding:0;
  margin:0;
}

.history-entry {
  border-top:1px solid var(--line);
  padding:24px 0;
  display:grid;
  grid-template-columns:100px 1fr auto;
  gap:25px;
  align-items:start;
}

.history-entry time {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}

.history-entry h2 {
  font-size:17px;
  letter-spacing:-.2px;
  line-height:1.5;
  margin:0;
  overflow-wrap:anywhere;
}

.history-entry p {
  font-size:12px;
  color:var(--muted);
  margin:7px 0 0;
}

.history-duration {
  font-size:17px;
  font-weight:500;
  white-space:nowrap;
  line-height:1.5;
}

.history-duration span {
  font-size:10px;
  color:var(--muted);
  letter-spacing:1px;
  margin-left:5px;
}

dialog {
  max-width:min(440px,calc(100% - 40px));
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  padding:32px;
}

dialog::backdrop {
  background:#11191970;
  backdrop-filter:blur(4px);
}

dialog h2 {
  margin:0 0 16px;
}

dialog p:not(.eyebrow) {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

.dialog-actions {
  display:flex;
  gap:12px;
  margin-top:27px;
}

.dialog-actions button {
  flex:1;
  justify-content:center;
  padding:14px;
  white-space:nowrap;
}

#time-dialog { width:340px; }
#time-form label { display:block; font-size:14px; color:var(--muted); }
#time-input {
  display:block;
  width:100%;
  min-width:0;
  margin:14px 0 0;
  padding:8px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:88px;
  line-height:1.1;
  appearance:textfield;
  -moz-appearance:textfield;
}
#time-input::-webkit-inner-spin-button,#time-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#time-error { margin-bottom:0; }

.notice {
  position:fixed;
  z-index:20;
  bottom:calc(28px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 40px);
  padding:8px 10px 8px 20px;
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  line-height:1.5;
  display:flex;
  align-items:center;
  gap:18px;
  border-radius:4px;
}

.notice .icon-button {
  flex-shrink:0;
}

.notice svg {
  width:16px;
  height:16px;
}

.noscript {
  text-align:center;
  padding:30px;
}

@keyframes reveal {
  0% {
    opacity:0;
    transform:translateY(18px);
    filter:blur(14px);
  }
  50% {
    opacity:1;
    filter:blur(0);
  }
  100% {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@media(min-width:1500px) {
  .prepare-view {
    gap:100px;
  }
  .brand-display {
    padding-left:40px;
  }
  .prepare-form {
    max-width:470px;
  }
}

@media(max-width:760px) {
  .site-header {
    min-height:86px;
    padding-top:17px;
    padding-bottom:17px;
    gap:18px;
  }
  .wordmark {
    font-size:32px;
  }
  .header-actions {
    gap:8px;
  }
  .prepare-view {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:28px;
    padding-bottom:48px;
    min-height:0;
    max-width:540px;
  }
  .brand-display {
    padding:0;
    align-items:center;
  }
  .brand-number {
    font-size:clamp(155px,38vw,235px);
    margin:0;
    line-height:.95;
    transform:scaleX(.87);
    transform-origin:center;
  }
  .prepare-form {
    max-width:none;
  }
  h1 {
    font-size:40px;
    letter-spacing:-1.8px;
    line-height:1.08;
  }
  h1 br {
    display:none;
  }
  .task-field {
    margin-top:27px;
  }
  .task-field input {
    font-size:19px;
    min-height:55px;
  }
  .headphones-control {
    margin-bottom:15px;
  }
  .site-footer {
    min-height:78px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    padding:20px 0;
  }
  .session-view {
    padding-top:32px;
    padding-bottom:25px;
    justify-content:center;
  }
  .timer-number {
    font-size:clamp(225px,88vw,610px);
    line-height:1.05;
  }
  .timer-display {
    padding:0 12px;
  }
  .timer-unit {
    font-size:10px;
    right:-2px;
    bottom:10%;
  }
  .session-bottom {
    margin-top:37px;
  }
  .session-task {
    font-size:17px;
  }
  .session-bottom>.eyebrow {
    font-size:9px;
  }
  body:not([data-state="prepare"]):not([data-state="history"]) .site-footer {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  body[data-state="complete"] .timer-number {
    font-size:clamp(225px,82vw,450px);
  }
  body[data-state="complete"] .timer-unit {
    font-size:11px;
    letter-spacing:2px;
    display:block;
    margin-top:4px;
  }
  .completion-actions {
    margin-top:28px;
  }
  .history-view {
    margin-top:16px;
    margin-bottom:40px;
  }
  .history-topline {
    margin-bottom:35px;
  }
  .history-title-row {
    flex-wrap:wrap;
    gap:8px;
  }
  .history-title-row h1 {
    font-size:39px;
  }
  .history-entry {
    grid-template-columns:1fr auto;
    gap:8px 20px;
  }
  .history-entry time {
    grid-column:1/-1;
  }
  .history-entry h2 {
    font-size:16px;
  }
  .history-empty {
    padding:50px 0;
  }
  .history-empty h2 {
    font-size:21px;
  }

}

@media(max-width:380px) {
  :root {
    --pad:20px;
  }
  .prepare-view {
    gap:28px;
    padding-top:10px;
  }
  .brand-number {
    font-size:150px;
  }
  h1 {
    font-size:35px;
  }
  .completion-actions {
    gap:8px;
  }
  .completion-actions>button {
    padding:14px;
  }
}

@media(max-height:680px) and (min-width:761px) {
  .site-header {
    min-height:80px;
  }
  .prepare-view {
    min-height:0;
    padding-top:25px;
    padding-bottom:40px;
  }
  .brand-number {
    font-size:300px;
  }
  h1 {
    font-size:45px;
  }
  .task-field {
    margin-top:25px;
  }
  .site-footer {
    min-height:65px;
  }
  .session-bottom {
    margin-top:15px;
  }
}

.wordmark {
  min-width:44px;
}

.eyebrow,.session-bottom>.eyebrow,.history-duration span {
  font-size:12px;
}

.brand-number,.timer-number {
  letter-spacing:0;
}

.prepare-form h1 br {
  display:initial;
}

body[data-state="complete"] .timer-caption {
  display:block;
  min-height:0;
  margin-top:10px;
}

@media(max-width:760px) {
  .prepare-view {
    gap:32px;
  }
}

.account-controls { position:relative; }
.account-guest { display:flex; align-items:center; gap:10px; }
.account-guest .quiet-button,.account-signup { font-size:13px; min-height:44px; padding:8px 12px; }
.account-signup { border:1px solid var(--line); border-radius:4px; background:transparent; }
.disclosure-icon { width:14px!important; height:14px!important; }
.account-menu { position:absolute; right:0; top:calc(100% + 9px); width:210px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--paper); z-index:20; box-shadow:0 8px 30px #0000000d; }
.account-menu button { display:block; width:100%; min-height:44px; padding:10px; text-align:left; background:transparent; border-radius:3px; font-size:14px; }
.account-menu button:hover { background:var(--soft); }
.account-menu #logout-button { margin-top:6px; border-top:1px solid var(--line); border-radius:0; }
.account-dialog { width:440px; max-width:calc(100% - 32px); max-height:calc(100svh - 32px); padding:28px 24px 24px; overflow-y:auto; border-radius:8px; }
.account-dialog .dialog-close { position:absolute; top:8px; right:8px; }
.account-dialog h2 { font-size:22px; font-weight:600; letter-spacing:-.6px; margin:0 42px 12px 0; }
.account-dialog .account-copy { margin:0 0 14px; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.account-dialog .account-fine { font-size:12px; line-height:1.6; color:var(--muted); margin:0 0 18px; }
.account-field { display:block; margin:0 0 16px; }
.account-field span { display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.account-field input { width:100%; min-height:46px; padding:10px 12px; border:1px solid transparent; border-radius:8px; background:var(--soft); color:var(--ink); font-size:16px; }
.account-field input:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.account-check { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.6; margin:18px 0; min-height:44px; }
.account-check input { margin:3px 0 0; accent-color:var(--ink); width:18px; height:18px; flex-shrink:0; }
.account-submit { width:100%; justify-content:center; min-height:48px; padding:13px 16px; border-radius:6px; }
.account-links { display:flex; justify-content:center; flex-wrap:wrap; gap:0 14px; margin-top:12px; }
.account-links button { min-height:44px; font-size:13px; }
.account-dialog .account-status { margin:0 0 16px; font-size:13px; line-height:1.6; }
.account-dialog .account-status.is-error { color:var(--ink); padding-left:10px; border-left:2px solid var(--ink); }
.account-settings>.quiet-button { display:block; min-height:48px; text-align:left; width:100%; border-top:1px solid var(--line); }
.account-settings details { margin-top:24px; border-top:1px solid var(--line); padding-top:8px; }
.account-settings summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--muted); font-size:13px; }
#thought-input { display:block; resize:vertical; width:100%; min-height:115px; max-height:240px; padding:13px; margin:0 0 12px; background:var(--soft); color:var(--ink); border:0; border-radius:6px; font-size:16px; line-height:1.6; }
.thought-list { margin-top:28px; }
.thought-list article { border-top:1px solid var(--line); padding:15px 0 8px; }
.thought-list article p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); margin:0; font-size:15px; line-height:1.6; }
.thought-list .quiet-button { min-height:44px; font-size:12px; }
@media(max-width:760px) {
  .site-header { align-items:flex-start; }
  .header-actions { flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 65px); }
  .account-controls { flex-basis:100%; display:flex; justify-content:flex-end; }
  .account-guest { gap:4px; }
  .account-dialog { margin:auto auto 0; width:100%; max-width:100%; max-height:calc(100svh - 12px); border-radius:12px 12px 0 0; padding:28px 24px calc(24px + env(safe-area-inset-bottom)); }
  #session-footer { column-gap:12px; }
  #park-thought-button { flex-basis:100%; justify-content:center; }
  #hide-time-button { margin-left:0; }
  body.has-next-step:not([data-time-hidden="true"]) .timer-number { font-size:clamp(170px,65vw,290px); }
}

body:is([data-state="active"],[data-state="reveal"]) .timer-number {
  font-size:clamp(140px,min(51vw,calc(100svh - 410px)),800px);
}
body.has-next-step[data-state="active"] .timer-number {
  font-size:clamp(100px,min(46vw,calc(100svh - 570px)),600px);
}
#volume-panel { max-height:calc(100svh - 180px); overflow-y:auto; }
body:is([data-state="active"],[data-state="reveal"]) .notice {
  bottom:calc(104px + env(safe-area-inset-bottom));
}

@media(max-width:760px) {
  body:is([data-state="active"],[data-state="reveal"]) .session-view { padding-block:12px; }
  body:is([data-state="active"],[data-state="reveal"]) .session-bottom { margin-top:20px; }
  body:is([data-state="active"],[data-state="reveal"]) .timer-number {
    font-size:clamp(140px,min(88vw,calc(100svh - 440px)),610px);
  }
  body.has-next-step[data-state="active"] .timer-number {
    font-size:clamp(100px,min(65vw,calc(100svh - 600px)),290px);
  }
  #session-footer { padding-block:12px; }
  body:is([data-state="active"],[data-state="reveal"]) .notice {
    bottom:calc(144px + env(safe-area-inset-bottom));
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Task examples remain separate from the editable value. */
.task-field>label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.task-example { position:absolute; left:0; right:25px; bottom:0; height:58px; display:flex; align-items:center; pointer-events:none; color:var(--muted); font-size:20px; letter-spacing:-.5px; overflow:hidden; white-space:nowrap; }
.task-example>span:first-child { overflow:hidden; text-overflow:ellipsis; }
.example-cursor { flex:0 0 1px; height:1.05em; background:currentColor; margin-left:2px; animation:example-blink 1s step-end infinite; }
.task-field:has(.task-example:not([hidden])) input::placeholder { color:transparent; }
@keyframes example-blink { 50% { opacity:0; } }
.sound-options { border:0; margin:0 0 16px; padding:0; min-width:0; }
.sound-options legend { font-size:12px; color:var(--muted); margin-bottom:12px; padding:0; }
.sound-choices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.sound-choices.guest-sounds { grid-template-columns:repeat(2,minmax(0,80px)); justify-content:center; gap:24px; }
.sound-choice { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; min-height:68px; min-width:44px; cursor:pointer; text-align:center; }
.sound-choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.sound-circle { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid #00000012; color:#454b4c; }
.sound-circle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.noise-white { background:#e8e7e1; }
.noise-brown { background:#bc9f8d; }
.noise-pink { background:#dfb7c3; }
.noise-rain { background:#becdd0; }
.noise-silent { background:var(--soft); color:var(--ink); }
.sound-name { font-size:11px; line-height:1.3; color:var(--muted); }
.sound-choice input:checked+.sound-circle { outline:1.5px solid var(--ink); outline-offset:4px; }
.sound-choice input:checked~.sound-name { color:var(--ink); }
.sound-choice input:focus-visible+.sound-circle { outline:3px solid var(--ink); outline-offset:4px; }
.sound-choice:hover .sound-circle { border-color:var(--muted); }
.history-local-note { color:var(--muted); font-size:13px; line-height:1.5; margin:-12px 0 30px; }
@media(max-width:760px) {
  .task-field { margin-top:0; }
  .task-example { font-size:19px; height:55px; }
}
@media(prefers-reduced-motion:reduce) { .example-cursor { display:none; } }

@media(max-width:300px) { .sound-choices { gap:4px; } }