:root{--bg:#fff9ec;--bg-2:#ffeecf;--ink:#2b2140;--muted:#6f6684;--card:#fff;--line:#f0e4cf;--brand:#ff7a59;--brand-2:#4cb8ff;--radius:20px;--shadow:0 6px 0 #2b214014, 0 14px 30px #2b214014;color:var(--ink);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Fredoka,Nunito,ui-rounded,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{background-image:radial-gradient(circle at 10% 0,#ffe0d4 0,#0000 40%),radial-gradient(circle at 90% 10%,#d8f0ff 0,#0000 40%),radial-gradient(circle at 50% 100%,#e7ffd6 0,#0000 40%);background-attachment:fixed;min-height:100vh}a{color:var(--brand)}button{font:inherit;cursor:pointer}.shell{max-width:1240px;margin:0 auto;padding:0 16px 40px}.view-book .shell,.view-book{max-width:none}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;display:flex}.topbar nav{margin-left:auto}.brand{color:var(--ink);white-space:nowrap;align-items:center;gap:10px;font-size:1.4rem;text-decoration:none;display:flex}.brand b{color:var(--brand);display:inline-block}.kid-name{animation:.6s cubic-bezier(.2,.9,.3,1.2) kid-in}@keyframes kid-in{0%{opacity:0;transform:translateY(-8px)scale(.9)}to{opacity:1;transform:none}}.paw{width:46px;height:46px;box-shadow:var(--shadow);background:#fff;border-radius:50%;place-items:center;font-size:1.8rem;display:grid}.topbar nav{box-shadow:var(--shadow);background:#fff;border-radius:999px;gap:6px;padding:6px;display:flex}.topbar nav a{color:var(--muted);white-space:nowrap;border-radius:999px;padding:8px 16px;font-weight:600;text-decoration:none}.topbar nav a.on{background:var(--ink);color:#fff}.toolbar{align-items:center;gap:12px;margin:4px 0 14px;display:flex}.greet{white-space:nowrap;font-size:1.1rem;font-weight:700}.back-link{color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;background:#fff;border:0;border-radius:999px;padding:10px 14px;font-weight:700}.search{min-width:0;font:inherit;box-shadow:var(--shadow);background:#fff;border:3px solid #fff;border-radius:999px;outline:none;flex:1;padding:11px 16px;font-size:1rem}.search:focus{border-color:var(--brand-2)}.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:10px;display:grid}.tile{--tile:var(--brand);text-align:left;color:#fff;background:linear-gradient(145deg, var(--tile), color-mix(in srgb, var(--tile) 70%, #000 12%));box-shadow:var(--shadow);border:0;border-radius:18px;flex-direction:column;gap:2px;padding:14px;transition:transform .12s;display:flex}.tile:hover{transform:translateY(-3px)}.tile-emoji{font-size:1.8rem;line-height:1.1}.tile-name{font-size:1.05rem;font-weight:700}.tile-count{opacity:.9;font-size:.85rem}.shelf{margin-top:22px}.shelf header{flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:14px;display:flex}.shelf h2{border-left:8px solid var(--shelf);border-radius:4px;margin:0;padding-left:14px;font-size:1.5rem}.shelf header span{color:var(--muted)}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;display:grid}.book{background:var(--card);border-radius:var(--radius);text-align:left;box-shadow:var(--shadow);color:var(--ink);border:0;flex-direction:column;gap:6px;padding:12px;transition:transform .15s,box-shadow .15s;display:flex}.book:hover{transform:translateY(-4px)rotate(-.5deg);box-shadow:0 10px #2b21401a,0 22px 40px #2b214024}.cover{aspect-ratio:3/4;background:linear-gradient(160deg, var(--shelf), #fff 140%);border-radius:12px;position:relative;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%;display:block}.spine{background:linear-gradient(90deg,#0000002e,#0000);width:8px;position:absolute;inset:0 auto 0 0}.book strong{font-size:.98rem;line-height:1.2}.book small{color:var(--muted)}.empty{text-align:center;color:var(--muted);margin:40px 0;font-size:1.1rem}.draw-canvas{z-index:6;pointer-events:none}.draw-wrap.active .draw-canvas.live{pointer-events:auto}.draw-btn.on{background:var(--ink)}.palette{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffffff5;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;width:max-content;max-width:calc(100vw - 20px);padding:8px 12px;animation:.2s ease-out pop;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #2b214040}@keyframes pop{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.palette>div{align-items:center;gap:6px;display:flex}.tool{background:#f3eef7;border:2px solid #0000;border-radius:12px;width:38px;height:38px;font-size:1.15rem}.tool.on{border-color:var(--ink);background:#fff}.tool.done{color:#fff;background:#43a047;font-weight:800}.swatch{border:3px solid #fff;border-radius:50%;width:26px;height:26px;box-shadow:0 0 0 1px #ddd}.swatch.on{box-shadow:0 0 0 3px var(--ink)}.dot{background:#f3eef7;border:2px solid #0000;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.dot i{background:var(--ink);border-radius:50%;display:block}.dot.on{border-color:var(--ink);background:#fff}.reader{--book-color:var(--brand);flex-direction:column;height:calc(100dvh - 90px);min-height:420px;display:flex}.reader.full{z-index:50;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#1b1626;position:fixed;inset:0}.reader.full .reader-bar,.reader.full .nav-btn{display:none}.reader.full .foot-btn{background:#ffffff26}.reader.full .reader-foot{color:#cfc8dd}.reader.full .fb-page{box-shadow:0 10px 40px #00000080}.no-scroll{overflow:hidden}.exit-full{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:60;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff26;border:0;border-radius:50%;width:40px;height:40px;font-size:1.1rem;position:fixed}.tap-zone{z-index:4;width:18%;display:none;position:absolute;top:0;bottom:0}.tap-zone.left{left:0}.tap-zone.right{right:0}.reader.full .tap-zone{display:block}.reader-bar{flex-wrap:wrap;align-items:center;gap:12px;padding:8px 0;display:flex}.reader-title{flex-direction:column;flex:1;min-width:160px;display:flex}.reader-title span{color:var(--muted);font-size:.9rem}.reader-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.icon-btn{width:42px;height:42px;box-shadow:var(--shadow);background:#fff;border:0;border-radius:50%;font-size:1.2rem}.pill{background:var(--book-color);color:#fff;box-shadow:var(--shadow);border:0;border-radius:999px;padding:10px 16px;font-weight:700;text-decoration:none}.pill.ghost{color:var(--ink);background:#fff}.reader-stage{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.flipbook{gap:0;margin:0 auto;display:flex}.fb-page{width:var(--pw);height:var(--ph);background:#fff;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 30px #2b21402e}.fb-page.blank{box-shadow:none;background:0 0}.flipbook .fb-page:first-child:not(.blank){border-radius:8px 0 0 8px}.flipbook .fb-page:last-child{border-radius:0 8px 8px 0}.flipbook .fb-page:only-child{border-radius:8px}.flipbook .fb-page+.fb-page:not(.blank){box-shadow:0 8px 30px #2b21402e,inset 12px 0 16px -12px #00000040}.fb-page img{object-fit:contain;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.fb-loading{color:var(--muted)}.fb-num{color:#aaa;font-size:.7rem;position:absolute;bottom:6px;right:10px}.nav-btn{z-index:5;width:52px;height:52px;box-shadow:var(--shadow);color:var(--ink);background:#fff;border:0;border-radius:50%;font-size:2rem;line-height:1;position:absolute;top:50%;transform:translateY(-50%)}.nav-btn.left{left:4px}.nav-btn.right{right:4px}.nav-btn:disabled{opacity:.3;cursor:default}.drive-embed{border-radius:var(--radius);width:100%;height:100%;box-shadow:var(--shadow);background:#fff;border:0}.reader-msg{text-align:center;color:var(--muted)}.spinner{border:6px solid #fff;border-top-color:var(--book-color);border-radius:50%;width:54px;height:54px;margin:0 auto 14px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.reader-foot{color:var(--muted);align-items:center;gap:12px;padding:10px 6px;display:flex}.reader-foot span{white-space:nowrap;text-align:center;min-width:64px}.foot-btn{background:var(--book-color);color:#fff;box-shadow:var(--shadow);white-space:nowrap;border:0;border-radius:999px;padding:12px 18px;font-size:1rem;font-weight:800}.foot-btn:disabled{opacity:.35}.reader-foot input{accent-color:var(--book-color);flex:1}.credits{text-align:center;color:var(--muted);margin-top:40px;font-size:.9rem}.view-book .credits{display:none}@media (width<=700px){.shell{padding:0 12px 24px}.topbar{flex-wrap:nowrap;padding:8px 0}.brand{gap:8px;font-size:1.05rem}.paw{width:34px;height:34px;font-size:1.2rem}.topbar nav{padding:4px}.topbar nav a{padding:6px 12px;font-size:1rem}.topbar nav a span,.greet{display:none}.tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile{border-radius:14px;padding:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.reader{height:calc(100dvh - 76px)}.reader-bar{gap:8px}.reader-title strong{font-size:.95rem}.pill{padding:8px 12px;font-size:.85rem}.pill.ghost,.nav-btn{display:none}.reader-foot{gap:8px;padding:8px 0;font-size:.85rem}.foot-btn{flex:none;padding:12px 14px}.reader-foot input{min-width:0}.palette{gap:8px 12px;padding:6px 8px}.tool,.dot{width:34px;height:34px}.swatch{width:22px;height:22px}}@media (display-mode:standalone){.credits{display:none}}.studio{--card:#fff;--ink:#1d1c1a;--muted:#6b675f;--line:#ddd8cf;--accent:#b5462b;--accent-ink:#fff;color:var(--ink);max-width:880px;margin:0 auto;padding:32px 16px 64px}.studio header h1{letter-spacing:-.02em;margin:0;font-size:2.2rem}.studio header p{color:var(--muted);margin:4px 0 24px}.studio .drop{border:2px dashed var(--line);background:var(--card);text-align:center;cursor:pointer;border-radius:12px;padding:36px 20px;transition:border-color .15s,background .15s}.studio .drop.drag{border-color:var(--accent);background:#fff8f4}.studio .drop div{flex-direction:column;gap:4px;display:flex}.studio .drop span{color:var(--muted);font-size:.9rem}.studio .options{background:var(--card);border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px;margin-top:20px;padding:20px;display:grid}.studio .options label{color:var(--muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.studio .options select,.studio .options input[type=number]{font:inherit;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px}.studio .checks{flex-wrap:wrap;grid-column:1/-1;gap:10px 22px;display:flex}.studio .checks label{color:var(--ink);flex-direction:row;align-items:center}.studio .actions{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.studio button{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;padding:10px 18px}.studio button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.studio button:disabled{opacity:.5;cursor:not-allowed}.studio .error{color:var(--accent);margin-top:12px}.studio .result{margin-top:28px}.studio .summary{flex-wrap:wrap;gap:12px;display:flex}.studio .summary div{background:var(--card);border:1px solid var(--line);border-radius:12px;flex-direction:column;flex:140px;padding:14px;display:flex}.studio .summary b{font-size:1.6rem}.studio .summary span{color:var(--muted);font-size:.85rem}.studio h2{margin:26px 0 10px;font-size:1.1rem}.studio .instructions{padding-left:22px;line-height:1.5}.studio .instructions li{margin-bottom:6px}.studio details{margin-top:12px}.studio summary{cursor:pointer;color:var(--muted)}.studio table{border-collapse:collapse;width:100%;max-width:480px;margin-top:10px;font-size:.9rem}.studio th,.studio td{text-align:left;border-bottom:1px solid var(--line);padding:6px 10px}.studio iframe{border:1px solid var(--line);background:#fff;border-radius:12px;width:100%;height:70vh}.studio footer{color:var(--muted);text-align:center;margin-top:40px;font-size:.85rem}