/* ========================================================================== Kyouma45 — AI Research · Design System Light-first editorial design; the theme follows the system by default and is overridable from the header toggle (js/theme.js sets data-theme on ). Chart colors follow the validated reference palette: SSM/Mamba = blue (slot 1) Transformer = orange (slot 2) Phase 1 = blue · Phase 2 = orange · Phase 3 = aqua ========================================================================== */ :root { color-scheme: light; /* Surfaces & ink */ --page: #f9f9f7; --surface: #fcfcfb; --surface-raised: #ffffff; --ink: #0b0b0b; --ink-secondary: #52514e; --ink-muted: #898781; --hairline: #e1e0d9; --baseline: #c3c2b7; --ring: rgba(11, 11, 11, 0.10); /* Brand accent (slot-1 blue) */ --accent: #2a78d6; --accent-strong: #1c5cab; --accent-wash: rgba(42, 120, 214, 0.08); /* Chart series — color follows the entity, everywhere on the site */ --c-ssm: #2a78d6; /* blue — SSM / Mamba / linear-state models */ --c-transformer: #eb6834; /* orange — Transformer / attention */ /* Phase identities (first three categorical slots; all-pairs safe) */ --phase-1: #2a78d6; /* blue — Linear Sequence Revolution */ --phase-2: #eb6834; /* orange — Latent Reasoning Loops */ --phase-3: #1baf7a; /* aqua — Beyond Causal Autoregression */ --phase-1-wash: rgba(42, 120, 214, 0.10); --phase-2-wash: rgba(235, 104, 52, 0.10); --phase-3-wash: rgba(27, 175, 122, 0.10); /* Proposed / unpublished — must not collide with the shipped-work colors */ --proposed: #8b5cf6; /* violet */ --proposed-wash: rgba(139, 92, 246, 0.12); /* Chart chrome */ --gridline: #e1e0d9; --axis: #c3c2b7; /* Type */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; /* Prose measure widens with the viewport: 46rem floor on laptops, up to 60rem on wide monitors. */ --w-prose: clamp(46rem, 52vw, 60rem); --w-reading: 50rem; --w-wide: 72rem; --gutter: 1.5rem; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(11,11,11,.05), 0 8px 28px rgba(11,11,11,.06); } :root[data-theme="dark"] { color-scheme: dark; --page: #0d0d0d; --surface: #1a1a19; --surface-raised: #222220; --ink: #ffffff; --ink-secondary: #c3c2b7; --ink-muted: #898781; --hairline: #2c2c2a; --baseline: #383835; --ring: rgba(255, 255, 255, 0.10); --accent: #3987e5; --accent-strong: #6da7ec; --accent-wash: rgba(57, 135, 229, 0.14); --c-ssm: #3987e5; --c-transformer: #d95926; --phase-1: #3987e5; --phase-2: #d95926; --phase-3: #199e70; --phase-1-wash: rgba(57, 135, 229, 0.16); --phase-2-wash: rgba(217, 89, 38, 0.16); --phase-3-wash: rgba(25, 158, 112, 0.16); --proposed: #a78bfa; --proposed-wash: rgba(167, 139, 250, 0.18); --gridline: #2c2c2a; --axis: #383835; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--accent-wash); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: 0; } h4, h5 { font-family: var(--sans); font-weight: 600; } code, pre, kbd { font-family: var(--mono); } .container { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); } .prose-width { max-width: var(--w-prose); margin-left: auto; margin-right: auto; } .kicker { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.75rem; } .section { padding: 4.5rem 0; } .section + .section { border-top: 1px solid var(--hairline); } /* The sticky header already separates the first block from the top of the page. */ main > .section:first-child { padding-top: 3rem; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 0.5rem; } .section-lede { color: var(--ink-secondary); font-size: 1.06rem; max-width: 46rem; margin: 0 0 2rem; } /* -------------------------------------------------------------------------- Nav -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .nav { max-width: var(--w-wide); margin: 0 auto; padding: 0.8rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; } .brand { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--ink); letter-spacing: 0; display: flex; align-items: center; gap: 0.55rem; } .brand:hover { text-decoration: none; } .brand-mark { width: 22px; height: 22px; border-radius: 6px; flex: none; background: url("/assets/favicon.svg") center / contain no-repeat; } .brand small { font-weight: 500; color: var(--ink-muted); } .nav-links { margin-left: auto; display: flex; gap: 0.25rem; flex-wrap: wrap; } .nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--ink-secondary); padding: 0.35rem 0.7rem; border-radius: 999px; } .nav-links a:hover { color: var(--ink); background: var(--accent-wash); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-wash); } .theme-toggle { flex: none; margin-left: 0.4rem; padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--ink-secondary); cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .theme-toggle:hover { color: var(--ink); background: var(--accent-wash); border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding: 2.5rem 0 3rem; color: var(--ink-muted); font-size: 0.88rem; } .site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .site-footer a { color: var(--ink-secondary); margin-left: 1rem; } /* Persistent home-page bridge into the A.M.A.D.E.U.S research studio. */ body.has-amadeus-launcher { padding-bottom: 62px; } .amadeus-launcher { position: fixed; left: 50%; bottom: 11px; z-index: 70; width: max-content; max-width: calc(100vw - 1.5rem); padding: 3px; border: 1px solid color-mix(in srgb, var(--surface-raised) 62%, var(--hairline)); border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 82%, transparent), color-mix(in srgb, var(--accent-wash) 58%, transparent)); box-shadow: 0 10px 32px rgba(11,11,11,.14), inset 0 1px 0 color-mix(in srgb, #fff 72%, transparent); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); transform: translateX(-50%); } .amadeus-launcher::before { content: ""; position: absolute; inset: 1px 14px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); pointer-events: none; } .amadeus-launcher a { height: 34px; padding: 0 0.55rem 0 0.3rem; display: flex; align-items: center; gap: 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-raised) 38%, transparent); color: var(--ink); text-decoration: none; transition: background .18s, box-shadow .18s, transform .18s; } .amadeus-launcher a:hover { background: color-mix(in srgb, var(--surface-raised) 62%, var(--accent-wash)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); text-decoration: none; transform: translateY(-1px); } .amadeus-launcher-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #4794ed, var(--accent-strong)); color: #fff; font-size: 0.76rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 9px rgba(42,120,214,.3), inset 0 1px 0 rgba(255,255,255,.38); } .amadeus-launcher-copy { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; } .amadeus-launcher-copy strong { font-size: 0.74rem; } .amadeus-launcher-copy > span { color: var(--ink-muted); font-size: 0.69rem; } .amadeus-launcher-cta { padding: 0.18rem 0.48rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent-strong); font-size: 0.67rem; font-weight: 700; transition: color .15s, background .15s; } .amadeus-launcher a:hover .amadeus-launcher-cta { background: var(--accent); color: #fff; } .amadeus-launcher a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .amadeus-launcher svg { flex: none; color: var(--accent-strong); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; padding: 0.62rem 1.15rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); color: #fff; } .btn-ghost { border-color: var(--hairline); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--baseline); background: var(--surface); } /* -------------------------------------------------------------------------- Chips & badges -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.22rem 0.65rem; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-secondary); white-space: nowrap; } .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .chip-phase-1 { background: var(--phase-1-wash); border-color: transparent; } .chip-phase-1 .dot { background: var(--phase-1); } .chip-phase-2 { background: var(--phase-2-wash); border-color: transparent; } .chip-phase-2 .dot { background: var(--phase-2); } .chip-phase-3 { background: var(--phase-3-wash); border-color: transparent; } .chip-phase-3 .dot { background: var(--phase-3); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; } .card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .article-card { display: flex; flex-direction: column; gap: 0.6rem; transition: border-color .15s, box-shadow .15s; } .article-card:hover { border-color: var(--baseline); box-shadow: var(--shadow); } .article-card h3 { font-size: 1.15rem; margin: 0; } .article-card h3 a { color: var(--ink); } .article-card p { margin: 0; color: var(--ink-secondary); font-size: 0.93rem; } .article-card .meta { margin-top: auto; padding-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: var(--ink-muted); } /* -------------------------------------------------------------------------- Stat tiles -------------------------------------------------------------------------- */ .stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .stat-tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.15rem 1.25rem; } .stat-tile .value { font-family: var(--sans); font-size: 1.9rem; font-weight: 700; letter-spacing: 0; color: var(--ink); line-height: 1.15; } .stat-tile .value em { font-style: normal; color: var(--accent-strong); } .stat-tile .label { font-size: 0.85rem; color: var(--ink-secondary); margin-top: 0.3rem; } /* -------------------------------------------------------------------------- Chart components -------------------------------------------------------------------------- */ .viz { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.25rem 1.25rem 1rem; } .viz-title { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.15rem; color: var(--ink); } .viz-sub { font-size: 0.82rem; color: var(--ink-muted); margin: 0 0 0.9rem; } .viz svg text { font-family: var(--sans); } .viz .axis-label { fill: var(--ink-muted); font-size: 11px; } .viz .grid line { stroke: var(--gridline); stroke-width: 1; } .viz .axis line, .viz .axis path { stroke: var(--axis); } .legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-secondary); margin-top: 0.6rem; } .legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.4rem; vertical-align: baseline; } .viz-tooltip { position: absolute; pointer-events: none; z-index: 30; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--ink); opacity: 0; transition: opacity .1s; } .viz-tooltip.visible { opacity: 1; } .viz-tooltip .tip-row { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; } .viz-tooltip .tip-val { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; padding-left: 0.8rem; } /* Prose readout beneath a chart. SVG text cannot wrap, and the v2 mechanisms need a sentence of attribution each, so the explanation lives in the DOM. */ .viz-readout { display: grid; gap: 0.9rem 1.75rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding-top: 1rem; border-top: 1px solid var(--hairline); } .viz-readout .ro-key { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .viz-readout .ro-val { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-secondary); } /* Range slider */ .ctl-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; } .ctl-row label { font-size: 0.85rem; font-weight: 600; color: var(--ink-secondary); } .ctl-row output { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; color: var(--accent-strong); min-width: 5.5ch; } input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1 1 200px; height: 4px; border-radius: 2px; background: var(--gridline); outline-offset: 4px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--ring); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--ring); cursor: pointer; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } table.data { border-collapse: collapse; width: 100%; font-size: 0.88rem; } table.data th, table.data td { padding: 0.65rem 0.9rem; text-align: left; vertical-align: top; } table.data thead th { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--baseline); white-space: nowrap; position: sticky; top: 0; background: var(--surface); } table.data tbody tr + tr td { border-top: 1px solid var(--hairline); } table.data td.num { font-variant-numeric: tabular-nums; } table.data th[data-sort] { cursor: pointer; user-select: none; } table.data th[data-sort]:hover { color: var(--ink); } table.data th[data-sort]::after { content: "↕"; margin-left: 0.35rem; opacity: 0.45; font-size: 0.85em; } table.data th[data-sort="asc"]::after { content: "↑"; opacity: 1; } table.data th[data-sort="desc"]::after { content: "↓"; opacity: 1; } /* -------------------------------------------------------------------------- Article pages -------------------------------------------------------------------------- */ .article-header.container { max-width: var(--w-reading); } .article-header { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 1.75rem; } .article-header::after { content: ""; display: block; height: 1px; margin-top: 2rem; background: var(--hairline); } .article-header h1 { font-size: 3.35rem; margin: 0.5rem 0 1rem; max-width: none; text-wrap: balance; } .article-header .dek { font-family: var(--serif); font-size: 1.28rem; color: var(--ink-secondary); max-width: 42rem; margin: 0 0 1.4rem; line-height: 1.55; } .article-header .byline { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-muted); } .article-header .byline .sep { opacity: 0.5; } .article-body { font-family: var(--serif); font-size: 1.18rem; line-height: 1.78; max-width: var(--w-reading); margin: 0 auto; padding-top: 0.75rem; padding-bottom: 3.5rem; } .article-body > * + * { margin-top: 1.1em; } .article-body p { text-wrap: pretty; } .article-body h2 { font-size: 1.7rem; margin-top: 2.5em; padding-top: 0.8em; border-top: 1px solid var(--hairline); scroll-margin-top: 6rem; } .article-body h3 { font-size: 1.3rem; margin-top: 1.8em; } .article-body strong { font-weight: 600; } .article-body a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; } .article-body a:hover { text-decoration-color: currentColor; } .article-body blockquote { margin: 1.5em 0; padding: 0.2em 0 0.2em 1.25em; border-left: 3px solid var(--accent); color: var(--ink-secondary); font-style: italic; } .article-body code { font-size: 0.82em; background: var(--accent-wash); padding: 0.12em 0.4em; border-radius: 4px; } .article-body pre { font-size: 0.82rem; line-height: 1.55; overflow-x: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 1rem 1.2rem; } .article-body pre code { background: none; padding: 0; font-size: inherit; } .article-body figure { margin: 2em 0; } .article-body figure .fig-frame { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.25rem; overflow-x: auto; } .article-body figcaption { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.6rem; text-align: center; } .article-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.35em 0; } .article-body ul, .article-body ol { padding-left: 1.4em; } .article-body li + li { margin-top: 0.4em; } .article-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5em auto; width: 40%; } .callout { font-family: var(--sans); font-size: 0.95rem; background: var(--accent-wash); border-radius: var(--radius); padding: 1rem 1.25rem; border: 1px solid transparent; } .callout.note { background: var(--phase-1-wash); } .canonical-note { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-muted); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-top: 1rem; padding-bottom: 1rem; margin: 2.5rem auto 0; max-width: var(--w-reading); } .article-nav { max-width: var(--w-reading); margin: 0 auto; padding-top: 2rem; padding-bottom: 4rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; } .article-nav a { display: flex; flex-direction: column; gap: 0.15rem; max-width: 45%; color: var(--ink-secondary); } .article-nav .dir { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .reading-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; background: transparent; pointer-events: none; } .reading-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; } .reader-toc { max-width: var(--w-reading); margin: 0 auto 1.75rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--hairline); } .reader-toc > p { margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .reader-toc ol { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0 0 0.2rem; overflow-x: auto; scrollbar-width: none; } .reader-toc ol::-webkit-scrollbar { display: none; } .reader-toc li { flex: none; } .reader-toc a { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-secondary); font-size: 0.82rem; } .reader-toc a[aria-current="location"] { color: var(--accent-strong); font-weight: 600; } /* Once the gutters are no longer doing the spacing work, pull these rules in to the text column so every divider on the page shares one width. */ @media (min-width: 860px) { .reader-toc, .canonical-note { max-width: calc(var(--w-reading) - 2 * var(--gutter)); padding-left: 0; padding-right: 0; } } @media (min-width: 1280px) { .reader-toc { position: fixed; z-index: 20; top: 6.75rem; left: calc(50% + 26.5rem); width: min(14rem, calc(50vw - 28rem)); max-height: calc(100vh - 8.5rem); margin: 0; padding: 0 0 0 1rem; border: 0; border-left: 1px solid var(--hairline); overflow-y: auto; } .reader-toc ol { display: block; overflow: visible; } .reader-toc li + li { margin-top: 0.5rem; } .reader-toc a { white-space: normal; line-height: 1.35; } } /* -------------------------------------------------------------------------- Survey paper — every block shares the container's left edge; the section index moves into the right margin only when there is room for it. -------------------------------------------------------------------------- */ .paper-hero { padding: clamp(2.25rem, 4vw, 3rem) 0 2.25rem; border-bottom: 1px solid var(--hairline); } .paper-hero h1 { max-width: var(--w-reading); margin: 0 0 1.1rem; font-size: 3.5rem; text-wrap: balance; } .paper-hero .section-lede { max-width: var(--w-reading); margin-bottom: 1.6rem; font-size: 1.1rem; } .paper-metrics { display: flex; align-items: baseline; gap: 0.55rem 2rem; flex-wrap: wrap; max-width: var(--w-reading); padding-top: 1.1rem; border-top: 1px solid var(--hairline); color: var(--ink-secondary); font-size: 0.84rem; } .paper-metrics strong { color: var(--ink); font-size: 1rem; } .paper-metrics a { margin-left: auto; font-weight: 600; } .paper-reading { padding-top: 2.75rem; padding-bottom: 3.25rem; } .paper-layout { display: grid; grid-template-columns: minmax(0, var(--w-reading)); justify-content: start; align-items: start; row-gap: 2rem; } .paper-index { min-width: 0; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); } .paper-index > p, .paper-section-label { margin: 0 0 0.55rem; color: var(--ink-muted); font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .paper-index nav { display: flex; gap: 1.5rem; padding-bottom: 0.15rem; overflow-x: auto; scrollbar-width: none; } .paper-index nav::-webkit-scrollbar { display: none; } .paper-index a { flex: none; white-space: nowrap; color: var(--ink-secondary); font-size: 0.85rem; } .paper-manuscript { min-width: 0; } .paper-manuscript, .paper-status { font-family: var(--serif); font-size: 1.1rem; line-height: 1.75; } .paper-status > * { max-width: var(--w-reading); } .paper-section { scroll-margin-top: 6rem; } .paper-section + .paper-section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--hairline); } .paper-section h2, .paper-status h2 { margin: 0 0 1.05rem; font-size: 1.65rem; } .paper-section p, .paper-status li { text-wrap: pretty; } .paper-equation { margin: 1.6rem 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow-x: auto; color: var(--ink); } .paper-equation .katex-display { margin: 0.4em 0; } .paper-status li + li { margin-top: 0.5rem; } @media (min-width: 1200px) { .paper-layout { grid-template-columns: minmax(0, var(--w-reading)) minmax(10rem, 1fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); } .paper-manuscript { grid-column: 1; grid-row: 1; } .paper-index { grid-column: 2; grid-row: 1; align-self: stretch; position: sticky; top: 6.5rem; padding: 0 0 0 1.15rem; border-bottom: 0; border-left: 1px solid var(--hairline); } .paper-index nav { display: grid; gap: 0.6rem; overflow: visible; } .paper-index a { white-space: normal; font-size: 0.82rem; line-height: 1.35; } } @media (max-width: 1200px) { .article-header h1 { font-size: 2.95rem; } .paper-hero h1 { font-size: 3rem; } } @media (max-width: 960px) { .article-header h1 { font-size: 2.6rem; } .paper-hero h1 { font-size: 2.6rem; } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding: 3rem 0 3.5rem; } .hero-grid { display: grid; gap: 3rem; grid-template-columns: 1.15fr 1fr; align-items: start; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin: 0 0 1rem; } .hero .lede { font-size: 1.15rem; color: var(--ink-secondary); max-width: 34rem; margin: 0 0 1.75rem; } .hero .cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Atlas timeline -------------------------------------------------------------------------- */ .timeline-scroll { overflow-x: auto; padding-bottom: 0.5rem; } .phase-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .phase-filter button { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--hairline); background: transparent; color: var(--ink-secondary); } .phase-filter button[aria-pressed="true"] { border-color: transparent; color: var(--ink); } .phase-filter button[data-phase="1"][aria-pressed="true"] { background: var(--phase-1-wash); } .phase-filter button[data-phase="2"][aria-pressed="true"] { background: var(--phase-2-wash); } .phase-filter button[data-phase="3"][aria-pressed="true"] { background: var(--phase-3-wash); } .phase-filter button[data-phase="all"][aria-pressed="true"] { background: var(--accent-wash); } /* -------------------------------------------------------------------------- Slot-upgrade control — swap one piece of the Transformer block at a time -------------------------------------------------------------------------- */ .slot-ctl { display: grid; gap: 0.55rem; margin: 0.25rem 0 1.15rem; } .slot-ctl-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .slot-ctl-row .slot-name { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); flex: none; min-width: 8.5rem; } .slot-ctl-row .opts { display: flex; gap: 0.4rem; flex-wrap: wrap; } .slot-ctl-row button { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--hairline); background: transparent; color: var(--ink-secondary); } .slot-ctl-row button:hover { color: var(--ink); border-color: var(--baseline); } .slot-ctl-row button[aria-pressed="true"] { border-color: transparent; color: var(--ink); } .slot-ctl-row button.legacy[aria-pressed="true"] { background: rgba(235, 104, 52, 0.16); } .slot-ctl-row button.modern[aria-pressed="true"] { background: var(--phase-1-wash); } /* Dashed = proposed rather than published. */ .slot-ctl-row button.proposed { border-style: dashed; border-color: var(--proposed); } .slot-ctl-row button.proposed[aria-pressed="true"] { background: var(--proposed-wash); border-style: dashed; border-color: var(--proposed); } @media (max-width: 700px) { .slot-ctl-row { gap: 0.4rem; } .slot-ctl-row .slot-name { min-width: 100%; } .slot-ctl-row .opts { width: 100%; } .slot-ctl-row button { flex: 1 1 auto; } } .arch-node { cursor: pointer; } .arch-node circle { transition: r .12s; } .arch-node:hover circle, .arch-node.active circle { stroke-width: 3; } .arch-node text { font-size: 11.5px; fill: var(--ink-secondary); } .arch-node.active text { fill: var(--ink); font-weight: 600; } .dossier { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.75rem; margin-top: 1.5rem; } .dossier h3 { margin: 0.35rem 0 0.5rem; font-size: 1.45rem; } .dossier .facts { display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 1.25rem 0; } .dossier .facts div { font-size: 0.88rem; } .dossier .facts dt { color: var(--ink-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; } .dossier .facts dd { margin: 0; font-weight: 600; } .dossier .eq { background: var(--page); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; margin: 1rem 0; overflow-x: auto; font-size: 1.02rem; } .dossier .links { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.88rem; margin-top: 1rem; } /* -------------------------------------------------------------------------- Research timeline (24-month plan) -------------------------------------------------------------------------- */ .plan { display: grid; gap: 1rem; } .plan-phase { display: grid; grid-template-columns: 130px 1fr; gap: 1.25rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.4rem; align-items: start; } @media (max-width: 640px) { .plan-phase { grid-template-columns: 1fr; } } .plan-phase .months { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; } .plan-phase .months small { display: block; font-weight: 500; color: var(--ink-muted); margin-top: 0.2rem; } .plan-phase h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-family: var(--sans); font-weight: 650; } .plan-phase p { margin: 0; color: var(--ink-secondary); font-size: 0.95rem; } .plan-bar { height: 6px; border-radius: 3px; margin-top: 0.6rem; background: var(--gridline); position: relative; overflow: hidden; } .plan-bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; } /* -------------------------------------------------------------------------- "vs" panel — two papers, two conclusions -------------------------------------------------------------------------- */ .vs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; } @media (max-width: 780px) { .vs-wrap { grid-template-columns: 1fr; } } .vs-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .vs-card h3 { font-size: 1.2rem; margin: 0.35rem 0 0; } .vs-card p { margin: 0; color: var(--ink-secondary); font-size: 0.95rem; } .vs-card a { margin-top: auto; padding-top: 0.5rem; font-size: 0.9rem; font-weight: 600; } .vs-badge { align-self: center; justify-self: center; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-raised); border: 1px solid var(--baseline); color: var(--ink-secondary); box-shadow: var(--shadow); } @media (max-width: 780px) { .vs-badge { margin: -0.5rem auto; } } .vs-moral { margin-top: 1.25rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius) var(--radius) 0; } .vs-moral p { margin: 0; font-size: 0.98rem; color: var(--ink-secondary); max-width: 62rem; } .vs-moral strong { color: var(--ink); } /* -------------------------------------------------------------------------- Survey coverage — one deep-dive per architecture -------------------------------------------------------------------------- */ .cov-mini { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; } .cov-mini-bar { display: flex; gap: 3px; } .cov-mini-bar .seg { width: 16px; height: 8px; border-radius: 2px; background: transparent; border: 1px solid var(--baseline); } .cov-mini-bar .seg.on.p1 { background: var(--phase-1); border-color: var(--phase-1); } .cov-mini-bar .seg.on.p2 { background: var(--phase-2); border-color: var(--phase-2); } .cov-mini-bar .seg.on.p3 { background: var(--phase-3); border-color: var(--phase-3); } .cov-mini-label { font-size: 0.88rem; color: var(--ink-secondary); } .cov-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .cov-phase { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.25rem 1.25rem 1rem; border-top-width: 3px; } .cov-phase[data-phase="1"] { border-top-color: var(--phase-1); } .cov-phase[data-phase="2"] { border-top-color: var(--phase-2); } .cov-phase[data-phase="3"] { border-top-color: var(--phase-3); } .cov-phase > h3 { font-family: var(--sans); font-size: 0.95rem; margin: 0 0 1rem; } .cov-phase ul { list-style: none; margin: 0; padding: 0; } .cov-item { padding: 0.7rem 0; display: flex; gap: 0.7rem; align-items: flex-start; } .cov-item + .cov-item { border-top: 1px solid var(--hairline); } .cov-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 0.3rem; border: 2px solid var(--baseline); background: transparent; } .cov-item.done .cov-dot { border-color: transparent; } .cov-phase[data-phase="1"] .cov-item.done .cov-dot { background: var(--phase-1); } .cov-phase[data-phase="2"] .cov-item.done .cov-dot { background: var(--phase-2); } .cov-phase[data-phase="3"] .cov-item.done .cov-dot { background: var(--phase-3); } .cov-item .cov-name { font-weight: 600; font-size: 0.95rem; color: var(--ink); } .cov-item .cov-name small { font-weight: 500; color: var(--ink-muted); margin-left: 0.35rem; } .cov-item .cov-links { font-size: 0.85rem; margin-top: 0.1rem; } .cov-item .cov-links a { display: block; } .cov-item .cov-planned { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); border: 1px dashed var(--baseline); border-radius: 999px; padding: 0.08rem 0.6rem; margin-top: 0.15rem; } /* -------------------------------------------------------------------------- Utility -------------------------------------------------------------------------- */ .muted { color: var(--ink-muted); } .small { font-size: 0.85rem; } .center { text-align: center; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1.25rem; } .cols-2 { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; color: var(--ink-secondary); } .cols-2 > div > p:first-child { margin-top: 0; } .cols-2 .paper-equation { font-size: 0.95rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* -------------------------------------------------------------------------- Scroll-reveal + entrance animations js/reveal.js adds .is-in when an element scrolls into view. Elements are only hidden once JS confirms it is running (html.js-reveal), so the page stays fully readable with scripting disabled. -------------------------------------------------------------------------- */ :root { --reveal-dur: 0.95s; --reveal-ease: cubic-bezier(.22,.61,.36,1); --reveal-step: 110ms; /* gap between staggered siblings */ } html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); will-change: opacity, transform; } html.js-reveal .reveal.is-in { opacity: 1; transform: none; } html.js-reveal .reveal-left { transform: translateX(-18px); } html.js-reveal .reveal-scale { transform: scale(.97); } /* Stagger children of a container without hand-writing a delay on each one. */ html.js-reveal .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); } html.js-reveal .reveal-stagger.is-in > * { opacity: 1; transform: none; } html.js-reveal .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } html.js-reveal .reveal-stagger.is-in > *:nth-child(2) { transition-delay: calc(var(--reveal-step) * 1); } html.js-reveal .reveal-stagger.is-in > *:nth-child(3) { transition-delay: calc(var(--reveal-step) * 2); } html.js-reveal .reveal-stagger.is-in > *:nth-child(4) { transition-delay: calc(var(--reveal-step) * 3); } html.js-reveal .reveal-stagger.is-in > *:nth-child(5) { transition-delay: calc(var(--reveal-step) * 4); } html.js-reveal .reveal-stagger.is-in > *:nth-child(6) { transition-delay: calc(var(--reveal-step) * 5); } html.js-reveal .reveal-stagger.is-in > *:nth-child(7) { transition-delay: calc(var(--reveal-step) * 6); } html.js-reveal .reveal-stagger.is-in > *:nth-child(8) { transition-delay: calc(var(--reveal-step) * 7); } /* Past eight the cascade would outlast the reader's patience, so the step shortens rather than the list being cut off unrevealed. */ html.js-reveal .reveal-stagger.is-in > *:nth-child(n+9) { transition-delay: calc(var(--reveal-step) * 8); } html.js-reveal .reveal-stagger.is-in > *:nth-child(n+10) { transition-delay: calc(var(--reveal-step) * 8 + 60ms); } html.js-reveal .reveal-stagger.is-in > *:nth-child(n+11) { transition-delay: calc(var(--reveal-step) * 8 + 120ms); } html.js-reveal .reveal-stagger.is-in > *:nth-child(n+12) { transition-delay: calc(var(--reveal-step) * 8 + 180ms); } /* Table rows fade in one after another so a long comparison reads as a list. A shorter step than the card grids: rows are dense, and a 110ms cascade over nine of them would still be arriving after a second. */ html.js-reveal table.reveal-rows tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--reveal-ease), transform .7s var(--reveal-ease); } html.js-reveal table.reveal-rows.is-in tbody tr { opacity: 1; transform: none; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(1) { transition-delay: 0ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(2) { transition-delay: 80ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(3) { transition-delay: 160ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(4) { transition-delay: 240ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(5) { transition-delay: 320ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(6) { transition-delay: 400ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(7) { transition-delay: 480ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(8) { transition-delay: 560ms; } html.js-reveal table.reveal-rows.is-in tbody tr:nth-child(9) { transition-delay: 640ms; } /* Count-up numbers keep their box while the digits animate. */ .counter { font-variant-numeric: tabular-nums; } /* A quiet pulse for "live / in progress" markers. */ .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--phase-3); margin-right: 0.45rem; vertical-align: middle; animation: pulse-ring 2.2s ease-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--phase-3) 55%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--phase-3) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--phase-3) 0%, transparent); } } /* Chain of one-change-at-a-time variants (A→B→C→D). */ .chain { display: grid; gap: 0.75rem; margin: 1.5rem 0; } .chain-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.15rem; transition: border-color .2s, box-shadow .2s, transform .2s; } .chain-step:hover { border-color: var(--baseline); box-shadow: var(--shadow); transform: translateX(3px); } .chain-step .tag { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); color: var(--accent-strong); } .chain-step.branch .tag { background: var(--phase-2-wash); color: var(--phase-2); } .chain-step.phase4 .tag { background: var(--phase-3-wash); color: var(--phase-3); } .chain-step h4 { margin: 0 0 0.2rem; font-family: var(--mono); font-size: 0.92rem; } .chain-step p { margin: 0; font-size: 0.9rem; color: var(--ink-secondary); } /* -------------------------------------------------------------------------- Mechanism ledger — one card per borrowed mechanism, with its source lab, the claim it makes, and the BitFuse experiment that tests it. The left rule is coloured by lab so the three families stay separable at a glance. -------------------------------------------------------------------------- */ .mech-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin: 1.5rem 0; } .mech { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--baseline); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.15rem 1.3rem; transition: border-color .2s, box-shadow .2s, transform .2s; } .mech:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .mech[data-lab="qwen"] { border-left-color: #4f46e5; } .mech[data-lab="deepseek"] { border-left-color: #db2777; } .mech[data-lab="kimi"] { border-left-color: #0d9488; } .mech[data-lab="nvidia"] { border-left-color: var(--phase-3); } .mech .lab { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .mech h4 { margin: 0.3rem 0 0.5rem; font-family: var(--sans); font-size: 1.02rem; font-weight: 650; color: var(--ink); } .mech p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-secondary); } .mech p + p { margin-top: 0.6rem; } .mech .test { display: block; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--hairline); font-family: var(--mono); font-size: 0.76rem; color: var(--ink-muted); } /* A quiet sheen crossing the card the first time it scrolls in — enough to say "these arrived together" without turning the section into a slideshow. */ html.js-reveal .mech::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, var(--accent-wash) 50%, transparent 60%); transform: translateX(-120%); } html.js-reveal .reveal-stagger.is-in .mech::after, html.js-reveal .mech.is-in::after { animation: mech-sheen 1.5s var(--reveal-ease) 0.15s 1 both; } @keyframes mech-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } } /* -------------------------------------------------------------------------- Phase rail — the campaign as a vertical spine. Distinct from .plan, which is a month-boxed Gantt; this one is gated, and gates are ordered, not scheduled. -------------------------------------------------------------------------- */ .rail { display: grid; gap: 0; margin: 1.75rem 0 0; position: relative; } .rail::before { content: ""; position: absolute; left: 0.53rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--hairline); } .rail-step { position: relative; padding: 0 0 1.5rem 2.2rem; } .rail-step:last-child { padding-bottom: 0; } .rail-step::before { content: ""; position: absolute; left: 0; top: 0.42rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--page); border: 2px solid var(--baseline); } .rail-step[data-state="done"]::before { background: var(--phase-1); border-color: var(--phase-1); } .rail-step[data-state="now"]::before { background: var(--phase-3); border-color: var(--phase-3); animation: pulse-ring 2.2s ease-out infinite; } .rail-step[data-state="next"]::before { border-color: var(--phase-2); } .rail-step[data-state="later"]::before { border-style: dashed; border-color: var(--proposed); } .rail-step .rail-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-family: var(--sans); } .rail-step .rail-id { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .rail-step h3 { margin: 0.15rem 0 0.35rem; font-family: var(--sans); font-size: 1.08rem; font-weight: 650; } .rail-step p { margin: 0; font-size: 0.93rem; color: var(--ink-secondary); } .rail-step .gate { display: inline-block; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-muted); border: 1px dashed var(--hairline); border-radius: 999px; padding: 0.1rem 0.7rem; } .rail-step .budget { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-strong); background: var(--accent-wash); border-radius: 999px; padding: 0.1rem 0.6rem; } /* -------------------------------------------------------------------------- Hypothesis ledger — H1…H8 as a compact numbered grid. -------------------------------------------------------------------------- */ .hyp-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); margin: 1.5rem 0; } .hyp { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.9rem; align-items: start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.9rem 1.1rem; transition: border-color .2s, background .2s; } .hyp:hover { border-color: var(--accent); background: var(--accent-wash); } .hyp .h-id { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; color: var(--accent-strong); padding-top: 0.1rem; } .hyp h4 { margin: 0 0 0.2rem; font-family: var(--sans); font-size: 0.92rem; font-weight: 650; } .hyp p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-secondary); } /* Research-question list: hover to lift the comparison that answers it. */ .rq-list { display: grid; gap: 0.6rem; margin: 1.5rem 0; } .rq { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.85rem 1.1rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); transition: background .2s, border-color .2s; } .rq:hover { background: var(--accent-wash); border-color: var(--accent); } .rq .id { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; color: var(--accent-strong); } .rq .q { font-size: 0.95rem; color: var(--ink-secondary); } .rq .cmp { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-muted); white-space: nowrap; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.1rem 0.6rem; } @media (max-width: 700px) { .rq { grid-template-columns: 1fr; gap: 0.35rem; } .rq .cmp { justify-self: start; } } @media (max-width: 700px) { :root { --gutter: 1rem; } html { scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; } .section { padding: 3rem 0; } main > .section:first-child { padding-top: 2rem; } .section-title { font-size: 1.75rem; } .section-lede { margin-bottom: 1.5rem; font-size: 1rem; } .nav { padding: 0.65rem 1rem 0.5rem; gap: 0.5rem; flex-wrap: wrap; } .brand { width: 100%; font-size: 0.9rem; } .nav-links { width: 100%; margin-left: 0; gap: 0; flex-wrap: nowrap; justify-content: space-between; } .nav-links a { padding: 0.35rem 0.25rem; font-size: 0.76rem; } .theme-toggle { width: 26px; height: 26px; margin-left: 0.2rem; } .hero { padding: 2rem 0 2.5rem; } .hero-grid { gap: 2rem; } .hero h1 { font-size: 2.45rem; } .hero .lede { font-size: 1.05rem; } .card-grid, .cov-grid { grid-template-columns: minmax(0, 1fr); } /* mech-grid and hyp-grid use rem-based minimums that exceed phone widths */ .mech-grid, .hyp-grid { grid-template-columns: 1fr; } .card, .viz, .dossier, .vs-card { padding: 1rem; } .chip { max-width: 100%; white-space: normal; line-height: 1.3; align-items: flex-start; } .chip .dot { margin-top: 0.18rem; } .stat-tile { padding: 1rem; } .stat-tile .value { font-size: 1.65rem; } .legend { gap: 0.65rem; } .ctl-row { gap: 0.65rem; } .ctl-row input[type="range"] { flex-basis: 100%; } .phase-filter button { flex: 1 1 auto; } .dossier .facts { grid-template-columns: minmax(0, 1fr); } .article-header { padding-top: 1.75rem; padding-bottom: 1.25rem; } .article-header::after { margin-top: 1.5rem; } .article-header h1 { font-size: 2.15rem; text-wrap: pretty; overflow-wrap: anywhere; } .article-header .dek { font-size: 1.08rem; } .article-header .byline { gap: 0.35rem 0.65rem; } .article-header .byline .sep { display: none; } .article-body { padding-top: 0; padding-bottom: 2.5rem; font-size: 1.05rem; line-height: 1.72; overflow-wrap: break-word; } .article-body h2 { margin-top: 2.1em; padding-top: 0.7em; font-size: 1.5rem; scroll-margin-top: 8rem; } .article-body h3 { font-size: 1.24rem; } .article-body figure { margin: 1.5em 0; } .article-body figure .fig-frame { padding: 0.65rem; } .article-body figcaption { text-align: left; } .article-body pre { padding: 0.8rem; font-size: 0.74rem; } .article-body ul, .article-body ol { padding-left: 1.2em; } .reader-toc { margin-bottom: 1.25rem; padding: 0.9rem 1rem; } .reader-toc ol { margin-right: -1rem; padding-right: 1rem; } .canonical-note { margin-top: 1.5rem; } .article-nav { flex-direction: column; gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 3rem; } .article-nav a { max-width: 100%; margin-left: 0 !important; text-align: left !important; } .paper-hero { padding: 2rem 0 1.75rem; } .paper-hero h1 { font-size: 2.2rem; text-wrap: pretty; overflow-wrap: anywhere; } .paper-hero .section-lede { font-size: 1.02rem; } .paper-metrics { align-items: flex-start; gap: 0.65rem 1rem; } .paper-metrics span { flex: 1 1 8rem; } .paper-metrics a { width: 100%; margin-left: 0; } .paper-reading { padding-top: 2.25rem; } .paper-layout { row-gap: 1.75rem; } .paper-index nav { margin-right: -1rem; padding-right: 1rem; } .paper-manuscript, .paper-status { font-size: 1.05rem; line-height: 1.72; } .paper-section { scroll-margin-top: 8rem; } .paper-section + .paper-section { margin-top: 1.9rem; padding-top: 1.9rem; } .paper-section h2, .paper-status h2 { font-size: 1.5rem; } .paper-equation { margin: 1.4rem 0; padding: 0.75rem; font-size: 0.9rem; } .cov-mini { align-items: flex-start; gap: 0.65rem; } .cov-mini-bar { max-width: 100%; overflow-x: auto; padding-bottom: 0.2rem; } .cov-phase > h3 { line-height: 1.35; } .cov-item > div { min-width: 0; } .cov-item .cov-links, .cov-item .cov-name { overflow-wrap: anywhere; } .site-footer { padding: 2rem 0 2.5rem; } .site-footer .container { align-items: flex-start; flex-direction: column; } .site-footer a:first-child { margin-left: 0; } body.has-amadeus-launcher { padding-bottom: 60px; } .amadeus-launcher { bottom: 9px; max-width: calc(100vw - 1rem); } .amadeus-launcher-copy > span { display: none; } } @media (max-width: 360px) { .brand small { display: none; } .nav-links a { font-size: 0.72rem; } .hero h1 { font-size: 2.15rem; } .stat-row { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Nothing may stay hidden waiting for an animation that will not run. */ html.js-reveal .reveal, html.js-reveal .reveal-stagger > *, html.js-reveal table.reveal-rows tbody tr { opacity: 1 !important; transform: none !important; } .pulse-dot { animation: none; } .chain-step:hover { transform: none; } }