:root{font-family:Arial,sans-serif;color:#303c36;background:#f7f4ed;font-size:16px;--green:#34483e;--muted:#646b62;--copper:#9a6745}
*{box-sizing:border-box}body{margin:0}main{max-width:600px;margin:auto;padding:24px 22px 36px}a{color:inherit;text-underline-offset:3px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px}header a{font:bold 16px Georgia,serif;text-decoration:none}header>span{font-size:12px;color:var(--muted);border:1px solid #d9d3c6;border-radius:20px;padding:5px 10px}
.intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 24px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.1px;color:var(--copper);margin:0 0 10px}.intro h1{font:700 clamp(48px,10vw,60px)/1 Georgia,serif;letter-spacing:-2px;margin:0 0 10px}.intro p:last-child{margin:0;color:var(--muted);line-height:1.5}.intro img{width:104px;height:104px;object-fit:contain;mix-blend-mode:multiply}
button,input{font:inherit}button{cursor:pointer;border:1px solid #d4d4c9;border-radius:10px;background:#fffdf8;color:var(--green);padding:12px 16px;font-weight:700;min-height:44px}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.workbench{background:#fffdf8;border:1px solid #dfd9cc;border-radius:18px;padding:24px;box-shadow:0 4px 16px #3f392407}.bench-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}h2{font:700 24px Georgia,serif;margin:0}#progress{font-size:14px;color:var(--muted)}.progress-track{height:3px;border-radius:4px;background:#e9e9df;margin-top:16px;overflow:hidden}#progressFill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#79916e;border-radius:inherit}.instruction{font-size:16px;line-height:1.5;color:var(--muted);margin:16px 0 20px}
#chain{display:grid}.row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;border:1px solid #d9d8cd;border-radius:10px;font-size:18px;font-weight:700;letter-spacing:2px;text-align:left;padding:12px 15px}.row>span{overflow-wrap:anywhere}.row small{flex-shrink:0;font:normal 14px Arial,sans-serif;letter-spacing:0;color:var(--muted)}.row.known{background:#eaf0e5;border-color:#d9e2d2;color:#38503b}.row.active{background:#fbefdf;border-color:var(--copper);box-shadow:inset 3px 0 0 var(--copper)}.row.active small{color:#825735}.row.locked{background:#f4f3ee;border-color:#e8e6de;color:#75786f}.connector{height:24px;display:flex;align-items:center;justify-content:center;color:#587148;font-size:12px}.connector::before{content:'';height:14px;width:1px;background:#d5dbce}.connector.linked::before{display:none}.connector span{padding:0 8px}
form{margin-top:22px;border-top:1px solid #e9e5dc;padding-top:18px}label{display:block;font-size:14px;font-weight:700;margin-bottom:9px;line-height:1.5}.entry{display:flex;gap:8px}input{min-width:0;width:100%;border:1px solid #b8bdaf;background:#fffefa;color:var(--green);border-radius:10px;padding:13px;text-transform:uppercase;font-weight:700;letter-spacing:2px}input::placeholder{font-weight:400;color:#7a7e73;letter-spacing:1px}.primary{background:var(--green);border-color:var(--green);color:white}#message{min-height:42px;font-size:14px;line-height:1.5;margin:12px 0 8px;color:var(--muted)}.actions{display:flex;justify-content:space-between;gap:8px}.actions button{font-size:14px}#reset{border-color:transparent;background:transparent;color:var(--muted)}#hint:disabled{opacity:.5}#success{text-align:center;padding:24px 0 4px;border-top:1px solid #e3e8db;margin-top:18px}#success p{line-height:1.6;font-size:16px;color:var(--muted)}details{margin-top:24px;line-height:1.6;padding:0 4px}summary{cursor:pointer;font-size:14px;font-weight:700;padding:6px 0}details p{font-size:16px}footer{margin-top:26px;font-size:13px;color:#6c7368;line-height:1.8;text-align:center}[hidden]{display:none!important}
@media(hover:hover){button:not(:disabled):hover{background:#f0f1e8}.primary:not(:disabled):hover{background:#465e4f}.row.active:hover{background:#f8e8d2}}
@media(max-width:420px){main{padding:20px 14px 30px}.workbench{padding:20px 14px}.intro img{width:82px;height:82px}.eyebrow{max-width:220px;line-height:1.5}.row{font-size:16px;padding:12px;letter-spacing:1.5px}.row small{font-size:12px}.bench-heading h2{font-size:22px}}
/* Brief, event-driven motion. Reduced-motion users receive the same static feedback. */
@media(prefers-reduced-motion:no-preference){
button{transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}input{transition:border-color 160ms ease,background-color 160ms ease}#progressFill{transition:transform 350ms ease-out}
.row.just-selected{animation:settle 180ms ease-out}.row.just-joined{animation:join-in 360ms ease-out}.row.just-hinted>span{animation:letter-in 220ms ease-out}.connector.just-linked span{animation:phrase-in 300ms ease-out both}#chain.chain-enter{animation:phrase-in 240ms ease-out}#success.celebrate{animation:phrase-in 380ms ease-out}
@keyframes settle{from{box-shadow:inset 3px 0 0 var(--copper),0 0 0 3px #9a674518}to{box-shadow:inset 3px 0 0 var(--copper),0 0 0 0 #9a674500}}
@keyframes join-in{from{background:#f8edcf;transform:translateY(2px)}to{background:#eaf0e5;transform:translateY(0)}}
@keyframes letter-in{from{opacity:.55}to{opacity:1}}
@keyframes phrase-in{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
}
.daily-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 3px 16px;font-size:14px;color:var(--muted)}.daily-heading>span{font-weight:700;color:var(--green)}.daily-reminder{font-size:14px;color:var(--muted);line-height:1.5}.actions{align-items:center}#success:focus{outline:none}@media(max-width:420px){.intro h1{font-size:46px}.intro img{width:76px;height:76px}.actions .daily-reminder{max-width:130px;text-align:right}}

main{padding-bottom:110px}html.large-text{font-size:19px}header .text-size-button{font-size:16px;width:44px;height:44px}#success .club-completion{margin-top:20px}.site-taskbar{font-family:Arial,sans-serif}.site-taskbar svg{max-width:24px;max-height:24px}