Spaces:
Running
Running
| /* OmniAgent — ICML 2026 booth deck */ | |
| @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap'); | |
| :root { | |
| --bg: #FAF8F4; | |
| --bg-dark: oklch(0.23 0.012 70); | |
| --card: #FFFFFF; | |
| --ink: oklch(0.25 0.012 70); | |
| --ink-soft: oklch(0.48 0.015 70); | |
| --ink-faint: oklch(0.62 0.012 70); | |
| --paper-ink: oklch(0.95 0.008 80); | |
| --paper-soft: oklch(0.78 0.012 80); | |
| --accent: #B43C2A; | |
| --accent-soft: color-mix(in oklab, var(--accent) 9%, #FFFFFF); | |
| --accent-bright: color-mix(in oklab, var(--accent) 62%, #FFFFFF); | |
| --blue: oklch(0.54 0.09 250); | |
| --blue-soft: color-mix(in oklab, var(--blue) 10%, #FFFFFF); | |
| --line: oklch(0.25 0.012 70 / 0.14); | |
| --line-dark: oklch(0.95 0.008 80 / 0.16); | |
| --font-display: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif; | |
| --font-body: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; | |
| --font-mono: 'IBM Plex Mono', ui-monospace, monospace; | |
| --type-display: 84px; | |
| --type-title: 62px; | |
| --type-subtitle: 40px; | |
| --type-body: 31px; | |
| --type-small: 26px; | |
| --type-label: 24px; | |
| --pad-x: 110px; | |
| --pad-top: 92px; | |
| --pad-bottom: 84px; | |
| --gap-title: 44px; | |
| --gap-item: 26px; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { background: #000; } | |
| body { font-family: var(--font-body); } | |
| deck-stage:not(:defined) { visibility: hidden; } | |
| img { display: block; } | |
| .icon { | |
| width: 42px; | |
| height: 42px; | |
| flex: 0 0 auto; | |
| stroke: currentColor; | |
| fill: none; | |
| stroke-width: 2.2; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .icon-badge { | |
| width: 68px; | |
| height: 68px; | |
| border-radius: 18px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); | |
| } | |
| /* ---------- slide frame ---------- */ | |
| .slide { | |
| width: 100%; height: 100%; | |
| background: var(--bg); | |
| color: var(--ink); | |
| padding: var(--pad-top) var(--pad-x) var(--pad-bottom); | |
| display: flex; flex-direction: column; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .slide.dark { background: var(--bg-dark); color: var(--paper-ink); } | |
| .slide::after { | |
| content: "OmniAgent · ICML 2026"; | |
| position: absolute; | |
| left: var(--pad-x); | |
| bottom: 34px; | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| color: var(--ink-faint); | |
| letter-spacing: 0.06em; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| .slide.dark::after { color: oklch(0.95 0.008 80 / 0.4); } | |
| .slide.no-slide-foot::after { content: none; } | |
| .eyebrow { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| font-weight: 500; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 22px; | |
| } | |
| .dark .eyebrow { color: var(--accent-bright); } | |
| .title { | |
| font-family: var(--font-display); | |
| font-size: var(--type-title); | |
| font-weight: 700; | |
| line-height: 1.08; | |
| letter-spacing: -0.015em; | |
| text-wrap: balance; | |
| max-width: 1560px; | |
| margin-bottom: var(--gap-title); | |
| } | |
| .subtitle { | |
| font-size: var(--type-body); | |
| line-height: 1.4; | |
| color: var(--ink-soft); | |
| max-width: 1380px; | |
| text-wrap: pretty; | |
| } | |
| .dark .subtitle { color: var(--paper-soft); } | |
| .foot { | |
| position: absolute; | |
| left: var(--pad-x); bottom: 34px; | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| color: var(--ink-faint); | |
| letter-spacing: 0.06em; | |
| white-space: nowrap; | |
| } | |
| .dark .foot { color: oklch(0.95 0.008 80 / 0.4); } | |
| body.no-foot .foot { display: none; } | |
| .grow { flex: 1; min-height: 0; } | |
| /* ---------- entrance ---------- | |
| No fade/slide-in animation: both CSS `animation` gated on | |
| [data-deck-active] and a JS Web Animations API equivalent were | |
| observed getting stuck at their "from" (opacity:0) state — the | |
| document's animation timeline can stall in some contexts (e.g. a | |
| backgrounded/thumbnail iframe, some presentation setups) and there's | |
| no reliable recovery. For a booth deck, reliability beats polish: | |
| content is simply always visible. */ | |
| .rise { opacity: 1; } | |
| /* ---------- signature motif + one-shot motion polish ---------- */ | |
| .title-strip { | |
| position: relative; | |
| height: 30px; | |
| max-width: 1350px; | |
| margin-top: 64px; | |
| } | |
| .title-strip-track { | |
| position: absolute; | |
| left: 0; right: 0; top: 50%; | |
| height: 2px; | |
| background: var(--line); | |
| } | |
| .title-strip .tp { | |
| position: absolute; | |
| top: 3px; | |
| width: 10px; | |
| height: 24px; | |
| border-radius: 3px; | |
| background: var(--accent); | |
| } | |
| .title-strip .tp.audio { background: var(--blue, #5B7DB1); } | |
| @media (prefers-reduced-motion: no-preference) { | |
| [data-deck-active] .title-strip .tp { | |
| animation: probe-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; | |
| } | |
| @keyframes probe-in { | |
| from { transform: scaleY(0); opacity: 0; } | |
| to { transform: scaleY(1); opacity: 1; } | |
| } | |
| [data-deck-active] .tw-row .tw-bar { | |
| transform-origin: bottom; | |
| animation: bar-grow 0.6s cubic-bezier(0.25, 0.8, 0.35, 1) both; | |
| } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(1) { animation-delay: 0.55s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(2) { animation-delay: 0.65s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(3) { animation-delay: 0.75s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(4) { animation-delay: 0.95s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(5) { animation-delay: 0.85s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(6) { animation-delay: 0.9s; } | |
| [data-deck-active] .tw-row .tw-bar:nth-child(7) { animation-delay: 1.0s; } | |
| @keyframes bar-grow { | |
| from { transform: scaleY(0); } | |
| to { transform: scaleY(1); } | |
| } | |
| } | |
| /* ---------- title slide ---------- */ | |
| .title-wrap { display: flex; flex-direction: column; justify-content: center; flex: 1; } | |
| .title-brand { | |
| font-family: var(--font-display); | |
| font-size: 132px; | |
| font-weight: 800; | |
| line-height: 0.92; | |
| letter-spacing: -0.02em; | |
| color: var(--ink); | |
| margin-bottom: 20px; | |
| } | |
| .title-main { | |
| font-family: var(--font-display); | |
| font-size: 66px; | |
| font-weight: 700; | |
| line-height: 1.08; | |
| letter-spacing: -0.02em; | |
| max-width: 1420px; | |
| text-wrap: balance; | |
| margin-bottom: 76px; | |
| } | |
| .title-main-only { | |
| font-size: 68px; | |
| line-height: 1.08; | |
| max-width: 1360px; | |
| margin-top: 12px; | |
| margin-bottom: 82px; | |
| } | |
| .title-proof { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 22px; | |
| max-width: 1350px; | |
| margin: 10px 0 60px; | |
| } | |
| .title-proof-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-top: 3px solid var(--accent); | |
| border-radius: 0 0 14px 14px; | |
| padding: 30px 28px 32px; | |
| } | |
| .title-proof-n { | |
| font-family: var(--font-display); | |
| font-size: 54px; | |
| font-weight: 800; | |
| color: var(--accent); | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| } | |
| .title-proof-l { | |
| margin-top: 10px; | |
| font-size: 24px; | |
| line-height: 1.3; | |
| color: var(--ink-soft); | |
| } | |
| .title-proof-l strong { color: var(--ink); } | |
| .title-oneliner { | |
| font-size: var(--type-subtitle); | |
| line-height: 1.35; | |
| color: var(--accent-bright); | |
| max-width: 1480px; | |
| text-wrap: pretty; | |
| margin-bottom: 72px; | |
| } | |
| .title-authors { | |
| font-size: 19px; | |
| line-height: 1.45; | |
| color: var(--ink-soft); | |
| max-width: 1320px; | |
| margin-bottom: 10px; | |
| } | |
| .title-speaker { | |
| font-family: var(--font-mono); | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| color: var(--accent); | |
| margin-bottom: 14px; | |
| } | |
| .title-affil { | |
| font-family: var(--font-mono); | |
| font-size: 17px; | |
| color: var(--ink-faint); | |
| letter-spacing: 0.04em; | |
| } | |
| .title-hook { | |
| font-family: var(--font-mono); | |
| font-size: 34px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| line-height: 1.3; | |
| max-width: 1500px; | |
| text-wrap: pretty; | |
| margin-bottom: 20px; | |
| } | |
| /* ---------- two-number highlight cards (bench sweep + grounding) ---------- */ | |
| .compare-row { | |
| display: flex; align-items: baseline; justify-content: space-between; | |
| padding: 16px 0; border-bottom: 1px solid var(--line); | |
| } | |
| .compare-row:last-of-type { border-bottom: none; } | |
| .compare-label { font-size: var(--type-small); color: var(--ink-soft); } | |
| .compare-val { font-family: var(--font-mono); font-size: 38px; font-weight: 700; color: var(--ink-faint); } | |
| .compare-val.win { color: var(--accent); font-size: 48px; } | |
| /* ---------- final slide: limitation line + closing bar ---------- */ | |
| .limit-line { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| color: var(--ink-soft); | |
| line-height: 1.5; | |
| margin-top: 30px; | |
| max-width: 1500px; | |
| } | |
| .limit-line strong { color: var(--ink); } | |
| /* ---------- v2 review pass ---------- */ | |
| .vpack { display: flex; flex-direction: column; margin-top: auto; margin-bottom: auto; min-height: 0; } | |
| /* slide 2: strip time scale */ | |
| .stripcol { min-width: 0; } | |
| .strip-scale { position: relative; height: 30px; margin-top: 10px; font-family: var(--font-mono); font-size: 20px; color: var(--ink-faint); } | |
| .strip-scale span { position: absolute; top: 0; } | |
| .strip-scale .end { right: 0; } | |
| .strip-scale .mid { transform: translateX(-50%); color: var(--accent); font-weight: 600; } | |
| .cost-line span { white-space: nowrap; } | |
| /* slide 4: OTA loop diagram */ | |
| .ota { display: grid; grid-template-columns: 370px 170px 1fr 170px 390px; align-items: stretch; } | |
| .ota-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px 34px; display: flex; flex-direction: column; justify-content: center; } | |
| .ota-box.ota-model { border: 2px solid var(--accent); } | |
| .ota-k { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } | |
| .ota-h { font-family: var(--font-display); font-size: 33px; font-weight: 700; line-height: 1.12; margin-bottom: 14px; } | |
| .ota-p { font-size: 23px; line-height: 1.42; color: var(--ink-soft); text-wrap: pretty; } | |
| .ota-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } | |
| .ota-step { display: grid; grid-template-columns: 36px 170px 1fr; align-items: center; gap: 14px; background: var(--accent-soft); border-radius: 10px; padding: 15px 18px; } | |
| .ota-step .icon { width: 32px; height: 32px; color: var(--accent); } | |
| .ota-step b { font-family: var(--font-display); font-size: 27px; font-weight: 700; white-space: nowrap; } | |
| .ota-step span { font-family: var(--font-mono); font-size: 20px; color: var(--ink-soft); line-height: 1.3; } | |
| .ota-link { display: flex; flex-direction: column; justify-content: center; gap: 56px; padding: 0 12px; } | |
| .ota-lane { text-align: center; } | |
| .lane-lab { font-family: var(--font-mono); font-size: 18px; line-height: 1.3; color: var(--ink-soft); margin-bottom: 2px; } | |
| .lane-arr { font-size: 42px; line-height: 1; color: var(--accent); } | |
| .lane-arr.rev { color: var(--ink-faint); } | |
| /* redrawn charts (slides 7 + 10) */ | |
| .svfig { width: 100%; flex: 1; min-height: 0; display: block; } | |
| .leg { display: flex; justify-content: center; gap: 40px; flex: 0 0 auto; } | |
| .leg-i { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 21px; color: var(--ink-soft); white-space: nowrap; } | |
| .leg-i i { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; } | |
| .leg-i .dm, .leg-i i.dm { background: var(--accent); transform: rotate(45deg); } | |
| .leg-i i.dm.ag { background: #d99a3d; } | |
| .leg-i i.dot { border-radius: 50%; background: #93a7cd; } | |
| .leg-i i.sq { background: #cdd7ea; border-radius: 3px; } | |
| .sv-hero { font-family: var(--font-display); font-size: 32px; font-weight: 800; fill: var(--accent); } | |
| .sv-sub { font-family: var(--font-mono); font-size: 23px; fill: var(--ink-soft); } | |
| .sv-lab { font-family: var(--font-mono); font-size: 23px; fill: var(--ink); } | |
| .sv-min { font-family: var(--font-mono); font-size: 19px; fill: var(--ink-faint); } | |
| .sv-min2 { font-family: var(--font-mono); font-size: 22px; fill: var(--ink-soft); } | |
| .sv-tick { font-family: var(--font-mono); font-size: 25px; fill: var(--ink-faint); } | |
| .sv-cap { font-family: var(--font-mono); font-size: 22px; font-style: normal; fill: var(--ink-faint); } | |
| .sv-axis-title { font-family: var(--font-mono); font-size: 20px; font-weight: 600; fill: var(--ink-soft); } | |
| .sv-bar { font-family: var(--font-mono); font-size: 23px; font-weight: 600; fill: #5470a8; } | |
| .sv-acc-lab { font-family: var(--font-mono); font-size: 23px; font-weight: 700; fill: var(--accent); } | |
| /* slide 9: proportional compare bars */ | |
| .cmp { padding: 14px 0; border-bottom: 1px solid var(--line); } | |
| .cmp:last-child { border-bottom: none; } | |
| .cmp-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } | |
| .cbar { height: 14px; border-radius: 7px; background: oklch(0.93 0.008 80); overflow: hidden; } | |
| .cbar i { display: block; height: 100%; width: var(--w); border-radius: 7px; background: var(--ink-faint); } | |
| .cbar.win i { background: var(--accent); } | |
| .dark .limit-line { color: var(--paper-soft); } | |
| .dark .limit-line strong { color: var(--paper-ink); } | |
| .dark .finale { border-top-color: var(--line-dark); } | |
| .dark .finale-url { color: var(--accent-bright); } | |
| .dark .finale-meta { color: var(--paper-soft); } | |
| .dark .finale-meta strong { color: var(--paper-ink); } | |
| .finale { | |
| display: flex; align-items: center; justify-content: space-between; gap: 56px; | |
| margin-top: auto; padding-top: 30px; border-top: 1px solid var(--line); | |
| } | |
| .finale-url { font-family: var(--font-mono); font-size: var(--type-body); font-weight: 600; color: var(--accent); } | |
| .finale-meta { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-soft); line-height: 1.6; margin-top: 12px; } | |
| .finale-meta strong { color: var(--ink); font-weight: 600; } | |
| .finale-qrs { display: flex; gap: 20px; flex-shrink: 0; } | |
| .finale-qr { | |
| background: #FFFFFF; border: 2px solid var(--accent); border-radius: 16px; | |
| padding: 14px 14px 10px; | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); | |
| } | |
| .finale-qr img { width: 148px; height: 148px; } | |
| .finale-qr-label { | |
| display: flex; align-items: center; gap: 7px; | |
| font-family: var(--font-mono); font-size: 19px; font-weight: 700; | |
| color: var(--accent); letter-spacing: 0.02em; margin: 0; | |
| } | |
| .finale-qr-label svg { width: 21px; height: 21px; fill: var(--accent); } | |
| /* ---------- problem slide ---------- */ | |
| .query-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 30px 38px; | |
| display: flex; align-items: baseline; gap: 36px; | |
| margin-bottom: 48px; | |
| } | |
| .query-q { font-size: var(--type-body); font-weight: 600; line-height: 1.35; flex: 1; } | |
| .query-meta { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); white-space: nowrap; } | |
| .strip-row { display: grid; grid-template-columns: 250px 1fr 420px; gap: 32px; align-items: center; margin-bottom: 30px; } | |
| .strip-name { font-family: var(--font-display); font-size: var(--type-small); font-weight: 700; } | |
| .strip-name span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--type-label); color: var(--ink-faint); margin-top: 6px; } | |
| .strip { height: 84px; border-radius: 10px; position: relative; border: 1px solid var(--line); overflow: hidden; } | |
| .strip.passive { | |
| background: | |
| linear-gradient(180deg, #ffffff, color-mix(in oklab, var(--blue) 5%, #ffffff)), | |
| var(--bg); | |
| border-color: color-mix(in oklab, var(--blue) 24%, var(--line)); | |
| } | |
| .strip.passive::before { | |
| content: ""; | |
| position: absolute; | |
| left: 14px; | |
| right: 14px; | |
| top: 50%; | |
| height: 2px; | |
| transform: translateY(-50%); | |
| background: color-mix(in oklab, var(--blue) 28%, var(--line)); | |
| pointer-events: none; | |
| } | |
| .strip.passive::after { content: none; } | |
| .strip.active-strip { | |
| background: | |
| linear-gradient(90deg, transparent 0 47%, color-mix(in oklab, var(--accent) 12%, transparent) 47% 63%, transparent 63%), | |
| linear-gradient(180deg, #ffffff, color-mix(in oklab, var(--accent) 4%, #ffffff)); | |
| border-color: color-mix(in oklab, var(--accent) 24%, var(--line)); | |
| } | |
| .strip.active-strip::before { | |
| content: ""; | |
| position: absolute; | |
| left: 14px; | |
| right: 14px; | |
| top: 50%; | |
| height: 2px; | |
| transform: translateY(-50%); | |
| background: color-mix(in oklab, var(--ink-faint) 38%, var(--line)); | |
| } | |
| .strip.active-strip::after { | |
| content: ""; | |
| position: absolute; | |
| left: 47%; | |
| width: 16%; | |
| top: 12px; | |
| bottom: 12px; | |
| border-radius: 8px; | |
| border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); | |
| background: color-mix(in oklab, var(--accent) 7%, transparent); | |
| pointer-events: none; | |
| } | |
| .probe { position: absolute; top: 10px; bottom: 10px; width: 14px; border-radius: 4px; background: var(--accent); } | |
| .passive-probe { | |
| top: 10px; | |
| bottom: 10px; | |
| width: 14px; | |
| border-radius: 4px; | |
| background: color-mix(in oklab, var(--blue) 70%, #ffffff); | |
| box-shadow: 0 0 0 2px color-mix(in oklab, var(--blue) 10%, transparent); | |
| opacity: 0.82; | |
| transform: translateX(-50%); | |
| z-index: 2; | |
| } | |
| .active-strip .probe { | |
| z-index: 2; | |
| box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent); | |
| } | |
| .probe.audio { width: 64px; background: var(--accent-soft); border: 2px solid var(--accent); } | |
| .strip-cap { font-size: var(--type-small); line-height: 1.4; color: var(--ink-soft); } | |
| .strip-cap strong { color: var(--ink); } | |
| .cost-line { | |
| margin-top: 36px; | |
| font-family: var(--font-mono); | |
| font-size: var(--type-small); | |
| display: flex; gap: 60px; | |
| } | |
| .cost-line .bad { color: var(--blue); } | |
| .cost-line .good { color: var(--accent); font-weight: 600; } | |
| /* ---------- contributions ---------- */ | |
| .contrib { display: flex; flex-direction: column; gap: 6px; } | |
| .contrib-row { | |
| display: grid; grid-template-columns: 86px 92px 1fr; gap: 28px; | |
| padding: 22px 0; | |
| border-top: 1px solid var(--line); | |
| align-items: start; | |
| } | |
| .contrib-num { font-family: var(--font-display); font-size: 64px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } | |
| .contrib-h { font-family: var(--font-display); font-size: var(--type-subtitle); font-weight: 700; line-height: 1.15; margin-bottom: 12px; } | |
| .contrib-p { font-size: var(--type-body); line-height: 1.42; color: var(--ink-soft); max-width: 1340px; text-wrap: pretty; } | |
| .idea-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 22px; | |
| margin-top: 38px; | |
| } | |
| .idea-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-top: 3px solid var(--accent); | |
| border-radius: 0 0 14px 14px; | |
| padding: 30px 28px 32px; | |
| min-height: 306px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .idea-card .icon-badge { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 16px; | |
| margin-bottom: 22px; | |
| } | |
| .idea-card .icon { width: 34px; height: 34px; } | |
| .idea-k { | |
| font-family: var(--font-mono); | |
| font-size: 21px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 14px; | |
| } | |
| .idea-h { | |
| font-family: var(--font-display); | |
| font-size: 32px; | |
| line-height: 1.12; | |
| font-weight: 700; | |
| text-wrap: balance; | |
| margin-bottom: 14px; | |
| } | |
| .idea-p { | |
| font-size: 24px; | |
| line-height: 1.35; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .principle-strip { | |
| margin-top: 28px; | |
| display: grid; | |
| grid-template-columns: 0.95fr 1.15fr 1fr; | |
| gap: 18px; | |
| } | |
| .principle-strip > div { | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); | |
| border-radius: 14px; | |
| padding: 22px 26px; | |
| } | |
| .principle-k { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| margin-bottom: 8px; | |
| } | |
| .principle-k.accent { color: var(--accent); } | |
| .principle-p { | |
| font-size: 25px; | |
| line-height: 1.35; | |
| color: var(--ink-soft); | |
| } | |
| .principle-p strong { color: var(--ink); } | |
| /* ---------- paradigm compare ---------- */ | |
| .para-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; flex: 1; min-height: 0; } | |
| .para-col { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 38px 36px; | |
| display: flex; flex-direction: column; | |
| } | |
| .para-h { font-family: var(--font-display); font-size: 34px; font-weight: 700; margin-bottom: 8px; } | |
| .para-tag { font-family: var(--font-mono); font-size: var(--type-label); color: var(--blue); margin-bottom: 24px; } | |
| .para-p { font-size: var(--type-small); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; } | |
| .para-band { | |
| margin-top: 34px; | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); | |
| border-radius: 14px; | |
| padding: 30px 40px; | |
| display: flex; align-items: baseline; gap: 30px; | |
| } | |
| .para-band-h { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--accent); white-space: nowrap; } | |
| .para-band-p { font-size: var(--type-small); line-height: 1.4; color: var(--ink); } | |
| /* ---------- figure slides ---------- */ | |
| .fig-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 26px; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .fig-card img { max-width: 100%; max-height: 100%; object-fit: contain; } | |
| .chip-row { display: flex; gap: 18px; margin-top: 26px; } | |
| .chip { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| line-height: 1.35; | |
| color: var(--ink-soft); | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| padding: 14px 28px; | |
| } | |
| .chip strong { color: var(--accent); font-weight: 600; } | |
| /* ---------- worked example ---------- */ | |
| .example-grid { | |
| display: grid; | |
| grid-template-columns: 420px 1fr; | |
| gap: 32px; | |
| flex: 1; | |
| min-height: 0; | |
| align-items: stretch; | |
| } | |
| .example-query { | |
| background: var(--bg-dark); | |
| color: var(--paper-ink); | |
| border-radius: 16px; | |
| padding: 34px 34px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .example-k { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| color: var(--accent-bright); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| margin-bottom: 22px; | |
| } | |
| .example-q { | |
| font-family: var(--font-display); | |
| font-size: 33px; | |
| font-weight: 700; | |
| line-height: 1.16; | |
| text-wrap: balance; | |
| } | |
| .example-q strong { color: var(--accent-bright); } | |
| .example-meta { | |
| margin-top: auto; | |
| display: grid; | |
| gap: 14px; | |
| font-family: var(--font-mono); | |
| font-size: 22px; | |
| color: var(--paper-soft); | |
| line-height: 1.35; | |
| } | |
| .example-meta strong { color: var(--paper-ink); font-weight: 600; } | |
| .media-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 22px; | |
| min-height: 0; | |
| } | |
| .media-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .media-card img { | |
| width: 100%; | |
| aspect-ratio: 16 / 8.1; | |
| object-fit: cover; | |
| } | |
| .media-cap { | |
| padding: 15px 20px 18px; | |
| font-family: var(--font-mono); | |
| font-size: 21px; | |
| line-height: 1.3; | |
| color: var(--ink-soft); | |
| } | |
| .media-cap strong { color: var(--accent); font-weight: 600; } | |
| .search-board { | |
| display: grid; | |
| grid-template-rows: auto auto 1fr; | |
| gap: 16px; | |
| min-height: 0; | |
| } | |
| .scan-strip { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 14px; | |
| } | |
| .scan-card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .scan-card img { | |
| width: 100%; | |
| aspect-ratio: 16 / 9; | |
| object-fit: cover; | |
| } | |
| .scan-time { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| font-family: var(--font-mono); | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--paper-ink); | |
| background: oklch(0.2 0.01 70 / 0.72); | |
| border-radius: 999px; | |
| padding: 5px 10px; | |
| } | |
| .scan-cap { | |
| padding: 12px 14px 14px; | |
| font-family: var(--font-mono); | |
| font-size: 19px; | |
| line-height: 1.25; | |
| color: var(--ink-soft); | |
| } | |
| .scan-card.hit { | |
| border-color: color-mix(in oklab, var(--accent) 48%, transparent); | |
| background: var(--accent-soft); | |
| } | |
| .scan-card.hit .scan-cap { color: var(--accent); font-weight: 600; } | |
| .candidate-map { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 14px 18px 16px; | |
| } | |
| .candidate-map-k { | |
| font-family: var(--font-mono); | |
| font-size: 18px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 10px; | |
| } | |
| .candidate-track { | |
| position: relative; | |
| height: 38px; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, oklch(0.88 0.012 70), oklch(0.92 0.012 70)); | |
| border: 1px solid var(--line); | |
| overflow: hidden; | |
| font-family: var(--font-mono); | |
| } | |
| .candidate-track::before { | |
| content: ""; | |
| position: absolute; | |
| left: 8px; | |
| right: 8px; | |
| top: 50%; | |
| border-top: 2px solid oklch(0.25 0.012 70 / 0.22); | |
| } | |
| .track-start, | |
| .track-end { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 2; | |
| font-size: 15px; | |
| color: var(--ink-soft); | |
| } | |
| .track-start { left: 14px; } | |
| .track-end { right: 14px; } | |
| .track-window { | |
| position: absolute; | |
| top: 5px; | |
| height: 28px; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| color: var(--paper-ink); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 3; | |
| font-size: 17px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .track-window.a { left: 8.5%; width: 21%; } | |
| .track-window.b { left: 67.2%; width: 19.6%; } | |
| .candidate-map-p { | |
| margin-top: 10px; | |
| font-size: 20px; | |
| line-height: 1.3; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .evidence-grid { | |
| display: grid; | |
| grid-template-columns: 0.9fr 1.1fr; | |
| gap: 20px; | |
| min-height: 0; | |
| } | |
| .audio-evidence, | |
| .boundary-evidence { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 24px; | |
| min-height: 0; | |
| } | |
| .block-k { | |
| font-family: var(--font-mono); | |
| font-size: 21px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 16px; | |
| } | |
| .audio-list { | |
| list-style: none; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .audio-list li { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| line-height: 1.3; | |
| color: var(--ink); | |
| background: var(--accent-soft); | |
| border-radius: 10px; | |
| padding: 9px 12px; | |
| } | |
| .audio-note { | |
| margin-top: 12px; | |
| font-size: 19px; | |
| line-height: 1.28; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .boundary-rows { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .boundary-row { | |
| display: grid; | |
| grid-template-columns: 82px repeat(3, 1fr); | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .boundary-label { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| line-height: 1.2; | |
| } | |
| .boundary-thumb { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| border: 1px solid var(--line); | |
| background: var(--bg); | |
| } | |
| .boundary-thumb img { | |
| width: 100%; | |
| aspect-ratio: 16 / 9; | |
| object-fit: cover; | |
| } | |
| .boundary-thumb span { | |
| position: absolute; | |
| left: 8px; | |
| bottom: 7px; | |
| font-family: var(--font-mono); | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--paper-ink); | |
| background: oklch(0.2 0.01 70 / 0.72); | |
| border-radius: 999px; | |
| padding: 4px 8px; | |
| } | |
| .boundary-thumb.inside { | |
| border-color: color-mix(in oklab, var(--accent) 55%, transparent); | |
| box-shadow: 0 0 0 3px var(--accent-soft) inset; | |
| } | |
| .trace-grid { | |
| display: grid; | |
| grid-template-columns: 1.08fr 0.92fr; | |
| gap: 34px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .trace-list { display: flex; flex-direction: column; gap: 16px; } | |
| .trace-step { | |
| display: grid; | |
| grid-template-columns: 74px 1fr; | |
| gap: 20px; | |
| align-items: start; | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 22px 24px; | |
| } | |
| .trace-num { | |
| font-family: var(--font-display); | |
| font-size: 44px; | |
| font-weight: 800; | |
| color: var(--accent); | |
| line-height: 1; | |
| } | |
| .trace-h { | |
| font-family: var(--font-display); | |
| font-size: 30px; | |
| font-weight: 700; | |
| line-height: 1.15; | |
| margin-bottom: 8px; | |
| } | |
| .trace-p { | |
| font-size: 24px; | |
| line-height: 1.38; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .answer-card { | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); | |
| border-radius: 16px; | |
| padding: 34px 36px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .answer-card .icon-badge { margin-bottom: 22px; } | |
| .answer-h { | |
| font-family: var(--font-display); | |
| font-size: 42px; | |
| line-height: 1.12; | |
| font-weight: 700; | |
| margin-bottom: 24px; | |
| } | |
| .answer-ranges { | |
| display: grid; | |
| gap: 16px; | |
| font-family: var(--font-mono); | |
| font-size: 36px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 28px; | |
| } | |
| .answer-p { | |
| font-size: var(--type-small); | |
| line-height: 1.42; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .answer-p strong { color: var(--ink); } | |
| .memory-grid { | |
| display: grid; | |
| grid-template-columns: 0.92fr 1.08fr; | |
| gap: 34px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .memory-panel { | |
| border-radius: 16px; | |
| padding: 38px 40px; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .media-panel { | |
| background: var(--bg-dark); | |
| color: var(--paper-ink); | |
| } | |
| .text-panel { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| } | |
| .memory-k { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| letter-spacing: 0.11em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 16px; | |
| } | |
| .media-panel .memory-k { color: var(--accent-bright); } | |
| .memory-h { | |
| font-family: var(--font-display); | |
| font-size: 42px; | |
| font-weight: 700; | |
| line-height: 1.12; | |
| text-wrap: balance; | |
| margin-bottom: 30px; | |
| } | |
| .percept-stack { | |
| display: grid; | |
| gap: 18px; | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| } | |
| .percept-card { | |
| display: grid; | |
| grid-template-columns: 70px 1fr auto; | |
| gap: 18px; | |
| align-items: center; | |
| border: 1px solid var(--line-dark); | |
| background: oklch(0.28 0.012 70); | |
| border-radius: 14px; | |
| padding: 22px 24px; | |
| } | |
| .percept-ico { | |
| width: 58px; | |
| height: 58px; | |
| border-radius: 14px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: oklch(0.36 0.018 70); | |
| color: var(--paper-ink); | |
| } | |
| .percept-ico.audio { | |
| background: color-mix(in oklab, var(--accent) 34%, oklch(0.28 0.012 70)); | |
| } | |
| .percept-ico .icon { width: 34px; height: 34px; } | |
| .percept-t { | |
| font-family: var(--font-display); | |
| font-size: 29px; | |
| font-weight: 700; | |
| line-height: 1.15; | |
| } | |
| .percept-p { | |
| margin-top: 6px; | |
| font-size: 22px; | |
| line-height: 1.32; | |
| color: var(--paper-soft); | |
| } | |
| .purge { | |
| font-family: var(--font-mono); | |
| font-size: 19px; | |
| font-weight: 600; | |
| color: var(--accent-bright); | |
| border: 1px solid color-mix(in oklab, var(--accent-bright) 38%, transparent); | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| white-space: nowrap; | |
| } | |
| .memory-trace { | |
| display: grid; | |
| gap: 14px; | |
| margin-top: auto; | |
| } | |
| .memory-trace p { | |
| display: grid; | |
| grid-template-columns: 58px 1fr; | |
| gap: 18px; | |
| align-items: start; | |
| font-size: 26px; | |
| line-height: 1.38; | |
| color: var(--ink-soft); | |
| border-bottom: 1px solid var(--line); | |
| padding-bottom: 14px; | |
| text-wrap: pretty; | |
| } | |
| .memory-trace p:last-child { border-bottom: none; } | |
| .memory-trace span { | |
| font-family: var(--font-display); | |
| font-size: 34px; | |
| font-weight: 800; | |
| line-height: 1; | |
| color: var(--accent); | |
| } | |
| .answer-strip { | |
| margin-top: 28px; | |
| border-radius: 14px; | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); | |
| padding: 24px 28px; | |
| } | |
| .answer-strip-k { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 14px; | |
| } | |
| .answer-strip-ranges { | |
| display: flex; | |
| gap: 24px; | |
| flex-wrap: wrap; | |
| } | |
| .answer-strip-ranges p { | |
| white-space: nowrap; | |
| font-family: var(--font-mono); | |
| font-size: 34px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| line-height: 1.1; | |
| } | |
| /* ---------- pipeline flow ---------- */ | |
| .flow { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1fr; align-items: stretch; flex: 0 0 auto; min-height: 0; } | |
| .flow-step { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 34px 30px; | |
| display: flex; flex-direction: column; | |
| } | |
| .flow-k { font-family: var(--font-mono); font-size: var(--type-label); color: var(--accent); margin-bottom: 16px; } | |
| .flow-h { font-family: var(--font-display); font-size: 31px; font-weight: 700; line-height: 1.15; margin-bottom: 14px; } | |
| .flow-p { font-size: var(--type-label); line-height: 1.42; color: var(--ink-soft); text-wrap: pretty; } | |
| .flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--ink-faint); } | |
| .flow-note { margin-top: 30px; font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-soft); line-height: 1.45; } | |
| .flow-note strong { color: var(--accent); font-weight: 600; } | |
| .sft-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .sft-panel { | |
| border-radius: 16px; | |
| padding: 42px 44px; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .sft-panel.passive { | |
| background: var(--blue-soft); | |
| border: 1px solid color-mix(in oklab, var(--blue) 30%, transparent); | |
| } | |
| .sft-panel.active { | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 36%, transparent); | |
| } | |
| .sft-k { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| margin-bottom: 20px; | |
| } | |
| .sft-panel.active .sft-k { color: var(--accent); } | |
| .sft-panel.passive .sft-k { color: var(--blue); } | |
| .sft-h { | |
| font-family: var(--font-display); | |
| font-size: 46px; | |
| font-weight: 700; | |
| line-height: 1.08; | |
| margin-bottom: 26px; | |
| } | |
| .sft-flow { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 30px; | |
| } | |
| .sft-flow p { | |
| font-family: var(--font-mono); | |
| font-size: 23px; | |
| color: var(--ink); | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| padding: 14px 18px; | |
| line-height: 1.2; | |
| } | |
| .sft-flow span { | |
| font-size: 30px; | |
| color: var(--ink-faint); | |
| } | |
| .sft-p { | |
| font-size: 27px; | |
| line-height: 1.42; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| max-width: 720px; | |
| } | |
| .sft-score { | |
| margin-top: auto; | |
| border-radius: 14px; | |
| padding: 22px 26px; | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 22px; | |
| } | |
| .sft-score p { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| color: var(--ink-faint); | |
| } | |
| .sft-score strong { | |
| font-family: var(--font-display); | |
| font-size: 48px; | |
| line-height: 1; | |
| } | |
| .sft-score.down strong { color: var(--blue); } | |
| .sft-score.up strong { color: var(--accent); } | |
| .sft-bottom { | |
| display: grid; | |
| grid-template-columns: 0.7fr 1fr 1.1fr; | |
| gap: 18px; | |
| margin-top: 24px; | |
| } | |
| .sft-bottom > div { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 22px 26px; | |
| } | |
| .sft-bottom-n { | |
| font-family: var(--font-display); | |
| font-size: 36px; | |
| font-weight: 800; | |
| color: var(--accent); | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| } | |
| .sft-bottom-l { | |
| font-size: 23px; | |
| line-height: 1.32; | |
| color: var(--ink-soft); | |
| } | |
| /* ---------- two panels (TAURA) ---------- */ | |
| .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; flex: 1; min-height: 0; } | |
| .panel { | |
| border-radius: 14px; | |
| padding: 34px 36px; | |
| display: flex; flex-direction: column; | |
| } | |
| .panel.problem { background: var(--blue-soft); border: 1px solid color-mix(in oklab, var(--blue) 30%, transparent); } | |
| .panel.fix { background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); } | |
| .panel-k { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } | |
| .panel.problem .panel-k { color: var(--blue); } | |
| .panel.fix .panel-k { color: var(--accent); } | |
| .panel-h { font-family: var(--font-display); font-size: 35px; font-weight: 700; line-height: 1.12; margin-bottom: 14px; } | |
| .panel-p { font-size: 24px; line-height: 1.36; color: var(--ink-soft); text-wrap: pretty; } | |
| .panel-formula sub { font-size: 0.58em; } | |
| .tw-row { display: flex; align-items: flex-end; gap: 12px; height: 72px; margin-top: 26px; } | |
| .tw-bar { flex: 1; background: var(--ink-faint); opacity: 0.32; border-radius: 5px 5px 0 0; height: var(--h); position: relative; } | |
| .tw-bar.hi { background: var(--accent); opacity: 1; } | |
| .tw-tag { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--accent); white-space: nowrap; } | |
| .tw-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 20px; line-height: 1.35; color: var(--ink-soft); } | |
| .panel-formula { | |
| margin-top: auto; | |
| font-family: var(--font-mono); | |
| font-size: var(--type-small); | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| padding: 16px 22px; | |
| color: var(--ink); | |
| line-height: 1.45; | |
| } | |
| .formula-card { | |
| display: grid; | |
| gap: 5px; | |
| } | |
| .formula-k { | |
| font-family: var(--font-mono); | |
| font-size: 16px; | |
| font-weight: 600; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| } | |
| .formula-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 27px; | |
| line-height: 1.08; | |
| white-space: nowrap; | |
| } | |
| .formula-line.secondary { | |
| margin-top: 4px; | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| font-size: 24px; | |
| } | |
| .formula-dot { | |
| color: var(--ink-faint); | |
| } | |
| .formula-frac { | |
| display: inline-grid; | |
| grid-template-rows: auto auto; | |
| align-items: center; | |
| min-width: 420px; | |
| text-align: center; | |
| line-height: 1.15; | |
| } | |
| .formula-frac > span:first-child { | |
| padding-bottom: 5px; | |
| border-bottom: 2px solid var(--ink); | |
| } | |
| .formula-frac > span:last-child { | |
| padding-top: 5px; | |
| font-size: 0.72em; | |
| } | |
| .formula-under { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| font-family: var(--font-mono); | |
| font-size: 14px; | |
| color: var(--ink-faint); | |
| } | |
| .formula-note { | |
| font-family: var(--font-mono); | |
| font-size: 15px; | |
| line-height: 1.35; | |
| color: var(--ink-soft); | |
| } | |
| .formula-note sub { | |
| font-size: 0.72em; | |
| } | |
| /* hand-set math (TAURA Eq. 4) */ | |
| .formula-line { align-items: flex-start; } | |
| .formula-line.secondary { align-items: center; font-size: 23px; margin-top: 2px; padding-top: 8px; } | |
| .m-var { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 500; } | |
| .m-term { white-space: nowrap; } | |
| .m-term sub { font-size: 0.58em; letter-spacing: 0.02em; } | |
| .m-eq { color: var(--ink-soft); padding: 0 2px; } | |
| .m-labeled { display: inline-flex; flex-direction: column; align-items: center; row-gap: 5px; } | |
| .m-labeled em { font-style: normal; font-family: var(--font-mono); font-size: 15px; line-height: 1; color: var(--ink-faint); white-space: nowrap; } | |
| .m-frac { display: inline-grid; justify-items: center; line-height: 1.2; } | |
| .m-num { padding: 0 22px 4px; border-bottom: 2px solid var(--ink); } | |
| .m-den { padding-top: 5px; display: inline-flex; align-items: center; gap: 12px; font-size: 0.88em; } | |
| .m-mini { display: inline-grid; justify-items: center; font-size: 0.66em; line-height: 1.15; } | |
| .m-mini > span:first-child { padding: 0 5px 2px; border-bottom: 1.5px solid var(--ink); } | |
| .m-mini > span:last-child { padding-top: 2px; } | |
| .m-sum { display: inline-grid; justify-items: center; line-height: 1; row-gap: 3px; } | |
| .m-sum sup, .m-sum sub { font-size: 12px; line-height: 1; color: var(--ink-soft); } | |
| .m-sum sup sub { font-size: 0.8em; } | |
| .m-sigma { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.18em; line-height: 0.9; } | |
| .m-gloss { margin-left: 18px; font-size: 14px; line-height: 1.9; color: var(--ink-faint); white-space: nowrap; align-self: center; } | |
| .bigstat { display: flex; align-items: baseline; gap: 24px; margin-top: 28px; } | |
| .bigstat-n { font-family: var(--font-display); font-size: 96px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } | |
| .bigstat-l { font-size: var(--type-small); line-height: 1.35; color: var(--ink-soft); max-width: 420px; } | |
| /* ---------- headline result (dark) ---------- */ | |
| .headline-grid { display: grid; grid-template-columns: 1fr 920px; gap: 64px; flex: 1; min-height: 0; align-items: center; } | |
| .vs-block { display: flex; flex-direction: column; gap: 36px; } | |
| .vs-row { display: flex; flex-direction: column; gap: 6px; } | |
| .vs-num { font-family: var(--font-display); font-size: 130px; font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; } | |
| .vs-num.win { color: var(--accent); } | |
| .vs-num.lose { color: var(--ink-faint); font-size: 92px; } | |
| .vs-label { font-size: var(--type-small); line-height: 1.35; color: var(--ink-soft); } | |
| .vs-label strong { color: var(--ink); display: block; font-size: var(--type-body); margin-bottom: 2px; } | |
| .vs-divider { border: none; border-top: 1px solid var(--line); } | |
| .vs-frames { font-family: var(--font-mono); font-size: var(--type-small); color: var(--ink-soft); line-height: 1.5; } | |
| .vs-frames strong { color: var(--accent); font-weight: 600; } | |
| /* ---------- results table ---------- */ | |
| .rtable { width: 100%; border-collapse: collapse; } | |
| .rtable th { | |
| font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; | |
| text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); | |
| text-align: right; padding: 0 26px 14px; border-bottom: 2px solid var(--ink); | |
| } | |
| .rtable th:first-child { text-align: left; padding-left: 0; } | |
| .rtable td { | |
| font-size: var(--type-small); padding: 8px 26px; | |
| border-bottom: 1px solid var(--line); text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .rtable td:first-child { text-align: left; padding-left: 0; font-weight: 500; } | |
| .rtable td.group { | |
| font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); | |
| text-transform: uppercase; letter-spacing: 0.1em; padding-top: 16px; padding-bottom: 4px; border-bottom: none; | |
| } | |
| .rtable .delta { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } | |
| .rtable .ours { font-weight: 600; } | |
| .rtable tr.hl td { background: var(--accent-soft); } | |
| .rtable tr.hl td:first-child { border-radius: 8px 0 0 8px; } | |
| .rtable tr.hl td:last-child { border-radius: 0 8px 8px 0; } | |
| /* ---------- grounding big numbers ---------- */ | |
| .ground-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; } | |
| .ground-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 22px; } | |
| .ground-grid.cols-6 { grid-template-columns: repeat(3, 1fr); gap: 22px 26px; } | |
| .ground-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 22px; } | |
| .ground-card { | |
| background: var(--card); border: 1px solid var(--line); border-radius: 14px; | |
| padding: 40px 38px; | |
| } | |
| .ground-grid.cols-4 .ground-card { padding: 32px 28px; } | |
| .ground-grid.cols-6 .ground-card { padding: 26px 30px; } | |
| .ground-grid.cols-5 .ground-card { padding: 30px 26px; } | |
| .ground-bench { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); margin-bottom: 26px; } | |
| .ground-grid.cols-4 .ground-bench { margin-bottom: 20px; font-size: 24px; } | |
| .ground-grid.cols-6 .ground-bench { margin-bottom: 14px; font-size: 24px; } | |
| .ground-grid.cols-5 .ground-bench { margin-bottom: 16px; font-size: 24px; } | |
| .ground-move { display: flex; align-items: baseline; gap: 18px; } | |
| .ground-from { font-family: var(--font-display); font-size: 48px; font-weight: 600; color: var(--ink-faint); } | |
| .ground-grid.cols-4 .ground-from { font-size: 36px; } | |
| .ground-grid.cols-6 .ground-from { font-size: 40px; } | |
| .ground-grid.cols-5 .ground-from { font-size: 34px; } | |
| .ground-arrow { font-size: 34px; color: var(--ink-faint); } | |
| .ground-grid.cols-6 .ground-arrow { font-size: 28px; } | |
| .ground-grid.cols-5 .ground-arrow { font-size: 26px; } | |
| .ground-to { font-family: var(--font-display); font-size: 96px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } | |
| .ground-grid.cols-4 .ground-to { font-size: 68px; } | |
| .ground-grid.cols-6 .ground-to { font-size: 72px; } | |
| .ground-grid.cols-5 .ground-to { font-size: 58px; } | |
| .ground-delta { font-family: var(--font-mono); font-size: var(--type-small); font-weight: 600; color: var(--accent); margin-top: 18px; } | |
| .ground-grid.cols-4 .ground-delta { font-size: 24px; margin-top: 14px; line-height: 1.3; } | |
| .ground-grid.cols-6 .ground-delta { font-size: 24px; margin-top: 12px; line-height: 1.3; } | |
| .ground-grid.cols-5 .ground-delta { font-size: 24px; margin-top: 10px; line-height: 1.3; } | |
| .sweep-band { | |
| display: flex; align-items: baseline; gap: 30px; | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); | |
| border-radius: 14px; | |
| padding: 26px 40px; | |
| margin-bottom: 28px; | |
| } | |
| .sweep-n { font-family: var(--font-display); font-size: 60px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } | |
| .sweep-p { font-size: var(--type-body); color: var(--ink); line-height: 1.3; } | |
| .sweep-layout { | |
| display: grid; | |
| grid-template-columns: 330px 1fr; | |
| gap: 28px; | |
| flex: 1; | |
| min-height: 0; | |
| align-items: stretch; | |
| } | |
| .sweep-claim { | |
| background: var(--bg-dark); | |
| color: var(--paper-ink); | |
| border-radius: 16px; | |
| padding: 34px 32px 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .sweep-claim .sweep-n { | |
| font-size: 72px; | |
| color: var(--accent-bright); | |
| } | |
| .sweep-claim .sweep-p { | |
| color: var(--paper-ink); | |
| font-family: var(--font-display); | |
| font-size: 24px; | |
| font-weight: 700; | |
| line-height: 1.18; | |
| } | |
| .sweep-note { | |
| margin-top: auto; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line-dark); | |
| font-size: 18px; | |
| line-height: 1.45; | |
| color: var(--paper-soft); | |
| text-wrap: pretty; | |
| } | |
| .sweep-metrics { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 24px 26px; | |
| display: grid; | |
| gap: 10px; | |
| min-height: 0; | |
| } | |
| .sweep-metrics.detailed { | |
| gap: 6px; | |
| padding: 18px 22px; | |
| align-content: start; | |
| } | |
| .sweep-group { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 18px; | |
| margin-top: 4px; | |
| padding: 7px 12px; | |
| border-radius: 8px; | |
| background: color-mix(in oklab, var(--accent) 7%, #ffffff); | |
| font-family: var(--font-mono); | |
| font-size: 16px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| } | |
| .sweep-group:first-child { | |
| margin-top: 0; | |
| } | |
| .sweep-group span { | |
| color: var(--ink-faint); | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| white-space: nowrap; | |
| } | |
| .sweep-row { | |
| display: grid; | |
| grid-template-columns: 220px 1fr 74px; | |
| gap: 14px; | |
| align-items: center; | |
| } | |
| .sweep-metrics.detailed .sweep-row { | |
| grid-template-columns: 230px 170px minmax(180px, 1fr) 120px; | |
| min-height: 42px; | |
| padding: 2px 4px; | |
| border-bottom: 1px solid color-mix(in oklab, var(--line) 64%, transparent); | |
| } | |
| .sweep-metrics.detailed .sweep-row:last-child { | |
| border-bottom: none; | |
| } | |
| .sweep-row .label { | |
| font-size: 20px; | |
| line-height: 1.12; | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .sweep-metrics.detailed .sweep-row .label { | |
| font-size: 18px; | |
| } | |
| .sweep-row .label span { | |
| display: block; | |
| margin-top: 3px; | |
| font-family: var(--font-mono); | |
| font-size: 14px; | |
| font-weight: 400; | |
| color: var(--ink-faint); | |
| } | |
| .sweep-metrics.detailed .sweep-row .label span { | |
| font-size: 12px; | |
| } | |
| .sweep-row .score { | |
| font-family: var(--font-mono); | |
| font-size: 17px; | |
| line-height: 1.16; | |
| color: var(--ink-soft); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| .sweep-row .score em { | |
| font-style: normal; | |
| color: var(--ink-faint); | |
| } | |
| .sweep-track { | |
| height: 20px; | |
| border-radius: 999px; | |
| background: oklch(0.92 0.008 80); | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| } | |
| .sweep-metrics.detailed .sweep-track { | |
| height: 16px; | |
| } | |
| .sweep-track i { | |
| display: block; | |
| width: var(--w); | |
| height: 100%; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| } | |
| .sweep-row strong { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| color: var(--accent); | |
| text-align: right; | |
| } | |
| .sweep-metrics.detailed .sweep-row strong { | |
| font-size: 17px; | |
| white-space: nowrap; | |
| } | |
| /* search-heavy rows the talk calls out */ | |
| .sweep-row.hl strong { color: var(--accent); } | |
| .sweep-row.hl .label { color: var(--accent); } | |
| .sweep-row.hl .label span { color: color-mix(in oklab, var(--accent) 62%, var(--ink-faint)); | |
| } | |
| .callout { | |
| margin-top: 40px; | |
| background: var(--bg-dark); color: var(--paper-ink); | |
| border-radius: 14px; padding: 30px 40px; | |
| font-size: var(--type-body); line-height: 1.4; | |
| display: flex; align-items: baseline; gap: 24px; | |
| } | |
| .callout .mark { font-family: var(--font-mono); color: var(--accent-bright); white-space: nowrap; font-size: var(--type-small); } | |
| /* ---------- ablation ladder ---------- */ | |
| .ladder { display: flex; flex-direction: column; gap: 20px; } | |
| .ladder-row { display: grid; grid-template-columns: 430px 1fr 130px; gap: 26px; align-items: center; } | |
| .ladder-name { font-size: var(--type-small); font-weight: 500; } | |
| .ladder-name span { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); margin-left: 12px; } | |
| .ladder-track { height: 52px; background: oklch(0.25 0.012 70 / 0.05); border-radius: 8px; overflow: hidden; } | |
| .ladder-bar { height: 100%; border-radius: 8px; background: var(--ink-faint); } | |
| .ladder-bar.base { background: oklch(0.62 0.012 70 / 0.65); } | |
| .ladder-bar.drop { background: var(--blue); } | |
| .ladder-bar.mid { background: color-mix(in oklab, var(--accent) 55%, #C9B9A8); } | |
| .ladder-bar.near { background: color-mix(in oklab, var(--accent) 78%, #B89F8C); } | |
| .ladder-bar.top { background: var(--accent); } | |
| .ladder-val { font-family: var(--font-mono); font-size: var(--type-body); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } | |
| .ladder-val.down { color: var(--blue); } | |
| .ladder-val.win { color: var(--accent); } | |
| .ladder-notes { display: flex; gap: 56px; margin-top: 44px; } | |
| .ladder-note { font-size: var(--type-small); line-height: 1.45; color: var(--ink-soft); max-width: 760px; text-wrap: pretty; } | |
| .ladder-note strong { color: var(--ink); } | |
| .axis-note { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); margin-top: 18px; } | |
| /* ---------- side-by-side: text + figure ---------- */ | |
| .split { display: grid; grid-template-columns: 660px 1fr; gap: 60px; flex: 1; min-height: 0; align-items: center; } | |
| .split-stats { display: flex; flex-direction: column; gap: 40px; } | |
| .stat-h { font-family: var(--font-display); font-size: 84px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } | |
| .stat-l { font-size: var(--type-small); line-height: 1.4; color: var(--ink-soft); margin-top: 12px; max-width: 560px; text-wrap: pretty; } | |
| .temporal-layout { | |
| display: grid; | |
| grid-template-columns: 0.95fr 1.05fr; | |
| gap: 30px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .temporal-left { | |
| display: grid; | |
| grid-template-rows: 1fr auto; | |
| gap: 22px; | |
| min-height: 0; | |
| } | |
| .ground-card.temporal-main, | |
| .ground-card.temporal-frontier { | |
| padding: 40px 42px; | |
| } | |
| .temporal-main { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .temporal-main .ground-to { font-size: 128px; } | |
| .temporal-main .ground-from { font-size: 58px; } | |
| .search-steps { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 14px; | |
| } | |
| .search-steps > div { | |
| background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); | |
| border-radius: 14px; | |
| padding: 22px 20px; | |
| } | |
| .search-step-k { | |
| font-family: var(--font-mono); | |
| font-size: 20px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 10px; | |
| } | |
| .search-steps p:not(.search-step-k) { | |
| font-size: 23px; | |
| line-height: 1.28; | |
| color: var(--ink-soft); | |
| } | |
| .temporal-frontier { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .temporal-frontier .cmp { padding: 18px 0; } | |
| .frontier-note { | |
| margin-top: auto; | |
| border-top: 1px solid var(--line); | |
| padding-top: 24px; | |
| font-size: 26px; | |
| line-height: 1.38; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| /* ---------- density chart ---------- */ | |
| .dens { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; align-items: end; flex: 1; min-height: 0; padding-top: 10px; } | |
| .dens-col { display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; justify-content: flex-end; } | |
| .dens-acc { | |
| font-family: var(--font-mono); font-size: var(--type-label); font-weight: 600; | |
| color: var(--accent); background: var(--accent-soft); | |
| border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); | |
| border-radius: 999px; padding: 8px 18px; white-space: nowrap; | |
| } | |
| .dens-bar { width: 100%; max-width: 170px; background: var(--blue); border-radius: 8px 8px 0 0; opacity: 0.75; } | |
| .dens-turns { font-family: var(--font-mono); font-size: var(--type-label); color: var(--blue); font-weight: 600; } | |
| .dens-x { font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-faint); border-top: 1px solid var(--line); width: 100%; text-align: center; padding-top: 12px; white-space: nowrap; } | |
| .dens-legend { display: flex; gap: 48px; margin-top: 30px; font-family: var(--font-mono); font-size: var(--type-label); color: var(--ink-soft); } | |
| .dens-legend .k-blue { color: var(--blue); font-weight: 600; } | |
| .dens-legend .k-red { color: var(--accent); font-weight: 600; } | |
| /* ---------- limitations ---------- */ | |
| .limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; flex: 1; min-height: 0; } | |
| .limit-col { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 44px 46px; } | |
| .limit-col.future { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 35%, transparent); } | |
| .limit-k { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 30px; } | |
| .limit-col.future .limit-k { color: var(--accent); } | |
| .limit-list { list-style: none; display: flex; flex-direction: column; gap: 30px; } | |
| .limit-list li { font-size: var(--type-body); line-height: 1.42; color: var(--ink); padding-left: 40px; position: relative; text-wrap: pretty; } | |
| .limit-list li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); } | |
| .limit-col.future .limit-list li::before { color: var(--accent); } | |
| .limit-sub { display: block; font-size: var(--type-small); color: var(--ink-soft); margin-top: 8px; } | |
| /* ---------- takeaways ---------- */ | |
| .take-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; flex: 1; min-height: 0; } | |
| .take-card { | |
| border-top: 3px solid var(--accent); | |
| background: var(--card); | |
| border-radius: 0 0 14px 14px; | |
| padding: 44px 40px; | |
| display: flex; flex-direction: column; | |
| } | |
| .take-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; } | |
| .take-num { font-family: var(--font-mono); font-size: var(--type-body); color: var(--accent); } | |
| .take-card .icon-badge { width: 58px; height: 58px; border-radius: 16px; } | |
| .take-card .icon { width: 34px; height: 34px; } | |
| .take-h { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1.12; margin-bottom: 20px; text-wrap: balance; color: var(--ink); } | |
| .take-p { font-size: var(--type-small); line-height: 1.48; color: var(--ink-soft); text-wrap: pretty; } | |
| .take-p strong { color: var(--ink); } | |
| /* ---------- optional web demo ---------- */ | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: 430px 1fr; | |
| gap: 44px; | |
| flex: 1; | |
| min-height: 0; | |
| align-items: stretch; | |
| } | |
| .demo-panel { | |
| background: var(--bg-dark); | |
| color: var(--paper-ink); | |
| border-radius: 16px; | |
| padding: 38px 38px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .demo-k { | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--accent-bright); | |
| margin-bottom: 24px; | |
| } | |
| .demo-list { | |
| list-style: none; | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .demo-list li { | |
| font-size: var(--type-small); | |
| line-height: 1.36; | |
| color: var(--paper-soft); | |
| text-wrap: pretty; | |
| } | |
| .demo-list strong { | |
| display: block; | |
| font-family: var(--font-display); | |
| font-size: 34px; | |
| line-height: 1.12; | |
| color: var(--paper-ink); | |
| margin-bottom: 4px; | |
| } | |
| .demo-note { | |
| margin-top: auto; | |
| padding-top: 28px; | |
| border-top: 1px solid var(--line-dark); | |
| font-family: var(--font-mono); | |
| font-size: var(--type-label); | |
| line-height: 1.45; | |
| color: var(--paper-soft); | |
| } | |
| .demo-stage { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| } | |
| .demo-video { | |
| width: 100%; | |
| aspect-ratio: 16 / 9; | |
| border-radius: 16px; | |
| border: 1px solid var(--line); | |
| background: #fff; | |
| object-fit: contain; | |
| box-shadow: 0 18px 44px oklch(0.25 0.012 70 / 0.12); | |
| } | |
| .demo-caption { | |
| margin-top: 16px; | |
| font-family: var(--font-mono); | |
| font-size: 21px; | |
| line-height: 1.35; | |
| color: var(--ink-soft); | |
| text-wrap: pretty; | |
| } | |
| .demo-caption strong { color: var(--accent); font-weight: 600; } | |
| .demo-slide .demo-grid { | |
| grid-template-columns: 400px 1fr; | |
| gap: 40px; | |
| align-items: start; | |
| } | |
| .demo-slide .demo-panel { | |
| padding: 34px 34px; | |
| } | |
| .demo-slide .demo-list { | |
| gap: 15px; | |
| align-content: start; | |
| grid-auto-rows: min-content; | |
| } | |
| .demo-slide .demo-list li { | |
| font-size: 24px; | |
| } | |
| .demo-slide .demo-list strong { | |
| font-size: 31px; | |
| } | |
| .demo-slide .demo-note { | |
| padding-top: 22px; | |
| font-size: 21px; | |
| } | |
| .demo-slide .demo-stage { | |
| align-items: center; | |
| } | |
| .demo-slide .demo-video { | |
| width: min(100%, 1050px); | |
| max-height: 590px; | |
| } | |
| .demo-slide .demo-caption { | |
| max-width: 1050px; | |
| } | |
| /* ---------- closing ---------- */ | |
| .close-grid { display: grid; grid-template-columns: 1fr 460px; gap: 90px; flex: 1; min-height: 0; align-items: center; } | |
| .close-paper { font-family: var(--font-display); font-size: var(--type-subtitle); font-weight: 700; line-height: 1.2; margin-bottom: 44px; max-width: 1000px; text-wrap: balance; } | |
| .close-url { font-family: var(--font-mono); font-size: var(--type-body); color: var(--accent-bright); margin-bottom: 56px; } | |
| .close-meta { font-size: var(--type-small); line-height: 1.7; color: var(--paper-soft); } | |
| .close-meta strong { color: var(--paper-ink); font-weight: 600; } | |
| .qr-card { background: #FFFFFF; border-radius: 20px; padding: 34px; } | |
| .qr-card img { width: 100%; height: auto; } | |
| .qr-cap { font-family: var(--font-mono); font-size: var(--type-label); color: var(--paper-soft); text-align: center; margin-top: 22px; } | |