.drawing-page{max-width:1240px;margin:22px auto;padding:0 14px;color:#304d40}.drawing-page>h1{font-size:30px;margin:0 0 8px}.drawing-page>.kids-seo-lead{margin:0 0 20px}#host{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#a0d3ea url('./assets/room.webp') center/cover;border:4px solid #c0a372;border-radius:18px;box-shadow:0 12px 30px #46644738;color:#324b3c;font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host p,#host h2{margin:0}#host button{font:900 clamp(12px,1.5cqw,22px)/1.25 'Zen Maru Gothic',sans-serif;min-height:36px;border:2px solid #c3a96f;border-radius:12px;padding:.5em .7em;background:#fff8dc;color:#344f3e;box-shadow:0 3px 0 #66552435;cursor:pointer;touch-action:manipulation}#host button:focus-visible,#canvas:focus-visible{outline:4px solid #226fbc;outline-offset:3px}#host button:disabled{cursor:default;opacity:.6}#host .primary{background:#3f9138;color:#fffbdc;border-color:#2a7327}#base{height:100%;display:flex;flex-direction:column}.picnic-top{height:10%;min-height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 2%;gap:10px;background:#fffae5e6;border-bottom:3px dashed #cbbb7a}.picnic-top>strong{font-size:2.2cqw;white-space:nowrap}.picnic-top nav{display:flex;gap:8px}.picnic-top button{font-size:1.25cqw!important;min-height:32px!important;padding:.4em .6em!important}#cover{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 16% 8%;gap:4%;padding:4% 10% 3%;text-align:center}.cover-main{display:grid;grid-template-columns:45% minmax(0,1fr);gap:7%;min-height:0;align-items:center}.cover-book{height:100%;min-height:0;background:#fff6da;border:4px double #d1b474;box-shadow:-6px 6px 0 #bf9b65;border-radius:9px;padding:5%;display:flex;flex-direction:column;align-items:center;justify-content:center}.cover-book h2{font-size:5.5cqw;font-family:'Yomogi',sans-serif;color:#246ba3;line-height:1.2;border-bottom:4px solid #e7ba33}.cover-book p{font-size:1.8cqw;line-height:1.5;margin:4% 0!important}.tools-art{width:47%;min-height:0;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}.cover-easel{min-height:0}.drawing-board{position:relative;background:url('./assets/board.webp') center/100% 100%;border-radius:6px;padding:0;aspect-ratio:1.65;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}.drawing-board canvas,.picture-frame canvas{position:absolute;display:block;aspect-ratio:8/5;width:78%;left:11%;top:51%;transform:translateY(-50%);height:auto;background:#fff;border:0}.picture-frame canvas{width:76%;left:12%;top:50%}#cover-note{font-size:1.3cqw;font-weight:900;background:#fff6d8e6;border-radius:8px;padding:.6em;margin-top:12px!important}#start{width:70%;justify-self:center;font-size:2.5cqw!important;padding:.3em!important;min-height:0!important}#ready-note{font-size:1.2cqw;font-weight:900;align-self:center}#studio{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 12% 12% 4%;gap:2%;padding:1.5% 7% 1.5%}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 18%;gap:3%}#paper-space{container-type:size;display:flex;justify-content:center;align-items:center;min-height:0;min-width:0}#drawing-board{width:min(100%,165cqh);padding:0;flex-shrink:0}#canvas{cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}.brush-tools{min-height:0;background:#fff6deed;border:2px solid #cdbd8b;border-radius:12px;padding:5%;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:5px}.brush-tools h2{font-size:1.5cqw}#sizes{display:flex;flex-direction:column;gap:5px;align-items:center;min-height:0}#sizes button{width:3.8cqw;height:3.8cqw;min-height:25px;max-height:50px;max-width:50px;aspect-ratio:1;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}#sizes button span{max-width:70%;max-height:70%;display:block;border-radius:50%;background:#29362e;flex-shrink:0}#sizes button[aria-pressed=true],#eraser[aria-pressed=true]{outline:3px solid #287d92;outline-offset:1px;background:#e1f3dc}#eraser{font-size:1.3cqw!important;min-height:30px!important;padding:.3em!important}#selected-tool{font-size:1cqw;text-align:center;line-height:1.4}#palette{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:7px;align-items:center;padding:.5% 2%;background:#fff8e3f0;border:2px solid #cfb881;border-radius:12px;min-height:0}#palette button{min-height:0;aspect-ratio:1;width:100%;height:auto;max-height:100%;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px #243d3840;background:var(--ink)}#palette button[aria-pressed=true]{outline:3px solid #254f62;outline-offset:1px}#palette button[data-color="#FFFFFF"]{border-color:#bfc7c3}.studio-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.studio-actions button{font-size:1.7cqw;min-height:30px;padding:.4em}.studio-actions #clear{background:#fbe4d7}.studio-actions #save{background:#e0f0f2}.save-note{text-align:center;font-size:1.15cqw;font-weight:900;align-self:center;line-height:1.3}#result{flex:1;min-height:0;display:grid;grid-template-rows:12% minmax(0,1fr) 15% 6%;gap:3%;padding:2% 10% 3%}#result h2{font-size:2.9cqw;text-align:center;background:#fff5d9e8;border:2px solid #d1b676;border-radius:12px;padding:.15em;align-self:center}#frame-space{container-type:size;min-height:0;display:flex;justify-content:center;align-items:center}.picture-frame{position:relative;width:min(100%,160cqh);aspect-ratio:1.6;padding:0;background:url('./assets/frame.webp') center/100% 100%;display:flex;align-items:center;justify-content:center;min-height:0}.result-actions{display:flex;gap:10px;justify-content:center}.result-actions button{flex:1;font-size:1.5cqw}.result-actions .primary{flex:2;font-size:2.2cqw!important}#status{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);z-index:3;background:#fff7dc;color:#36543b;border:1px solid #bca56d;border-radius:8px;padding:.15em .7em;font-size:1.1cqw;pointer-events:none;max-width:90%;text-align:center}#status:empty{display:none}#modal{position:absolute;inset:0;z-index:10;background:#183f49ba;display:flex;align-items:center;justify-content:center;padding:3%}.dialog{width:75%;max-height:95%;overflow:auto;background:#fffae8;border:4px solid #d3ba81;border-radius:18px;padding:4%;box-shadow:0 10px 30px #0005}.dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dialog h2{font-size:2.5cqw}.dialog p,.dialog label{font-size:1.65cqw;line-height:1.7}.dialog small{display:block;font-size:1.1cqw;line-height:1.8;margin:10px 0}.dialog button{margin:4px}.dialog #dialog-content{display:grid;gap:10px}.dialog input[type=range]{width:100%}.parent-note{font-size:13px;line-height:1.9;margin:18px 0}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;display:grid;place-items:center}#host:fullscreen #base{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}
@media(max-width:600px) and (orientation:portrait){#host{aspect-ratio:9/22;border-width:3px;border-radius:12px}.drawing-page>h1{font-size:25px}.picnic-top{height:10%;min-height:70px;flex-direction:column;justify-content:center;gap:5px;padding:4px}.picnic-top>strong{font-size:5cqw}.picnic-top nav{gap:4px}.picnic-top button{font-size:11px!important;min-height:30px!important;padding:.35em .4em!important}#cover{grid-template-rows:minmax(0,1fr) 14% 7%;gap:4%;padding:5% 8%}.cover-main{grid-template-columns:1fr;grid-template-rows:52% minmax(0,1fr);gap:8%}.cover-book{padding:4%;position:relative;align-items:flex-start;padding-left:8%}.cover-book h2{font-size:11cqw}.cover-book p{font-size:4.5cqw;line-height:1.6}.tools-art{position:absolute;right:4%;bottom:5%;width:40%}.cover-easel{width:85%;justify-self:center}#cover-note{font-size:clamp(10px,3.3cqw,15px);padding:.4em;margin-top:5px!important}#start{width:100%;font-size:5.7cqw!important}#ready-note{font-size:clamp(10px,3.2cqw,15px)}#studio{grid-template-rows:minmax(0,1fr) 20% 15% 6%;gap:4%;padding:4% 4% 5%}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 35%;gap:7%}#drawing-board{width:min(100%,165cqh);padding:0}.brush-tools{padding:3%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:7px}.brush-tools h2{grid-column:1/3;text-align:center;font-size:clamp(11px,3.5cqw,17px)}#sizes{grid-column:1/3;flex-direction:row;justify-content:space-around;gap:6px}#sizes button{width:10cqw;height:10cqw;min-height:26px;max-width:42px;max-height:42px}#eraser{font-size:clamp(11px,3.5cqw,16px)!important;min-height:28px!important}#selected-tool{font-size:clamp(10px,3cqw,14px)}#palette{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;padding:4% 5%;border-radius:12px}#palette button{border-width:2px}#palette button[aria-pressed=true]{outline-width:2px}.studio-actions{grid-template-columns:1fr 1fr;gap:7px}.studio-actions button{font-size:clamp(12px,4cqw,18px);min-height:32px;padding:.3em}.save-note{font-size:clamp(10px,3.3cqw,15px);line-height:1.5}#result{grid-template-rows:13% minmax(0,1fr) 22% 9%;gap:4%;padding:5% 6%}#result h2{font-size:5.4cqw;padding:.45em .1em}.picture-frame{width:min(100%,160cqh);padding:0}.result-actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.result-actions .primary{grid-column:1/3;font-size:5.2cqw!important}.result-actions button{font-size:4cqw;min-height:34px}.dialog{width:98%;padding:5%;max-height:96%}.dialog h2{font-size:5.5cqw}.dialog p,.dialog label{font-size:clamp(12px,4cqw,18px)}.dialog small{font-size:clamp(10px,3.2cqw,15px)}.dialog button{font-size:4cqw!important}#status{font-size:11px;bottom:1%}#host:fullscreen #base{width:100%;height:100%}}
@media(min-width:601px) and (max-width:1000px){.picnic-top button{font-size:11px!important;min-height:28px!important}.brush-tools{gap:3px;padding:3%}.brush-tools h2{font-size:11px}#sizes{gap:3px}#sizes button{width:3.4cqw;height:3.4cqw;min-height:21px}#eraser{font-size:11px!important;min-height:25px!important}#selected-tool{font-size:10px}.save-note{font-size:11px}.dialog p{font-size:14px}.dialog small{font-size:12px}#status{font-size:11px}}