.pet-widget,.docs-page .pet-widget{width:220px;height:153px;right:4px;bottom:7px}
.knowledge-heading{align-items:center;gap:16px}
.knowledge-heading>div{display:flex;align-items:baseline;gap:16px;min-width:0}
.collection-count{font:400 15px 'Fraunces Variable',serif;color:var(--muted)}
.subject-view-toggle{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 13px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:13px var(--sans);cursor:pointer;white-space:nowrap;flex:none}
.subject-view-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.subject-view-toggle:hover,.subject-view-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.subject-view-toggle:focus-visible,.subject-nav:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.subject-browser{position:relative;min-width:0;--entry-shift:10px;--card-pink:#efb4ce;--card-blue:#4768e8}
.subject-stage{position:relative;min-width:0}
.subject-list{display:flex;flex-direction:column;gap:24px;padding:0}
.subject-row{display:block;position:relative;border:0;background:none;padding:0;min-width:0;min-height:0;overflow:visible;isolation:isolate;transition:none}
.subject-row:hover{background:none;border-color:transparent}
.subject-row:after{display:none}
.subject-surface{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) auto;gap:12px;min-height:280px;padding:30px 40px 32px;border:1px solid transparent;border-radius:7px;background:var(--paper);overflow:hidden;isolation:isolate;container-type:inline-size;transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .4s;box-shadow:0 8px 28px #0000000b}
/* A static gradient veil and a fine, masked perimeter; no animated filters. */
.subject-surface:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,#231d37a6,#101c2bb3 56%,#20334cad),linear-gradient(0deg,#10121d66,transparent 65%);opacity:1;pointer-events:none;transition:opacity .5s}
.subject-surface:after{content:'';position:absolute;inset:0;z-index:5;padding:1px;border-radius:inherit;background:linear-gradient(115deg,var(--card-pink),#e9d8ec70 30%,#7c96d91a 52%,var(--card-blue));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;pointer-events:none;opacity:.7;transition:opacity .4s}
.subject-media{position:absolute;inset:0;display:block;min-width:0;height:auto;margin:0;z-index:0;overflow:hidden;pointer-events:none}
.subject-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--subject-focal,50% 50%);opacity:.88;transform:scale(1.015);transition:opacity .6s,transform .8s cubic-bezier(.2,.75,.25,1)}
.subject-cover-empty{background:linear-gradient(115deg,color-mix(in srgb,var(--card-pink) 24%,var(--panel-bg)),var(--panel-bg) 48%,color-mix(in srgb,var(--card-blue) 28%,var(--paper)))}
.subject-intro{position:relative;grid-column:1;grid-row:1/3;align-self:stretch;z-index:3;display:grid;grid-template-columns:18% minmax(0,1fr) 18%;align-items:center;gap:16px;padding:12px 0;color:#fcf9f4;text-align:center;transition:opacity .25s,transform .4s;pointer-events:none}
.subject-index{grid-column:1;justify-self:start;font:400 clamp(72px,9cqw,128px)/1 'Lexend',sans-serif;letter-spacing:-.085em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.55}
.subject-tagline{grid-column:2;min-width:0;padding-block:.08em;font:400 clamp(38px,6.5cqw,82px)/1.02 'Geist Serif','LXGW WenKai',serif;letter-spacing:-.025em;opacity:.74;overflow-wrap:anywhere;text-wrap:balance;font-synthesis:none}
.subject-watermark{position:relative;grid-column:1;grid-row:1;justify-self:end;align-self:center;display:flex;align-items:center;justify-content:flex-end;min-width:0;width:76%;padding:0 2px;font:400 clamp(68px,10cqw,138px)/1 'Fraunces Variable',serif;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(18px);transition:clip-path .65s cubic-bezier(.2,.75,.25,1),opacity .45s,transform .65s;pointer-events:none;z-index:2}
.subject-watermark-ink{display:block;flex:none;color:var(--ink);transform:scale(var(--watermark-scale,1));transform-origin:right center}
.subject-copy{position:relative;grid-column:1;grid-row:2;align-self:end;z-index:3;max-width:78%;min-width:0;padding:0;opacity:0;transform:translateY(9px);transition:opacity .4s,transform .5s cubic-bezier(.2,.75,.25,1)}
.subject-copy h3{font:400 36px/1.6 'Swei Spring SC',var(--sans);margin:0;overflow-wrap:anywhere;text-wrap:pretty}
.subject-copy h3>span{padding:0 .04em;background:linear-gradient(90deg,var(--card-pink),var(--card-blue)) 0 88% / 100% .23em no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.subject-row:is(:hover,:focus-visible) .subject-surface{transform:translateX(var(--entry-shift));box-shadow:0 12px 32px #00000012}
.subject-row:is(:hover,:focus-visible) .subject-surface:before{opacity:.09}
.subject-row:is(:hover,:focus-visible) .subject-surface:after{opacity:1}
.subject-row:is(:hover,:focus-visible) .subject-cover{opacity:.22;transform:scale(1)}
.subject-row:is(:hover,:focus-visible) .subject-intro{opacity:0;transform:translateY(-7px)}
.subject-row:is(:hover,:focus-visible) .subject-copy{opacity:1;transform:none}
.subject-row:is(:hover,:focus-visible) .subject-watermark{opacity:.26;clip-path:inset(0);transform:none}
html[data-theme=dark] .subject-row:is(:hover,:focus-visible) .subject-watermark{opacity:.3}
html[data-theme=dark] .subject-row:is(:hover,:focus-visible) .subject-cover{opacity:.28}
.subject-row:focus-visible{outline:0}.subject-row:focus-visible .subject-surface{outline:2px solid var(--card-pink);outline-offset:4px}
.subject-nav[hidden],.subject-status[hidden],.subject-row[hidden]{display:none}
.subject-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;z-index:10;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font:22px var(--mono);cursor:pointer;display:grid;place-items:center}
.subject-nav:hover{color:var(--accent);border-color:var(--accent)}.subject-prev{left:0}.subject-next{right:0}
.subject-status{text-align:center;font:12px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);margin:4px 0 0;min-height:22px}
/* The grid grows with backend titles; only the active card receives input. */
.subject-browser[data-view=stack] .subject-list{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:stretch;min-height:420px;padding:32px 0 48px;overflow:hidden;isolation:isolate;touch-action:pan-y}
.subject-browser[data-view=stack] .subject-row{grid-area:1/1;position:relative;width:min(960px,calc(100% - 160px));height:100%;transform-origin:center 80%;transform:none;transition:transform .48s cubic-bezier(.2,.75,.25,1),opacity .35s;z-index:5}
.subject-browser[data-view=stack] .subject-surface{height:100%;min-height:340px}
.subject-browser[data-view=stack] .subject-row:not([data-position="0"]){pointer-events:none}
.subject-browser[data-view=stack] .subject-row[data-position="1"]{transform:translate(48px,10px) scale(.93) rotate(2.5deg);opacity:.65;z-index:3}
.subject-browser[data-view=stack] .subject-row[data-position="-1"]{transform:translate(-48px,10px) scale(.93) rotate(-2.5deg);opacity:.65;z-index:3}
.subject-browser[data-view=stack] .subject-row[data-position="2"]{transform:translate(86px,20px) scale(.86) rotate(5deg);opacity:.3;z-index:1}
.subject-browser[data-view=stack] .subject-row[data-position="-2"]{transform:translate(-86px,20px) scale(.86) rotate(-5deg);opacity:.3;z-index:1}
body.has-page-background{position:relative;isolation:isolate}.page-background{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--page-bg-image);background-size:var(--page-bg-fit,cover);background-repeat:var(--page-bg-repeat,no-repeat);background-position:center;opacity:var(--page-bg-opacity,.12)}
.has-page-background .reading-main,.has-page-background .category-main,.has-page-background .about{background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:0 0 0 20px color-mix(in srgb,var(--paper) 92%,transparent)}
.article-doc.no-series{display:block;max-width:960px}.article-doc.no-series .reading-main{margin-inline:auto}
@media(max-width:900px){.subject-surface{min-height:250px;padding:26px 30px}.subject-copy h3{font-size:31px}.subject-tagline{font-size:clamp(32px,6.2cqw,55px)}.subject-index{font-size:clamp(56px,9cqw,88px)}.subject-browser[data-view=stack] .subject-row{width:calc(100% - 128px)}}
@media(max-width:800px){.pet-widget,.docs-page .pet-widget{width:185px;height:129px}}
@media(max-width:600px){
 .subject-browser{--entry-shift:0px}
 .subject-list{gap:18px}
 .subject-surface{min-height:230px;grid-template-rows:minmax(90px,1fr) auto;gap:14px;padding:22px}
 .subject-copy{max-width:100%}.subject-copy h3{font-size:27px}
 .subject-intro{display:none}
 .subject-watermark{width:100%;font-size:clamp(56px,16cqw,90px)}
 .subject-browser[data-view=stack] .subject-list{min-height:350px;padding:24px 0 40px}
 .subject-browser[data-view=stack] .subject-row{width:calc(100% - 76px)}
 .subject-browser[data-view=stack] .subject-surface{min-height:286px;padding:22px 18px}
 .subject-browser[data-view=stack] .subject-copy h3{font-size:25px}
 .subject-browser[data-view=stack] .subject-row[data-position="1"]{transform:translate(22px,8px) scale(.93) rotate(2.5deg)}
 .subject-browser[data-view=stack] .subject-row[data-position="-1"]{transform:translate(-22px,8px) scale(.93) rotate(-2.5deg)}
 .subject-browser[data-view=stack] .subject-row[data-position="2"]{transform:translate(36px,16px) scale(.86) rotate(5deg)}
 .subject-browser[data-view=stack] .subject-row[data-position="-2"]{transform:translate(-36px,16px) scale(.86) rotate(-5deg)}
 .subject-nav{width:30px;height:44px;font-size:19px}
 .subject-view-toggle{font-size:12px;padding:7px 10px;min-height:38px}
 .pet-widget{width:172px;height:120px;right:0;bottom:3px}.docs-page .pet-widget{width:145px;height:101px}
 .has-page-background .reading-main,.has-page-background .category-main,.has-page-background .about{box-shadow:0 0 0 12px color-mix(in srgb,var(--paper) 92%,transparent)}
 .topbar .brand{font-size:clamp(17px,4.8vw,20px);letter-spacing:-.6px;white-space:nowrap}.top-inner{column-gap:14px}.topbar nav{gap:14px}
}
/* Touch screens expose the destination directly, without a hover-dependent second tap. */
@media(max-width:600px),(hover:none),(pointer:coarse){
 .subject-browser{--entry-shift:0px}.subject-intro{opacity:0}
 .subject-row .subject-copy{opacity:1;transform:none}
 .subject-row .subject-watermark,html[data-theme=dark] .subject-row .subject-watermark{opacity:.25;clip-path:none;transform:none}
 .subject-row .subject-cover,html[data-theme=dark] .subject-row .subject-cover{opacity:.25;transform:none}
 .subject-row .subject-surface:before{opacity:.09}
 .subject-row:is(:hover,:focus-visible) .subject-surface{transform:none}
}
@media(max-width:365px){.topbar .brand{font-size:16px}.top-inner{column-gap:8px}.topbar nav{gap:8px}.header-search{padding:4px}.knowledge-heading{gap:10px}.knowledge-heading>div{gap:9px}.knowledge-heading h2{font-size:25px;white-space:nowrap}.knowledge-heading h2:before{font-size:18px;margin-right:10px}.subject-view-toggle{font-size:11px;padding:7px 8px;gap:6px}.subject-surface{padding:20px}.subject-copy h3{font-size:25px}.subject-browser[data-view=stack] .subject-surface{padding:20px 14px}.subject-browser[data-view=stack] .subject-copy h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.subject-surface,.subject-cover,.subject-watermark,.subject-row,.subject-intro,.subject-copy,.subject-surface:before,.subject-surface:after{transition:none!important}.subject-row:is(:hover,:focus-visible) .subject-surface{transform:none}}