/* zimai 0.20 About page: the three-card "Why zimai" section. Graphics are inline SVG drawn only from
   theme tokens, so they follow light and dark themes and forced colours without extra assets. */
.usp{margin:40px 0 40px}
.usp-head{max-width:64ch;margin:0 0 18px}
.usp-head h2{margin:6px 0 8px;font:600 clamp(24px,3.1vw,31px)/1.18 var(--serif);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.usp-head p{margin:0;color:var(--muted);font-size:17px;line-height:1.55;text-wrap:pretty}
.usp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:usp}
.usp-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--rule);border-radius:12px;background:var(--white);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.usp-card:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--rule));box-shadow:0 10px 30px #0000000d}
.usp-card figure{margin:0;padding:12px 12px 8px;border-bottom:1px solid var(--rule);background:radial-gradient(color-mix(in srgb,var(--rule) 75%,transparent) .8px,transparent 1px) 0 0/14px 14px,var(--paper)}
.usp-art{display:block;width:100%;height:auto;overflow:visible}
.usp-copy{display:grid;align-content:start;gap:7px;padding:16px 18px 18px;flex:1}
.usp-index{font:600 12px/1 var(--sans);letter-spacing:.09em;color:var(--accent);font-variant-numeric:tabular-nums}
.usp-copy h3{margin:0;font:600 19.5px/1.25 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.usp-copy p{margin:0;font-size:15.5px;line-height:1.56;color:var(--ink);text-wrap:pretty}
.usp-copy .usp-fact{margin-top:auto;padding-top:11px;border-top:1px dashed var(--rule);font-size:13.5px;line-height:1.45;color:var(--muted)}
.usp-copy .usp-fact b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Shared SVG vocabulary (motion: motion.mjs). The markup is each loop's final state; script only animates. */
.usp-art text{font-family:var(--sans);fill:var(--ink)}
.usp-art .han{font-family:'Zimai Serif TC',var(--serif)}
.usp-art .small{font-size:8.5px;font-weight:600;letter-spacing:.07em;fill:var(--muted)}
.usp-art .accent{fill:var(--accent)}
.usp-art .sheet{fill:var(--white);stroke:var(--rule);stroke-width:1.1}
.usp-art .wire{fill:none;stroke:color-mix(in srgb,var(--accent) 50%,var(--rule));stroke-width:1.5;stroke-linecap:round;transition:stroke .25s ease,stroke-width .25s ease}
.usp-art .wire.word{stroke:color-mix(in srgb,var(--muted) 70%,transparent);stroke-width:1.1;stroke-dasharray:2.5 3.5}
.usp-art .wire.hot{stroke:var(--accent);stroke-width:2.2;stroke-dasharray:none}
.usp-art .wire[pathLength]{stroke-dasharray:1}
.usp-art .pulse{fill:none;stroke:var(--accent);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:.18 1.18;stroke-dashoffset:-1;opacity:0;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 60%,transparent))}


/* 01 Connected */











/* Final state before (or without) motion: the walk 月 → 明 → 明白 is lit. */




/* 02 Sourced */
.usp-art .band{fill:var(--tint)}
.usp-art .dot{fill:var(--accent)}
.usp-art .chip{fill:var(--white);stroke:var(--rule);stroke-width:1.1}
.usp-art .chip.lit{fill:var(--tint);stroke:var(--accent)}
.usp-art .lic{font-size:8.5px;fill:var(--muted)}
.usp-art .seal rect{fill:var(--accent)}
.usp-art .seal text{font-size:8.5px;font-weight:600;fill:var(--white)}
.usp:not([data-motion]) [data-usp=sourced] .c2-row:not(:last-of-type) .band{opacity:.55}

