/* brunnr — one dark world: black water, bone light, a single eye.
   Voice = Spectral italic. Labels = Martian Mono, small, spaced. */
:root{
  --void:#07080b;
  --bone:#d6cfbd;
  --dim:#7a7466;
  --faint:#2b2b30;
  --ember:#b0703a;                       /* used only for the waking glow */
  --voice:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--void);color:var(--bone);font-family:var(--voice);
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) max(20px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0) max(20px,env(safe-area-inset-left,0px));
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- screens ---------- */
.screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
        max-width:460px;margin:0 auto;text-align:center;padding-block:48px}
.screen[hidden]{display:none}

/* ---------- the eye ---------- */
.eye{width:min(74vw,330px);height:auto;transition:transform .6s ease,width .8s ease}
.eye .lines{stroke:var(--bone);fill:none;stroke-linecap:round;stroke-linejoin:round}
.eye .pupil{fill:var(--bone);transform-box:fill-box;transform-origin:center;
            transition:transform 1.6s cubic-bezier(.2,.8,.2,1),fill 1.6s ease;
            animation:breathe 7s ease-in-out infinite}
.eye.flinch{animation:flinch .5s ease}
.eye.open .pupil{transform:scale(2.2);fill:var(--ember);animation:none;opacity:1}
.eye.small{width:min(40vw,150px)}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes flinch{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.15)}}

/* ---------- voice ---------- */
.voice{font-style:italic;font-size:clamp(1.15rem,5vw,1.45rem);line-height:1.45;min-height:2.9em;margin:0;
       letter-spacing:.01em;text-wrap:balance}
.voice.quiet{color:var(--dim);font-size:1rem;min-height:0}
.caret::after{content:"";display:inline-block;width:.5ch;height:1em;margin-left:2px;vertical-align:-.12em;
              background:var(--bone);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- speaking ---------- */
form.say{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
form.say input{
  width:min(100%,320px);background:transparent;border:0;border-bottom:1px solid var(--faint);
  color:var(--bone);font-family:var(--voice);font-size:1.5rem;text-align:center;padding:8px 4px;
  border-radius:0;letter-spacing:.06em;transition:border-color .3s ease;
}
form.say input:focus{outline:none;border-bottom-color:var(--dim)}
button{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone);background:transparent;border:1px solid var(--faint);border-radius:2px;
  padding:12px 22px;cursor:pointer;transition:border-color .3s ease,color .3s ease;
}
button:hover,button:focus-visible{border-color:var(--dim);outline:none}
button.plain{border:0;color:var(--dim);padding:8px}
button[disabled]{opacity:.35;cursor:default}

/* ---------- the knot page ---------- */
.label{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.meter{width:min(100%,320px);display:flex;flex-direction:column;gap:8px}
.meter .bar{height:2px;background:var(--faint);overflow:hidden}
.meter .fill{height:100%;width:0;background:var(--bone);transition:width 2s cubic-bezier(.2,.8,.2,1)}
.meter .row{display:flex;justify-content:space-between}
.word{display:flex;flex-direction:column;gap:10px;align-items:center}
.word .w{font-family:var(--mono);font-size:1.35rem;letter-spacing:.18em}
.word .note{font-style:italic;color:var(--dim);font-size:.95rem;margin:0;max-width:30ch}
canvas.web{width:100%;height:260px;display:block}
.foot{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:#4d483f;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .eye .pupil{animation:none;opacity:.6;transition:none}
  .eye.flinch{animation:none}
  .caret::after{animation:none}
}