*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#f1dcc4;color:#354f40;font-family:system-ui,sans-serif}canvas{display:block;touch-action:none}header{position:fixed;top:25px;left:28px;right:28px;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}header p{font-size:9px;font-weight:800;letter-spacing:2.4px;margin:0 0 7px}h1{font:normal 48px/1 Georgia,serif;margin:0}header span{display:block;font:italic 16px Georgia,serif;margin-top:7px}button{border:1px solid #a8ac90;background:#fff8e8e8;color:#354f40;border-radius:8px;padding:10px 15px;font:600 12px system-ui;cursor:pointer;pointer-events:auto;box-shadow:0 3px 9px #4e472711}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b87439;outline-offset:3px}aside{display:none;position:fixed;z-index:20;left:28px;top:145px;width:245px;background:#fff9e7e8;border:1px solid #c7c4a9;border-radius:12px;padding:19px;backdrop-filter:blur(8px);box-shadow:0 6px 20px #544a2110}aside.open{display:block}h2{font:normal 22px/1.2 Georgia,serif;margin:0 0 13px}aside p{font-size:12px;line-height:1.6}ol{padding:0;list-style:none;counter-reset:items}li{font-size:11px;line-height:1.6;margin:9px 0;padding-left:22px;position:relative}li:before{counter-increment:items;content:counter(items);position:absolute;left:0;top:0;background:#e7e7cf;border-radius:50%;width:16px;height:16px;text-align:center;font-size:9px}.done:before{content:'✓';background:#698b61;color:white}small,details{font-size:10px;line-height:1.6}details{margin-top:15px;border-top:1px solid #d8d4bb;padding-top:10px}summary{cursor:pointer}a{color:inherit}footer{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;background:#fff8e9ed;border:1px solid #c6c4ac;border-radius:14px;padding:14px 19px;box-shadow:0 6px 24px #544a2120;max-width:calc(100vw - 32px);backdrop-filter:blur(8px)}footer>div{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:12px}#phase{font-size:12px;font-weight:600;min-width:290px}#moments{font-size:10px;white-space:nowrap;color:#73806a}nav{display:flex;gap:8px;align-items:center;justify-content:center}nav button:first-child{background:#45654d;color:#fff5da;border-color:#45654d}nav label{font-size:11px;white-space:nowrap}input{accent-color:#547552}#wool{color:#768069;font-style:italic}@media(max-width:700px){header{top:15px;left:18px;right:18px}h1{font-size:36px}header p{font-size:7px;letter-spacing:1.8px}header span{font-size:13px}aside{left:16px;top:120px;width:225px;max-height:calc(100vh - 290px);overflow:auto;padding:16px}footer{bottom:12px;padding:12px;width:calc(100vw - 24px);max-width:none}footer>div{display:block;margin-bottom:8px}#phase{display:block;min-width:0;font-size:11px}#moments{display:block;margin-top:3px}nav{gap:5px;flex-wrap:wrap}nav button{padding:8px 10px;font-size:10px}nav label{font-size:10px}}