@import"https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Space+Grotesk:wght@400;500;600&display=swap";:root{color-scheme:light;font-family:Space Grotesk,Segoe UI,sans-serif;background:#f7f2e8;color:#1b1b1f;--ink: #1b1b1f;--ink-soft: #4c4c57;--paper: #f7f2e8;--cream: #fff8ee;--accent: #ff7a4a;--accent-2: #4f6df5;--mint: #c9f7d6;--rose: #ffd3c2;--shadow: rgba(28, 28, 38, .12)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 20%,#fff6e4,#f5efe5 55%,#f1e7dc);min-height:100vh}body.coloring-lock{height:100vh;overflow:hidden;overscroll-behavior:none;touch-action:none}#root{min-height:100vh}body.coloring-lock #root{height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:2px solid rgba(27,27,31,.08);background:#fff8eee6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{display:flex;gap:16px;align-items:center}.brand-mark{font-family:Fraunces,serif;font-weight:700;font-size:26px;background:var(--ink);color:var(--cream);padding:10px 12px;border-radius:12px}.brand-title{font-family:Fraunces,serif;font-size:20px}.brand-subtitle{font-size:14px;color:var(--ink-soft)}.top-nav{display:flex;gap:12px}.main{flex:1;padding:32px;display:flex;flex-direction:column;gap:24px}body.coloring-lock .main{min-height:0}button{font:inherit;cursor:pointer;border:none;background:none}button:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.ghost{padding:10px 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:600}.ghost:hover{background:var(--ink);color:var(--cream)}.primary{padding:12px 20px;border-radius:999px;background:var(--accent);color:#1b1b1f;font-weight:700;box-shadow:0 12px 24px #ff7a4a40}.primary:hover{filter:brightness(.96)}.auth-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#111114a6;display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}.auth-card{background:var(--cream);border-radius:24px;padding:28px;max-width:460px;width:100%;box-shadow:0 24px 48px #0003;display:grid;gap:12px;text-align:center}.auth-card h1{margin:0;font-family:Fraunces,serif;font-size:28px}.auth-card p{margin:0;color:var(--ink-soft)}.auth-actions{display:flex;justify-content:center;margin-top:6px}.auth-actions-stack{flex-direction:column;gap:10px}.auth-email{font-weight:700;color:var(--ink)}.auth-error{color:#9b1c1c;font-weight:600}.auth-form{display:grid;gap:12px;margin-top:10px}.auth-field{display:grid;gap:6px;text-align:left;font-weight:600;color:var(--ink)}.auth-input{border-radius:12px;border:1px solid rgba(27,27,31,.2);padding:10px 12px;font:inherit;background:#fff}.auth-input:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}.loading-state,.error-state{padding:12px 16px;border-radius:12px;font-weight:600}.loading-state{background:#fff5da}.error-state{background:#ffe3e1;color:#9b1c1c}.home{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}.series-view{display:flex;flex-direction:column;gap:28px}.series-intro h1{font-family:Fraunces,serif;font-size:36px;margin:0 0 12px}.series-intro p{font-size:18px;color:var(--ink-soft);margin:0}.series-stack{display:flex;flex-direction:column;gap:26px}.series-section{padding:20px;border-radius:26px;background:#fff8eeb3;box-shadow:0 12px 22px var(--shadow);display:grid;gap:18px}.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.home-copy h1{font-family:Fraunces,serif;font-size:36px;margin:0 0 12px}.home-copy p{font-size:18px;color:var(--ink-soft);margin:0}.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.book-tile{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:24px;background:var(--cream);box-shadow:0 12px 20px var(--shadow);text-align:left;transition:transform .2s ease,box-shadow .2s ease}.book-tile:hover{transform:translateY(-4px);box-shadow:0 16px 28px #1c1c262e}.book-tile:disabled,.book-tile.disabled{cursor:not-allowed;opacity:.65;transform:none;box-shadow:0 8px 14px #1c1c261f}.tile-cover{position:relative;aspect-ratio:1 / 1;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#ffe9c6,#ffd1b3);width:250px;max-width:250px;max-height:250px;height:auto;margin:0 auto}.tile-cover img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:1}.tile-cover-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;text-align:center;font-family:Fraunces,serif;font-size:18px;color:var(--ink);background:linear-gradient(160deg,#fff4da,#ffd7bf);aspect-ratio:1 / 1}.tile-meta{display:flex;justify-content:space-between;align-items:center;text-align:center;flex-direction:column;gap:4px}.tile-title{font-weight:600}.tile-subtitle{font-size:13px;color:var(--ink-soft)}.book-view{display:flex;flex-direction:column;gap:24px}.book-simple-card{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:20px;padding:20px;border-radius:24px;background:var(--cream);box-shadow:0 12px 24px var(--shadow);align-items:center}.book-simple-cover{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#ffe7c7,#ffcdb2);min-height:180px;width:100%}.book-simple-cover img{position:absolute;top:12px;right:12px;bottom:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}.book-simple-info h2{margin:0 0 8px;font-family:Fraunces,serif;font-size:28px}.book-simple-info p{margin:0 0 16px;color:var(--ink-soft)}.book-simple-actions{display:flex;flex-wrap:wrap;gap:12px}.book-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:18px;border-radius:28px;background:linear-gradient(135deg,#ffe2d1,#fef0dd);box-shadow:0 12px 24px var(--shadow)}.book-hero h2,.color-header h2,.quiz-view h2,.play-view h2{font-family:Fraunces,serif;font-size:28px;margin:8px 0 6px}.book-hero p,.color-header p,.play-view p{margin:0 0 12px;color:var(--ink-soft)}.chip-row{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:6px 12px;border-radius:999px;background:var(--mint);font-size:12px;font-weight:600}.book-cover-large{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,#ffe7c7,#ffcdb2);min-height:180px}.book-cover-large img{position:absolute;top:12px;right:12px;bottom:12px;left:12px;width:100%;height:100%;object-fit:contain;opacity:1}.activity-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center}.activity-card{background:var(--cream);border-radius:20px;padding:18px;text-align:center;box-shadow:0 14px 26px var(--shadow);transition:transform .2s ease,box-shadow .2s ease;width:min(220px,90vw);aspect-ratio:1 / 1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.activity-card h3{margin:0 0 8px;font-size:20px}.activity-card p{margin:0;color:var(--ink-soft)}.activity-card:hover{transform:translateY(-6px);box-shadow:0 18px 30px #1c1c2633}.color-view{display:flex;flex-direction:column;gap:24px}.color-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}.color-sidebar{display:grid;gap:16px}.color-header{display:grid;gap:8px}.color-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px;border-radius:20px;background:var(--cream);box-shadow:0 8px 16px var(--shadow);width:100%}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label,.control-group span{font-weight:600}.swatch-row{display:grid;grid-template-columns:repeat(2,30px);grid-auto-rows:30px;gap:8px;align-items:start;justify-items:start}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent}.swatch.active{border-color:var(--ink)}.tool-row{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.tool-button{padding:0;width:100%;height:44px;border-radius:12px;background:#fff;font-weight:600;display:grid;place-items:center;color:var(--ink)}.tool-button.active{background:var(--rose)}.tool-button:disabled{opacity:.5;cursor:not-allowed}.tool-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.coloring-area{display:grid;grid-template-columns:1fr;gap:16px}.page-nav{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:20px;background:var(--cream);box-shadow:0 10px 20px var(--shadow);flex-wrap:wrap;justify-content:center}.page-nav-button{padding:10px 16px;border-radius:14px;background:#fff}.page-nav-button:disabled{opacity:.5;cursor:not-allowed}.page-counter{display:flex;align-items:center;gap:8px;font-weight:600}.page-input{width:72px;padding:8px 10px;border-radius:12px;border:2px solid transparent;background:#fff;font-weight:600;text-align:center}.page-input:focus{outline:none;border-color:var(--ink)}.canvas-shell{position:relative;width:100%;min-height:clamp(420px,70vh,820px);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 12px 24px var(--shadow)}.canvas-base,.canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.canvas-overlay{opacity:.5}@media print{@page{size:8.5in 11in;margin:.5in}body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{position:absolute;left:50%;top:50%;width:var(--print-width, 800px);height:var(--print-height, 800px);box-shadow:none;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(var(--print-scale, 1));transform-origin:center}.canvas-base,.canvas-overlay{position:absolute;inset:auto;width:100%;height:100%}}.quiz-view,.play-view{display:grid;gap:24px}.quiz-card,.play-card{background:var(--cream);border-radius:22px;padding:24px;box-shadow:0 12px 20px var(--shadow);display:grid;gap:16px}.play-prompt{font-size:20px;font-weight:600}.play-choices{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.play-actions{display:flex;gap:12px;flex-wrap:wrap}.play-progress{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--ink-soft)}.play-switch{display:flex;gap:10px;flex-wrap:wrap}.play-tab{padding:8px 14px;border-radius:999px;background:#fff;font-weight:600;border:2px solid transparent}.play-tab.active{border-color:var(--ink);background:var(--rose)}.play-status{padding:4px 10px;border-radius:999px;background:#fff;color:var(--ink)}.play-status.warn{background:#ff5e5726;color:#c0392b}.sequence-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.sequence-card{padding:16px;border-radius:16px;background:#fff;font-weight:600;border:2px solid transparent;min-height:70px}.sequence-card.picked{background:var(--mint);border-color:#2ed573}.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.match-column{display:grid;gap:10px}.match-card{padding:14px;border-radius:16px;background:#fff;border:2px solid transparent;text-align:left;font-weight:600;min-height:60px}.match-card.active{border-color:var(--accent-2);background:#4f6df51f}.match-card.matched{border-color:#2ed573;background:#2ed5732e;color:#1b6e36}.quiz-question{font-size:20px;font-weight:600}.quiz-choices{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.choice{padding:14px;border-radius:16px;background:#fff;border:2px solid transparent;font-weight:600}.choice.correct{border-color:#2ed573;background:#2ed57333}.choice.wrong{border-color:#ff5e57;background:#ff5e5733}.quiz-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 1024px){.home,.book-hero,.book-simple-card,.color-layout,.coloring-area{grid-template-columns:1fr}}@media (max-width: 720px){.top-bar{flex-direction:column;gap:12px;align-items:flex-start}.main{padding:20px}}.series-header h2{margin:0 0 6px;font-family:Fraunces,serif;font-size:28px}