@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800;900&display=swap');
:root{font-family:'Nunito','Baloo 2',system-ui,sans-serif;color:#302d4b;background:#f7f3ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 30%,#e2f6ef,transparent 50%),radial-gradient(ellipse at 100% 70%,#ffe8d5,transparent 55%),#f7f3ff;min-height:100dvh}button,a,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #4b39cb;outline-offset:4px}button:disabled{opacity:.4;cursor:default}.topbar{height:72px;padding:0 clamp(18px,4vw,72px);display:flex;align-items:center;justify-content:space-between;background:#ffffffdc;border-bottom:1px solid #e5dff4;gap:12px}.brand{border:0;background:transparent;font-weight:900;font-size:23px;color:#6746c5;display:flex;gap:10px;align-items:center}.top-actions{display:flex;gap:16px;align-items:center;font-size:14px;font-weight:800}.top-actions button,.soft{border:1px solid #ded6ef;background:#fff;border-radius:12px;padding:9px 15px;font-weight:800}.home{max-width:1280px;margin:auto;padding:24px 36px 30px}.intro{text-align:center;margin-bottom:25px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:900;color:#92714d;text-transform:uppercase}.intro h1{font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(30px,3vw,44px);margin:3px 0;color:#4f338a;line-height:1.25}.intro p{margin:8px 0;color:#777189;font-size:16px}.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.chapter{border:2px solid #fff;box-shadow:0 6px 0 var(--shade),0 10px 22px #44346a0a;background:#fff;border-radius:22px;padding:17px 18px;text-decoration:none;color:inherit;display:grid;grid-template-columns:82px 1fr 26px;align-items:center;gap:13px;min-height:133px;transition:transform .18s}.chapter:hover{transform:translateY(-4px)}.thumb{background:var(--tint);width:82px;height:82px;border-radius:20px;display:grid;place-items:center}.thumb svg{width:75px;height:65px;overflow:visible}.chapter h2{font-size:18px;margin:0 0 6px;line-height:1.3;font-weight:900}.chapter p{font-size:12px;margin:4px 0;color:#81788e}.badge{display:inline-block;font-size:11px;font-weight:900;padding:3px 9px;border-radius:20px;color:var(--shade);background:var(--tint)}.arrow{font-size:20px;color:var(--shade)}.footer-note{text-align:center;margin:25px 0 0;font-size:12px;color:#8c8099}.studio{max-width:1390px;margin:auto;padding:17px 30px 22px}.activity-head{display:flex;align-items:center;gap:16px;margin-bottom:15px}.activity-head h1{font-size:24px;margin:0;font-weight:900}.activity-head p{font-size:13px;margin:4px 0 0;color:#877a96}.activity-head .page-nav{margin-left:auto;display:flex;gap:8px}.workspace{display:grid;grid-template-columns:160px minmax(0,1fr) 210px;gap:20px;align-items:start}.toolbox,.guide{background:#ffffffed;border:1px solid #e8e1f1;border-radius:22px;padding:17px}.toolbox h2,.guide h2{font-size:13px;margin:0 0 12px;color:#877396}.tools{display:flex;flex-direction:column;gap:8px}.tool{padding:10px 8px;border:1px solid #e6e0ef;background:#fff;border-radius:12px;text-align:left;font-size:13px;font-weight:800}.tool.active{background:#eee7ff;color:#6545c7;border:2px solid #9673e6;padding:9px 7px}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 19px}.swatch{width:32px;height:32px;border:3px solid #fff;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px #dfd9e6}.swatch.active{box-shadow:0 0 0 3px #4b365b;transform:scale(1.04)}.size{width:100%;accent-color:#7958d2}.toolbox label{font-size:12px;font-weight:800}.board-shell{min-width:0}.canvas-frame{background:white;border:6px solid #fff;border-radius:24px;box-shadow:0 10px 35px #51447712;overflow:hidden;position:relative}.canvas-frame svg{width:100%;height:auto;max-height:calc(100dvh - 250px);min-height:250px;display:block;touch-action:none;user-select:none;cursor:crosshair}.board-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.board-actions{display:flex;gap:6px}.board-actions button{border:1px solid #e2d9ee;background:#fff;border-radius:11px;padding:9px 12px;font-size:13px;font-weight:800}.primary{background:#7651cd;border:0;border-bottom:4px solid #54349e;color:#fff;border-radius:13px;padding:10px 20px;font-weight:900}.hint{font-size:14px;line-height:1.65;color:#70647d}.guide .mini-art{background:#faf7ff;border-radius:15px;margin:12px 0;padding:10px}.guide svg{width:100%;height:140px;display:block}.guide .tip{font-size:12px;color:#96839c;border-top:1px dashed #e6dbed;padding-top:12px;line-height:1.6}.guide .save-note{font-size:11px;color:#7c6a90;margin-top:17px}.guide button{width:100%;margin-top:8px}.paper-bin{display:flex;gap:10px;flex-wrap:wrap;background:#f5efff;padding:12px;border-radius:12px;margin-top:12px}.paper-piece{width:36px;height:32px;clip-path:polygon(6% 10%,40% 0,92% 10%,100% 74%,70% 100%,0 88%);border:0;background:var(--ink);cursor:grab}.fold-progress{display:flex;justify-content:center;gap:8px;margin:12px}.fold-progress span{width:10px;height:10px;background:#dfd6f0;border-radius:50%}.fold-progress span.done{background:#825bd7}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);padding:13px 25px;border-radius:17px;background:#3e3154;color:#fff;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:20;text-align:center;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}.finish-box{text-align:center;padding:16px;margin-top:12px;background:#eaf9ef;border-radius:16px;color:#39724e}.fold-handle{cursor:grab}.fold-target{pointer-events:none}.mode-note{font-size:11px;color:#927f9c;margin:10px 0 0;line-height:1.5}
@media(min-width:1500px){.home{padding-top:45px}.chapters{gap:27px}.chapter{min-height:148px}.intro{margin-bottom:35px}}
@media(max-width:1000px){.workspace{grid-template-columns:130px minmax(0,1fr)}.guide{grid-column:1/-1;display:flex;gap:20px;align-items:center}.guide>div{flex:1}.guide .mini-art{width:130px;flex:none;margin:0}.guide svg{height:95px}.guide .save-note,.guide .tip{display:none}.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-frame svg{max-height:none}.studio{padding:15px}.home{padding:25px 22px}.chapter{padding:15px;grid-template-columns:65px 1fr 20px}.thumb{width:65px;height:70px}.thumb svg{width:60px}.guide button{width:auto}}
@media(max-width:600px){.topbar{height:61px;padding:0 12px}.brand{font-size:17px;padding:0}.top-actions{gap:7px}.top-actions #savedCount{display:none}.top-actions button{font-size:12px}.intro p{font-size:13px}.home{padding:22px 15px}.chapters{gap:15px;grid-template-columns:1fr}.chapter{min-height:101px;grid-template-columns:64px 1fr 24px}.chapter h2{font-size:17px}.activity-head{gap:8px}.activity-head h1{font-size:18px}.activity-head .soft{padding:8px}.activity-head p{font-size:11px}.workspace{display:flex;flex-direction:column;gap:12px}.toolbox{width:100%;padding:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.toolbox h2{display:none}.tools{flex-direction:row;gap:5px}.tool{font-size:11px;padding:8px}.tool.active{padding:7px}.palette{display:flex;gap:9px;margin:0;flex-wrap:wrap}.swatch{width:26px;height:26px}.toolbox .size-row{display:none}.board-shell{width:100%}.canvas-frame svg{min-height:0;height:auto}.guide{width:100%;padding:12px;gap:12px}.guide .mini-art{width:100px}.hint{font-size:12px;margin:0}.board-actions button{font-size:11px;padding:8px}.primary{padding:9px 13px;font-size:12px}.activity-head .page-nav{gap:4px}.guide h2{margin-bottom:5px}.mode-note{display:none}}