/* 03 Handwriting */
.usp-art .lookup-bg{fill:var(--subtle);stroke:var(--rule);stroke-width:1}
.usp-art .pad{fill:var(--white)}
.usp-art .guide{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 3;fill:none}
.usp-art .ink{fill:var(--ink);stroke:none}
.usp-art .reveal{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.usp-art .tip{fill:var(--accent)}
.usp-art .tip-halo{fill:color-mix(in srgb,var(--accent) 30%,transparent);opacity:0}
.usp-art .tip{opacity:0}
.usp-art .cand-bg{fill:var(--white);stroke:var(--rule);stroke-width:1;transition:fill .2s ease,stroke .2s ease}
.usp-art .cand:first-of-type .cand-bg,.usp-art .cand-bg.lit{fill:var(--tint);stroke:var(--accent)}
.usp-art .rank{font-size:8.5px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.usp-art .cand-r{font-size:9.5px;font-weight:600;fill:var(--accent)}
.usp-art .cand-g{font-size:8.5px;fill:var(--muted)}
.usp-art .bar-track{fill:color-mix(in srgb,var(--ink) 10%,transparent)}
.usp-art .bar{fill:var(--accent);transition:width .3s cubic-bezier(.3,.7,.3,1)}
.usp-art .badge{font-size:8px;font-weight:700;letter-spacing:.06em;fill:var(--accent);text-transform:uppercase}
.usp-art .fly{transform-box:fill-box;transform-origin:center}
.usp-art .search{fill:var(--white);stroke:var(--rule);stroke-width:1.2}
.usp-art .lens{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.usp-art .placeholder{font-weight:400;letter-spacing:0}
.usp-art .caret{fill:var(--accent)}

@media (max-width:1060px){
 .usp-grid{grid-template-columns:minmax(0,1fr)}
 .usp-card{display:grid;grid-template-columns:minmax(200px,40%) minmax(0,1fr)}
 .usp-card figure{display:grid;align-items:center;border-bottom:0;border-right:1px solid var(--rule)}
}
@media (max-width:560px){
 .usp{margin:32px 0}
 .usp-card{grid-template-columns:minmax(0,1fr)}
 .usp-card figure{border-right:0;border-bottom:1px solid var(--rule)}
 .usp-copy{padding:14px 16px 16px}
}
@media (forced-colors:active){
 .usp-art .wire,.usp-art .node,.usp-art .word,.usp-art .sheet,.usp-art .chip,.usp-art .seg,.usp-art .guide,.usp-art .search,.usp-art .lens{stroke:CanvasText}
 .usp-art .ink,.usp-art .caret{fill:CanvasText}
 .usp-art text,.usp-art .on-accent,.usp-art .seg-on-text{fill:CanvasText}
 .usp-art .node.focus,.usp-art .seg-on,.usp-art .dot{fill:Highlight}
 .usp-art .bar{fill:GrayText}
}

/* 01 Connected: a grid of cards and orthogonal wires (scripts/integrate-about-usp.mjs). */
.usp-art .c1-wire{fill:none;stroke:color-mix(in srgb,var(--accent) 38%,var(--rule));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;transition:stroke .25s ease,stroke-width .25s ease}
.usp-art .c1-wire.hot{stroke:var(--accent);stroke-width:1.9}
.usp-art .c1-focus-card{fill:var(--accent)}
.usp-art .c1-halo{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:1.2;opacity:.4}
.usp-art .c1-on{fill:var(--white)}
.usp-art .c1-focus-r{font-size:10px;font-weight:600;letter-spacing:.02em}
.usp-art .c1-note{font-size:8.5px;fill:var(--muted)}
.usp-art .c1-card{fill:var(--white);stroke:var(--rule);stroke-width:1.1}
.usp-art .c1-glow{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:1.4;opacity:0}
.usp-art .c1-r{font-size:10px;font-weight:600;fill:var(--accent)}
.usp-art .c1-wr{font-size:9.5px;font-weight:600;fill:var(--accent)}
.usp-art .c1-hit{transition:fill .25s ease}
.usp-art .c1-hit.on{fill:var(--accent)}
.usp-art .c1-gloss{font-size:9.5px;fill:var(--ink);opacity:.62}
.usp-art .c1-band{fill:var(--subtle,var(--paper));stroke:var(--rule);stroke-width:1}
.usp-art .c1-band-glow{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0}
.usp-art .c1-src{font-size:10.5px;fill:var(--ink)}
.usp-art .c1-pc{fill:var(--ink);transition:fill .25s ease}
.usp-art .c1-pc.on{fill:var(--accent)}
.usp-art .c1-ghost{fill:var(--accent)}
.usp-art .c1-trail{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.3 1.3;stroke-dashoffset:.3;opacity:0;filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--accent) 55%,transparent))}
.usp-art .c1-dot{fill:var(--accent);opacity:0}
/* Without motion (no script, reduced motion) the card shows its last step: 朋 and 有 lead into the Analects. */
.usp:not([data-motion]) [data-usp=connected] :is([data-char="3"],[data-char="4"]) .c1-glow,.usp:not([data-motion]) [data-usp=connected] .c1-band-glow{opacity:1}
.usp:not([data-motion]) [data-usp=connected] :is([data-pc="0"],[data-pc="1"]){fill:var(--accent)}
.usp:not([data-motion]) [data-usp=connected] :is([data-branch="3"],[data-branch="4"]){stroke:var(--accent);stroke-width:1.9}
@media (forced-colors:active){.usp-art .c1-wire,.usp-art .c1-card,.usp-art .c1-band{stroke:CanvasText}.usp-art .c1-focus-card{fill:CanvasText}.usp-art .c1-on{fill:Canvas}}