:root{color:#172033;background:#fff7df;font-family:Inter,ui-rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at top left,rgba(255,142,193,.35),transparent 34rem),radial-gradient(circle at 90% 10%,rgba(93,214,255,.35),transparent 28rem),linear-gradient(135deg,#fff9e8,#f4fbff)}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible{outline:4px solid rgba(37,99,235,.35);outline-offset:3px}.app-shell{width:min(1480px,100%);margin:0 auto;padding:clamp(1rem,3vw,2rem)}.hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.25rem,4vw,2.25rem);border:3px solid #172033;border-radius:32px;background:linear-gradient(135deg,#ffcf56,#ff8ec1 48%,#72ddf7);box-shadow:0 16px #1720331f}h1,h2,p{margin:0}h1{max-width:12ch;font-size:clamp(2.45rem,8vw,5.9rem);letter-spacing:-.075em;line-height:.92}h2{font-size:clamp(1.25rem,2vw,1.8rem)}.eyebrow{margin-bottom:.35rem;color:#5b3a05;font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.tagline{margin-top:.85rem;font-size:clamp(1rem,2vw,1.35rem);font-weight:750}.hero-badge{display:grid;flex:0 0 auto;width:clamp(4rem,12vw,8rem);aspect-ratio:1;place-items:center;border:3px solid #172033;border-radius:28px;background:#fff;box-shadow:8px 8px #17203329;font-size:clamp(2.3rem,8vw,5rem)}.workspace{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:1rem;margin-top:1.25rem;align-items:start}.toolbar,.gallery,.canvas-section{border:3px solid #172033;border-radius:28px;background:#ffffffdb;box-shadow:0 12px #1720331a}.toolbar{position:sticky;top:1rem;display:grid;gap:1rem;padding:1rem}.tool-group{display:grid;gap:.65rem;padding-bottom:1rem;border-bottom:2px dashed #d7ddea}.tool-group:last-child{padding-bottom:0;border-bottom:0}.tool-label,.slider-group label{font-size:.9rem;font-weight:900}.button-row{display:flex;flex-wrap:wrap;gap:.55rem}.button-row button,.page-card,.download-button{min-height:44px;padding:.7rem .9rem;border:2px solid #172033;border-radius:16px;background:#fff;color:#172033;font-weight:900;box-shadow:0 4px #1720332e;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.button-row button:hover:not(:disabled),.page-card:hover{transform:translateY(-2px);box-shadow:0 7px #1720332e}.button-row button.active,.page-card-selected,.selected-swatch{background:#d9f99d}.color-picker-row{display:flex;align-items:center;gap:.7rem}input[type=color]{width:4rem;height:3rem;padding:.2rem;border:2px solid #172033;border-radius:14px;background:#fff}.color-value{font-weight:900}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.swatch{width:100%;aspect-ratio:1;border:2px solid #172033;border-radius:50%;box-shadow:inset 0 0 0 3px #ffffff80,0 3px #1720332e}.selected-swatch{outline:4px solid #ffcf56}input[type=range]{width:100%;accent-color:#ef4444}.canvas-section{min-width:0;padding:1rem}.canvas-header,.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.9rem}.canvas-status{max-width:24rem;color:#475569;font-weight:800;text-align:right}.canvas-wrapper{display:grid;width:100%;overflow:auto;place-items:center;border-radius:24px;background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 16px,#eef2ff 16px 32px);padding:clamp(.5rem,2vw,1rem)}.paper{position:relative;max-width:100%;border:4px solid #172033;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 24px #1720332e}.paper canvas{position:absolute;inset:0;width:100%;height:100%}.drawing-canvas{z-index:1;cursor:crosshair;touch-action:none}.outline-canvas{z-index:2;pointer-events:none}.gallery{margin-top:1.25rem;padding:1rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}.page-card{display:grid;min-height:118px;place-items:center;background:#fff;text-align:center}.page-emoji{display:block;font-size:2.25rem}@media(max-width:980px){.workspace{grid-template-columns:1fr}.toolbar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.app-shell{padding:.75rem}.hero,.canvas-header,.section-heading{align-items:start;flex-direction:column}.hero-badge{display:none}.toolbar{grid-template-columns:1fr}.canvas-status{text-align:left}.button-row button{flex:1 1 9rem}}