.color-room{padding-top:24px}.color-room .play-title{margin-bottom:18px}.color-rules{margin:0 0 25px;font-size:.9rem;max-width:85ch}.color-rules summary{font-weight:750;cursor:pointer;min-height:44px;padding:8px 0}.color-rules ol{padding-left:24px;margin:10px 0;line-height:1.8}.color-palette{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}.color-palette button{display:flex;align-items:center;gap:8px;font:inherit;font-size:.8rem;font-weight:650;background:#fff;color:#111213;border:2px solid transparent;border-radius:999px;padding:9px 13px;min-height:48px}.color-palette button[aria-pressed=true]{border-color:#111213;background:#ffdb37}.color-swatch{display:block;width:24px;height:24px;border-radius:50%;border:1px solid #111213;flex:none}.color-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}.color-toolbar button{font:inherit;font-size:.8rem;font-weight:650;border:0;min-height:46px;border-radius:999px;padding:10px 17px;background:#e5e6dc;color:#111213}.color-toolbar button[aria-pressed=true]{background:#111213;color:#fff}.color-toolbar button[data-color-download]{background:#ffdb37;color:#111213}.color-instruction{font-size:.95rem;font-weight:650;line-height:1.6;min-height:1.6em;margin:18px 0 15px}.color-board{max-width:1000px;aspect-ratio:3/2;position:relative;background:#fff;border-radius:18px;overflow:hidden;margin:0 auto}.color-board>[data-color-art],.color-board>canvas,.color-board>.color-cursor-layer{position:absolute;inset:0;width:100%;height:100%}.color-board [data-color-art]>svg{display:block;width:100%;height:100%}.color-board>canvas{z-index:2;touch-action:none;cursor:crosshair}.color-room[data-tool=fill] .color-board>canvas{pointer-events:none}.color-cursor-layer{pointer-events:none;z-index:3}.color-board [data-region]{cursor:pointer}.color-board [data-region]:focus-visible{outline:none;stroke:#2255db;stroke-width:8}.color-board canvas:focus-visible{outline:4px solid #2255db;outline-offset:-5px}.color-board-state{position:absolute;z-index:4;top:12px;left:50%;transform:translate(-50%);padding:9px 15px;border-radius:999px;background:#111213;color:#fff;font-size:.8rem;pointer-events:none;max-width:90%;text-align:center}.color-room[data-running=true] .color-board-state{display:none}.color-tool-note{font-size:.8rem;margin:14px 0 25px;line-height:1.6}.color-export{margin:24px 0;padding:22px;background:#e8e9df;border-radius:16px}.color-export img{display:block;width:min(100%,360px);height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:9px}.color-export p{font-size:.85rem;margin-top:12px}.color-friendly-error{padding:18px;background:#ffdb37;border-radius:12px;margin:20px 0}.color-room .parent-panel{margin-top:24px}.color-room .parent-panel p{font-size:.85rem;margin-top:15px}.color-room [hidden]{display:none!important}@media(max-width:680px){.color-room{padding-top:20px}.color-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.color-palette button{display:flex;flex-direction:column;gap:4px;padding:7px 3px;font-size:.64rem;min-width:0;border-radius:12px;min-height:63px}.color-swatch{width:25px;height:25px}.color-toolbar{gap:8px}.color-toolbar button{font-size:.75rem;padding:10px 13px;min-height:44px}.color-instruction{font-size:.85rem}.color-board{aspect-ratio:3/2;border-radius:12px}.color-board [data-color-art]>svg{overflow:visible}.color-board-state{font-size:.7rem;padding:8px 12px}.color-rules{font-size:.8rem}.color-tool-note{font-size:.75rem}.color-room .play-options{gap:12px}.color-room .play-options>div:last-child{grid-column:1/-1;max-width:none}}