@import url('/fonts.css');
:root{--paper:#fff8e9;--ink:#302944;--purple:#6b48cc;--orange:#ef7654;--green:#254d42;--pink:#f7d8df;--line:#e2dacb;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:0;font-weight:700}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}a{color:inherit}header{max-width:1320px;margin:auto;padding:26px 44px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;text-decoration:none;font-weight:900;font-size:28px;letter-spacing:-1.3px}.brand img{margin-right:9px}.brand span{color:var(--purple)}.brand i{font-style:normal;color:var(--orange);font-size:22px;margin-left:4px}nav{display:flex;gap:12px;align-items:center}.round{background:#eee6fb;border:1px solid #d8c8ef;border-radius:50%;width:46px;font-size:25px}.quiet{background:transparent;color:var(--ink);padding:10px 16px;border:1px solid var(--line);border-radius:14px}.primary{background:var(--purple);color:white;border-radius:16px;padding:15px 23px;box-shadow:0 4px 0 #472e8e;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #472e8e}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #472e8e}.primary span{margin-left:10px}.wide{width:100%}main{max-width:1232px;margin:auto;padding:12px 40px 60px}#welcome{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding:35px 0 50px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.3px;color:#77698b;margin:0 0 20px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-2px}h1{font-size:clamp(46px,5.6vw,78px);line-height:1.08;margin:0 0 24px}h1 em{color:var(--purple);font-weight:500}h2{font-size:36px;margin:0 0 16px;letter-spacing:-1px}h3{font-size:20px}p{line-height:1.65}h1 .spark{display:inline-block;color:var(--orange);font-size:56px;vertical-align:top;margin:6px 0 0 14px;transform:rotate(12deg)}.lead{font-size:17px;color:#706779;line-height:1.8}.pills{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;font-size:12px;font-weight:700}.pills span{background:#f1eadd;border-radius:30px;padding:9px 13px}.storybook{aspect-ratio:1/1.08;border-radius:100px 100px 22px 22px;background:#283d55;position:relative;overflow:hidden;box-shadow:8px 10px 0 #e6d9c0,-4px 0 0 #d1b994;transform:rotate(3deg);border:8px solid #f0dfbd}.moon{position:absolute;color:#ffdc85;font-size:105px;right:35px;top:-10px;transform:rotate(-20deg)}.star{position:absolute;color:#f7c66a}.s1{left:45px;top:37px;font-size:38px}.s2{left:140px;top:95px;font-size:23px}.s3{right:25px;top:175px;font-size:32px}.hill{position:absolute;width:155%;height:60%;border-radius:50%;bottom:-20%;left:-25%}.back{background:#42766c;bottom:-7%;left:-15%;transform:rotate(-20deg)}.front{background:#1c5149;transform:rotate(15deg)}.house{position:absolute;left:43%;top:48%;width:82px;height:89px;background:#d79564;transform:rotate(-5deg)}.roof{width:112px;height:60px;background:#a84e48;clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;top:-57px;left:-15px}.window{width:23px;height:25px;background:#ffdd89;margin:12px;border:4px solid #7b4b3b;box-shadow:0 0 25px #f7d46d50}.door{width:23px;height:33px;background:#73483d;position:absolute;right:10px;bottom:0;border-radius:20px 20px 0 0}.tree{position:absolute;width:86px;height:160px;background:#153f3e;clip-path:polygon(50% 0,85% 45%,70% 45%,100% 80%,57% 80%,57% 100%,43% 100%,43% 80%,0 80%,30% 45%,15% 45%)}.t1{left:18px;bottom:45px}.t2{right:5px;bottom:32px;width:65px;height:120px}.story-label{position:absolute;bottom:22px;width:100%;text-align:center;color:#fbe6b6;font-family:Georgia,serif;font-size:20px;font-style:italic;line-height:1.3}.login-card{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#f0e9fa;border:1px solid #e1d5ed;border-radius:26px;padding:35px;position:relative}.login-card h2{font-size:29px}.login-card p{font-size:14px;color:#706779;margin-bottom:0}.login-card .eyebrow{font-size:10px;margin-bottom:10px}.login-card form{align-self:center}label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}input,textarea{width:100%;padding:14px;border:1px solid #d7cce2;border-radius:13px;background:#fffdf8;color:var(--ink);outline:none;min-height:48px}input:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6b48cc20}textarea{resize:vertical;min-height:140px;line-height:1.65}.input-action{display:flex;gap:8px}.input-action input{min-width:0}.input-action button{white-space:nowrap;font-size:13px}.small{font-size:12px;color:#7a7282;line-height:1.6}.centered{text-align:center}.shelf-heading{display:flex;justify-content:space-between;align-items:center;padding:35px 0}.shelf-heading h1{font-size:48px;margin:0}.shelf-heading .eyebrow{margin-bottom:10px}.tiny-star{color:var(--orange);font-size:32px;margin-left:14px}.badge{background:#e9e2f4;padding:9px 15px;border-radius:20px;font-size:12px}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.story-card{background:#fffdf7;padding:12px 12px 22px;border-radius:20px;box-shadow:0 4px 0 #e4dccd;border:1px solid #e4dccd;text-align:left;transition:transform .2s;color:var(--ink);width:100%;overflow:hidden}.story-card:hover{transform:translateY(-5px) rotate(-.5deg)}.cover{aspect-ratio:1;width:100%;border-radius:12px;object-fit:cover;display:block;background:#e6e2ef}.cover.placeholder{display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:60px;background:repeating-linear-gradient(45deg,#ebe2f4,#ebe2f4 12px,#f2ecf8 12px,#f2ecf8 24px)}.story-card h2{font-size:25px;letter-spacing:-.5px;line-height:1.2;padding:0 7px;margin:16px 0 12px}.card-meta{font-size:12px;font-weight:400;padding:0 7px;display:flex;justify-content:space-between;gap:10px;color:#82758a}.play{color:var(--purple);font-weight:bold}.empty{text-align:center;background:#f3eddf;border:1px dashed #d6c8af;border-radius:28px;padding:50px 20px}.empty>span{font-size:65px;color:var(--orange)}.empty h2{font-size:34px}.empty p{color:#82758a}.empty button{margin-top:12px}footer{display:flex;justify-content:space-between;max-width:1232px;margin:0 auto;padding:25px 40px 120px;color:#8b8090;font-size:11px;gap:15px}footer span:last-child{font-size:9px;letter-spacing:1px}#create-dock{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:22px 20px max(22px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 35%);pointer-events:none}#create-dock button{pointer-events:auto;padding:16px 35px;font-size:17px;border:3px solid var(--paper);outline:2px solid #d9ccec}dialog{border:1px solid #dbd0be;border-radius:28px;background:var(--paper);color:var(--ink);padding:36px;width:min(600px,calc(100% - 30px));max-height:90dvh;overflow-y:auto;box-shadow:0 20px 100px #21122f40}dialog::backdrop{background:#20172d7a;backdrop-filter:blur(4px)}dialog h2{padding-right:20px}dialog>p{color:#7a7282}.close{position:absolute;right:15px;top:13px;border-radius:50%;width:40px;height:40px;background:#f0e9df;color:var(--ink);font-size:27px;z-index:2}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.fields input{margin-top:9px}input[type=range]{padding:0;box-shadow:none;accent-color:var(--purple)}.voice-row{display:flex;gap:10px;align-items:center;margin-top:10px}.voice-row .quiet{color:var(--purple);font-size:13px}#record.recording{color:#b42239;background:#ffdce0;border-color:#b42239}.settings-section{border-top:1px solid var(--line);margin-top:25px;padding-top:12px}.cost-total{font-family:Georgia,serif;font-size:34px;margin:10px 0}.cost-row,.request-row{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:13px;align-items:center;overflow-wrap:anywhere}.request-row{flex-wrap:wrap}.reader{width:min(860px,calc(100% - 24px));padding:0}.reader>img{width:100%;max-height:330px;object-fit:cover}.reader-content{padding:30px 40px}.reader-content h2{font-size:40px}.reader audio{width:100%;margin:10px 0 25px}.reader #story-text{font-family:Georgia,serif;font-size:20px;line-height:1.9}.reader .eyebrow{margin:0 0 15px}#notice{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);max-width:550px;width:calc(100% - 40px);background:var(--ink);color:white;padding:15px 22px;border-radius:16px;z-index:10;box-shadow:0 4px 20px #0002;font-size:14px}#notice:empty{display:none}#lab-offline-status{color:#a34925;font-size:13px}[hidden]{display:none!important}
@media(max-width:760px){header{padding:20px}.brand{font-size:25px}.brand img{width:35px;height:35px}nav{gap:6px}nav .quiet{font-size:12px;padding:8px 10px}main{padding:0 20px 35px}#welcome{gap:25px;padding:20px 0 35px}.eyebrow{font-size:9px;letter-spacing:1.5px}h1{font-size:48px}h1 .spark{font-size:30px;margin-left:5px}.lead{font-size:14px}.lead br{display:none}.pills{font-size:10px;gap:8px}.pills span{padding:7px 10px}.storybook{border-radius:70px 70px 18px 18px}.login-card{grid-template-columns:1fr;gap:20px;padding:25px}.login-card h2{font-size:29px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.story-card{padding:8px 8px 16px}.story-card h2{font-size:22px}.shelf-heading h1{font-size:35px}.badge{padding:7px 10px}.reader-content{padding:25px}.reader-content h2{font-size:32px}.reader #story-text{font-size:18px}footer{padding:20px 20px 110px;flex-direction:column}.card-meta{flex-wrap:wrap}.fields{gap:12px}dialog{padding:28px 22px}.reader{padding:0}}
@media(max-width:520px){#welcome{grid-template-columns:1fr;position:relative;gap:20px}.intro{text-align:center;padding-top:18px}.pills{justify-content:center}.storybook{width:210px;justify-self:center;aspect-ratio:1.12;height:180px;border-width:5px;border-radius:45px 45px 15px 15px}.moon{font-size:65px;right:15px;top:-10px}.s1{left:15px;top:12px;font-size:22px}.s2{left:80px;top:30px;font-size:15px}.s3{right:10px;top:100px;font-size:20px}.house{width:43px;height:45px;top:49%}.roof{width:60px;height:30px;left:-8px;top:-28px}.window{width:15px;height:15px;border-width:2px;margin:6px}.door{height:20px;width:12px;right:5px}.tree{width:42px;height:80px;bottom:25px}.t2{width:35px;height:65px;bottom:22px}.story-label{font-size:12px;bottom:8px}.lead{max-width:330px;margin:18px auto}.pills{margin-top:18px}h1{margin-bottom:15px}.input-action{flex-direction:column}.input-action button{margin-top:3px}.story-grid{gap:15px 12px}.story-card h2{font-size:20px;padding:0 3px}.card-meta{padding:0 3px;font-size:10px}.shelf-heading{align-items:flex-start;gap:8px}.shelf-heading h1{font-size:32px}.tiny-star{font-size:20px;margin-left:5px}.badge{font-size:10px;white-space:nowrap}.fields{grid-template-columns:1fr 1fr}.voice-row{align-items:flex-start;flex-direction:column}.empty{padding:30px 15px}.empty h2{font-size:28px}.reader-content{padding:22px}.reader>img{max-height:260px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.dialog-message{background:#eee4fa;padding:12px 15px;border-radius:12px;color:#513780;font-size:13px}