@layer guard, reset, tokens, base, layout, components, signature, patterns, page, util;
@layer guard {
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
.js-motion .sk-rv, .js-motion .pane.sk-rv.in .row,
.reveal { opacity: 1 !important; transform: none !important; }
html .pane--window {
max-height: none !important; min-height: 0 !important; overflow: visible !important; }
html .hold { min-height: 0 !important; }
html .hold-stick { position: static !important; }
.ledger tbody tr:nth-child(n+41) { display: none !important; }
.row:nth-child(n+41 of .row),
.row:nth-child(40 of .row) ~ :is(.gaprow, .schsrc) { display: none !important; }
.skip, .totop, .dock, .menu, .btn--wide, .foot-sig, .run::after { display: none !important; }
.stat, .uroll-t, .mast .st-anim, .m-left h1 .w,
.run .sec [style*="opacity"]:not(svg *) { opacity: 1 !important; }
.run .sec [style*="transform"]:not(svg *) { transform: none !important; }
.rlogo[data-rl="1"] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.sc-m, span.bar > span, div.g-pbar > i, span.przbar > i, .coin, .chip-sw, .tip-sw, .sdot, span.dot,
span.lat-rn > i, i.vfill, i.vfloor, div.cpos > i.mix-seg, div.cneg > i.mix-seg, div.cbar > i.cax,
span.ha-bar, i.bd, i.nd, div.g-cov > i, div.cl-r > i, div.cl-b > i, span.wc > i, div.rdl > span.sw,
span.k > i, .railkey .dots i, .ch-cur, .ch-split, .brand-by::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.scale::before {
background: var(--print-ink-3) !important;
-webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
:root { --ink-1: var(--print-ink-1) !important; --ink-2: var(--print-ink-2) !important;
--ink-3: var(--print-ink-3) !important; --amber-ink: var(--print-amber-ink) !important;
--qs-d: var(--print-qs-d) !important; --cwur-d: var(--print-ink-2) !important;
--up: var(--print-up) !important; --usnews-d: var(--print-usnews-d) !important;
--arwu-d: var(--print-arwu-d) !important; --cat-5: var(--print-cat-5) !important; }
.ch-s { mix-blend-mode: normal !important; }
html:root div.seg i.seg-ind { background: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
html.scrolled header.bar, .dock, .totop {
background-color: var(--plate) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.scrolled header.bar, .dock, .totop { background-color: var(--plate) !important; }
}
.heromarks[hidden] { display: none !important; }
@media (max-width: 620px) {
.deckmore[hidden] { display: none !important; }
}
@media (forced-colors: active) {
.rlogo[data-rl="1"], .heromarks .hmark,
div.seg .seg-ind, div.seg button.on, div.seg button[aria-pressed="true"],
.nav > a[aria-current="page"]::after, .nav-more[aria-current="true"]::after,
.sc-m, .sc-bead, .railkey .dots i,
div.cpos > i.mix-seg, div.cneg > i.mix-seg, div.cbar > i.cax,
.sdot, span.dot,
span.bar > span, div.g-pbar > i, span.przbar > i, div.rdl > span.sw,
div.g-cov > i, i.bd, i.nd,
span.wc > i,
span.uroll-i, span.lat-rn > i, i.bar-swap-sc > i, div.cl-r > i, div.cl-b > i, i.vfill, i.vfloor,
span.ha-bar, span.k > i,
.chip-sw, .tip-sw, .ch-cur, .ch-floor, .ch-split, .ch-snap, .ch-bead, .ch-bk, svg.chart-svg { forced-color-adjust: none !important; }
div.seg .seg-ind { background: Highlight !important; }
div.seg button:is(.on, [aria-pressed="true"], [aria-selected="true"]) { color: HighlightText !important; }
.pick[aria-pressed="true"] {
border: 2px solid Highlight !important; padding-inline: calc(var(--s-1) - 2px) !important; }
.chip:not(.chip--key)[aria-pressed="true"] {
border: 2px solid Highlight !important; padding-inline: calc(var(--s-3) - 1px) !important; }
.ledger .pick:not([aria-pressed="true"]) { border-color: Canvas !important; }
.ledger th[aria-sort$="ending"] > .sortbtn { text-decoration: underline 2px !important; text-underline-offset: 4px !important; }
input.fader::-webkit-slider-runnable-track {
forced-color-adjust: none !important; box-shadow: inset 0 0 0 1px CanvasText !important;
background: linear-gradient(to right, Highlight var(--fill, 0%), Canvas var(--fill, 0%)) !important; }
input.fader::-moz-range-track {
forced-color-adjust: none !important; box-shadow: inset 0 0 0 1px CanvasText !important;
background: linear-gradient(to right, Highlight var(--fill, 0%), Canvas var(--fill, 0%)) !important; }
input.fader::-webkit-slider-thumb {
forced-color-adjust: none !important; background: CanvasText !important; box-shadow: 0 0 0 2px Canvas !important; }
input.fader::-moz-range-thumb {
forced-color-adjust: none !important; background: CanvasText !important; box-shadow: 0 0 0 2px Canvas !important; }
input.fader:focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px !important; }
.scale::before { forced-color-adjust: none !important; background: CanvasText !important; }
.brand-by::after { forced-color-adjust: none !important; }
.sc-bead, .ch-bead, .ch-bk { background: Canvas !important; box-shadow: inset 0 0 0 1.5px CanvasText !important; }
.foot-sig { display: none !important; }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
.rlogo[data-rl="1"], .heromarks .hmark { background-color: CanvasText !important; }
.sc-m { --c: CanvasText !important; }
.chart-area, canvas.cchart, canvas.wcv, canvas.lat-cv { forced-color-adjust: none !important; background-color: var(--ground) !important; }
.chart-area .ch-bv { forced-color-adjust: auto !important; }
}
}
@layer reset {
* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
html, body { margin: 0; padding: 0; }
a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }
button, input, select, textarea, optgroup { font-family: inherit; }
}
@layer tokens {
:root {
--pane:    #0C0F14;
--raised:  #13161C;
--plate:   #191C23;
--well:    #07090D;
--surface-hover: #15171C;
--chrome:  rgb(16 19 25 / .82);
--scrim:   rgb(5 7 11 / .86);
--ink-1: #E8E9E4;
--ink-2: #A7AEBA;
--ink-3: #858D9A;
--ink-4: #4E5561;
--line-1:   rgba(255, 255, 255, .055);
--line-2:   rgba(255, 255, 255, .10);
--line-3:   rgba(255, 255, 255, .22);
--line-ctl: rgba(255, 255, 255, .40);
--line-ctl-hi: rgb(255 255 255 / .55);
--hover:    rgba(255, 255, 255, .04);
--selected: rgb(255 255 255 / .06);
--amber:         #E8A13A;
--amber-ink:     #F2B75C;
--amber-ink-hi:  #FFCE7D;
--amber-rgb:     232, 161, 58;
--amber-rim:     rgba(var(--amber-rgb), .56);
--amber-wash:    rgba(var(--amber-rgb), .12);
--amber-wash-hi: rgba(var(--amber-rgb), .18);
--lamp:          rgba(var(--amber-rgb), .06);
--selection:     rgba(var(--amber-rgb), .28);
--medal-down-1: #DE5748;  --medal-down-2: #C26459;  --medal-down-3: #AA7167;
--medal-ink: #1A1305;
--teal: #5FA8B5;
--font-serif: "Instrument Serif", "Ordinal Serif FB", Georgia, "Times New Roman", serif;
--font-sans:  "Instrument Sans", "Ordinal Sans FB", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono:  "IBM Plex Mono", "Ordinal Mono FB", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--t-display: clamp(36px, 5.2vw + 14px, 80px);
--t-hero:    clamp(36px, min(4.6vw, 7.6vh), 72px);
--t-section: clamp(26px, 1.9vw + 18px, 44px);
--t-sub: 20px;
--t-finding: clamp(20px, 1.6vw + 9px, 32px);
--t-readout: 32px;  --t-lead: clamp(16px, .25vw + 14.4px, 18px);
--t-name: 16px;  --t-composite: 16px;  --t-body: 14px;  --t-figure: 14px;  --t-ui: 13px;  --t-label: 12px;
--t-tile: 20px;
--w-regular: 400; --w-medium: 500; --w-strong: 600;
--lh-display: .98; --lh-section: 1.06; --lh-sub: 1.2; --lh-ui: 1.25; --lh-figure: 1;
--lh-small: 1.45;
--tr-display: -.02em;
--tr-section: -.015em;
--tr-sub: -.01em;
--tr-figure: -.01em;
--tr-label: .09em;
--tr-kicker: .16em;
--s-05: 2px; --s-1: 4px; --s-15: 6px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
--s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
--gutter: 24px; --measure: 68ch;
--split-gap: clamp(24px, 3vw, 48px); --grid-gap: 12px;
--space-lead: 32px;
--space-stack: 12px;
--space-head: 20px;
--space-foot: clamp(72px, 10vh, 132px);
--rule-gap: 12px;
--row-h: 56px; --row-pad: 12px;
--podium-1: 28px; --podium-2: 22px; --podium-3: 18px;
--pane-pad: 16px 20px;
--ctl-h: 36px; --chip-h: 30px; --touch: 44px;
--delta-w: 3.2ch;
--delta-w-comp: 5ch;
--r-0: 0;
--r-plate: 12px;
--r-pill: 999px;
--r-disc: 50%;
--r-crest: 0;
--focus-ring: 2px solid var(--amber);
--lip:      inset 0 1px 0 rgb(255 255 255 / .14);
--lip-press: inset 0 -1px 0 rgb(255 255 255 / .10);
--lip-amber: inset 0 1px 0 rgb(255 222 175 / .22);
--lip-amber-press: inset 0 -1px 0 rgb(255 222 175 / .18);
--lit:       inset 0 1px 0 rgb(255 255 255 / .08);
--recess:    inset 0 1px 2px rgb(0 0 0 / .55), inset 0 -1px 0 rgb(255 255 255 / .04);
--recess-track: inset 0 2px 3px -2px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.07);
--crest-edge: inset 0 -1px 0 rgb(0 0 0 / .5);
--crest-plate: #FFFFFF;
--coin-edge:  inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .25);
--elev-float:  0 1px 0 rgb(0 0 0 / .35), 0 16px 40px -16px rgb(2 4 8 / .85);
--elev-dialog: 0 1px 0 rgb(0 0 0 / .40), 0 40px 96px -32px rgb(2 4 8 / .95);
--blur: blur(20px) saturate(1.4);
--dur-press: 80ms; --dur-exit: 130ms; --dur-4: .8s;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--rise-1: 6px; --rise-2: 12px;
--press: .96; --press-round: .94; --press-wide: .98;
--z-raise: 1;
--z-dock: 40;
--z-bar: 100;
--z-tip: 120;
--bar-top: 10px;
--bar-edge: calc(var(--bar-top) + var(--bar-h));
--bar-clear: calc(var(--bar-edge) + 8px);
--bar-park: var(--bar-edge);
--dock-h: 52px;
--dock-inset: var(--s-5);
--sc-s-w: 152px; --sc-s-h: 32px; --sc-m-h: 42px; --sc-l-h: 120px; --sc-l-slot: 72px;
--sc-span-a: 30%;
--dash-grid: 2 6; --dash-guide: 3 3; --dash-bridge: 1 4; --line-series: 1.75px;
--photo-ink: rgb(255 255 255 / .82);
--photo-scrim: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .62) 48%, transparent);
--sig-0: #0e1116; --sig-1: #1b2029; --sig-2: #2f2a22;
--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858D9A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--print-ink-1: #1a1a1a; --print-ink-2: #444; --print-ink-3: #666; --print-amber-ink: #8a5a10;
--print-qs-d: #877401; --print-up: #3E834C;
--print-usnews-d: #4E76AD; --print-arwu-d: #C8485E; --print-cat-5: #687A5F;
--up: #6EE787;
--down: #FF6B5E;
--qs: #F7A70D;     --qs-d: #DBBD01;
--the: #DE1B7C;    --the-d: #F059A2;
--arwu: #E6002D;   --arwu-d: #FF5C77;
--usnews: #1263D3; --usnews-d: #6FA8F5;
--cwur: #B8C2D4;   --cwur-d: #D3DAE6;
--cat-1: #86D2FF; --cat-2: #9997CD; --cat-3: #FC97A9;
--cat-4: #E2A281; --cat-5: #C1E4B0; --cat-6: #00C8AC;
--ft: #d6537e;          --ft-d: #e685a5;
--csrankings: #45c2d4;  --csrankings-d: #7ad8e5;
--natureindex: #a4c957; --natureindex-d: #c2dd85;
--repec: #6f7fdd;       --repec-d: #98a5ea;
--theimpact: #2e9e8f;   --theimpact-d: #5cc0b2;
--maxw: 1280px;
--bar-h: 56px;
--z-sticky: 20;
--z-skip: 400;
--ground: #05070b;
--lh-body: 1.5;
--lh-prose: 1.65;
--space-section: clamp(56px, 8vh, 96px);
--medal-1: #c69a2b; --medal-2: #9b9488; --medal-3: #b3743c;
--dur-1: .15s;
--dur-2: .3s;
--dur-3: .42s;
--ease-micro: cubic-bezier(.2, 0, 0, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.22, 1.8, .5, .95);
--glass-occ:  rgba(0, 0, 0, .35);
}
@font-face {
font-family: "Ordinal CJK Punct"; font-weight: 100 900; unicode-range: U+2014, U+2026, U+201C-201D;
src: local("PingFang SC Regular"), local("PingFangSC-Regular"), local("Microsoft YaHei"), local("MicrosoftYaHei"),
local("Hiragino Sans GB W3"), local("HiraginoSansGB-W3"), local("Noto Sans CJK SC Regular"),
local("NotoSansCJKsc-Regular"), local("Source Han Sans SC Regular"), local("SourceHanSansSC-Regular");
}
@font-face { font-family: "Ordinal Serif FB"; src: local("Georgia"); size-adjust: 73.73%; ascent-override: 134.27%; descent-override: 42.04%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Serif FB"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 74.85%; ascent-override: 132.27%; descent-override: 41.42%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Sans FB"; font-weight: 100 450; src: local("Arial"), local("ArialMT"); size-adjust: 100.02%; ascent-override: 96.98%; descent-override: 24.99%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Sans FB"; font-weight: 451 599; src: local("Arial"), local("ArialMT"); size-adjust: 101.04%; ascent-override: 96%; descent-override: 24.74%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Sans FB"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.38%; ascent-override: 98.59%; descent-override: 25.41%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Mono FB"; font-weight: 600 900; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"); size-adjust: 100%; ascent-override: 103.02%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Ordinal Mono FB"; font-weight: 100 599; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 103.02%; descent-override: 28%; line-gap-override: 0%; }
:root:lang(zh) {
--font-sans: "Ordinal CJK Punct", "Instrument Sans", "Ordinal Sans FB", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
--font-serif: "Ordinal CJK Punct", "Instrument Serif", "Ordinal Serif FB", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
"Source Han Serif CN", STSong, SimSun, Georgia, serif;
--font-mono: "Ordinal CJK Punct", "IBM Plex Mono", "Ordinal Mono FB", ui-monospace, SFMono-Regular, Menlo, Consolas,
"PingFang SC", "Microsoft YaHei", monospace;
--lh-display: 1.18; --lh-section: 1.2; --lh-sub: 1.3; --lh-body: 1.7; --lh-prose: 1.8; --lh-small: 1.6;
--tr-display: 0; --tr-section: 0; --tr-sub: 0; --tr-figure: 0;
}
@media (max-width: 860px) {
:root { --bar-top: 8px; --bar-h: 98px; --ctl-h: 44px; --chip-h: 44px; --pane-pad: 14px 16px;
--dock-h: 56px; --dock-inset: var(--s-3); --space-foot: 48px; }
}
@media (max-width: 860px) and (min-height: 481px) {
:root[data-read] { --bar-park: calc(var(--bar-h) - 53px); }
}
@media (max-width: 620px) {
:root { --t-lead: 16px; --t-readout: 26px;
--space-lead: 24px; --space-head: 16px;
--podium-1: 22px; --podium-2: 19px; --podium-3: 17px; --sc-l-slot: 56px;
--t-display: clamp(30px, 9.2vw, 36px);
--t-section: 26px; --space-section: var(--s-10); }
:root:lang(zh) { --t-display: clamp(28px, 8.4vw, 33px); }
}
}
@layer base {
html {
background: radial-gradient(1200px 640px at 18% -72px, var(--lamp), transparent 70%) no-repeat, var(--ground);
scroll-padding-block-start: var(--bar-clear);
scroll-behavior: smooth;
}
@media (max-width: 860px) and (max-height: 480px) {
html { scroll-padding-block-start: var(--s-3); }
}
body {
font-family: var(--font-sans); font-feature-settings: "cv05" 1, "ss01" 1;
font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-1); color-scheme: dark;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: var(--ink-1); }
:root:lang(zh) { line-break: strict; }
p { text-wrap: pretty; }
h1, h2, h3, h4, [role="heading"] { text-wrap: balance; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
:where(a, button, input, select, textarea, summary, [tabindex]):where(:focus-visible) {
animation: ord-ring .18s var(--ease-out);
}
details { interpolate-size: allow-keywords; }
details::details-content {
block-size: 0; overflow: clip; overflow-clip-margin: 4px;
transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete;
}
details[open]::details-content { block-size: auto; }
}
@keyframes ord-ring { from { outline-offset: 6px; outline-color: transparent; } }
header.bar { view-transition-name: bar; }
.totop { view-transition-name: totop; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: ord-vt-out .14s var(--ease-micro) both; }
::view-transition-new(root) { animation: ord-vt-in .26s var(--ease-out) both; }
::view-transition-group(bar) { animation-duration: var(--dur-1); }
}
@keyframes ord-vt-out { to { opacity: 0; } }
@keyframes ord-vt-in { from { opacity: 0; transform: translateY(8px); } }
}
@layer layout {
.wrap {
position: relative; z-index: var(--z-raise);
max-inline-size: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
}
.split { display: grid; gap: var(--split-gap); align-items: start; }
.split > * { min-inline-size: 0; }
.split--rail { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.split--dossier { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split--twin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1100px) {
.split--dossier, .split--twin, .split--hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
.split--rail { grid-template-columns: minmax(0, 1fr); }
}
.t-ledger .pane--window { margin-block-start: var(--space-stack); }
:is(.t-ledger, .t-essay) .chapter { margin-block-start: var(--space-section); }
}
@layer components {
header.bar {
position: fixed; inset-block-start: var(--bar-top); inset-inline: 0; z-index: var(--z-bar);
box-sizing: border-box; inline-size: min(100vw - 24px, var(--maxw) + 2 * var(--gutter)); block-size: var(--bar-h);
margin-inline: auto;
padding-inline: clamp(calc(var(--gutter) - 13px), calc(50vw - var(--maxw) / 2 - 13px), calc(var(--gutter) - 1px));
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6);
border: 1px solid transparent; border-radius: var(--r-plate);
}
html.scrolled header.bar {
background-color: var(--chrome); border-color: var(--line-2); box-shadow: var(--lit), var(--elev-float);
-webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
main.wrap { padding-block-start: var(--bar-h); }
.brand {
grid-column: 1; grid-row: 1;
display: inline-flex; align-items: baseline; gap: var(--s-2); padding-block: 11px;
color: var(--ink-1); text-decoration: none; white-space: nowrap;
}
.brand-o {
font-family: var(--font-serif); font-style: italic; font-weight: var(--w-regular); font-size: 23px;
line-height: 1; color: var(--ink-1);
}
.brand-by {
align-self: center; display: inline-flex; align-items: center; gap: var(--s-15);
padding-inline-start: 9px; border-inline-start: 1px solid var(--line-2);
font-size: 0; line-height: 1; white-space: nowrap;
}
.brand-by::before {
content: "by" / ""; font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.brand-by::after {
content: ""; display: block; inline-size: 62px; block-size: 15px; background-color: var(--ink-3);
-webkit-mask: url("./logos/zyltech.svg") no-repeat center / contain;
mask: url("./logos/zyltech.svg") no-repeat center / contain;
}
@media (max-width: 860px) {
.brand-by { gap: 5px; padding-inline-start: 7px; }
.brand-by::after { inline-size: 52px; block-size: 12.5px; }
}
@media (hover: hover) {
.brand:hover .brand-by::before { color: var(--ink-2); }
.brand:hover .brand-by::after { background-color: var(--ink-2); }
}
.nav { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: stretch; min-inline-size: 0; }
.nav > a, .nav-more {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-15);
margin: 0; padding: 0 var(--s-3); border: 0; background: none;
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-medium); line-height: 1;
color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav > a::after, .nav-more::after {
content: ""; position: absolute; inset-inline: var(--s-3); inset-block-end: 11px; block-size: 2px;
background: transparent;
}
@media (hover: hover) {
.nav > a:hover, .nav-more:hover { color: var(--ink-1); }
.nav > a:hover::after, .nav-more:hover::after { background: var(--line-3); }
}
.nav-more[aria-expanded="true"] { color: var(--ink-1); }
.nav-more[aria-expanded="true"]::after { background: var(--line-3); }
.nav > a[aria-current="page"], .nav-more[aria-current="true"] { color: var(--ink-1); font-weight: var(--w-strong); }
.nav > a[aria-current="page"]::after, .nav-more[aria-current="true"]::after { background: var(--amber); }
.nav > a:focus-visible, .nav-more:focus-visible { outline-offset: -2px; }
.nav-more > svg { flex: none; inline-size: 10px; block-size: 6px; }
.nav-more > svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-more[aria-expanded="true"] > svg { rotate: 180deg; }
@media (scripting: enabled) {
.nav > .nav-fold { display: none; }
.nav:not(:has(> .nav-more))::after {
content: "More" / ""; display: inline-flex; align-items: center; padding-inline: var(--s-3) 28px;
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-medium); line-height: 1;
color: var(--ink-2); pointer-events: none;
}
:root:lang(zh) .nav:not(:has(> .nav-more))::after { content: "更多" / ""; }
}
.seg--lang { grid-column: 3; grid-row: 1; }
.bar-swap {
grid-column: 2; grid-row: 1; justify-self: start;
display: flex; align-items: baseline; gap: var(--s-3); min-inline-size: 0; max-inline-size: 100%;
margin: 0; padding: 0; border: 0; background: none; white-space: nowrap;
opacity: 0; pointer-events: none;
}
.bar-swap-sc { display: flex; align-items: flex-end; gap: 3px; flex: none; }
.bar-swap-sc[hidden] { display: none; }
.bar-swap-sc > i { display: block; inline-size: 3px; block-size: 13px; background: var(--line-3); }
.bar-swap-sc > i.is-on { background: var(--ink-2); }
.bar-swap-n {
flex: none; font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: var(--tr-label); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.bar-swap-t {
min-inline-size: 0; overflow: hidden; text-overflow: ellipsis;
font-family: var(--font-serif); font-size: var(--t-sub); font-weight: var(--w-regular);
letter-spacing: var(--tr-sub); color: var(--ink-1);
}
header.bar[data-swap] .nav { opacity: 0; pointer-events: none; }
header.bar[data-swap] .bar-swap { opacity: 1; pointer-events: auto; }
header.bar[data-swap]:is(:hover, :focus-within) .nav { opacity: 1; pointer-events: auto; }
header.bar[data-swap]:is(:hover, :focus-within) .bar-swap { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
header.bar {
position: sticky; inline-size: calc(100% - 24px); padding-inline: 11px;
grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px 44px; column-gap: var(--s-3);
background-image: linear-gradient(var(--line-1), var(--line-1)); background-repeat: no-repeat;
background-position: 0 52px; background-size: 100% 1px;
}
main.wrap { padding-block-start: 0; }
.nav {
--sx-fade-l: 0px; --sx-fade-r: 0px;
grid-column: 1 / -1; grid-row: 2; margin-inline: -11px; padding-inline: 3px;
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, currentColor var(--sx-fade-l),
currentColor calc(100% - var(--sx-fade-r)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, currentColor var(--sx-fade-l),
currentColor calc(100% - var(--sx-fade-r)), transparent 100%);
}
.nav.sx-l { --sx-fade-l: 24px; }
.nav.sx-r { --sx-fade-r: 24px; }
.nav > a, .nav-more { flex: none; min-inline-size: var(--touch); padding-inline: var(--s-2); }
.nav > a::after, .nav-more::after { inset-inline: var(--s-2); inset-block-end: 6px; }
.nav:not(:has(> .nav-more))::after { padding-inline: var(--s-2) 24px; }
.seg--lang { grid-column: 2; }
.bar-swap { display: none; }
header.bar[data-swap] .nav { opacity: 1; pointer-events: auto; }
}
@media (max-width: 860px) and (max-height: 480px) {
header.bar { position: relative; }
}
@media (max-width: 860px) and (min-height: 481px) { html[data-read] header.bar:not(:has(:focus-visible)) { translate: 0 calc(-1 * (var(--bar-top) + 53px)); }
header.bar :is(a, button):not(.menu *) { scroll-margin-block-start: calc(-1 * (var(--bar-clear) + var(--bar-top) + 53px)); } }
@media (min-height: 481px) { html.scrolled header.bar::before {
content: ""; position: absolute; inset-inline: calc(50% - 50vw); inset-block-end: calc(100% + 1px);
block-size: var(--bar-top); background: var(--ground); pointer-events: none; } }    @media (max-width: 860px) { html.scrolled header.bar::before { inset-inline: -13px; } }
@media (prefers-reduced-motion: no-preference) {
header.bar {
transition: background-color var(--dur-3) var(--ease-micro), border-color var(--dur-3) var(--ease-micro),
box-shadow var(--dur-3) var(--ease-micro), translate var(--dur-2) var(--ease-out);
}
.nav > a, .nav-more { transition: color var(--dur-1) var(--ease-micro); }
.brand-by::before { transition: color var(--dur-1) var(--ease-micro); }
.brand-by::after { transition: background-color var(--dur-1) var(--ease-micro); }
.nav > a::after, .nav-more::after { transition: background-color var(--dur-1) var(--ease-micro); }
.nav-more > svg { transition: rotate var(--dur-1) var(--ease-micro); }
.nav, .bar-swap {
transition: opacity var(--dur-exit) var(--ease-in), translate var(--dur-exit) var(--ease-in);
}
.bar-swap { translate: 0 var(--rise-1); }
header.bar[data-swap]:not(:hover, :focus-within) .bar-swap {
translate: none; transition-duration: var(--dur-2); transition-timing-function: var(--ease-out);
}
}
.menu {
position: fixed; inset: var(--menu-y, 0px) auto auto var(--menu-x, 0px); margin: 0;
box-sizing: border-box; min-inline-size: 240px; max-block-size: calc(100dvh - var(--menu-y, 0px) - var(--s-3));
inline-size: max-content; max-inline-size: calc(100vw - 24px);
padding: var(--s-2); overflow: auto; overscroll-behavior: contain; list-style: none;
background: var(--plate); border: 1px solid var(--line-2); border-radius: var(--r-plate);
box-shadow: var(--lit), var(--elev-float); color: var(--ink-2);
}
.menu--list { max-block-size: min(70vh, 560px, 100dvh - var(--menu-y, 0px) - var(--s-3)); }
.menu-h {
margin: var(--s-15) 0 0; padding: var(--s-3) var(--s-3) var(--s-15); border-block-start: 1px solid var(--line-2);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.menu-h:first-child { margin-block-start: 0; padding-block-start: var(--s-15); border-block-start: 0; }
.menu-i {
display: flex; align-items: center; gap: var(--s-3);
box-sizing: border-box; inline-size: 100%; min-block-size: 40px; margin: 0; padding: 0 var(--s-3);
border: 0; border-radius: var(--r-0); background: none;
font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-medium); line-height: var(--lh-ui);
color: var(--ink-2); text-align: start; text-decoration: none; cursor: pointer;
}
@media (hover: hover) {
.menu-i:hover { background: var(--hover); color: var(--ink-1); }
}
.menu-i:focus-visible { outline-offset: -2px; }
.menu-i:is([aria-current="page"], [aria-current="true"], [aria-checked="true"]) {
box-shadow: inset 2px 0 0 var(--amber); color: var(--ink-1); font-weight: var(--w-strong);
}
.menu-i[aria-selected="true"] { background: var(--hover); color: var(--ink-1); outline: var(--focus-ring); outline-offset: -2px; }
.menu-note {
flex: none; margin-inline-start: auto;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium); color: var(--ink-3);
}
.menu-sw { flex: none; inline-size: 8px; block-size: 8px; background: var(--c); }
.menu-sep { margin: var(--s-1) 0; border: 0; border-block-start: 1px solid var(--line-2); }
@media (max-width: 860px) {
.menu-i { min-block-size: var(--touch); }
}
@media (prefers-reduced-motion: no-preference) {
.menu {
transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out),
display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
}
.menu:not(:popover-open) {
opacity: 0; translate: 0 calc(-1 * var(--rise-1));
transition-duration: var(--dur-exit); transition-timing-function: var(--ease-in);
}
@starting-style {
.menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--rise-1)); }
}
.menu-i { transition: color var(--dur-1) var(--ease-micro), background-color var(--dur-1) var(--ease-micro); }
}
.tip {
position: absolute; z-index: var(--z-tip); box-sizing: border-box; min-inline-size: 160px;
padding: 10px var(--s-3); pointer-events: none;
background: var(--plate); border: 1px solid var(--line-2); border-radius: var(--r-plate);
box-shadow: var(--lit), var(--elev-float);
font-family: var(--font-sans); font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--ink-1);
}
.tip-h {
display: block; margin-block-end: var(--s-2);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
letter-spacing: var(--tr-label); color: var(--ink-3);
}
.tip-r {
display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2);
padding-block: 3px; white-space: nowrap;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium); line-height: 1.2;
color: var(--ink-2);
}
.tip-sw { inline-size: 8px; block-size: 8px; background: var(--c); }
.tip-r > b {
font-size: var(--t-ui); font-weight: var(--w-strong); font-variant-numeric: tabular-nums;
text-align: end; color: var(--ink-1);
}
.tip-r > b.is-band { color: var(--ink-2); }
.tip-r > b.is-gap { font-weight: var(--w-regular); color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
.tip { transition: opacity var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete; }
.tip[hidden] { opacity: 0; transition-duration: var(--dur-exit); transition-timing-function: var(--ease-in); }
@starting-style {
.tip:not([hidden]) { opacity: 0; }
}
}
.sheet {
box-sizing: border-box; inline-size: min(880px, 100% - 32px); max-inline-size: none; max-block-size: 88vh;
margin: min(8vh, 72px) auto auto; padding: var(--s-6); overflow: auto; overscroll-behavior: contain;
background: var(--plate); border: 1px solid var(--line-2); border-radius: var(--r-plate);
box-shadow: var(--lit), var(--elev-dialog); color: var(--ink-1);
}
.sheet::backdrop { background: var(--scrim); }
:root:has(.sheet:modal) { overflow: hidden; }
.sheet-hd {
display: flex; align-items: center; gap: var(--s-4);
margin-block-end: var(--s-4); padding-block-end: var(--s-4); box-shadow: inset 0 -1px 0 var(--line-2);
}
.sheet-t {
flex: 1 1 auto; min-inline-size: 0; margin: 0;
font-family: var(--font-serif); font-size: var(--t-sub); font-weight: var(--w-regular); line-height: var(--lh-sub);
letter-spacing: var(--tr-sub); text-transform: none; color: var(--ink-1);
}
.sheet-hd > .btn { flex: none; }
@media (max-width: 620px) {
.sheet {
inline-size: 100%; margin: auto 0 0; padding: var(--s-4);
border-block-end: 0; border-radius: var(--r-plate) var(--r-plate) 0 0;
}
}
@media (prefers-reduced-motion: no-preference) {
.sheet, .sheet::backdrop {
transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out),
scale var(--dur-3) var(--ease-out),
display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
.sheet:not([open]) { opacity: 0; translate: 0 var(--rise-2); scale: .985; }
.sheet:not([open])::backdrop { opacity: 0; }
.sheet:not([open]), .sheet:not([open])::backdrop {
transition-duration: var(--dur-exit); transition-timing-function: var(--ease-in);
}
@starting-style {
.sheet[open] { opacity: 0; translate: 0 var(--rise-2); scale: .985; }
.sheet[open]::backdrop { opacity: 0; }
}
}
.dock {
position: fixed; inset-block-end: var(--dock-inset); inset-inline: 0; z-index: var(--z-dock);
display: flex; align-items: center; gap: var(--s-3);
box-sizing: border-box; inline-size: max-content; max-inline-size: min(100vw - 24px, 640px); block-size: var(--dock-h);
margin-inline: auto; padding: var(--s-15) var(--s-15) var(--s-15) var(--s-4);
background: var(--chrome); border: 1px solid var(--line-2); border-radius: var(--r-pill);
box-shadow: var(--lit), var(--elev-float);
-webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.dock[hidden] { display: none; }
.dock > .btn { flex: none; }
.dock-k, .dock-n {
flex: none; font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
letter-spacing: var(--tr-label); text-transform: uppercase; white-space: nowrap; color: var(--ink-2);
}
.dock-n { font-variant-numeric: tabular-nums; }
.dock-n b { font-weight: var(--w-strong); color: var(--ink-1); }
.dock-crests { display: flex; align-items: center; min-inline-size: 0; padding: 4px; margin: -4px; }
.dock-crests, .ledger thead tr, .cmptw {
--sx-fade-l: 0px; --sx-fade-r: 0px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ground) var(--sx-fade-l),
var(--ground) calc(100% - var(--sx-fade-r)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, var(--ground) var(--sx-fade-l),
var(--ground) calc(100% - var(--sx-fade-r)), transparent 100%);
}
.dock-crests.sx-l, .ledger thead tr.sx-l, .cmptw.sx-l { --sx-fade-l: 34px; }
.dock-crests.sx-r, .ledger thead tr.sx-r, .cmptw.sx-r { --sx-fade-r: 34px; }
.dock-crest {
position: relative; flex: none; display: inline-grid; place-items: center;
inline-size: 28px; block-size: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--r-0);
background: none; cursor: pointer;
}
.dock-crest + .dock-crest { margin-inline-start: -6px; }
.dock-crest > .crest { box-shadow: var(--crest-edge), 0 0 0 2px var(--ground); }
.dock-crest::after {
content: "×" / ""; position: absolute; inset: 0; margin: auto; inline-size: 28px; block-size: 28px;
display: grid; place-items: center; border-radius: var(--r-0);
background: color-mix(in srgb, var(--ground) 62%, transparent);
font-family: var(--font-mono); font-size: 15px; font-weight: var(--w-strong); line-height: 1; color: var(--ink-1);
opacity: 0;
}
.dock-crest:is(:hover, :focus-visible)::after { opacity: 1; }
.dock-crest:is(:hover, :focus-visible) { z-index: 1; }
@media (hover: none) {
.dock-crest::after {
opacity: 1; inset: 4px 4px auto auto; margin: 0; inline-size: 16px; block-size: 16px;
border-radius: var(--r-disc); font-size: 12px; background: var(--plate); box-shadow: 0 0 0 1px var(--line-2);
}
}
@media (max-width: 860px) {
.dock-crest { inline-size: var(--touch); block-size: var(--touch); }
.dock-crest + .dock-crest { margin-inline-start: 0; }
}
@media (max-width: 620px) {
.dock { inset-inline: var(--s-3); inline-size: auto; max-inline-size: none; justify-content: center; }
.dock-k { display: none; }
.dock-crests { overflow-x: auto; scrollbar-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
.dock {
transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out),
display var(--dur-3) allow-discrete;
}
.dock[hidden] {
opacity: 0; translate: 0 var(--rise-2);
transition-duration: var(--dur-exit); transition-timing-function: var(--ease-in);
}
@starting-style {
.dock:not([hidden]) { opacity: 0; translate: 0 var(--rise-2); }
}
.dock-crest::after { transition: opacity var(--dur-1) var(--ease-micro); }
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
box-sizing: border-box; block-size: var(--ctl-h); margin: 0; padding: 0 var(--s-4);
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: transparent; box-shadow: var(--lip);
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-strong); line-height: 1;
color: var(--ink-2); white-space: nowrap; text-decoration: none; cursor: pointer;
}
@media (hover: hover) {
.btn:hover { color: var(--ink-1); border-color: var(--line-3); background: var(--hover); }
}
.btn:active { box-shadow: var(--lip-press); }
.btn--primary {
background: var(--amber-wash); border-color: var(--amber-rim); color: var(--amber-ink);
box-shadow: var(--lip-amber);
}
@media (hover: hover) {
.btn--primary:hover { background: var(--amber-wash-hi); border-color: var(--amber); color: var(--amber-ink-hi); }
}
.btn--primary:active { box-shadow: var(--lip-amber-press); }
.btn--s { block-size: 32px; padding-inline: var(--s-3); }
.btn--glyph { inline-size: var(--ctl-h); padding: 0; }
.btn--wide { display: flex; inline-size: 100%; block-size: var(--touch); margin-block: var(--s-3) var(--s-15); }
.btn-ar { font-family: var(--font-mono); font-weight: var(--w-medium); }
.btn:disabled, .btn[aria-disabled="true"] {
color: var(--ink-4); border-color: var(--line-1); background: transparent; box-shadow: none; cursor: not-allowed;
}
@media (max-width: 860px) {
.btn--s { block-size: var(--touch); }
}
.seg {
position: relative; display: inline-flex; align-items: stretch; gap: var(--s-05);
box-sizing: border-box; block-size: var(--ctl-h); padding: var(--s-05);
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: transparent; box-shadow: var(--lip);
}
.seg > button {
position: relative; z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
margin: 0; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: transparent;
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-medium); line-height: 1;
color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
@media (hover: hover) {
.seg > button:not([aria-pressed="true"], [aria-selected="true"], :disabled):hover { color: var(--ink-1); }
}
.seg > button:active { box-shadow: var(--lip-press); }
.seg > button:focus-visible { outline-offset: 0; }
.seg-ind {
position: absolute; inset-block: var(--s-05); inset-inline-start: 0; z-index: 0;
border-radius: var(--r-pill); opacity: 0; pointer-events: none;
}
@media (max-width: 860px) {
.seg { block-size: calc(var(--touch) + 6px); }
.seg > button { min-inline-size: var(--touch); }
}
.chip {
display: inline-flex; align-items: center; gap: var(--s-2);
box-sizing: border-box; block-size: var(--chip-h); margin: 0; padding: 0 var(--s-3);
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: transparent; box-shadow: var(--lip);
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-medium); line-height: 1;
color: var(--ink-2); white-space: nowrap; text-decoration: none; cursor: pointer;
}
@media (hover: hover) {
.chip:hover { color: var(--ink-1); border-color: var(--line-3); background: var(--hover); }
}
.chip:active { box-shadow: var(--lip-press); }
.chip-sw { display: inline-block; flex: none; inline-size: 8px; block-size: 8px; background: var(--c); }
a.chip::before {
content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: var(--r-disc); background: var(--amber);
}
@media (max-width: 860px) {
.chip { min-inline-size: var(--touch); justify-content: center; }
}
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"], .chip[aria-pressed="true"],
.pick[aria-pressed="true"],
.seg:has(> button[aria-pressed="true"], > button[aria-selected="true"]) > .seg-ind {
background: var(--selected); box-shadow: inset 0 0 0 1px var(--amber-rim); color: var(--amber-ink);
}
.seg.has-ind > button[aria-pressed="true"], .seg.has-ind > button[aria-selected="true"] {
background: transparent; box-shadow: none;
}
.chip--key[aria-pressed="true"] { background: transparent; box-shadow: var(--lip); color: var(--ink-2); }
.chip--key[aria-pressed="false"] { color: var(--ink-3); }
.chip--key[aria-pressed="false"] .chip-sw { background: none; box-shadow: inset 0 0 0 1px var(--c); }
.seg > button:disabled, .chip:disabled, .chip[aria-disabled="true"] {
color: var(--ink-4); border-color: var(--line-1); background: transparent; box-shadow: none; cursor: not-allowed;
}
@media (prefers-reduced-motion: no-preference) {
.btn, .chip {
transition: color var(--dur-1) var(--ease-micro), background-color var(--dur-1) var(--ease-micro),
border-color var(--dur-1) var(--ease-micro), box-shadow var(--dur-1) var(--ease-micro),
scale var(--dur-2) var(--ease-spring);
}
.seg > button {
transition: color var(--dur-1) var(--ease-micro), box-shadow var(--dur-1) var(--ease-micro),
scale var(--dur-2) var(--ease-spring);
}
.seg-ind {
transition: transform var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out),
width var(--dur-2) var(--ease-out), inline-size var(--dur-2) var(--ease-out),
opacity var(--dur-1) var(--ease-micro);
}
.btn:not(:disabled):active, .chip:not(:disabled, [aria-disabled="true"]):active, .seg > button:not(:disabled):active {
scale: var(--press); transition-duration: var(--dur-press);
}
.btn--glyph:not(:disabled):active { scale: var(--press-round); }
.btn--wide:not(:disabled):active { scale: var(--press-wide); }
.btn-ar { transition: translate var(--dur-1) var(--ease-micro); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.btn:hover .btn-ar { translate: 3px 0; }
}
.rlogo {
display: inline-block; flex: none; vertical-align: -.16em;
height: calc(var(--rlh, 1.35em) * var(--rls, 1)); width: calc(var(--rlh, 1.35em) * var(--rls, 1) * var(--lw, 3));
background: var(--sc);
-webkit-mask-position: left center; mask-position: left center;
-webkit-mask-size: auto 100%; mask-size: auto 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.rlogo[data-rlogo="natureindex"] { --rls: .82; }
.rlogo:not([data-rl="1"]):not([data-rl="0"]) { width: calc(var(--rlh, 1.35em) * var(--rls, 1) * var(--lw, 0)); background: none; }
.dot {
flex: none; width: 8px; height: 8px; border-radius: var(--r-disc);
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
.dot.qs { background: var(--qs); color: var(--qs); }
.dot.the { background: var(--the); color: var(--the); }
.dot.arwu { background: var(--arwu); color: var(--arwu); }
.dot.usnews { background: var(--usnews); color: var(--usnews); }
.dot.cwur { background: var(--cwur); color: var(--cwur); }
.ledger {
--delta-gap: var(--s-1);
inline-size: 100%; table-layout: fixed; border-collapse: collapse;
}
.ledger th.c-ord { inline-size: 64px; }
.ledger th.c-comp { inline-size: 274px; }
.ledger th.c-sys { inline-size: 112px; }
.ledger thead, .ledger thead th {
position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
}
.ledger thead th {
box-sizing: border-box; block-size: 40px; padding: 0 var(--s-1); border: 0;
background: var(--raised); box-shadow: inset 0 -1px 0 var(--line-2);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
text-align: start; white-space: nowrap; vertical-align: middle;
}
.ledger th[aria-sort] { cursor: pointer; user-select: none; }
.ledger .sortbtn { all: unset; cursor: pointer; }
@media (hover: hover) {
.ledger th[aria-sort="none"]:hover { color: var(--ink-1); }
}
.ledger th[aria-sort$="ending"] { color: var(--amber-ink); }
@container window (width >= 1000px) {
.ledger th[aria-sort$="ending"] { box-shadow: inset 0 -2px 0 var(--amber), inset 0 -1px 0 var(--line-2); }
}
.ledger th:has(> .sortbtn:focus-visible) { outline: var(--focus-ring); outline-offset: -2px; }
.ledger td {
box-sizing: border-box; block-size: var(--row-h); padding: var(--row-pad) var(--s-1);
border: 0; border-block-end: 1px solid var(--line-1); vertical-align: middle;
}
.ledger tr[data-pr] > td { padding-block: var(--pr); }
.ledger .c-ord { text-align: center; }
.ledger .c-nm { padding-inline: var(--s-3); }
.ledger :is(.c-comp, .c-sys) { text-align: end; white-space: nowrap; }
.ledger td > .delta { inline-size: var(--delta-w); margin-inline-start: var(--delta-gap); text-align: start; }
.ledger .c-comp > .delta { inline-size: var(--delta-w-comp); }
@container window (width >= 1000px) {
.ledger :is(th, td).c-sys { text-align: center; }
.ledger td.c-sys { position: relative; }
.ledger tr:has(> td > .delta[role="img"]) > td:is(.c-sys, .c-comp) { padding-block-end: calc(var(--row-pad) + 1.15em); }
.ledger td.c-sys > .delta {
position: absolute; inset-inline: 0; inset-block-end: calc(var(--row-pad) - 2px);
inline-size: auto; margin: 0; text-align: center;
}
.ledger th:is(.c-sys, .c-comp) .sortbtn { position: relative; }
.ledger th:is(.c-sys, .c-comp) .arrow { position: absolute; inset-inline-start: 100%; inset-block-start: 50%; translate: 0 -50%; }
.ledger thead th.c-comp { z-index: calc(var(--z-sticky) + 1); }
.ledger td.c-comp > .delta {
position: absolute; inset-inline-end: var(--s-1); inset-block-end: calc(var(--row-pad) - 2px);
inline-size: auto; margin: 0; text-align: end;
}
}
.ledger .slab { display: none; }
@media (hover: hover) {
.ledger tr:hover > td { background-color: var(--surface-hover); }
}
@media (prefers-reduced-motion: no-preference) {
.ledger td { transition: background-color var(--dur-1) var(--ease-micro); }
.ledger thead th { transition: color var(--dur-1) var(--ease-micro), background-color var(--dur-1) var(--ease-micro),
border-color var(--dur-1) var(--ease-micro), box-shadow var(--dur-1) var(--ease-micro), scale var(--dur-2) var(--ease-spring); }
.ledger th:has(> .sortbtn:focus-visible) { animation: ord-ring .18s var(--ease-out); }
@container window (width < 1000px) { .ledger th:has(> .sortbtn):active { scale: var(--press); transition-duration: var(--dur-press); } }
}
@container window (1000px <= width < 1180px) {
.ledger { --delta-gap: 3px; }
.ledger th.c-ord { inline-size: 52px; }
.ledger th.c-comp { inline-size: 228px; }
.ledger th.c-sys { inline-size: 104px; }
.ledger .c-sys > .fig { font-size: var(--t-ui); }
.ledger .c-nm .crest { display: none; }
}
@container window (width < 1000px) {
.ledger, .ledger > thead, .ledger > tbody { display: block; }
.ledger thead tr {
display: flex; gap: var(--s-15); overflow-x: auto; padding: 9px var(--s-3); scrollbar-width: none;
}
.ledger thead, .ledger thead th { position: static; }
.ledger thead th {
display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
block-size: auto; min-block-size: var(--touch);
border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; box-shadow: none;
letter-spacing: 0; text-transform: none;
}
.ledger th:is(.c-nm, .c-comp, .c-sys) { inline-size: auto; padding: 0 var(--s-3); }
.ledger th.c-ord {
position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%);
}
.ledger th[aria-sort$="ending"] { border-color: var(--amber-rim); background: var(--selected); }
.ledger th:has(> .sortbtn) { padding: 0; }
.ledger .sortbtn { display: inline-flex; align-items: center; gap: var(--s-1); align-self: stretch; padding: 0 var(--s-3); }
.ledger th:has(> .sortbtn:focus-visible) { outline-offset: 2px; }
.ledger tbody tr {
position: relative; display: grid;
grid-template-columns: var(--touch) repeat(auto-fill, minmax(121px, 1fr));
column-gap: var(--s-3); align-items: start;
padding: var(--s-3) var(--s-3) var(--s-3) 0;
border-block-start: 1px solid var(--line-3);
}
.ledger tr[data-pr] { padding-block: var(--pr); }
.ledger td {
display: block; grid-column: 1 / -1; block-size: auto; padding: 0; min-inline-size: 0; border: 0;
}
.ledger tr[data-pr] > td { padding-block: 0; }
.ledger td.c-ord { grid-column: 1; grid-row: 1 / span 8; text-align: start; }
.ledger td.c-nm { grid-column: 2 / -1; grid-row: 1; padding-inline: 0; margin-block-end: 10px; }
.ledger td:is(.c-comp, .c-sys) {
grid-column: auto; display: flex; align-items: baseline; gap: var(--s-15);
min-block-size: 28px; text-align: start; border-block-end: 1px solid var(--line-1);
}
.ledger .slab {
display: inline-flex; align-items: center; gap: var(--s-1); flex: none; white-space: nowrap;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.ledger .slab > .dot { inline-size: 7px; block-size: 7px; border-radius: var(--r-0); box-shadow: none; }
.ledger .slab > .dot.own { background: none; border-radius: var(--r-disc); box-shadow: inset 0 0 0 1px var(--ink-1); }
.ledger td > .fig { margin-inline-start: auto; }
.ledger .c-sys > .fig { font-size: var(--t-ui); color: var(--ink-1); }
.ledger .c-sys > .fig--gap { color: var(--ink-3); }
.ledger .c-sys > .fig--wd { color: var(--down); }
.ledger td.c-comp > .fig { min-inline-size: 6ch; text-align: end; font-size: var(--t-composite); }
.ledger td.c-sys { flex-wrap: wrap; justify-content: flex-end; }
.ledger td.c-sys > .slab { margin-inline-end: auto; }
.ledger td.c-sys > .fig { order: 2; margin-inline-start: 0; }
.ledger td.c-sys > .delta { order: 3; flex-basis: 100%; inline-size: auto; margin: 0; text-align: end; line-height: 1.2; }
.ledger td:is(.c-sys, .c-comp):has(> .delta[role="img"]) { row-gap: 0; }
.ledger .pick {
min-inline-size: var(--touch); block-size: var(--touch); padding: 0;
border: 4px solid transparent; background-clip: padding-box;
}
.ledger .pick:focus-visible { outline-offset: -4px; }
.ledger tr:hover > td { background-color: transparent; }
.ledger:has(th.c-comp[aria-sort$="ending"]) td.c-comp > .slab,
.ledger:has(th[data-k="qs"][aria-sort$="ending"]) td[data-s="qs"] > .slab,
.ledger:has(th[data-k="the"][aria-sort$="ending"]) td[data-s="the"] > .slab,
.ledger:has(th[data-k="arwu"][aria-sort$="ending"]) td[data-s="arwu"] > .slab,
.ledger:has(th[data-k="usnews"][aria-sort$="ending"]) td[data-s="usnews"] > .slab,
.ledger:has(th[data-k="cwur"][aria-sort$="ending"]) td[data-s="cwur"] > .slab { color: var(--amber-ink); }
}
@container window ((322px <= width < 455px) or (588px <= width < 721px)) {
.ledger td[data-s="cwur"] { grid-column: 2 / -1; }
}
@container window (455px <= width < 588px) {
.ledger td[data-s="cwur"] { grid-column: 3 / -1; }
}
@container window (721px <= width < 1000px) {
.ledger td[data-s="cwur"] { grid-column: 6 / -1; }
}
.row {
position: relative;
display: grid; grid-template-columns: var(--cols, 64px auto minmax(0, 1fr) auto);
align-items: center; column-gap: var(--s-3);
box-sizing: border-box; min-block-size: var(--row-h); margin: 0; padding: var(--row-pad);
border-block-end: 1px solid var(--line-1);
color: inherit; text-decoration: none;
}
.row:last-child { border-block-end: 0; }
[data-pr="1"] { --pr: var(--podium-1); }
[data-pr="2"] { --pr: var(--podium-2); }
[data-pr="3"] { --pr: var(--podium-3); }
.row[data-pr] { padding-block: var(--pr); }
@media (hover: hover) {
a.row:hover { background-color: var(--surface-hover); }
a.row:hover .row-ord { color: var(--ink-1); }
a.row--sub:hover .row-name { color: var(--ink-1); }
}
a.row:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.row-ord {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-3); text-align: center;
}
.row-who { min-inline-size: 0; }
.ledger .row-name { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.row-name {
display: block; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
font-family: var(--font-sans); font-size: var(--t-name); font-weight: var(--w-strong); line-height: var(--lh-ui);
letter-spacing: var(--tr-sub); color: var(--ink-1);
}
.row-sub {
display: block; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-regular); line-height: var(--lh-small);
color: var(--ink-3);
}
.row-fig { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.row--muted .row-name { color: var(--ink-2); }
.row--sub .row-name { white-space: normal; font-size: var(--t-body); font-weight: var(--w-medium); color: var(--ink-2); }
.fig {
font-family: var(--font-mono); font-size: var(--t-figure); font-weight: var(--w-strong); line-height: var(--lh-figure);
letter-spacing: var(--tr-figure); font-variant-numeric: tabular-nums; color: var(--ink-1);
}
.fig--comp { font-size: var(--t-composite); }
.fig--qs { color: var(--qs-d); }
.fig--the { color: var(--the-d); }
.fig--arwu { color: var(--arwu-d); }
.fig--usnews { color: var(--usnews-d); }
.fig--cwur { color: var(--cwur-d); }
.fig--up { color: var(--up); }
.fig--down { color: var(--down); }
.fig--gap { font-weight: var(--w-regular); color: var(--ink-3); }
.fig--wd { color: var(--down); cursor: help; }
@media (prefers-reduced-motion: no-preference) {
a.row { transition: background-color .1s var(--ease-micro); }
a.row:hover { transition-duration: var(--dur-1); }
}
.pick {
display: inline-grid; place-items: center; box-sizing: border-box;
min-inline-size: 32px; block-size: 32px; margin: 0; padding: 0 var(--s-1);
border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-3); cursor: pointer;
}
@media (hover: hover) {
.ledger tr:hover .pick:not(:disabled, [aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--line-ctl); color: var(--ink-1); }
}
@media (hover: none) {
.pick:not(:disabled, [aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--line-ctl); }
}
.pick:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.pick:disabled { color: var(--ink-4); cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
.pick { transition: color var(--dur-1) var(--ease-micro), background-color var(--dur-1) var(--ease-micro),
box-shadow var(--dur-1) var(--ease-micro), scale var(--dur-2) var(--ease-out); }
.pick:not(:disabled):active { scale: var(--press-round); transition-duration: var(--dur-press); }
}
.field {
box-sizing: border-box; block-size: var(--ctl-h); min-inline-size: 0; margin: 0; padding: 0 var(--s-4);
border: 1px solid var(--line-ctl); border-radius: var(--r-pill);
background-color: var(--well); box-shadow: var(--recess);
font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-medium); line-height: var(--lh-ui);
color: var(--ink-1);
}
.field::placeholder { color: var(--ink-3); opacity: 1; }
@media (hover: hover) {
.field:hover { border-color: var(--line-ctl-hi); }
}
.field:focus-visible { border-color: var(--amber); outline: var(--focus-ring); outline-offset: 2px; }
.field:disabled { border-color: var(--line-2); color: var(--ink-4); cursor: not-allowed; }
.field--select {
appearance: none; -webkit-appearance: none; padding-inline-end: 38px; cursor: pointer;
background-image: var(--chev); background-repeat: no-repeat;
background-position: right 16px center; background-size: 10px 6px;
}
.field--select option, .field--select optgroup { background-color: var(--plate); color: var(--ink-1); }
.field--l { block-size: var(--touch); }
@media (max-width: 860px) {
.field { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
.field { transition: border-color var(--dur-1) var(--ease-micro), box-shadow var(--dur-1) var(--ease-micro); }
}
input.fader {
-webkit-appearance: none; appearance: none;
display: block; inline-size: 100%; block-size: 16px; margin: 0; padding: 0;
background: transparent; cursor: pointer;
}
input.fader::-webkit-slider-runnable-track {
block-size: 6px; border-radius: var(--r-pill);
background: linear-gradient(to right, var(--c, var(--ink-2)) var(--fill, 0%), var(--well) var(--fill, 0%));
box-shadow: var(--recess), inset 0 0 0 1px var(--line-2);
}
input.fader::-moz-range-track {
block-size: 6px; border-radius: var(--r-pill);
background: linear-gradient(to right, var(--c, var(--ink-2)) var(--fill, 0%), var(--well) var(--fill, 0%));
box-shadow: var(--recess), inset 0 0 0 1px var(--line-2);
}
input.fader::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
inline-size: 16px; block-size: 16px; margin-block-start: -5px; border: 0; border-radius: var(--r-disc);
background: var(--ink-1); box-shadow: 0 0 0 2px var(--ground);
}
input.fader::-moz-range-thumb {
inline-size: 16px; block-size: 16px; border: 0; border-radius: var(--r-disc);
background: var(--ink-1); box-shadow: 0 0 0 2px var(--ground);
}
input.fader:focus-visible { outline: none; }
input.fader:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--amber); }
input.fader:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--amber); }
input.fader:disabled { cursor: not-allowed; }
@media (max-width: 860px) {
input.fader { block-size: var(--touch); }
}
@media (prefers-reduced-motion: no-preference) {
input.fader::-webkit-slider-thumb { transition: scale var(--dur-2) var(--ease-spring), box-shadow var(--dur-1) var(--ease-micro); }
input.fader::-moz-range-thumb { transition: scale var(--dur-2) var(--ease-spring), box-shadow var(--dur-1) var(--ease-micro); }
input.fader:active::-webkit-slider-thumb { scale: 1.2; transition-duration: var(--dur-press); }
input.fader:active::-moz-range-thumb { scale: 1.2; transition-duration: var(--dur-press); }
}
.label {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.tag {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium);
font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-3);
}
.tag--box { border: 1px solid var(--line-2); padding: 1px 5px; }
.desk { margin-block-start: var(--space-lead); }
.desk-row {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-stack);
margin-block-start: var(--space-stack);
}
.desk-grow { flex: 1 1 auto; }
.desk-pair { display: inline-flex; align-items: center; gap: var(--s-3); }
.desk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pane {
position: relative; box-sizing: border-box; padding: var(--pane-pad);
background: var(--pane); border: 1px solid var(--line-2); border-block-start-color: var(--line-3);
border-radius: var(--r-0); box-shadow: none;
}
@media (hover: hover) {
a.pane:hover { border-color: var(--line-3); }
}
.pane--window {
container: window / inline-size;
padding: 0; max-block-size: clamp(460px, 74vh, 1000px); min-block-size: clamp(460px, 74vh, 1000px);
overflow: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.pane--tile { --pane-pad: 14px 16px; }
.pane--frame { padding: 0; }
.pane--window:has(.row, .empty:not([hidden]), .ledger tbody > tr:not(.skrow)) { min-block-size: 0; }
.sheet .pane { padding: 0; background: none; border: 0; }
@media (max-height: 620px) {
.pane--window { min-block-size: 60vh; }
}
@media (max-width: 860px) {
.pane--window { max-block-size: none; overflow: visible; }
}
@media (prefers-reduced-motion: no-preference) {
a.pane { transition: border-color var(--dur-1) var(--ease-micro); }
}
.hd {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4);
margin: 0; padding-block-start: var(--rule-gap); border-block-start: 1px solid var(--line-3);
}
.hd-o, .hd-k, .hd-n {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: var(--lh-ui);
letter-spacing: var(--tr-kicker); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.hd-o { min-inline-size: 40px; letter-spacing: var(--tr-label); color: var(--ink-3); }
.hd-n {
order: 1; margin-inline-start: auto; text-align: end;
font-weight: var(--w-medium); letter-spacing: var(--tr-label); color: var(--ink-3);
}
.hd-n b { font-weight: var(--w-strong); color: var(--ink-2); }
@media (hover: hover) {
a.hd-k:hover { color: var(--ink-1); }
}
.hd-t {
order: 2; flex: 1 0 100%; margin: var(--s-3) 0 var(--space-head);
font-family: var(--font-serif); font-size: var(--t-section); font-weight: var(--w-regular);
line-height: var(--lh-section); letter-spacing: var(--tr-section); text-transform: none;
color: var(--ink-1); text-wrap: balance;
}
.hd:not(:has(> .hd-o, > .hd-k, > .hd-n)) > .hd-t { margin-block-start: 0; }
.hd--sub { row-gap: var(--s-2); margin-block-end: var(--space-stack); }
.hd--sub > .hd-t {
order: 0; flex: 0 1 auto; margin: 0;
font-size: var(--t-sub); line-height: var(--lh-sub); letter-spacing: var(--tr-sub);
}
.pane > .hd { border-block-start: 0; padding-block-start: 0; }
a.hd-k {
display: inline-flex; align-items: center; column-gap: calc(1ch + var(--tr-kicker)); min-block-size: var(--touch);
margin-block: calc((var(--t-label) * var(--lh-ui) - var(--touch)) / 2); text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
a.hd-k { transition: color var(--dur-1) var(--ease-micro); }
}
.masthead {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: baseline;
margin-block: calc(var(--bar-clear) + 48px - var(--bar-h)) var(--space-lead);
padding-block-start: var(--rule-gap); border-block-start: 1px solid var(--line-3);
}
.masthead > * { grid-column: 1 / -1; min-inline-size: 0; }
.masthead > .hd-k { grid-column: 1; grid-row: 1; justify-self: start; }
.masthead > .hd-n { grid-column: 2; grid-row: 1; }
.masthead h1 {
margin: 0; font-family: var(--font-serif); font-size: var(--t-display); font-weight: var(--w-regular);
line-height: var(--lh-display); letter-spacing: var(--tr-display); text-transform: none;
color: var(--ink-1); text-wrap: balance;
}
.masthead > h1 { margin-block: var(--s-5) var(--s-4); }
.masthead h1 :is(.gl, .hl) { font-style: italic; letter-spacing: var(--tr-sub); color: var(--ink-3); padding-inline-end: .04em; }
.masthead h1 :is(.gl, .hl):lang(zh) { font-style: normal; }
.masthead-lede {
margin: 0; font-family: var(--font-sans); font-size: var(--t-lead); line-height: var(--lh-prose);
color: var(--ink-2); text-wrap: pretty;
}
.masthead-lede b { font-weight: var(--w-strong); color: var(--ink-1); }
.masthead > .masthead-id {
grid-column: 1; grid-row: 2; display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-5); align-items: start; margin-block-start: var(--s-5);
}
.masthead-sub {
margin-block-start: var(--s-3); font-family: var(--font-sans); font-size: var(--t-ui);
line-height: var(--lh-small); color: var(--ink-3);
}
.masthead > .masthead-stat {
grid-column: 2; grid-row: 2; align-self: end; display: grid; justify-items: end; gap: var(--s-15);
margin-block-start: var(--s-5); text-align: end;
}
.masthead-readout {
font-family: var(--font-mono); font-size: var(--t-readout); font-weight: var(--w-strong);
line-height: var(--lh-figure); letter-spacing: var(--tr-figure); font-variant-numeric: tabular-nums;
color: var(--ink-1);
}
@media (max-width: 860px) {
.masthead { margin-block-start: calc(var(--bar-top) + 24px); }
}
.crest {
--crest-s: 32px;
position: relative; flex: none; overflow: hidden;
display: grid; place-items: center;
inline-size: var(--crest-s); block-size: var(--crest-s);
border-radius: var(--r-crest);
background: hsl(var(--h) 44% 18%); color: hsl(var(--h) 75% 72%);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
line-height: 1; letter-spacing: var(--tr-display);
}
.crest > img {
position: absolute; inset: 0; box-sizing: border-box; inline-size: 100%; block-size: 100%;
object-fit: contain; padding: 2px; background: var(--crest-plate);
}
.crest, .crest > img { box-shadow: var(--crest-edge); }
.crest--28 { --crest-s: 28px; }
.crest--64 { --crest-s: 64px; font-size: 24px; }
.coin {
display: inline-grid; place-items: center; box-sizing: border-box;
inline-size: 24px; block-size: 24px; border-radius: var(--r-disc);
background: var(--medal-1); box-shadow: var(--coin-edge); color: var(--medal-ink);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.coin--2 { background: var(--medal-2); }
.coin--3 { background: var(--medal-3); }
.coin--down { --medal-1: var(--medal-down-1); --medal-2: var(--medal-down-2); --medal-3: var(--medal-down-3); }
.delta {
display: inline-block;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.delta--up { color: var(--up); }
.delta--down { color: var(--down); }
.empty {
padding: 32px 16px; text-align: center; text-wrap: pretty;
font-family: var(--font-sans); font-size: var(--t-ui); line-height: var(--lh-small); color: var(--ink-3);
}
.empty-bar { display: inline-block; background: var(--raised); }
div.skrow {
display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--row-h);
padding: var(--row-pad); border-block-end: 1px solid var(--line-1);
}
div.skrow > .empty-bar { block-size: 14px; }
div.skrow > .empty-bar:first-child { inline-size: 32px; block-size: 32px; }
div.skrow > .empty-bar:nth-child(2) { inline-size: min(34%, 280px); }
div.skrow:nth-child(odd) > .empty-bar:nth-child(2) { inline-size: min(26%, 220px); }
div.skrow > .empty-bar:last-child { inline-size: 36px; margin-inline-start: auto; }
.chart-keys {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
margin-block-end: var(--s-3);
}
.chart-key {
display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: var(--chip-h);
font-family: var(--font-sans); font-size: var(--t-ui); font-weight: var(--w-medium); line-height: 1;
color: var(--ink-2); white-space: nowrap;
}
.chip-v { font-family: var(--font-mono); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.chip-fig { display: inline-grid; justify-items: end; row-gap: 2px; line-height: 1; margin-block: 3px; }
.chart-keys:has(.chip-fig > .delta) > .chip--key { block-size: var(--ctl-h); }
.chart-plot {
--chart-gl: 40px; --chart-gb: 28px; --chart-gr: 16px;
position: relative; container: chart / inline-size; block-size: 240px;
}
.chart-plot--bead { --chart-gr: 56px; }
.chart > .hd--sub > .hd-n {
text-wrap: balance; display: flex; flex-wrap: wrap; column-gap: 1.8em; text-align: start; clip-path: inset(-8px -8px -8px -5px);
}
.ch-bk { display: inline-block; inline-size: 9px; block-size: 9px; margin-inline-end: .45em; border-radius: var(--r-disc); box-shadow: inset 0 0 0 1.5px var(--ink-1); vertical-align: -1px; }
@media (max-width: 620px) {
.chart-plot { block-size: 300px; }
.chart > .hd--sub > .hd-n { flex-basis: 100%; margin-inline-start: 0; text-align: start; }
}
.chart-area { position: absolute; inset: 0 var(--chart-gr) var(--chart-gb) var(--chart-gl); }
.chart-svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.chart-svg [hidden] { display: none; }
.ch-grid, .ch-line, .ch-bridge, .ch-fit, .ch-pt, .ch-x { fill: none; vector-effect: non-scaling-stroke; }
.ch-grid { stroke: var(--line-2); stroke-width: 1px; stroke-dasharray: var(--dash-grid); }
.ch-s { mix-blend-mode: screen; }
.ch-line, .ch-bridge, .ch-fit {
stroke: var(--c); stroke-width: var(--line-series); stroke-linecap: round; stroke-linejoin: round;
}
.ch-bridge { stroke-dasharray: var(--dash-bridge); opacity: .65; }
.ch-fit { stroke-width: 1px; }
.ch-pt { stroke: var(--c); stroke-width: 5px; stroke-linecap: round; }
.chart--fit .ch-pt { stroke-width: 7px; }
.ch-x { stroke: var(--amber); stroke-width: 1px; stroke-dasharray: var(--dash-guide); pointer-events: none; }
.ch-cur, .ch-floor, .ch-split, .ch-snap, .ch-bead {
position: absolute; inset-inline-start: calc(var(--x) * 100%); inset-block-start: calc(var(--y) * 100%);
translate: -50% -50%; border-radius: var(--r-disc); pointer-events: none;
}
.ch-cur { inline-size: 8px; block-size: 8px; background: var(--c); box-shadow: 0 0 0 2px var(--sc-ring, var(--pane)); }
.ch-floor {
inline-size: 7px; block-size: 7px;
background: var(--sc-ring, var(--pane)); box-shadow: inset 0 0 0 1.5px var(--c);
}
.ch-floor::after {
content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 100%;
inline-size: 1.5px; block-size: 10px; translate: -50% 0; background: var(--c);
}
.ch-split { inline-size: 8px; block-size: 8px; background: var(--split); box-shadow: 0 0 0 1.5px var(--sc-ring, var(--pane)); }
.ch-snap { inline-size: 11px; block-size: 11px; box-shadow: inset 0 0 0 2px var(--c); }
.ch-bead {
inset-inline-start: calc(100% + 12px); inline-size: 9px; block-size: 9px;
background: var(--sc-ring, var(--pane)); box-shadow: inset 0 0 0 1.5px var(--ink-1);
}
.ch-lab, .ch-bv {
position: absolute; font: var(--w-medium) var(--t-label)/1 var(--font-mono);
font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; color: var(--ink-3);
pointer-events: none;
}
.ch-bv {
inset-inline-start: calc(100% + 20px); inset-block-start: calc(var(--y) * 100%); translate: 0 -50%;
font-weight: var(--w-strong); color: var(--ink-1);
}
.ch-lab--y {
inset-inline-end: calc(100% - var(--chart-gl) + 10px);
inset-block-start: calc(var(--y) * (100% - var(--chart-gb))); translate: 0 -50%;
}
.ch-lab--x {
inset-block-end: 0; translate: -50% 0;
inset-inline-start: calc(var(--chart-gl) + var(--x) * (100% - var(--chart-gl) - var(--chart-gr)));
}
.chart-area > .tip { inset-block-start: var(--s-1); }
.chart-foot {
margin: var(--s-3) 0 0; text-wrap: pretty;
font-family: var(--font-sans); font-size: var(--t-ui); line-height: var(--lh-small); color: var(--ink-3);
}
@keyframes chart-wipe {
from { clip-path: inset(-16px 100% -16px -16px); }
to { clip-path: inset(-16px calc(-1 * var(--chart-gr)) -16px -16px); }
}
@media (prefers-reduced-motion: no-preference) {
.chart.drawn .chart-area { animation: chart-wipe var(--dur-4) var(--ease-out) backwards; }
}
.method-h {
margin: 0 0 var(--s-2); padding-block-start: var(--s-2); border-block-start: 1px solid var(--line-2);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong); line-height: var(--lh-ui);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2);
}
.method p {
margin: 0; max-inline-size: var(--measure);
font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2);
}
.method p + p { margin-block-start: var(--s-2); }
.method b { font-weight: var(--w-strong); color: var(--ink-1); }
.foot {
position: relative; box-sizing: border-box; inline-size: min(100% - 2 * var(--gutter), var(--maxw));
margin: var(--space-foot) auto 0; padding-block-start: clamp(64px, 9vh, 112px);
border-block-start: 1px solid var(--line-2); text-align: start;
}
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: start; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-6) clamp(28px, 4vw, 64px); }
.foot-col ul { display: grid; gap: var(--s-05); margin: 0; padding: 0; list-style: none; }
.foot-lede {
max-inline-size: 30ch; margin: 0; font-family: var(--font-serif); font-style: italic;
font-weight: var(--w-regular); font-size: clamp(19px, 2vw, 27px); line-height: 1.36;
letter-spacing: var(--tr-sub); color: var(--ink-1); text-wrap: pretty;
}
:root:lang(zh) .foot-lede { font-style: normal; text-wrap: balance; }
.foot-note {
max-inline-size: 42ch; margin: clamp(18px, 2.4vh, 30px) 0 0; font-family: var(--font-sans);
font-size: var(--t-ui); line-height: var(--lh-small); color: var(--ink-2);
}
.foot-h {
margin: 0 0 14px; font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
line-height: var(--lh-ui); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.foot-col a {
display: flex; align-items: center; min-block-size: 30px;
font-family: var(--font-sans); font-size: var(--t-ui); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.foot-rule { block-size: 1px; margin: clamp(40px, 6vh, 72px) 0 20px; background: var(--line-2); }
.foot-row {
display: flex; flex-wrap: wrap; column-gap: 1.8em; clip-path: inset(-8px -8px -8px -5px);
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium);
line-height: var(--lh-body); color: var(--ink-3);
}
.foot-i + .foot-i::before, .hd-c + .hd-c::before {
content: "·" / ""; display: inline-block; inline-size: 1.8em; margin-inline-start: -1.8em; text-align: center;
}
.foot-row b { font-weight: var(--w-strong); color: var(--ink-2); }
.foot-row a {
color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: var(--amber-rim);
}
@media (hover: hover) {
.foot-col a:hover { color: var(--ink-1); }
.foot-row a:hover { color: var(--amber-ink); }
}
.foot-sig {
position: relative; block-size: clamp(72px, 22.4vw, 460px); margin-block-start: clamp(36px, 6vh, 80px);
overflow: hidden; pointer-events: none; user-select: none;
}
.foot-sig > span {
position: absolute; inset-inline-start: 50%; inset-block-start: 0; translate: -50% 0; white-space: nowrap;
font-family: var(--font-serif); font-style: italic; font-weight: var(--w-regular); text-transform: uppercase;
font-size: 21vw; line-height: .74; letter-spacing: .012em;
color: transparent; background-image: linear-gradient(in oklab, var(--sig-0) 0%, var(--sig-1) 48%, var(--sig-2) 100%);
-webkit-background-clip: text; background-clip: text;
}
@media (prefers-reduced-transparency: reduce) {
.foot-sig > span { color: var(--line-2); background-image: none; }
}
@media (max-width: 860px) {
.foot { padding-block-start: 44px; }
.foot-top { grid-template-columns: minmax(0, 1fr); }
.foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-lede { font-size: 20px; }
.foot-col a { min-block-size: var(--touch); white-space: normal; }
.foot-rule { margin: 32px 0 16px; }
.foot-sig { margin-block-start: 32px; }
.foot-row { line-height: var(--touch); }
.foot-row a { display: inline-flex; align-items: center; min-block-size: var(--touch); min-inline-size: var(--touch); }
}
@media (prefers-reduced-motion: no-preference) {
.foot a { transition: color var(--dur-1) var(--ease-micro); }
}
.totop {
position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); z-index: var(--z-dock);
inline-size: var(--touch); block-size: var(--touch);
background: var(--chrome); border-color: var(--line-2); box-shadow: var(--lit), var(--elev-float);
-webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
font-family: var(--font-mono); font-size: 18px; font-weight: var(--w-strong); color: var(--ink-2);
}
.totop[hidden], html[data-dock] .totop { display: none; }
@media (hover: hover) {
.totop:hover { background-color: var(--chrome); }
}
.totop:active { box-shadow: var(--lip-press), var(--elev-float); }
@media (max-width: 860px) {
.totop { inset-inline: var(--s-5) auto; }
}
@media (prefers-reduced-motion: no-preference) {
.totop {
transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out),
display var(--dur-2) allow-discrete, color var(--dur-1) var(--ease-micro),
border-color var(--dur-1) var(--ease-micro), scale var(--dur-2) var(--ease-spring);
}
.totop[hidden], html[data-dock] .totop { opacity: 0; translate: 0 var(--rise-1); }
@starting-style {
.totop:not([hidden]) { opacity: 0; translate: 0 var(--rise-1); }
}
}
.skip {
position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: var(--z-skip);
translate: 0 -200%;
}
.skip:focus-visible { translate: none; }
.skip.btn--primary { background: linear-gradient(var(--amber-wash), var(--amber-wash)), var(--plate); }
@media (prefers-reduced-motion: no-preference) {
.skip { transition: translate var(--dur-2) var(--ease-out); }
}
}
@layer signature {
.scale {
--sc-in: 4px; --sc-rule: 3px; --sc-lane0: 8px; --sc-pitch: 5px; --sc-lh: 4px; --sc-bead: 7px; --sc-foot: 0px;
position: relative; display: block; isolation: isolate;
inline-size: 100%; block-size: var(--sc-s-h);
}
.scale--s { inline-size: var(--sc-s-w); }
.scale--m, .scale--empty {
--sc-in: 5px; --sc-rule: 4px; --sc-lane0: 12px; --sc-pitch: 6px; --sc-lh: 5px; --sc-bead: 9px;
block-size: var(--sc-m-h);
}
.scale--l {
--sc-in: 6px; --sc-rule: 22px; --sc-lane0: 34px; --sc-pitch: 14px; --sc-lh: 10px; --sc-bead: 11px; --sc-foot: 20px;
block-size: var(--sc-l-h);
}
.scale--empty, .scale--empty + .sc-axis { max-inline-size: 480px; }
.scale::before {
content: ""; position: absolute; inset-inline: 0; inset-block-start: var(--sc-rule); block-size: 1px;
background: var(--line-3);
}
.scale::after {
content: ""; position: absolute; z-index: -1;
inset-block: var(--sc-lane0) var(--sc-foot); inset-inline: var(--sc-in);
background: linear-gradient(90deg,
transparent calc(29.43% - .5px), var(--line-1) 0 calc(29.43% + .5px),
transparent 0 calc(58.86% - .5px), var(--line-1) 0 calc(58.86% + .5px),
transparent 0 calc(88.29% - .5px), var(--line-1) 0 calc(88.29% + .5px), transparent 0);
}
.sc-m, .sc-bead, .sc-v, .sc-cv, .sc-lab {
position: absolute; inset-inline-start: calc(var(--sc-in) + var(--x) * (100% - 2 * var(--sc-in)));
}
.sc-qs { --lane: 0; --c: var(--qs-d); }
.sc-the { --lane: 1; --c: var(--the-d); }
.sc-arwu { --lane: 2; --c: var(--arwu-d); }
.sc-usnews { --lane: 3; --c: var(--usnews-d); }
.sc-cwur { --lane: 4; --c: var(--cwur-d); }
.sc-m {
inset-block-start: calc(var(--sc-lane0) + var(--lane) * var(--sc-pitch));
inline-size: 2px; block-size: var(--sc-lh); translate: -1px 0;
background: var(--c);
}
.sc-m:is(.sc-band, .sc-open) {
inline-size: max(2px, calc(var(--w) * (100% - 2 * var(--sc-in)))); translate: none;
background: color-mix(in srgb, var(--c) var(--sc-span-a), transparent);
box-shadow: inset 1px 0 0 var(--c), inset -1px 0 0 var(--c);
}
.sc-m.sc-open { box-shadow: inset 1px 0 0 var(--c); }
html[data-w0~="qs"] .sc-m.sc-qs, html[data-w0~="the"] .sc-m.sc-the, html[data-w0~="arwu"] .sc-m.sc-arwu,
html[data-w0~="usnews"] .sc-m.sc-usnews, html[data-w0~="cwur"] .sc-m.sc-cwur {
background: none; box-shadow: inset 0 0 0 1px var(--c);
}
html[data-w0~="qs"] .sc-m.sc-qs:not(.sc-band, .sc-open), html[data-w0~="the"] .sc-m.sc-the:not(.sc-band, .sc-open),
html[data-w0~="arwu"] .sc-m.sc-arwu:not(.sc-band, .sc-open), html[data-w0~="usnews"] .sc-m.sc-usnews:not(.sc-band, .sc-open),
html[data-w0~="cwur"] .sc-m.sc-cwur:not(.sc-band, .sc-open) {
inline-size: 4px; translate: -2px 0;
}
html[data-w0~="qs"] .sc-m.sc-qs.sc-open, html[data-w0~="the"] .sc-m.sc-the.sc-open, html[data-w0~="arwu"] .sc-m.sc-arwu.sc-open,
html[data-w0~="usnews"] .sc-m.sc-usnews.sc-open, html[data-w0~="cwur"] .sc-m.sc-cwur.sc-open {
box-shadow: inset 1px 0 0 var(--c), inset 0 1px 0 var(--c), inset 0 -1px 0 var(--c);
}
html[data-w0~="qs"] .sc-v.sc-qs:not(.is-gap), html[data-w0~="the"] .sc-v.sc-the:not(.is-gap),
html[data-w0~="arwu"] .sc-v.sc-arwu:not(.is-gap), html[data-w0~="usnews"] .sc-v.sc-usnews:not(.is-gap),
html[data-w0~="cwur"] .sc-v.sc-cwur:not(.is-gap) {
color: var(--ink-2);
}
.sc-bead {
inset-block-start: calc(var(--sc-rule) + .5px); inline-size: var(--sc-bead); block-size: var(--sc-bead);
translate: -50% -50%; border-radius: var(--r-disc);
background: var(--sc-ring, var(--pane)); box-shadow: inset 0 0 0 1.5px var(--ink-1);
}
.scale--l > .sc-bead { background: var(--sc-ring, var(--ground)); }
.sc-v, .sc-cv, .sc-lab, .sc-names > * {
font: var(--w-medium) var(--t-label)/12px var(--font-mono);
font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.sc-v {
inset-block-start: calc(var(--sc-lane0) + var(--lane) * var(--sc-pitch) - 1px);
margin-inline-start: var(--s-15); color: var(--ink-1);
}
.sc-v.is-band { color: var(--ink-2); }
.sc-v.is-gap { margin-inline-start: 0; color: var(--ink-3); }
.sc-v.is-flip { margin-inline-start: 0; translate: calc(-100% - var(--s-15)) 0; }
.sc-cv { inset-block-start: 0; translate: -50% 0; font-weight: var(--w-strong); color: var(--ink-1); }
.sc-cv.is-start { translate: -4px 0; }
.sc-cv.is-end { translate: calc(-100% + 4px) 0; }
.sc-lab { inset-block-start: 0; translate: -50% 0; color: var(--ink-3); }
.sc-lab.is-first { translate: -2px 0; }
.sc-lab.is-last { translate: -100% 0; }
.scale--l .sc-lab { inset-block-start: 108px; }
.scale--l, .sc-axis { container: sc / inline-size; }
@container sc (width < 560px) {
.sc-lab.is-last { display: none; }
}
.scale-l { display: grid; grid-template-columns: var(--sc-l-slot) minmax(0, 1fr); }
.sc-names { position: relative; }
.sc-names > * {
position: absolute; inset-inline-start: 0; inset-block-start: calc(34px + var(--lane) * 14px - 1px);
font-weight: var(--w-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--c);
}
.masthead > .scale-l { margin-block-start: var(--s-8); }
.sc-head, .sc-axis { position: relative; display: block; }
.sc-head { --sc-in: 4px; inline-size: var(--sc-s-w); block-size: 12px; }
.sc-axis { --sc-in: 5px; block-size: 14px; }
.sheet { --sc-ring: var(--plate); }
@media (hover: hover) {
.ledger tr:hover .scale, a.row:hover .scale { --sc-ring: var(--surface-hover); }
}
.ledger td.c-comp { position: relative; }
.ledger .c-comp > :is(.scale, .sc-head) { position: absolute; inset-inline-start: var(--s-1); }
.ledger td.c-comp > .scale { inset-block: 0; margin-block: auto; }
.ledger th.c-comp > .sc-head { inset-block: 0; margin-block: auto; }
@container window (1000px <= width < 1180px) {
.ledger { --sc-s-w: 112px; }
}
@container window (width < 1000px) {
.ledger th.c-comp > .sc-head { display: none; }
.ledger td.c-comp { position: static; grid-column: 2 / -1; }
.ledger td.c-comp > .fig { margin-inline-start: 0; }
.ledger td.c-comp { flex-wrap: wrap; }
.ledger td.c-comp > .delta { order: 9; flex-basis: 100%; inline-size: auto; margin: 0; }
.ledger td.c-comp > .scale {
position: relative; inset: auto; flex: 1 1 0; align-self: center;
inline-size: auto; min-inline-size: 0; margin-block: 0; margin-inline: var(--s-3) 0;
}
.ledger tr:hover .scale { --sc-ring: var(--pane); }
}
@container window (322px <= width < 1000px) {
.ledger td.c-comp { display: grid; grid-template-columns: subgrid; column-gap: normal; }
.ledger td.c-comp > * { grid-row: 1; }
.ledger td.c-comp > .slab { grid-column: 1; justify-self: start; }
.ledger td.c-comp > .fig { grid-column: 1; justify-self: end; }
.ledger td.c-comp > .delta { grid-column: 1; grid-row: 2; justify-self: end; inline-size: auto; margin: 0; line-height: 1.2; }
.ledger td.c-comp > .scale {
grid-column: 2 / -1; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: var(--t-label);
margin-inline-start: calc(var(--delta-gap) - var(--s-3) + var(--s-2));
}
}
}
@layer patterns {
@media (max-width: 620px) {
.desk-row--register {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
border-block-start: 1px solid var(--line-3); padding-block-start: var(--rule-gap);
}
.desk-row--register > .desk-pair { display: contents; }
.desk-row--register > :not(.desk-pair), .desk-row--register .desk-chips { grid-column: 1 / -1; }
.desk-row--register > .desk-grow { display: none; }
.desk-row--register > .label:last-child { justify-self: end; }
.desk-row--register .seg { min-inline-size: 0; }
.desk-row--register .seg > button { flex: 1 1 auto; white-space: normal; }
}
.sysline button .rlogo:not([data-rl="0"]), .sysline button .sdot {
opacity: .72; transition: opacity var(--dur-1) var(--ease-micro);
}
.sysline button:not(.on, [aria-pressed="true"]) .rlogo:where([data-rlogo="usnews"][data-rl="1"]) { opacity: .6; }
.sysline button:not([disabled]):hover .rlogo:not([data-rl="0"]),
.sysline button:not([disabled]):hover .sdot { opacity: .85; }
.sysline button:is(.on, [aria-pressed="true"]) :is(.rlogo, .sdot) { opacity: 1; }
.sysline .sdot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--r-disc); }
button[data-sys] .rlogo { --rlh: 18px; }
:is(.sysline, .cl, .sb, .sname, .ledger thead) .rlogo[data-rlogo="qs"] { --rls: .88; }
:is(.sysline, .cl, .sb, .sname, .ledger thead) .rlogo[data-rlogo="the"] { --rls: 1.15; }
:is(.sysline, .cl, .sb, .sname, .ledger thead) .rlogo[data-rlogo="arwu"] { --rls: 1.14; }
:is(.sysline, .cl, .sb, .sname, .ledger thead) .rlogo[data-rlogo="usnews"] { --rls: .82; }
.cl .rlogo:not([data-rl="0"]) { margin-block-start: calc(var(--rlh, 1.35em) * (1 - var(--rls, 1))); }
@media (max-width: 620px) {
:is(.desk-chips, .chart-keys:has(> .chip--key ~ .chip--key ~ .chip--key)) {
--sx-fade-l: 0px; --sx-fade-r: 0px;
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
padding: 4px; margin: -4px; position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ground) var(--sx-fade-l),
var(--ground) calc(100% - var(--sx-fade-r)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, var(--ground) var(--sx-fade-l),
var(--ground) calc(100% - var(--sx-fade-r)), transparent 100%); }
.chart-keys:has(> .chip--key ~ .chip--key ~ .chip--key) { margin-block-end: calc(var(--s-3) - 4px); }
:is(.desk-chips, .chart-keys:has(> .chip--key ~ .chip--key ~ .chip--key)).sx-l { --sx-fade-l: 34px; }
:is(.desk-chips, .chart-keys:has(> .chip--key ~ .chip--key ~ .chip--key)).sx-r { --sx-fade-r: 34px; }
:is(.desk-chips, .chart-keys:has(> .chip--key ~ .chip--key ~ .chip--key)) > * { flex: none; }
}
@media (max-width: 860px) { .pane--window > .btn--wide { inline-size: calc(100% - 2 * var(--s-3)); margin: var(--s-3); } }
@media (max-width: 620px) {
.row--entry {
grid-template-columns: var(--entry-m, var(--touch)) auto minmax(0, 1fr) auto;
grid-template-areas: "ord crest who who" ". fig fig note" "plot plot plot plot";
align-items: start; row-gap: 0; padding-inline-start: 0;
border-block-start: 1px solid var(--line-3); border-block-end: 0;
}
.row--entry > .row-ord { grid-area: ord; display: grid; place-items: center; min-block-size: 32px; }
.row--entry > .crest { grid-area: crest; }
.row--entry > .row-who { grid-area: who; }
.row--entry > .row-fig {
grid-area: fig; justify-self: start; display: flex; flex-wrap: wrap; align-items: baseline;
gap: 0 var(--s-2); margin-block-start: var(--s-2); text-align: start;
}
.row--entry > .row-note {
grid-area: note; display: inline-block; align-self: center; margin-block-start: var(--s-2);
white-space: nowrap; border: 0; padding: 0;
}
.row--entry > :is(.row-plot, .scale) { grid-area: plot; inline-size: auto; margin: var(--s-2) 0 0 var(--s-3); }
.row--entry :is(.row-name, .row-sub) {
white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
.row--entry .row-name { text-wrap: balance; }
.pane--window > .row--entry:first-child { border-block-start-color: transparent; }
.row--fig-end { grid-template-areas: "ord crest name name" "ord crest sub fig" "plot plot plot plot"; }
.row--fig-end > .row-who { display: contents; }
.row--fig-end .row-name { grid-area: name; }
.row--fig-end .row-sub { grid-area: sub; align-self: baseline; }
.row--fig-end > .row-fig { grid-area: fig; justify-self: end; align-self: baseline; margin-block-start: 0; }
.row--fig-end > .row-fig:has(> .delta:not(:empty)) { flex-direction: column; align-items: flex-end; row-gap: 2px; }
.row--fig-end > .row-fig > .delta { line-height: 1; }
.pane--window > .btn--wide {
inline-size: calc(100% - var(--entry-m, var(--touch)) - 2 * var(--s-3));
margin-inline: calc(var(--entry-m, var(--touch)) + var(--s-3)) var(--s-3);
}
}
.hold { position: relative; min-block-size: var(--hold-min, auto); }
.hold-stick { position: sticky; inset-block-start: var(--bar-clear); z-index: var(--z-sticky); }
.hold-stick > .pane--window {
max-block-size: var(--winmax, clamp(460px, 74vh, 1000px)); min-block-size: 0;
}
@media (width > 860px) and (prefers-reduced-motion: no-preference) {
.hold-stick > .desk-row { border-block-start: 1px solid var(--line-3); padding-block-start: var(--rule-gap); }
.hold-stick > .hd--sub ~ .desk-row { border-block-start: 0; padding-block-start: 0; }
}
@media (width > 620px) {
.masthead + .desk-row { border-block-start: 1px solid var(--line-3); padding-block-start: var(--rule-gap); }
.desk-row:not(.hd--sub ~ .desk-row):has(~ .pane--window) {
border-block-start: 1px solid var(--line-3); padding-block-start: var(--rule-gap); }
}
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
.hold { min-block-size: auto; }
.hold-stick { position: static; }
.hold-stick > .pane--window { max-block-size: none; }
}
.list-hd {
position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
background: var(--raised); box-shadow: inset 0 -1px 0 var(--line-2);
}
@media (max-width: 860px) and (min-height: 481px) {
.list-hd { inset-block-start: var(--bar-park); }
.list-hd ~ * { scroll-margin-block-start: var(--list-hd-h, 0px); }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
.list-hd { transition: inset-block-start var(--dur-2) var(--ease-out); }
}
@media (max-width: 620px) {
.masthead { grid-template-columns: minmax(0, 1fr); margin-block-start: calc(var(--bar-top) + 16px); }
.masthead > h1 { margin-block: var(--s-3); }
.masthead > .hd-n { grid-column: 1; grid-row: 2; justify-self: end; margin-block-start: var(--s-15); }
.masthead > .hd-n:empty { min-block-size: calc(var(--t-label) * var(--lh-ui)); }
.masthead > :is(.masthead-id, .masthead-stat) { grid-column: 1; grid-row: auto; }
.masthead > .masthead-stat { justify-items: start; text-align: start; }
.masthead-id { column-gap: var(--s-3); }
.masthead-id > .crest--64 { --crest-s: 44px; font-size: 16px; }
.masthead-lede { line-height: var(--lh-body); }
.deck { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.method-s:has(> p.deck) > p:not(:first-of-type) { display: none; }
.deckmore {
display: block; justify-self: start; inline-size: fit-content; text-align: start;
margin: 0; padding: 14px 0; min-height: var(--touch); border: 0; background: none;
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); cursor: pointer;
}
.deckmore::after { content: " ↓" / ""; }
.deckmore[aria-expanded="true"]::after { content: " ↑" / ""; }
.deckmore:active { color: var(--amber-ink); }
}
.method {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: var(--s-6) var(--s-10); align-items: start; margin-block-start: var(--s-6);
}
.method:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 34%)), 1fr)); }
.hd + .method { margin-block-start: 0; }
@media (prefers-reduced-motion: no-preference) {
.sk-rv {
opacity: 0; transform: translateY(16px);
transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
transition-delay: var(--d, 0ms);
}
.sk-rv.in { opacity: 1; transform: none; }
}
.elab, .k, .fmeta,
.fk, .dt, .flabel, .cath, .dgroup, .gk, .cgh, .ffields-h, .przgrp > span, .stsys, .cblab,
.cmptable thead th {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-strong);
letter-spacing: var(--tr-label); text-transform: uppercase;
}
.ind .bar, .cstk .cbar, .ha-track, .przbar, .g-pbar, .dvb {
border-radius: 0; background: var(--hover); border: 1px solid var(--line-1); box-shadow: none;
}
.ind .bar > span, .cstk .cbar > span, .ha-bar, .przbar i, .g-pbar i, .dvb > span { border-radius: 0; box-shadow: none; }
.ha-track { box-shadow: var(--recess-track); }
}
@layer util {
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }