.akro-header{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:rgba(5,3,1,0.94);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,0.04)}@media (min-width: 900px){.akro-header{padding:10px 40px}}.akro-header__logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}.akro-header__brand{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--ink-2)}.akro-header__logo-wrap{width:30px;height:30px;padding:2px;border-radius:30%;background:linear-gradient(135deg, #f6d27b 0%, #d9a84f 40%, #b67a2e 100%);box-shadow:0 0 6px rgba(255,230,160,0.25),0 6px 14px rgba(0,0,0,0.7),inset 0 0 3px rgba(255,255,255,0.18);position:relative;overflow:hidden}.akro-header__logo-wrap::before{content:"";position:absolute;inset:1.5px;border-radius:26%;background:linear-gradient(135deg, #fff3cf 0%, #d1a35f 40%, #9a6c34 100%);mask:radial-gradient(100% 100% at 50% 50%, #000 calc(100% - 1px), transparent 100%);opacity:.55;z-index:1}.akro-header__logo-img{width:100%;height:100%;border-radius:24%;display:block;box-shadow:0 2px 4px rgba(0,0,0,0.5);position:relative;z-index:2}.akro-header__icon-btn{border:0;background:transparent;padding:4px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.18s var(--easing),box-shadow 0.18s var(--easing),transform 0.18s var(--easing)}.akro-header__icon-btn:hover{background:rgba(255,255,255,0.04);box-shadow:0 0 0 1px rgba(255,255,255,0.06)}.akro-header__icon-btn:active{transform:translateY(1px)}.akro-header__icon{width:22px;height:22px;fill:none;stroke:#f3dcaa;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.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}}:root{--akro-deep-black:#050301;--akro-black:#0c0c0b;--akro-card:#15100c;--akro-elevated:#1c160f;--blue:#b76e29;--blue-2:#f0c26a;--gold:#f0c26a;--ink:#f5eee4;--ink-2:#b3a28b;--cream:#201710;--radius:22px;--easing:cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color:var(--ink);background:radial-gradient(900px 600px at 50% 0%, rgba(183,110,41,0.133333), transparent 65%),linear-gradient(180deg, var(--akro-deep-black) 0%, #000 55%, #050301 100%)}img{max-width:100%;height:auto;display:block}.btn{appearance:none;border:0;border-radius:14px;cursor:pointer;padding:14px 22px;margin:6px;font-weight:700;font-size:0.98rem;transition:transform 0.18s var(--easing),box-shadow 0.18s var(--easing),filter 0.18s,background 0.18s var(--easing)}.btn--primary{color:#120b06;background:linear-gradient(90deg, var(--blue-2), var(--blue));box-shadow:0 10px 30px rgba(0,0,0,0.7)}.btn--primary:hover{filter:brightness(1.05);box-shadow:0 14px 40px rgba(0,0,0,0.85)}.btn--gold{color:var(--ink);background:linear-gradient(90deg, #22140b, #352016);box-shadow:0 8px 24px rgba(0,0,0,0.7);text-decoration:none !important}.btn--gold:hover{filter:brightness(1.06)}.btn:active{transform:translateY(2px)}.section--profile{padding-top:56px}.profile-shell{max-width:780px;margin:0 auto 64px;padding:0 16px}.profile-card{background:var(--akro-card, #15100c);border-radius:24px;padding:22px 22px 20px;box-shadow:0 18px 40px rgba(0,0,0,0.8),0 1px 0 rgba(255,255,255,0.02);border:1px solid rgba(240,194,106,0.1)}.profile-card__header{display:flex;gap:18px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.06)}.profile-avatar{width:80px;height:80px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg, #f6d27b 0%, #d9a84f 40%, #b67a2e 100%);box-shadow:0 0 8px rgba(255,230,160,0.3),0 8px 18px rgba(0,0,0,0.75),inset 0 0 3px rgba(255,255,255,0.18)}.profile-avatar__img,.profile-avatar__placeholder{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.profile-avatar__img{object-fit:cover}.profile-avatar__placeholder{background:radial-gradient(circle at 30% 0%, #f5eee4 0%, #b76e29 60%, #120804 100%);color:#120804;font-weight:800;font-size:1.6rem}.profile-main{flex:1;min-width:0}.profile-name{font-size:1.4rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:2px}.profile-email{font-size:0.95rem;color:var(--ink-2, #b3a28b);word-break:break-all}.profile-subscription{margin-top:10px}.profile-subscription__badge{display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid rgba(240,194,106,0.4);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2, #b3a28b);background:rgba(0,0,0,0.35)}.profile-subscription__badge--active{color:#120804;background:linear-gradient(120deg, #f6d27b, #b76e29);border-color:rgba(0,0,0,0.25)}.profile-subscription__meta{margin-top:4px;font-size:0.85rem;color:var(--ink-2, #b3a28b)}.profile-card__body{margin-top:20px}.profile-stats{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px}@media (max-width: 640px){.profile-stats{grid-template-columns:repeat(2, minmax(0, 1fr))}}.profile-stat{padding:10px 8px;border-radius:16px;background:radial-gradient(circle at 0 0, rgba(240,194,106,0.14), transparent 55%);border:1px solid rgba(255,255,255,0.04)}.profile-stat__label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-2, #b3a28b);margin-bottom:4px}.profile-stat__value{font-size:1.3rem;font-weight:700;color:#f0c26a}.profile-actions{margin-top:22px}.profile-logout-btn{width:100%;padding:12px 18px;border-radius:16px;border:0;cursor:pointer;font-size:0.98rem;font-weight:600;background:linear-gradient(120deg, #ff715d, #c8533c);color:#fff;box-shadow:0 12px 24px rgba(0,0,0,0.75);transition:transform 0.15s var(--easing),filter 0.15s var(--easing)}.profile-logout-btn:hover{filter:brightness(1.05)}.profile-logout-btn:active{transform:translateY(2px)}
