*{box-sizing:border-box}body{margin:0;background:#f8f5ee;color:#273e37;font-family:system-ui,sans-serif}header,main,footer{width:min(1180px,calc(100% - 40px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dbdfd4;padding:24px 0}a{color:inherit}.brand{font-size:27px;font-weight:800;text-decoration:none;letter-spacing:-1px}.brand span{color:#859180}header>span{font-size:13px}main{padding:54px 0}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;color:#687c6a}h1{font-size:clamp(42px,6vw,70px);letter-spacing:-2px;margin:18px 0}h1 em{font-family:Georgia,serif;color:#aa593f;font-weight:400}.intro{max-width:760px;font-size:18px;line-height:1.8}.hint{max-width:780px;font-size:13px;line-height:1.7;color:#66756c}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:24px;background:#e8eddf;border-radius:18px;margin:32px 0}.controls label{display:grid;gap:9px;font-size:13px;font-weight:650}select{padding:12px;border:1px solid #a1b09b;border-radius:8px;background:white;color:#273e37;font:inherit}.controls .check{display:flex;align-items:center;font-size:13px}input{accent-color:#326f63}input[type=checkbox]{width:18px;height:18px}button{padding:14px 26px;background:#285f53;color:white;font:inherit;font-weight:700;border:0;border-radius:10px;cursor:pointer;margin-left:auto}button:hover{background:#194b40}button:disabled{opacity:.6}.sheet{background:white;border:1px solid #dce1d5;border-radius:20px;box-shadow:0 12px 35px #334c3110;padding:28px}.sheet-head{display:flex;justify-content:space-between;gap:20px;align-items:center}h2{font-size:25px;margin:8px 0 16px}.legend{display:flex;gap:8px;align-items:center;font-size:12px}.legend i,.legend b{width:10px;height:10px;border-radius:50%;background:#a04d33}.legend b{background:#287367;margin-left:10px}#instruction{color:#657268;font-size:14px;line-height:1.7}.score-scroll{overflow-x:auto}svg{display:block;width:100%;min-width:850px}svg text{font-family:system-ui,sans-serif}.transport{display:flex;align-items:center;gap:25px;border-top:1px solid #e9ece5;padding-top:20px}.beats{display:flex;gap:8px}.beats span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf1e7;color:#647563}.beats .active{background:#285f53;color:white}#status{font-size:14px}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:38px 0}.tips article>span{color:#a35d43;font-family:Georgia,serif;font-size:30px}h3{font-size:18px}.tips p,details p{font-size:14px;line-height:1.8;color:#607268}details{padding:20px;border:1px solid #dce1d5;border-radius:12px}summary{cursor:pointer;font-weight:650}footer{border-top:1px solid #dce1d5;padding:24px 0;display:flex;flex-wrap:wrap;gap:24px;align-items:center;font-size:13px}footer nav{display:flex;gap:20px;margin-left:auto}footer p{width:100%;color:#758172;font-size:12px;margin:0}:focus-visible{outline:3px solid #b76a35;outline-offset:4px}@media(max-width:680px){main{padding-top:32px}.sheet{padding:16px}.sheet-head,.transport{align-items:flex-start;flex-direction:column;gap:8px}.tips{grid-template-columns:1fr;gap:10px}.controls{gap:18px;padding:18px}.controls>label:first-child{width:100%}button{width:100%;margin:0}header>span{font-size:11px}.legend{margin-bottom:10px}}