/* فارس — a royal reading citadel. Illustration and metalwork remain static.
   The motion controller owns the two small ornaments; reader geometry is shared. */
.faris-emblem,.faris-ambient,.faris-motion-controls,.reading-dock-cover{display:none}
.design-miniature.miniature-faris{background:#0d1b2b url('./assets/faris-citadel-night.webp') center 34% / cover no-repeat;border:1px solid #bfa77a;border-radius:3px;color:#b8c4d4}
.design-miniature.miniature-faris .miniature-books>i{background:#174b86;border:1px solid #b8c4d4;opacity:1;border-radius:1px}
:root[data-design=faris]{--bg:#c9d8e2;--surface:#eef3f6;--surface-2:#dce4ec;--text:#142a42;--muted:#3e5368;--muted-2:#485e73;--accent:#174b86;--accent-ink:#fff;--accent-soft:#174b8612;--line:#9eacb8;--focus:#174b86;--chrome:#c9d8e2;--hero-panel:#dfe6eb;--display-green:#dce4ec;--font-ui:Lunar,Cabinet,sans-serif;--font-display:Lunar,Cabinet,sans-serif;--faris-metal:#8b795d;--faris-edge:#aebcc8;--faris-panel:#eaf1f6f2;--faris-deep:#dbe6eef5;--faris-image:url('./assets/faris-citadel-day.webp');--faris-button:linear-gradient(140deg,#245d97,#173e6b);--faris-hero-ink:#142a42;--faris-hero-muted:#173149;--faris-hero-veil:linear-gradient(270deg,#c5dfefb8 0%,#c5dfef80 36%,#c5dfef00 70%);--pack-control-radius:5px;--pack-media-radius:5px;--pack-section-space:48px}
:root[data-design=faris][data-appearance=night]{--bg:#07111d;--surface:#0d1b2b;--surface-2:#182b40;--text:#edf3fa;--muted:#bdcad8;--muted-2:#adbdce;--accent:#9dc9ff;--accent-ink:#0b2341;--accent-soft:#9dc9ff14;--line:#41546a;--focus:#b5d6ff;--chrome:#07111d;--hero-panel:#101e30;--display-green:#182b40;--faris-metal:#bfa77a;--faris-edge:#6b7b89;--faris-panel:#0c1929f5;--faris-deep:#101f32f5;--faris-image:url('./assets/faris-citadel-night.webp');--faris-button:linear-gradient(140deg,#245d97,#123a6c);--faris-hero-ink:#edf3fa;--faris-hero-muted:#cad6e3;--faris-hero-veil:linear-gradient(270deg,#07111df0 0%,#07111dba 40%,#07111d00 78%)}
:root[data-design=faris][data-appearance=oled]{--bg:#02060b;--surface:#07121e;--surface-2:#142236;--text:#edf3fa;--muted:#bdcad8;--muted-2:#adbdce;--accent:#9dc9ff;--accent-ink:#0b2341;--accent-soft:#9dc9ff14;--line:#3c4b5e;--focus:#b5d6ff;--chrome:#02060b;--hero-panel:#091522;--display-green:#142236;--faris-metal:#bfa77a;--faris-edge:#5e6e80;--faris-panel:#07121ef7;--faris-deep:#0a1725f7;--faris-image:url('./assets/faris-citadel-night.webp');--faris-button:linear-gradient(140deg,#245d97,#123a6c);--faris-hero-ink:#edf3fa;--faris-hero-muted:#cad6e3;--faris-hero-veil:linear-gradient(270deg,#02060bf0 0%,#02060bc2 40%,#02060b15 78%)}
:root[data-design=faris] body{font-family:var(--font-ui);font-size:15px;line-height:1.85;background:var(--bg);color:var(--text)}
:root[data-design=faris] ::selection{background:var(--accent);color:var(--accent-ink)}
:root[data-design=faris] :is(input,textarea){caret-color:var(--accent)}
:root[data-design=faris] :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
:root[data-design=faris] :is(input,select,textarea){font-size:16px;color:var(--text);background:var(--surface);border-color:var(--line);border-radius:5px;min-height:48px}
:root[data-design=faris] input::placeholder,:root[data-design=faris] textarea::placeholder{color:var(--muted-2);opacity:1}
:root[data-design=faris] :is(h1,h2,h3,.library-card-title,.brand-word){font-family:var(--font-display);letter-spacing:0}
:root[data-design=faris] :is(p,small,.library-card-title,h1,h2,h3){overflow-wrap:break-word}
:root[data-design=faris] :is(.aether-butterfly,.aether-flutter,.aether-art-controls,.aether-garden-scene,.account-garden-preview,.aether-title-copy,.aether-description-copy,.aether-title-book,.hero-copy .inline-story){display:none!important}
:root[data-design=faris] .aether-page-accent{display:block}
:root[data-design=faris] .faris-motion-controls:not([hidden]){display:flex;justify-content:flex-end;min-width:0;margin-top:5px}
:root[data-design=faris] .faris-motion-controls button{min-height:44px;min-width:44px;padding:8px 11px;font:400 12px/1.8 var(--font-ui);color:var(--muted);background:var(--faris-panel);border:1px solid var(--line);border-radius:4px}
:root[data-design=faris] .jouri-theme-wallpaper{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);overflow:hidden}
:root[data-design=faris] .jouri-theme-wallpaper::before{content:"";position:absolute;inset:0;background:var(--faris-image) center top / cover no-repeat;opacity:var(--faris-scene-opacity,.26)}
/* Keep scene detail. Text protection is local to the reading side, never a white wash.
   One fixed image means scale/position cannot jump at a section boundary. */
:root[data-design=faris][data-appearance=day]{--faris-scene-opacity:.42}
:root[data-design=faris] body:has(.taste-home) .jouri-theme-wallpaper::before{opacity:1}
:root[data-design=faris] body:has(.taste-home) .jouri-theme-wallpaper::after{content:"";position:absolute;inset:0;background:var(--faris-hero-veil);pointer-events:none}
:root[data-design=faris] :is(#app,#authRoot){position:relative;z-index:1;background:transparent}
:root[data-design=faris] .page-shell{max-width:1200px;padding:24px max(20px,env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
:root[data-design=faris] :is(.eyebrow,.brand-kicker){display:none}
/* Quiet top chrome and inset metallic controls echo the reference's armor. */
:root[data-design=faris] .site-header{border:0;background:var(--chrome);box-shadow:none}
:root[data-design=faris] .site-header.is-scrolled{background:var(--chrome);border-bottom:1px solid var(--line)}
:root[data-design=faris] body:has(.taste-home) .site-header:not(.is-scrolled){background:transparent}
:root[data-design=faris] .header-shell{min-height:68px;padding:5px max(20px,env(safe-area-inset-right)) 5px max(20px,env(safe-area-inset-left));max-width:1200px}
:root[data-design=faris] .brand{gap:9px;color:var(--text)}
:root[data-design=faris] .brand-word{font-size:23px;font-weight:700;line-height:1.4}
:root[data-design=faris] .brand-mark{color:var(--faris-metal);width:24px}
:root[data-design=faris] .brand-mark svg{width:24px;height:24px}
:root[data-design=faris] .faris-emblem{display:block;width:25px;height:30px;flex:none;color:var(--faris-metal)}
:root[data-design=faris] .header-actions{gap:7px}
:root[data-design=faris] :is(.header-actions .icon-button,.profile-button){width:44px;height:44px;min-height:44px;border:1px solid var(--faris-edge);border-radius:50%;background:var(--faris-panel);color:var(--text);box-shadow:none}
:root[data-design=faris] :is(.primary-button,.secondary-button){min-height:50px;padding:11px 16px;font-size:15px;line-height:1.65;border-radius:5px;gap:9px}
:root[data-design=faris] .primary-button{background:var(--faris-button);color:#f6f9ff;border:1px solid var(--faris-edge);box-shadow:inset 0 0 0 2px #ffffff0b}
:root[data-design=faris] .primary-button :is(span,svg){color:inherit}
:root[data-design=faris] .secondary-button{background:var(--faris-panel);border:1px solid var(--faris-edge);color:var(--text);box-shadow:inset 0 0 0 2px #8596aa0a}
:root[data-design=faris] :is(.primary-button,.secondary-button){position:relative;background-clip:padding-box}
:root[data-design=faris] :is(.primary-button,.secondary-button)::after{content:"";position:absolute;inset:3px;pointer-events:none;border:1px solid var(--faris-metal);opacity:.45;clip-path:polygon(0 0,12px 0,12px 1px,1px 1px,1px 12px,0 12px,0 0,100% 0,100% 12px,calc(100% - 1px) 12px,calc(100% - 1px) 1px,calc(100% - 12px) 1px,calc(100% - 12px) 0,100% 0,100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 12px),100% calc(100% - 12px),100% 100%,0 100%,0 calc(100% - 12px),1px calc(100% - 12px),1px calc(100% - 1px),12px calc(100% - 1px),12px 100%,0 100%)}
:root[data-design=faris] :is(.primary-button,.secondary-button,.icon-button,.profile-button,.filter-chip,.text-button){transition:transform 150ms cubic-bezier(.16,1,.3,1)}
:root[data-design=faris] :is(.primary-button,.secondary-button,.icon-button,.profile-button):active{transform:scale(.975)}
:root[data-design=faris] :is(button:disabled,[aria-disabled=true]){opacity:.55;cursor:default}
:root[data-design=faris] .text-button{font-size:13px;min-height:44px;color:var(--accent)}
:root[data-design=faris] .icon-button{border-radius:5px;min-width:44px;min-height:44px}
:root[data-design=faris] .mobile-nav{border-top:1px solid var(--faris-edge);border-radius:0;background:var(--chrome);padding:5px max(7px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));gap:4px;box-shadow:none;min-height:76px}
:root[data-design=faris] .mobile-nav a{min-height:60px;border-radius:4px;font-size:11px;line-height:1.6;gap:3px;border:1px solid transparent;color:var(--muted)}
:root[data-design=faris] .mobile-nav a[aria-current=page]{border-color:var(--faris-edge);background:var(--surface-2);color:var(--accent);box-shadow:inset 0 0 0 2px #8b9eb414}
:root[data-design=faris] .mobile-nav svg{width:23px;height:23px}
/* A single fixed illustration continues behind intro and book stage. */
:root[data-design=faris] .taste-home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "showcase" "resume" "recent" "discovery" "saved" "updates" "finale";gap:0;padding-top:0}
:root[data-design=faris] .home-primary{display:contents}
:root[data-design=faris] .empty-lead{display:block;grid-column:1;grid-row:1 / span 2;direction:rtl;padding:0;background:transparent;border:0}
:root[data-design=faris] .empty-art{min-height:225px;margin-top:18px;background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:5px;grid-column:auto;grid-row:auto}
:root[data-design=faris] .empty-art>span{display:none}
:root[data-design=faris] .empty-book{background:var(--faris-button);color:#edf3fa;border:1px solid var(--faris-metal);border-radius:4px;box-shadow:5px 10px 20px #02060b26;font-family:var(--font-display)}
:root[data-design=faris] .home-primary>.hero-copy{grid-area:intro}
:root[data-design=faris] .home-primary>.hero-art{grid-area:showcase}
:root[data-design=faris] .hero-copy{isolation:isolate;margin:-24px -20px 0;padding:122px 20px 24px;min-height:400px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:0;color:var(--faris-hero-ink)}
:root[data-design=faris] .hero-copy::before,:root[data-design=faris] .hero-copy::after{content:none}
:root[data-design=faris] .hero-welcome{font-size:13px;color:var(--faris-hero-muted);margin:0 0 9px;max-width:65%;line-height:1.8}
:root[data-design=faris] .hero-copy h1{font-size:clamp(31px,8.7vw,44px);line-height:1.58;font-weight:700;width:100%;max-width:100%;letter-spacing:0;text-wrap:nowrap;overflow-wrap:normal;color:var(--faris-hero-ink)}
:root[data-design=faris] .hero-copy h1 em{color:var(--accent);font-style:normal}
:root[data-design=faris] .hero-description{margin-top:15px;max-width:73%;font-size:14px;line-height:1.9;color:var(--faris-hero-muted)}
:root[data-design=faris] .hero-actions{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px;width:100%;margin-top:26px}
:root[data-design=faris] .hero-actions>*{width:100%;min-width:0;padding-inline:11px;justify-content:center;font-size:14px}
:root[data-design=faris] .hero-actions .primary-button>svg:first-child{display:none}
:root[data-design=faris] .hero-art{grid-column:auto;grid-row:auto;display:block;min-height:0;margin-top:18px;padding:5px;background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 4px #8091a10b;direction:rtl}
:root[data-design=faris] .hero-art::before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid var(--faris-metal);opacity:.4;z-index:3}
:root[data-design=faris] :is(.hero-word,.hero-orbit,.hero-main-cover,.hero-back-cover,.hero-art-caption){display:none}
:root[data-design=faris] .aether-showcase{display:block;width:100%;min-width:0;padding:12px 0 3px}
:root[data-design=faris] .aether-showcase-track{display:flex;align-items:start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:18px;overscroll-behavior-x:contain;scrollbar-width:none;width:100%;padding:4px 18px 0;direction:rtl}
:root[data-design=faris] .aether-showcase-track::-webkit-scrollbar{display:none}
:root[data-design=faris] .aether-showcase-slide{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:18px;flex:0 0 calc(100% - 14px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:14px 4px;text-align:start;direction:rtl}
:root[data-design=faris] .aether-feature-book{display:block;min-width:0;width:100%;max-width:150px;transform:rotate(3deg)}
:root[data-design=faris] .aether-feature-book>.library-cover-wrap{aspect-ratio:2/3;border-radius:3px;overflow:hidden;border:1px solid var(--faris-edge);box-shadow:4px 9px 18px #02091329}
:root[data-design=faris] .aether-feature-copy{min-width:0}
:root[data-design=faris] .aether-feature-copy small{display:block;font-size:12px;line-height:1.8;margin-bottom:10px;color:var(--muted)}
:root[data-design=faris] .aether-feature-copy h2{font-family:Cabinet,Lunar,sans-serif;font-size:18px;line-height:1.45;color:var(--text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;font-weight:700}
:root[data-design=faris] .aether-feature-open{display:inline-flex;gap:6px;align-items:center;min-height:44px;min-width:44px;margin-top:8px;padding:8px 0;color:var(--accent);font-size:13px;line-height:1.7}
:root[data-design=faris] .aether-feature-open svg{width:17px;height:17px}
:root[data-design=faris] .aether-showcase-controls{display:flex;justify-content:center;align-items:center;min-height:44px;margin:0;position:relative;z-index:4}
:root[data-design=faris] .aether-showcase-controls button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;padding:0;font-size:0;color:var(--accent)}
:root[data-design=faris] .aether-showcase-controls button::before{content:"";width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--faris-edge);background:var(--surface-2)}
:root[data-design=faris] .aether-showcase-controls button:is([aria-pressed=true],[aria-current=true],.is-active)::before{background:var(--faris-metal);border-color:var(--faris-metal)}
:root[data-design=faris] .faris-ambient{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
:root[data-design=faris] .faris-ambient svg{position:absolute;width:20px;height:20px;color:var(--faris-metal)}
:root[data-design=faris] .faris-ambient svg:first-child{left:14%;top:23%}
:root[data-design=faris] .faris-ambient svg:last-child{right:12%;bottom:20%}
:root[data-design=faris] .reading-dock{grid-area:resume;display:grid;grid-template-columns:52px minmax(0,1fr) 44px;grid-template-areas:"cover label action" "cover copy action";align-items:center;gap:5px 12px;width:100%;max-width:720px;justify-self:center;margin-top:24px;padding:14px;border:1px solid var(--faris-edge);background:var(--faris-deep);border-radius:6px}
:root[data-design=faris] .reading-dock-cover{display:block;grid-area:cover;width:52px;height:78px;align-self:center;overflow:hidden;border:1px solid var(--faris-edge);border-radius:3px}
:root[data-design=faris] .reading-dock-cover .library-cover-wrap{width:100%;height:100%;aspect-ratio:2/3}
:root[data-design=faris] .reading-dock-cover img{width:100%;height:100%;object-fit:cover}
:root[data-design=faris] .reading-dock-cover :is(.source-badge,.reading-state-badge){display:none}
:root[data-design=faris] .reading-dock-label{grid-area:label;font-size:11px;line-height:1.7;color:var(--muted);min-width:0}
:root[data-design=faris] .reading-dock-copy{grid-area:copy;display:block;min-width:0}
:root[data-design=faris] .reading-dock-copy h2{font:700 16px/1.5 Cabinet,Lunar,sans-serif;color:var(--text);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;text-align:start}
:root[data-design=faris] .reading-dock-copy p{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:6px 0 0;font-size:12px;line-height:1.7;white-space:normal;color:var(--muted)}
:root[data-design=faris] .reading-dock-action{grid-area:action;display:grid;place-items:center;align-self:center;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--faris-edge);border-radius:4px;background:var(--faris-button);color:#f6f9ff}
:root[data-design=faris] .reading-dock-action svg{width:20px;height:20px}
:root[data-design=faris] .home-recent{grid-area:recent}
:root[data-design=faris] .story-discovery{grid-area:discovery}
:root[data-design=faris] .saved-places{grid-area:saved}
:root[data-design=faris] .home-updates{grid-area:updates}
:root[data-design=faris] .home-finale{grid-area:finale}
:root[data-design=faris] .taste-section{margin-top:48px}
:root[data-design=faris] .section-heading{align-items:center;margin-bottom:20px;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--faris-edge)}
:root[data-design=faris] :is(.section-heading h2,.home-recent .section-heading h2){font-size:25px;line-height:1.6;min-width:0}
:root[data-design=faris] .section-heading .text-button{font-size:12px;flex:none;background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:4px;padding-inline:12px}
:root[data-design=faris] :is(.story-marquee,.marquee-control){display:none}
:root[data-design=faris] .story-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:transparent;overflow:visible}
:root[data-design=faris] :is(.story-tile,.story-tile:first-child,.gallery-count-2 .story-tile:first-child){grid-column:auto;grid-row:auto;min-height:0;border-radius:4px;background:var(--faris-panel);border:1px solid var(--faris-edge)}
:root[data-design=faris] .story-tile>a{display:block;position:relative;inset:auto}
:root[data-design=faris] .story-media{position:relative;inset:auto;aspect-ratio:2/3;overflow:hidden}
:root[data-design=faris] .story-media>.library-cover-wrap{width:100%;height:100%;aspect-ratio:2/3}
:root[data-design=faris] .story-tile-copy{position:relative;inset:auto;padding:13px 10px;background:var(--faris-panel);color:var(--text)}
:root[data-design=faris] .story-tile-copy h3{font:700 19px/1.4 Cabinet,Lunar,sans-serif;display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere}
:root[data-design=faris] .story-tile-copy>span{color:var(--muted);font-size:12px;margin-top:9px}
:root[data-design=faris] .discovery-intro{text-align:start;margin:0 0 20px;max-width:66ch}
:root[data-design=faris] .story-line{font-size:28px;line-height:1.7;text-wrap:balance}
:root[data-design=faris] .discovery-intro>p{font-size:14px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] .discovery-panels{height:340px;border-radius:4px;gap:6px}
:root[data-design=faris] .discovery-panel{border-radius:3px;flex-basis:38px}
:root[data-design=faris] .discovery-panel::after{background:#07111de0}
:root[data-design=faris] .discovery-panel.is-active::after{background:linear-gradient(0deg,#07111df5,#07111d15 85%)}
:root[data-design=faris] .discovery-copy{color:#edf3fa;inset-inline:14px;bottom:18px}
:root[data-design=faris] .discovery-copy h3{font:700 24px/1.35 Cabinet,Lunar,sans-serif}
:root[data-design=faris] .discovery-copy>a{color:#b7d6ff;min-height:44px;font-size:13px}
:root[data-design=faris] .discovery-select{color:#edf3fa}
:root[data-design=faris] :is(.continue-card,.update-row){background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:4px;padding:16px;gap:15px;margin-bottom:12px}
:root[data-design=faris] :is(.continue-copy strong,.update-row strong){font:700 21px/1.4 Cabinet,Lunar,sans-serif;overflow-wrap:anywhere}
:root[data-design=faris] :is(.continue-copy small,.update-row small){font-size:12px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] :is(.continue-cover,.update-cover){border-radius:3px}
:root[data-design=faris] .home-finale{background:var(--faris-panel);color:var(--text);border-block:1px solid var(--faris-edge);padding:28px 18px;gap:20px;border-radius:0}
:root[data-design=faris] .home-finale h2{font-size:32px;color:var(--text);line-height:1.6}
:root[data-design=faris] .home-finale .primary-button{background:var(--faris-button);color:#fff;border-radius:4px}
:root[data-design=faris] .home-library-meta{color:var(--muted);font-size:13px;gap:10px}
:root[data-design=faris] .home-library-meta bdi{font-family:Cabinet,Lunar,sans-serif;font-size:32px}
:root[data-design=faris] .finale-links{color:var(--muted);border-color:var(--line);gap:12px}
:root[data-design=faris] .finale-links>span{font-family:Cabinet,Lunar,sans-serif;font-size:17px}
:root[data-design=faris] :is(.finale-links>a,.finale-links>button){font-size:13px;min-height:44px}
/* A royal catalogue: compact cover grid, full titles, independently useful list. */
:root[data-design=faris] :is(.screen-heading h1,.library-head h1,.history-head h1){font-size:31px;line-height:1.6}
:root[data-design=faris] :is(.library-head,.browse-head,.history-head,.screen-heading){margin-bottom:22px;gap:14px}
:root[data-design=faris] .library-title-line{gap:12px;align-items:baseline}
:root[data-design=faris] .library-total{font:400 24px/1.3 Cabinet,Lunar,sans-serif;color:var(--muted)}
:root[data-design=faris] .library-heading-actions{gap:6px}
:root[data-design=faris] .library-heading-actions .icon-button{border:1px solid var(--faris-edge);background:var(--faris-panel)}
:root[data-design=faris] .library-heading-actions .add-work-button{background:var(--faris-button);color:#f6f9ff;border-color:var(--faris-edge)}
:root[data-design=faris] .library-controls{border-block:1px solid var(--faris-edge);padding:14px 0;background:var(--faris-panel);border-radius:0;min-width:0}
:root[data-design=faris] :is(.library-inline-search,.chapter-search-field){background:var(--surface);border:1px solid var(--faris-edge);border-radius:4px;min-height:49px;padding-inline:12px}
:root[data-design=faris] :is(.library-inline-search,.chapter-search-field):focus-within{outline:2px solid var(--focus);outline-offset:3px}
:root[data-design=faris] .library-toolbar{gap:7px;margin:12px 0 0;min-width:0;scroll-padding-inline:0}
:root[data-design=faris] :is(.library-toolbar,.filter-bar,.chapter-filters){overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--faris-edge) transparent}
:root[data-design=faris] .filter-chip{min-height:44px;min-width:44px;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--faris-panel);color:var(--muted);font-size:13px;line-height:1.7;flex:none}
:root[data-design=faris] .filter-chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
:root[data-design=faris] .filter-chip bdi{font-variant-numeric:tabular-nums;font-size:11px;opacity:1}
:root[data-design=faris] .library-page>.library-viewbar{padding:8px 0;gap:3px;background:var(--faris-panel);margin:4px 0;min-width:0}
:root[data-design=faris] .library-viewbar .browse-count{font-size:12px;white-space:normal;line-height:1.7;min-width:0}
:root[data-design=faris] .library-sort-control{min-width:0}
:root[data-design=faris] .library-sort-control select{font-size:16px;max-width:116px;min-height:44px}
:root[data-design=faris] .layout-toggle .icon-button[aria-pressed=true]{background:var(--surface-2);color:var(--accent)}
:root[data-design=faris] .library-refine{background:var(--faris-panel);border-color:var(--faris-edge);border-radius:4px;padding-inline:13px;margin-block:9px 20px}
:root[data-design=faris] .library-refine summary{min-height:48px;font-size:13px;line-height:1.8}
:root[data-design=faris] .refine-content{gap:12px;padding-bottom:16px}
:root[data-design=faris] .refine-content label{font-size:13px;line-height:1.8}
:root[data-design=faris] .library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 11px;align-items:start}
:root[data-design=faris] .library-card{border:0;background:transparent;border-radius:0;min-width:0}
:root[data-design=faris] .library-card-main{display:block;padding:0;min-height:0;border:0;border-radius:0}
:root[data-design=faris] .library-card-main>.library-cover-wrap{aspect-ratio:2/3;overflow:hidden;border:1px solid var(--faris-edge);border-radius:4px}
:root[data-design=faris] .library-card-copy{background:var(--faris-panel);padding:11px 9px 10px;min-width:0;border-radius:0 0 4px 4px}
:root[data-design=faris] .library-card-copy .library-card-title{margin-top:0}
:root[data-design=faris] .library-card-title{font:700 14px/1.45 Cabinet,Lunar,sans-serif;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;min-height:4.35em;margin-top:11px;overflow:hidden;overflow-wrap:anywhere;color:var(--text)}
:root[data-design=faris] :is(.card-context,.library-card-meta){font-size:11px;line-height:1.8;margin-top:6px;color:var(--muted)}
:root[data-design=faris] .library-card-progress{margin-top:8px}
:root[data-design=faris] .library-card-progress>span{height:3px;background:var(--surface-2)}
:root[data-design=faris] .library-card-progress small{font-size:11px;line-height:1.8;color:var(--muted)}
:root[data-design=faris] .library-list-view .library-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}
:root[data-design=faris] .library-list-view .library-card{width:100%;background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:4px}
:root[data-design=faris] .library-list-view .library-card-main{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:start;gap:15px;padding:14px}
:root[data-design=faris] .library-list-view .library-card-copy{background:transparent;padding:0}
:root[data-design=faris] .library-list-view .library-card-title{font-size:17px;min-height:0;margin-top:0}
:root[data-design=faris] .library-list-view :is(.card-context,.library-card-meta,.library-card-progress small){font-size:12px}
:root[data-design=faris] .browse-page>.filter-bar{padding:9px 0;margin-inline:0;border-block:1px solid var(--faris-edge);background:var(--faris-panel);border-radius:0;gap:7px}
:root[data-design=faris] .browse-heading>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--muted);max-width:60ch}
:root[data-design=faris] .browse-page>.browse-count{font-size:13px;line-height:1.8;margin-block:14px}
:root[data-design=faris] .refresh-status:not(:empty){background:var(--faris-panel);padding:13px;border:1px solid var(--line);font-size:13px;line-height:1.8;margin-block:12px}
:root[data-design=faris] :is(.empty-state,.quiet-empty){color:var(--muted);background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:5px;line-height:1.9}
:root[data-design=faris] .empty-state{padding:32px 20px;margin-top:20px}
:root[data-design=faris] .empty-state h2{font-size:24px;line-height:1.6}
:root[data-design=faris] .empty-state p{font-size:14px;max-width:45ch;color:var(--muted)}
/* Book detail, chapter table, and external source bookmarks. */
:root[data-design=faris] .detail-toolbar{gap:12px;margin-bottom:18px}
:root[data-design=faris] .detail-toolbar>.text-button{background:var(--faris-panel);padding-inline:12px;border:1px solid var(--line);border-radius:4px;color:var(--text)}
:root[data-design=faris] .source-detail-hero{border:1px solid var(--faris-edge);border-radius:5px;background:var(--faris-panel);overflow:clip;min-width:0}
:root[data-design=faris] .detail-book{padding:26px 20px;background:transparent;border:0;gap:18px;border-radius:0}
:root[data-design=faris] .detail-book::before{content:none}
:root[data-design=faris] .detail-cover{border-radius:4px}
:root[data-design=faris] .detail-heading{min-width:0}
:root[data-design=faris] .detail-heading h1{font:700 30px/1.3 Cabinet,Lunar,sans-serif;margin:8px 0 14px;overflow-wrap:anywhere}
:root[data-design=faris] .series-tags{gap:7px}
:root[data-design=faris] .tag{background:var(--surface-2);color:var(--muted);font-size:12px;border-radius:3px;padding:3px 8px;line-height:1.7}
:root[data-design=faris] .detail-content{padding:22px 20px;border-top:1px solid var(--line);min-width:0}
:root[data-design=faris] .detail-content>.detail-actions{margin-top:0}
:root[data-design=faris] .detail-actions{gap:10px}
:root[data-design=faris] .detail-actions .primary-button{min-height:52px;font-size:15px}
:root[data-design=faris] .detail-progress-pill{font-size:13px;line-height:1.9;color:var(--muted);margin-top:14px}
:root[data-design=faris] .detail-summary{font-size:15px;line-height:2;max-width:70ch;margin-block:22px;color:var(--text);overflow-wrap:anywhere}
:root[data-design=faris] .external-detail-page .series-detail{background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:5px;overflow:hidden}
:root[data-design=faris] .external-detail-page .detail-media{padding:24px;background:var(--surface-2)}
:root[data-design=faris] .external-detail-page .detail-content h1{font:700 30px/1.4 Cabinet,Lunar,sans-serif;margin-bottom:22px;overflow-wrap:anywhere}
:root[data-design=faris] .external-detail-page .story-summary{font-size:14px;line-height:1.95;margin-block:22px;color:var(--muted)}
:root[data-design=faris] .detail-more{background:transparent;border:0;border-top:1px solid var(--line);padding:0;border-radius:0;margin:0}
:root[data-design=faris] .detail-more summary{min-height:48px;padding-block:12px;font-size:14px;line-height:1.8}
:root[data-design=faris] .series-facts>div{font-size:13px;padding-block:10px;gap:16px;line-height:1.9;border-color:var(--line)}
:root[data-design=faris] .series-facts dd{max-width:65%;text-align:end;overflow-wrap:anywhere}
:root[data-design=faris] .work-organization{gap:14px}
:root[data-design=faris] .work-organization label{font-size:13px;line-height:1.8}
:root[data-design=faris] .chapter-section{border:1px solid var(--faris-edge);border-radius:5px;background:var(--faris-panel);padding:22px 16px;margin-top:24px;align-self:start}
:root[data-design=faris] .chapter-heading{gap:10px;align-items:start;margin-bottom:18px}
:root[data-design=faris] .chapter-heading>div{min-width:0}
:root[data-design=faris] .chapter-heading h2{font-size:24px;line-height:1.6}
:root[data-design=faris] .chapter-heading p{font-size:12px;line-height:1.9}
:root[data-design=faris] .chapter-bulk-trigger{min-height:44px;font-size:12px;flex:none;padding-inline:0;gap:4px}
:root[data-design=faris] .chapter-sort-row{gap:7px;margin-block:12px}
:root[data-design=faris] .chapter-filters{gap:5px;min-width:0}
:root[data-design=faris] .chapter-filters .filter-chip{padding-inline:9px;font-size:12px}
:root[data-design=faris] .chapter-sort{background:var(--surface);border:1px solid var(--line);border-radius:4px}
:root[data-design=faris] .chapter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;min-height:80px;padding:16px 5px;border-color:var(--line);border-radius:0}
:root[data-design=faris] .chapter-copy strong{font-size:15px;line-height:1.8;overflow-wrap:anywhere}
:root[data-design=faris] .chapter-copy small{font-size:12px;line-height:1.85;color:var(--muted)}
:root[data-design=faris] .chapter-state{font-size:12px;line-height:1.7;white-space:nowrap;padding:6px;color:var(--muted)}
:root[data-design=faris] .chapter-row.is-current{background:var(--accent-soft);border-inline-start:1px solid var(--accent);padding-inline:10px}
:root[data-design=faris] .chapter-row.is-current .chapter-state{color:var(--accent)}
:root[data-design=faris] :is(.chapter-load-more,.chapter-empty){font-size:14px;line-height:1.9;min-height:48px}
/* The archive reads as a dated ledger, rather than floating decorative tiles. */
:root[data-design=faris] .history-head p{font-size:14px;line-height:1.9}
:root[data-design=faris] .history-group{margin-block:25px 32px;padding-inline-start:15px}
:root[data-design=faris] .history-group .section-heading h2{font-size:16px;background:var(--faris-panel);padding:4px 10px;line-height:1.8}
:root[data-design=faris] .history-card-main{background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:4px;padding:16px;gap:15px;min-width:0}
:root[data-design=faris] .history-card-main>.library-cover-wrap{width:62px;border-radius:3px;flex:none}
:root[data-design=faris] .history-card-copy{min-width:0}
:root[data-design=faris] .history-card-copy strong{font:700 21px/1.4 Cabinet,Lunar,sans-serif;overflow-wrap:anywhere}
:root[data-design=faris] .history-card-copy small{font-size:12px;line-height:1.9;margin-top:8px}
/* Account and every native dialog share the citadel's quiet stone material. */
:root[data-design=faris] .settings-page{max-width:1100px}
:root[data-design=faris] .account-summary{border:1px solid var(--faris-edge);border-radius:5px;background:var(--faris-panel);padding:20px;gap:15px;margin-bottom:24px}
:root[data-design=faris] .account-summary strong{font-size:25px;line-height:1.6}
:root[data-design=faris] .account-summary small{font-size:13px;color:var(--muted)}
:root[data-design=faris] .account-avatar{background:var(--surface-2);color:var(--accent);border:1px solid var(--faris-edge);border-radius:6px}
:root[data-design=faris] .settings-sections{gap:22px}
:root[data-design=faris] .settings-section{background:var(--faris-panel);border:1px solid var(--faris-edge);border-radius:5px;padding:24px 20px}
:root[data-design=faris] .settings-section h2{font-size:22px;line-height:1.6;margin-bottom:10px}
:root[data-design=faris] .settings-section p{font-size:14px;line-height:1.95;max-width:68ch;color:var(--muted)}
:root[data-design=faris] :is(.settings-facts,.settings-note,.source-health){font-size:13px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] .settings-facts>div{gap:14px;padding-block:12px;border-color:var(--line)}
:root[data-design=faris] .settings-facts dd{max-width:60%;overflow-wrap:anywhere}
:root[data-design=faris] .settings-actions{gap:9px}
:root[data-design=faris] .settings-actions>*{font-size:13px;min-width:0;flex:1 1 130px}
:root[data-design=faris] dialog{background:var(--surface);color:var(--text);border:1px solid var(--faris-edge);border-radius:7px 7px 0 0;padding:24px 20px calc(25px + env(safe-area-inset-bottom));box-shadow:none;max-height:min(calc(100svh - 16px),var(--dialog-vh,calc(100svh - 16px)));overflow-y:auto;overscroll-behavior:contain}
:root[data-design=faris] dialog::backdrop{background:#02060bb8;backdrop-filter:none}
:root[data-design=faris] .dialog-head{align-items:center;gap:14px;margin-bottom:24px;min-height:44px}
:root[data-design=faris] .dialog-head h2{font-size:26px;line-height:1.6}
:root[data-design=faris] .dialog-head .icon-button{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;flex:none}
:root[data-design=faris] .dialog-grabber{background:var(--faris-edge)}
:root[data-design=faris] .form-field{min-width:0}
:root[data-design=faris] .form-field>span{font-size:14px;line-height:1.8;color:var(--text)}
:root[data-design=faris] :is(.form-field small,.field-hint){font-size:12px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] :is(.account-intro,.invite-ready p){font-size:14px;line-height:1.95;color:var(--muted)}
:root[data-design=faris] .account-preferences{max-width:600px}
:root[data-design=faris] .account-identity{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px;gap:14px}
:root[data-design=faris] .account-identity strong{font-size:23px;line-height:1.6}
:root[data-design=faris] .account-identity small{font-size:13px;line-height:1.7;color:var(--muted)}
:root[data-design=faris] .account-role{font-size:12px;color:var(--muted);background:transparent;border-color:var(--line)}
:root[data-design=faris] .account-form{gap:22px}
:root[data-design=faris] :is(.design-picker legend,.appearance-picker legend){font-size:15px;line-height:1.8;margin-bottom:10px}
:root[data-design=faris] .design-picker-note{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:12px}
:root[data-design=faris] .design-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:root[data-design=faris] .design-option{display:grid;grid-template-columns:minmax(0,1fr) 18px;grid-template-rows:52px auto;gap:10px 5px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:5px;min-height:0;align-items:start}
:root[data-design=faris] .design-option:has(input:checked){border-color:var(--accent);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
:root[data-design=faris] .design-miniature{grid-column:1/-1;width:100%;height:52px;border-radius:3px;padding:6px;gap:4px}
:root[data-design=faris] .miniature-heading{height:4px}
:root[data-design=faris] .miniature-books{height:26px;min-height:0}
:root[data-design=faris] .miniature-line{height:2px}
:root[data-design=faris] .design-option-copy{grid-column:1;min-width:0;gap:3px}
:root[data-design=faris] .design-option-copy strong{font-size:15px;line-height:1.6}
:root[data-design=faris] .design-option-copy small{font-size:11px;line-height:1.8;color:var(--muted)}
:root[data-design=faris] .design-selected{grid-column:2;grid-row:2;width:18px;height:22px}
:root[data-design=faris] .miniature-faris{background:var(--faris-image) center 34% / cover no-repeat;border:1px solid var(--faris-metal)}
:root[data-design=faris] .miniature-faris .miniature-books>i{border:1px solid #bfa77a;background:#174b86}
:root[data-design=faris] .appearance-picker{gap:7px}
:root[data-design=faris] .appearance-picker label{background:var(--bg);border:1px solid var(--line);border-radius:4px;min-height:48px;gap:6px;padding:8px 6px;justify-content:center;font-size:13px}
:root[data-design=faris] .appearance-picker label:has(input:checked){background:var(--surface-2);border-color:var(--accent)}
:root[data-design=faris] .appearance-picker input[type=radio]{accent-color:var(--accent);min-height:0;flex:none}
:root[data-design=faris] .appearance-swatch{display:none}
:root[data-design=faris] .account-section-action{margin-top:16px}
:root[data-design=faris] .account-security{border-color:var(--line);padding-block:12px;margin-top:22px}
:root[data-design=faris] .account-security summary{min-height:44px;font-size:14px;line-height:1.8}
:root[data-design=faris] .account-security form{display:grid;gap:16px;padding-top:18px}
:root[data-design=faris] :is(.device-list,.invite-list,.member-list){margin-top:24px}
:root[data-design=faris] :is(.invite-list,.member-list) h3{font-size:23px;line-height:1.6;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--faris-edge)}
:root[data-design=faris] :is(.device-list,.invite-list,.member-list)>div{border-color:var(--line);padding-block:16px;gap:14px;min-width:0}
:root[data-design=faris] :is(.device-list,.invite-list,.member-list) strong{font-size:15px;line-height:1.8;overflow-wrap:anywhere}
:root[data-design=faris] :is(.device-list,.invite-list,.member-list) small{font-size:12px;line-height:1.8;color:var(--muted)}
:root[data-design=faris] .invite-ready{background:var(--surface-2);border:1px solid var(--faris-edge);border-radius:5px;padding:18px;margin-top:24px}
:root[data-design=faris] .account-status:not(:empty){padding:12px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2);font-size:13px;line-height:1.9}
:root[data-design=faris] :is(.account-status.is-error,.form-error,.error-message){color:var(--text);background:var(--surface-2);border-color:var(--line)}
:root[data-design=faris] .account-signout{margin-top:18px}
:root[data-design=faris] .source-directory{border-color:var(--line)}
:root[data-design=faris] .source-directory-links a{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;min-height:48px;font-size:13px}
:root[data-design=faris] .source-directory>p{font-size:13px;line-height:1.9}
:root[data-design=faris] .search-field{background:var(--surface);border:1px solid var(--line);border-radius:4px;min-height:50px}
:root[data-design=faris] .search-field input{font-size:16px;background:transparent;border:0}
:root[data-design=faris] .search-results{gap:12px;margin-top:20px}
:root[data-design=faris] .search-result{padding-block:12px;border-color:var(--line);gap:15px}
:root[data-design=faris] .search-result strong{font:700 19px/1.4 Cabinet,Lunar,sans-serif}
:root[data-design=faris] .search-result small{font-size:12px;line-height:1.8;color:var(--muted)}
:root[data-design=faris] :is(.search-hint,.search-result-label,.bulk-chapter-description,.bulk-chapter-preview){font-size:13px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] .bulk-range-grid{gap:12px}
:root[data-design=faris] #importPreview{border-radius:4px;border-color:var(--line);background:var(--surface-2)}
:root[data-design=faris] #importPreview:has([data-save-external]){background:transparent}
:root[data-design=faris] #importPreview :is(p,small){color:var(--muted);font-size:13px;line-height:1.9}
:root[data-design=faris] :is(.toast,.network-status){background:var(--surface);color:var(--text);border:1px solid var(--faris-edge);border-radius:5px;font-size:13px;line-height:1.8}
/* Authentication belongs to the same world, including error/reset invite states. */
:root[data-design=faris] .auth-shell{max-width:1080px;min-height:100svh;padding:calc(18px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));gap:0;display:flex;flex-direction:column}
:root[data-design=faris] .auth-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;min-width:0}
:root[data-design=faris] .auth-brand{gap:8px;min-height:48px;flex:none}
:root[data-design=faris] .auth-brand>span{font-size:25px;color:var(--text)}
:root[data-design=faris] .auth-brand>small{display:none}
:root[data-design=faris] .auth-brand>svg{width:25px;height:25px;color:var(--faris-metal)}
:root[data-design=faris] .auth-lighting{display:flex;gap:2px;padding:3px;border:1px solid var(--faris-edge);border-radius:5px;background:var(--faris-panel)}
:root[data-design=faris] .auth-lighting button{min-width:46px;min-height:44px;padding:8px 10px;font:700 13px/1.6 var(--font-ui);color:var(--muted);background:transparent;border-radius:3px}
:root[data-design=faris] .auth-lighting button[aria-pressed=true]{color:var(--text);background:var(--surface-2)}
:root[data-design=faris] .auth-art{position:relative;display:block;width:100%;max-width:480px;align-self:center;height:165px;min-height:165px;background:var(--faris-image) center 27% / cover no-repeat;border:1px solid var(--faris-edge);border-bottom:0;border-radius:5px 5px 0 0;overflow:hidden;margin:0}
:root[data-design=faris] .auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--surface),transparent 60%);pointer-events:none}
:root[data-design=faris] :is(.auth-poster,.auth-art-word,.auth-edition){display:none}
:root[data-design=faris] .auth-panel{position:relative;width:100%;max-width:480px;align-self:center;min-width:0;padding:26px 22px 22px;background:var(--surface);border:1px solid var(--faris-edge);border-top:0;border-radius:0 0 5px 5px}
:root[data-design=faris] .auth-heading{margin-bottom:24px}
:root[data-design=faris] .auth-heading h1{font-size:28px;line-height:1.6;margin:0 0 10px;color:var(--text);text-wrap:balance}
:root[data-design=faris] .auth-heading>p{font-size:14px;line-height:1.9;color:var(--muted);margin:0}
:root[data-design=faris] .auth-form{gap:18px;max-width:none;width:100%}
:root[data-design=faris] .auth-panel .form-field input{font-size:16px;min-height:52px;min-width:0;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--text)}
:root[data-design=faris] .auth-panel input::placeholder{font-size:14px;color:var(--muted)}
:root[data-design=faris] .password-wrap input{padding-inline-end:52px}
:root[data-design=faris] .password-toggle{color:var(--muted);width:44px;min-height:44px}
:root[data-design=faris] .password-wrap>.icon-button{color:var(--muted);min-width:44px;min-height:44px}
:root[data-design=faris] .auth-panel .primary-button{width:100%;font-size:15px;min-height:52px}
:root[data-design=faris] .auth-panel .primary-button>span{color:inherit}
:root[data-design=faris] :is(.auth-back,.auth-checking){font-size:14px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] .auth-back{display:flex;align-items:center;min-height:44px;margin-top:18px;color:var(--accent)}
:root[data-design=faris] .invite-explainer{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;gap:12px}
:root[data-design=faris] .invite-explainer>span{border:1px solid var(--line);background:var(--surface-2);border-radius:4px;color:var(--accent)}
:root[data-design=faris] .invite-explainer p{font-size:13px;line-height:1.9;color:var(--muted)}
:root[data-design=faris] .invite-explainer strong{font-size:14px;line-height:1.8;color:var(--text)}
:root[data-design=faris] .auth-footer{font-size:11px;line-height:1.9;color:var(--muted);margin-top:24px}
/* Reader paper/ink/OLED preferences remain independent of the design's lighting. */
:root[data-design=faris] body.reader-mode{color-scheme:dark;--reader-bg:#07111d;--reader-text:#edf3fa;--reader-muted:#bdcad8;--reader-line:#41546a;--reader-surface:#0d1b2b;--reader-control:#182b40;--reader-accent:#b7d6ff;--reader-accent-ink:#10263f;--reader-focus:#b7d6ff;--bg:var(--reader-bg);--surface:var(--reader-surface);--surface-2:var(--reader-control);--text:var(--reader-text);--muted:var(--reader-muted);--muted-2:var(--reader-muted);--line:var(--reader-line);--accent:var(--reader-accent);--accent-ink:var(--reader-accent-ink);--focus:var(--reader-focus);--chrome:var(--reader-surface);--control:var(--reader-control);--faris-panel:var(--reader-surface);--faris-deep:var(--reader-control);--faris-edge:var(--reader-line);--faris-button:var(--reader-accent);background:var(--reader-bg);color:var(--reader-text)}
:root[data-design=faris] body.reader-mode.reader-paper{color-scheme:light;--reader-bg:#f1f1ec;--reader-text:#142a42;--reader-muted:#40566a;--reader-line:#a8b3bc;--reader-surface:#fafaf6;--reader-control:#e1e6e9;--reader-accent:#174b86;--reader-accent-ink:#fff;--reader-focus:#174b86}
:root[data-design=faris] body.reader-mode.reader-oled{--reader-bg:#000;--reader-text:#edf3fa;--reader-muted:#bdcad8;--reader-line:#3b4a5a;--reader-surface:#060d15;--reader-control:#111e2c;--reader-accent:#b7d6ff;--reader-accent-ink:#10263f;--reader-focus:#b7d6ff}
:root[data-design=faris] body.reader-mode .jouri-theme-wallpaper{display:none}
:root[data-design=faris] body.reader-mode .primary-button{background:var(--reader-accent);color:var(--reader-accent-ink);border-color:var(--reader-line)}
:root[data-design=faris] .reader-topbar{background:var(--reader-bg);color:var(--reader-text);border-top:1px solid var(--reader-line);border-radius:5px 5px 0 0}
:root[data-design=faris] :is(.reader-back,.reader-setting-button,.reader-mark-button){border-radius:4px;color:var(--reader-text);background:var(--reader-control)}
:root[data-design=faris] .reader-title strong{font-size:14px;line-height:1.7}
:root[data-design=faris] .reader-title small{font-size:11px;color:var(--reader-muted);opacity:1}
:root[data-design=faris] .reader-intro h1{font-size:25px;line-height:1.6}
:root[data-design=faris] .reader-intro p,:root[data-design=faris] .reader-complete p{font-size:13px;line-height:1.9;color:var(--reader-muted);opacity:1}
:root[data-design=faris] .reader-complete h2{font-size:27px;line-height:1.6}
:root[data-design=faris] .reader-shell .primary-button{background:var(--reader-accent);color:var(--reader-accent-ink);border-color:transparent}
:root[data-design=faris] .reader-shell .secondary-button{background:var(--reader-control);color:var(--reader-text);border-color:var(--reader-line)}
:root[data-design=faris] .reader-shell :is(a,button,summary):focus-visible{outline-color:var(--reader-focus)}
:root[data-design=faris] #readerSettings .segmented-field{gap:8px;margin-bottom:24px}
:root[data-design=faris] #readerSettings .segmented-field legend{font-size:14px;line-height:1.8;margin-bottom:12px}
:root[data-design=faris] #readerSettings .segmented-field label span{min-height:50px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:4px;font-size:14px;line-height:1.7}
:root[data-design=faris] #readerSettings .segmented-field input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media(max-width:359px){
 :root[data-design=faris] .page-shell{padding-inline:16px}
 :root[data-design=faris] .header-shell{padding-inline:16px}
 :root[data-design=faris] .hero-copy{margin-inline:-16px;padding-inline:16px;min-height:380px;padding-top:115px}
 :root[data-design=faris] .hero-copy h1{font-size:30px}
 :root[data-design=faris] .hero-description{font-size:13px;max-width:80%}
 :root[data-design=faris] .hero-actions{gap:7px}
 :root[data-design=faris] .hero-actions>*{font-size:12px;padding-inline:8px}
 :root[data-design=faris] .aether-showcase-slide{grid-template-columns:88px minmax(0,1fr);gap:13px;padding-inline:1px}
 :root[data-design=faris] .aether-feature-copy h2{font-size:18px}
 :root[data-design=faris] .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 13px}
 :root[data-design=faris] .library-sort-control select{font-size:16px;max-width:96px}
 :root[data-design=faris] .chapter-section{padding-inline:12px}
 :root[data-design=faris] .chapter-heading h2{font-size:22px}
 :root[data-design=faris] .chapter-bulk-trigger{font-size:11px}
 :root[data-design=faris] .chapter-state{font-size:11px;padding-inline:4px}
 :root[data-design=faris] dialog{padding-inline:16px}
 :root[data-design=faris] .auth-shell{padding-inline:16px}
 :root[data-design=faris] .auth-panel{padding-inline:18px}
 :root[data-design=faris] .auth-heading h1{font-size:25px}
}
@media(min-width:700px){
 :root[data-design=faris] .page-shell{padding-inline:34px;padding-top:32px}
 :root[data-design=faris] .hero-copy{margin:-32px -34px 0;padding:155px 44px 38px;min-height:530px}
 :root[data-design=faris] .hero-copy h1{font-size:56px;max-width:76%}
 :root[data-design=faris] .hero-welcome{font-size:16px}
 :root[data-design=faris] .hero-description{font-size:17px;max-width:48%}
 :root[data-design=faris] .hero-actions{max-width:570px;margin-top:32px}
 :root[data-design=faris] .hero-actions>*{font-size:16px;min-height:56px}
 :root[data-design=faris] .hero-art{margin-top:24px}
 :root[data-design=faris] .aether-showcase-slide{grid-template-columns:145px minmax(0,1fr);gap:36px;padding:20px 25px}
 :root[data-design=faris] .aether-feature-copy h2{font-size:26px;max-width:25ch}
 :root[data-design=faris] .aether-feature-copy small{font-size:14px}
 :root[data-design=faris] .aether-feature-open{font-size:14px}
 :root[data-design=faris] .library-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}
 :root[data-design=faris] .library-card-title{font-size:16px;line-height:1.45}
 :root[data-design=faris] :is(.card-context,.library-card-meta,.library-card-progress small){font-size:12px}
 :root[data-design=faris] .library-list-view .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 :root[data-design=faris] .library-list-view .library-card-main{grid-template-columns:74px minmax(0,1fr);padding:18px}
 :root[data-design=faris] :is(.screen-heading h1,.library-head h1,.history-head h1){font-size:40px}
 :root[data-design=faris] .library-sort-control select{max-width:155px;font-size:16px}
 :root[data-design=faris] .detail-layout{gap:26px;align-items:start}
 :root[data-design=faris] .chapter-section{margin-top:0;padding:25px 20px}
 :root[data-design=faris] .detail-heading h1{font-size:34px}
 :root[data-design=faris] .settings-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
 :root[data-design=faris] .appearance-settings{grid-column:1/-1}
 :root[data-design=faris] dialog{border-radius:7px;padding:30px;max-height:min(calc(100svh - 40px),var(--dialog-vh,calc(100svh - 40px)))}
 :root[data-design=faris] .design-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 :root[data-design=faris] .story-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 :root[data-design=faris] .story-tile-copy h3{font-size:21px}
 :root[data-design=faris] .history-card-main{padding:20px;gap:20px}
 :root[data-design=faris] .history-card-main>.library-cover-wrap{width:75px}
 :root[data-design=faris] .history-card-copy strong{font-size:26px}
}
@media(min-width:820px){
 :root[data-design=faris] .auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:0 0;align-content:center;padding-block:40px;direction:ltr}
 :root[data-design=faris] .auth-toolbar{grid-column:1/-1;grid-row:1;direction:rtl;margin-bottom:30px}
 :root[data-design=faris] .auth-art{grid-column:1;grid-row:2;max-width:none;min-height:560px;height:100%;align-self:stretch;border:1px solid var(--faris-edge);border-inline-end:0;border-radius:7px 0 0 7px;background-position:38% center}
 :root[data-design=faris] .auth-art::after{background:linear-gradient(90deg,transparent 40%,var(--surface))}
 :root[data-design=faris] .auth-panel{grid-column:2;grid-row:2;direction:rtl;max-width:none;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:36px;border:1px solid var(--faris-edge);border-inline-end:0;border-radius:0 7px 7px 0}
}
@media(min-width:1100px){
 :root[data-design=faris] .hero-copy{min-height:620px;padding-inline:70px}
 :root[data-design=faris] .hero-copy h1{font-size:66px}
 :root[data-design=faris] .aether-showcase-slide{grid-template-columns:155px minmax(0,1fr);padding-inline:80px}
 :root[data-design=faris] .library-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
 :root[data-design=faris] .detail-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px}
}
@media(max-width:359px){
 :root[data-design=faris] .reading-dock{grid-template-columns:44px minmax(0,1fr) 44px;gap:5px 10px;padding:12px}
 :root[data-design=faris] .reading-dock-cover{width:44px;height:66px}
}
@media(min-width:700px){
 :root[data-design=faris] .reading-dock{grid-template-columns:60px minmax(0,1fr) 44px;padding:16px;gap:6px 16px}
 :root[data-design=faris] .reading-dock-cover{width:60px;height:90px}
 :root[data-design=faris] .reading-dock-copy h2{font-size:18px}
}
@media(max-height:540px) and (max-width:819px){
 :root[data-design=faris] .auth-shell{max-width:560px;padding-top:calc(12px + env(safe-area-inset-top))}
 :root[data-design=faris] .auth-art{display:none}
 :root[data-design=faris] .auth-panel{border-top:1px solid var(--faris-edge);border-radius:5px}
 :root[data-design=faris] .auth-toolbar{margin-bottom:14px}
}
@media(hover:hover){
 :root[data-design=faris] :is(.primary-button,.secondary-button):hover{transform:translateY(-1px)}
 :root[data-design=faris] .chapter-row:not(.is-current):hover{background:var(--surface-2)}
 :root[data-design=faris] .source-directory-links a:hover{border-color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){:root[data-design=faris] :is(a,button,.reader-topbar,.library-cover-wrap img){transition:none!important;scroll-behavior:auto}}
:root[data-design=faris][data-motion=reduced] :is(a,button,.reader-topbar,.library-cover-wrap img){transition:none!important;scroll-behavior:auto}