:root{color-scheme:dark;color:#f7fafc;background:#111827;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1f2937,#0f172a 45%,#050816)}button,input{font:inherit}button{border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:inherit;padding:.75rem 1rem;border-radius:.65rem;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.app-shell{max-width:1080px;margin:0 auto;padding:1.5rem}.app-shell--reader{max-width:none;margin:0;padding:0;width:100vw;height:100vh;overflow:hidden}.hero-panel,.reader-panel{background:#0f172ae0;border:1px solid rgba(148,163,184,.12);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem}.app-shell--reader .hero-panel{padding:.6rem 1rem;margin-bottom:0;border-radius:0}.app-shell--reader .reader-panel{padding:0;margin:0;height:calc(100vh - 72px);display:flex;flex-direction:column}.compact-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#0f172afa;color:#f8fafc;padding:.6rem 1rem;border-bottom:1px solid rgba(148,163,184,.06);position:sticky;top:0;z-index:60}.compact-header .compact-left{display:flex;flex-direction:column}.compact-header .compact-title{font-weight:600}.compact-header .compact-sub{font-size:.9rem;color:#94a3b8e6}.compact-header .compact-actions button{margin-left:.5rem}.file-picker{display:inline-flex;flex-direction:column;gap:.75rem;margin-top:1rem;color:#fff}.mode-picker{display:inline-flex;flex-direction:column;gap:.75rem;margin-top:1rem}.file-picker input,.mode-picker select{cursor:pointer;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#fff;padding:.75rem 1rem;border-radius:.65rem}.mode-picker select option{color:#000;background:#fff}.mode-picker select option:checked,.mode-picker select option[selected]{color:#fff;background:#1f2937}.offset-picker,.size-picker,.direction-picker{display:inline-flex;flex-direction:column;gap:.75rem;margin-top:1rem;color:#f8fafc}.size-control-row{display:flex;align-items:center;gap:.75rem}.size-picker input[type=range]{width:100%}.offset-picker input{width:1rem;height:1rem}.status-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}.current-file,.current-layout{margin:0;color:#e2e8f0e6}.current-layout{font-size:.95rem;color:#94a3b8f2}.error-box{margin-top:1rem;padding:.85rem 1rem;border-radius:.85rem;background:#7f1d1d;color:#fee2e2}.reader-controls{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.reader-scroll{width:100%;flex:1 1 auto;min-height:0;overflow:hidden;-webkit-overflow-scrolling:touch}.reader-scroll--horizontal{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-color:rgba(255,255,255,.08) transparent;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.reader-scroll--vertical{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-color:rgba(255,255,255,.08) transparent;scrollbar-width:thin}.reader-scroll--horizontal::-webkit-scrollbar,.reader-scroll--vertical::-webkit-scrollbar{height:12px;width:12px}.reader-scroll--horizontal::-webkit-scrollbar-thumb,.reader-scroll--vertical::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:999px}.reader-scroll--horizontal::-webkit-scrollbar-track,.reader-scroll--vertical::-webkit-scrollbar-track{background:transparent}.reader-stage{min-height:40vh;display:grid;place-items:center;background:transparent;border:none;border-radius:0;padding:0}.app-shell--reader .reader-stage{min-height:100%;border-radius:0;padding:0}.reader-stage--vertical,.reader-stage--horizontal{display:flex;flex-direction:column;gap:0;align-items:center}.reader-stage--horizontal{flex-direction:row;justify-content:flex-start;flex-wrap:nowrap;align-items:center;gap:0;min-height:85vh;width:max-content;scroll-snap-type:x mandatory}.app-shell--reader .reader-stage--horizontal{min-height:100%}.reader-stage--horizontal .reader-page-card{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:100%;width:auto;min-width:0;flex:0 0 auto;max-width:none;scroll-snap-align:start;padding:0;margin:0;border:none;box-shadow:none}.app-shell--reader .reader-stage--horizontal .reader-page-card{height:100%;display:flex;align-items:center;justify-content:center}.reader-stage--horizontal .reader-image{width:auto;height:100%;max-height:none;margin:0}.reader-stage--vertical .page-label,.reader-stage--horizontal .page-label{display:none}.reader-stage--gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;align-items:start;grid-auto-rows:minmax(0,auto);width:100%}.reader-stage--spread{display:grid;grid-template-columns:repeat(2,auto);gap:0;align-items:stretch;justify-items:stretch;justify-content:center;min-height:85vh}.app-shell--reader .reader-stage--spread{min-height:100%}.app-shell--reader .reader-stage--spread .reader-page-card{height:100%;width:auto;min-width:0;display:flex;align-items:center;justify-content:center}.reader-stage--single{display:grid;place-items:start center;min-height:85vh;overflow:auto}.app-shell--reader .reader-stage--single{min-height:100%}.app-shell--reader .reader-stage--single .reader-page-card{width:100%;height:auto;display:flex;align-items:flex-start;justify-content:center}.reader-page-card{display:grid;justify-items:center;gap:0;padding:0;margin:0;width:auto;max-width:none;cursor:pointer;transition:none;border:none;box-shadow:none}.reader-page-card:hover{transform:none;box-shadow:none}.reader-page-card--active{border:none;box-shadow:none}.reader-page-card--offset{background:transparent;border:none}.reader-page-card--greyscale .reader-image{filter:grayscale(100%)}.reader-page-card--dim .reader-image{filter:brightness(.68)}.reader-page-card--greyscale.reader-page-card--dim .reader-image{filter:grayscale(100%) brightness(.68)}.reader-image{display:block;width:100%;max-height:75vh;object-fit:contain;border-radius:.75rem;margin:0}.app-shell--reader .reader-image{max-width:100%;max-height:100%;width:auto;height:auto}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;opacity:0;pointer-events:none;transition:opacity .18s ease,background .18s ease;z-index:40}.sidebar-backdrop.open{background:#00000059;opacity:1;pointer-events:auto}.settings-sidebar{position:fixed;right:0;top:0;height:100vh;width:320px;max-width:90vw;background:#0f172afa;color:#f8fafc;border-left:1px solid rgba(148,163,184,.08);transform:translate(100%);transition:transform .22s ease;z-index:50;padding:1rem;overflow:auto}.settings-sidebar.settings-open{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.choice-row button.selected{background:#3b82f61f;border:1px solid rgba(59,130,246,.9);color:#fff;box-shadow:0 6px 18px #3b82f60f}.app-shell.bg-white{background:#fff;color:#0f172a}.app-shell.bg-black{background:#000;color:#f8fafc}.app-shell.bg-white .hero-panel,.app-shell.bg-white .reader-panel{background:#fffffff2;border-color:#0f172a0f;color:#0f172a}.app-shell.bg-black .hero-panel,.app-shell.bg-black .reader-panel{background:#020617f2;border-color:#94a3b80f;color:#f8fafc}.settings-body{margin-top:1rem}.page-label{font-size:.95rem;color:#94a3b8f2}.reader-placeholder{color:#94a3b8f2;text-align:center;padding:2rem}.reader-stage--horizontal{width:max-content}.reader-stage--horizontal .reader-page-card{width:auto;max-width:none;margin:0}.reader-scroll{width:100%;height:100%;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.reader-scroll--vertical{overflow-y:auto;overflow-x:hidden}.reader-scroll--horizontal{overflow-x:auto;overflow-y:hidden}.reader-scroll::-webkit-scrollbar{width:12px}.reader-scroll::-webkit-scrollbar-track{background:#ffffff05;border-radius:6px}.reader-scroll::-webkit-scrollbar-thumb{background:#94a3b81f;border-radius:6px;border:3px solid rgba(255,255,255,.02)}.reader-scroll{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.12) rgba(255,255,255,.02)}