:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffe6;background-color:#121016;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary: #D4AF37;--primary-glow: rgba(212, 175, 55, .4);--bg: #F9F9F9;--text: #1A1A1A;--gold: #D4AF37;--violet: #9370DB;--glass-bg: rgba(255, 255, 255, .6);--glass-border: rgba(212, 175, 55, .3);--glass-highlight: rgba(255, 255, 255, .5);--accent-gradient: linear-gradient(135deg, var(--gold) 0%, var(--violet) 100%);--accent-solid: var(--gold);--accent-secondary: var(--violet)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;color:var(--text);background-color:#f5f5f7;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),radial-gradient(circle at 10% 20%,rgba(147,112,219,.08),transparent 40%),radial-gradient(circle at 90% 80%,rgba(212,175,55,.1),transparent 40%),linear-gradient(to bottom,#fafafa,#f0f0f0);background-attachment:fixed}#root{width:100%;max-width:480px;margin:0 auto;padding:2rem;text-align:center}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 8px 32px #6464641a;overflow:hidden;color:var(--text)}.glass{background:#fff6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}.muted{color:#0009}.primary-btn{background:var(--accent-gradient);border:none;border-radius:12px;padding:12px 24px;color:#fff;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #d4af374d}.primary-btn:active{transform:scale(.98)}.primary-btn:hover{box-shadow:0 0 20px #8a2be280}.play-btn{background-color:#2c2c2c;color:#fff;border:none;cursor:pointer;box-shadow:0 6px 24px #00000026;transition:all .3s ease}.play-btn:hover,.play-btn:active{background-color:#2c2c2c;box-shadow:0 8px 30px #d4af3740,0 0 20px #9370db26;transform:scale(1.02)}.nav-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:#0006;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;flex:1}.nav-btn.active{color:var(--gold);transform:translateY(-2px);text-shadow:0 0 15px rgba(147,112,219,.15)}.book-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:calc(100vh - 100px);padding-top:1rem;padding-bottom:calc(120px + env(safe-area-inset-bottom));width:100%}.book-preview-card{width:100%;max-width:360px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.book-cover-preview{width:100%;aspect-ratio:3/4;max-height:320px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px #0000001a;position:relative;overflow:hidden}.book-cover-preview:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,rgba(255,255,255,.4) 0%,transparent 10%,transparent 90%,rgba(0,0,0,.1) 100%);pointer-events:none}.book-actions{width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px}.btn-lg{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:transform .2s,box-shadow .2s}.btn-lg:active{transform:scale(.98)}.btn-outline{background:transparent;border:1px solid var(--violet);color:var(--violet)}.btn-primary-full{background:var(--accent-gradient);border:none;color:#fff;box-shadow:0 4px 15px #d4af374d}input{background:#fff9;border:1px solid var(--glass-border);border-radius:12px;padding:12px;color:var(--text);font-size:1.1rem;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s}input:focus{border-color:var(--primary);box-shadow:0 0 10px #d4af3733}