.percent-lab{padding:24px;margin:24px 0;background:#f0f5fc;border:1px solid #cbd7eb;border-radius:20px}.percent-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:24px 0}.percent-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));width:100%;max-width:500px;margin:auto}.percent-grid button{padding:0;min-width:0;min-height:0;aspect-ratio:1;background:white;border:1px solid #b4c3de;border-radius:0;font-size:16px;display:grid;place-items:center}.percent-grid .painted{background:#415bb4;color:white}.percent-grid button:focus-visible{outline:3px solid #152443;outline-offset:-4px}.percent-representations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0}.percent-representations section{padding:12px 8px;background:white;border-radius:12px;overflow-wrap:anywhere}.percent-representations b{font-size:26px;display:block;margin:10px 0}.percent-representations small{display:block}.percent-lab input[type=range]{width:100%;margin:14px 0}.percent-ribbon{width:100%;height:40px;border:2px solid #9fafd0;background:white;border-radius:8px;overflow:hidden}.percent-ribbon span{display:block;height:100%;background:#ac5924}.percent-task{background:white;padding:18px;border-radius:16px;margin:20px 0}.percent-lab select,.percent-lab input:not([type=range]),.percent-lab textarea{font:inherit;padding:12px;display:block;max-width:100%;margin:10px 0}.percent-lab textarea{width:100%;min-height:100px}.percent-lab>small{display:block}#percentFeedback,#percentPaintFeedback{padding:14px;border-left:4px solid #415bb4;background:white}@media(max-width:900px){.percent-workspace{grid-template-columns:1fr}}@media(max-width:450px){.percent-lab{padding:14px}.percent-representations{grid-template-columns:1fr}.percent-grid button{font-size:12px}}