* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:   #0a0c0a;
  --ink:  #9be9a8;
  --dim:  #3d5c46;
  --hit:  #4ade80;
  --over: #d98a62;
  --tide: #58a6c8;
  --flood: rgba(88, 166, 200, .2);
  --sel:  rgba(74, 222, 128, .25);
  --fs:   clamp(17px, 2.4vw, 21px);
  color-scheme: dark;
}

/* creme paper, black ink */
:root[data-theme="paper"] {
  --bg:   #f6f1e3;
  --ink:  #221d15;
  --dim:  #b3a789;
  --hit:  #2f7d46;
  --over: #c05f33;
  --tide: #3d7ea6;
  --flood: rgba(61, 126, 166, .2);
  --sel:  rgba(47, 125, 70, .22);
  color-scheme: light;
}

/* dusk: candlelight gold on deep violet */
:root[data-theme="dusk"] {
  --bg:   #171321;
  --ink:  #e6c98f;
  --dim:  #5d5372;
  --hit:  #ffcf6e;
  --over: #e2725b;
  --tide: #6ea8d8;
  --flood: rgba(110, 168, 216, .22);
  --sel:  rgba(230, 201, 143, .25);
}

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  caret-color: var(--hit);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: var(--sel); }

.page {
  max-width: 38rem;
  margin: 0 auto;
  min-height: 100vh;
  font-size: var(--fs);
  line-height: 2em; /* computes to px so the gutter inherits the exact line grid */
  padding: 22vh calc(1rem + 3.4em) 45vh 1.25rem;
  cursor: text;
}

.doc { position: relative; }

.editor {
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-height: 2em;
}

.gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 3.4em;
  pointer-events: none;
  user-select: none;
}

.gutter span {
  position: absolute;
  left: 1.3em;
  font-size: .68em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}

.gutter span[data-state="hit"]  { color: var(--hit); }
.gutter span[data-state="over"] { color: var(--over); }

.doc.empty::after {
  content: "5 · 7 · 5 · 7 · 7";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--dim);
  pointer-events: none;
}

.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem calc(.8rem + env(safe-area-inset-right))
           calc(.5rem + env(safe-area-inset-bottom))
           calc(.9rem + env(safe-area-inset-left));
  pointer-events: none;
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .05em;
}

.tools {
  display: flex;
  align-items: center;
  gap: .1rem;
  pointer-events: auto;
}

.tool {
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  opacity: .6;
  padding: .2rem .45rem;
  transition: color .25s ease;
}

.tool:hover { color: var(--ink); opacity: 1; }

.clear {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.clear.holding { color: var(--tide); opacity: 1; }

/* hold progress: an ocean tide takes the full three seconds to reach the
   top of the page; let go early and it falls away */
.flood {
  position: fixed;
  inset: 0;
  transform: translateY(calc(100% + 48px)); /* tuck the waves away too */
  transition: transform .7s cubic-bezier(.55, .06, .8, .5);
  pointer-events: none;
}

.flood.rise {
  transform: translateY(0);
  transition: transform 3s linear;
}

/* the water is one translucent body whose surface is cut by a mask.
   The surface tile is 900px of hand-drawn coastline — three crests of
   different heights and widths and two unequal troughs — so a phone
   sees well under one tile and no crest visibly repeats */
.flood::before {
  content: "";
  position: absolute;
  inset: -28px 0 -20px 0;
  background: var(--flood);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 28'%3E%3Cpath d='M0 14 C50 14 75 3 145 3 C215 3 245 25 320 25 C385 25 405 9 470 9 C535 9 555 21 625 21 C680 21 705 1 775 4 C830 6.5 870 14 900 14 V28 H0 Z'/%3E%3C/svg%3E") 0 0/900px 28px repeat-x,
                linear-gradient(#000, #000) 0 28px/100% calc(100% - 28px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 28'%3E%3Cpath d='M0 14 C50 14 75 3 145 3 C215 3 245 25 320 25 C385 25 405 9 470 9 C535 9 555 21 625 21 C680 21 705 1 775 4 C830 6.5 870 14 900 14 V28 H0 Z'/%3E%3C/svg%3E") 0 0/900px 28px repeat-x,
        linear-gradient(#000, #000) 0 28px/100% calc(100% - 28px) no-repeat;
  animation: slosh 6.8s ease-in-out infinite paused,
             chop 20s linear infinite paused;
}

.flood.rise::before { animation-play-state: running; }

/* the swell: the whole surface heaves on an uneven beat */
@keyframes slosh {
  0%   { transform: translateY(0); }
  14%  { transform: translateY(-12px); }
  27%  { transform: translateY(-4px); }
  41%  { transform: translateY(-11px); }
  56%  { transform: translateY(3px); }
  70%  { transform: translateY(10px); }
  82%  { transform: translateY(-2px); }
  92%  { transform: translateY(7px); }
  100% { transform: translateY(0); }
}

/* the drift: the crest pattern travels one full tile per loop,
   independent of the heave */
@keyframes chop {
  to {
    -webkit-mask-position: -900px 0, 0 28px;
    mask-position: -900px 0, 0 28px;
  }
}

.fs { font-size: 1.05rem; }

/* touch screens: same quiet glyphs, thumb-sized targets */
@media (pointer: coarse) {
  .tools { gap: .4rem; }
  .tool { padding: .75rem .6rem; }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  .fs { display: none; }
}