:root{font-family:Arial,"PingFang SC",sans-serif;color:#2b2925;background:#f7d96d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 20%,#fff3b8 0 3px,transparent 4px),radial-gradient(circle at 88% 75%,#ec5b39 0 3px,transparent 4px),#f7d96d;background-size:70px 70px,90px 90px}button,input{font:inherit}main{width:min(1140px,calc(100% - 36px));margin:auto;padding:28px 0 48px}header{display:flex;align-items:center;gap:22px;margin-bottom:22px}.mark{font-family:Georgia,serif;font-size:84px;font-style:italic;line-height:1;width:108px;height:108px;display:grid;place-items:center;border:4px solid #2b2925;border-radius:50%;background:#fff9e8;box-shadow:7px 7px 0 #2b2925}h1{font-size:clamp(40px,7vw,72px);letter-spacing:-.07em;line-height:.9;margin:5px 0}h1 i{font-family:Georgia,serif;font-weight:400}.kicker{margin:0;font-size:11px;font-weight:900;letter-spacing:.18em}.lead{margin:10px 0 0;max-width:610px}.number-card{display:flex;align-items:center;gap:18px;border:3px solid #2b2925;border-bottom:0;background:#fff9e8;padding:12px 18px}.number-card label{font-weight:800}.number-card>span{margin-left:auto;color:#827d6d;font-size:12px}.number-input{display:flex;border:2px solid #2b2925}.number-input button{width:40px;border:0;background:#f1e8cd;cursor:pointer}.number-input input{width:94px;text-align:center;border:0;border-left:2px solid #2b2925;border-right:2px solid #2b2925;background:white;font-size:22px;font-weight:900}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) 360px;border:3px solid #2b2925;background:#fff9e8;box-shadow:10px 10px 0 #2b2925}.canvas-wrap{padding:22px;border-right:3px solid #2b2925;min-width:0}.canvas-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.canvas-head span{font-family:Georgia,serif;font-size:24px}.canvas-head b{background:#2b2925;color:#fff9e8;padding:7px 10px;font-size:13px}canvas{display:block;width:100%;height:auto;background:#eaf3ef;border:2px solid #2b2925}.legend{display:flex;gap:20px;margin-top:10px;font-size:12px}.legend i{display:inline-block;margin-right:7px;vertical-align:middle}.square{width:13px;height:13px;background:#3d82f7;border:2px solid #2b2925}.dot{width:12px;height:12px;background:#ec5b39;border-radius:50%}aside{padding:22px}.ruler-head{display:flex;justify-content:space-between;align-items:end;font-weight:800}.ruler-head output{font-family:Georgia,serif;font-size:42px;line-height:1;color:#ec5b39}input[type=range]{width:100%;accent-color:#ec5b39}.ticks{display:flex;justify-content:space-between;font-size:11px}.verdict{margin:20px 0;padding:16px;border:2px solid #2b2925}.verdict.exact{background:#c8efc4}.verdict.remainder{background:#ffd0c6}.verdict small{text-transform:uppercase;letter-spacing:.15em}.verdict strong{display:block;font-family:Georgia,serif;font-size:24px;margin:5px 0}.verdict p{font-size:13px;margin:0;line-height:1.5}.pair-title{display:flex;justify-content:space-between;border-bottom:2px solid #2b2925;padding-bottom:8px}.pair-title b{font-size:12px}.pairs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;max-height:160px;overflow:auto}.pair{background:#f4e8c6;border:1px solid #2b2925;padding:8px;text-align:center;font-family:Georgia,serif}.pair.active{background:#3d82f7;color:white}.remember{display:flex;gap:8px;align-items:center;margin-top:20px;font-size:12px;color:#726e62}.remember input{accent-color:#ec5b39}@media(max-width:820px){main{width:min(100% - 22px,680px)}header{align-items:flex-start}.mark{width:74px;height:74px;font-size:56px;box-shadow:4px 4px 0 #2b2925}.lead{font-size:13px}.workspace{grid-template-columns:1fr;box-shadow:6px 6px 0 #2b2925}.canvas-wrap{border-right:0;border-bottom:3px solid #2b2925}.number-card{flex-wrap:wrap}.number-card>span{display:none}}@media(max-width:480px){main{padding-top:18px}header{gap:14px}.mark{width:58px;height:58px;font-size:44px;border-width:3px}h1{font-size:42px}.kicker,.lead{display:none}.number-card{justify-content:space-between;padding:10px}.number-card label{font-size:12px}.canvas-wrap,aside{padding:12px}.canvas-head span{font-size:18px}.canvas-head b{font-size:10px}.pairs{grid-template-columns:repeat(3,1fr)}}