/* Design derived from capas-prompts.json: picture book, cream, forest green,
   orange accents, rounded shapes and a cheerful, clear composition. */
:root{--forest:#134a32;--ink:#24452f;--cream:#fff7df;--orange:#ed8218;--line:#e4d6b3;font-family:ui-rounded,'Trebuchet MS','Segoe UI',sans-serif;color:var(--ink);background:#faf4e4}
body{background:radial-gradient(ellipse at 2% 18%,#e5eccd 0,transparent 36%),radial-gradient(ellipse at 100% 5%,#fff0c3 0,transparent 36%),#faf4e4}
header,main,footer{max-width:1280px}
body header{padding:12px 28px;min-height:82px}
.brand-signature{display:flex;align-items:center}.brand-signature img{width:150px;height:60px;object-fit:contain}
body header .quintal-home{border:2px solid #d6dfc4;border-radius:14px;padding:10px 16px;background:#fffaf0;color:var(--forest);font-size:14px}
main{padding:0 28px}.intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:center;padding:22px 24px 22px 32px;background:var(--cream);border:2px solid #e5d9b8;border-radius:32px;box-shadow:0 7px 0 #dfd4b342;overflow:hidden}
.intro-copy{position:relative;padding:8px 0}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:800;color:#668343}.intro .eyebrow{margin-top:0}
h1{font-size:clamp(38px,4.7vw,62px);line-height:1.03;letter-spacing:-2.2px;color:var(--forest);font-weight:900;margin:16px 0}
h1 em{color:var(--orange);white-space:nowrap;font-style:normal}h1 em span{margin:0;color:inherit;text-shadow:0 2px 0 #0000000c}h1 em span:nth-child(1){color:#e94d35}h1 em span:nth-child(2){color:#e9ad00}h1 em span:nth-child(3){color:#65a331}h1 em span:nth-child(4){color:#228dc4}h1 em span:nth-child(5){color:#ed8218}
.intro p:not(.eyebrow){font-size:15px;line-height:1.65;color:#697552;margin:16px 0}.intro-note{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#4e6d3d;line-height:1.5}.intro-note span{color:var(--orange);font-size:24px}
.cover-art{display:block;width:100%;height:auto;border-radius:23px;border:4px solid #fffdf3;box-shadow:0 6px 18px #6d54231c;transform:rotate(1deg)}
.studio-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:32px 2px 18px}.studio-heading .eyebrow{margin:0 0 6px}.studio-heading h2{font-size:25px;letter-spacing:-.6px;margin:0;color:var(--forest)}.studio-heading>p{font-size:13px;color:#75805c;margin:0 0 3px}
.studio{grid-template-columns:270px minmax(0,1fr);margin:0;border:2px solid #ddcfad;border-radius:28px;background:#fffaf0;box-shadow:0 8px 0 #d9c9a12e}
aside{padding:24px 20px;background:#f1f2dd;border-right:2px solid #e0dfc5}aside h2{color:var(--forest);font-size:15px;font-weight:800;margin-bottom:16px}aside h2:before{content:'✦';color:var(--orange);margin-right:8px}
label[for=collection]{font-size:12px;font-weight:700;color:#627146}select{border:2px solid #d4ddbf;border-radius:13px;background:#fffdf4;color:var(--forest);font-size:14px;margin:8px 0 12px;min-height:46px;padding:10px;cursor:pointer}select:focus-visible{outline:3px solid #ed8218;outline-offset:3px}
button{border:2px solid #e2d8bc;border-radius:14px;background:#fffdf5;color:var(--forest);font-weight:700;font-size:13px;min-height:44px;box-shadow:0 3px 0 #dbd2b13d}button:hover{background:#fff1d0;border-color:#dcb26b}button:active{transform:translateY(2px)}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid #d8790c;outline-offset:3px}
.drawings{gap:8px;margin-bottom:24px}.drawings button{line-height:1.4;padding:11px 12px}.drawings button[aria-pressed=true]{background:#e0ebc9;border-color:#718c43;color:#25472e}
.palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px 5px;padding:4px 0}.swatch{width:31px;height:34px;min-height:34px;border-radius:10px 10px 13px 13px;border:2px solid #00000018;box-shadow:inset 0 -5px 0 #00000013,0 2px 0 #0000000a;position:relative}.swatch:before{content:'';position:absolute;top:4px;left:4px;width:5px;height:10px;background:#ffffff7a;border-radius:4px;pointer-events:none}.swatch:hover{border-color:var(--forest);transform:translateY(-2px)}.swatch[aria-pressed=true]{outline:3px solid var(--forest);outline-offset:2px}
.custom{font-size:12px;font-weight:700;margin:20px 0 12px}input[type=color]{border:2px solid #d9d1b5;border-radius:10px;height:38px;width:43px}.tip{color:#77815a;font-size:12px;line-height:1.7;background:#e6eaca;border-radius:14px;padding:12px;margin:18px 0 0}#eraser{box-shadow:none}#eraser[aria-pressed=true]{border-color:#718c43;background:#e0ebc9}
.workspace{padding:22px;background:repeating-linear-gradient(0deg,transparent 0 56px,#aa6b2914 57px,#ffffff29 59px,transparent 61px),linear-gradient(100deg,#e7bd82,#f4d7a3 46%,#e6ba7b);min-width:0}.paper-top{font-size:13px;font-weight:800;color:#654c29;align-items:center;gap:10px;margin-bottom:14px}#progress{font-weight:600;font-size:12px;background:#fff7e5;padding:6px 10px;border-radius:20px;white-space:nowrap}
.gallery{gap:12px;margin:0 0 16px;flex-wrap:wrap}.thumbnail{width:116px;padding:6px;background:#fffdf6;border-radius:14px;font-size:11px;line-height:1.3;box-shadow:0 3px 0 #93642824}.thumbnail img{height:66px;border-radius:7px;margin-bottom:4px}.thumbnail[aria-pressed=true]{border:2px solid #3d713c;background:#f2f8e8;box-shadow:0 3px 0 #47753a3d}
#paper{border:5px solid #fff9eb;border-radius:17px;background:white;box-shadow:0 5px 14px #80542228;overflow:hidden}#paper canvas{max-width:650px;max-height:none;width:100%;height:auto;display:block;margin:auto;touch-action:manipulation}#paper svg{max-height:510px}
.actions{margin-top:18px;gap:9px}.actions button{border-color:#e0bd89;background:#fff9e9;font-size:12px;padding:10px 13px}.actions .primary{background:var(--forest);color:#fff9e4;border-color:var(--forest);box-shadow:0 4px 0 #092d1b}.actions .primary:hover{background:#24643f;border-color:#24643f}button:disabled{opacity:.45;box-shadow:none}#status{color:#697853;font-size:12px;margin:22px 0;line-height:1.5}footer{color:#748259;font-size:12px;padding-bottom:26px}
@media(min-width:1450px){.intro{grid-template-columns:.7fr 1.3fr}.cover-art{max-height:320px;object-fit:cover}}
@media(max-width:850px){.intro{gap:16px;padding:20px;grid-template-columns:.8fr 1.2fr}h1{font-size:41px}.intro-note{font-size:10px}.intro p:not(.eyebrow){font-size:13px}.studio{grid-template-columns:240px minmax(0,1fr)}aside{padding:20px 15px}.workspace{padding:16px}.paper-top{flex-wrap:wrap}.actions .primary{margin-left:0}}
@media(max-width:700px){body header{padding:8px 16px;min-height:66px}.brand-signature img{height:46px;width:120px}main{padding:0 12px}.intro{grid-template-columns:1fr;padding:20px 18px 16px;border-radius:25px;gap:12px}.intro-copy{padding:0}h1{font-size:40px;line-height:1.12;margin:9px 0}h1 br{display:none}h1 br:after{content:' '}.intro .eyebrow{font-size:10px;letter-spacing:1.2px}.intro p:not(.eyebrow){font-size:13px;margin:9px 0}.intro p br{display:none}.intro-note{font-size:10px}.cover-art{border-radius:17px;transform:none;border-width:3px}.studio-heading{margin:24px 5px 14px;display:block}.studio-heading h2{font-size:23px}.studio-heading>p{margin-top:8px}.studio{grid-template-columns:1fr;border-radius:24px}aside{padding:20px 18px;border-right:0;border-bottom:2px solid #d7d8b9}.drawings{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px}.drawings button{text-align:left;font-size:12px;padding:10px}.palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:11px 7px}.swatch{width:30px;height:34px;min-height:34px}.custom{display:inline-flex;gap:12px;margin:18px 10px 0 0}#eraser{width:auto;padding:8px 12px}.workspace{padding:16px 12px}.paper-top{gap:6px;font-size:12px}#progress{font-size:10px;padding:5px 8px}.thumbnail{width:105px}.thumbnail img{height:60px}#paper{border-width:4px;border-radius:13px}.actions{gap:6px;justify-content:space-between}.actions button{font-size:10px;padding:10px 8px}.actions .primary{margin-left:auto}.tip{display:none}#status{margin:18px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}