.demo-wrap{display:flex;flex-wrap:wrap;gap:32px;padding:56px 16px 72px;max-width:1180px;margin:0 auto;color:var(--ink)}.demo-copy{flex:1 1 260px;max-width:420px}.demo-copy h1{font-size:clamp(1.8rem, 2.4vw, 2.2rem);margin:0 0 12px}.demo-copy p{margin:0 0 10px;color:var(--ink-2)}.demo-hint{font-size:.9rem;color:var(--ink-2);margin-top:8px}.demo-phone{position:relative;width:320px;max-width:90vw;aspect-ratio:9/19.5;border-radius:34px;padding:10px 8px;background:linear-gradient(135deg, rgba(240,194,106,0.0666667), rgba(240,194,106,0.2));box-shadow:0 30px 80px rgba(0,0,0,0.95);overflow:hidden}.demo-phone::before{content:"";position:absolute;inset:6px;border-radius:28px;background:#050301}.demo-phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:20px;border-radius:0 0 16px 16px;background:#050301;z-index:3}.demo-screen{position:absolute;inset:14px 10px 12px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg, #15100c, #050301 80%);padding:12px 10px 10px;opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity 0.28s var(--easing),transform 0.28s var(--easing);box-sizing:border-box}.demo-screen.is-active{opacity:1;transform:none;pointer-events:auto}.demo-status-bar{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-2);margin-bottom:6px}.demo-title{font-size:.9rem;font-weight:700;text-align:center;margin:0 0 10px}.demo-featured-card{position:relative;width:100%;max-width:360px;height:240px;border-radius:28px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 16px 40px rgba(0,0,0,0.85);transition:transform 0.16s var(--easing),box-shadow 0.16s var(--easing);margin:0 auto 24px}.demo-featured-card.is-pressed{transform:scale(0.96) translateY(2px);box-shadow:0 8px 24px rgba(0,0,0,0.9)}.demo-featured-cover{position:absolute;inset:0;background-size:cover;background-position:center}.demo-featured-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);z-index:0}.demo-featured-meta{position:absolute;left:16px;right:16px;bottom:18px;z-index:1;display:flex;flex-direction:column}.demo-featured-label{display:inline-flex !important;align-items:center;justify-content:center;width:auto !important;max-width:fit-content;padding:6px 14px;border-radius:12px;font-size:.78rem;font-weight:600;background:var(--blue-2);color:#1a0e07;white-space:nowrap}.demo-featured-title{font-weight:900;font-size:1.4rem;letter-spacing:-0.02em;margin:0;color:#ffffff}.demo-featured-author{font-size:0.9rem;color:rgba(255,255,255,0.8)}.demo-section-heading{margin:12px 2px 6px;font-size:.8rem;color:var(--ink-2)}.demo-recs-row{display:flex;gap:8px}.demo-rec-card{flex:1;height:70px;border-radius:14px;background:radial-gradient(circle at 0 0, rgba(240,194,106,0.333333), transparent 60%);background-color:#15100c;opacity:.45}.demo-book-hero{margin-bottom:10px}.demo-book-cover{position:relative;width:100%;height:180px;border-radius:28px;background-size:cover;background-position:center;box-shadow:0 16px 40px rgba(0,0,0,0.9);overflow:hidden}.demo-book-cover-gradient{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%)}.demo-book-cover-text{position:absolute;left:24px;right:24px;bottom:20px;display:flex;flex-direction:column;gap:4px}.demo-book-title{font-weight:800;font-size:1.15rem;color:#fff}.demo-book-author{font-size:.86rem;color:rgba(255,255,255,0.8)}.demo-book-info{margin-top:6px;margin-bottom:6px}.demo-book-desc{font-size:.78rem;color:var(--ink-2);max-height:90px;overflow:hidden;margin-bottom:6px}.demo-book-meta-row{display:flex;flex-wrap:wrap;gap:10px;font-size:.76rem;color:var(--ink-2);margin:2px 0}.demo-start-reading{width:100%;margin-top:6px;margin-bottom:8px}.demo-chapters{margin-top:4px}.demo-chapters h3{font-size:.86rem;margin:0 0 4px}.demo-chapter-row{width:100%;margin-bottom:4px;padding:8px 10px;border-radius:14px;border:0;background:#15100c;color:var(--ink);display:flex;justify-content:space-between;text-align:left;cursor:pointer}.demo-chapter-row--ghost{opacity:.5;cursor:default}.demo-chapter-title{font-size:.86rem;font-weight:600}.demo-chapter-sub{font-size:.74rem;color:var(--ink-2)}.demo-chapter-meta{font-size:.72rem;text-align:right;color:var(--ink-2)}.demo-screen--reader{display:flex;flex-direction:column}.demo-reader-header{text-align:center;margin:2px 0 6px}.demo-reader-book{text-align:center;font-size:.76rem;color:var(--ink-2)}.demo-reader-chapter{text-align:center;font-size:.9rem;font-weight:600}.demo-reader-tabs{display:flex;gap:4px;padding:4px;background:#15100c;border-radius:999px;margin-bottom:8px}.demo-tab{flex:1;border-radius:999px;border:0;font-size:.72rem;padding:4px 0;cursor:pointer;background:transparent;color:var(--ink-2)}.demo-tab--active{background:#f0c26a;color:#1a0e07;font-weight:600}.demo-reader-body{flex:1;min-height:0;padding:12px 16px 0;overflow-y:auto;overflow-x:hidden;width:100%;box-sizing:border-box}.demo-reader-pane{display:none;width:100%;max-width:100%}.demo-reader-pane--active{display:block}.demo-lines{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%}.demo-line{display:flex;flex-wrap:wrap;gap:4px;width:100%;max-width:100%;box-sizing:border-box;white-space:normal;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.96rem;line-height:1.55;color:var(--ink)}.demo-line--placeholder{opacity:.6}.demo-token{padding:2px 4px;border-radius:6px;background:transparent;font-size:.9rem;cursor:default}.demo-token--has-vocab{background:#3a2a1c;cursor:pointer}.demo-token--active{background:#f0c26a;color:#1a0e07}.demo-commentary{font-size:.78rem;color:var(--ink-2)}.demo-player{margin:12px 16px 18px;padding:14px 16px;border-radius:22px;background:var(--akro-card);box-shadow:0 12px 32px rgba(0,0,0,0.9)}.demo-player-row{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:4px}.demo-player-row--timeline{font-size:.7rem;color:var(--ink-2)}.demo-player-btn{border-radius:999px;border:0;padding:4px 10px;font-size:.74rem;background:#201710;color:var(--ink-2);cursor:pointer}.demo-play-main{width:46px;height:46px;border-radius:999px;border:0;background:linear-gradient(135deg, #f0c26a, #b76e29);color:#1a0e07;font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,0.9)}.demo-timeline{flex:1;height:3px;border-radius:999px;background:#31241a;overflow:hidden}.demo-timeline-progress{width:0;height:100%;border-radius:999px;background:#f0c26a}.demo-vocab{position:absolute;left:12px;right:12px;bottom:70px;padding:14px 16px 18px;border-radius:22px;background:#201710;box-shadow:0 12px 32px rgba(0,0,0,0.9);font-size:.78rem;opacity:0;pointer-events:none;transition:opacity 0.18s var(--easing),transform 0.18s var(--easing);transform:translateY(8px);max-height:55%;overflow-y:auto}.demo-vocab.is-visible{opacity:1;pointer-events:auto;transform:none}.demo-vocab-word{font-weight:900;font-size:1.4rem;margin-bottom:6px}.demo-vocab-primary{font-size:.95rem;line-height:1.6;margin-bottom:6px}.demo-vocab-gloss{font-size:.8rem;color:var(--ink-2);margin-bottom:8px}.demo-vocab-section{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.06)}.demo-vocab-section-title{font-size:.8rem;font-weight:600;margin-bottom:4px}.demo-vocab-section-gr{font-size:.88rem;line-height:1.5;margin-bottom:2px}.demo-vocab-section-en{font-size:.78rem;color:var(--ink-2)}.demo-pointer{position:absolute;width:26px;height:26px;border-radius:50%;background:#f0c26a;box-shadow:0 0 0 6px rgba(240,194,106,0.25),0 12px 24px rgba(0,0,0,0.9);transform:translate(-9999px, -9999px);opacity:0;pointer-events:none;z-index:10;transition:transform 0.48s var(--easing),opacity 0.2s var(--easing)}.demo-pointer.is-visible{opacity:1}@media (max-width: 800px){.demo-wrap{flex-direction:column;align-items:center}.demo-copy{text-align:center}}.demo-phone-shell{position:relative;display:flex;justify-content:center}.demo-close-demo-btn{position:absolute;top:20px;right:calc(50% - 160px - 50px);width:26px;height:26px;border-radius:50%;border:none;background:rgba(240,194,106,0.18);color:#f0c26a;font-size:17px;line-height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 6px 16px rgba(0,0,0,0.7);transition:background .15s ease, transform .15s ease}.demo-close-demo-btn:hover{background:rgba(240,194,106,0.3)}.demo-close-demo-btn:active{transform:scale(0.9)}@media (max-width: 900px){.demo-close-demo-btn{right:0px;top:-36px}}