:root { color-scheme: light; font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif; --ink:#304d49; --muted:#71817d; --paper:#fffdf8; --line:#ddd4b8; --green:#58a77a; --gold:#e2a54f; --coral:#e87866; --purple:#8875af; --shadow:0 19px 46px rgba(58,75,68,.14); }
*{box-sizing:border-box} html{min-width:320px;min-height:100%;background:#f2f7ed} body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);background:radial-gradient(circle at 8% 11%,rgba(226,165,79,.2) 0 145px,transparent 147px),radial-gradient(circle at 95% 30%,rgba(104,164,194,.13) 0 175px,transparent 177px),linear-gradient(145deg,#f1f7ec,#fff8ed 55%,#f2eef9)} body:before{position:fixed;inset:0;z-index:-1;opacity:.12;background-image:radial-gradient(#738e86 1.2px,transparent 1.2px);background-size:29px 29px;content:""} button,input,textarea{color:inherit;font:inherit} button:not(:disabled){cursor:pointer} button:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid rgba(226,165,79,.72);outline-offset:4px} h1,h2,p{margin-top:0}.app{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:20px 0 48px}.loading-card{display:grid;min-height:320px;place-items:center;align-content:center;gap:12px;margin-top:60px;background:var(--paper);border:3px solid var(--line);border-radius:42px;box-shadow:var(--shadow)}.loading-card span{font-size:64px}.loading-card p{color:var(--muted);font-weight:900}.topbar,.brand,.top-actions,.section-heading,.game-head,.writer-head,.animal-note{display:flex;align-items:center}.topbar{min-height:68px;justify-content:space-between;gap:16px;margin-bottom:20px}.brand{gap:12px;padding:0;text-align:left;background:none;border:0}.brand-mark{display:grid;width:56px;height:56px;place-items:center;font-size:29px;background:#fff0c8;border:3px solid #dac790;border-radius:19px;box-shadow:0 7px 16px rgba(65,84,76,.12);transform:rotate(-4deg)}.brand strong,.brand small{display:block}.brand strong{font-size:23px;font-weight:900}.brand small{margin-top:3px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.top-actions{gap:10px}.top-wand{font-size:29px}.sound-button,.back-button{min-width:48px;min-height:48px;font-weight:900;background:rgba(255,253,248,.95);border:2px solid var(--line);border-radius:17px}.sound-button{display:flex;align-items:center;gap:8px;padding:0 16px;font-size:13px}.back-button{padding:0;font-size:22px}.eyebrow{margin:0 0 8px;color:#3d7e64;font-family:Georgia,serif;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.primary-button,.secondary-button,.continue-button{min-width:44px;min-height:52px;border-radius:17px;font-weight:900}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;color:white;background:#409775;border:0;box-shadow:0 8px 0 #2e795e}.primary-button:active{transform:translateY(4px);box-shadow:0 4px 0 #2e795e}.primary-button.compact{min-height:46px;box-shadow:none}.secondary-button{padding:0 20px;background:white;border:2px solid var(--line)}.continue-button{margin-left:9px;padding:0 18px;color:#6d5c83;background:#f2eafa;border:2px solid #c9b9dd}
.hero{display:grid;min-height:520px;align-items:center;grid-template-columns:1.04fr .96fr;gap:45px;padding:clamp(40px,6vw,68px);overflow:hidden;background:rgba(255,253,248,.97);border:3px solid var(--line);border-radius:46px;box-shadow:var(--shadow)}.hero h1{max-width:610px;margin-bottom:19px;font-size:clamp(47px,5.6vw,67px);font-weight:900;letter-spacing:-.055em;line-height:.98}.hero-copy>p:not(.eyebrow){max-width:550px;margin-bottom:27px;color:var(--muted);font-size:18px;font-weight:800;line-height:1.52}.hero-facts{display:flex;flex-wrap:wrap;gap:18px;margin-top:29px}.hero-facts span{color:var(--muted);font-size:13px;font-weight:900}.hero-facts strong{margin-right:4px;color:var(--ink);font-size:24px}.hero-art{min-height:390px}.hero-book{position:relative;height:375px;background:linear-gradient(90deg,#fffdf6 0 49.5%,#eee6ce 50%,#fffdf6 50.5% 100%);border:4px solid #5b665f;border-radius:35px 18px 18px 35px;box-shadow:14px 15px 0 rgba(62,78,71,.13);transform:rotate(2deg)}.hero-book img{position:absolute;right:33px;bottom:35px;width:170px;height:170px;object-fit:contain}.book-lines{position:absolute;bottom:35px;left:27px;width:42%}.book-lines strong{display:block;margin-bottom:17px;font-family:Georgia,serif;font-size:22px}.book-lines span{display:block;height:7px;margin-top:12px;background:#ebe4cf;border-radius:5px}.word-orbit{position:absolute;z-index:2;padding:10px 13px;font-size:20px;background:white;border:3px solid #d9ceb0;border-radius:17px;box-shadow:0 7px 12px rgba(52,68,62,.12)}.word-orbit b{font-size:12px}.orbit-one{top:26px;left:22px;transform:rotate(-4deg)}.orbit-two{top:86px;right:20px;transform:rotate(4deg)}.orbit-three{top:150px;left:47px;transform:rotate(-2deg)}
.how-section,.modes-section{margin-top:30px;padding:38px;background:rgba(255,253,248,.84);border:2px solid rgba(221,212,184,.86);border-radius:36px}.section-heading{justify-content:space-between;gap:30px;margin-bottom:24px}.section-heading h2{margin:0;font-size:31px}.section-heading>p{max-width:440px;margin:0;color:var(--muted);font-size:14px;font-weight:800;text-align:right}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.steps-grid article{display:flex;min-height:112px;align-items:center;gap:15px;padding:19px;background:white;border:2px solid var(--line);border-radius:24px}.steps-grid article>b{display:grid;flex:0 0 42px;height:42px;place-items:center;color:white;background:var(--green);border-radius:14px}.steps-grid strong,.steps-grid small{display:block}.steps-grid strong{margin-bottom:5px;font-size:17px}.steps-grid small{color:var(--muted);font-size:13px;font-weight:800;line-height:1.35}.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mode-card{display:flex;min-height:345px;padding:19px;text-align:left;background:white;border:3px solid var(--line);border-radius:29px;box-shadow:0 10px 0 #ded6bc;flex-direction:column}.mode-card.green{--card:var(--green)}.mode-card.gold{--card:var(--gold)}.mode-card.purple{--card:var(--purple)}.mode-top{display:flex;align-items:center;justify-content:space-between}.mode-top>b{display:grid;width:45px;height:45px;place-items:center;color:white;background:var(--card);border-radius:15px}.mode-top small{color:var(--card);font-weight:900}.mode-art{display:grid;height:105px;place-items:center;margin:15px 0;font-size:60px;background:color-mix(in srgb,var(--card) 16%,white);border-radius:22px}.mode-copy{flex:1}.mode-copy strong,.mode-copy span{display:block}.mode-copy strong{margin-bottom:7px;font-size:22px}.mode-copy span{color:var(--muted);font-size:14px;font-weight:800;line-height:1.4}.mode-go{display:flex;min-height:48px;align-items:center;justify-content:space-between;margin-top:14px;padding:0 15px;color:white;font-weight:900;background:var(--card);border-radius:15px}.animal-note{gap:22px;margin:28px auto 0;padding:17px 27px;background:#e9f2e6;border:2px solid #b9d1b7;border-radius:28px}.animal-note img{width:88px;height:88px;object-fit:contain}.animal-note strong,.animal-note span{display:block}.animal-note strong{margin-bottom:5px;font-size:18px}.animal-note span{color:var(--muted);font-size:14px;font-weight:800;line-height:1.4}
.game-shell{padding:clamp(22px,3.5vw,39px);background:var(--paper);border:3px solid var(--line);border-radius:40px;box-shadow:var(--shadow)}.game-head{justify-content:space-between;gap:20px}.game-head>div{min-width:0;flex:1}.game-head label span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.game-head input{width:min(100%,620px);padding:5px 2px 7px;font-size:clamp(30px,4vw,44px);font-weight:900;background:transparent;border:0;border-bottom:3px dashed #d8cfb3}.shuffle-button{min-height:50px;padding:0 18px;font-weight:900;background:#fff1c6;border:2px solid #ddc370;border-radius:16px}.word-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.word-cards button{display:grid;min-height:112px;align-items:center;grid-template-columns:54px 1fr;grid-template-rows:auto auto auto;gap:2px 10px;padding:13px;text-align:left;background:#f7f4e9;border:3px solid transparent;border-radius:20px}.word-cards button.used{background:#e8f4e9;border-color:var(--green)}.word-cards button>span{grid-row:1/span 3;font-size:40px;text-align:center}.word-cards small{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}.word-cards strong{font-size:16px}.word-cards i{color:var(--accent);font-size:11px;font-weight:900;font-style:normal}.part-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.part-tabs button{display:grid;min-height:54px;align-items:center;grid-template-columns:35px 1fr 25px;gap:6px;padding:7px 10px;text-align:left;font-weight:900;background:#f0ede2;border:3px solid transparent;border-radius:15px}.part-tabs button.active{background:white;border-color:var(--accent)}.part-tabs b{display:grid;width:32px;height:32px;place-items:center;color:white;background:#748b84;border-radius:10px}.part-tabs i{color:var(--green);font-style:normal}.writing-workspace{display:grid;align-items:start;grid-template-columns:minmax(250px,.72fr) minmax(450px,1.28fr);gap:18px}.story-guide,.writer-panel{min-width:0;padding:22px;border:3px solid var(--line);border-radius:27px}.story-guide{background:#edf4e8}.story-guide>img{display:block;width:190px;height:190px;margin:auto;object-fit:contain}.story-guide p small,.story-guide p strong,.story-guide p span{display:block}.story-guide p small{color:#557264;font-family:Georgia,serif;font-size:11px;font-weight:900;letter-spacing:.12em}.story-guide p strong{margin:6px 0;font-size:25px;text-transform:capitalize}.story-guide p span{color:var(--muted);font-size:14px;font-weight:800;line-height:1.45}.used-meter{display:flex;align-items:center;gap:10px;padding:11px 13px;background:white;border-radius:15px}.used-meter b{display:grid;width:38px;height:38px;place-items:center;color:white;background:var(--accent);border-radius:12px}.used-meter span{font-size:12px;font-weight:900}.writer-panel{background:#fffaf0;border-color:#e3d6ad}.writer-head{justify-content:space-between;gap:15px}.writer-head h2{margin-bottom:13px;font-size:26px}.count{display:grid;flex:0 0 70px;min-height:46px;place-items:center;color:var(--muted);font-weight:900;background:white;border:2px solid var(--line);border-radius:14px}.starters{display:flex;gap:7px;margin-bottom:11px;overflow-x:auto;padding-bottom:5px}.starters button{flex:0 0 auto;min-height:44px;padding:6px 12px;color:#67577d;font-size:12px;font-weight:900;background:#eee7f7;border:2px solid #c8b9dd;border-radius:13px}.tale-editor>span{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.tale-editor textarea{width:100%;min-height:200px;padding:16px;resize:vertical;font-family:Georgia,serif;font-size:17px;font-weight:700;line-height:1.55;background:white;border:3px solid var(--line);border-radius:18px}.writer-actions{display:flex;justify-content:space-between;gap:10px;margin-top:13px}.feedback{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding:11px 15px;background:#fff0ec;border:2px solid #e2a299;border-radius:16px}.feedback>span{display:grid;flex:0 0 40px;height:40px;place-items:center;background:white;border-radius:12px}.feedback p{margin:0}.feedback strong,.feedback small{display:block}.feedback small{color:var(--muted);font-weight:800}
.result-card{max-width:880px;margin:35px auto;padding:clamp(28px,4.5vw,50px);text-align:center;background:var(--paper);border:3px solid var(--line);border-radius:42px;box-shadow:var(--shadow)}.result-art{position:relative;width:155px;height:140px;margin:auto}.result-art img{width:150px;height:150px;object-fit:contain}.result-art span{position:absolute;top:0;right:-10px;display:grid;width:45px;height:45px;place-items:center;background:#fff0c6;border-radius:50%}.result-card h1{margin-bottom:12px;font-size:clamp(38px,5vw,55px);letter-spacing:-.045em}.result-words{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}.result-words span{padding:8px 12px;font-weight:900;background:#f2efe3;border-radius:13px}.tale-page{padding:28px;text-align:left;background:#fffaf0;border:3px solid #e1d4ac;border-radius:23px}.tale-page p{font-family:Georgia,serif;font-size:17px;font-weight:700;line-height:1.65}.tale-page p:last-child{margin-bottom:0}.result-stats,.result-actions{display:flex;justify-content:center;gap:13px}.result-stats{margin:22px 0}.result-stats>span{min-width:125px;padding:12px;background:#f0f4eb;border-radius:17px}.result-stats strong,.result-stats small{display:block}.result-stats strong{font-size:25px}.result-stats small{color:var(--muted);font-weight:800}.word-cards button:disabled:not(.used){opacity:.52;filter:grayscale(.35)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p,.hero h1{margin-right:auto;margin-left:auto}.hero-facts{justify-content:center}.hero-art{width:min(100%,520px);margin:auto}.steps-grid,.modes-grid{grid-template-columns:1fr}.writing-workspace{grid-template-columns:1fr}.story-guide{display:flex;align-items:center;gap:20px}.story-guide>img{width:150px;height:150px;margin:0}.story-guide p{flex:1}.used-meter{flex:0 0 130px}}
@media(max-width:700px){.app{width:min(100% - 20px,1120px);padding-top:10px}.topbar{min-height:58px;margin-bottom:10px}.brand-mark{width:48px;height:48px;font-size:24px;border-radius:16px}.brand strong{font-size:17px}.brand small,.sound-button span:last-child,.top-wand{display:none}.sound-button{width:48px;padding:0;justify-content:center}.hero{min-height:0;gap:24px;padding:34px 20px;border-radius:31px}.hero h1{font-size:clamp(39px,12vw,55px)}.hero-copy>p:not(.eyebrow){font-size:16px}.continue-button{margin:15px 0 0}.hero-facts{gap:8px}.hero-facts span{padding:8px 9px;background:#f5f3e9;border-radius:12px}.hero-art{min-height:320px}.hero-book{height:310px}.hero-book img{right:18px;bottom:25px;width:135px;height:135px}.book-lines{left:17px}.word-orbit{padding:8px;font-size:17px}.orbit-three{top:135px;left:28px}.how-section,.modes-section{margin-top:18px;padding:24px 15px;border-radius:28px}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.section-heading>p{text-align:left}.animal-note{align-items:flex-start;padding:15px}.animal-note img{width:70px;height:70px}.game-shell{padding:21px 12px;border-radius:29px}.game-head{align-items:flex-start;flex-direction:column}.game-head input{font-size:30px}.shuffle-button{width:100%}.word-cards{grid-template-columns:1fr}.word-cards button{min-height:82px}.part-tabs{grid-template-columns:1fr}.story-guide{align-items:flex-start;flex-wrap:wrap;padding:16px}.story-guide>img{width:120px;height:120px}.story-guide p{min-width:160px}.used-meter{width:100%;flex:auto}.writer-panel{padding:16px}.writer-head{align-items:flex-start;flex-direction:column}.count{align-self:flex-end;margin-top:-58px}.writer-actions{flex-direction:column-reverse}.writer-actions button{width:100%}.result-card{margin:22px auto;padding:28px 14px;border-radius:29px}.tale-page{padding:19px}.result-stats{flex-wrap:wrap}.result-stats>span{min-width:95px;flex:1}.result-actions{flex-direction:column-reverse}}
@media(max-width:420px){.brand{gap:8px}.brand strong{font-size:16px}.word-orbit b{font-size:10px}.book-lines strong{font-size:17px}.story-guide p{min-width:145px}.result-words span{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{@page{margin:12mm}body{background:#fff}.app{width:100%;padding:0}.topbar,.result-art,.result-card>.eyebrow,.result-words,.result-stats,.result-actions{display:none!important}.result-card{max-width:none;margin:0;padding:0;border:0;box-shadow:none}.result-card h1{margin:0 0 8mm}.tale-page{padding:0;border:0;break-inside:avoid}}