@font-face{font-family:Nunito;src:url('assets/nunito-400.ttf')}@font-face{font-family:Nunito;src:url('assets/nunito-800.ttf');font-weight:800}*{box-sizing:border-box}body{margin:0;background:#fffcf6;color:#19365d;font:15px Nunito,Arial,sans-serif}button,input,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:white;border:1px solid #dce5eb;border-radius:12px;padding:10px 14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}button:hover{border-color:#229b8b;background:#f0fbf7}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e58535;outline-offset:3px}a{color:inherit;text-decoration:none}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0}header{max-width:1540px;margin:14px auto 0;padding:10px 22px;display:flex;align-items:center;gap:24px;background:white;border-radius:24px;box-shadow:0 4px 25px #9074470b}header nav{display:flex;gap:6px;align-items:center;flex:1;justify-content:center}header nav a{padding:12px;font-size:14px;font-weight:800;white-space:nowrap}.current{background:#eaf8f4;color:#168a7e;border-radius:14px}.brand{display:flex;gap:8px;align-items:center;white-space:nowrap}.brand img{object-fit:contain}.brand strong{font-size:25px;font-weight:800}.brand b{color:#ff645f}.brand small{display:block;font-size:11px}.demo{font-size:11px;color:#69778a;background:#fff4e1;padding:7px 10px;border-radius:20px}main{max-width:1540px;margin:auto;padding:22px}.breadcrumb{font-size:13px;color:#687e96;display:flex;gap:14px}.title-row{display:flex;align-items:center;gap:22px;margin:18px 0 24px}h1{font-size:clamp(26px,2.5vw,40px);margin:0;font-weight:800;line-height:1.2;flex:1}.back{border-radius:30px;min-width:165px}.modes{display:flex;border:1px solid #d9e3e9;border-radius:30px;background:white;padding:3px}.modes button{border:0;border-radius:24px;font-size:13px}.modes [aria-pressed=true]{background:#199f90;color:white}.workspace{display:grid;grid-template-columns:240px minmax(0,1fr) 260px;gap:16px;align-items:start}.panel{background:white;border:1px solid #edf0ec;box-shadow:0 5px 24px #87632e05;border-radius:22px;padding:20px}h2{font-size:18px;margin:0 0 16px;font-weight:800}.wheel{width:164px;height:164px;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,cyan,blue,magenta,red);position:relative;margin:0 auto 16px;touch-action:none}.wheel:before{content:'';position:absolute;inset:20px;background:white;border-radius:50%}#sv{position:absolute;inset:37px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),#ff8c25;touch-action:none}#sv-dot,#hue-dot{width:14px;height:14px;border:2px solid white;box-shadow:0 0 0 1px #777;border-radius:50%;position:absolute;pointer-events:none;transform:translate(-50%,-50%)}#sv-dot{left:80%;top:10%}.custom-color{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#647a90;margin-bottom:14px}input[type=color]{width:35px;height:28px;border:0;background:transparent;padding:0;cursor:pointer}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatches button{border-radius:50%;width:25px;height:25px;min-height:25px;padding:0;border:1px solid #0002}.swatches button[aria-pressed=true]{outline:2px solid #ff645f;outline-offset:3px}.selected-color{display:flex;gap:8px;align-items:center;font-size:10px;color:#738497;margin-top:13px}#selected-dot{width:14px;height:14px;background:#ff8c25;border-radius:50%}hr{border:0;border-top:1px solid #e6ebec;margin:17px 0}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-grid button{flex-direction:column;font-size:12px;padding:10px 3px}.tool-grid svg{width:25px;height:25px}.tool-grid [aria-pressed=true],.canvas-toolbar [aria-pressed=true]{background:#e4f6ef;border-color:#229b8b;color:#138576}.size{display:flex;justify-content:space-between;font-size:12px;margin:18px 0 8px}input[type=range]{width:100%;accent-color:#229b8b}.history{display:flex;gap:6px;margin-top:18px}.history button{font-size:11px;flex:1;padding:8px 4px}.clear{width:100%;font-size:12px;margin-top:8px}.drawing{background:#f0faf6;padding:16px}.canvas-toolbar{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}.canvas-toolbar button{font-size:12px}.zoom{display:flex;align-items:center;gap:7px}.zoom button{padding:7px 12px;font-size:20px}.zoom output{font-size:12px;min-width:40px;text-align:center}#viewport{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid #b9cdd5;border-radius:12px;background:white;touch-action:none;overscroll-behavior:contain}#sheet{position:absolute;inset:0;transform-origin:center;touch-action:none}#sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#outline{pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#fffef9e8;font-weight:800}#loading[hidden]{display:none}.status-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin:13px 0;color:#218e7d;min-height:17px}.hint{color:#67838b}.actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.primary{background:#ff645f;color:white;border-color:#ff645f}.primary:hover{background:#f05554;border-color:#f05554}.print-controls{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #dce5eb;border-radius:12px;padding-right:10px}.print-controls button{border:0}.print-controls label{font-size:11px;white-space:nowrap}input[type=radio]{accent-color:#229b8b}.right{display:grid;gap:16px}.right p{font-size:12px;color:#6b7d92;line-height:1.6;margin:10px 0 0}.reaction-samples{font-size:30px;display:flex;justify-content:space-around;color:#eaa82e}.timer h2{display:flex;align-items:center;gap:10px}.timer strong{font-size:40px;margin-left:32px}.badges{display:flex;justify-content:space-around;gap:14px}.badges span{width:52px;height:56px;border-radius:45%;display:grid;place-items:center;background:#fff3d5;color:#c49a44;border:3px double #e1c69a;font-size:23px;font-weight:800}.badges span:not(:first-child){background:#edf1f4;color:#91a4b2;border-color:#c6d3db}.awards small{display:block;color:#8494a2;font-size:10px;margin-top:10px}.owl-note{display:flex;align-items:center;padding:8px}.owl-note img{width:104px}.owl-note p{color:#168b80;font-size:14px;border:1px solid #d5e9e0;border-radius:24px;background:#f3fcf8;padding:14px}.stage-note{font-size:11px;color:#80909e;text-align:center;margin:24px 0 0}footer{text-align:center;font-size:12px;color:#8a9bad;padding:20px;border-top:1px solid #eee7dc}.catalog-card{display:flex;flex-direction:column;width:300px;margin:24px 0;padding:18px}.catalog-card img{width:100%;height:210px;object-fit:contain}.catalog-card strong{font-size:19px}.catalog-card span{color:#168b80}#catalog>p{color:#687e96}dialog{max-width:440px;width:calc(100% - 32px);border:1px solid #dce5e5;border-radius:24px;padding:28px;color:#19365d;background:#fffcf6}dialog::backdrop{background:#17374666}dialog p{line-height:1.6}dialog>div{display:flex;gap:10px;justify-content:end;flex-wrap:wrap}body.kid .advanced{display:none}body.kid .tool-grid button{font-size:17px;min-height:80px}body.kid .swatches{grid-template-columns:repeat(4,1fr);gap:15px}body.kid .swatches button{width:35px;height:35px;min-height:35px}body.kid .history button{min-height:52px}body.kid .hint{font-size:13px}[hidden]{display:none!important}
@media(min-width:1500px){.workspace{grid-template-columns:260px minmax(0,1fr) 280px}.wheel{width:182px;height:182px}.swatches button{width:28px;height:28px;min-height:28px}}
@media(max-width:1200px){header nav a{font-size:12px;padding:8px}header{margin:10px 16px;gap:10px}.demo{display:none}.workspace{grid-template-columns:200px minmax(0,1fr) 200px;gap:12px}.panel{padding:14px}.swatches{gap:8px}.swatches button{width:22px;height:22px;min-height:22px}.wheel{width:150px;height:150px}h1{font-size:28px}.modes button{font-size:11px;padding:10px}.back{min-width:130px}.canvas-toolbar span{display:none}.right h2{font-size:16px}.owl-note{padding:0}.owl-note img{width:75px}.owl-note p{padding:10px;font-size:12px}}
@media(max-width:950px){header nav{display:none}.workspace{grid-template-columns:190px minmax(0,1fr)}.right{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.owl-note{display:none}.title-row{flex-wrap:wrap}.title-row h1{order:0}.modes{margin-left:auto}.demo{display:inline-block;margin-left:auto}.stage-note{text-align:left}}
@media(max-width:600px){html,body{max-width:100%;overflow-x:hidden}main{padding:10px}.workspace{gap:10px}header{margin:6px;padding:7px 10px;border-radius:18px}.brand{min-width:0}.brand strong{font-size:19px}.brand img{width:36px;height:36px}.demo{font-size:9px;max-width:120px;overflow:hidden;text-overflow:ellipsis}h1{font-size:24px}.title-row{gap:10px;margin:12px 0}.back{font-size:12px;min-width:96px;padding:8px}.title-row h1{font-size:22px;flex-basis:calc(100% - 116px)}.modes{margin:0 auto;max-width:100%;overflow:auto}.workspace{display:flex;flex-direction:column}.drawing{order:0;width:100%;padding:8px}.tools{order:1;width:100%}.right{order:2;display:flex;flex-wrap:wrap;width:100%}.right>.panel{flex:1;min-width:140px}.tool-grid{grid-template-columns:repeat(4,1fr);gap:6px}.tool-grid button{padding:8px 2px;min-height:62px}.tools .advanced .wheel{display:none}.custom-color{justify-content:start;gap:10px}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatches button{width:30px;height:30px;min-height:30px}.tools hr{margin:10px 0}.tools h2{font-size:16px;margin-bottom:10px}.status-row .hint{display:none}.actions{justify-content:center}.print-controls{flex-wrap:wrap;justify-content:center}.history button{font-size:13px}.zoom{gap:4px}.zoom button{min-width:36px;padding:6px}.stage-note{line-height:1.6}.panel.timer{display:flex;align-items:center;gap:12px}.timer h2{margin:0}.timer strong{font-size:28px;margin:0}.timer p{margin:0;max-width:140px}body.kid .swatches{display:flex}body.kid .tool-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.reaction-actions{display:flex;gap:8px;justify-content:space-between}.reaction-actions button{flex:1;font-size:20px;padding:8px 4px}.reaction-actions button[aria-pressed=true]{background:#fff0e5;border-color:#ff9b65;color:#ed6a35}.badges span[data-earned="false"]{filter:grayscale(1);opacity:.45}.badges span[data-earned="true"]{box-shadow:0 0 0 3px #ffe29a}.celebrate{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}.celebrate i{position:absolute;width:10px;height:18px;background:#ff645f;animation:fall 1.1s ease-out forwards}.celebrate i:nth-child(2n){background:#22a692}.celebrate i:nth-child(3n){background:#ffcf3f}@keyframes fall{from{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(540deg);opacity:0}}