:root{
  --paper:#f5f1e7;--cream:#fcfaf5;--ink:#26382f;--muted:#7b7c70;--line:#e5dfd2;
  --green:#284b3e;--green-deep:#203e33;--terracotta:#be7156;--orange:#dfb68b;--sage:#e2e9dc;
  --shadow:0 20px 60px rgba(42,44,31,.075);--serif:Georgia,'Times New Roman',serif;
  --sans:'Avenir Next',Avenir,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);background:var(--paper);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.27;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E")}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ba990;outline-offset:3px}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.shell{max-width:1216px;margin:auto;padding:0 34px 105px}
.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:12px;color:var(--green);text-align:left}
.brand-icon{width:41px;height:41px;display:grid;place-items:center;background:var(--green);border-radius:13px;color:#fff0d4}
.brand-icon svg{width:25px;height:25px}
.brand-text{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.8px;white-space:nowrap}.brand-text small{display:block;font:600 9px var(--sans);letter-spacing:2.2px;color:var(--terracotta);margin-top:1px;text-align:center}
.navlinks{display:flex;gap:7px;background:#ebe8df;border-radius:100px;padding:5px}.navlink{border:0;background:transparent;border-radius:80px;color:#6b7269;font-size:13px;font-weight:650;padding:11px 19px;transition:.2s}.navlink:hover{color:var(--green);background:#e1e4dc}.navlink.active{background:var(--cream);color:var(--ink);box-shadow:0 2px 8px #19291d10}
.nav-right{display:flex;align-items:center;gap:12px}.profile{padding:7px 11px 7px 7px;border-radius:100px;border:1px solid var(--line);background:var(--cream);display:flex;gap:8px;align-items:center;font-size:13px;font-weight:650}.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:100px;background:#d9b89e;color:#5b3828;font:700 12px var(--sans)}.profile .avatar.karin{background:#d2ddc4;color:#35553d}.down{font-size:12px;color:#9c9d91;margin-left:3px}.demo-dot{font-size:10px;letter-spacing:1.3px;color:#aa8b67;text-transform:uppercase;white-space:nowrap}
.mobile-nav{display:none}
button.primary,.primary{border:1px solid var(--green);background:var(--green);color:#fffdf2;border-radius:100px;padding:15px 22px;font-weight:700;font-size:13px;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .2s,background .2s}.primary:hover{background:var(--green-deep);transform:translateY(-1px)}
button.secondary,.secondary{border:1px solid #cacfc1;background:transparent;color:var(--green);border-radius:100px;padding:13px 20px;font-weight:700;font-size:13px;display:inline-flex;gap:9px;align-items:center;justify-content:center}.secondary:hover{background:#e8ebdf}
.text-button{border:0;background:transparent;color:var(--green);font-size:13px;font-weight:750;padding:9px 0;display:inline-flex;align-items:center;gap:8px}.text-button:hover{text-decoration:underline}.eyebrow{font-size:10px;letter-spacing:2.8px;text-transform:uppercase;font-weight:800;color:var(--terracotta)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:clamp(42px,5.1vw,68px);letter-spacing:-2.8px;line-height:1.05;margin-bottom:18px}h2{font-size:35px;letter-spacing:-1px;margin-bottom:0}h3{font-size:25px;letter-spacing:-.6px}.muted{color:var(--muted)}
.welcome{display:grid;grid-template-columns:1fr auto;align-items:end;gap:25px;padding:64px 0 36px}.welcome .lead{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:#657367;max-width:600px;margin:0}.welcome .tagline{font-size:13px;color:#878a7e}.decor-star{font-family:var(--serif);font-size:64px;line-height:1;color:#d3b288;display:inline-block;margin-bottom:5px}.decor-side{text-align:right}
.feature{border-radius:23px;overflow:hidden;background:#e8ecdf;min-height:358px;display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.12fr);box-shadow:var(--shadow);position:relative}.feature::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,#fcf6e0cc,transparent 52%);pointer-events:none}.feature-text{padding:43px 48px;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.pill{display:inline-flex;gap:7px;align-items:center;padding:8px 12px;border:1px solid #bccbbb;border-radius:100px;color:#53685a;font-size:10px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase}.pill .dot{width:6px;height:6px;background:#8d9f7c;border-radius:50%}.feature h2{font-size:42px;line-height:1.12;margin:18px 0 11px}.feature p{font-size:14px;line-height:1.7;max-width:380px;color:#637367;margin-bottom:25px}
.feature-art{min-height:340px;display:flex;align-items:center;justify-content:center;position:relative}.feature-art::before{content:"";width:300px;height:300px;border-radius:50%;background:#d7dfd0;position:absolute;right:14%;top:7%;border:1px solid #c9d7c5}.feature-art::after{content:"✦";font-family:var(--serif);font-size:78px;color:#c9ad79;position:absolute;right:7%;top:10%}.feature-art img{height:292px;width:195px;object-fit:cover;box-shadow:20px 25px 24px #27422b30, -1px 2px 4px #273a3320;transform:rotate(6deg);z-index:1;border-radius:3px}.feature-art .ring{position:absolute;width:370px;height:270px;border:1px solid #b9c8af;border-radius:50%;transform:rotate(-18deg);z-index:0}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:50px 0 19px}.section-sub{font-size:13px;margin:7px 0 0;color:var(--muted)}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.book-card{border:1px solid #e1dbcd;background:var(--cream);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:126px 1fr;min-height:198px;padding:19px;gap:21px;transition:transform .2s,box-shadow .2s}.book-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.book-card img{width:126px;height:163px;border-radius:3px;object-fit:cover;box-shadow:5px 8px 12px #2931251a}.book-card-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}.book-card .eyebrow{letter-spacing:1.7px;font-size:9px}.book-card h3{font-size:22px;line-height:1.15;margin:10px 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.book-card .byline{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:12px}.book-card .meta{font-size:11px;font-weight:750;color:#617969;margin:0}.book-card .progress-mini{height:3px;width:100%;margin-top:14px;border-radius:10px;background:#e9e6db}.book-card .progress-mini span{height:3px;display:block;background:#779b81;border-radius:10px}
.note-strip{border-top:1px solid var(--line);margin-top:46px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#9a978a;gap:15px}.note-strip span:first-child{font-family:var(--serif);font-style:italic;font-size:16px;color:#878576}.heart{color:var(--terracotta)}
.page-head{padding:51px 0 28px}.crumb{font-size:12px;color:#758276;display:inline-flex;gap:8px;align-items:center;border:0;background:transparent;padding:0;margin-bottom:24px}.crumb:hover{text-decoration:underline}.page-head h1{margin-bottom:11px}.page-head p{max-width:630px;color:var(--muted);font-size:15px;line-height:1.6}
.book-hero{display:grid;grid-template-columns:245px 1fr;gap:50px;align-items:center;padding:35px;background:#eaece2;border:1px solid #e0e1d4;border-radius:21px}.book-hero>img{width:245px;height:340px;object-fit:cover;border-radius:4px;box-shadow:15px 19px 28px #343d3024}.book-hero h1{font-size:clamp(38px,4.5vw,56px);margin:12px 0 13px}.book-hero p{color:#67796b;font-size:14px;line-height:1.8;max-width:550px}.book-meta{display:flex;gap:23px;flex-wrap:wrap;margin-top:27px;padding-top:23px;border-top:1px solid #d3dacd}.book-meta div{font-size:12px;color:#687568}.book-meta strong{display:block;color:var(--green);font:600 23px var(--serif);margin-bottom:5px}
.chapter-list{background:var(--cream);border-radius:18px;border:1px solid #e6dfd2;padding:5px 25px}.chapter-row{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:17px;min-height:92px;border-bottom:1px solid #eee8dd}.chapter-row:last-child{border-bottom:0}.chapter-index{font-family:var(--serif);font-size:25px;color:#b5aa97}.chapter-title{font-size:15px;font-weight:700}.chapter-desc{font-size:12px;color:#979a8c;margin-top:6px}.chapter-actions{display:flex;align-items:center;gap:14px}.chapter-length{font-size:12px;color:#909587;min-width:45px;text-align:right}.circle-play{width:40px;height:40px;border:1px solid #d2d8ca;border-radius:50%;background:#f6f8f0;color:var(--green);display:grid;place-items:center;font-size:14px;transition:.2s}.circle-play:hover{background:var(--green);color:#fff}.finish-mark{color:#5e9477;font-size:14px}
.empty{padding:55px 20px;text-align:center}.empty h3{margin-bottom:12px}.empty p{font-size:13px;color:var(--muted)}
/* player */
.player-shell{max-width:840px;margin:0 auto;padding:28px 0 0}.player-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.player-head .crumb{margin:0}.player-view{margin-top:22px;padding:30px 45px 34px;background:var(--cream);border:1px solid #e4dfd5;border-radius:24px;box-shadow:var(--shadow);text-align:center}.player-cover-wrap{display:flex;justify-content:center;position:relative}.player-cover-wrap::before{content:"";position:absolute;top:27px;left:50%;width:210px;height:210px;border-radius:50%;transform:translateX(-50%);background:#e5e6db}.player-cover{width:177px;height:244px;object-fit:cover;position:relative;z-index:1;border-radius:3px;box-shadow:12px 20px 27px #26352731}.player-label{margin-top:31px}.player-view h1{font-size:40px;line-height:1.12;letter-spacing:-1.2px;margin:12px 0 4px}.player-view .bookby{font-size:13px;color:#929589;margin-bottom:4px}.player-view .narrator{color:var(--terracotta);font-family:var(--serif);font-style:italic;font-size:16px;margin-top:9px}
.waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:44px;margin:24px auto 17px;max-width:520px;overflow:hidden;mask-image:linear-gradient(to right, transparent 0%,black 10%,black 90%,transparent 100%)}.waveform i{width:3px;flex:1 1 3px;max-width:3px;border-radius:6px;background:#c6c9b6;opacity:.8;transition:background .2s}.waveform i.played{background:#be7156}
.range{width:100%;accent-color:var(--green);cursor:pointer;height:5px;display:block;margin:0}.timeline{display:flex;justify-content:space-between;font-size:11px;color:#9b9d91;margin-top:12px;font-variant-numeric:tabular-nums}
.controls{margin:19px auto 15px;display:flex;align-items:center;justify-content:center;gap:19px}.control{width:43px;height:43px;border:0;background:transparent;color:var(--green);display:grid;place-items:center;border-radius:50%}.control svg{width:24px;height:24px}.control:hover{background:#ecede4}.control.jump{position:relative}.control.jump b{font-size:10px;position:absolute;top:17px;left:0;width:100%;font-weight:700}.control.main{width:72px;height:72px;background:var(--green);color:#fffdfa;box-shadow:0 9px 15px #244a3733}.control.main:hover{background:#18382c}.control.main svg{width:28px;height:28px}
.playback-tools{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:14px}.tool-select{border:1px solid #dddccf;color:#49624f;background:#f5f5ed;border-radius:100px;padding:9px 14px;font-size:12px;font-weight:750}.player-next{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left}.player-next b{display:block;font-size:12px}.player-next span{display:block;font-size:11px;color:#8e9387;margin-top:5px}.notes-panel{margin-top:17px;border:1px solid #e3ddcf;border-radius:16px;background:#f7f5ed;padding:20px;text-align:left}.notes-panel h3{font-size:22px;margin-bottom:7px}.notes-panel p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}.note-item{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #e0dfd1;padding:12px 0}.note-item:last-child{padding-bottom:0}.note-item strong{font-size:13px}.note-item span{font-size:11px;color:var(--muted)}
/* upload */
.upload-grid{display:grid;grid-template-columns:minmax(280px,1.6fr) minmax(250px,1fr);gap:24px;align-items:start}.form-card,.explain-card{background:var(--cream);border:1px solid #e3ded2;border-radius:20px;padding:34px}.form-card h2{font-size:30px;margin-bottom:24px}.form-field{margin-bottom:20px}.form-field label{display:block;color:#4f6755;font-size:12px;font-weight:750;margin-bottom:10px}.form-field input,.form-field select{width:100%;border:1px solid #dcded2;background:#faf9f2;border-radius:10px;padding:14px 15px;font-size:14px;color:var(--ink)}.form-field small{display:block;color:#8f9385;font-size:11px;line-height:1.5;margin-top:7px}.dropzone{border:1.5px dashed #a9b59e;background:#f1f4ec;border-radius:15px;padding:28px;text-align:center;cursor:pointer;position:relative}.dropzone:hover{background:#e9f0e4}.dropzone strong{display:block;font-family:var(--serif);font-size:21px;font-weight:400;margin:10px 0 7px}.dropzone p{font-size:12px;color:#849481;margin:0}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.form-hint{padding:12px 14px;background:#eef1e7;border-radius:10px;font-size:12px;color:#657b66;line-height:1.65;margin:5px 0 22px}.form-hint strong{color:var(--green)}.explain-card{background:#e8ebe0;padding:29px}.explain-card h3{font-size:27px;margin:15px 0}.explain-card p{font-size:13px;line-height:1.8;color:#657566}.explain-card .step{padding:17px 0;border-bottom:1px solid #cdd7c8;display:flex;gap:13px;align-items:flex-start}.explain-card .step:last-child{border-bottom:0}.step span:first-child{color:var(--terracotta);font-family:var(--serif);font-size:25px}.step div{font-size:13px;font-weight:700;padding-top:3px}.step small{font-size:11px;color:#7f8d7d;display:block;font-weight:400;margin-top:5px;line-height:1.55}.demo-notice{margin-top:20px;font-size:11px;color:#988369;line-height:1.65}
#toast{pointer-events:none;position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);opacity:0;transition:.22s;background:#244637;color:#fff9e9;padding:13px 20px;border-radius:11px;box-shadow:0 10px 30px #223d2a3b;font-size:13px;z-index:25;max-width:min(500px,90vw);text-align:center}#toast.show{transform:translate(-50%,0);opacity:1}
.demo-warning{background:#f0e9d8;border:1px solid #e2d5bd;color:#847052;font-size:11px;line-height:1.6;border-radius:11px;padding:10px 15px;margin-top:22px}.demo-warning b{font-weight:750}
@media(max-width:950px){.shell{padding-left:23px;padding-right:23px}.topbar{height:80px}.demo-dot{display:none}.feature-text{padding:35px}.feature h2{font-size:34px}.book-card{grid-template-columns:95px 1fr;gap:15px;padding:15px}.book-card img{width:95px;height:138px}.book-card h3{font-size:18px}.book-card .meta{font-size:10px}.book-hero{grid-template-columns:200px 1fr;gap:30px}.book-hero>img{width:200px;height:285px}}
@media(max-width:670px){.shell{padding:0 18px 112px}.topbar{height:73px}.brand-icon{width:37px;height:37px}.brand-text{font-size:24px}.navlinks{display:none}.profile{padding:5px 8px 5px 5px}.profile .avatar{width:29px;height:29px}.welcome{grid-template-columns:1fr;padding:37px 1px 25px}.welcome h1{font-size:49px;letter-spacing:-2.4px}.welcome .lead{font-size:19px}.decor-side{display:none}.feature{display:flex;flex-direction:column-reverse;min-height:auto}.feature-art{height:227px;min-height:227px}.feature-art::before{width:210px;height:210px;right:19%;top:3%}.feature-art .ring{width:275px;height:190px}.feature-art img{height:190px;width:126px}.feature-art::after{font-size:53px}.feature-text{padding:22px 25px 30px}.feature h2{font-size:34px;margin:12px 0 7px}.feature p{font-size:13px;margin-bottom:19px}.section-top{padding:37px 0 17px}.section-top h2{font-size:31px}.book-hero+.section-top{flex-direction:column}.book-grid{grid-template-columns:1fr;gap:12px}.book-card{min-height:150px;grid-template-columns:92px 1fr}.book-card img{height:129px;width:92px}.note-strip{margin-top:35px}.note-strip span:first-child{font-size:14px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:15;justify-content:space-evenly;background:#faf8f0f5;backdrop-filter:blur(15px);border-top:1px solid var(--line);padding:8px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:transparent;color:#899084;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:750;min-width:75px;padding:7px}.mobile-nav button.selected{color:var(--green)}.mobile-nav svg{width:20px;height:20px}.page-head{padding:32px 0 18px}.page-head h1{font-size:44px}.book-hero{grid-template-columns:118px 1fr;gap:18px;padding:18px;align-items:start}.book-hero>img{width:118px;height:171px}.book-hero h1{font-size:28px;letter-spacing:-1px;margin:9px 0 8px}.book-hero p{font-size:11px;line-height:1.55;margin-bottom:6px}.book-meta{margin-top:16px;padding-top:12px;gap:15px}.book-meta strong{font-size:19px}.book-meta div{font-size:10px}.chapter-list{padding:2px 12px}.chapter-row{grid-template-columns:29px 1fr auto;gap:9px;min-height:80px}.chapter-index{font-size:18px}.chapter-title{font-size:13px}.chapter-desc{font-size:10px}.chapter-length{display:none}.chapter-actions{gap:9px}.circle-play{width:35px;height:35px}.player-shell{padding-top:22px}.player-view{padding:20px 22px 26px;margin-top:18px}.player-cover{width:145px;height:202px}.player-cover-wrap::before{width:165px;height:165px}.player-view h1{font-size:30px}.waveform{margin:16px auto 10px;height:33px}.controls{gap:9px;margin:14px auto 12px}.control{width:39px;height:39px}.control.main{width:63px;height:63px}.playback-tools{margin-top:8px}.player-next{margin-top:16px}.upload-grid{grid-template-columns:1fr}.form-card,.explain-card{padding:22px}.form-card h2{font-size:27px}.page-head p{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:670px){.book-hero~section .section-top{align-items:flex-start;flex-direction:column;gap:13px}.book-hero~section .section-top .secondary{padding:11px 17px}}