:root {
  color-scheme:light dark
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:light-dark(#f7eee9,#24211d);
  color:light-dark(#30231c,#eee7dc);
  font:1rem/1.6 system-ui,sans-serif
}
#little-steps {
  --paper:light-dark(#f7eee9,#24211d);
  --ink:light-dark(#30231c,#eee7dc);
  --muted:light-dark(#69574a,#bcaf9b);
  --accent:light-dark(#866f5d,#ceb18b);
  --line:light-dark(#d7cbb9,#625342);
  --gutter:clamp(1.25rem,5vw,5rem);
  max-width:96rem;
  margin:auto
}
.screen {
  min-height:100svh;
  padding:clamp(1.25rem,3vw,2rem) var(--gutter) 1.5rem;
  display:flex;
  flex-direction:column
}
header {
  font:1.5rem/1.3 Georgia,serif
}
#stage {
  width:100%;
  max-width:76rem;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:clamp(1.25rem,4vh,3rem) auto
}
h2 {
  font:400 clamp(1.7rem,3vw,2.5rem)/1.3 Georgia,serif;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
  overflow-wrap:anywhere
}
h2:focus {
  outline:none
}
button,textarea {
  font:inherit
}
button {
  cursor:pointer;
  touch-action:manipulation;
  color:inherit
}
button:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:5px
}
.response {
  min-height:2.75rem;
  border:0;
  border-bottom:1px solid var(--muted);
  padding:.6rem 0;
  background:none;
  color:var(--ink);
  text-align:left;
  font-size:1rem
}
.enter-hint {
  font-size:.8125rem;
  color:var(--muted);
  margin:.75rem 0
}
kbd {
  font:inherit;
  color:var(--ink);
  text-transform:uppercase;
}
/* Opening follows the supplied landscape sketch;
mobile keeps its composition. */
.intro-scene {
  position:relative;
  width:100%;
  height:clamp(22rem,65svh,42rem)
}
.opening {
  position:relative;
  z-index:1;
  width:76%;
  max-width:22ch;
  font-size:clamp(1.9rem,4.5vw,4.5rem);
  line-height:1.35;
  margin:0;
  padding-top:clamp(1rem,5vh,3rem)
}
.intro-path {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}
.path-line {
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:14 21;
  opacity:.65
}
.first-prints {
  fill:var(--ink)
}
.goal-flag {
  fill:none;
  stroke:var(--accent);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.next-foot {
  position:absolute;
  left:18.5%;
  bottom:6%;
  width:4rem;
  height:4rem;
  border:0;
  padding:.4rem;
  background:none;
  color:var(--accent);
  transform:rotate(-80deg);
  transition:color .25s
}
.next-foot svg {
  width:100%;
  height:100%;
  fill:currentColor
}
.next-foot:hover,.next-foot:focus-visible {
  color:var(--ink)
}
.next-foot span {
  position:absolute;
  left:50%;
  top:100%;
  transform:rotate(80deg) translate(0,.5rem);
  font-size:.875rem;
  white-space:nowrap;
  opacity:0;
  color:var(--ink);
  pointer-events:none
}
.next-foot:hover span,.next-foot:focus-visible span {
  opacity:1
}
/* One sentence, editable action and a quiet forward response. */
.sentence {
  font:400 clamp(1.4rem,2.4vw,2.25rem)/1.7 Georgia,serif;
  margin:0
}
.duration {
  position:relative;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap
}
.duration button {
  font:inherit;
  min-width:2.75rem;
  min-height:2.75rem;
  padding:.1rem .25rem;
  border:0;
  background:none;
  color:var(--muted)
}
.duration button[aria-pressed=true] {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.25em
}
.duration[hidden],.test-duration-value[hidden],.fast-test-option[hidden] { display:none; }
.fast-test-option {
  display:flex;
  width:max-content;
  align-items:center;
  gap:.55rem;
  margin:-.65rem 0 1rem;
  color:var(--muted);
  font:500 .8rem/1.4 system-ui,sans-serif;
  cursor:pointer
}
.fast-test-option input { width:1rem;height:1rem;accent-color:var(--accent); }
.test-duration-value { color:var(--ink);text-decoration:underline;text-underline-offset:.25em; }

textarea {
  display:block;
  width:100%;
  max-width:100%;
  min-height:7rem;
  resize:vertical;
  padding:1rem 0 1.25rem;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  color:var(--ink);
  font:400 clamp(1.5rem,2.7vw,2.75rem)/1.45 Georgia,serif;
  margin-top:1.5rem
}
textarea::placeholder {
  color:var(--muted);
  opacity:.8;
  transition:opacity .45s ease
}
textarea.example-fading::placeholder {
  opacity:0
}
textarea:focus-visible {
  outline:0;
  border-bottom:2px solid var(--ink);
  padding-bottom:calc(1.25rem - 1px)
}
.reply {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem
}
.context {
  font-size:.8125rem;
  color:var(--muted);
  overflow-wrap:anywhere
}
/* Focus: fill is elapsed time, while the words remain the dominant element. */
[data-screen=focus] #stage {
  align-items:center;
  text-align:center
}
.task {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.75rem,2vw,1.5rem);
  max-width:100%
}
.task-check {
  width:2.75rem;
  height:2.75rem;
  flex:0 0 2.75rem;
  border:1px solid var(--muted);
  border-radius:.25rem;
  background:none;
  font-size:1.5rem;
  margin-top:.25rem
}
.task-check span {
  opacity:0
}
.task-check:hover span,.task-check:focus-visible span {
  opacity:1
}
.target-title {
  position:relative;
  isolation:isolate;
  max-width:28ch;
  font-size:clamp(2rem,4vw,3.75rem);
  text-align:left;
  white-space:pre-wrap;
  margin:0
}
.remaining {
  font:italic .875rem/1.6 Georgia,serif;
  color:var(--muted);
  margin:1.25rem 0 0
}
/* Confirmation is the whole screen, not a small dialog over a form. */
:is([data-screen=early],[data-screen=outcome],[data-screen=more],[data-screen=countdown]) header,:is([data-screen=early],[data-screen=outcome],[data-screen=more],[data-screen=countdown]) footer {
  display:none
}
:is([data-screen=early],[data-screen=outcome],[data-screen=more],[data-screen=countdown]) #stage {
  text-align:center;
  align-items:center
}
.answers {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem 3rem
}
.countdown {
  font-size:clamp(4rem,12vw,8rem);
  font-variant-numeric:tabular-nums
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  color:var(--muted);
  font-size:.8125rem
}

#storage-status {
  font-size:.8125rem;
  margin:0 var(--gutter)
}
#storage-status:empty {
  display:none
}
.sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
@media(max-width:35rem) {
  .intro-scene {
    height:clamp(20rem,60svh,30rem)
  }
  .opening {
    width:83%;
    font-size:clamp(1.65rem,6.8vw,2.2rem);
    padding-top:0
  }
  .next-foot {
    width:3.2rem;
    height:3.2rem;
    bottom:5%;
    left:18%
  }
  .next-foot span {
    display:none
  }
  .path-line {
    stroke-width:4
  }
  .reply {
    align-items:flex-start;
    flex-direction:column
  }
  .task-check {
    margin-top:0
  }
  .goal-flag {
    stroke-width:6
  }
  footer {
    gap:.75rem;
    font-size:.75rem
  }
}
@media(max-height:35rem) {
  #stage {
    margin-block:1rem
  }
  .intro-scene {
    height:clamp(14rem,58svh,23rem)
  }
  .opening {
    padding-top:0;
    font-size:clamp(1.6rem,4vw,2.7rem)
  }
  header {
    font-size:1.25rem
  }
  .screen {
    padding-block:1rem
  }
  .enter-hint {
    margin:.35rem 0
  }
}
@media(prefers-reduced-motion:reduce) {
  textarea::placeholder,.next-foot {
    transition:none
  }
  textarea.example-fading::placeholder {
    opacity:.8
  }
}
/* Selection reads as a choice inside the sentence, rather than a tab control. */
.duration button[aria-pressed=true] {
  color: light-dark(#866f5d, #dfbb85);
  font-weight: 700;
  text-decoration: none;
}
.duration button[aria-pressed=false] {
  color: var(--muted);
  opacity: .55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
textarea.instruction-placeholder::placeholder {
  opacity: .35;
  font-size: .7em;
  font-style: italic;
}
/* Toes point forward along the path, not back towards its starting point. */
.next-foot { transform: rotate(80deg); }
.next-foot span { transform: rotate(-80deg) translate(0, .5rem); }
/* The committed task itself is the completion action. */
.task-complete {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.task-complete .target-title { display: block; min-width: 0; }
.finish-tick {
  flex: 0 0 1.7rem;
  color: light-dark(#397342, #8dc39a);
  font: 400 clamp(1.6rem, 3vw, 2.5rem)/1 system-ui, sans-serif;
  opacity: 0;
  transition: opacity .2s;
}
.task-complete:hover .target-title,
.task-complete:focus-visible .target-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.task-complete:hover .finish-tick,
.task-complete:focus-visible .finish-tick { opacity: 1; }

[data-screen=leave] header, [data-screen=leave] footer { display: none; }
[data-screen=leave] #stage { align-items: center; text-align: center; }
@media (hover: none) {
  .finish-tick { opacity: .6; }

}

.task-complete .target-title {
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
}

/* A three-pixel progress track stays at the viewport edge. */
#little-steps::before, #little-steps::after {
  content: '';
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
}
#little-steps::before { background: light-dark(#dfd8cd, #3b3731); }
#little-steps::after {
  background: light-dark(#866f5d, #c6aa80);
  width: var(--session-progress, 0%);
  transition: width .7s linear;
}
#little-steps[data-screen=focus]::before,
#little-steps[data-screen=focus]::after { opacity: 1; }
.exit-timer {
  position: static;
  flex: 0 0 3.1rem;
  width: 3.1rem;
  min-width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: light-dark(color-mix(in srgb, var(--paper) 90%, var(--ink)), color-mix(in srgb, var(--paper) 58%, #000));
  font: 500 1.65rem/1 system-ui, sans-serif;
  line-height: 1;
  transition: color .2s, background .2s, transform .16s ease;
}
.exit-timer:hover, .exit-timer:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}


/* Programmatic screen focus must not draw a viewport-sized browser outline. */
#stage:focus { outline: none; }
.task-complete:focus-visible { outline: none; }
.task-complete:focus-visible .target-title { outline: 2px solid var(--muted); outline-offset: 8px; border-radius: 2px; }
.next-foot svg { aspect-ratio: 1; height: auto; }
/* Background trail occupies no space in the conversation layout. */
footer { position: fixed; inset: auto 0 0; height: 0; padding: 0; display: block; z-index: 2; }
#paw-trail {
  position: absolute;
  bottom: .35rem;
  left: max(.75rem, calc((100vw - 96rem) / 2 + 1rem));
  right: max(.75rem, calc((100vw - 96rem) / 2 + 1rem));
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0rem, .6vw, .75rem);
  pointer-events: none;
}
.trail-paw {
  position: relative;
  pointer-events: none;
  width: 100%;
  max-width: 7rem;
  height: clamp(3rem, 8vw, 7rem);
  padding: 0;
  justify-self: center;
  border: 0;
  background: none;
  color: var(--muted);
  pointer-events: auto;
}
.trail-paw:nth-child(even) { bottom: .7rem; }




@media (prefers-reduced-motion: reduce) {  }
[data-screen=clear] header, [data-screen=clear] footer { display: none; }
[data-screen=clear] #stage { align-items: center; text-align: center; }

/* Match the trail to the exact content container and gutters. */
#paw-trail { left: max(var(--gutter), calc((100vw - 96rem) / 2 + var(--gutter)), calc((100vw - 76rem) / 2)); right: max(var(--gutter), calc((100vw - 96rem) / 2 + var(--gutter)), calc((100vw - 76rem) / 2)); }
.begin-paw { position: relative; border: 0; background: none; color: var(--accent); padding: .5rem; width: 3.75rem; height: 3.75rem; }


[data-screen=intro] #paw-trail { display: none; }
.first-prints { opacity: .48; }
.path-line { opacity: .27; stroke-width: 2; stroke-dasharray: 3 17; }
.goal-flag { opacity: .42; stroke-width: 3; }
.next-foot { color: light-dark(#bca98f, #80705c); transform: none; }
.next-foot span { transform: translate(-30%, .5rem); }
.next-foot svg { transform: scale(1.12, .72) skewX(-9deg) rotate(80deg); }
/* All interactive and history paws share the shallow, ground-plane perspective. */



.trail-paw:nth-child(3n) { translate: .25rem -.4rem; }
.trail-paw:nth-child(4n+1) { translate: -.3rem .15rem; }
.trail-paw:nth-child(even) { bottom: 1.1rem; }
#paw-trail { padding-right: 3rem; }

/* Annotated opening revision: one continuous route and a ground-level next step. */
.path-line { opacity: .36; stroke-width: 2; stroke-dasharray: 1 14; stroke-linecap: round; }
.goal-flag { opacity: .65; stroke-width: 2.5; }
.flag-cloth { fill: var(--accent); fill-opacity: .15; }
.flag-fold { opacity: .45; stroke-width: 1.5; }
.flag-ground { opacity: .5; stroke-width: 2; }
.next-foot {
  left: 25.2%; top: 83.8%; bottom: auto;
  width: 4.8%; height: 7.75%; padding: 0;
  transform: none;
  color: light-dark(#866f5d, #d1b68f);
}
.next-foot::before { content: ''; position: absolute; inset: -10px; min-width: 44px; min-height: 44px; }
.next-foot svg { display: block; width: 100%; height: 100%; transform: none; }
.next-foot:hover, .next-foot:focus-visible { color: var(--ink); }
.next-foot span { top: calc(100% + .75rem); left: 50%; transform: translateX(-50%); font: .8125rem/1.5 system-ui,sans-serif; }

/* Shared approved paw: rotate inside its coordinate system, then project onto the ground. */
.begin-paw svg, .trail-paw svg {
  display: block;
  width: 100%;
  height: 83.333%;
  fill: currentColor;
  transform: none;
}
.trail-paw svg { opacity: .085; transition: opacity .25s; }

.begin-paw { color: light-dark(#866f5d, #d1b68f); }
.begin-paw:hover, .begin-paw:focus-visible { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .trail-paw svg { transition: none; } }

/* A single header baseline for identity and utility controls. */
header { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; gap: 1rem; }
.app-tools { display:flex; align-items:center; justify-content:flex-end; gap:.35rem; font-family:system-ui,sans-serif; }
.app-tools[hidden] { display:none; }
.app-tools button { min-height:2.5rem; padding:.45rem .7rem; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font: .75rem/1.3 system-ui,sans-serif; white-space:nowrap; }
.app-tools button:hover,.app-tools button:focus-visible,.app-tools button.is-open { border-color:var(--line); color:var(--ink); }
.app-tools #sound-control { min-height:2.5rem; }
.local-panel { position:fixed; z-index:8; top:5.5rem; right:max(var(--gutter),calc((100vw - 76rem)/2)); width:min(26rem,calc(100vw - 2 * var(--gutter))); max-height:min(72svh,44rem); overflow:auto; padding:1.2rem; border:1px solid var(--line); border-radius:.75rem; background:var(--paper); color:var(--ink); box-shadow:0 1.2rem 3rem color-mix(in srgb,var(--ink) 22%,transparent); }
.local-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.local-panel-heading h2 { margin:0; font-size:1.5rem; }
.panel-actions { display:flex; align-items:center; gap:.25rem; }
.panel-actions #history-export { border:0; background:none; color:var(--muted); font:.75rem/1.4 system-ui,sans-serif; }
.panel-close,.task-remove { border:0; background:none; color:var(--muted); font:1.4rem/1 system-ui,sans-serif; padding:.25rem .5rem; }
#local-task-form { display:flex; align-items:center; gap:.5rem; }
#local-task-input { flex:1; min-width:0; padding:.65rem .75rem; border:1px solid var(--line); border-radius:.35rem; background:transparent; color:var(--ink); font:1rem/1.4 system-ui,sans-serif; }
.task-add { padding:.65rem .9rem; border:1px solid var(--accent); border-radius:.35rem; background:var(--accent); color:var(--paper); font:.875rem/1.4 system-ui,sans-serif; }
.local-task-list { list-style:none; margin:1rem 0; padding:0; }
.list-task { display:flex; align-items:center; gap:.35rem; border-bottom:1px solid var(--line); }
.task-cycle { flex:1; display:flex; align-items:center; gap:.7rem; min-height:3rem; padding:.4rem .2rem; border:0; background:none; color:var(--ink); text-align:left; font:1rem/1.4 system-ui,sans-serif; }
.task-marker { width:1.5rem; color:var(--accent); font-size:1.25rem; text-align:center; }
.list-task.current .task-marker { font-weight:700; }
.list-task.done .task-cycle { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.panel-note,.history-parent { color:var(--muted); font:.8125rem/1.5 system-ui,sans-serif; }
.keybindings-note { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem; margin:.75rem 0 0; padding:0; color:var(--muted); font:.9rem/1.5 system-ui,sans-serif; }
.keybindings-note kbd { color:inherit; font:inherit; font-weight:400; }
.local-history-list { display:grid; gap:.75rem; }
.local-history-entry { padding:.8rem 0; border-top:1px solid var(--line); }
.local-history-entry p { margin:.35rem 0; }
.local-history-entry .history-times { display:flex; flex-wrap:wrap; gap:.4rem; color:var(--accent); font:.8125rem/1.5 system-ui,sans-serif; }
.local-history-entry .history-parent { margin-top:.6rem; }
.top-controls { display: flex; align-items: center; gap: .75rem; font-family: system-ui,sans-serif; }
[data-screen=focus] .top-controls { padding-right: 3.5rem; }
/* Equal top/bottom padding centres the focus group in the viewport. */
[data-screen=focus] .screen { display: grid; align-items: center; justify-items: center; padding-block: clamp(1.25rem,3vw,2rem); }
[data-screen=focus] header { position: absolute; top: clamp(1.25rem,3vw,2rem); left: max(var(--gutter),calc((100vw - 96rem) / 2 + var(--gutter))); right: max(var(--gutter),calc((100vw - 96rem) / 2 + var(--gutter))); }
[data-screen=focus] #stage { margin: 0; flex: none; }
/* The action opens to the right; its paw moves to the leading edge. */
.begin-paw { width: 3.75rem; height: 3.75rem; padding: .5rem; display: flex; align-items: center; justify-content: flex-end; border: 1px solid transparent; border-radius: .4rem; overflow: hidden; transition: width .35s ease, background .25s, border-color .25s; }

.begin-paw .begin-icon { position: static; visibility: visible; display: block; flex: 0 0 2.75rem; height: 2.75rem; margin-left: .6rem; }
.begin-paw:hover, .begin-paw:focus-visible { width: 11rem; background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* Fixed-size, spaced steps match the opening instead of shrinking to fit a daily quota. */
#paw-trail { display: flex; gap: clamp(1.7rem,3.1vw,3rem); align-items: center; padding: 0; bottom: 1rem; }
.trail-paw { flex: 0 0 clamp(2.5rem,3.8vw,3rem); width: clamp(2.5rem,3.8vw,3rem); height: clamp(2.5rem,3.8vw,3rem); max-width: none; padding: 0; }
.trail-paw svg { opacity: .3; }
.trail-paw.latest-step svg { color: var(--accent); opacity: .65; }

.current-paw { display: block; pointer-events: none; }
.current-paw .paw-base, .current-paw .paw-fill { position: absolute; inset: 0; display: block; }
.current-paw .paw-base svg { opacity: .22; }
.current-paw .paw-fill { clip-path: inset(0 calc(100% - var(--session-progress,0%)) 0 0); transition: clip-path .7s linear; color: var(--accent); }
.current-paw .paw-fill svg { opacity: .95; }
.current-paw.reflected-paw .paw-fill { clip-path: inset(0); }
.waiting-paw .paw-base svg { color: var(--accent); animation: next-step-breathe 3s ease-in-out infinite; }
@keyframes next-step-breathe { 0%,100% { opacity: .2; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .begin-paw, .current-paw .paw-fill { transition: none; } .waiting-paw .paw-base svg { animation: none; opacity: .4; } }

.top-controls > button { border: 0; background: none; color: var(--muted); font: .75rem/1.4 system-ui,sans-serif; min-height: 2.75rem; padding: .3rem; white-space: nowrap; }
@media (max-width:40rem) { header { flex-wrap: wrap; } .app-tools { gap:0; } .app-tools button { padding:.35rem .45rem; font-size:.6875rem; } .top-controls { gap: .6rem; } .top-controls > button { font-size: .6875rem; } [data-screen=focus] header { align-items: flex-start; } .local-panel { top:auto; right:0; bottom:0; left:0; width:100%; max-height:82svh; padding:1.1rem var(--gutter) max(1.2rem,env(safe-area-inset-bottom)); border-radius:1rem 1rem 0 0; } }

/* Pressed-in history marks; only the current step carries accent colour. */
.trail-paw:not(.current-paw) { color: light-dark(#aa947b, #100e0b); }
.trail-paw:not(.current-paw) svg,
.trail-paw.latest-step:not(.current-paw) svg { color: inherit; opacity: .65; }
.trail-paw svg { height: 66%; transform: skewX(-14deg) rotate(-7deg); transform-origin: center; }
.trail-paw:nth-child(even) svg { transform: skewX(-10deg) rotate(5deg); }
.current-paw .paw-base svg { color: light-dark(#aa947b, #100e0b); opacity: .65; }
.current-paw .paw-fill svg { color: var(--accent); opacity: .95; }
.waiting-paw .paw-base svg { color: var(--accent); }

/* Small stable variations, rather than a pronounced alternating lean. */
.trail-paw svg, .trail-paw:nth-child(even) svg {
  transform: rotate(var(--paw-angle, 0deg)) skewX(-4deg);
  filter: drop-shadow(0 1px 0 light-dark(#fff7eb55, #ffffff0b));
}
.trail-paw:nth-child(even) { bottom: .65rem; }
.trail-paw:nth-child(3n) { translate: .15rem -.15rem; }
.trail-paw:nth-child(4n+1) { translate: -.1rem .05rem; }

.reflected-paw { pointer-events: auto; }

.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand img { display: block; width: 2.6rem; height: 2.7rem; flex: none; }

/* Small-screen opening: conversation first; decorative journey is deferred. */
@media (max-width: 40rem) {
  .intro-path { display: none; }
  .intro-scene { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .opening { margin-bottom: 0; }
  .next-foot { position: relative; inset: auto; width: 3.5rem; height: 2.9rem; margin: 0 0 1rem .4rem; }
  .enter-hint { margin-top: .75rem; }
}

/* Tightened expanding action: label, contrasting paw, then direction. */
.begin-paw { padding: .4rem .5rem; gap: .4rem; }

.begin-paw .begin-icon { flex: 0 0 2.3rem; width: 2.3rem; height: 2.5rem; margin-left: 0; color: inherit; }
.begin-paw .begin-arrow { position: static; visibility: visible; flex: 0 0 auto; width: auto; opacity: 0; color: inherit; font: 1.2rem/1 system-ui,sans-serif; transition: opacity .2s; }
.begin-paw:hover, .begin-paw:focus-visible { width: 11rem; padding-inline: .65rem; color: #27231f; }
.begin-paw:hover .begin-icon, .begin-paw:focus-visible .begin-icon { color: #27231f; }
.begin-paw:hover .begin-arrow, .begin-paw:focus-visible .begin-arrow { opacity: 1; }
.begin-paw:not(:hover):not(:focus-visible) .begin-arrow { display: none; }
.mobile-steps { display: none; }
@media (max-width:40rem) {
  [data-screen=intro] #stage { justify-content: stretch; }
  .intro-scene { flex: 1; width: 100%; justify-content: center; padding-bottom: 7rem; }
  .mobile-steps { position: absolute; display: flex; gap: 1.5rem; bottom: 1.5rem; left: .4rem; color: var(--muted); opacity: .55; }
  .mobile-steps span { display: block; width: 3rem; height: 2.5rem; }
  .mobile-steps span:nth-child(2) { translate: 0 -.6rem; }
  .mobile-steps svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .next-foot { position: absolute; left: 9.4rem; top: auto; bottom: 1.5rem; width: 3rem; height: 2.5rem; margin: 0; }
  [data-screen=intro] > .screen > #stage > .enter-hint { margin: .5rem 0 0; }
}

.mobile-next { display: none; }
@keyframes little-step-arrives { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes next-paw-invites { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@media (max-width:40rem), (hover:none) {
  .enter-hint { display: none; }
  .intro-path { display: none; }
  .intro-scene { position: relative; flex: 1; width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 8rem; gap: 1.5rem; }
  .mobile-steps { position: absolute; display: flex; gap: 1.5rem; bottom: 2rem; left: .4rem; color: var(--muted); opacity: .55; }
  .mobile-steps span { display: block; width: 3rem; height: 2.5rem; animation: little-step-arrives .5s ease both; }
  .mobile-steps span:nth-child(2) { animation-delay: .4s; }
  .next-foot { position: absolute; left: 9.1rem; top: auto; bottom: .5rem; width: 4rem; height: 5.5rem; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; animation: little-step-arrives .5s .8s ease both; }
  .next-foot svg { width: 3.6rem; height: 3rem; flex: none; animation: next-paw-invites 3s 1.3s ease-in-out infinite; }
  .next-foot .desktop-next { display: none; }
  .next-foot .mobile-next { display: block; position: static; opacity: 1; transform: none; color: var(--ink); font: .9375rem/1.4 system-ui,sans-serif; }
  .next-foot .mobile-next span { display: inline; position: static; opacity: 1; transform: none; color: inherit; font: inherit; }
  .begin-paw, .begin-paw:not(:hover):not(:focus-visible) { width: 11rem; padding-inline: .65rem; background: var(--accent); color: #27231f; border-color: var(--accent); }

  .begin-paw .begin-icon { color: #27231f; }
  .begin-paw .begin-arrow, .begin-paw:not(:hover):not(:focus-visible) .begin-arrow { display: block; opacity: 1; }
  .reply { justify-content: center; }
  .response { min-height: 3rem; padding-block: .6rem; }
}
@media (prefers-reduced-motion:reduce) {
  .mobile-steps span, .next-foot, .next-foot svg { animation: none !important; }
}

/* Review #8: deliberate small-screen composition and simple rest flow. */
.key-hint { display:block; color:var(--muted); font: .75rem/1.6 system-ui,sans-serif; margin-top:.25rem; }
.rest-control { position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.1rem; min-width:6rem; min-height:3.6rem; padding:.3rem 1rem .55rem; background:color-mix(in srgb,var(--accent) 14%,var(--paper)); border:1px solid var(--line); border-top:0; border-radius:0 0 4rem 4rem; color:var(--muted); font: .75rem/1.4 system-ui,sans-serif; }
.rest-control > span:first-child { font-size:1.15rem; }
.rest-control:hover,.rest-control:focus-visible { color:var(--ink); background:color-mix(in srgb,var(--accent) 28%,var(--paper)); }
.rest-message { color:var(--muted); font-size:1.125rem; line-height:1.6; margin:0 0 1.75rem; }
.resting h2,.welcome h2 { font-size:clamp(2.5rem,5vw,4.5rem); margin-bottom:1rem; }
.rest-receipt { position:fixed; top:5.5rem; left:max(var(--gutter),calc((100vw - 76rem)/2)); max-width:min(32rem,calc(100vw - 2 * var(--gutter))); padding:.8rem 1.1rem; border:1px solid var(--line); border-radius:.4rem; color:var(--muted); font-size:.875rem; transition:opacity 1s ease; }
.rest-receipt:empty { display:none; }
.rest-receipt small { display:block; margin-top:.25rem; font-size:.75rem; }
.rest-receipt.receipt-hidden { opacity:0; visibility:hidden; transition:opacity 1s ease,visibility 0s 1s; }
.rest-explainer { text-align:center; color:var(--muted); font-size:.9375rem; margin-top:1.75rem; }
[data-screen=rest-confirm] header,[data-screen=rest-confirm] footer { display:none; }
[data-screen=rest-confirm] #stage { align-items:center; text-align:center; }
[data-screen=resting] #stage,[data-screen=welcome] #stage { padding-bottom:4rem; }
[data-screen=focus] .task-complete { text-align:center; }
[data-screen=focus] .remaining { margin-top:1.4rem; }
@media(max-width:40rem) {
 #little-steps { --gutter:1.5rem; }
 .screen { min-height:100svh; padding:1.25rem var(--gutter) 6rem; }
 header { min-height:2.5rem; font-size:1.5rem; }
 .brand img { width:1.8rem; height:2rem; }
 #stage { margin:2rem auto 0; justify-content:center; min-width:0; }
 h2 { font-size:clamp(1.8rem,7.5vw,2.75rem); line-height:1.2; }
 .sentence { font-size:clamp(1.65rem,6.9vw,2.4rem); line-height:1.4; margin:0 0 1.4rem; }
 .duration { white-space:nowrap; }
 .duration-unit { white-space:nowrap; }
 .promise { display:inline-block; margin-top:.15rem; }
 textarea { width:100%; min-height:6rem; font:400 clamp(1.7rem,7vw,2.6rem)/1.35 Georgia,serif; padding:.6rem 0; }
 textarea.instruction-placeholder::placeholder { font-size:.6em; }
 .reply { margin-top:1.25rem; flex-direction:row; justify-content:flex-end; }
 .begin-paw,.begin-paw:not(:hover):not(:focus-visible) { width:10.5rem; height:3.5rem; }
 .context { font-size:.85rem; margin-bottom:1.2rem; }
 .answers { flex-direction:column; align-items:center; gap:1rem; }
 .answers .response { min-width:10rem; text-align:center; font-size:1.125rem; }
 .key-hint { display:none; }
 [data-screen=intro] #stage { justify-content:center; margin:1rem auto 0; }
 .intro-scene { display:block; flex:0 0 auto; padding:0 0 8rem; min-height:21rem; }
 .opening { width:100%; max-width:15ch; font-size:clamp(2.15rem,9vw,3.2rem); line-height:1.25; padding:0; }
 .mobile-steps { left:auto; right:5.5rem; bottom:1.5rem; gap:1.25rem; }
 .next-foot { left:auto; right:0; bottom:0; }
 .countdown { font-size:clamp(5rem,22vw,8rem); }
 [data-screen=focus] #stage { width:100%; margin:0; }
 .task-complete { gap:.5rem; width:100%; justify-content:center; }
 .task-complete .target-title { font-size:clamp(2.1rem,8.7vw,3.25rem); line-height:1.18; overflow-wrap:anywhere; }
 .finish-tick { flex-basis:1.4rem; font-size:1.8rem; opacity:.5; }
 .remaining { font-size:1rem; }
 #paw-trail { bottom:1.4rem; gap:1.5rem; padding:0; }
 .trail-paw { width:2.7rem; flex-basis:2.7rem; height:2.7rem; }
 .rest-control { top:auto; bottom:0; right:var(--gutter); left:auto; transform:none; min-width:5.5rem; min-height:3.25rem; border-top:1px solid var(--line); border-bottom:0; border-radius:4rem 4rem 0 0; }
 [data-screen=focus] #paw-trail,[data-screen=target] #paw-trail { right:8rem; }
 .resting h2,.welcome h2 { font-size:clamp(2.5rem,10vw,3.5rem); }
 .rest-message { font-size:1.125rem; max-width:24ch; }
 .rest-receipt { top:5rem; font-size:.875rem; }
}
/* Same timer engine, compact browser mock of the future extension popup. */
[data-layout=popup] { max-width:600px; --gutter:24px; }
[data-layout=popup] .screen { width:100%; min-height:360px; height:360px; padding:20px 24px; position:relative; overflow:auto; }
[data-layout=popup] header { position:absolute; inset:auto 24px 14px auto; min-height:20px; font-size:14px; opacity:.65; z-index:2; }
[data-layout=popup] .brand img { width:17px; height:20px; }
[data-layout=popup] #stage { width:100%; margin:0; padding:0; max-width:none; align-items:stretch; }
[data-layout=popup] .sentence { font-size:25px; line-height:1.6; margin:0; }
[data-layout=popup] .sentence textarea { display:inline-block; vertical-align:middle; width:calc(100% - 64px); min-height:45px; height:45px; padding:0; margin:6px 0; font-size:26px; border-bottom:1px solid var(--line); resize:none; }
[data-layout=popup] .sentence .begin-paw { display:inline-flex; vertical-align:middle; width:48px; height:48px; padding:5px; margin-left:8px; background:transparent; color:var(--accent); border:1px solid var(--line); }

[data-layout=popup] .begin-paw .begin-icon { color:inherit; flex-basis:34px; width:34px; height:34px; }
[data-layout=popup] .begin-paw:hover { background:var(--accent); color:var(--paper); }
[data-layout=popup] .countdown { font-size:80px; }
[data-layout=popup] .task-complete .target-title { font-size:34px; }
[data-layout=popup] .remaining { font-size:15px; margin:.6rem 0 0; }
[data-layout=popup] .exit-timer { position:absolute; top:12px; right:12px; }
[data-layout=popup] .screen:has(.task-complete) #stage { align-items:center; }
[data-layout=popup] .context { font-size:14px; line-height:1.6; margin:0 0 14px; }
[data-layout=popup] h2 { font-size:25px; margin-bottom:12px; }
[data-layout=popup] #note-input { font-size:24px; min-height:60px; height:60px; }
[data-layout=popup] #note-form .reply { display:flex !important; justify-content:flex-end; margin:12px 0 0; }
[data-layout=popup] #note-form .response { font-size:14px; }
[data-layout=popup] footer { display:none; }
[data-layout=popup]::before,[data-layout=popup]::after { position:absolute; }
[data-layout=popup][data-screen=countdown] header { display:none; }
[data-layout=popup] .answers { flex-direction:row; gap:24px; }
[data-layout=popup] .answers .response { min-width:auto; font-size:15px; }
@media(prefers-reduced-motion:reduce) { .rest-receipt,.rest-receipt.receipt-hidden { transition:none; } }

@media(max-width:40rem){.time-lead{display:block}.duration-unit{white-space:nowrap}}
[data-layout=popup] .time-lead{display:inline}

[data-layout=popup] .popup-target{display:flex;align-items:center;gap:10px;margin-top:8px}
[data-layout=popup] .popup-target .promise{font-size:22px;white-space:nowrap;margin:0}
[data-layout=popup] .popup-target textarea{flex:1;width:0;min-width:0;margin:0;font-size:24px}
[data-layout=popup] .popup-target .begin-paw{flex:0 0 44px;width:44px;height:44px;margin:0}

/* Review feedback: centred text, bottom steps and quiet completion/rest controls. */
.opening-line{display:block}.opening strong{font-weight:700}
[data-screen=focus] #stage{align-items:center;text-align:center}
[data-screen=focus] .task-complete{display:block;width:100%;text-align:center;padding:0}
[data-screen=focus] .target-title{text-align:center;width:100%;padding-inline:2.8rem}
[data-screen=focus] .finish-tick{position:absolute;right:0;top:50%;transform:translateY(-50%)}
[data-screen=focus] .remaining{width:100%;text-align:center;margin:1.4rem 0 0}
.rest-control{min-width:0;min-height:44px;padding:.55rem .9rem;flex-direction:row;gap:.5rem;border:0;border-radius:0 0 1rem 1rem;background:color-mix(in srgb,var(--accent) 8%,var(--paper));font-size:.75rem}
.rest-control svg{width:1.6rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rest-control:hover,.rest-control:focus-visible{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}
@media(max-width:40rem){
 [data-screen=intro] .screen{height:100svh;min-height:34rem;padding-bottom:1.25rem}
 [data-screen=intro] #stage{position:relative;min-height:0;flex:1;margin:1rem 0 0;justify-content:center}
 .intro-scene{position:static;flex:none;min-height:0;padding:0 0 5rem;width:100%}
 .opening{max-width:none;width:100%;font-size:clamp(1.9rem,7.8vw,3.1rem);line-height:1.3}
 .opening-line{white-space:nowrap}
 .mobile-steps{bottom:1.5rem;right:5.5rem}
 .next-foot{bottom:0;right:0}
 [data-screen=focus] .task-complete{position:relative;display:block;width:100%;padding:0}
 [data-screen=focus] .target-title{padding:0;text-align:center}
 [data-screen=focus] .finish-tick{top:auto;bottom:calc(100% + 1.6rem);left:50%;right:auto;transform:translateX(-50%);display:grid;place-items:center;width:1.4rem;height:1.4rem;border:1px solid var(--muted);border-radius:.3rem;opacity:.25;font-size:1rem}
 [data-screen=focus] .finish-tick span{opacity:0}
 [data-screen=focus] .task-complete:hover .finish-tick,[data-screen=focus] .task-complete:focus-visible .finish-tick{opacity:.7;color:light-dark(#397342,#8dc39a)}
 [data-screen=focus] .task-complete:hover .finish-tick span,[data-screen=focus] .task-complete:focus-visible .finish-tick span{opacity:1}
 [data-screen=focus] .task-complete:hover .target-title{text-decoration:none}
 [data-screen=focus] .task-complete:focus-visible .target-title{text-decoration:none}
 .rest-control{position:fixed;top:auto;bottom:max(.85rem,env(safe-area-inset-bottom));right:var(--gutter);left:auto;transform:none;border:1px solid color-mix(in srgb,var(--muted) 22%,transparent);border-radius:2rem;min-height:44px;padding:.5rem .8rem;background:color-mix(in srgb,var(--accent) 6%,var(--paper));font-size:.75rem}
}
[data-layout=popup][data-screen=focus] .target-title{padding-inline:2rem}
[data-layout=popup][data-screen=focus] .finish-tick{top:50%;bottom:auto;left:auto;right:0;transform:translateY(-50%);border:0;opacity:.3}
[data-layout=popup][data-screen=focus] .finish-tick span{opacity:1}
[data-screen=focus] .target-title{margin-inline:auto}

/* Desktop route begins at the content edge; mobile keeps its right-aligned steps. */
@media(min-width:40.001rem) and (hover:hover){[data-screen=intro] .next-foot{left:16.7%}}

/* Visible walking route: the next step invites, the route follows. */
.intro-path .path-line{stroke:light-dark(#866f5d,#c1aa87);stroke-width:2.2;opacity:.8;stroke-dasharray:2 12}
.first-prints.first-step{fill:var(--muted);opacity:.45}
.first-prints.second-step{fill:var(--muted);opacity:.72}
.goal-flag{stroke:light-dark(#866f5d,#ceb18b);stroke-width:2.8;opacity:.95}
.flag-cloth{fill:var(--accent);fill-opacity:.3}
.flag-fold{opacity:.6}
.route-reveal{width:1000px}
@keyframes paw-appears{from{opacity:0}to{opacity:1}}
@keyframes route-draws{from{width:0px}to{width:1000px}}
@media(prefers-reduced-motion:no-preference) and (min-width:40.001rem) and (hover:hover){
 .first-step{animation:paw-appears .45s .1s both}
 .second-step{animation:paw-appears .45s .5s both}
 [data-screen=intro] .next-foot{animation:paw-appears .45s .9s both}
 .route-reveal{animation:route-draws 1.8s 1.35s ease-in-out both}
}
/* Fill progression remains distinct even after the entrance animation settles. */
.first-step{fill-opacity:.5}.second-step{fill-opacity:.8}
.mobile-done{display:none}
@keyframes task-line-completes{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.completion-marking .task-complete{pointer-events:none}
.completion-marking .target-title{text-decoration:none!important}
.completion-marking .target-title::after{content:none}
.completion-marking .target-words{background:linear-gradient(currentColor,currentColor) left 54%/0% 2px no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:words-complete .55s ease-out forwards}
@keyframes words-complete{to{background-size:100% 2px}}
.completion-marking .finish-tick{opacity:1!important;color:light-dark(#397342,#8dc39a);font-size:2.4rem}
.completion-marking .finish-tick span{opacity:1!important}
@media(max-width:40rem),(hover:none){
 [data-screen=focus] .task-complete .finish-tick{visibility:hidden}
 .mobile-done{display:block;align-self:center;margin:1.5rem 0 0;padding:.6rem 1.6rem;min-height:44px;border:1px solid var(--line);border-radius:2rem;background:none;color:var(--ink);font:1rem/1.4 system-ui,sans-serif}
 .mobile-done:active{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}
 .completion-marking .task-complete .finish-tick{visibility:visible;width:2.6rem;height:2.6rem;bottom:calc(100% + 1.25rem);border:0;font-size:2.6rem}
 .completion-marking .mobile-done{opacity:.4;pointer-events:none}
}
[data-layout=popup] .mobile-done{display:none}
@media(prefers-reduced-motion:reduce){.first-step,.second-step,.route-reveal{animation:none}.completion-marking .target-title::after{animation:none}}

/* Reuse the original silhouette, tinted by the shared theme accent. */
.brand-mark{display:block;width:2.6rem;height:2.7rem;flex:none;background:var(--accent);mask:var(--brand-logo) center/contain no-repeat;-webkit-mask:var(--brand-logo) center/contain no-repeat}
@media(max-width:40rem){.brand-mark{width:1.8rem;height:2rem}}
[data-layout=popup] .brand-mark{width:17px;height:20px}

/* Quiet, aligned desktop history and a clearly bounded next-step action. */
#paw-trail {left:max(var(--gutter),calc((100vw - 96rem)/2 + var(--gutter)),calc((100vw - 76rem)/2));right:max(var(--gutter),calc((100vw - 96rem)/2 + var(--gutter)),calc((100vw - 76rem)/2));align-items:center}
.trail-paw,.trail-paw:nth-child(even),.trail-paw:nth-child(3n),.trail-paw:nth-child(4n+1){bottom:0;translate:none}
.trail-paw:not(.current-paw) svg,.trail-paw.latest-step:not(.current-paw) svg {opacity:.16}
.current-paw .paw-base svg{opacity:.13}
.current-paw .paw-fill svg{opacity:.3}
.waiting-paw .paw-base svg{animation:quiet-next-step 3s ease-in-out infinite}
@keyframes quiet-next-step{0%,100%{opacity:.12}50%{opacity:.25}}
.begin-paw{border-color:var(--line);background:color-mix(in srgb,var(--accent) 5%,var(--paper));border-radius:.65rem;justify-content:center}



@media(prefers-reduced-motion:reduce){.waiting-paw .paw-base svg{animation:none;opacity:.18}}

/* The entry paw is centred even while its label is collapsed. */
.begin-paw{gap:0}
.begin-paw .begin-label{flex:0 0 auto;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:max-width .35s ease,opacity .2s ease}
.begin-paw:hover .begin-label,.begin-paw:focus-visible .begin-label{max-width:8rem;opacity:1}
.begin-paw .begin-icon{display:flex;align-items:center;justify-content:center;margin:0}
.begin-paw .begin-icon svg{height:83.333%;width:100%}
.begin-paw .begin-arrow{font-size:1.9rem;line-height:1}
.begin-paw:hover,.begin-paw:focus-visible{width:13rem;gap:.55rem}
@media(min-width:40.001rem) and (hover:hover){

 [data-screen=target] .begin-paw:not(:hover):not(:focus-visible) .begin-icon{animation:entry-paw-breathe 3s ease-in-out infinite}
}
@keyframes entry-paw-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes quiet-next-step{0%,100%{opacity:.3}50%{opacity:.65}}
@media(max-width:40rem),(hover:none){.begin-paw,.begin-paw:not(:hover):not(:focus-visible){width:13rem;gap:.55rem}.begin-paw .begin-label{max-width:8rem;opacity:1}}
@media(prefers-reduced-motion:reduce){[data-screen=target] .begin-paw .begin-icon{animation:none!important}.waiting-paw .paw-base svg{opacity:.5}}
[data-layout=popup] .begin-paw:hover{width:44px;gap:0}

/* Theme-specific trail contrast: quiet history, legible active step. */
.trail-paw:not(.current-paw){color:light-dark(#aa947b,#060403)}
.trail-paw:not(.current-paw) svg,.trail-paw.latest-step:not(.current-paw) svg{opacity:1;color:light-dark(#aa947b29,#060403c7)}
.current-paw .paw-base svg{color:light-dark(#866f5d,#ceb18b);opacity:.3}
.current-paw .paw-fill svg{color:light-dark(#866f5d,#ceb18b);opacity:.9}
.waiting-paw .paw-base svg{color:light-dark(#866f5d,#ceb18b);animation:clear-next-step 3s ease-in-out infinite}
@keyframes clear-next-step{0%,100%{opacity:.48}50%{opacity:.9}}
/* Draw the long arrow geometrically, avoiding the glyph's uneven baseline. */
.begin-paw .begin-arrow{display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:2.5rem;flex:0 0 2rem;font-size:0;line-height:0;transform:none;padding:0;margin:0}
.begin-paw .begin-arrow::before{content:'';width:2rem;height:1.5px;background:currentColor}
.begin-paw .begin-arrow::after{content:'';position:absolute;right:0;top:50%;width:.45rem;height:.45rem;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
@media(max-width:40rem),(hover:none){.begin-paw .begin-arrow,.begin-paw:not(:hover):not(:focus-visible) .begin-arrow{display:flex}}
@media(prefers-reduced-motion:reduce){.waiting-paw .paw-base svg{animation:none;opacity:.75}}

.begin-paw .begin-arrow{inset:auto}

/* Pale lettering on the expanded accent action. */
.begin-paw:hover,.begin-paw:focus-visible,.begin-paw:hover .begin-icon,.begin-paw:focus-visible .begin-icon{color:light-dark(#fffaf4,#27231f)}
@media(max-width:40rem),(hover:none){.begin-paw,.begin-paw:not(:hover):not(:focus-visible),.begin-paw .begin-icon{color:light-dark(#fffaf4,#27231f)}}
@media(min-width:40.001rem) and (hover:hover){
 [data-screen=focus] .task-complete{position:relative;width:fit-content;max-width:calc(100% - 5rem);margin-inline:auto}
 [data-screen=focus] .target-title{width:auto;padding:0}
 [data-screen=focus] .finish-tick{left:calc(100% + .75rem);right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
}
/* Both indicators share the same eased value, timing and accent. The fill
   is clipped within the paw's ink bounds rather than the empty SVG margin. */
#little-steps{--progress-ink:light-dark(#866f5d,#c6aa80)}
#little-steps::after{background:var(--progress-ink);transition:width .7s linear}
.current-paw .paw-fill{clip-path:inset(0 calc(100% - var(--session-progress,0%)) 0 0);transition:clip-path .7s linear}
.current-paw .paw-fill svg{color:var(--progress-ink);opacity:1}

#notification-status{position:fixed;top:5rem;right:var(--gutter,5vw);max-width:23rem;margin:0 5vw;color:light-dark(#69574a,#bcaf9b);font:.75rem/1.5 system-ui,sans-serif;z-index:4}#notification-status:empty{display:none}

/* A real textarea keeps native editing; only its first line is indented
   to leave room for the fixed, non-editable opening words. */
.inline-sentence{position:relative;width:100%;margin:1.2rem 0;font:400 clamp(1.65rem,3.8vw,3.5rem)/1.35 Georgia,serif;letter-spacing:-.02em}
.inline-sentence .fixed-lead{position:absolute;left:0;top:0;font:inherit;letter-spacing:inherit;color:var(--ink);pointer-events:none;white-space:nowrap}
.inline-sentence textarea,#little-steps[data-layout=popup] .inline-sentence textarea{display:block;width:100%;min-width:0;min-height:2.8em;margin:0;padding:0 0 .35em;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font:inherit;font-style:normal;letter-spacing:inherit;color:light-dark(#806b58,#d6ba96);text-indent:var(--lead-width,0px);resize:none;overflow:hidden;box-shadow:none}
.inline-sentence textarea::placeholder{color:var(--muted);opacity:.35;font-style:normal}
.inline-sentence textarea:focus{outline:none;border-bottom-color:var(--accent)}
.inline-sentence:focus-within .fixed-lead{color:var(--ink)}
@media(max-width:40rem){.inline-sentence{font-size:clamp(1.55rem,6.4vw,2.3rem)}}
[data-layout=popup] .inline-sentence{font-size:24px;margin:.65rem 0}
[data-layout=popup] .inline-sentence textarea{min-height:2.2em}

.sound-control{border:0;background:none;color:var(--muted);font:.75rem/1.4 system-ui,sans-serif;min-height:44px;padding:.5rem}.sound-control:hover{color:var(--ink)}[data-screen=focus] .sound-control{margin-right:3.5rem}

/* Quiet mode belongs beside identity on desktop, opposite rest on phones. */
header{justify-content:flex-start}
.sound-control{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 0 .5rem;padding:.45rem .6rem;border:1px solid transparent;border-radius:1.5rem}
.sound-control[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 12%,var(--paper));border-color:var(--line)}
.quiet-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;font:700 1rem/1 system-ui,sans-serif;letter-spacing:.03em}
[data-screen=focus] .sound-control{margin-right:0}
@media(max-width:40rem){
 .sound-control{position:fixed;left:var(--gutter);bottom:max(.85rem,env(safe-area-inset-bottom));z-index:6;margin:0;min-height:44px;padding:.5rem .75rem;background:var(--paper);border-color:var(--line);font-size:.75rem}
}

.inline-sentence textarea::placeholder,.inline-sentence textarea.instruction-placeholder::placeholder{font:inherit;font-size:1em;line-height:inherit;letter-spacing:inherit;font-style:normal}

/* Supporting context stays outside the centred target/time layout. */
[data-screen=focus] .task-complete{position:relative}
.focus-lead{position:absolute;left:50%;bottom:calc(100% + 3rem);transform:translateX(-50%);width:max-content;color:var(--muted);opacity:.6;font:400 .875rem/1.4 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
#notification-status{top:auto;bottom:5rem;left:auto;right:max(1.25rem,5vw);width:min(20rem,calc(100vw - 2.5rem));max-width:20rem;margin:0;color:light-dark(#8c7c71,#9f9281);font:.75rem/1.6 system-ui,sans-serif;z-index:4;text-align:right}
@media(max-width:40rem){.focus-lead{bottom:calc(100% + 4.5rem)}#notification-status{bottom:5rem;right:var(--gutter,1.25rem);width:min(19rem,calc(100vw - 2.5rem));font-size:.6875rem}}
[data-layout=popup] .focus-lead{bottom:calc(100% + 1.5rem);font-size:.7rem}

/* Context and target form one typographic unit; the action hint sits above it. */
[data-screen=focus] .focus-lead{bottom:calc(100% + .55rem);font:400 clamp(1.1rem,1.65vw,1.45rem)/1.3 Georgia,serif;letter-spacing:-.02em;opacity:.58}

@media(hover:hover){.task-complete:hover .focus-lead,.task-complete:focus-visible .focus-lead{text-decoration:line-through;text-decoration-thickness:1px}}
.completion-marking .focus-lead{text-decoration:line-through;text-decoration-thickness:1px}
@media(max-width:40rem){
 [data-screen=focus] .focus-lead{bottom:calc(100% + .5rem);font-size:1.15rem}
 .completion-marking .task-complete .finish-tick{bottom:calc(100% + 3.2rem)}
}
[data-layout=popup][data-screen=focus] .focus-lead{bottom:calc(100% + .4rem);font-size:1rem}

@media(max-width:40rem){[data-screen=intro] .sound-control{display:none}}

/* Touch previews must never imply completion before Done is pressed. */
@media(max-width:40rem),(hover:none){
 [data-screen=focus] .task-complete:hover .focus-lead,
 [data-screen=focus] .task-complete:focus-visible .focus-lead,
 [data-screen=focus] .task-complete:hover .target-title,
 [data-screen=focus] .task-complete:focus-visible .target-title{text-decoration:none}
 [data-screen=focus].completion-marking .task-complete .focus-lead{text-decoration:line-through}
}

/* Softer brown-black for the light opening quote. */
.opening{color:light-dark(#40312a,#eee7dc)}

/* The accent action has opposite ink polarity in the two themes. */
#little-steps{--on-accent:light-dark(#fffaf4,#27231f)}
.begin-paw:hover,.begin-paw:focus-visible,.begin-paw:hover .begin-icon,.begin-paw:focus-visible .begin-icon{color:var(--on-accent)}
@media(max-width:40rem),(hover:none){.begin-paw,.begin-paw:not(:hover):not(:focus-visible),.begin-paw .begin-icon{color:var(--on-accent)}}

/* Mobile welcome: a slightly raised message, with quiet editorial accents. */
@media(max-width:40rem){
 [data-screen=intro] .opening{transform:translateY(-5svh)}
 [data-screen=intro] .opening strong{text-decoration-line:underline;text-decoration-color:var(--accent);text-decoration-thickness:.055em;text-underline-offset:.16em;text-decoration-skip-ink:auto}
}

/* Raised word accents, rather than underlining, for the mobile opening. */
@media(max-width:40rem){
 [data-screen=intro] .opening{transform:translateY(-12svh)}
 [data-screen=intro] .opening strong{position:relative;display:inline-block;isolation:isolate;text-decoration:none;color:light-dark(#584233,#f5e9d9);text-shadow:0 1px 0 light-dark(#ffffffb3,#00000033),0 3px 7px light-dark(#866f5d24,#00000040)}
 [data-screen=intro] .opening strong::before{content:'';position:absolute;z-index:-1;left:-.035em;right:-.035em;bottom:.04em;height:.32em;border-radius:.09em;background:color-mix(in srgb,var(--accent) 19%,transparent);transform-origin:bottom;animation:word-highlight-rise .8s .25s both ease-out}
}
@keyframes word-highlight-rise{from{opacity:0;transform:scaleY(.15)}to{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){[data-screen=intro] .opening strong::before{animation:none}}

/* Solid highlighter tabs with a crisp offset echo, mobile opening only. */
@media(max-width:40rem){
 [data-screen=intro] .opening strong{color:var(--on-accent);text-shadow:none;background:var(--accent);box-shadow:.065em .07em 0 light-dark(#c8b4a2,#66513d);padding:0 .055em;line-height:1.08;isolation:auto}
 [data-screen=intro] .opening strong::before{content:none;animation:none}
}

@media(max-width:40rem){
 [data-screen=intro] .opening strong{padding:.035em .11em;margin-inline:.025em;box-shadow:.12em .13em 0 light-dark(#30231c,#ffffff)}
}

/* Room for padded word tabs, punctuation and their offset shadows. */
@media(max-width:40rem){
 [data-screen=intro] .opening{font-size:clamp(1.65rem,6.7vw,2.7rem);line-height:1.85}
 [data-screen=intro] .opening strong{display:inline-block;padding:.1em .2em;margin-left:.015em;margin-right:.2em;line-height:1.12;vertical-align:baseline;background:light-dark(#dbc6b4,#e7d4bb);color:light-dark(#40312a,#30231c);box-shadow:.12em .13em 0 light-dark(#30231c,#ffffff)}
}

@media(max-width:40rem){
 [data-screen=intro] .opening strong{background:#fffaf4;color:#40312a;box-shadow:.12em .13em 0 var(--accent)}
}

/* Final review direction: accent tabs with reversed ink and stark shadows. */
@media(max-width:40rem){
 [data-screen=intro] .opening{line-height:2}
 [data-screen=intro] .opening strong{padding:.13em .24em;background:var(--accent);color:var(--on-accent);box-shadow:.12em .13em 0 light-dark(#30231c,#ffffff)}
}

@media(max-width:40rem){
 [data-screen=intro] .opening strong{background:light-dark(#866f5d,#fffaf4);color:light-dark(#fffaf4,#40312a);box-shadow:.16em .17em 0 light-dark(#30231c,#ceb18b)}
}

/* Notification permission and blocked-state message */
#notification-status {
  position: fixed;
  z-index: 29;
  right: clamp(1rem, 3vw, 2.5rem);
  top: clamp(4.5rem, 8vh, 6rem);
  max-width: min(26rem, calc(100vw - 2rem));
  margin: 0;
  padding: .55rem .8rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--paper, #f7eee9) 92%, transparent);
  color: var(--muted, #69574a);
  font-size: .875rem;
  line-height: 1.4;
}

/* Web task list and history use the extension's compact controls as full page views. */
.app-tools .utility-icon {
  width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  display: grid;
  place-items: center;
  padding: .55rem;
  border-color: var(--line);
  color: var(--ink);
}
.utility-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.utility-icon.is-open { color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,transparent); }
#stage:has(.local-view) { justify-content: flex-start; }
.screen:has(.local-view) #paw-trail { display: none; }
.local-panel.local-view {
  position: static;
  z-index: auto;
  width: min(100%, 48rem);
  max-height: none;
  overflow: visible;
  margin: clamp(1rem, 5vh, 3.5rem) auto 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: view-arrive .24s ease-out both;
}
@keyframes view-arrive { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }
.local-view .local-panel-heading { margin-bottom: clamp(1rem, 3vh, 1.75rem); }
.tasks-panel .local-panel-heading { margin-bottom: .3rem; }
.local-view .local-panel-heading h2 { font: 400 clamp(2.3rem, 5vw, 4rem)/1.12 Georgia,serif; letter-spacing: -.035em; }
.local-view .panel-actions #history-export { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .875rem; }
#local-task-form { gap: .75rem; }
#local-task-input { min-height: 3.5rem; padding: .8rem 1rem; border-radius: .4rem; font-size: 1.25rem; }
.task-add { min-height: 3.5rem; padding: .75rem 1.25rem; border-radius: .4rem; }
.local-task-list { margin: clamp(1.2rem, 3vh, 2rem) 0 .8rem; }
.list-task { min-height: 4.25rem; gap: .6rem; transition: background-color .2s ease; }
.list-task:hover { background: color-mix(in srgb,var(--accent) 7%,transparent); }
.task-cycle { min-height: 4.25rem; padding: .65rem .8rem; gap: 1rem; border-radius: .35rem; font-size: clamp(1.15rem, 2.1vw, 1.5rem); }
.task-marker { width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font: 1rem/1 system-ui,sans-serif; }
.list-task.current .task-cycle { background: color-mix(in srgb,var(--accent) 12%,transparent); }
.list-task.current .task-marker { border-color: var(--accent); color: var(--accent); font-size: 1.2rem; }
.task-current-label { margin-left: auto; color: var(--accent); font: 600 .6875rem/1.3 system-ui,sans-serif; letter-spacing: .1em; }
.list-task.done .task-marker { border-color: transparent; }
.task-remove { font-size: 1.5rem; }
.local-view .panel-note { margin: .25rem 0 1.15rem; font-size: .875rem; }
.selected-task-context { margin: 0 0 1.1rem; color: var(--muted); font: 600 .7rem/1.45 system-ui,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.selected-task-context span { margin-left: .5rem; color: var(--accent); }
.local-view .local-history-entry { padding: 1.15rem 0; }
.local-view .local-history-entry > p:not(.history-times) { font-size: 1.05rem; }
@media (max-width:40rem) {
  .app-tools .utility-icon { width: 2.75rem; height: 2.75rem; padding: .65rem; }
  .local-panel.local-view { margin: 1rem auto 2rem; }
  .local-view .local-panel-heading h2 { font-size: clamp(2rem, 9vw, 3rem); }
  #local-task-input { font-size: 1rem; }
  .task-cycle { min-height: 3.9rem; font-size: 1.1rem; }
  .list-task { min-height: 3.9rem; }
  .task-current-label { font-size: .58rem; }
  .selected-task-context { margin-bottom: .75rem; font-size: .625rem; }
  .selected-task-context span { display: block; margin: .25rem 0 0; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .local-panel.local-view { animation: none; } }

/* Keep the web controls faithful to the extension's spare, warm UI. */
.app-tools { margin-left: auto; gap: .7rem; }
.app-tools .utility-icon {
  width: 3.1rem; height: 3.1rem; min-height: 3.1rem; padding: .55rem;
  border: 0; border-radius: .25rem; background: transparent; color: var(--muted);
  transition: color .18s ease, background-color .18s ease;
}
.app-tools .utility-icon svg { width: 1.55rem; height: 1.55rem; }
.app-tools .utility-icon:hover,.app-tools .utility-icon:focus-visible,.app-tools .utility-icon.is-open { border: 0; background: transparent; color: var(--accent); }
.app-tools #tasks-toggle.is-open { font: 2rem/1 system-ui,sans-serif; }
.app-tools #sound-control { width: 3.1rem; min-width: 3.1rem; min-height: 3.1rem; margin: 0; padding: .6rem; border: 0; border-radius: .25rem; color: var(--muted); }
.app-tools #sound-control:hover,.app-tools #sound-control:focus-visible,.app-tools #sound-control[aria-pressed=true] { background: transparent; color: var(--accent); }
.quiet-icon { display: block; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.current-task-switcher { position: relative; min-width: 0; max-width: min(38%, 25rem); flex: 1 1 auto; font: 600 .68rem/1.35 system-ui,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.current-task-switcher[hidden] { display: none; }
#current-task-trigger { display: flex; align-items: center; gap: .45rem; max-width: 100%; padding: .35rem .25rem; border: 0; background: none; color: var(--accent); text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; }
#current-task-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-switch-caret { flex: none; font: 1rem/1 system-ui,sans-serif; transition: transform .2s ease; }
.current-task-switcher.is-open .task-switch-caret { transform: rotate(180deg); }
.task-switch-menu { position: absolute; z-index: 12; top: calc(100% + .25rem); left: 0; min-width: min(19rem, calc(100vw - 2rem)); max-width: min(24rem, calc(100vw - 2rem)); padding: .35rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--paper); box-shadow: 0 .6rem 1.5rem color-mix(in srgb,var(--ink) 18%,transparent); opacity: 0; visibility: hidden; transform: translateY(-.35rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.current-task-switcher.is-open .task-switch-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.task-switch-menu button { display: block; width: 100%; padding: .65rem .75rem; border: 0; border-radius: .2rem; background: transparent; color: var(--ink); text-align: left; font: 600 .72rem/1.4 system-ui,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.task-switch-menu button:hover,.task-switch-menu button:focus-visible { background: color-mix(in srgb,var(--accent) 12%,transparent); color: var(--accent); }
.welcome #ready.response,.resting #ready.response { border-bottom-color: var(--accent); transition: color .2s ease, transform .2s ease, border-color .2s ease; }
.welcome #ready.response:hover,.welcome #ready.response:focus-visible,.resting #ready.response:hover,.resting #ready.response:focus-visible { color: var(--accent); border-bottom-color: var(--accent); transform: translateY(-2px); }
.welcome #ready.response:active,.resting #ready.response:active { transform: translateY(0); }

/* The list follows the extension: underline entry, outlined Add + Enter cue, plain state glyphs. */
#local-task-form { display: flex; align-items: center; gap: .65rem; }
#local-task-input { min-height: 3.4rem; padding: .6rem .15rem; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; background: transparent; font: 1.2rem/1.4 system-ui,sans-serif; }
#local-task-input:focus,#local-task-input:focus-visible { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--accent); }
#local-task-input::placeholder { color: var(--muted); opacity: .75; }
.task-add { display: inline-flex; align-items: center; gap: .55rem; flex: none; padding: .55rem .7rem; border: 1px solid var(--accent); border-radius: .35rem; background: transparent; color: var(--accent); font: .9rem/1.35 system-ui,sans-serif; transition: background-color .16s ease,color .16s ease; }
.task-add:hover,.task-add:focus-visible { background: var(--accent); color: var(--paper); }
.task-add kbd { padding-left: .5rem; border-left: 1px solid color-mix(in srgb,var(--accent) 40%,transparent); color: inherit; font: .9rem/1 system-ui,sans-serif; }
.list-task { position: relative; padding: 0 .25rem 0 .65rem; border-left: 2px solid transparent; }
.task-cycle { background: transparent; }
.task-marker { display: block; width: 1.25rem; height: auto; flex: 0 0 1.25rem; border: 0; border-radius: 0; color: var(--muted); font: 1.2rem/1 system-ui,sans-serif; }
.list-task.current { padding-left: .45rem; border-left-color: var(--accent); background: color-mix(in srgb,var(--accent) 9%,transparent); }
.list-task.current .task-cycle,.list-task.current .task-remove { background: transparent; }
.list-task.current .task-marker,.list-task.current .task-cycle { color: var(--accent); }
.list-task.current .task-text { color: var(--accent); }
.list-task.current .task-remove { align-self: stretch; min-width: 2.5rem; color: var(--accent); }
.list-task.current .task-remove:hover { color: var(--ink); }
.list-task.done .task-cycle { text-decoration: none; }
.list-task.done .task-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.task-cycle:focus-visible,.task-remove:focus-visible,.task-add:focus-visible,#tasks-toggle:focus-visible,#history-toggle:focus-visible,#sound-control:focus-visible,#current-task-trigger:focus-visible,.task-switch-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width:40rem) {
  header { align-items: center; }
  .current-task-switcher { max-width: calc(100% - 8rem); min-width: 6rem; font-size: .6rem; }
  .app-tools { width: 100%; justify-content: flex-end; gap: .6rem; }
  .app-tools .utility-icon,.app-tools #sound-control { width: 2.9rem; height: 2.9rem; min-width: 2.9rem; min-height: 2.9rem; }
  .app-tools .utility-icon svg { width: 1.5rem; height: 1.5rem; }
  #local-task-form { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; }
  #local-task-input { grid-column: 1 / -1; width: 100%; min-height: 3rem; font-size: 1.05rem; }
  .task-add { grid-column: 2; justify-self: end; min-height: 2.6rem; }
  .task-cycle { font-size: 1.05rem; }
  .task-remove { min-width: 2.4rem; }
  .screen:has(.local-view) { padding-bottom: max(1rem,env(safe-area-inset-bottom)); }
  #stage:has(.local-view) { margin: .75rem auto 0; justify-content: stretch; }
  .local-panel.local-view { flex: 1 0 auto; }
  .local-panel.local-view.tasks-panel { display: flex; flex-direction: column; min-height: 0; margin-bottom: 1rem; }
  .tasks-panel .local-task-list { flex: none; order: 3; }
  .tasks-panel .local-panel-heading { order: 0; }
  .tasks-panel .local-panel-heading { margin-bottom: .25rem; }
  .tasks-panel .panel-note { order: 1; margin: 0 0 1rem; }
  .tasks-panel #local-task-form { position: static; z-index: auto; order: 2; margin: 0; padding: 0; background: none; }
}
@media (prefers-reduced-motion: reduce) { .app-tools .utility-icon,.task-switch-caret,.task-switch-menu,.task-add,.welcome #ready.response,.resting #ready.response { transition: none; } }
@media (max-width: 600px) {
  #notification-status {
    top: auto;
    right: 1rem;
    bottom: max(5rem, env(safe-area-inset-bottom) + 4.5rem);
    left: 1rem;
    max-width: none;
  }
}


.app-tools button, .response, .begin-paw, .task-add, .task-cycle, .task-remove,
.panel-actions button, .exit-timer {
  transition: width .35s ease, gap .35s ease, padding .35s ease,
    transform .16s ease, color .18s ease, background-color .18s ease,
    border-color .18s ease, box-shadow .18s ease;
}
.app-tools button:hover, .response:hover, .task-add:hover, .task-cycle:hover,
.task-remove:hover, .panel-actions button:hover, .exit-timer:hover {
  transform: translateY(-1px);
}
.app-tools button:active, .response:active, .task-add:active, .task-cycle:active,
.task-remove:active, .panel-actions button:active, .exit-timer:active {
  transform: translateY(0) scale(.97);
}
.rest-control { transition: transform .16s ease, color .18s ease, background-color .18s ease; }
.rest-control:hover, .rest-control:focus-visible { transform: translateX(-50%) translateY(-1px); }
.rest-control:active { transform: translateX(-50%) scale(.97); }
.task-cycle:hover .task-text { color: var(--accent); }
.task-remove:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Keep the whole to-do row inside its view, including long titles and the
   trailing remove control. */
.local-panel.local-view { width: 100%; max-width: 52rem; min-width: 0; }
.local-view.tasks-panel, .local-view .local-task-list, .local-view .list-task { width: 100%; min-width: 0; }
.local-view.tasks-panel { overflow: visible; }
.local-view #local-task-form { width: 100%; min-width: 0; }
.local-view #local-task-input { min-width: 0; }
.local-view .list-task { align-items: stretch; padding-right: 0; }
.local-view .task-cycle { min-width: 0; }
.local-view .task-text { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.local-view .task-remove { flex: 0 0 2.75rem; width: 2.75rem; min-width: 2.75rem; align-self: stretch; margin: 0; }

/* The current to-do remains fully readable; its dashed underline signals
   that the text itself opens the existing hover/tap menu. */
.current-task-switcher { width: fit-content; max-width: min(42vw, 32rem); min-width: 0; flex: 0 1 auto; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 75%, transparent); transition: border-color .18s ease; }
.current-task-switcher:hover, .current-task-switcher:focus-within { border-bottom-color: var(--ink); }
#current-task-trigger { display: flex; width: 100%; max-width: 100%; padding: .3rem .2rem .25rem; border: 0; transition: color .18s ease; }
#current-task-trigger:hover, #current-task-trigger:focus-visible { color: var(--ink); }
#current-task-trigger > span:first-child { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.task-switch-menu {
  width: 100%; min-width: 0; max-width: none; padding: 0; overflow: hidden;
  border-radius: .35rem;
}
.task-switch-menu button {
  display: flex; align-items: flex-start; gap: .65rem; min-width: 0;
  padding: .65rem .75rem; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; white-space: normal; overflow-wrap: anywhere;
}
.task-switch-menu button:last-child { border-bottom: 0; }
.task-switch-menu .task-marker { margin-top: .05rem; font-size: .95rem; }
.task-switch-option-text { min-width: 0; overflow-wrap: anywhere; }
.task-switch-menu button:hover .task-marker,
.task-switch-menu button:focus-visible .task-marker { border-color: var(--accent); color: var(--accent); }

/* Keep the keyboard hint beside the action it describes. */
.reply { justify-content: flex-start; gap: 1rem; }
.reply > .enter-hint { margin: 0; }

/* A more legible music-alarm glyph: the slash covers the whole clock in quiet mode. */
.app-tools #sound-control {
  width: 3.1rem; min-width: 3.1rem; height: 3.1rem; min-height: 3.1rem;
  border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
}
.app-tools #sound-control:hover, .app-tools #sound-control:focus-visible,
.app-tools #sound-control[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.app-tools .exit-timer {
  flex: 0 0 3.1rem; width: 3.1rem; min-width: 3.1rem; height: 3.1rem; min-height: 3.1rem;
  display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%;
  color: light-dark(color-mix(in srgb, var(--paper) 88%, var(--ink)), color-mix(in srgb, var(--paper) 30%, #000)); font-size: 1.65rem;
}
.app-tools .exit-timer:hover, .app-tools .exit-timer:focus-visible {
  border-color: var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
}
.quiet-icon { width: 1.75rem; height: 1.75rem; overflow: visible; }
.quiet-icon .quiet-slash { opacity: 0; transition: opacity .16s ease; }
.quiet-icon.is-muted .quiet-slash { opacity: 1; }

@media (max-width: 40rem) {

  .rest-control:hover, .rest-control:focus-visible { transform: translateY(-1px); }
  .rest-control:active { transform: scale(.97); }
  .current-task-switcher { width: fit-content; max-width: 100%; min-width: 0; margin: .25rem 0 .8rem; flex: none; }
  .local-view.tasks-panel { max-width: none; }
  .local-view .task-remove { flex-basis: 2.5rem; width: 2.5rem; min-width: 2.5rem; }
  header { flex-wrap: nowrap; justify-content: space-between; gap: .5rem; }
  .app-tools { width: auto; flex: none; justify-content: flex-end; gap: .2rem; }
  .app-tools .utility-icon { width: 2.55rem; height: 2.55rem; min-width: 2.55rem; min-height: 2.55rem; padding: .35rem; }
  .app-tools .utility-icon svg { width: 1.35rem; height: 1.35rem; }
  .app-tools .exit-timer { flex-basis: 2.55rem; width: 2.55rem; min-width: 2.55rem; height: 2.55rem; min-height: 2.55rem; font-size: 1.5rem; }
  .reply { justify-content: flex-start; }
}
@media (min-width: 40.001rem) {
  [data-screen=focus] .app-tools #sound-control { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-tools button, .response, .begin-paw, .task-add,
  .task-cycle, .task-remove, .panel-actions button, .exit-timer, .rest-control,
  #current-task-trigger, .current-task-switcher, .quiet-icon .quiet-slash { transition: none; }
}

/* App-sized type: keep list actions and guidance comfortable at a glance. */
.local-view .panel-note {
  font-size: 1.15rem;
  line-height: 1.55;
}
.local-view #local-task-input {
  min-height: 5rem;
  font-size: 2.7rem;
  line-height: 1.3;
  font-family: Georgia, serif;
  font-weight: 400;
}
.local-view .task-add {
  min-height: 5rem;
  min-width: 7.5rem;
  padding-inline: 1.1rem;
  font: 400 1.1rem/1.3 system-ui, sans-serif;
}
.local-view .task-add kbd { font: 1rem/1 system-ui,sans-serif; }
.local-view .task-cycle {
  min-height: 6rem;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  line-height: 1.45;
  font-family: Georgia, serif;
  font-weight: 400;
}
.local-view .task-marker { font-family: system-ui,sans-serif; font-size: 2.5rem; }
.local-view .task-remove { font-size: 2rem; }
.local-view .selected-task-context { font-size: .82rem; }
.local-view .local-history-entry > p:not(.history-times) {
  font-size: 1.2rem;
  line-height: 1.55;
}
.local-view .local-history-entry .history-times,
.local-view .history-parent { font-size: .95rem; }
@media (max-width: 40rem) {
  .local-view .panel-note { font-size: 1.1rem; }
  .local-view #local-task-input { min-height: 4.5rem; font-size: 2.3rem; }
  .local-view .task-add { min-height: 4.5rem; font-size: 1.25rem; }
  .local-view .task-cycle { min-height: 5.5rem; font-size: clamp(2rem, 7vw, 2.6rem); }
  .local-view .task-remove { min-width: 3rem; font-size: 1.75rem; }
  .local-view .selected-task-context { font-size: .78rem; }
}

/* Keep list spacing and interaction motion deliberate across screen sizes. */
.local-view #local-task-form { align-items: stretch; gap: .75rem; }
.local-view #local-task-input { align-self: stretch; }
.local-view .local-task-list { display: grid; gap: 1rem; margin: .35rem 0 .8rem; }
.local-view .list-task {
  min-height: 6rem;
  padding: .2rem .4rem .2rem .8rem;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: .4rem;
  transition: all .24s ease-in-out;
}
.local-view .list-task.current {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.local-view .list-task.done { opacity: .68; }
.local-view .task-cycle,
.local-view .task-marker,
.local-view .task-text,
.local-view .task-remove,
.local-view #local-task-input,
.local-view .task-add {
  transition: all .24s ease-in-out;
}
.local-view .task-cycle { gap: 1.15rem; }
.local-view .task-add { align-self: stretch; }
.local-view .keybindings-note { margin-top: .55rem; }
.app-tools .exit-timer { color: light-dark(color-mix(in srgb, var(--paper) 88%, var(--ink)), color-mix(in srgb, var(--paper) 30%, #000)); }
@media (max-width: 40rem) {
  .local-view .list-task { min-height: 5.5rem; }
  .local-view #local-task-input { min-height: 4.5rem; }
  .local-view .task-add { min-height: 4.5rem; min-width: 6.5rem; font-size: 1rem; }
  .local-view .task-cycle { gap: .9rem; }
}

/* List content follows the quieter scale of the app's supporting views. */
.local-view #local-task-input { min-height: 3.8rem; font-size: clamp(1.5rem, 2.2vw, 2rem); padding: .5rem .15rem; }
.local-view .task-add { min-height: 3.8rem; min-width: 6rem; padding: .6rem .85rem; font-size: 1rem; }
.local-view .local-task-list { margin-top: .65rem; gap: .45rem; }
.local-view .list-task { min-height: 4.4rem; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; border-radius: 0; padding: .25rem .3rem .25rem .55rem; }
.local-view .task-cycle { min-height: 4rem; padding: .45rem .55rem; gap: 1rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.4; }
.local-view .task-marker { flex: 0 0 1.8rem; width: 1.8rem; font-size: 1.65rem; }
.local-view .list-task.current { border-left-color: var(--accent); }
.local-view .task-remove, .local-view .list-task.current .task-remove { color: color-mix(in srgb, var(--paper) 65%, #000); font-size: 1.4rem; }
.local-view .task-remove:hover, .local-view .task-remove:focus-visible { color: var(--muted); }
.app-tools .exit-timer { color: var(--muted); }
.reflection-statement .context { max-width: 48ch; font: 400 clamp(1.2rem, 2vw, 1.6rem)/1.55 Georgia, serif; }
.reflection-time { margin: 1.5rem 0 .75rem; color: var(--muted); font: .875rem/1.5 system-ui, sans-serif; }
@media (max-width: 40rem) {
 .local-view #local-task-input { font-size: 1.5rem; }
 .local-view .task-cycle { font-size: 1.5rem; }
 .local-view .task-add { min-height: 3.8rem; }
}
@media (prefers-reduced-motion: reduce) { .local-view * { transition: none; } }

/* Distinct close controls: list-view close is quiet; timer exit signals leaving. */
.app-tools #tasks-toggle.is-open { color: color-mix(in srgb, var(--paper) 55%, #000); background: transparent; border-color: transparent; }
.app-tools #tasks-toggle.is-open:hover, .app-tools #tasks-toggle.is-open:focus-visible { color: var(--muted); }
.local-view .task-remove, .local-view .list-task.current .task-remove { color: var(--muted); }
.current-task-switcher .task-switch-menu { min-width: min(22rem, calc(100vw - 2 * var(--gutter))); max-width: calc(100vw - 2 * var(--gutter)); }
.task-switch-menu .task-text, .task-switch-menu button { overflow-wrap: normal; word-break: normal; white-space: normal; }
.app-tools, .app-tools button, .quiet-icon { overflow: visible; }
[data-screen=focus] .app-tools #tasks-toggle, [data-screen=focus] .app-tools #history-toggle { display: none; }
.app-tools .exit-timer { color: light-dark(#9d625b, #bd8b81); }
.app-tools .exit-timer:hover, .app-tools .exit-timer:focus-visible { color: light-dark(#88483f, #e2b1a5); background: color-mix(in srgb, #b86c60 15%, transparent); border-color: transparent; }
.test-forward { align-self: center; margin: .5rem auto; padding: .45rem .75rem; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); font: .875rem/1.4 system-ui, sans-serif; transition: color .2s ease-in-out, background-color .2s ease-in-out; }
.test-forward:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.test-forward { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.test-forward svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Status copy must never paint over the header controls. */
#notification-status { background: transparent; pointer-events: none; }
@media (min-width: 40.001rem) {
 #notification-status { top: 6.5rem; bottom: auto; }
}

@media (min-width: 40.001rem) {
 #notification-status { right: max(var(--gutter), calc((100vw - 96rem) / 2 + var(--gutter))); left: auto; margin: 0; padding-inline: 0; text-align: right; }
}

.focus-project-label { display: block; padding: .35rem .2rem; color: var(--muted); font: 600 .75rem/1.5 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; overflow-wrap: anywhere; }

header > #sound-control { order: 2; position: static; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; min-height: 2.5rem; margin: 0 auto 0 .3rem; padding: .5rem; border: 0; border-radius: .35rem; background: transparent; color: color-mix(in srgb, var(--paper) 55%, #000); }
header > .brand { order: 0; }
header > .current-task-switcher { order: 1; }
header > .app-tools { order: 3; margin-left: auto; }
header > #sound-control svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
header > #sound-control:hover, header > #sound-control:focus-visible { color: var(--muted); background: transparent; }

/* A recessed speaker mark: dark stroke with a restrained lower edge. */
header > #sound-control { color: light-dark(#79675c, #15120f); }
header > #sound-control svg { stroke-width: 1.7; filter: drop-shadow(0 1px 0 light-dark(#ffffff, #62564a)); }
header > #sound-control:hover, header > #sound-control:focus-visible { color: light-dark(#58483e, #a18e78); }

.local-view .local-task-list { row-gap: 0; }

.local-view .local-history-entry .history-parent { margin-top: .8rem; color: var(--muted); font: 600 .75rem/1.5 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }

/* Warning text occupies its own space instead of covering app content. */
#little-steps #notification-status { position: static; inset: auto; width: auto; max-width: none; margin: 0 var(--gutter) 1rem; padding: 0; text-align: right; background: transparent; }
.history-update-time { color: var(--muted); font: .8em/1.5 system-ui, sans-serif; }
.trail-paw .paw-summary { position: absolute; z-index: 50; left: 0; bottom: calc(100% + .7rem); width: min(25rem, 75vw); padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); color: var(--ink); font: .9rem/1.6 system-ui, sans-serif; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(.25rem); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.trail-paw:nth-last-child(-n+4) .paw-summary { left: auto; right: 0; }
.trail-paw:hover .paw-summary, .trail-paw:focus-visible .paw-summary, .trail-paw.summary-open .paw-summary { opacity: 1; visibility: visible; transform: translateY(0); }

.local-view .local-history-entry > .history-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem; margin: 0 0 .65rem; color: var(--muted); font: 400 .75rem/1.5 system-ui, sans-serif; }
.history-meta .history-project { font: 600 .75rem/1.5 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.history-meta em { font: italic .8rem/1.5 Georgia, serif; letter-spacing: 0; text-transform: none; }