/* Brand kits: plain pages in TechNext branding (technext.asia site.css tokens). Compact: 15 px body, tight cards. */
:root{
  --blue:#3167CA;--navy:#1E4691;--sky:#6FA0F5;--mist:#DDE7F8;--wash:#EAF0FB;--ink:#1F1F3D;--body:#4C4C63;--muted:#62627A;--line:#E7E4E9;--alt:#FAF9FB;
  --ok:#137A4A;--red:#C0392B;
  --fd:"Plus Jakarta Sans",system-ui,"Segoe UI",sans-serif;--fb:Inter,system-ui,"Segoe UI",sans-serif;--fh:Caveat,"Segoe Print",cursive;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --f-display:var(--fd);--f-body:var(--fb);--f-hand:var(--fh);--r:12px;--r-s:8px;--sh:0 1px 2px rgba(31,31,61,.06),0 8px 24px -18px rgba(31,31,61,.25);--sh-m:0 2px 6px rgba(31,31,61,.06),0 24px 48px -28px rgba(31,31,61,.35);
  --ease:cubic-bezier(.2,.8,.2,1);color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:#fff;color:var(--body);font:400 15px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue)}
code{font:500 12.5px/1.4 var(--mono);color:var(--ink);background:var(--alt);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--fd);color:var(--ink);margin:0;letter-spacing:-.015em}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.top-logo img{height:24px;width:auto}
.top-logo span{font:600 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid var(--line)}
.top-nav{display:flex;gap:4px;overflow-x:auto}
.top-nav a{font:600 14px/1 var(--fb);color:var(--body);text-decoration:none;padding:9px 12px;border-radius:99px;white-space:nowrap}
.top-nav a:hover{background:var(--wash);color:var(--navy)}
.top-nav a[aria-current]{background:var(--blue);color:#fff}

/* hero */
.hero{background:radial-gradient(700px 300px at 85% 0%,rgba(111,160,245,.35),transparent 60%),linear-gradient(140deg,#0F2350,#1E4691 55%,#2D5DB8);color:rgba(255,255,255,.82)}
.hero-in{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center;padding-top:34px;padding-bottom:34px}
.eyebrow{font:700 12px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:#A9C8FF;margin:0 0 10px}
.hero h1{font-size:40px;font-weight:800;color:#fff;letter-spacing:-.025em;line-height:1.05}
.hero h1 span{color:#A9C8FF}
.hero .lead{margin:10px 0 0;max-width:640px;font-size:16px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:16px}
.hero-meta small{display:block;font-size:12px;color:rgba(255,255,255,.6)}
.hero-meta b{font:700 14px/1.35 var(--fd);color:#fff}
.hero-card{background:#fff;border-radius:18px;padding:24px 26px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.hero-card img{max-height:96px;max-width:300px;width:auto}
.hero-card small{font:600 11px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.strip{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.strip i{flex:1}
.hero-ix{padding:36px 0 34px}

/* layout */
.layout{display:grid;grid-template-columns:168px 1fr;gap:36px;padding-top:24px;padding-bottom:48px}
.side{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:2px}
.side a{font:500 14px/1 var(--fb);color:var(--body);text-decoration:none;padding:8px 10px;border-radius:8px;border-left:2px solid transparent}
.side a:hover{background:var(--alt)}
.side a.on{color:var(--navy);background:var(--wash);border-left-color:var(--blue);font-weight:600}
.side .print{margin-top:10px;color:var(--blue);font-weight:600}
.main{min-width:0}
.sec{padding:22px 0 26px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0;padding-top:4px}
.sec>h2{font-size:22px;font-weight:800;display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sec>h2 span{font:600 22px/1 var(--fh);color:var(--blue);transform:rotate(-2deg);display:inline-block}
.note{margin:-4px 0 12px;font-size:14px;color:var(--muted);max-width:820px}
.sub{font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px}
.src{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.g2-w{grid-template-columns:1.4fr 1fr}
.g2-n{grid-template-columns:.8fr 1.5fr}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.stack{display:flex;flex-direction:column;gap:10px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.card p{margin:0;font-size:14px;line-height:1.5}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px;background:#fff}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--line);line-height:1.45}
.tbl tr:last-child>*{border-bottom:0}
.tbl tbody th{width:150px;font:600 11.5px/1.6 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--alt)}
.tbl td{color:var(--ink)}
.tbl thead th{font:600 11px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--alt);padding:10px 12px}
.tbl .m{font:500 12.5px/1.45 var(--mono);color:var(--muted);white-space:nowrap}
.scale td:nth-child(2){white-space:nowrap;overflow:hidden}
.scale td span{display:inline-block;max-width:100%}
.fmt tbody th{width:auto;text-transform:none;letter-spacing:0;font:700 14px/1.35 var(--fd);color:var(--ink);background:#fff}
.fmt td.th{width:118px;padding:6px}
.fmt td.th img{width:106px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}
.fmt td:last-child{color:var(--body)}

/* family, nexi */
.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fam-c{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:#fff}
.fam-c img{height:46px;width:auto;object-fit:contain}
.fam-c b{font:700 13px/1.2 var(--fd);color:var(--ink)}.fam-c small{font-size:11.5px;color:var(--muted)}
.fam-c.me{border:2px solid var(--blue)}
.kit-src{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.kit-sub{font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.kit-nexi{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.kit-nexi figure{margin:0;border:1px solid var(--line);border-radius:10px;padding:6px 4px 30px;display:flex;flex-direction:column;align-items:center;position:relative;background:#fff}
.kit-nexi img{height:58px;width:auto}
.kit-nexi figcaption{font-size:11px;color:var(--muted)}
.kit-nexi .dl{position:absolute;bottom:5px;left:50%;transform:translateX(-50%)}

/* downloads */
.dl{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--fb);letter-spacing:.05em;color:var(--navy);background:var(--wash);padding:5px 8px;border-radius:99px;text-decoration:none;white-space:nowrap}
.dl:hover{background:var(--blue);color:#fff}
.dl svg{width:12px;height:12px}

/* logo viewer */
.lg-wrap{display:flex;flex-direction:column;gap:8px}
.lg-stage{height:250px;border-radius:var(--r);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden;background:#fff;transition:background .3s var(--ease)}
.lg-stage[data-bg=soft]{background:var(--wash)}
.lg-stage[data-bg=dark]{background:#0F2350}
.lg-stage[data-bg=brand]{background:var(--blue)}
.lg-stage[data-bg=photo]{background:#333 var(--photo) center/cover}
.lg-img{position:relative;z-index:1;max-width:78%;max-height:70%;width:auto;height:auto;object-fit:contain}
.lg-img[hidden]{display:none}
.lg-stage.is-guides .lg-img{outline:2px dashed rgba(214,31,38,.85);outline-offset:var(--cs,20px)}
.lg-stage.is-guides::after{content:attr(data-cs-label);position:absolute;left:10px;bottom:8px;font:700 11px/1 var(--fb);color:#D61F26;background:#fff;padding:5px 7px;border-radius:5px;z-index:2}
.lg-bgs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lg-bgs .sp{flex:1}
.lg-bgs button,.seg button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 11px;font:600 13px/1 var(--fb);color:var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lg-bgs button i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.lg-bgs button[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* files */
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.file{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.file-v{height:96px;display:grid;place-items:center;padding:12px;border-bottom:1px solid var(--line)}
.file-v img{max-height:66px;max-width:80%;width:auto;object-fit:contain}
.file-t{padding:9px 12px 11px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:start}
.file-t b{font:700 13.5px/1.3 var(--fd);color:var(--ink)}
.file-t small,.file-t code{grid-column:1/-1}
.file-t small{font-size:12.5px;line-height:1.4}
.file-t code{font-size:11px;margin-top:3px}

/* misuse */
.mis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dn{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dn-v{height:76px;display:grid;place-items:center;background:var(--alt);position:relative;overflow:hidden}
.dn-v img{max-width:72%;max-height:54%}
.dn-v span{font-size:70%!important;transform:scale(.8)}
.dn p{margin:0;padding:6px 8px 8px 28px;font-size:12px;line-height:1.35;position:relative}
.dn p::before{content:"";position:absolute;left:8px;top:7px;width:14px;height:14px;border-radius:50%;background:#D33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px no-repeat}
.dn.ok p::before{background:#1A8A55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.dn.no .dn-v::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(211,51,51,.5) calc(50% - 1px),rgba(211,51,51,.5) calc(50% + 1px),transparent calc(50% + 1px))}

/* swatches */
.sws{display:grid;gap:8px}
.sws-p{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sws-s{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sw{--c:#ccc;text-align:left;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s var(--ease),box-shadow .15s}
.sw:hover,.sw:focus-visible{transform:translateY(-2px);box-shadow:var(--sh-m);outline:0}
.sw-chip{display:block;height:44px;background:var(--c);position:relative}
.sw-big .sw-chip{height:74px}
.sw.sw-light .sw-chip{box-shadow:inset 0 -1px 0 var(--line)}
.sw-chip::after{content:"Copied";position:absolute;top:6px;right:6px;font:700 10px/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;padding:4px 6px;border-radius:99px;background:rgba(0,0,0,.4);color:#fff;opacity:0}
.sw.is-copied .sw-chip::after{animation:cp 1.3s var(--ease)}
@keyframes cp{15%,75%{opacity:1}}
.sw-t{display:block;padding:7px 10px 9px}
.sw-t b{display:block;font:700 13.5px/1.25 var(--fd);color:var(--ink)}
.sw-t code{background:none;padding:0;font-size:12px}
.sw-rgb{display:block;font-size:11px;color:var(--muted)}
.sw-role{display:block;font-size:12px;line-height:1.35;margin-top:3px}
.sw-c{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.sw-c span{display:block}.sw-c b{display:inline;font:700 11px/1 var(--fb);color:var(--ink)}
.sws-s .sw-rgb,.sws-s .sw-c{display:none}
.ratio{display:flex;height:28px;border-radius:7px;overflow:hidden;margin-top:10px;box-shadow:inset 0 0 0 1px var(--line)}
.ratio i{display:flex;align-items:center;padding:0 10px;font:600 12px/1 var(--fb);font-style:normal;color:#fff;white-space:nowrap;overflow:hidden}
.ratio i.lt{color:var(--ink)}
.grads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.grad{height:56px;border-radius:10px;display:flex;align-items:flex-end;padding:8px 10px;color:#fff;font:500 11.5px/1.3 var(--mono);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* type */
.tss{display:grid;gap:10px}
.tss-2{grid-template-columns:1fr 1fr}.tss-3{grid-template-columns:1fr 1fr 1fr}
.ts{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
.ts-h b{display:block;font-size:17px;font-weight:800;color:var(--ink)}
.ts-h small{font-size:12px;color:var(--muted)}
.ts-line{color:var(--ink);line-height:1.15;outline:0;border-radius:6px;padding:2px 4px;margin:0 -4px;min-height:1.2em;overflow-wrap:anywhere}
.ts-line:focus{box-shadow:0 0 0 2px var(--blue)}
.ts-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{padding:5px 9px;font-size:12px}
.ts-ctl input{accent-color:var(--blue);width:110px}
.ts-px{font:500 11.5px/1 var(--mono);color:var(--muted)}

/* motion curves */
.ez{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.ez:hover{border-color:var(--blue)}
.ez b{display:block;font:700 13px/1.2 var(--fd);color:var(--ink)}
.ez code{background:none;padding:0;font-size:11px;color:var(--muted)}
.ez-t{height:6px;border-radius:99px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.ez-t i{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--blue)}
.ez.is-run .ez-t i{animation:ez var(--dur,800ms) var(--fn) forwards}
@keyframes ez{to{left:100%}}

/* imagery */
.lib{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:8px}
.pic{margin:0;border-radius:10px;overflow:hidden;position:relative;background:var(--alt)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:11.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.zoom{cursor:zoom-in}
.ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--ink)}

/* wording, rules */
.traits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.traits span{font:700 13px/1 var(--fd);padding:8px 12px;border-radius:99px;border:1px solid var(--line);color:var(--ink);background:#fff}
.traits span:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.ck{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink)}
.ck li{padding-left:24px;position:relative;line-height:1.45}
.ck li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#1A8A55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.no .ck li::before{background:#D33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat}
.yes h3{color:#1A8A55}.no h3{color:var(--red)}
.open{background:#FFFBF2;border-color:#F1DDB0}
.qr-c{display:flex;gap:14px;align-items:center}
.qr-c svg{width:92px;height:92px;flex:none}
.qr-c b{display:block;font:700 15px/1.3 var(--fd);color:var(--ink)}
.qr-c small{font-size:12.5px;color:var(--muted);line-height:1.4}

/* index */
.ix{padding-top:24px;padding-bottom:48px;display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start}
.kcs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.kc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s}
.kc:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.kc-v{height:120px;display:grid;place-items:center;background:var(--alt);padding:16px}
.kc-v img{max-height:84px;max-width:70%;width:auto}
.kc .strip{border-radius:0;height:10px}
.kc-t{padding:12px 16px 14px}
.kc-t>b{font:800 18px/1.2 var(--fd);color:var(--ink)}
.kc-t>small{display:block;font-size:12.5px;color:var(--muted)}
.kc dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:10px 0}
.kc dt{font:600 10.5px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kc dd{margin:3px 0 0;font-size:13px;color:var(--ink)}
.go{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--fb);color:var(--blue)}
.go svg{width:14px;height:14px}
.ix-l{margin:6px 0 0;padding-left:20px;font-size:14px;color:var(--ink);display:flex;flex-direction:column;gap:3px}

/* footer, toast, lightbox */
.foot{border-top:1px solid var(--line);background:var(--alt)}
.foot-in{display:flex;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;font-size:12.5px;color:var(--muted)}
.foot a{font-weight:700;text-decoration:none}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:9px 16px;border-radius:99px;font:600 13px/1 var(--fb);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,12,24,.86);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;cursor:zoom-out;padding:24px}
.lb.on{opacity:1;pointer-events:auto}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.lb img{max-width:min(1200px,100%);max-height:84vh;object-fit:contain;border-radius:10px}
.lb figcaption{color:rgba(255,255,255,.85);font-size:14px;text-align:center}

@media (max-width:1000px){
  .layout{grid-template-columns:1fr}.side{position:static;flex-direction:row;flex-wrap:wrap}.side a{border-left:0}
  .hero-in,.g2,.g2-w,.g2-n,.g3,.tss-2,.tss-3,.ix{grid-template-columns:1fr}
  .mis,.lib{grid-template-columns:repeat(2,1fr)}.kcs{grid-template-columns:1fr}.kit-nexi{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){.wrap{padding:0 16px}.top-logo span{display:none}.hero h1{font-size:30px}.tbl tbody th{width:110px}.fmt td.th{display:none}.ez{grid-template-columns:1fr}}
@media print{.top,.side,.foot,.lg-bgs,.ts-ctl,.toast,.lb{display:none!important}.layout{grid-template-columns:1fr}.sec{break-inside:avoid-page}.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.scale .m{white-space:normal;width:210px}
.ts-px{min-width:40px}

/* no overlaps: captions sit under pictures; tables never spill; ratio labels clip */
.lib{grid-auto-rows:auto}
.pic{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.pic img{height:110px;flex:none}
.pic figcaption{position:static;background:none;color:var(--ink);padding:5px 8px 6px;font-size:11.5px;line-height:1.3}
.scale{table-layout:fixed}
.scale tbody th{width:100px}
.scale td:nth-child(2){white-space:normal;overflow:hidden;overflow-wrap:anywhere}
.scale td span{display:inline}
.scale .m{width:170px;white-space:normal;overflow-wrap:anywhere}
.tbl td{overflow-wrap:anywhere}
.ratio i{min-width:0;text-overflow:ellipsis}
@media (max-width:640px){.ratio i{font-size:0;padding:0}}

/* 15 Oct: detail sections */
.checked{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;font-size:12.5px;color:#C9DBFF}
.checked svg{width:14px;height:14px}
.a11y thead th:nth-child(2){width:110px}.a11y td.m{color:var(--ink);font-weight:600}
.anat{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.anat .card p{font-size:13.5px}
.tone{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font:500 14px/1.45 var(--fd);color:var(--ink)}
.cta-g{margin-top:8px}.cta-g b{font:600 11px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cta-g p{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.cta-g span{font:600 12px/1 var(--fb);padding:6px 9px;border-radius:99px;background:var(--wash);color:var(--navy)}
.sub .cnt{font-weight:600;color:var(--blue);margin-left:4px}
.mat-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dl-big{font-size:13px;padding:9px 14px;background:var(--blue);color:#fff}
.dl-big:hover{background:var(--navy)}
.mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px}
.mat{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;min-width:0}
.mat-v{width:64px;height:48px;border-radius:6px;overflow:hidden;background:var(--alt);display:grid;place-items:center;border:1px solid var(--line)}
.mat-v img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.mat-ext{font:700 11px/1 var(--fb);color:var(--muted)}
.mat-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.mat-t b{font:700 13px/1.3 var(--fd);color:var(--ink)}
.mat-t small{font-size:11.5px;color:var(--muted)}
.mat-t code{font-size:10.5px;background:none;padding:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mat-off{align-self:flex-start;font:700 9.5px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#1A8A55;background:#E8F5EE;padding:3px 6px;border-radius:99px;margin:2px 0}
.mat-src{font-size:11px;color:var(--muted);white-space:nowrap}
.kc-line{margin:6px 0 0;font:600 13.5px/1.4 var(--fd);color:var(--ink)}
.kc dl .w2{grid-column:span 2}
.kc dd code{font-size:12px}
@media (max-width:640px){.mats{grid-template-columns:1fr}.mat{grid-template-columns:52px 1fr}.mat-a{grid-column:2}}
.traits span{white-space:nowrap;line-height:1.2}
.mat-t code{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}