:root{font-family:ui-rounded,'Trebuchet MS',sans-serif;color:#243954;background:#ecf9f5;font-size:18px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 95% 15%,#ffeac1 0,transparent 30%),radial-gradient(circle at 0% 70%,#dce9ff 0,transparent 35%);min-height:100dvh}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;color:inherit;border:2px solid #cbdedc;background:#fff;border-radius:18px;min-height:56px;padding:12px 18px;cursor:pointer;box-shadow:0 4px 0 #24395412}button:hover{border-color:#7957c8}button:active{transform:translateY(2px)}button:focus-visible,a:focus-visible,[data-region]:focus-visible{outline:4px solid #7444c9;outline-offset:3px}button:disabled{opacity:.45;cursor:default}header{max-width:1060px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:auto}header a{color:#365471;font-weight:bold;text-decoration:none;padding:12px 0}header button{font-size:16px}main{max-width:1040px;margin:auto;padding:12px 18px 40px}section[hidden]{display:none!important}h1{font-size:clamp(28px,5vw,44px);letter-spacing:-1px;margin:12px 0 24px;line-height:1.1}p{line-height:1.5}em{font-style:normal;color:#7045b7}.eyebrow{font-weight:800;letter-spacing:2px;font-size:16px;color:#487871}.hero-art{font-size:100px}#welcome{text-align:center;padding:35px 0}#welcome h1{max-width:560px;margin:20px auto}#welcome em{display:block}.primary{background:#7045b7;color:white;border-color:#7045b7;box-shadow:0 5px 0 #4c2e81}.jumbo{font-size:26px;padding:20px 45px;margin:15px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.category{min-height:150px;text-align:left;border:0;padding:22px;background:var(--tint)}.category .icon{font-size:46px;display:block;margin-bottom:12px}.category strong{font-size:24px;display:block}.category small{display:block;font-size:16px;font-weight:400;margin-top:8px}.wide{margin-top:24px;width:100%}.thumbnails button{padding:8px;overflow:hidden}.thumbnails svg{display:block;width:100%;height:150px;pointer-events:none}.thumbnails span{display:block;padding:10px 2px;font-size:18px}.editor-heading{display:flex;align-items:center;gap:16px;margin-bottom:12px}.editor-heading h1{font-size:25px;margin:0}.studio{display:grid;gap:18px}#paper{background:white;border:3px solid #d2e4df;border-radius:26px;overflow:hidden;box-shadow:0 12px 28px #2248550c}#paper svg{display:block;width:100%;max-height:56dvh;touch-action:manipulation}#paper [data-region]{cursor:crosshair}#palette{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatch{height:52px;min-height:52px;padding:0;background:var(--color);border:3px solid #24395430;border-radius:50%}.swatch[aria-pressed=true]{outline:4px solid #243954;outline-offset:2px;box-shadow:inset 0 0 0 3px white}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.actions button{font-size:17px;padding:10px 6px}#colorName{margin:0 0 14px;font-weight:bold}#eraser[aria-pressed=true]{background:#e4d4ff;border-color:#7045b7}.hint{text-align:center;font-size:18px}dialog{border:0;border-radius:28px;padding:26px;max-width:calc(100% - 28px);width:440px;text-align:center;background:#fffcf2;color:#243954;box-shadow:0 20px 80px #172c5340}dialog::backdrop{background:#20314c99}dialog button{display:block;width:100%;margin:14px 0}dialog h1{font-size:32px}.stars{font-size:48px;animation:pop .7s ease both}@keyframes pop{from{transform:scale(.2) rotate(-15deg)}to{transform:scale(1)}}#notice{position:fixed;bottom:16px;left:16px;right:16px;pointer-events:none;text-align:center;background:#243954;color:white;border-radius:16px;padding:12px;z-index:9}#notice:empty{display:none}@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}.studio{grid-template-columns:minmax(0,1fr) 300px;align-items:center}#paper svg{max-height:70dvh}#palette{grid-template-columns:repeat(4,1fr)}.category{min-height:180px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-width:360px){main{padding:10px}.grid{gap:10px}.category{padding:16px}.category strong{font-size:21px}#palette{gap:10px;grid-template-columns:repeat(4,1fr)}header{padding:10px}}

#paper,#paper svg{touch-action:none;user-select:none;-webkit-user-select:none}.modes,.sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.modes button,.sizes button{flex:1;padding:10px 6px;font-size:16px}.modes [aria-pressed=true],.sizes [aria-pressed=true]{background:#e4d4ff;border-color:#7045b7;box-shadow:0 0 0 2px #7045b7}