@property --head-k{syntax:"<number>";inherits:true;initial-value:0}
@property --head-shadow{syntax:"<number>";inherits:true;initial-value:0}
@property --sheet-ls{syntax:"<length>";inherits:true;initial-value:0px}
/* Scope prototype header rules so the shared website header keeps its own styles. */
:root{--font-display:"Barlow Condensed","Noto Sans SC",sans-serif;--font-title:"Noto Sans SC","Microsoft YaHei UI",sans-serif;--font-body:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-synthesis:none;--site-bg:#060606;--site-ink:#f3f2ed;--site-line:rgba(255,255,255,.13);--site-gold:#d5a13c;--site-page:clamp(24px,4.7222vw,104px);--site-header:76px;font-family:var(--font-body);color:var(--site-ink);background:var(--site-bg);--directory-motion:720ms;--directory-motion-ease:cubic-bezier(.22,.61,.36,1);--content-motion-open:640ms;--content-motion-close:480ms;--content-motion-ease:cubic-bezier(.25,0,.05,1)}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #333;outline-offset:5px;outline-color:var(--site-gold)}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:10;background:white;padding:20px}.content-header{border-bottom:1px solid #c8c9c3;justify-content:space-between;position:fixed;z-index:30;top:0;left:0;width:100%;height:var(--site-header);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;margin:0;padding:0 var(--site-page);border:0;background:var(--site-bg);font-family:var(--font-body)}.content-header .brand{font-weight:800;justify-self:start;font-size:16px;line-height:24px;letter-spacing:.02em;color:var(--site-ink);white-space:nowrap}.content-header .brand span{font-size:13px;letter-spacing:.02em;margin-left:8px;font-weight:700}.content-header nav{display:flex;align-items:center;gap:44px;white-space:nowrap}.content-header nav a{gap:9px;align-items:center;border-bottom:2px solid transparent;display:block;position:relative;padding:0;border:0;font-size:14px;line-height:20px;font-weight:500;color:var(--site-ink);opacity:.6}.content-header nav a[aria-current=page]{border-color:#151714}.content-header nav small{font-size:11px;font-weight:normal;color:#60635c}main{max-width:1600px;margin:auto;padding:38px 4% 64px}.intro{justify-content:space-between;align-items:end;margin-bottom:28px;gap:30px;position:relative;display:block;text-align:center;margin:0 0 44px;padding:30px 0 38px;border-bottom:1px solid var(--site-line)}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:0 0 13px}.intro h1{font-family:var(--font-display);font-size:clamp(44px,4.1vw,64px);line-height:1.05;font-weight:800;letter-spacing:.02em;color:var(--site-ink);margin:0}.intro h1 span{display:block;font:17px var(--font-body);font-family:var(--font-body);font-size:clamp(18px,1.65vw,24px);font-weight:700;letter-spacing:.08em;line-height:1.5;margin-top:18px}.intro aside{display:block;max-width:none;color:#96978f;font-size:12px;line-height:1.9;margin-top:24px}.row{background:var(--tone);border-bottom:1px solid #0002;overflow:hidden}.row:nth-child(1){border-radius:4px 4px 0 0}.row-button{width:100%;display:grid;grid-template-columns:64px minmax(0,1.4fr) minmax(0,.75fr) 66px;align-items:center;gap:22px;text-align:left;background:transparent;border:0;padding:25px 30px;color:#11160d;min-height:128px}.number{align-self:start;margin-top:6px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #0003;border-radius:50%;font-size:13px}.row-title{font-size:clamp(28px,3.5vw,54px);line-height:1}.row-title small{display:block;font:13px var(--font-body);letter-spacing:1px;margin-top:10px}.row-meta{border-left:1px solid #0003;padding:7px 0 7px 25px;line-height:1.5;display:grid;gap:10px;font-size:11px}.row-meta span:last-child{opacity:.65}.toggle{width:46px;height:46px;border:1px solid #0004;border-radius:50%;display:grid;place-items:center;font-size:25px;transition:transform .4s,background .3s}.row-button:hover .toggle,.row.open .toggle{background:#151a10;color:white}.row.open .toggle{transform:rotate(45deg)}.preview{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:5px 118px 32px}.preview p{font-size:14px;line-height:1.7;max-width:460px;margin:0 0 12px}.preview p[lang]{font-size:12px;opacity:.7}.preview img{width:100%;height:190px;object-fit:contain;background:#0000000b}.read{display:inline-flex;gap:40px;align-items:center;background:#171a15;color:#f7f7ef;padding:15px 20px;font-size:11px;margin-top:12px}footer{padding:22px 0 30px;border-top:1px solid #c8c9c3;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1px;margin:0 var(--site-page);border-top-color:var(--site-line);color:#85877d}.back{font-size:12px;display:inline-block;margin:0 0 32px}.reading{max-width:780px;margin:55px auto}.reading h2{font:800 35px var(--font-display);margin:38px 0 12px}.reading h3{font-size:16px;margin:0 0 18px;font-weight:normal}.reading p{font-size:16px;line-height:1.9}.reading p[lang]{font-size:14px;color:#666b60}.draft{font-size:10px;letter-spacing:1px;color:#606658}.progress{position:fixed;top:0;left:0;height:3px;background:#596b3c;z-index:50;transform-origin:left;width:100%;transform:scaleX(0)}@media(max-width:800px){.content-header{height:auto;min-height:100px;flex-wrap:wrap;padding:20px 0;gap:16px}.content-header nav{gap:18px}.content-header .brand{font-size:20px}main{padding-top:30px}.intro aside{display:none}.intro h1{font-size:64px}.row-button{grid-template-columns:30px 1fr 34px;padding:22px 16px;gap:14px;min-height:108px}.number{width:26px;height:26px;font-size:10px}.row-meta{display:none}.toggle{width:32px;height:32px;font-size:20px}.row-title{font-size:32px}.row-title small{font-size:11px}.preview{padding:0 20px 25px 60px;grid-template-columns:1fr;gap:20px}.preview img{height:160px}footer{flex-direction:column}}
.sample-hero{padding:50px;background:#e4c561;border-radius:4px;color:#171b13}.sample-hero.technical{background:#c5cdb5}.sample-hero h1{font:700 clamp(28px,3.5vw,52px)/1.35 var(--font-title);max-width:900px;margin:22px 0}.lead{max-width:780px;font-size:17px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.hero-actions span{font-size:11px;opacity:.6}.article-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:65px;margin-top:55px}.toc{align-self:start;position:sticky;top:30px;font-size:12px}.toc a{display:flex;gap:15px;padding:14px 0;border-bottom:1px solid #c8c9c3;line-height:1.5;border-color:var(--site-line)}.toc a:hover,.inline-link:hover{text-decoration:underline}.toc span{color:#767c6b}.sample-body{max-width:850px}.sample-body section{margin-bottom:55px}.sample-body h2{font-size:26px;line-height:1.5;margin:12px 0 20px}.sample-body h3{font-size:16px}.sample-body p,.sample-body li{font-size:15px;line-height:1.95;color:#454b3e}.sample-body .eyebrow{font-size:10px;color:#6e7663}.sample-body li{margin-bottom:8px}.sample-body figure{margin:28px 0;background:#e3e5dd;padding:20px}.sample-body figure img{width:100%;height:300px;object-fit:contain}.sample-body figcaption{font-size:11px;color:#6b7161;line-height:1.8;padding-top:12px}.content-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.8}.content-table th,.content-table td{padding:16px;text-align:left;border-bottom:1px solid #c6cbbd}.content-table th{background:#e1e5da}.fact-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.fact-grid>div{border-top:1px solid #a9b397;padding-top:8px}.steps{padding-left:22px}.steps p{margin:4px 0 20px}.sample-body .related{background:#dce2cf;padding:28px}.sample-body .assessment{background:#1c2219;color:#f0f2e9;padding:30px}.assessment p,.assessment li,.assessment .eyebrow{color:#c8d0bc}.assessment .read{background:#e5c45f;color:#171b13}.assessment a{overflow-wrap:anywhere}.assessment .small-note{font-size:11px}.sample-body details{border-bottom:1px solid #bbc3b1;padding:18px 0}.sample-body summary{cursor:pointer;font-size:15px;line-height:1.8}.inline-link{text-decoration:underline}.end-back{padding-top:10px}@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:28px}.toc{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.toc .eyebrow{grid-column:1/-1}.sample-hero{padding:28px}.sample-body{max-width:none}}@media(max-width:540px){.fact-grid,.contact-grid{grid-template-columns:1fr}.sample-body h2{font-size:22px}.sample-body .assessment{padding:22px}.sample-body figure img{height:220px}.toc{grid-template-columns:1fr}.content-table th,.content-table td{padding:10px}.sample-hero h1{font-size:30px}}
/* Inline detail keeps the selected colour strip and surrounding directory in place. */.preview[hidden]{display:none}.load-error{color:#5c201a}
/* Three levels: category → article title → inline full article. */.category-block{background:var(--tone);color:#11150e;border-bottom:1px solid #0002}.category-heading{width:100%;display:grid;align-items:center;background:transparent;border:0;text-align:left;color:#171b13;padding-left:28px;padding-right:28px;grid-template-columns:104px minmax(0,1.4fr) minmax(140px,.55fr) 54px;gap:26px;min-height:142px;padding:26px 30px}.category-number{border-radius:50%;display:grid;place-items:center;align-self:start;margin-top:6px;width:38px;height:38px;background:#00000009;border:0;font-size:15px;font-weight:700;transition:background var(--directory-motion) var(--directory-motion-ease),color var(--directory-motion) var(--directory-motion-ease)}.category-heading strong{display:block;font:800 clamp(32px,3.6vw,58px)/.98 var(--font-display);max-width:780px}.category-heading small{display:block;font-size:15px;line-height:1.5;letter-spacing:0;margin-top:12px}.category-count{align-self:stretch;border-left:1px solid #0003;padding-left:26px;font-size:12px;color:#353b2c;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;line-height:1.5}.category-toggle{border:1px solid #0004;border-radius:50%;display:grid;place-items:center;width:46px;height:46px;position:relative;font-size:0;transition:background var(--directory-motion) var(--directory-motion-ease),color var(--directory-motion) var(--directory-motion-ease)}.category-heading:hover .category-toggle,.category-block.is-current .category-toggle{background:#171b13;color:white}.category-content{padding:0 24px 24px;color:#171b13;padding-top:18px;padding-bottom:24px}.category-content[hidden]{display:none}.category-content .row{border:1px solid #0002;border-bottom:0;border-radius:0;background:#ffffff30;transition:background .2s}.category-content .row:last-child{border-bottom:1px solid #0002}.category-content .row-button{grid-template-columns:36px minmax(0,1.4fr) minmax(120px,.65fr) minmax(140px,.55fr) 46px;gap:24px;min-height:154px;padding:22px 24px}.category-content .row-title{font-size:clamp(24px,2.1vw,36px)}.category-content .row-meta{display:flex;flex-direction:column;align-self:stretch;justify-content:center;gap:7px;border-left:1px solid #0003;padding:8px 0 8px 24px;font-size:11px}.category-content .row-title small{font-size:14px;line-height:1.6;letter-spacing:0;margin-top:10px}.category-content .row .toggle{font-size:22px;width:34px;height:34px;transition:transform .25s,background .25s}.category-content .preview{display:none}@media(max-width:650px){.category-heading{grid-template-columns:28px 1fr 32px;gap:12px;padding:20px 16px;min-height:96px}.category-count{display:none}.category-heading strong{font-size:25px}.category-heading small{font-size:12px}.category-number{width:25px;height:25px;font-size:10px}.category-toggle{width:30px;height:30px}.category-content{padding:0 12px 12px}.category-content .row-button{padding:16px 12px;grid-template-columns:24px 1fr 30px;gap:10px}.category-content .row-title{font-size:24px}.category-content .row-title small{font-size:12px}}
/* Homepage visual foundation: #060606, #f3f2ed, 76px header, 68px margin,
   Barlow Condensed 800 display type. Scoped to the independent content area. */
html,body{background:var(--site-bg);color:var(--site-ink)}
/* Match the website canvas while keeping native wheel, touchpad and keyboard scrolling. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.content-header nav a:hover,.content-header nav a[aria-current=page]{opacity:1}
.content-header nav a[aria-current=page]:after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:1px;background:var(--site-ink)}
.header-side{display:flex;align-items:center;gap:32px;justify-self:end;white-space:nowrap;font-size:13px}
.language-label{color:#a7a7a0}.header-contact{font-size:14px}.header-contact:hover{color:var(--site-gold)}
body>main{max-width:1760px;margin:0 auto;padding:calc(var(--site-header) + 52px) var(--site-page) 24px}
.intro .eyebrow{color:#8f9089;font-size:10px;letter-spacing:2px;margin-bottom:24px}.category-heading strong,.row-title{font-family:var(--font-display);letter-spacing:.02em}.category-heading small,.row-title small{font-family:var(--font-body)}.category-content .sample-body p,.category-content .sample-body li{color:#343b2d}.category-content .assessment p,.category-content .assessment li{color:#c8d0bc}.category-content button:focus-visible,.category-content a:focus-visible{outline-color:#171b13}
/* Static readable fallback retains the same header and dark outer canvas. */.article-layout>.sample-body{color:var(--site-ink)}.article-layout>.sample-body p,.article-layout>.sample-body li{color:#c1c7b7}.article-layout>.sample-body .related{color:#171b13}.article-layout>.sample-body .related p{color:#454b3e}
@media(min-width:1800px){.content-header nav{gap:54px}.content-header nav a,.header-contact{font-size:16px}.content-header .brand{font-size:18px}}
@media(max-width:900px){.content-header{gap:16px;padding:0 24px}.content-header .brand{font-size:14px}.content-header .brand span{display:none}.content-header nav{gap:24px}.header-side{gap:16px}.language-label{font-size:11px}}
@media(max-width:600px){:root{--site-header:96px}.content-header{grid-template-columns:1fr auto;grid-template-rows:48px 40px;gap:0;padding:0 20px}.content-header .brand{grid-column:1;grid-row:1}.content-header .brand span{display:inline;font-size:11px}.header-side{grid-column:2;grid-row:1}.content-header nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:36px}.content-header nav a{font-size:13px}.content-header nav a[aria-current=page]:after{bottom:-7px}body>main{padding-top:calc(var(--site-header) + 24px)}.intro{padding-top:16px;margin-bottom:24px;padding-bottom:24px}.intro h1{font-size:42px}.intro h1 span{font-size:18px}.intro aside{font-size:11px;margin-top:18px}.category-heading{padding-left:16px;padding-right:16px}.category-heading strong{font-size:24px}.header-side .header-contact{font-size:12px}}

/* User red-box target: category title strips, not the page intro or header. */.category-block:first-child{border-radius:0}
@media(max-width:700px){.category-heading{min-height:118px}.category-number{width:28px;height:28px;font-size:12px}.category-heading strong{overflow-wrap:anywhere}.category-heading small{margin-top:9px}.category-toggle{width:32px;height:32px}}
/* Confirmed row hierarchy: left title, right keyword. */.category-count strong{font:700 13px/1.5 var(--font-body);letter-spacing:0}.category-count small{font-size:10px;margin:0;letter-spacing:0;opacity:.65}.category-content .row-meta strong{font-size:13px;line-height:1.6}.category-content .row-meta>span:last-child{font-size:10px;opacity:.6}
@media(max-width:700px){.category-heading{grid-template-columns:26px minmax(0,1fr) 88px 28px;gap:10px;padding:20px 12px}.category-heading strong{font-size:25px}.category-heading small{font-size:11px}.category-count{display:flex;padding-left:12px}.category-count strong{font-size:11px}.category-count small{font-size:9px}.category-content .row-button{grid-template-columns:22px minmax(0,1fr) 82px 28px;gap:10px;padding:18px 10px}.category-content .row-title{font-size:22px}.category-content .row-title small{font-size:11px}.category-content .row-meta{display:flex;padding-left:10px}.category-content .row-meta strong{font-size:11px}.category-content .row .toggle{width:27px;height:27px}}
/* Section title only: industrial nameplate composition, per user reference. */
.intro.nameplate{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(110px,.48fr) minmax(0,.85fr);align-items:stretch;text-align:left;gap:0;margin:12px 0 34px;padding:16px 0;margin-bottom:0;background:transparent;color:#f3f2ed;border-top:0;border-bottom:0}
.nameplate-title{padding:10px 28px 10px 0;display:flex;flex-direction:column;justify-content:center}.nameplate-label{font:500 9px/1.5 var(--font-title);letter-spacing:.1em}
.intro.nameplate h1{font:800 clamp(34px,4.2vw,70px)/.98 var(--font-display);letter-spacing:.015em;text-transform:uppercase;margin:0;overflow-wrap:normal;color:#ffff47}
.intro.nameplate--technical h1{letter-spacing:.26em}
.intro.nameplate h1 span{font:700 18px/1.5 var(--font-body);letter-spacing:.13em;margin-top:17px;display:block;color:#fff}
.nameplate-index{border-left:1px solid #5e6156;border-right:1px solid #5e6156;padding:12px 18px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;border-color:#787b70}.nameplate-index strong{font:800 clamp(50px,6vw,94px)/1 var(--font-display);letter-spacing:-.05em;color:#f3f2ed}.nameplate-index>span:last-child{font-size:11px;letter-spacing:.1em}
.nameplate-description{display:grid;grid-template-rows:auto 1fr 1fr auto;align-items:start;text-align:left;gap:12px;padding:12px 22px}.nameplate-description p{font:500 11px/1.65 var(--font-title);margin:0;max-width:none;color:#d8dbd0}.nameplate-description p[lang]{font-family:var(--font-body);font-size:12px}
@media(max-width:850px){.intro.nameplate{grid-template-columns:minmax(0,1.6fr) minmax(90px,.5fr) minmax(0,1fr)}.nameplate-title{padding:10px 16px}.intro.nameplate h1{font-size:clamp(24px,4vw,38px)}.nameplate-index{padding:12px}.nameplate-description{padding:12px 14px}.nameplate-label{font-size:8px}.nameplate-description p{font-size:10px}}
@media(max-width:560px){.intro.nameplate{grid-template-columns:minmax(0,1fr) 88px;padding:12px 0;margin-top:8px}.nameplate-title{padding:8px 12px}.intro.nameplate h1{font-size:clamp(22px,6vw,32px)}.intro.nameplate h1 span{font-size:13px;margin-top:12px}.nameplate-index{border-right:0;padding:8px 10px}.nameplate-index strong{font-size:52px}.nameplate-index>span:last-child{font-size:10px}.nameplate-description{grid-column:1/-1;border-top:1px solid #5e6156;margin-top:12px;padding:14px 12px 4px;gap:8px}.nameplate-description p{max-width:none}}
/* One continuous title-and-content surface; no intervening search toolbar. */.intro.nameplate+#categories{margin-top:0}#categories{margin-top:0;overflow-anchor:none}
@media(max-width:560px){.intro.nameplate{margin-bottom:0}}
/* Layout baseline before introducing the measuring motif. No illustration sizing. */
.nameplate-title,.nameplate-index,.nameplate-description{min-width:0}
.nameplate-index .nameplate-label,.nameplate-description .nameplate-label{overflow-wrap:anywhere}
/* Directory edges use the same page gutter as the website header. */
/* Selected title treatment: page background, yellow title, white/yellow count. */
.nameplate-label,.nameplate-index>span:last-child{color:#a4a79b}
.nameplate-index strong .count-accent{color:#ffff47}
/* Shared directory timeline, with a softer deceleration than the article overlay. */
/* Article overlays keep the directory layout and native scroll behaviour. */
.story-dialog{position:fixed;z-index:40;inset:var(--reading-top,var(--site-header)) 0 0;width:100%;height:calc(100dvh - var(--reading-top,var(--site-header)));max-width:none;max-height:none;margin:0;padding:0;border:0;color:#171b13;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none;background:#efeee7;box-shadow:0 30px 100px #0007}
.story-dialog::-webkit-scrollbar{display:none}
.story-dialog[open]{animation:none}
.story-shell{position:relative;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
.story-toolbar{z-index:1;display:flex;align-items:center;gap:24px;border:0;position:absolute;top:0;right:0;box-sizing:border-box;width:calc(100% / 2.6);height:82px;justify-content:flex-end;background:transparent;padding:16px clamp(24px,3vw,48px)}
.story-toolbar h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.close-story,.retry-story{flex:none;min-height:44px;border:1px solid #0005;border-radius:30px;background:transparent;color:inherit;font-size:12px;padding:10px 20px}
.close-story:hover,.retry-story:hover{background:#171b13;color:#fff}
.story-content{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden;padding:0}
.story-content::-webkit-scrollbar{display:none}
.story-content>.sample-body{grid-column:1;grid-row:1;box-sizing:border-box;width:100%;max-width:none;min-width:0;min-height:0;height:100%;margin:0;padding:17px clamp(28px,4vw,72px) 40px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:auto}
.story-content>.sample-body::-webkit-scrollbar{display:none}
.story-content .sample-body p,.story-content .sample-body li{color:#343b2d}
.story-content .assessment p,.story-content .assessment li{color:#c8d0bc}.story-content>.sample-body section{margin-bottom:32px}.story-content>.sample-body h2{margin:10px 0 16px}.story-content>.sample-body .related,.story-content>.sample-body .assessment{background:transparent;color:#171b13;padding:24px 0;border-top:1px solid #171b1326}.story-content>.sample-body .assessment p,.story-content>.sample-body .assessment li{color:#343b2d}
.story-loading,.story-content>.load-error{padding:36px 0;line-height:1.8}
/* Desktop refinement: a clear category → article → reading sequence. */
.category-heading:hover{background:transparent}
.category-heading:focus-visible{outline-offset:-5px}

.category-block.is-current .category-heading{box-shadow:inset 0 -1px #0003}
.category-toggle::before,.category-toggle::after{content:'';position:absolute;width:14px;height:1px;background:currentColor;transition:transform var(--directory-motion) var(--directory-motion-ease)}
.category-toggle::after{transform:rotate(90deg);transition:transform var(--directory-motion) var(--directory-motion-ease),opacity var(--directory-motion) var(--directory-motion-ease)}
.category-block.is-current>.category-heading .category-toggle::after{opacity:0;transform:rotate(90deg) scaleX(0)}
.category-content .row:hover{background:#ffffff65}
.article-visual{display:block;overflow:hidden;background:#171b1310;aspect-ratio:4/3}
.article-visual img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.row-button:hover .article-visual img{transform:scale(1.1)}

.row-button:hover .toggle{transform:translate(2px,-2px)}
.story-toolbar .close-story{display:grid;place-items:center;width:48px;height:48px;padding:0;background:#171b13;color:#f3f2ed}.story-toolbar .close-story svg{display:block;transition:transform .2s ease}.story-toolbar .close-story:hover svg{transform:translateX(-3px)}
.story-intro{grid-column:2;grid-row:1;box-sizing:border-box;min-width:0;min-height:0;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:20px;background:transparent;border:0;padding:17px clamp(24px,3vw,48px) 24px;margin:0;overflow:hidden}
.story-intro .eyebrow{font-size:10px;letter-spacing:1px}
.story-intro h3{font:800 clamp(28px,2.8vw,44px)/1.02 var(--font-display);margin:18px 0}
.story-intro p:not(.eyebrow){font-size:13px;line-height:1.8;margin:0;max-width:40em}.story-intro figure{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;margin:0;background:transparent;padding:0}
.story-intro img,.story-intro video{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.story-intro figcaption{font-size:10px;line-height:1.5;margin:0;opacity:.65}

/* Unified reading canvas: independent text scroll without visible panel boundaries. */
.story-content>.story-intro{animation:reading-reveal var(--content-motion-open) var(--content-motion-ease) both}
@keyframes reading-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Native scroll: each index stays within its article section, then yields to the next. */
.story-content>.sample-body .reading-sheet{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;column-gap:24px;margin:0;padding:0 0 28px;border:0;background:transparent;color:#101111}
.reading-sheet-group{min-width:0;border-top:1px solid transparent;background:linear-gradient(#171b1360,#171b1360) 0 0/100% 1px no-repeat border-box}   /* 18:39: the rule is one background line, drawn and at rest alike (app.js animates its length) */
.reading-sheet-number{position:sticky;top:24px;align-self:start;grid-column:1;grid-row:1;font:600 clamp(44px,4vw,64px)/.9 var(--font-display);letter-spacing:-.06em}
.reading-sheet-panel{min-width:0}

.reading-title-en{display:block;font-family:var(--font-display);font-weight:600;line-height:1.1}
.reading-title-local{display:block;margin-top:8px;font:400 12px/1.6 var(--font-body);color:#555c50}
.story-content>.sample-body .reading-topic{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:28px;margin:0;padding:24px 0;border:0;background:transparent;color:inherit}.reading-topic-copy{min-width:0}.reading-topic-copy>:first-child{margin-top:0}.reading-topic-copy>:last-child{margin-bottom:0}
.story-content>.sample-body .reading-topic:last-child{margin-bottom:0}
.story-content .reading-topic-title{margin:0;font-size:22px;line-height:1.2}.reading-topic-title .reading-title-en{font-family:var(--font-title);font-weight:700;line-height:1.2}
.reading-topic .reading-title-local{font-size:11px;margin-top:5px}
.story-content .reading-topic p,.story-content .reading-topic li{font-size:14px;line-height:1.85;color:#343b2d}
.reading-sheet-panel .fact-grid,.reading-sheet-panel .contact-grid{grid-template-columns:1fr;gap:14px}
.reading-sheet-panel .content-table{font-size:12px}.reading-sheet-panel .content-table th,.reading-sheet-panel .content-table td{padding:8px}

.reading-card-stage{position:relative;min-height:0;isolation:isolate;z-index:22}







.story-intro .reading-standard-heading>p:last-child{font-size:11px}

.reading-article-head{margin:0 0 32px;padding:0;border:0}.reading-article-head h1{margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.15}.reading-article-head .reading-title-en{display:flex;align-items:center;min-height:48px;font-family:var(--font-title);font-weight:700}.reading-article-head .reading-title-local{font-size:11px;line-height:1.8;margin-top:10px}

.reading-topic .fact-grid>div,.reading-topic details,.reading-topic .content-table th,.reading-topic .content-table td{border:0}.reading-topic .fact-grid>div{padding-top:0}

/* Text hierarchy: English first, regional copy follows within the same block. */
.story-content .reading-copy-en{display:block;font:400 14px/1.65 var(--font-body);color:#20251e}
.story-content .reading-copy-local{display:block;margin-top:8px;font:400 13px/1.75 var(--font-body);color:#4a5045}   /* 23:52 (user: "can't read it at all"): was 12px/1.85 #687062 */
.story-content strong>.reading-copy-en,.story-content th>.reading-copy-en{font-weight:700}
.story-content .reading-topic-copy p{margin:0 0 22px}
.story-content .reading-topic-copy li{margin-bottom:18px}
.story-content .reading-topic-copy h3{margin:0 0 12px}

.story-toolbar .close-story:focus-visible{outline-offset:3px}

/* Contact entry follows the bilingual heading hierarchy. */
.story-content .reading-contact-title{margin:24px 0 16px}
.story-content .reading-contact-title a{display:block;padding:0;border:0;background:transparent;color:#20251e;text-decoration:none}
.story-content .reading-contact-title .reading-copy-en{font:700 22px/1.2 var(--font-body)}
.story-content .reading-contact-title .reading-copy-local{margin-top:5px;font-size:11px;line-height:1.6}
.story-content .reading-contact-title a:hover .reading-copy-en{text-decoration:underline;text-underline-offset:4px}

.story-content>.sample-body .reading-contact-row{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:28px;margin:0;padding:24px 0 0;border:0;border-top:1px solid #171b1360}
.reading-contact-row>div{min-width:0}
.story-content .reading-contact-row h3{margin:0 0 16px}
.story-content .reading-contact-row p{margin:0 0 16px}
.story-content .reading-contact-row a{overflow-wrap:anywhere}
.story-content .reading-contact-row .reading-contact-title{margin:0 0 16px}

/* Minimal reading thumb: short segment, without a visible rail or arrows. */
.reading-scroll-thumb{position:absolute;z-index:3;left:calc(100% * 1.6 / 2.6 - 9px);top:16px;width:3px;height:36px;border:0;border-radius:3px;background:#8a9085;padding:0;cursor:grab;touch-action:none}
.reading-scroll-thumb:hover,.reading-scroll-thumb:active{background:#4e5849}
.reading-scroll-thumb:active{cursor:grabbing}
.reading-scroll-thumb:focus-visible{outline:1px solid #687062;outline-offset:3px}

/* Inline bilingual subheadings within article copy. */
.reading-topic-copy h3 .reading-title-en,.reading-topic-copy h3 .reading-title-local,.reading-topic-copy .steps strong .reading-copy-en,.reading-topic-copy .steps strong .reading-copy-local{display:inline;margin:0}
.reading-topic-copy h3 .reading-title-local::before,.reading-topic-copy .steps strong .reading-copy-local::before{content:' / ';white-space:pre}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.story-dialog[open]{animation:none}.article-visual img{transition:none}.story-content>.story-intro,.story-content>.sample-body{animation:none}.category-heading>span:nth-child(2){transition:none}.category-block.is-current>.category-heading>span:nth-child(2){transform:none}}

/* Second-level story row: index, text, media, metadata, open control. */
.category-content .row-button>.number{grid-column:1;grid-row:1;display:grid;place-items:center;align-self:start;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#171b13;color:#fff;font:700 12px/1 var(--font-title);letter-spacing:0}
.category-content .row-button>.row-title{grid-column:2;grid-row:1;min-width:0}
.category-content .row-button>.article-visual{grid-column:3;grid-row:1;min-width:0}
.category-content .row-button>.row-meta{grid-column:4;grid-row:1}
.category-content .row-button>.toggle{grid-column:5;grid-row:1}

/* Directory hierarchy: large category index, compact three-digit story badge. */
.category-heading .category-number,.category-block.is-current .category-number{width:auto;height:auto;display:block;align-self:start;margin-top:3px;border:0;border-radius:0;background:transparent;font:800 clamp(40px,3.8vw,60px)/1 var(--font-display);letter-spacing:-.02em;color:#202020}

/* Extend homepage P2: same Barlow Condensed 800 asset, ink and bilingual hierarchy. */
.category-heading strong,.category-content .row-title{font-family:var(--font-display);font-weight:800;line-height:.95;letter-spacing:-.02em;color:#202020}
.category-heading small,.category-content .row-title small{font-weight:700}
/* Desktop directory: fixed title board plus a complete first-level overview. */
.nameplate-info{display:contents}

/* Overview → layout fold → one native reading flow. No fixed reading overlay. */
@media(min-width:901px){body>main:has(>.nameplate){--directory-gutter:calc(var(--page,68px) * max(1,var(--kx,1)));max-width:none;padding-inline:var(--directory-gutter);--directory-title-height:clamp(156px,25dvh,208px);padding-top:var(--site-header);padding-bottom:16px}
 /* 11-07 22:39 (user: "the zone can't pick a language"): 19, one under the top bar (20), so the language menu that opens
    from the top bar and its dimming layer lie over the zone title (at 20 the title, later in the page, covered the menu) */
 .intro.nameplate{position:relative;top:auto;z-index:19;height:var(--directory-title-height);margin:0;padding:22px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--site-bg)}
 .nameplate-info{min-width:0;width:min(100%,500px);justify-self:end;display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:24px;padding-left:0}
 .nameplate-title{padding:0 28px 0 0}
 .intro.nameplate h1{font-size:clamp(30px,3.5vw,64px);line-height:.96;letter-spacing:.015em}
 .intro.nameplate--technical h1{letter-spacing:.2em}
 .intro.nameplate h1 span{font-size:15px;line-height:1.5}
 .nameplate-index{padding:0;border:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
 .nameplate-index strong{order:0;display:block;font:800 clamp(76px,7.5vw,120px)/.82 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0 0 7px}
 .nameplate-index .nameplate-label{order:1;font:800 16px/1 var(--font-display);letter-spacing:-.015em;color:#f3f2ed;white-space:nowrap}
 .nameplate-index>span:last-child{order:2;font-size:12px;font-weight:500;letter-spacing:.025em;color:#dadbd4;margin-top:-1px}
 .nameplate-description{padding:0;border:0;display:flex;flex-direction:column;justify-content:center;gap:16px}
 .nameplate-description p{font:500 clamp(17px,1.5vw,24px)/1.3 var(--font-title);letter-spacing:-.02em;color:#f3f2ed;text-wrap:balance;max-width:31em}
 .nameplate-description p[lang]{font-family:var(--font-body);font-size:clamp(12px,1vw,16px);font-weight:400;line-height:1.65;letter-spacing:.04em;color:#c5c7bf;text-wrap:pretty}
 .category-heading{height:var(--row-h,calc((100dvh - var(--site-header) - var(--directory-title-height) - 20px)/var(--directory-count)));min-height:80px;   /* 11-08 21:xx --row-h: that same height snapped to a whole device pixel (set by measureDirectory), see settle check */padding:14px 26px;grid-template-columns:144px minmax(0,1.4fr) minmax(100px,.4fr) 46px;gap:24px}
 .category-heading .category-number,.category-block.is-current .category-number{align-self:center;margin:0;display:block;font-size:clamp(48px,4.8vw,76px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
 .category-heading strong{font-size:clamp(26px,2.7vw,46px)}
 .category-heading small{font-size:13px;margin-top:6px}
 .category-count{padding-left:24px;font-size:11px}
 .category-toggle{width:40px;height:40px}
 /* The title board and all category rows take part in the same layout fold. */
 .intro.nameplate{overflow:hidden}
 body>main:has(>.nameplate){height:100dvh;overflow:hidden}
 body>main.directory-expanded:has(>.nameplate){padding-bottom:0}
 .category-heading-slot{overflow:hidden}
 .category-overview-item.is-current .category-heading-slot .category-toggle::after{opacity:0;transform:rotate(90deg) scaleX(0)}
 .category-overview-item .category-heading{background:var(--tone);width:100%}
 [data-directory-phase="reading"]>.intro.nameplate{height:0;padding-block:0}
 [data-directory-phase="reading"]>#category-overview{height:0;overflow:hidden}
 [data-directory-phase="opening"]>.intro.nameplate,[data-directory-phase="closing"]>.intro.nameplate{height:0;padding-block:0}
 [data-directory-phase="opening"] .category-heading-slot,[data-directory-phase="closing"] .category-heading-slot{height:0}
 .category-scroll-port[hidden]{display:none}
 .category-block>.category-heading{position:relative;z-index:21;background:var(--tone)}
 .category-scroll-port{height:calc(100dvh - var(--site-header));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;overflow-anchor:none;scroll-behavior:auto;isolation:isolate}
 /* Include the page gutters in the native wheel and touchpad area. */
 [data-directory-phase="reading"] > .category-scroll-port {
  margin-inline: calc(-1 * var(--directory-gutter));
  padding-inline: var(--directory-gutter);}
 .category-scroll-port::-webkit-scrollbar{display:none}
 .category-scroll-port.is-folding{overflow:hidden;pointer-events:none}
 #categories{position:relative}
 .directory-expanded .category-block>.category-heading{position:sticky;top:0}
 .directory-expanded .category-block.is-docked>.category-heading{position:relative}
 .category-content{height:auto;min-height:calc(100dvh - var(--site-header) - var(--row-h,calc((100dvh - var(--site-header) - var(--directory-title-height) - 20px)/var(--directory-count))));overflow:visible}

/* 11-04 (user) expanded article list, following the reading view logic:
   no tinted box per article, thin rules between articles; large display numbers like the category 00-1 and the reading view;
   columns align with the category heading (number, title, count rule, toggle); larger, darker summary; photos 3:2.
   Reading view: article number before the title, title aligned to the rule, larger sheet numbers 1, 2, 3. Desktop only (>900px). */

 .category-content{padding:6px 26px 40px}
 .category-content .row{background:transparent;border:0;border-top:1px solid #0003;border-radius:0}
 .category-content .row:last-child{border-bottom:0}
 .category-content .row:hover{background:transparent}
 .category-content>.category-rows:first-child>.row:first-child{border-top:0}
 .category-content .row-button{grid-template-columns:144px minmax(0,1fr) auto max(100px,calc((100% - 262px)/1.8*.4)) 46px;gap:24px;padding:30px 0;min-height:0;align-items:start}
 .category-content .row-button>.number{width:auto;height:auto;background:none;color:#202020;border-radius:0;display:block;font:800 64px/.9 var(--font-display);letter-spacing:-.02em;margin:0}
 .category-content .row-button>.row-title{font-size:clamp(26px,2.3vw,38px)}
 .category-content .row-title small{font-size:15px;margin-top:12px}
 
 .category-content .row-button>.article-visual{aspect-ratio:3/2;background:none;height:auto;width:clamp(220px,19vw,300px);justify-self:end}
 .category-content .row-button>.article-visual img{height:100%;width:100%;object-fit:cover}
 .category-content .row-button>.row-meta{align-self:stretch;border-left:1px solid #0003;padding:4px 0 4px 24px;justify-content:flex-start}
 .category-content .row-button>.toggle{width:40px;height:40px;font-size:20px;align-self:start}
 .reading-article-head{margin:0 0 18px calc(64px + 24px)}
 
 


/* 11-05 (user 22:52-23:24, chosen look): categories are the parent level, articles the child.
   - each heading casts a soft shadow down onto its own content (it is the layer above it);
   - the heading is pushed up by the next heading when it leaves (normal sticky push, no stacking);
   - article numbers are outlined, so they read as children of the solid category numbers;
   - the article area is one step lighter than its heading.
   Only box-shadow, colour and size here -- no position changes (a position rule here broke the close animation). */

 /* heading shadow (user 00:43, 00:47): one meaning only -- a heading lies on top of its OWN content, so the shadow is cast
    downward onto that content and is always there. Nothing casts a shadow upward: one category's heading and the next
    category are on the same level (the next heading pushes the previous one away), so the earlier upward shadow on the
    next category and above each heading were removed. */
 #categories .category-block>.category-heading{box-shadow:0 14px 22px -16px rgba(0,0,0,.55)}
 /* during open/close the resting heading sits just above the opening content and its shadow doubled the moving one's
    (darker shadow, then lighter at the hand-over = a flash); only the moving heading casts it then */
 body>main[data-directory-phase=opening] #categories .category-block>.category-heading,body>main[data-directory-phase=closing] #categories .category-block>.category-heading{box-shadow:none}
 
 #categories .category-content .row-button>.number{color:transparent;-webkit-text-stroke:1.2px #202020;font-size:48px}
}

/* 11-05 (user 23:30-23:40: open/close should feel natural). Both directions respond at once and come to rest
   softly (ease-out), the way a real panel settles; closing a little shorter. app.js no longer plays the opening backwards. */
/* user 00:01: still a tremble at the end and clicks wait for it -- the old curve spent its last third creeping a fraction of a
   pixel at a time (text shimmers, and the page stays locked until it ends). A gentler out-curve with no long tail. */
:root{--directory-motion:650ms;--directory-motion-ease:cubic-bezier(.33,1,.68,1);--directory-motion-close:520ms;--directory-motion-close-ease:cubic-bezier(.33,1,.68,1)}
/* user 23:43: the heading 'jumped' when the animation ended -- the moving heading (overview copy) had no shadow and the
   resting one (category block) has one, so the shadow popped in at the hand-over. Give the moving copy the same shadow. */
/* The round toggle also switched from outline to filled at the same moment; the moving copy now fills as it moves. */
/* user 23:46 'still shakes after the animation': the moving heading had a 1px bottom border, the resting one none, so
   everything inside the heading sat 0.29px higher and dropped by that much at the hand-over. The divider is now drawn
   inside the box (no layout effect), so both headings lay out identically. */
@media(min-width:901px){
 .category-overview-item .category-heading{border-bottom:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.133)}
 /* the moving heading carries the same shadow as the resting one, and its slot no longer clips it */
 .category-overview-item.is-current .category-heading{box-shadow:0 14px 22px -16px rgba(0,0,0,.55)}
 .category-overview-item.is-current .category-heading-slot{overflow:visible;position:relative;z-index:2}
 .category-overview-item.is-current .category-toggle,.category-overview-item .category-heading.is-hold-hover .category-toggle{background:#171b13;color:#fff}   /* is-hold-hover: 11-10 (settle check (c)) the "+" of the row under the mouse stays filled when a close ends (app.js holdPointerRow) */

/* 11-05 trial in 62368 only: skeleton placeholder rows (see app.js); remove with them before merging */

 #categories .row--skeleton .number{opacity:.35}
 #categories .row--skeleton .article-visual{background:rgba(0,0,0,.08);aspect-ratio:3/2;width:clamp(220px,19vw,300px)}
 #categories .row--skeleton .row-title i,#categories .row--skeleton .row-meta i{display:block;height:14px;border-radius:7px;background:rgba(0,0,0,.09);margin:0 0 14px}
 
 #categories .row--skeleton .row-title i:nth-child(2){margin-top:18px}
 #categories .row--skeleton .row-title i:nth-child(3){width:80%}
 
 
 #categories .row--skeleton .toggle{opacity:.3}

/* 11-05 (user 00:48 "opening a category must be one page"): once a category is open (reading), it is the only one on the
   page -- its heading on top, its articles scrolling under it, at least one screen tall. The other categories are not
   below it to scroll into; you close it (heading or toggle) to go back to the list. They show again during open/close. */
body>main[data-directory-phase=reading] #categories .category-block:not(.is-current){display:none}

/* 11-05 (user 00:55 "opening must be the whole screen; if there are not enough articles, just run it to the very bottom"):
   the open category always fills the reading area -- its heading plus its content panel reach the bottom of the screen,
   even with only one or two articles. Articles stay in order under the heading; the panel's empty part runs to the bottom. */

 #categories .category-block.is-current{box-sizing:border-box;min-height:calc(100dvh - var(--site-header,76px));display:flex;flex-direction:column}
 #categories .category-block.is-current>.category-content{flex:1 0 auto;min-height:0}
}

/* 11-05 (user 01:48): while an article comes out of its title, the intro does not run its own fade/rise --
   it moves with the article as one piece (app.js articleBand); the reference cards don't slide in on their own either. */
.story-dialog.is-entering .story-content>.story-intro,.story-content>.story-intro.no-reveal{animation:none}



/* 11-06 (user 18:08, 18:16-18:17): solutions and technology look the same -- 4 category headings on screen (app.js caps
   --directory-count at 4). The technology center's 7 scroll inside that 4-row window in the overview only; the browser
   bar is hidden and app.js draws the article reading view's small thumb (same look as .reading-scroll-thumb) beside it. */
@media(min-width:901px){
 body>main.directory-scrolls[data-directory-phase=overview] #category-overview{max-height:calc(var(--directory-count)*var(--row-h,calc((100dvh - var(--site-header) - var(--directory-title-height) - 20px)/var(--directory-count))));overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
 body>main.directory-scrolls[data-directory-phase=overview] #category-overview::-webkit-scrollbar{display:none}
 .directory-list-thumb{position:fixed;z-index:30;width:3px;height:36px;border-radius:3px;background:#8a9085;cursor:grab;touch-action:none}
 .directory-list-thumb:hover,.directory-list-thumb:active{background:#c5c7bf}
 .directory-list-thumb:active{cursor:grabbing}
 /* 11-10 (settle check (c), user ruling 11-08 20:05): the list's small bar appeared on the last frame of a close; it now fades in like the other elements (the same time and curve as the list's own motion) */
 .directory-list-thumb:not([hidden]){animation:directory-thumb-in var(--directory-motion) var(--directory-motion-ease) both}
 @keyframes directory-thumb-in{from{opacity:0}to{opacity:1}}
}
@media(max-width:900px){.directory-list-thumb{display:none}}

/* 11-06 (user 18:25 "minimal, in our home page's style"; effect shown 18:2x): the category heading stays the board-2 colour
   block; each article is a light rounded card like the home page's focus-area cards, laid on the category colour (parent and
   child read apart at a glance). The card keeps title, Chinese subtitle, one-line summary, picture and the open button; the
   number is a grey solid figure at the top right like the home page cards (no longer a second outlined number next to 00-1);
   the keyword column is gone. The count in the heading loses its divider line.
   11-06 (user 18:58 "a softer white"): the card white is tinted with its category colour (22%), so it sits softer on it. */
@media(min-width:901px){
 #categories .category-heading .category-count{border-left:0;align-items:flex-end;text-align:right;padding-right:8px}
 #categories .category-content{background:none!important;padding:18px 26px 26px!important}
 #categories .category-block{--card-tint:var(--tone)}
 #categories .category-content .row{background:color-mix(in srgb,var(--card-tint) 22%,#f4f2ec)!important;border:0!important;border-radius:16px;margin:0 0 12px;overflow:hidden}
 #categories .category-content .row .row-button{gap:36px!important;padding:30px 34px!important;min-height:0!important;align-items:start}
 #categories .category-content .row .row-title{color:#1c1c1a}
 
 #categories .category-content .row .article-visual img{border-radius:10px}
 #categories .category-content .row .number{grid-row:1;justify-self:end;color:#8d8c86!important;-webkit-text-stroke:0!important;font-size:64px!important;line-height:.85}
 
 #categories .category-content .row .toggle{grid-row:1;align-self:end;justify-self:end}
 
 
}

/* 11-06 (user 18:31): the card's picture inside the article, same 3:2 frame and corner as on the card (it flies between them). */
#categories .category-content .row .article-visual img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.story-content .reading-figure{margin:22px 0 28px;padding:0;background:none}
.story-content .reading-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* 11-06 (user 19:04 "the title layout is still not good, and the fonts keep changing -- they were unified"): one type rule
   for both zones and the detail, the same three roles the home page uses (no other font anywhere):
   - English titles at every level and all numbers: --font-display (Barlow Condensed);
   - Chinese titles and the Chinese line under an English title: --font-title (Noto Sans SC, Source Han Sans);
   - running text in both languages: --font-body (system UI font).
   Before this, the same article title was Barlow on the card and Noto Sans in the detail, topic titles were Noto Sans, and
   the Chinese lines under titles were system font at 400 or 700 in four different sizes. */
@media(min-width:901px){
 #categories .category-heading small,#category-overview .category-heading small{font-family:var(--font-title);font-weight:500;color:#2a2a26}
 #categories .category-content .row .row-title{font-family:var(--font-display);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
 #categories .category-content .row .row-title small{font-family:var(--font-title)!important;font-weight:500!important;letter-spacing:.04em;color:#6f6e68!important}
 
 .reading-article-head h1 .reading-title-en{font-family:var(--font-display)!important;font-weight:800!important;font-size:clamp(34px,3vw,46px)!important;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
 .reading-article-head .reading-title-local,.reading-topic-title .reading-title-local,.reading-standard-heading p{font-family:var(--font-title)!important;font-weight:500!important;font-size:13px!important;letter-spacing:.04em}
 .reading-topic-title .reading-title-en{font-family:var(--font-display)!important;font-weight:700!important;font-size:28px!important;line-height:1.02;letter-spacing:0}
}

/* 11-06 (user 19:09 "what fonts are these [home page contact board], and what does the zone use"): the home page sets its
   English running text, labels and phone/e-mail lines in Inter ("Capabilities Inter", /opening/fonts/InterVariable.woff2,
   capabilities.css); the zone had no Inter and showed English body text in the system Chinese font. Same face, same file
   here; Chinese characters still fall through to the system font as before. */
@font-face{font-family:"Capabilities Inter";src:url("/opening/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-body:"Capabilities Inter","Microsoft YaHei UI","Microsoft YaHei",sans-serif}

/* 11-06 (user 19:29 "remove this useless content", red box on the divider line and "1 篇文章" in every category heading):
   the article count and its divider are hidden in the overview and in the open category alike. visibility (not display)
   keeps the heading's columns, so the title and the +/- button stay exactly where they were. */
@media(min-width:901px){.category-heading .category-count{visibility:hidden}

/* 11-06 (user 22:00 / 22:15, the detail with its parts marked and two lines drawn): the detail is set first and the zone is
   laid out from it afterwards. The right-column title carries the
   category number before its Chinese line; the reference card's top edge sits on the same line as the rule that starts the
   article text on the left (app.js alignReadingStage). */

 .reading-article-head .reading-title-local{line-height:1.8}
 
 /* bottom: the reference card ends 28px above the reading area's bottom edge (the line drawn across the picture's foot) */
 .story-dialog .story-intro{padding-bottom:16px}
 /* the right-column title is a plain block (app.js puts it on the article title's baseline) */
 
 

/* 11-06 (user 22:47-22:48 "the card had a keyword too ... put all the content on first, then lay out from the content"):
   the card's keyword column (关键词 / keyword / SEICHUNG) is shown again, between the title and the picture, and the detail's
   right-column block carries the same keyword under the category lines. Plain placement only; the layout comes next. */

 /* 11-06 (user 22:52): the card reads title, picture or video, keyword */
 
 #categories .category-content .row .row-meta{display:flex!important;flex-direction:column;padding:0!important}
 
 #categories .category-content .row .number,#categories .category-content .row .toggle{grid-column:4!important}
 .story-intro .reading-keyword{gap:4px 12px;font-size:13px;line-height:1.6}

/* 11-06 (user 22:54 "set the font sizes"): the keyword is the second title of the card and of the detail, not a small label.
   Same two-line pattern as the title next to it -- a big line and a small line under it -- in the site's three type roles:
   the keyword is Chinese, so it is a Chinese title (--font-title, bold); "SEICHUNG" under it is a small English label
   (--font-body, Inter). Size: 0.73 of the title next to it (the detail's old right-column title had that ratio). In the
   detail the two blocks sit on shared baselines (app.js alignReadingHeads: big line with the title, small line with the
   Chinese line). */

 #categories .category-content .row .row-meta{gap:0!important}
 /* 11-06 (user 22:56 "English is always the main, the second language the secondary"): the English line is the big one
    (English title type: --font-display, the same as the title next to it), the Chinese keyword is the small line under it. */
 #categories .category-content .row .row-meta .keyword-en{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;color:#1c1c1a}
 #categories .category-content .row .row-meta strong{display:block;font-family:var(--font-title);font-weight:500;letter-spacing:.04em;color:#6f6e68}
 .story-intro .reading-keyword{margin:0;padding-right:64px}
 .story-intro .reading-keyword .keyword-en{color:#1c1c1a}
 .story-intro .reading-keyword strong{font-family:var(--font-title);font-weight:500;letter-spacing:.04em;color:#555c50}

/* 11-06 (user 22:59 "this aligns to the English"): the site's rule for a title with a number in front -- the second-language
   line starts under the English words, not under the number (the zone heading does the same: 00-1 | GENERAL ... / 通用...).
   The article title in the detail: number | English title, empty | Chinese line. */

 .reading-article-head h1{grid-template-columns:auto minmax(0,1fr);align-items:baseline}
 
 .reading-article-head h1 .reading-title-local{grid-column:2}

/* 11-06 (user 23:03, the topic title "Your component requirement / 零件製造需求" marked as correct): the second-language
   line sits right under the English with a small gap, in the detail's title and keyword and on the card. The article number
   stays on the title line in front of the title (user 23:15: "01 goes before the title"); the 22:59 grid keeps the Chinese
   line under the English words. */

 .reading-article-head .reading-title-local{margin-top:8px}
 
 
 



 
}

/* 11-06 (user 23:19, said many times): the back button has no outer ring -- no border, no focus outline. */
.story-toolbar .close-story,.story-toolbar .close-story:focus,.story-toolbar .close-story:focus-visible{border:0!important;outline:none!important;box-shadow:none!important}

/* 11-06 (user 23:01-23:29 "title and keyword: one set, clear main and secondary"; 23:03 the topic title block marked as the
   correct layout): the detail uses its own two title levels and nothing else -- level 1 is the article title (number +
   English, --font-display 800), level 2 is the topic title ("Your component requirement": --font-display 700, 28px, the
   Chinese line tight under it). The keyword is level 2, so it reads as secondary to the title and as the same family as the
   topic titles below; the two blocks still share the English and the Chinese baselines (app.js alignReadingHeads). */
@media(min-width:901px){
 .story-intro .reading-keyword .keyword-en{font-family:var(--font-display);letter-spacing:0;text-transform:none}

/* 11-06 (user 23:55 "remove 01, too many numbers"): the detail title is just the two-language title,
   English over Chinese, tight like the topic title. */

 .reading-article-head h1{display:block}
 .reading-article-head h1 .reading-title-en{display:block}
 .reading-article-head h1 .reading-title-local{display:block}

/* 11-06 (user 00:11-00:13, reference video): the numbers need their own room -- the content was too wide and pushed
   against them. Number column 64px -> 238px, so the title, rule and topics start at 320 (1440); the article title
   follows the same left line. */

 
 .reading-article-head{margin-left:202px}/* 00:15: less squeeze -- the article title stays on one line */

/* 11-06 (user 00:17 "the numbers bigger"): 86px -> 121px at 1440 */

 .reading-sheet-number{font-size:clamp(84px,8.4vw,128px)}

/* 11-06 (user 00:20 "the two languages go their own way; this line spacing [topic title] is confirmed"): every title
   pair is built like the topic title "Your component requirement / 零件製造需求" -- the Chinese line is .46 of the
   English size and sits .85 of the English size below it (baseline to baseline). Article title: English 43px, Chinese
   20px; keyword: English 28px, Chinese 13px, exactly the topic title. */

 .reading-article-head h1 .reading-title-local{font-size:calc(clamp(34px,3vw,46px)*.464)!important;line-height:1.6!important}
 .story-intro .reading-keyword strong{transform:none}

/* 11-06 (user 00:23 "01 level with the line"): the number's top sits on the rule. A transform, not a margin, so the
   sticky offset (set from the rule in app.js) stays the same and the number still never moves. */

 .reading-sheet-number{transform:translateY(-.146em)}

/* 11-06 (user 00:31 "the keyword is actually the most important -- make it bigger"): the keyword pair is set at the
   article title's size, built the same way (English 43px / Chinese 20px at 1440). */

 /* 00:32: the keyword leads the title, the title leads the article -- so the keyword is the largest: 1.3x the title */
 .story-intro .reading-keyword .keyword-en{font-weight:800!important;line-height:1!important}
 /* same English-to-Chinese spacing as the article title (its English line box differs) */

/* 11-06 (user 00:34 "lay it out across, not two lines"): the keyword pair runs on one line -- English, then its
   Chinese on the same baseline. */

 .story-intro .reading-keyword{flex-wrap:wrap;align-items:baseline}
 

/* 11-06 (user 00:35 "if a keyword is too long, English and Chinese on two lines"): set by app.js when the one-line
   keyword would run into the back button */

/* 11-06 (user 00:39 "try two lines staggered, designed with the button"): English on the first line from the card's
   left edge; Chinese on the second line, pushed right so it ends just before the back button; the button is centred on
   the whole pair (app.js). Keyword -> Chinese -> button reads as one stepped unit. */

 .story-intro .reading-keyword{row-gap:0}
 .story-intro .reading-keyword .keyword-en{justify-self:start}
 

/* 11-06 (user 00:41 "closer"): the staggered Chinese line tucks up under the English line */

/* 11-06 (user 00:42, marked screenshot): the Chinese line starts where the English ends and its top sits on the
   English baseline -- a step down to the right, toward the back button. */

 .story-intro .reading-keyword{grid-template-columns:auto minmax(0,1fr)!important;column-gap:0!important}
 .story-intro .reading-keyword .keyword-en{grid-column:1;grid-row:1}
 .story-intro .reading-keyword strong{grid-column:2;grid-row:2;justify-self:start!important}

/* 11-06 (user 00:46-00:47, proposal 1): the keyword is built like every other title pair -- English over Chinese,
   both from the card's left edge, 1.2x the article title -- and its Chinese baseline shares the article title's
   (app.js). The back button stands apart in the corner. */

 .story-intro .reading-keyword{display:block!important}
 .story-intro .reading-keyword .keyword-en{display:block;font-size:calc(clamp(34px,3vw,46px)*1.2)!important}
 .story-intro .reading-keyword strong{display:block!important;text-align:left!important;font-size:calc(clamp(34px,3vw,46px)*1.2*.464)!important;line-height:1.6!important}

/* 11-06 (user 00:48-00:49 "your English and Chinese look like two separate things"): the Chinese line sits as close
   under the English as in the topic title -- about 13px from the English baseline to the top of the Chinese, only the keyword
   (user 00:51: "I mean the keyword"); the article title is unchanged. */

/* 11-06 (user 00:54 "here too, the line spacing is too big"): the article title's Chinese line tucks up the same way
   -- about 13px from the English baseline to the top of the Chinese */

/* 11-06 (user 00:55-00:56 "keep the detail as it is; now lay out the category cards to match the detail"): the card row
   uses the detail's rules so the card and the detail correspond for the opening motion --
   - title pair: Chinese .464 of the English, tight under it (about 13px from the English baseline);
   - keyword pair: 1.2x the title, the same tight pair;
   - the open arrow moves to the top-right corner, its top level with the keyword's cap top (the detail's back button
     sits in the same place); the 01 moves to the bottom-right, its foot on the picture's bottom edge. */

 #categories .category-content .row .row-title small{line-height:1.6!important}
 #categories .category-content .row .row-meta .keyword-en{line-height:1!important}
 #categories .category-content .row .row-meta strong{line-height:1.6!important}
 
 

/* 11-06 (user 01:01 "I mean the digits of the number" -- 0 and 1 too tight): normal letter spacing for the section number */

 .reading-sheet-number{--sheet-ls:0em;letter-spacing:var(--sheet-ls)!important}   /* 00:11 (user: "the numbers are too wide"): was .06em; 0em gives the same gap-to-height ratio as the card's 01 (0.145 vs 0.143), so the number keeps one shape while it travels */   /* 22:43: through a property so the card -> page motion can ease it */

/* 11-06 (user 01:26 "02 pushes 01 out, 01 does not leave by itself; it was more natural before"): back to the sticky
   number (it stays put until the next section pushes it out); a small margin under it so that, as 02 pushes, the two
   numbers keep about 3/4 of a number's height apart, as in the reference video */

 .reading-sheet-number{margin-bottom:.12em}

/* 11-06 (user 01:32 "the card title is three lines, the detail's is two"): the card title is built like the detail's --
   the English on one line, the Chinese under it. The title column takes the width the one-line title needs; the picture
   column gives way. */

 #categories .category-content .row:not(.row--skeleton) .row-title{white-space:nowrap}
 #categories .category-content .row:not(.row--skeleton) .row-title small{white-space:normal}

/* 01:35 (user "not good-looking, not to standard"): the real card keeps the same columns as every other card; the
   one-line English title is set a little smaller so it fits its column (keyword stays 1.2x the title); the open arrow
   drops its keyword offset -- app.js puts every top on one line. */

 
 
 
 
 #categories .category-content .row .row-button .toggle{margin-top:0!important}

/* 11-06 (user 01:54 "the card can change size, but keep it good-looking and to standard"): the card sits on the same
   grid as its category heading -- and that grid is the detail's grid:
     01      -> the heading's number column ("00-1"), as the detail's 01 sits in its left column
     title   -> the heading's title column ("GENERAL MANUFACTURING", x 262 at 1440) -- the detail's title starts on the
                same x, so on opening the title only rises, it never slides sideways
     picture, keyword, open arrow -> to the right, the arrow in the card's top-right corner
   Every item's top sits on one line (app.js); the card keeps its height. */

 
 
 
 #categories .category-content .row .article-visual{justify-self:stretch!important;width:100%!important}
 #categories .category-content .row .article-visual img{width:100%!important;height:100%!important;object-fit:cover!important}
 
 #categories .category-content .row .row-button .toggle{justify-self:end!important;align-self:start!important}

/* 11-06 (user 01:59, red lines on the screenshot): the title moves under the 01, starting on the 01's left edge; the
   keyword moves down to sit level with the title (shared Chinese baseline); the 01, the picture and the arrow keep the
   top line. Picture, keyword and arrow keep their columns. */

 #categories .category-content .row .row-button{grid-template-rows:auto 1fr!important;grid-template-areas:"num visual meta toggle" "title visual meta toggle"!important;row-gap:14px!important;align-content:start}
 
 
 #categories .category-content .row .article-visual{align-self:start!important}
 
 

/* 11-06 (user 02:04 "set the keyword apart with a thin line, then make the title bigger"): a thin full-height rule
   divides the keyword from the picture (at the red line, x 1099 at 1440); the keyword sits right of it. The title is set at
   the detail's title size (English 43px, Chinese .464 of it). */

 #categories .category-content .row .row-meta{grid-area:auto!important;grid-row:1/3!important;align-self:stretch!important;padding-left:22px!important;border-left:1px solid #171b1360!important}/* 02:08: an older rule set border:0 !important on the keyword */
 #categories .category-content .row .row-button .toggle{grid-area:auto!important;grid-row:1!important;position:relative;z-index:1}
 
 

/* 11-06 (user 02:11 "keep this arrangement, adjust positions and type sizes; the picture against the vertical line"):
   the picture moves right to sit 24px from the dividing line (x 801-1075 at 1440), opening the gap after the title;
   the keyword column starts on the line itself; the keyword is set 1.2x the title, as in the detail. */

 
 #categories .category-content .row .row-meta{margin-left:0!important}
 
 

/* 11-06 (user 02:14 "give the number the same colour as the title"): the card's 01 takes the title's colour */

 #categories .category-content .row:not(.row--skeleton) .row-button .number{color:var(--tone,#EEA497)!important}/* 02:15 "no -- the heading's colour": the category heading's tone */

/* 11-06 (user 17:54 "put the number before the title, aligned top and bottom"): the 01 stands in front of the title
   pair, as tall as it -- its top on the English cap top, its foot on the Chinese line -- and the pair sits in the middle
   of the card's height (the keyword follows it, app.js). */

 #categories .category-content .row .row-button .number{grid-area:auto!important;align-self:center!important;justify-self:start!important;font-size:78px!important;line-height:.72!important}/* 17:58: the title pair is tighter, the 01 follows its new height */
 #categories .category-content .row .row-title{grid-area:auto!important;align-self:center!important}

/* 11-06 (user 17:58 "tighten the line spacing of every title to a moderate amount -- it is too big now"): every
   English/Chinese title pair sits closer -- about 8px from the English baseline to the top of the Chinese line (was
   13-16px): the category heading, the card title, the card keyword, and in the detail the article title, the keyword
   and the topic titles. */

 
 #categories .category-content .row .row-title small{margin-top:-2.6px!important}
 #categories .category-content .row .row-meta strong{margin-top:-6.6px!important}
 .reading-article-head h1 .reading-title-local{margin-top:-8.5px!important}
 .story-intro .reading-keyword strong{margin-top:-6.6px!important}
 .story-content .reading-topic .reading-title-local{margin-top:0!important}

/* 11-06 (user 18:07 "the arrow is too small; the back icons all the same size"): the card's open arrow is the same
   icon as the detail's back arrow -- a 24px drawing with the same 1.6 stroke, in a 48px circle */

 #categories .category-content .row .row-button .toggle{width:40px!important;height:40px!important}/* 18:22: the same size as the category heading's open/close button (40px) */

/* 11-06 (user 18:28 "plan this as 3 zones -- 1 number, 2 title, 3 picture or video -- and size the space to the design
   standard"): the card follows its category heading's grid --
     zone 1, number:  x 128-238 (the heading's number column)
     zone 2, title:   x 262-776 -- starts on the heading title's left line ("GENERAL MANUFACTURING", x 262), and is set at
                      the heading title's size (38.88px at 1440) so the one-line title fills the zone
     zone 3, picture: x 800-1074, ending 24px before the keyword's dividing line
   24px between zones; the keyword zone (line at 1098) and the corner arrow are unchanged. */

 #categories .category-content .row .row-button{grid-template-columns:110px 538px 208px minmax(0,1fr) 40px!important;column-gap:24px!important}
 #categories .category-content .row .row-button .number{grid-column:1!important;grid-row:1/3!important}
 #categories .category-content .row .row-title{grid-column:2!important;grid-row:1/3!important;padding-left:0!important;font-size:clamp(30px,2.7vw,42px)!important}
 #categories .category-content .row .row-title small{font-size:calc(clamp(30px,2.7vw,42px)*.464)!important}
 #categories .category-content .row .article-visual{grid-area:auto!important;grid-column:3!important;grid-row:1/3!important}
 #categories .category-content .row .row-meta{grid-column:4/-1!important}
 #categories .category-content .row .row-button .toggle{grid-column:5!important}
 #categories .category-content .row .row-meta .keyword-en{font-size:calc(clamp(30px,2.7vw,42px)*1.2)!important}
 #categories .category-content .row .row-meta strong{font-size:calc(clamp(30px,2.7vw,42px)*1.2*.464)!important}

/* 11-06 (user 18:29 "the 4th, keyword zone, can be adjusted together"): the four zones now sit on the category heading's
   own column lines, so heading and cards read as one grid --
     1 number  128-238   (heading number column ends at 238)
     2 title   262-800   (heading title starts at 262; 538 wide = the longest one-line title, 524, plus room)
     3 picture 824-1032  (ends on the heading title column's end, 1032)
     4 keyword 1056-1312 (dividing line on the heading count column's start, 1056; keyword centred in it)
   24px between zones. */
/* 11-06 (user 18:35 "adjust the title board's titles and content to the design standard"; "unify the line spacing -- this is
   where the linked motion starts, consider it as one"): every title pair on the board follows the same rule as the cards and
   the detail page -- second language = .464 x the English size, Noto Sans SC (--font-title) 500, 8px from the English
   baseline to the Chinese ink top (gap set in the block below after measuring); the heading number is the card number's
   size, so 00-1 -> 01 -> the detail keep one scale. */

 .intro.nameplate h1 span{font:500 calc(clamp(30px,3.5vw,64px)*.464)/1 var(--font-title)!important;letter-spacing:.04em!important}
 #category-overview .category-heading small,#categories .category-heading small{font:500 calc(clamp(26px,2.7vw,46px)*.464)/1 var(--font-title)!important;letter-spacing:.04em!important}
 #category-overview .category-heading .category-number,#categories .category-heading .category-number{font-size:calc(clamp(26px,2.7vw,46px)*2.006)!important;line-height:1!important}
 .nameplate-index>span:last-child{font-family:var(--font-title)!important;line-height:1!important}
 .nameplate-description p:not([lang]){font-family:"Capabilities Inter",sans-serif!important}

/* 11-06 gaps, measured at 1440 with the same probe as the cards (English baseline -> Chinese ink top = 6.9, the card's value):
   hero 17.5 -> 6.9, heading 9.8 -> 6.9. Heading number top = English cap top, like the card number. The 04 block: digit top
   on the hero title's cap top, its label pair's Chinese foot on the hero's Chinese foot. */

 .intro.nameplate h1 span{margin-top:1.4px!important}
 
 .nameplate-index{translate:0 2.2px}
 .nameplate-index .nameplate-label,.nameplate-index>span:last-child{translate:0 -8.8px}

/* 11-06 (user 18:40-18:42 "is the title too small here?" / "don't tie it to the number's top here, design it visually"):
   the category title is the first level, so it now sits between the page title (50.4) and the card title (38.88):
   46px at 1440 (3.2vw); Chinese .464 of it; the 00-1 number keeps its size and is placed visually (block below). */

 #category-overview .category-heading strong,#categories .category-heading strong{font-size:clamp(32px,3.2vw,52px)!important}
 #category-overview .category-heading small,#categories .category-heading small{font-size:calc(clamp(32px,3.2vw,52px)*.464)!important}

 /* gap back to the shared 6.9 at the new size (measured 7.3 with 3.1); the number stays 78px, centred on the title pair */
 #category-overview .category-heading small,#categories .category-heading small,.category-block .category-heading span small{margin-top:2.7px!important}

/* 11-06 collapse the open heading (user 18:47-18:49 "make an effect as you suggested"): --head-k runs 0 -> 1 over the first
   120px of card scrolling (app.js). The bar is painted by ::before and shrinks from 122 to 72px tall (scaleY .59); the
   number, title and button shrink to 60% and move up to the slim bar's centre. Left edges stay put, so the title keeps the
   262 line of the card titles. The button itself lets clicks through; only the painted bar takes them, so the part the
   bar gives up belongs to the cards. */

 #categories .category-block.is-current>.category-heading{background:transparent!important;box-shadow:none!important;pointer-events:none}
 #categories .category-block.is-current>.category-heading::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tone,#EEA497);transform-origin:top;scale:1 calc(1 - var(--head-k,0)*.41);pointer-events:auto}
 #categories .category-block.is-current>.category-heading>.category-number,#categories .category-block.is-current>.category-heading>span:not([class]){transform-origin:left center;translate:0 calc(var(--head-k,0)*-25px);scale:calc(1 - var(--head-k,0)*.4)}
 #categories .category-block.is-current>.category-heading>span:not([class]){transition:none!important}
 #categories .category-block.is-current>.category-heading>.category-toggle{transform-origin:right center;translate:0 calc(var(--head-k,0)*-25px);scale:calc(1 - var(--head-k,0)*.2)}
 #categories .category-block.is-current>.category-heading>.category-count{opacity:calc(1 - var(--head-k,0)*2)}

 /* the focus ring follows the painted bar, not the full-size button box */
 #categories .category-block.is-current>.category-heading:focus-visible{outline:none!important}
 #categories .category-block.is-current>.category-heading:focus-visible::before{outline:2px solid #171b13;outline-offset:-4px}

/* 11-06 (user 18:56 "fix the visual boundary first, then the right fixed zone's position, size and layout"): the detail page
   keeps inside the site edge -- the header's own margin, calc(var(--page)*max(1,var(--kx))) = 68px at 1440:
   left: the 01 number starts on the edge (was 58); its column narrows by the same 10px so the text column still starts at 260.
   right: the card deck (active card + the cards peeking behind it) ends on the edge (was 1397); the keyword and the back
   button sit on the card's own edges, so the right zone reads as one block: keyword left = card left, button right =
   card right. */

 .story-content>.sample-body{padding-left:calc(var(--page)*max(1,var(--kx)))!important}
 .story-content>.sample-body .reading-sheet{grid-template-columns:calc(236px - var(--page)*max(1,var(--kx))) minmax(0,1fr)!important}
 .story-content>.sample-body .reading-article-head{margin-left:calc(260px - var(--page)*max(1,var(--kx)))!important}
 .story-content>.story-intro{padding-right:calc(var(--page)*max(1,var(--kx)))!important}
 .story-toolbar{padding-right:calc(var(--page)*max(1,var(--kx)))!important}
 /* the cards behind are hidden (opacity 0) while reading, so the visible card itself runs to the edge */
 

/* 11-06 (user 19:09, red boxes above the keyword and under the card: "doesn't this need adjusting?"): the right zone sat 17px
   under the header and 28px above the window bottom. It now has the same 40px both ways: the keyword (and the title it
   aligns with on the left) start 40px under the header (keyword cap top; padding 42 measured), the card ends 40px above the bottom (12px of that is the deck inset). */

 .story-content>.sample-body{padding-top:42px!important}
 .story-content>.story-intro{padding-top:42px!important;padding-bottom:28px!important}

/* 11-06 (user 18:35 "unify the line spacing", carried into the detail): the detail's title pairs measured 7.2 / 7.7 / 7.8
   from the English baseline to the Chinese ink top; set to the shared 6.9 of the headings and cards. */

 .story-content .reading-article-head h1 .reading-title-local{margin-top:-8.8px!important}
 .story-content .story-intro .reading-keyword strong{margin-top:-7.4px!important}
 .story-content .reading-topic-title .reading-title-local{margin-top:-.9px!important}

/* 11-06 (user 19:26 #2): skeleton rows -- kept for good as part of the look, each locked until its article is published --
   follow the card's four zones: number (as before), a title pair (an English bar and a shorter Chinese bar, the pair's
   heights and 6.9 gap), the picture block, and a keyword pair centred between the dividing line and the card's edge like
   the real keyword. A lock sits where a published card has its open arrow (40px, 20px in from the top and right). */

 #categories .row--skeleton .row-button{position:relative}
 #categories .row--skeleton .row-title{display:grid!important;align-content:center;justify-items:start}
 #categories .row--skeleton .row-title i:nth-child(1){height:28px!important;width:78%!important;margin:0!important;border-radius:4px!important}
 #categories .row--skeleton .row-title i:nth-child(2){height:15px!important;width:40%!important;margin:7px 0 0!important;border-radius:4px!important}
 #categories .category-content .row.row--skeleton .row-meta{display:grid!important;align-content:center;justify-content:center;justify-items:start;padding-left:34px!important}
 #categories .row--skeleton .row-meta i:nth-child(1){height:34px!important;width:162px!important;margin:0!important;border-radius:4px!important}
 #categories .row--skeleton .row-meta i:nth-child(2){height:18px!important;width:120px!important;margin:7px 0 0!important;border-radius:4px!important}
 #categories .category-content .row.row--skeleton .row-button .toggle{position:absolute!important;top:20px!important;right:20px!important;translate:none!important;margin:0!important;grid-column:auto!important;grid-row:auto!important}

/* 11-06 (user 19:38): the lock is drawn like the skeleton pieces -- a filled 40px disc in the bars' tone with a solid lock
   in a deeper shade of it -- instead of a thin outline icon in a faded ring.
   Numbers (user 19:38 "is 10 a different size?"): same size and height as the others; Barlow's "1" is a narrow figure, so "10"
   looked smaller. Tabular figures give every digit the same width, so 10 takes the same room as 09. */

 #categories .category-content .row.row--skeleton .row-button .toggle{opacity:1!important;border:0!important;background:rgba(0,0,0,.09)!important;color:rgba(0,0,0,.26)!important;place-items:center}
 #categories .category-content .row .row-button .number{font-variant-numeric:tabular-nums}

/* 11-06 (user 19:42): while a category opens or closes, the chosen overview heading stands in for the open heading and
   collapses / opens within the same motion (--head-k on the heading, animated with it). Its bar is painted from the lower
   edge because the heading box itself is moved up by the collapsed amount; the words keep the reading position. */

 #category-overview .category-heading.is-head-docked{position:relative;isolation:isolate;background:transparent!important;box-shadow:none!important}
 #category-overview .category-heading.is-head-docked::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--head-bg);transform-origin:bottom;scale:1 calc(1 - var(--head-k,0)*.41)}
 #category-overview .category-heading.is-head-docked>.category-number,#category-overview .category-heading.is-head-docked>span:not([class]){transform-origin:left center;translate:0 calc(var(--head-k,0)*var(--head-dock-shift,25px));scale:calc(1 - var(--head-k,0)*.4);transition:none!important}
 #category-overview .category-heading.is-head-docked>.category-toggle{transform-origin:right center;translate:0 calc(var(--head-k,0)*var(--head-dock-shift,25px));scale:calc(1 - var(--head-k,0)*.2)}
 #category-overview .category-heading.is-head-docked>.category-count{opacity:calc(1 - var(--head-k,0)*2)}

/* 11-06 (user 19:50-19:51 "the heading shadow is unnatural, it appears suddenly after the motion settles -- make it join
   naturally"): one soft shadow (a hairline and a wide, light falloff instead of the dark 22px band), scaled by --head-shadow
   (0..1). Open heading: 1 only while cards pass under it, eased in/out (.32s). Overview heading standing in during the
   open/close motion: animated with the motion (app.js), so the hand-over shows the same shadow. */

/* 11-06 (user 19:56 "you removed the shadow -- that breaks the design"): back to the designed shadow (0 14px 22px -16px, .55),
   always on while the category is open. What stays from 19:50 is only the joining: the shadow fades in with the opening
   motion and out with the closing motion, so it no longer pops in after the motion has settled. */

 #categories .category-block.is-current>.category-heading::before{box-shadow:0 14px 22px -16px rgba(0,0,0,calc(.55*var(--head-shadow,1)))!important;transition:none}
 #category-overview .category-heading.is-head-docked::before{box-shadow:inset 0 -1px 0 rgba(0,0,0,calc(.13*(1 - var(--head-shadow,0)))),0 14px 22px -16px rgba(0,0,0,calc(.55*var(--head-shadow,0)))!important}
}
/* 11-06 (user 22:41 "on the way back 01 jumps"): the page's 01 uses the same even-width figures as the card's 01, so the
   two line up digit for digit when one turns into the other. */
.story-content .reading-sheet-number{font-variant-numeric:tabular-nums}
/* 11-06 (user 23:02 "the motion card covers the arrow"): while the card turns into the page and back, the back button's
   bar sits above the black card on the right, so the travelling arrow passes over it. */
.story-dialog.is-entering .story-toolbar,.story-dialog.story-closing .story-toolbar{z-index:30!important}
/* 11-06 (user 23:08 "use rounded corners throughout"): the card's picture frame and the article picture both have 10px corners */
#categories .category-content .row .article-visual{border-radius:10px!important;overflow:hidden!important}
.story-content .reading-figure img{border-radius:10px!important}
/* 23:08 (user "the card still covers"): during the card <-> page motion the keyword travels above the black card */
.story-dialog.is-entering .reading-standard-heading,.story-dialog.story-closing .reading-standard-heading{position:relative;z-index:5}

/* 23:55 (user: "use a professional article typography spec - the content is for reading"). Article reading spec,
   desktop (>=901). The text column is 346px at 1440, so the English runs at 15px (about 46 characters a line, inside the
   45-75 range for comfortable reading). English and Chinese share one 26px line rhythm; the Chinese is the second
   language, one size smaller and one step lighter, but with a contrast of about 8:1 so it reads easily.
     body English   15px / 26px, ink #1f231d
     body Chinese   14px / 26px, #4a5045, 6px under its English
     paragraphs     26px apart (one line)
     list items     15px / 26px, 16px apart
     sub heading    English 17px, Chinese 13px #4a5045
     section title  Chinese line 14px #4a5045 (English unchanged)
   Text inside links and buttons (e.g. the dark "Read the technical guide" button) keeps its own colour and size. */
@media (min-width:901px){
 .story-dialog .story-content .reading-topic-copy p,.story-dialog .story-content .reading-topic-copy li,.story-dialog .story-content .reading-topic-copy summary{font-size:15px!important;line-height:26px!important}
 .story-dialog .story-content .reading-topic-copy>p,.story-dialog .story-content .reading-topic-copy details p{margin:0 0 26px!important}
 .story-dialog .story-content .reading-topic-copy li{margin-bottom:16px!important}
 .story-dialog .story-content :not(a)>.reading-copy-en{font-size:15px!important;line-height:26px!important;color:#1f231d!important}
 .story-dialog .story-content :not(a)>.reading-copy-local{font-size:14px!important;line-height:26px!important;color:#4a5045!important;margin-top:6px!important}
 .story-dialog .story-content .reading-topic-copy h3 .reading-title-en{font-size:17px!important;line-height:22px!important}
 .story-dialog .story-content .reading-topic-copy h3 .reading-title-local,.story-dialog .story-content .reading-topic-copy .steps strong .reading-copy-local{font-size:13px!important;line-height:22px!important;color:#4a5045!important;margin-top:0!important}
 .story-dialog .story-content .reading-topic-title .reading-title-local{font-size:14px!important;color:#4a5045!important}
 .story-dialog .story-content a .reading-copy-en,.story-dialog .story-content a .reading-copy-local{color:inherit!important}   /* the dark "Read the technical guide" button: its words were dark on dark */
 .story-dialog .story-content a .reading-copy-local{opacity:.72}
}
/* 00:26 / 00:38 (user approved): a portrait picture shows at its own ratio, full column width, not cropped */
.story-content .reading-figure--portrait img{aspect-ratio:auto!important;object-fit:contain!important;height:auto!important}

/* 18:39 (user: the band under the card): no drop shadow - the page column cut it off into a hard grey band on some window heights.
   11-07 (user 02:12-02:13 "put it on the site", "build it yourself, the old card was a placeholder"): the right black card is
   the card wall (card-wall.mjs). Same box as the old placeholder card: black, 1px rim, radius 12, the 12px foot. Tiles 16:10. */
.card-wall{position:absolute;inset:0 16px 12px 0;box-sizing:border-box;border:1px solid #444944;border-radius:12px;background:#191c1a;overflow:hidden;contain:strict;isolation:isolate;pointer-events:none}
@media(min-width:901px){.story-content>.story-intro .card-wall{inset:0 0 12px 0}}
.card-wall-tile{position:absolute;left:0;top:0;overflow:hidden;background:#2b302c;transform-origin:0 0;will-change:transform;backface-visibility:hidden}   /* moved and scaled by transform only, each on its own layer (card-wall.mjs) */
.card-wall-tile.is-feature{z-index:2}
.card-wall-tile img{display:block;width:100%;height:100%;object-fit:cover}

/* 19:38 (user: "the first refresh flashes a frame of something"): the page's static article (kept in the page for search engines)
   is not painted before the app takes the page over (app.js adds .content-app in the same moment) */
html:not(.content-app) #main{visibility:hidden}
/* 11-07 (user 21:38 chose "1 向右推进" in the demo "专区出场方案"): pointer on a category band's title (the 00-1 ... rows,
   on the directory and in the list under an open category): the band lightens a little and its number and title move
   right (16px / 28px), easing back when the pointer leaves; the + already fills dark on hover. The push is one length on the
   title button (--heading-push) that eases there; the number and title only read it, so it also eases back smoothly when a
   click opens the category (the docked title's own parts take no transitions). transform only: docking uses translate/scale. */
@property --heading-push{syntax:'<length>';inherits:true;initial-value:0px}
/* 21:54 (user: the band went dark): the band's colour is the title button's own background (var(--tone)), so the light is a
   white layer laid over it (--heading-light = its strength), not a new background colour */
@property --heading-light{syntax:'<number>';inherits:false;initial-value:0}
@media(hover:hover) and (min-width:901px){
 .category-heading{transition:--heading-light .6s cubic-bezier(.16,1,.3,1),--heading-push .6s cubic-bezier(.16,1,.3,1)}
 main .category-overview-item .category-heading,#categories .category-block>.category-heading{background-image:linear-gradient(rgb(255 255 255/var(--heading-light)),rgb(255 255 255/var(--heading-light)))}   /* after the band rules' background shorthand */
 .category-heading>.category-number{transform:translateX(calc(var(--heading-push)*16/28))}
 .category-heading>span:not([class]){transform:translateX(var(--heading-push))}
 main[data-directory-phase="overview"] .category-overview-item .category-heading:hover,#categories .category-block:not(.is-current)>.category-heading:hover{--heading-push:28px;--heading-light:.12}
}
@media(prefers-reduced-motion:reduce){.category-heading{transition:none!important}}

/* 11-08 01:15 S01 fixed units (app.js fixedSheets), layout B (user 01:11): the article's own sheet / title / text columns.
   Item = English name in the display face, the page's language under it, then its content. Tags as the drawing formats.
   No rules between items (user 11-07 23:24). One spacing scale: 6 / 12 / 24 / 36. */
.story-content .fx-items{display:grid;gap:24px}
.story-content .fx-items--names{gap:16px}
.story-content .reading-topic-copy .fx-rows+.fx-subhead{margin-top:36px}
.story-content .fx-name .fx-en,.story-content .fx-name .fx-local{display:block}
.story-content .fx-name .fx-en{font:700 19px/1.15 var(--font-display);letter-spacing:.01em;color:#101111}
.story-content .fx-name .fx-local{margin-top:4px;font:500 13px/18px var(--font-title);color:#4a5045}
.story-content .fx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.story-content .fx-tag{display:inline-block;padding:0 9px;border-radius:6px;background:#e3e2da;font:600 12px/26px var(--font-body);letter-spacing:.03em;color:#1f231d;white-space:nowrap}
.story-content .fx-types{margin-top:12px}
.story-content .fx-types .fx-en,.story-content .fx-text .fx-en{display:block;font:400 14px/22px var(--font-body);color:#1f231d}
.story-content .fx-types .fx-local,.story-content .fx-text .fx-local{display:block;margin-top:2px;font:400 13px/20px var(--font-body);color:#4a5045}
/* 04 inspection */
.story-content .reading-topic-copy .fx-subhead{margin:36px 0 12px}
.story-content .reading-topic-copy .fx-subhead:first-child{margin-top:0}
.story-content .fx-block{margin:0 0 24px}
.story-content .fx-block:last-child{margin-bottom:0}
.story-content .fx-model{margin-top:6px;font:600 14px/20px var(--font-body);letter-spacing:.02em;color:#1f231d}
.story-content .fx-spec{margin:12px 0}
.story-content .fx-label{display:flex;flex-wrap:wrap;gap:0 6px;margin:12px 0 6px;font:600 11px/16px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#6b7166}
.story-content .fx-label .fx-local{text-transform:none;letter-spacing:.02em;font-weight:500}
.story-content .fx-label .fx-local::before{content:'/ '}
.story-content .fx-value{font:700 30px/1 var(--font-display);color:#101111}
.story-content .fx-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}   /* 11-08 18:27: a machine's quantity / travel / Ra / accuracy, two by two */
.story-content .fx-specs .fx-model{margin-top:0}
/* 11-08 18:36 (user): a unit with groups -- its title across the top, then each group's title in the left column beside its content */
.story-content>.sample-body .reading-sheet--grouped>.fx-sheet-head{grid-column:2;grid-row:1;padding:0 0 14px}   /* 18:42 (user): the unit title above the line */
.story-content>.sample-body .reading-sheet--grouped>.reading-sheet-group{grid-column:2;grid-row:2}
.story-content>.sample-body .reading-sheet--grouped>.reading-sheet-number{grid-row:1/span 2}   /* the number beside the title and the rows, so the line sits right under the title */
.story-content .fx-group-title{padding:24px 0 0}   /* 18:51 (user): the group's title under the rule, one line: English, its page-language name beside */
.story-content .reading-sheet-panel>.fx-group-title:not(:first-child){background:linear-gradient(#171b1360,#171b1360) 0 0/100% 1px no-repeat}   /* 18:52 (user): a thin rule over each later group too, its title under it (the same line as the unit's rule) */
/* 19:14 (user): each brand once, at the top of its machines; a thin rule between the two equipment groups */
.story-content .fx-maker{margin:0 0 10px}
.story-content .fx-block+.fx-maker{margin-top:32px}
.story-content [data-fixed="manufacturing"] .fx-group+.fx-group{background:linear-gradient(#171b1360,#171b1360) 0 0/100% 1px no-repeat}
/* 19:22 (user): more space between the units -- 40px more above each fixed unit (02 onward) */
.story-content>.sample-body .reading-sheet--fixed{padding-top:40px}
/* 19:17 (user): a mark before each machine model; 19:31 (user): a solid triangle, for the inspection equipment models too */
.story-content .fx-block>.fx-model{position:relative}
.story-content .fx-block>.fx-model::before{content:'';position:absolute;left:-14px;top:6px;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
/* 19:31 (user): a dot before each inspection list row (functions, tools, test scope), hanging left of the text as the machine marks */
.story-content .fx-row{position:relative}
.story-content .fx-row::before{content:'';position:absolute;left:-13px;top:8px;width:4px;height:4px;border-radius:50%;background:currentColor}

.story-content .fx-group-title .reading-title-en{display:inline!important}
.story-content .fx-group-title .reading-title-local{display:inline-block!important;margin:0 0 0 12px!important}
.story-content .fx-text{margin-top:6px}
.story-content .fx-rows{display:grid;gap:6px;margin-top:6px}
.story-content .fx-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.story-content .fx-row .fx-en{font:400 14px/20px var(--font-body);color:#1f231d}
.story-content .fx-row .fx-local{flex:none;max-width:48%;text-align:right;font:400 13px/20px var(--font-body);color:#4a5045}
/* 05 drawing formats */
.story-content .fx-formats{display:grid;gap:12px}
.story-content .fx-format{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;column-gap:12px}
.story-content .fx-format-label{font:700 17px/26px var(--font-display);color:#101111}
.story-content .fx-format .fx-tags{margin-top:0}
/* 01 skeleton until the new article is written (user 11-07 22:55) */
.story-content .fx-title-skel{display:grid;gap:10px;align-content:start;align-self:start;padding-top:4px}
.story-content .fx-title-skel span{display:block;height:20px;border-radius:6px;background:#e3e2da}
.story-content .fx-title-skel span:first-child{width:86%}.story-content .fx-title-skel span:last-child{width:48%;height:12px}
.story-content .fx-pending{display:grid;gap:12px;padding-top:6px}
.story-content .fx-bar{display:block;height:12px;border-radius:6px;background:#e3e2da}
.story-content .fx-bar:nth-child(1){width:92%}.story-content .fx-bar:nth-child(2){width:74%}.story-content .fx-bar:nth-child(3){width:84%}.story-content .fx-bar:nth-child(4){width:58%}
.story-content .reading-topic--draft .fx-pending+.reading-figure+.fx-pending,.story-content .reading-topic--draft .fx-pending+.fx-pending{margin-top:0}

/* 11-08 02:00 (user: the kinds list runs too long -- English left, page language right on one line): the sample's bullet rows,
   page language right-aligned on the same line; the grade standard sits beside 加工材料 */
.story-dialog .story-content .reading-topic-copy ul.fx-split li{margin-bottom:6px!important}
.story-dialog .story-content .reading-topic-copy ul.fx-split li::after{content:'';display:block;clear:both}
.story-dialog .story-content .reading-topic-copy ul.fx-split li .reading-copy-en{display:inline}
.story-dialog .story-content .reading-topic-copy ul.fx-split li .reading-copy-local{float:right;margin:0 0 0 16px!important;text-align:right}
.story-content [data-fixed="materials"] .reading-topic-title .reading-title-local{display:inline-block}
.story-content [data-fixed="materials"] .reading-topic-title .fx-standard{display:inline-block;margin:0 0 0 12px;vertical-align:baseline}
/* 11-08 02:13 the "material grades" button: the sample's dark read bar across the text column (where the user marked it),
   English left, page language right, like the kinds above it */
.story-content .reading-topic--fixed .fx-grades-button{cursor:pointer;display:flex;width:100%;box-sizing:border-box;justify-content:center;gap:16px;white-space:nowrap;margin-top:26px}   /* one line: at 1143 the sample's 40px gap wrapped the words; 17:47 (user): words in the middle */
/* 23:14 (user): hover motion; 23:38 (user: "the button feels poor"): the words grow a little and light up, and the arrow steps on */
.story-content .reading-topic--fixed .fx-grades-button{transition:color .32s cubic-bezier(.22,.61,.36,1)}   /* 23:44 (user): keep the design's colours - the words stay as designed and only brighten on hover. 23:47 (user): text that moves or
   grows shakes when it settles - so the words never move or scale; only their colour changes, and the arrow moves by 4px (a whole
   device pixel at 100/125/150/175%) */
.story-content .reading-topic--fixed .fx-grades-button .fx-arrow{display:inline-block;margin-left:.3em;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.story-content .reading-topic--fixed .fx-grades-button:hover{color:#fff}.story-content .reading-topic--fixed .fx-grades-button:hover .fx-arrow{transform:translateX(4px)}}
.story-content .reading-topic--fixed .fx-grades-button:focus-visible{outline:2px solid #171b13;outline-offset:3px}
.story-content .reading-topic--fixed .fx-grades-button[aria-expanded="true"] .fx-arrow{transform:translateX(4px)}   /* while the table is open the arrow stays stepped on */
/* 11-08 17:34-17:35 (user): a function button in the body typesetting, one arrow only, set further from the text (one 26px line, the spec's paragraph gap) */
.story-dialog .story-content .reading-topic--fixed .fx-grades-button .reading-copy-en{font-size:15px!important;line-height:26px!important}
.story-dialog .story-content .reading-topic--fixed .fx-grades-button .reading-copy-local{font-size:14px!important;line-height:26px!important;margin-top:0!important}


/* 19:37 (user: lay it out for looks -- clear to read): one type scale for the fixed units
     unit title          28 / page language 14 under it (as every unit)
     group title (left)  22 / 13 -- under the unit title, over the items
     item name           19 (brand, gauge group, test)
     model, text, lists  15 English / 14 page language, 24px lines (the article's body sizes)
     labels              11 capitals
   marks: triangle before a model, dot before a list row, centred on the first line */
.story-content .fx-group-head .reading-topic-title .reading-title-en{font-size:22px!important;line-height:1.1!important}
.story-content .fx-group-head .reading-topic-title .reading-title-local{font-size:13px!important}
.story-content .fx-block>.fx-model{font-size:15px;line-height:22px}
.story-content .fx-block>.fx-model::before{top:7px}
.story-content .fx-text .fx-en{font-size:15px;line-height:24px}
.story-content .fx-text .fx-local{font-size:14px;line-height:22px}
.story-content .fx-row .fx-en{font-size:15px;line-height:24px}
.story-content .fx-row .fx-local{font-size:14px;line-height:24px}
.story-content .fx-row::before{top:10px}
.story-content .fx-specs .fx-model{font-size:15px;line-height:22px}
.story-content .fx-specs>div{display:flex;flex-direction:column}
.story-content .fx-specs>div>.fx-model{margin-top:auto}
/* 19:38 (user: each unit clearly apart): the rule over each fixed unit in full ink and 2px (the inner rule between groups stays light),
   and 24px more space above each unit */
.story-content>.sample-body .reading-sheet--fixed{padding-top:64px}
.story-content .reading-sheet--fixed>.reading-sheet-group{border-top-width:2px;background-image:linear-gradient(#171b13,#171b13);background-size:100% 2px}
/* 19:52 (user: "the line spacing is not regular"): every fixed unit's title and group title keeps its page-language name the same
   4px under the English (the materials title, whose name sits in one line with its standard, already did; the others touched it) */
.story-dialog .story-content .reading-sheet--fixed .reading-topic-title .reading-title-local{margin-top:4px!important}
.story-dialog .story-content [data-fixed="materials"] .reading-topic-title .reading-title-local{margin-top:0!important}
/* 11-08 21:44 (user): the material grades table, opened by its button in the right-hand panel -- the card wall's own frame, dark,
   scrolling inside; the page's own standard in the first column, in white */
.fx-grades-panel{position:absolute;inset:0 16px 12px 0;z-index:3;display:flex;flex-direction:column;box-sizing:border-box;border:1px solid #444944;border-radius:12px;background:#191c1a;color:#d9dad2;overflow:hidden;visibility:hidden;pointer-events:auto}   /* 23:09: the entrance and exit are run in app.js (toggleGrades), like the card's */
.fx-grades-body{position:relative;flex:1 1 auto;min-height:0}   /* 23:00 (user): the title scrolls away with the table; only the close button stays in the corner */
.fx-grades-scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:14px 22px 22px 18px;scrollbar-width:none}   /* 22:06 (user): no system scroll bar; the simple thumb below */
.fx-grades-scroll::-webkit-scrollbar{display:none}
.fx-grades-scroll:focus{outline:none}
.fx-grades-thumb{position:absolute;z-index:2;top:62px;right:7px;width:3px;height:36px;border-radius:3px;background:#8a9085;cursor:grab;touch-action:none}   /* the .reading-scroll-thumb look */
.fx-grades-thumb:hover,.fx-grades-thumb:active{background:#c5c7bf}
.fx-grades-thumb:active{cursor:grabbing}
@media(min-width:901px){.story-content>.story-intro .fx-grades-panel{inset:0 0 12px 0}}
.fx-grades-panel.is-open{visibility:visible}
.fx-grades-panel:focus{outline:none}
.fx-grades-head{padding:0 40px 14px 0}   /* room for the x */
.fx-grades-title .fx-gk-en{display:block;font:700 22px/1.1 var(--font-display);color:#f7f7ef}
.fx-grades-title .fx-gk-local{display:block;margin-top:4px;font:500 13px/1.4 var(--font-title);color:#a9ada3}
.fx-grades-close{position:absolute;z-index:3;top:12px;right:12px;display:block;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:#f7f7ef;cursor:pointer;transition:opacity .2s ease;opacity:.85}   /* 23:56 (user): the original white ring with an x, 24px; no CSS border (a 1px border broke at 175%) - the ring is in the vector */
.fx-grades-close svg{display:block;width:24px;height:24px;shape-rendering:geometricPrecision}
.fx-grades-close:hover{opacity:1}
.fx-grades-note{display:block;margin:10px 0 12px;font:400 12px/18px var(--font-body);color:#a9ada3}
.fx-grades-note .fx-gk-en,.fx-grades-note .fx-gk-local{display:block}
.fx-grades-foot{margin:12px 0 0}
.fx-grades-scroll>.fx-grades-note:first-child{margin-top:0}
.fx-grades-table{width:100%;border-collapse:collapse;table-layout:fixed;font:400 12px/16px var(--font-body)}
.fx-grades-table thead th{position:sticky;top:-14px;z-index:2;background:#191c1a;padding:14px 6px 14px 0;border-bottom:1px solid #444944;box-shadow:inset 0 -1px 0 #444944;text-align:left;font:600 12px/22px var(--font-body);letter-spacing:0;color:#a9ada3}   /* 23:07 (user): the region bar bigger */   /* the shadow keeps the rule while the head is stuck (a collapsed border scrolls away) */
.fx-grades-table thead th:first-child{color:#f7f7ef}
.fx-grades-table thead .fx-gc-astm{width:23.2%}   /* 22:16 (user): ASTM the reference column; at 1143 its widest word is 100-70-03 (62px), GB's W6Mo5Cr4V2 (81px) */
.fx-grades-table thead .fx-gc-gb{width:28.8%}   /* the long GB names (015Cr21Ni26Mo5Cu2) break once, at an element (app.js gradeCell) */
.fx-grades-table thead .fx-gc-jis{width:24.5%}
.fx-grades-table thead .fx-gc-ks{width:24%}
.fx-grades-table:not(.fx-grades-plastics) th,.fx-grades-table:not(.fx-grades-plastics) td{padding-right:4px}
.fx-grades-table:not(.fx-grades-plastics) td{overflow-wrap:normal;vertical-align:middle}   /* no grade broken inside a word; 22:54 (user): in a two-line row the other grades sit in the middle */
.fx-grades-table .fx-gc-sub{display:block;margin-top:1px;font:400 11px/14px var(--font-body);color:#8d9188}   /* 630 / (17-4PH) */
.fx-grades-table thead th{white-space:nowrap}
.fx-grades-table thead .fx-gc-land{margin-right:4px;font:400 12px/22px var(--font-title);letter-spacing:0;color:#8d9188}   /* 22:03 (user): each standard's country, under its code (beside it ASTM wrapped in its narrow column) */
.fx-grades-table thead th:first-child .fx-gc-land{color:#a9ada3}   /* the page's own standard; Chinese stainless grades are the longest (015Cr21Ni26Mo5Cu2) */
.fx-grades-table td{padding:5px 6px 5px 0;vertical-align:top;color:#c9cbc2;overflow-wrap:anywhere}
.fx-grades-table td:first-child{color:#f7f7ef;font-weight:600}
.fx-grades-kind th{position:sticky;top:36px;z-index:1;background:#191c1a;padding:14px 0 5px;text-align:left;font-weight:400}   /* 22:57 (user): the material kind stays at the top, under the column head (stuck at -14px, 50px high) */
.fx-grades-plastics .fx-grades-kind th{top:-14px}   /* no column head over the plastics */
.fx-gk .fx-gk-en{font:700 17px/22px var(--font-display);color:#f7f7ef}   /* 22:57 (user): material names bigger -- the page's material subheads, 17 / 13 */
.fx-gk .fx-gk-local{margin-left:8px;font:400 13px/22px var(--font-title);color:#a9ada3}
.fx-grades-plastics{margin-top:4px;table-layout:auto}
.fx-grades-plastics td:first-child{width:72px}
.fx-gk-name .fx-gk-en{display:block}
.fx-gk-name .fx-gk-local{display:block;color:#a9ada3}
/* 11-10 22:37 (user, bilingual article detail): "品牌这里不用了，是放英文关键词" - the English keyword takes SEICHUNG's place, at the English page's size
   (EN_CSS: 1.008 x, one line), the page-language keyword under it as before */
@media(min-width:901px){.story-intro .reading-keyword .keyword-en--text{white-space:nowrap;font-size:calc(1.008 * clamp(34px,3vw,46px))!important}}
/* 11-10 22:41 (user: "测试版有BUG，选不到语言"): on an article the language list dropped behind the article overlay (.story-dialog z 40,
   header z 20) - lift the header above it only while the language menu is open, so nothing else changes */
.site-header:has(.sz-lang__btn[aria-expanded="true"]){z-index:45}
/* 11-10 22:48: bilingual cards - the English keyword at the English card's size (EN_CSS: 1.2 x .5 of the detail clamp, one line, as written) */
@media(min-width:901px){#categories .category-content .row .row-meta .keyword-en.keyword-en--text{font-size:calc(clamp(34px,3vw,46px) * 1.2 * .5)!important;line-height:1!important;text-transform:none!important;white-space:nowrap}}
/* 11-11 23:2x (user, screenshot: the p of "Custom precision parts" ran into 精密零件定制; chose B "中文往下移"): bilingual text keyword - the Chinese line drops
   below the English descenders, leaving the same gap as under the left title (about .11 of the English size); the English stays on the title's English baseline (app.js) */
@media(min-width:901px){.story-content .story-intro .reading-keyword .keyword-en--text+strong{margin-top:calc(-7.4px + .147 * 1.008 * clamp(34px,3vw,46px))!important}
 #categories .category-content .row .row-meta .keyword-en.keyword-en--text+strong{margin-top:calc(-6.6px + .112 * .6 * clamp(34px,3vw,46px))!important}}