@font-face{font-family:Literata;src:url('/assets/literata.woff2') format('woff2');font-display:swap;font-weight:400 700}
:root{--paper:#f8f7f3;--ink:#232d29;--muted:#606b64;--line:#d8ded7;--accent:#315e49;--wash:#e9eee6;--error:#9a3932;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}a{color:inherit;text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}::selection{background:#d8e3d6}input{caret-color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}html{scrollbar-color:#a5b3a8 var(--paper)}
.shell{max-width:920px;margin:auto;padding:0 28px;min-height:100svh;display:flex;flex-direction:column}.masthead{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:600 32px Literata,Georgia,serif;letter-spacing:-.035em}.brand svg{width:25px;height:30px;color:var(--accent)}.masthead .help{border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;text-decoration:none}.help svg{width:18px;height:18px}
main{flex:1}.game{max-width:460px;margin:34px auto 56px;text-align:center}.daily{font-size:12px;color:var(--muted);letter-spacing:.06em;margin:0 0 22px;font-variant-numeric:tabular-nums}.segmented{display:inline-flex;border-bottom:1px solid var(--line);gap:8px;margin-bottom:30px}.segmented button{border:0;background:none;padding:12px 22px;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}.segmented button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);font-weight:700}.segmented button:hover{background:var(--wash)}
h1,h2{font-family:Literata,Georgia,serif;font-weight:500;letter-spacing:-.025em;text-wrap:balance}.game h1{font-size:29px;line-height:1.35;margin:0 0 9px}.intro{font-size:14px;color:var(--muted);margin:0 0 32px;line-height:1.6}.goal{position:sticky;top:0;background:var(--paper);z-index:2;display:flex;align-items:center;justify-content:center;gap:15px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px;font-size:12px;color:var(--muted)}.goal strong{font-size:16px;color:var(--accent);letter-spacing:.18em}.goal svg{width:36px;height:12px}.ladder{list-style:none;padding:0;margin:0 auto;max-width:330px}.ladder li{position:relative;margin-bottom:16px}.ladder li+li:before{content:'';position:absolute;top:-16px;left:50%;height:16px;border-left:1px solid var(--line)}.row{display:flex;gap:8px;justify-content:center}.tile{display:grid;place-items:center;width:49px;height:50px;border:1px solid var(--line);font-size:23px;font-weight:500;border-radius:3px;background:var(--paper)}.changed{background:var(--wash);border-color:#adc0ae;color:var(--accent)}.current .tile{border-color:#8a9f90}.step{position:absolute;right:calc(100% - 12px);top:18px;font-size:10px;color:var(--muted);white-space:nowrap}.accepted{animation:accept .24s cubic-bezier(.16,1,.3,1)}
.entry{margin:19px auto 0;max-width:330px}.input-wrap{position:relative;display:flex;justify-content:center}.input-wrap input{width:100%;height:56px;text-align:center;letter-spacing:.35em;text-transform:uppercase;background:transparent;border:0;border-bottom:2px solid var(--accent);font-size:24px;color:var(--ink);border-radius:0;padding:0 12px}.input-wrap input::placeholder{letter-spacing:.02em;text-transform:none;font-size:15px;color:var(--muted)}.input-wrap input:focus{outline:none;background:#f0f2eb}.input-wrap:focus-within{outline:2px solid var(--accent);outline-offset:4px}.submit{width:100%;margin-top:16px;padding:14px 20px;background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:4px;font-size:14px}.submit:hover{background:#244b38}.status{min-height:44px;font-size:13px;line-height:1.5;margin:14px 0 0;color:var(--muted)}.status.error{color:var(--error)}.actions{display:flex;justify-content:center;gap:26px}.text-button{border:0;background:none;color:var(--ink);padding:10px 8px;font-size:13px;display:inline-flex;gap:7px;align-items:center;justify-content:center}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.text-button svg{height:17px;width:17px}.hint-word{font-weight:700;letter-spacing:.15em}.saving-note{color:var(--muted);font-size:11px;margin:21px 0 0;line-height:1.6}.storage-warning{font-size:13px;color:var(--error);line-height:1.5}.result{margin:26px auto 0;border-top:1px solid var(--line);padding-top:24px}.result h2{font-size:28px;margin:0 0 10px}.result p{font-size:14px;line-height:1.6}.result dl{display:flex;justify-content:center;gap:28px;margin:24px 0}.result dl div{display:flex;flex-direction:column-reverse;gap:6px}.result dt{font-size:11px;color:var(--muted)}.result dd{font:500 26px Literata,Georgia,serif;margin:0}.countdown{font-variant-numeric:tabular-nums}.route{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:20px 0;line-height:2}.route span{font-size:13px;letter-spacing:.08em}.route b{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.route i{font-style:normal;color:var(--muted)}details{font-size:13px;margin:22px 0}summary{cursor:pointer;padding:8px}.manual-share{width:100%;min-height:140px;font-size:14px;background:var(--paper);padding:12px;color:var(--ink)}[hidden]{display:none!important}
footer{border-top:1px solid var(--line);padding:24px 0 25px;text-align:center;color:var(--muted)}footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 23px;font-size:11px}footer a{text-decoration:none}footer a:hover{text-decoration:underline}footer p{font-size:10px;margin:18px 0 0}.article{max-width:640px;margin:55px auto 80px;font-size:16px;line-height:1.8}.article h1{font-size:38px;line-height:1.2;margin:0 0 28px}.article h2{font-size:23px;margin:35px 0 12px}.article p{margin:12px 0}.article li{margin:10px 0}.article .route{justify-content:flex-start}.article .back{display:inline-block;margin-top:30px;font-size:14px}.article .note{padding:16px 0;border-block:1px solid var(--line);font-size:14px}.skip{position:absolute;left:10px;top:-100px;padding:10px;background:var(--paper);z-index:10}.skip:focus{top:10px}.ad-placement:empty{display:none}.ad-placement:not(:empty){margin:64px auto 32px;min-height:280px;max-width:728px;border-top:1px solid var(--line);padding-top:20px}.preview-note{font-size:12px;color:var(--muted)}
@keyframes accept{from{transform:translateY(5px);background:#dce7da}to{transform:translateY(0);background:transparent}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}@media(max-width:540px){.shell{padding:0 22px}.masthead{height:82px}.brand{font-size:29px}.game{margin-top:25px}.daily{margin-bottom:14px}.segmented{margin-bottom:23px}.game h1{font-size:26px}.intro{margin-bottom:25px;font-size:13px}.goal{margin-bottom:25px}.tile{width:45px;height:48px}.row{gap:6px}.step{right:calc(100% - 24px)}.entry{max-width:280px}.article{margin-top:35px}.article h1{font-size:32px}footer nav{gap:14px 19px}}


/* Small tactile feedback; the accepted rung is the single focal animation. */
button,.help{transition:background-color 140ms ease,color 140ms ease,transform 120ms ease}
button:not(:disabled):active,.help:active{transform:scale(.975)}
.accepted{animation:none}
.accepted .tile{animation:rung-flip 580ms cubic-bezier(.16,1,.3,1) both}
.accepted .tile:nth-child(2){animation-delay:55ms}
.accepted .tile:nth-child(3){animation-delay:110ms}
.accepted .tile:nth-child(4){animation-delay:165ms}
.accepted .tile:nth-child(5){animation-delay:220ms}
.input-wrap input[aria-invalid=true]{border-color:var(--error);background:#f8eeeb}
@keyframes rung-flip{from{transform:perspective(480px) rotateX(-78deg);opacity:.65}to{transform:perspective(480px) rotateX(0);opacity:1}}
@media(min-width:700px){
  .shell{max-width:1040px}
  .masthead{height:94px}
  .game{max-width:560px;margin-top:26px;margin-bottom:38px}
  .segmented{margin-bottom:24px}
  .intro{font-size:15px;margin-bottom:25px}
  .goal{padding:16px 0;font-size:13px;margin-bottom:25px}
  .goal strong{font-size:19px}
  .ladder,.entry{max-width:390px}
  .tile{width:60px;height:60px;font-size:28px}
  .row{gap:10px}
  .step{top:23px;right:calc(100% - 13px);font-size:11px}
  .input-wrap input{height:62px;font-size:28px}
  .submit{padding:16px 22px;font-size:15px}
  .status{min-height:34px}
  .text-button{font-size:14px}
  .saving-note{font-size:12px;margin-top:16px}
  footer nav{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  button,.help{transition:background-color 140ms ease,color 140ms ease}
  button:not(:disabled):active,.help:active{transform:none}
  .accepted .tile{animation:none}
}
/* One native text field, mirrored into positional letter cells. */
.input-wrap{--cell:49px;--gap:8px;--count:4;width:calc(var(--cell)*var(--count) + var(--gap)*(var(--count) - 1));margin:0 auto}
.input-wrap[data-length="5"]{--count:5}
.input-letters{display:flex;gap:var(--gap);pointer-events:none}
.input-cell{width:var(--cell);height:var(--cell);display:grid;place-items:center;font-size:23px;border:1px solid #8a9f90;border-radius:3px;background:var(--paper)}
.input-wrap input,.input-wrap input:focus{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;color:transparent;caret-color:transparent;letter-spacing:0;outline:none}
.input-wrap input::selection{color:transparent;background:transparent}
.input-wrap:focus-within{outline:none}
.input-wrap:focus-within .input-cell.is-cursor{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px;background:var(--wash)}
.input-wrap:focus-within .input-cell.is-selected{background:#d8e3d6}
.input-wrap:has(input[aria-invalid=true]) .input-cell{border-color:var(--error);background:#f8eeeb}
.input-wrap input[aria-invalid=true]{background:transparent}
@media(min-width:700px){.input-wrap{--cell:60px;--gap:10px}.input-cell{font-size:28px}}
@media(max-width:540px){.input-wrap{--cell:45px;--gap:6px}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}