body{background:#e6f1e6;color:#31584c;background-image:radial-gradient(#a4c5aa55 1px,transparent 1px);background-size:20px 20px}main{max-width:1060px;padding:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left))}header{min-height:90px;position:relative;padding-right:200px}header:after{content:'';position:absolute;right:62px;top:-8px;width:170px;height:100px;background:url(studio.svg) center/contain no-repeat;pointer-events:none}header>button{position:relative;z-index:1}h1{font-size:30px;letter-spacing:1px}small{font-size:11px;letter-spacing:2px;color:#537062}.layout{gap:20px;margin-top:14px;grid-template-columns:240px minmax(0,1fr)}.card{border:2px solid #b8ccad;background:#fffdf3;box-shadow:0 6px 0 #c7dbc5;border-radius:24px;padding:18px}.reference h2{font-size:22px;margin:10px 0}.reference p{font-size:14px;line-height:1.65}.ref{width:176px;height:176px;border:7px solid white;box-shadow:0 2px 0 2px #dce5d7;border-radius:9px;gap:0;position:relative}.ref span{display:grid;place-items:center;font-size:9px;color:#355446}.board{background:#c0d5c2;border:3px solid #799e85;box-shadow:0 5px 0 #688e75,inset 0 0 0 4px #eff7e7;gap:3px;padding:10px;border-radius:15px;width:min(100%,440px)}.cell{border-radius:3px;border:1px solid #698c7040;box-shadow:inset 0 2px 0 #ffffff80;font-size:12px;font-weight:700;color:#284c40}.cell:hover{outline:2px solid #436c52;z-index:1}.palette{gap:12px;margin:18px 0 12px}.swatch{width:48px;height:48px;min-width:40px;border-radius:50% 50% 40% 40%;box-shadow:0 4px 0 #c2c7ae;border:3px solid white;font-weight:800}.swatch.active{outline:3px solid #3a775c;transform:translateY(-3px)}button,select{font:inherit;min-height:44px;padding:9px 13px;border-radius:13px;border:2px solid #c6d5bc;background:#fffef7;color:#31584c;max-width:100%}button{box-shadow:0 3px 0 #dae3cf}button:active{transform:translateY(2px);box-shadow:none}#start,#next{background:#4e8c69;color:#fff;border-color:#3c7356;box-shadow:0 3px 0 #34694c}progress{height:12px;accent-color:#61976b}#status{font-size:14px;margin:8px 0}#record{font-size:12px;margin-bottom:0}.actions{gap:8px;margin-top:12px;font-size:13px}section>.actions{justify-content:center}section>.actions:last-child{border-top:1px dashed #bbceb3;padding-top:12px}select{min-width:0}.actions select{flex:1 1 150px}footer{font-size:12px;text-align:center;margin-top:18px}dialog{border:3px solid #759c7c;background:#fffdf3;box-shadow:0 10px 0 #25493622}button:focus-visible,select:focus-visible{outline:3px solid #df9a54;outline-offset:3px}@media(max-width:600px){main{padding:12px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left))}header{min-height:58px;padding-right:0}header:after{display:none}header h1{font-size:23px}header small{font-size:10px;letter-spacing:1px}.layout{grid-template-columns:1fr;gap:12px;margin-top:10px}.card{padding:12px;border-radius:18px}.reference{grid-template-columns:104px 1fr;gap:12px}.ref{width:104px;height:104px;border-width:4px;margin:0}.ref span{font-size:7px}.reference h2{font-size:18px;margin:5px 0}.reference p{font-size:12px;line-height:1.5;margin:3px 0}.reference small{font-size:10px;letter-spacing:0}aside .actions{margin-top:8px}aside .actions button{flex:1;padding:7px 5px;font-size:12px}#record{margin-top:8px}#status{margin:5px 0}.board{padding:7px;gap:2px;width:min(100%,400px)}.palette{margin:12px 0;gap:12px}.swatch{width:44px;height:44px}.cell{font-size:11px}footer{margin-top:12px}}@media(orientation:landscape) and (max-height:550px){main{padding-top:8px}header{min-height:44px;padding-right:0}header:after{display:none}header h1{font-size:21px}header small{display:none}.layout{grid-template-columns:190px minmax(0,1fr);gap:12px;margin-top:8px}.card{padding:10px}.reference{display:block}.ref{width:128px;height:128px;margin:0 auto 8px;border-width:4px}.reference h2{font-size:17px;margin:4px 0}.reference p{font-size:12px;line-height:1.4}.board{width:min(100%,340px);padding:7px;gap:2px}.palette{gap:9px;margin:12px 0}.swatch{height:44px;width:44px}.cell{font-size:11px}footer{display:none}}@media(prefers-reduced-motion:no-preference){.cell,.swatch{transition:transform .1s,background .12s}}
.swatch[data-color="4"]{color:#fffdf3}.swatch[data-color="3"]{color:#193e30}
@media(min-width:601px) and (min-height:551px){header{padding-right:0}header:after{right:110px}} progress{appearance:none;border:0;border-radius:8px;overflow:hidden;background:#dfebd6}progress::-webkit-progress-bar{background:#dfebd6;border-radius:8px}progress::-webkit-progress-value{background:#72a481;border-radius:8px}