/* Permanent public pages: reuse KOI marketing artwork, never recolour paper sections. */
.koi-public-library,.koi-public-about{--public-ink:#f3eee4;--public-muted:#c0c4c5;--public-line:rgb(222 211 193/.2);--public-red:#ce3340;--public-serif:Georgia,'Times New Roman',serif;background-color:#090d10}
.koi-public-library{background-image:linear-gradient(180deg,rgb(5 9 12/.66),rgb(5 9 12/.84) 650px,rgb(5 9 12/.91)),url('/static/src/marketing/learning-bg.png');background-position:center top;background-size:100% 100%,auto 1200px;background-repeat:no-repeat,repeat-y}
.koi-public-library .marketing-header,.koi-public-about .marketing-header{background:rgb(7 11 14/.92);border-bottom:1px solid var(--public-line)}
.koi-public-library .marketing-footer,.koi-public-about .marketing-footer{background:linear-gradient(90deg,rgb(6 10 12/.93),rgb(6 10 12/.8)),url('/static/src/marketing/beyond-main.png') center 70%/cover;border-top:1px solid var(--public-line)}

/* Catalogue and long reading pages. */
.library-wrap{max-width:1240px;padding-top:48px;padding-bottom:88px}
.library-wrap>nav:first-child{font-size:13px;color:#bfc0bd;line-height:1.8}
.library-wrap>nav:first-child a{color:#d9d2c5;text-decoration:none;border-bottom:1px solid rgb(217 210 197/.3)}
.library-intro{max-width:920px;margin:42px 0 34px}
.library-wrap h1{font-family:var(--public-serif);font-size:clamp(38px,5.4vw,72px);font-weight:400;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;color:var(--public-ink);text-shadow:0 2px 8px #000,0 0 40px rgb(0 0 0/.85)}
.library-wrap h2{font-family:var(--public-serif);font-weight:400;letter-spacing:-.025em;color:var(--public-ink)}
.library-intro>small{display:inline-block;color:#efa49a;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.library-intro p{max-width:780px;color:#e0dcd4;font-size:17px;line-height:1.8;text-shadow:0 1px 8px #000}
.library-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(140px,.4fr) minmax(160px,.5fr) auto auto;gap:18px;align-items:end;padding:26px 28px;border:1px solid var(--public-line);border-top-color:rgb(231 207 176/.33);border-radius:16px;background:linear-gradient(120deg,rgb(25 30 33/.96),rgb(10 16 20/.95));box-shadow:0 16px 40px rgb(0 0 0/.18)}
.library-filters label{min-width:0;font-size:12px;color:#d3ccc1;letter-spacing:.035em;gap:9px}
.library-filters input,.library-filters select{box-sizing:border-box;width:100%;height:48px;border:1px solid #535b60;background:#0d151a;border-radius:8px;color:#f3eee4;font-size:14px;letter-spacing:normal;padding:0 14px}
.library-filters input::placeholder{color:#9b9fa1}
.library-filters .marketing-button{min-height:48px;box-sizing:border-box;border-radius:8px;font-size:14px;font-weight:600;padding:10px 24px;box-shadow:0 5px 20px rgb(153 19 32/.2)}
.library-filters>a{font-size:13px;padding-bottom:12px;color:#c8c4be;text-decoration:none}
.library-filters+p{margin:26px 2px 18px;color:#c5c4be;font-size:13px;letter-spacing:.03em}
.library-grid{gap:22px}
.library-card{position:relative;display:flex;flex-direction:column;min-height:290px;padding:30px 28px 28px;border-color:rgb(202 192 175/.24);border-radius:16px;background:linear-gradient(145deg,rgb(28 33 37/.97),rgb(10 17 22/.97));box-shadow:0 14px 35px rgb(0 0 0/.2),inset 0 1px rgb(255 255 255/.035);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.library-card::before{content:'';height:2px;width:34px;background:#c63b43;margin-bottom:22px}
.library-card small{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#db9d92;line-height:1.6}
.library-card h2{margin:16px 0;font-size:clamp(24px,2.1vw,30px);line-height:1.22;overflow-wrap:anywhere}
.library-card h2 a{color:#f3eee4;text-decoration:none}
.library-card h2 a:hover{color:#f4c7ba}
.library-card p{margin:0;color:#bfc4c7;font-size:14px;line-height:1.85}
.library-card:hover,.library-card:focus-within{border-color:#ab6461;box-shadow:0 20px 45px rgb(0 0 0/.3),inset 0 1px rgb(255 255 255/.05)}
.library-pagination{gap:16px;align-items:center;margin-top:40px;color:#c5bfb5;font-size:14px}
.library-pagination a{display:inline-flex;min-height:44px;align-items:center;padding:0 20px;border:1px solid var(--public-line);border-radius:8px;background:#11191fe6;text-decoration:none;color:#ece4d8}
.library-reading-controls{padding:16px 20px;border:1px solid var(--public-line);border-radius:10px;background:rgb(13 20 25/.86);font-size:13px;color:#d7d1c7}
.library-layout{gap:28px;align-items:start}
.library-answer{padding:clamp(22px,3vw,44px);border:1px solid var(--public-line);border-radius:16px;background:linear-gradient(145deg,rgb(20 27 32/.97),rgb(9 16 21/.96));box-shadow:0 18px 50px rgb(0 0 0/.2);color:#e4dfd6}
.library-answer h2{margin-top:0;margin-bottom:22px;font-size:clamp(26px,3vw,35px)}
.library-answer section+section{padding-top:24px;border-top:1px solid rgb(220 207 185/.14)}
.library-answer p,.library-answer li{color:#d9d7d0;line-height:1.9}
.library-answer>details{margin-bottom:30px;padding:16px 18px;background:#ffffff04;border:1px solid var(--public-line);border-radius:8px}
.library-answer summary{cursor:pointer;color:#d8b9a6}
.library-toc{padding:24px 20px;border-top:2px solid #b23a44;background:rgb(11 18 23/.85);border-radius:0 0 12px 12px;font-size:13px}
.library-toc h2{font-size:24px;margin-top:0}.library-toc a{color:#c9c6be;text-decoration:none;line-height:1.7}
.library-unit{border-left-color:#b3464b;background:rgb(255 255 255/.025);padding:12px 20px;border-radius:0 8px 8px 0}
.library-table th{background:#ffffff09;color:#f1dfca}.library-table td,.library-table th{border-color:rgb(220 207 185/.2)}
.library-next{margin-top:44px;padding:clamp(25px,4vw,44px);border:1px solid var(--public-line);border-radius:16px;background:linear-gradient(90deg,rgb(7 13 17/.94),rgb(7 13 17/.68)),url('/static/src/marketing/pricing-banner.png') center/cover}
.library-next h2{margin-top:0}.library-next .marketing-button{margin:12px 18px 0 0}

/* Dark about sections get the existing marketing landscapes. Beige story/cards stay untouched. */
.public-about{background:transparent}
.public-about :is(.route.wrap,.sensei.wrap,.dictionary.wrap,.access.wrap){max-width:none;width:auto;padding-inline:max(24px,calc((100% - 1180px)/2));background-position:center;background-size:cover}
.public-about .hero{background:linear-gradient(90deg,rgb(5 9 12/.93),rgb(5 9 12/.68) 55%,rgb(5 9 12/.28)),url('/static/src/marketing/hero-bg1.png') center/cover}
.public-about .route{background-image:linear-gradient(100deg,rgb(6 11 14/.94),rgb(6 11 14/.71)),url('/static/src/marketing/learning-bg.png')}
.public-about .sensei{background-image:linear-gradient(110deg,rgb(5 10 14/.94),rgb(5 10 14/.76)),url('/static/src/marketing/beyond-main.png')}
.public-about .dictionary{background-image:linear-gradient(100deg,rgb(6 11 15/.94),rgb(6 11 15/.74)),url('/static/src/marketing/learning-courses.png')}
.public-about .progress-section{background:linear-gradient(100deg,rgb(7 14 18/.92),rgb(7 14 18/.78)),url('/static/src/marketing/learning-progress.png') center/cover}
.public-about .access{background-image:linear-gradient(100deg,rgb(6 11 15/.92),rgb(6 11 15/.73)),url('/static/src/marketing/pricing-main.png')}
.public-about .closing{border-top:1px solid var(--public-line);background:linear-gradient(100deg,rgb(6 11 15/.91),rgb(6 11 15/.7)),url('/static/src/marketing/beyond-main.png') center/cover}
.public-about :is(.hero,.route,.sensei,.dictionary,.progress-section,.access,.closing) :is(h1,h2,h3){font-family:var(--public-serif);font-weight:400;letter-spacing:-.035em;text-shadow:0 2px 12px #0009}
.public-about :is(.hero,.route,.sensei,.dictionary,.progress-section,.access,.closing) p{color:#cbd0d0}
.public-about :is(.hero,.route,.sensei,.dictionary,.progress-section,.access,.closing) .eyebrow{color:#e49b8c;letter-spacing:.2em}
.public-about .pill{background:#c92d38;color:#fff;border:1px solid #e04c55;box-shadow:0 8px 25px rgb(80 6 16/.28);border-radius:8px;transition:background .2s ease,box-shadow .2s ease}
.public-about .pill:hover{background:#b82430;box-shadow:0 10px 30px rgb(80 6 16/.4)}
.public-about .tariffs{gap:22px}
.public-about .tariffs article{border:1px solid rgb(216 197 169/.28);border-radius:14px;padding:30px 28px;background:linear-gradient(180deg,rgb(8 14 18/.68),rgb(8 14 18/.94)),url('/static/src/marketing/pricing-free.png') center/cover;box-shadow:0 15px 35px #0003}
.public-about .tariffs article:nth-child(2){border-color:#a45050;background-image:linear-gradient(180deg,rgb(8 14 18/.58),rgb(8 14 18/.94)),url('/static/src/marketing/pricing-base.png')}
.public-about .tariffs article:nth-child(3){background-image:linear-gradient(180deg,rgb(8 14 18/.62),rgb(8 14 18/.94)),url('/static/src/marketing/pricing-pro.png')}
.public-about .tariffs h3{font-size:30px;letter-spacing:-.025em}.public-about .tariffs span{color:#efb59c}
.public-about .faq{margin-top:38px}.public-about .faq details{margin:12px 0;padding:0 24px;border:1px solid var(--public-line);border-radius:10px;background:rgb(9 17 22/.88)}
.public-about .faq summary{padding-block:22px;font-size:16px;color:#ece2d4;cursor:pointer}.public-about .faq details[open]{border-color:#a65557}.public-about .faq details p{padding-bottom:12px}
.public-about :is(a,button,summary):focus-visible{outline:3px solid #e6b77b;outline-offset:5px}
@media(hover:hover){.library-card:hover{transform:translateY(-3px)}}
@media(max-width:1050px){.library-filters{grid-template-columns:minmax(200px,1fr) 1fr 1fr}.library-filters>label:first-child{grid-column:1/-1}.library-filters .marketing-button{grid-column:1/2}.library-filters>a{align-self:center;padding:0}.public-about .tariffs article{padding:24px}}
@media(max-width:800px){.library-wrap{padding-top:28px}.library-intro{margin-top:30px}.library-wrap h1{font-size:clamp(36px,7vw,54px)}.library-answer{padding:24px}.public-about :is(.route.wrap,.sensei.wrap,.dictionary.wrap,.access.wrap){padding-inline:24px}}
@media(max-width:560px){.library-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:20px;gap:16px 12px}.library-filters>label:first-child{grid-column:1/-1}.library-filters .marketing-button{grid-column:auto}.library-filters>a{justify-self:center}.library-card{padding:24px;min-height:0}.library-card h2{font-size:27px}.library-answer{padding:22px 18px}.library-intro p{font-size:15px}.library-wrap h1{font-size:38px}.library-next{padding:25px 22px}.library-next>a{display:inline-flex;margin-top:14px}.public-about .tariffs article{display:block}.public-about .tariffs span{display:block;margin-bottom:14px}.public-about .tariffs h3{margin-bottom:18px}.public-about .tariffs p{margin:0}.public-about .faq details{padding-inline:18px}.public-about .hero h1{font-size:clamp(46px,12.5vw,66px)}.public-about .hero-line{white-space:normal}}
@media(prefers-reduced-motion:reduce){.library-card,.public-about .pill{transition:none}.library-card:hover{transform:none}}

/* Whole-card links retain native keyboard/context-menu/open-in-new-tab behaviour. */
.library-card h2 a::after,.public-plan-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.library-wrap>nav:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.library-wrap>nav:first-child a{display:inline-flex;align-items:center;min-height:30px;box-sizing:border-box;padding:4px 12px;border:1px solid rgb(216 197 169/.25);border-radius:7px;background:rgb(16 24 30/.8);color:#e1d8ca}
.library-wrap>nav:first-child a:hover{border-color:#b8796a;background:#24272d}
.library-card:focus-within,.public-about .tariffs article:focus-within{outline:2px solid #e7b785;outline-offset:4px}
.library-card h2 a:focus-visible,.public-plan-link:focus-visible{outline:none}
.public-about .tariffs article{position:relative;transition:border-color .2s ease,box-shadow .2s ease}
.public-about .tariffs article:hover{border-color:#d18d7b;box-shadow:0 18px 40px #0006}
.public-about .public-plan-link{color:inherit;text-decoration:none}

/* A calm, single-column reading canvas with navigation above the text. */
.library-layout{display:block;width:100%}
.library-answer{box-sizing:border-box;width:100%}
.library-answer section{scroll-margin-top:110px}
.library-jump{display:inline-flex;align-items:center;gap:22px;min-height:46px;padding:8px 20px;border:1px solid #a66b60;border-radius:8px;background:linear-gradient(120deg,#472229b8,#151b20eb);font-size:14px;text-decoration:none!important;color:#f3e7d9!important;box-shadow:0 8px 22px #0003}
.library-jump:hover{border-color:#e6ae95;background:#49242be8}
.library-reading-controls{gap:18px 28px;align-items:center;padding:20px 24px}
.library-controls-caption{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#beb6a9;margin-right:auto}
.library-switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;min-height:36px;color:#eee3d4;font-size:14px;user-select:none}
.library-switch input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.library-switch-track{display:inline-block;position:relative;width:38px;height:22px;flex:0 0 38px;background:#333d43;border:1px solid #62696d;border-radius:20px;transition:background .2s ease,border-color .2s ease}
.library-switch-track::before{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#c8ccd0;transition:transform .2s ease,background .2s ease;box-shadow:0 1px 4px #0006}
.library-switch input:checked+.library-switch-track{background:#9e2935;border-color:#e3686d}
.library-switch input:checked+.library-switch-track::before{transform:translateX(16px);background:#fff1de}
.library-switch input:focus-visible+.library-switch-track{outline:3px solid #e6b77b;outline-offset:4px}
.library-toc{margin:0 0 28px;padding:26px 28px;border:1px solid var(--public-line);border-top:2px solid #ae3c47;border-radius:12px;background:linear-gradient(120deg,#182127ed,#0b1318f0)}
.library-toc h2{font-size:26px;margin:0 0 20px}
.library-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;list-style:none;counter-reset:contents;margin:0;padding:0}
.library-toc li{counter-increment:contents;min-width:0}
.library-toc a{display:flex;align-items:baseline;gap:14px;margin:0;padding:11px 14px;min-height:24px;border:1px solid transparent;border-radius:8px;color:#e2d9cc;font-size:14px;text-decoration:none}
.library-toc a::before{content:counter(contents,decimal-leading-zero);font-size:11px;letter-spacing:.08em;color:#d68b7e;flex-shrink:0}
.library-toc a:hover{border-color:#795451;background:#ffffff05}

/* Related reading and final actions use proper cards/buttons instead of bare links. */
.library-related{margin-top:42px}
.library-related h2{font-size:34px;margin:0 0 24px}
.library-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.library-related-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:104px;padding:24px 58px 24px 24px;border:1px solid var(--public-line);border-radius:12px;background:linear-gradient(140deg,#20282ceb,#0d161bf2);text-decoration:none;color:#efe7d9!important;transition:border-color .2s ease,background .2s ease}
.library-related-card small{color:#d28f82;font:10px/1.6 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.library-related-card>span:not(.library-related-arrow){font-family:var(--public-serif);font-size:24px;line-height:1.3}
.library-related-arrow{position:absolute;right:20px;top:24px;color:#e9b49b;font-size:22px}
.library-related-card:hover{border-color:#b77366;background:#20292ff5}
.library-next-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.library-next .library-next-actions a{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;box-sizing:border-box;padding:10px 24px;margin:0;border-radius:8px;text-decoration:none;font-size:14px}
.library-next .marketing-button--quiet{background:#101920b8;border-color:#687176;color:#f1e6d5}

/* Native disclosure plus an animated height enhancement in public_premium.js. */
.public-about .faq summary{display:flex;align-items:center;justify-content:space-between;gap:22px;list-style:none;padding-block:24px;font-weight:500;line-height:1.6}
.public-about .faq summary::-webkit-details-marker{display:none}
.public-about .faq summary::after{content:'+';display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:1px solid #8b615b;border-radius:50%;color:#efbc9e;font-size:22px;font-weight:300;transition:transform .28s ease,background .28s ease}
.public-about .faq details[open] summary::after{transform:rotate(45deg);background:#69313a66}
.public-about .faq details p{max-width:880px;padding:4px 48px 22px 0;margin:0;color:#c8cecf;font-size:15px;line-height:1.85}
@media(max-width:650px){.library-controls-caption{flex-basis:100%;margin-right:0}.library-reading-controls{padding:18px 20px;gap:12px 24px}.library-toc{padding:22px 18px}.library-toc ol{grid-template-columns:1fr;gap:6px}.library-related-grid{grid-template-columns:1fr}.library-next-actions{flex-direction:column}.library-next .library-next-actions a{width:100%;gap:14px}.public-about .faq summary{font-size:15px;padding-block:20px}.public-about .faq details p{padding-right:0}.library-related-card>span:not(.library-related-arrow){font-size:23px}}
@media(prefers-reduced-motion:reduce){.library-switch-track,.library-switch-track::before,.public-about .faq summary::after,.library-related-card,.public-about .tariffs article{transition:none}}

/* Enhanced select panels; native selects remain the no-JS fallback and form values. */
.library-filters .library-native-select{display:none}
.library-picker{position:relative;min-width:0}
.library-picker-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:48px;box-sizing:border-box;padding:0 14px;border:1px solid #535b60;border-radius:8px;background:#0d151a;color:#f3eee4;font:14px system-ui,sans-serif;text-align:left;cursor:pointer}
.library-picker-trigger::after{content:'';width:7px;height:7px;flex:0 0 7px;border-right:1px solid #d2ab92;border-bottom:1px solid #d2ab92;transform:rotate(45deg);transition:transform .2s ease}
.library-picker.is-open .library-picker-trigger{border-color:#c58c76}.library-picker.is-open .library-picker-trigger::after{transform:rotate(225deg)}
.library-picker-list{position:absolute;z-index:15;top:calc(100% + 8px);left:0;right:0;min-width:160px;max-height:290px;overflow-y:auto;padding:7px;box-sizing:border-box;background:linear-gradient(140deg,#20282d,#0e171d);border:1px solid #85605a;border-radius:10px;box-shadow:0 18px 40px #0009;opacity:0;visibility:hidden;transform:translateY(-7px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.library-picker.is-open .library-picker-list{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.library-picker-list button{display:block;width:100%;border:1px solid transparent;border-radius:6px;background:transparent;color:#dcd5cb;padding:12px;text-align:left;font:14px system-ui,sans-serif;cursor:pointer}
.library-picker-list button[aria-selected='true']{background:#6d2c3466;border-color:#a65e5d;color:#fff0dc}
.library-picker-list button:hover,.library-picker-list button:focus-visible{background:#ffffff0c;color:white;outline:1px solid #d3a383;outline-offset:-1px}

/* Answers use a reserved adjacent surface; opening never stretches the landscape. */
.public-about .faq.faq-enhanced{position:relative;min-height:310px;padding-right:48%;box-sizing:border-box}
.public-about .faq-enhanced details>p{display:none}
.public-about .faq-enhanced details{margin:0 0 12px}
.public-about .faq-answer-panel{position:absolute;inset:0 0 0 auto;width:44%;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:28px;border:1px solid #85605a;border-radius:14px;background:linear-gradient(135deg,#263037fa,#10191ff7);box-shadow:0 18px 50px #0005}
.public-about .faq-answer-panel small{font-size:10px;letter-spacing:.17em;color:#d99986}
.public-about .faq-answer-panel h3{font-family:var(--public-serif);font-size:27px;line-height:1.25;margin:18px 0;color:#f3e7d5}
.public-about .faq-answer-panel p{margin:0 0 14px;font-size:15px;line-height:1.85;color:#ced1cd}
.public-about .faq-answer-panel>div{opacity:.55;transform:translateY(6px);transition:opacity .23s ease,transform .23s ease}
.public-about .faq-answer-panel.is-answer>div{opacity:1;transform:translateY(0)}
@media(max-width:850px){.public-about .faq.faq-enhanced{padding-right:0;padding-bottom:282px;min-height:0}.public-about .faq-answer-panel{inset:auto 0 0;width:100%;height:260px;padding:24px}.public-about .faq-answer-panel h3{font-size:25px;margin-top:14px}.library-picker-list{max-height:240px;min-width:0}}
@media(prefers-reduced-motion:reduce){.library-picker-list,.library-picker-trigger::after,.public-about .faq-answer-panel>div{transition:none;transform:none}}