:root{color-scheme:light;font-family:Work Sans,sans-serif;background:#f4efe7;--bg: #f4efe7;--bg-soft: #fbf6ef;--ink: #1e1a15;--muted: #6f655c;--accent: #d4552f;--accent-soft: rgba(212, 85, 47, .18);--line: #d7cbbd;--panel: rgba(255, 250, 242, .92);--panel-border: rgba(89, 70, 52, .14);--card: #fffaf2;--panel-width: 300px;--panel-padding: 20px;--panel-gap: 16px;--section-gap: 10px;--control-padding: 9px 12px;--label-size: 11px;--status-size: 11px;--button-radius: 12px;--panel-title-size: 18px;--radius-lg: 24px;--radius-md: 14px;--shadow-soft: 0 18px 40px rgba(46, 32, 18, .16);--shadow-card: 0 12px 26px rgba(46, 32, 18, .12);--navigator-preview-height: clamp(420px, 70vh, 660px)}body.roomy{--panel-width: 330px;--panel-padding: 24px;--panel-gap: 20px;--section-gap: 12px;--control-padding: 10px 14px;--label-size: 12px;--status-size: 12px;--button-radius: 14px;--panel-title-size: 19px}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 10%,#fff3df 0%,transparent 55%),radial-gradient(circle at 80% 15%,rgba(223,194,163,.4),transparent 60%),linear-gradient(180deg,#f8f2e9,#efe6d8)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(90deg,rgba(44,30,20,.04) 1px,transparent 1px),linear-gradient(180deg,rgba(44,30,20,.04) 1px,transparent 1px);background-size:140px 140px;opacity:.35;pointer-events:none;z-index:-1}#app{min-height:100vh}.app-shell{min-height:100vh;height:100vh;display:grid;grid-template-rows:auto 1fr}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 32px 16px;background:#fffaf2b3;border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,#fbe3c7,#d4552f);color:#22160e;font-weight:700;letter-spacing:.08em}.brand-text h1{margin:0;font-size:20px;font-weight:600}.brand-tagline{margin:2px 0 0;font-size:12px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}.header-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}.app-main{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-width);min-height:0;height:100%;overflow:hidden}.reader{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px 20px 28px;min-height:0}.reader-surface{position:relative;width:min(92vw,1080px);height:min(78vh,720px);min-height:420px;border-radius:var(--radius-lg);background:linear-gradient(180deg,#fffaf4,#f4ece1);border:1px solid rgba(70,50,32,.12);box-shadow:var(--shadow-soft);overflow:hidden;touch-action:pan-y}.reader-surface:before,.reader-surface:after{content:"";position:absolute;left:8%;right:8%;height:1px;background:var(--line)}.reader-surface:before{top:34%}.reader-surface:after{bottom:34%}.reader-line{position:absolute;top:12%;bottom:12%;width:1px;background:var(--line);left:50%;transform:translate(-.5px)}.word-stage{position:relative;width:100%;height:100%}.word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Cormorant Garamond,serif;font-size:clamp(32px,6.8vw,112px);letter-spacing:.03em;white-space:nowrap;color:var(--ink)}.word span{color:var(--ink)}.word span.orp{color:var(--accent)}.hud{position:absolute;right:26px;bottom:22px;font-size:12px;color:var(--muted);display:flex;gap:14px;align-items:center;text-transform:uppercase;letter-spacing:.12em}.progress{width:170px;height:4px;background:#46322026;border-radius:999px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#d4552f66,#d4552f);width:0%;transition:width .2s ease-out}.canvas-controls{position:absolute;left:50%;bottom:18px;transform:translate(-50%);display:flex;gap:12px;z-index:5}.canvas-button{padding:8px 20px;border-radius:999px;border:1px solid rgba(70,50,32,.2);background:#fff8eee6;color:var(--ink);font-size:11px;letter-spacing:.24em;text-transform:uppercase;box-shadow:0 8px 18px #2e201229}.panel{background:var(--panel);border-left:1px solid var(--panel-border);padding:var(--panel-padding);display:flex;flex-direction:column;gap:var(--panel-gap);min-height:0;overflow-y:auto;overscroll-behavior:contain}.panel-card{background:var(--card);border-radius:var(--radius-md);border:1px solid rgba(70,50,32,.12);padding:14px 14px 16px;display:flex;flex-direction:column;gap:var(--section-gap);box-shadow:var(--shadow-card);animation:cardRise .45s ease both}.section{display:flex;flex-direction:column;gap:var(--section-gap)}.panel-card:nth-child(1){animation-delay:.02s}.panel-card:nth-child(2){animation-delay:.06s}.panel-card:nth-child(3){animation-delay:.1s}.panel-card:nth-child(4){animation-delay:.14s}.panel-card:nth-child(5){animation-delay:.18s}.card-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.panel-advanced{background:#fffbf4e6}.panel-advanced summary{cursor:pointer;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}.panel-advanced summary::-webkit-details-marker{display:none}.panel-advanced summary:after{content:"+";font-size:14px;color:var(--muted)}.panel-advanced[open] summary:after{content:"-"}.panel-advanced .section+.section{margin-top:8px}.nav-row{display:flex;gap:8px;flex-wrap:wrap}.nav-row>*{flex:1 1 120px}.auth-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.auth-row>input{flex:1 1 160px;min-width:140px}.auth-row>button{flex:0 0 auto}.nav-row-tight>*{flex:1 1 80px}.page-input{flex:.7 0 90px}label{font-size:var(--label-size);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=file],input[type=number],button,select{width:100%;padding:var(--control-padding);border-radius:var(--button-radius);border:1px solid rgba(70,50,32,.16);background:#fffaf2f2;color:var(--ink);font-size:13px}button{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}button:hover{transform:translateY(-1px);border-color:#4632204d;box-shadow:0 8px 18px #2e201229}button:active{transform:translateY(0);box-shadow:none}button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}button:focus-visible,input[type=range]:focus-visible,select:focus-visible,input[type=number]:focus-visible,input[type=file]:focus-visible{outline:2px solid rgba(212,85,47,.4);outline-offset:2px}button.primary{background:linear-gradient(180deg,#e8784e,#d4552f);color:#23130c;border:none;font-weight:600;box-shadow:0 12px 24px #d4552f47}button.secondary{background:#fffaf2b3}.status{font-size:var(--status-size);color:var(--muted)}.status-compact{line-height:1.3}.status-pill{padding:6px 12px;border-radius:999px;border:1px solid rgba(70,50,32,.16);background:#fffaf2cc}.status-flash{animation:statusPulse .6s ease}.layout-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.switch{position:relative;display:inline-flex;width:40px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#4632202e;border-radius:999px;transition:background .2s ease}.slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;border-radius:50%;background:#fff9f2;transition:transform .2s ease;box-shadow:0 4px 8px #2e201233}.switch input:checked+.slider{background:#d4552f66}.switch input:checked+.slider:before{transform:translate(16px)}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#291d1273;display:flex;align-items:center;justify-content:center;z-index:100}.loading-hidden{display:none}.loading-card{width:min(420px,90vw);padding:24px;border-radius:18px;background:#fffaf2;border:1px solid rgba(70,50,32,.2);box-shadow:0 20px 60px #2e201240}.loading-title{font-size:16px;font-weight:600;margin-bottom:12px}.loading-detail{font-size:12px;color:var(--muted);margin-top:10px}.loading-bar{height:6px;width:100%;background:#4632201f;border-radius:999px;overflow:hidden}.loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#d4552f80,#d4552f);transition:width .2s ease-out}.navigator-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#291d1280;display:flex;align-items:center;justify-content:center;z-index:110}.navigator-hidden{display:none}.navigator-modal{width:min(1100px,94vw);height:min(720px,90vh);background:#fffaf2;border:1px solid rgba(70,50,32,.2);border-radius:20px;display:grid;grid-template-columns:250px minmax(0,1fr);box-shadow:0 30px 80px #2e201247;overflow:hidden;align-items:stretch}.navigator-sidebar{background:#fffaf2f2;border-right:1px solid rgba(70,50,32,.14);padding:16px;display:flex;flex-direction:column;gap:12px;height:100%}.navigator-heading{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}.navigator-toc{overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:0;max-height:var(--navigator-preview-height)}.navigator-toc-item{text-align:left;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);font-size:13px}.navigator-toc-item.active{border-color:#d4552f66;background:#d4552f1f}.navigator-content{display:flex;flex-direction:column;padding:18px;gap:12px;min-height:0;height:100%;overflow:hidden}.navigator-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.navigator-top button{width:auto}.navigator-title{font-size:18px;font-weight:600}.navigator-subtitle{font-size:12px;color:var(--muted)}.navigator-preview-shell{position:relative;flex:0 0 auto;height:var(--navigator-preview-height);width:100%;display:flex;align-items:center;justify-content:center;min-height:360px}.navigator-preview{border-radius:16px;border:1px solid rgba(70,50,32,.18);background:radial-gradient(circle at 30% 20%,#fffcf7f5,#f8f0e6fa);overflow:hidden;position:relative;aspect-ratio:3 / 4;height:100%;max-width:100%;min-height:360px;display:grid;place-items:center}.navigator-preview-canvas{width:100%;height:100%}.navigator-preview-canvas .epub-container,.navigator-preview-canvas .epub-view,.navigator-preview-canvas iframe{width:100%;height:100%;display:block}.navigator-preview-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--muted);background:linear-gradient(180deg,#fffbf480,#f7ecdecc);transition:opacity .2s ease}.navigator-preview[data-state=ready] .navigator-preview-state{opacity:0;pointer-events:none}.navigator-preview-state-title{font-size:11px;text-transform:uppercase;letter-spacing:.2em}.navigator-preview-state-subtitle{font-size:12px;color:var(--muted)}button.navigator-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:60px;border-radius:14px;border:1px solid rgba(70,50,32,.2);background:#fff9f2e6;color:var(--ink);font-size:22px;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}.navigator-arrow.left{left:14px}.navigator-arrow.right{right:14px}button.navigator-arrow:disabled{opacity:.4;cursor:default;box-shadow:none;transform:translateY(-50%)}button.navigator-arrow:hover,button.navigator-arrow:active{transform:translateY(-50%)}.navigator-toc::-webkit-scrollbar{width:8px;height:8px}.navigator-toc::-webkit-scrollbar-track{background:#46322014}.navigator-toc::-webkit-scrollbar-thumb{background:#46322040;border-radius:999px}.navigator-controls{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;min-height:46px;flex:0 0 auto}.navigator-controls button{width:auto}.navigator-controls button.active{border-color:#d4552f99;box-shadow:0 8px 20px #d4552f2e}@keyframes statusPulse{0%{color:#21180f}to{color:var(--muted)}}@keyframes cardRise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition-duration:.01ms!important}}@media (max-width: 1080px){.app-main{grid-template-columns:1fr;grid-template-rows:minmax(320px,58vh) minmax(0,1fr)}.panel{border-left:none;border-top:1px solid var(--panel-border)}.reader{padding:20px 20px 26px}.reader-surface{width:min(94vw,980px);height:min(64vh,620px)}}@media (max-width: 860px){.app-header{padding:18px 20px 14px;flex-direction:column;align-items:flex-start}.header-meta{width:100%;justify-content:space-between}.panel{padding:16px 18px 22px}}@media (max-width: 720px){.reader-surface{height:min(58vh,580px);min-height:320px}.hud{right:18px;bottom:16px;flex-direction:column;align-items:flex-end;gap:6px}.progress{width:130px}.canvas-controls{bottom:14px}.panel-card{padding:12px 12px 14px}.navigator-modal{grid-template-columns:1fr;grid-template-rows:auto 1fr}.navigator-sidebar{border-right:none;border-bottom:1px solid rgba(70,50,32,.14);flex-direction:row;align-items:center;gap:10px;padding:12px 14px}.navigator-toc{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}.navigator-toc-item{white-space:nowrap}}@media (max-width: 560px){:root{--navigator-preview-height: clamp(320px, 56vh, 520px)}.app-header{padding:16px 16px 12px}.brand-mark{width:34px;height:34px;border-radius:12px}.reader{padding:16px 14px 22px}.reader-surface{width:min(96vw,560px);height:min(56vh,520px)}.nav-row>*{flex:1 1 140px}.nav-row-tight>*{flex:1 1 120px}.navigator-preview-shell{min-height:300px}}@media (prefers-color-scheme: dark){:root{color-scheme:dark;background:#050505;--bg: #050505;--bg-soft: #0c0c0c;--ink: #f2f2f2;--muted: #9c9c9c;--accent: #e53935;--accent-soft: rgba(229, 57, 53, .18);--line: #1a1a1a;--panel: rgba(10, 10, 10, .92);--panel-border: rgba(255, 255, 255, .08);--card: #0f0f0f;--shadow-soft: 0 20px 60px rgba(0, 0, 0, .6);--shadow-card: 0 12px 26px rgba(0, 0, 0, .45)}body{background:radial-gradient(circle at top,#0d0d0d,#050505 45%,#020202);color:var(--ink)}body:before{opacity:0;background-image:none}.app-header{background:#0a0a0aeb;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{background:linear-gradient(140deg,#1c1c1c,#e53935);color:#f2f2f2}.reader-surface{background:#0c0c0c;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px #0009}.progress{background:#1f1f1f}.progress-bar{background:linear-gradient(90deg,#555,#ddd)}.canvas-button{background:#0c0c0ccc;border:1px solid rgba(255,255,255,.18);color:#f2f2f2;box-shadow:none}.panel{background:#0a0a0aeb}.panel-card{background:#0f0f0f;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 26px #0006}.panel-advanced{background:#08080899}input[type=file],input[type=number],button,select{background:#0f0f0f;border:1px solid rgba(255,255,255,.1);color:#f2f2f2}button.primary{background:linear-gradient(180deg,#f2f2f2,#dcdcdc);color:#111;border:none;box-shadow:0 10px 24px #00000059}button.secondary{background:#0a0a0ab3}button:hover{border-color:#ffffff38;box-shadow:none}button:focus-visible,input[type=range]:focus-visible,select:focus-visible,input[type=number]:focus-visible,input[type=file]:focus-visible{outline:2px solid rgba(229,57,53,.5);outline-offset:2px}.status-pill{border:1px solid rgba(255,255,255,.08);background:#ffffff0a}.slider{background:#1c1c1c}.slider:before{background:#f2f2f2}.switch input:checked+.slider{background:#2c2c2c}.loading-overlay{background:#050505d1}.loading-card{background:#0d0d0d;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px #0009}.loading-bar{background:#1f1f1f}.loading-bar-fill{background:linear-gradient(90deg,#555,#ddd)}.navigator-overlay{background:#050505d9}.navigator-modal{background:#0b0b0b;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px #0009}.navigator-sidebar{background:#0c0c0ce6;border-right-color:#ffffff14;border-bottom-color:#ffffff14}.navigator-toc-item.active{border-color:#ffffff2e;background:#ffffff0f}.navigator-preview{border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 30% 20%,#202020e6,#0a0a0af2)}.navigator-preview-state{background:linear-gradient(180deg,#0808081a,#0a0a0aa6)}button.navigator-arrow{border:1px solid rgba(255,255,255,.16);background:#0a0a0ab3;color:#f2f2f2}.navigator-controls button.active{border-color:#e5393599;box-shadow:0 8px 20px #e5393526}.navigator-toc::-webkit-scrollbar-track{background:#0a0a0a99}.navigator-toc::-webkit-scrollbar-thumb{background:#ffffff2e}@keyframes statusPulse{0%{color:#f5f5f5}to{color:var(--muted)}}}