Spaces:
Running
Running
| :root { | |
| color-scheme: light; | |
| --ink: #27233c; | |
| --ink-soft: #625e75; | |
| --paper: #f7f3ea; | |
| --paper-deep: #eee7d9; | |
| --card: rgba(255, 253, 248, 0.82); | |
| --indigo: #474166; | |
| --indigo-soft: #77708f; | |
| --sun: #d29d4a; | |
| --rose: #a45551; | |
| --mint: #66877c; | |
| --line: rgba(71, 65, 102, 0.17); | |
| --shadow: 0 24px 70px rgba(55, 47, 73, 0.1); | |
| --radius: 28px; | |
| font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| color: var(--ink); | |
| background: | |
| radial-gradient(circle at 8% 7%, rgba(208, 173, 113, 0.18), transparent 28rem), | |
| radial-gradient(circle at 92% 18%, rgba(121, 111, 150, 0.14), transparent 30rem), | |
| linear-gradient(180deg, #faf7f0 0%, var(--paper) 46%, #f3eee4 100%); | |
| line-height: 1.58; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| opacity: 0.3; | |
| background-image: radial-gradient(rgba(54, 47, 75, 0.25) 0.55px, transparent 0.55px); | |
| background-size: 18px 18px; | |
| mask-image: linear-gradient(to bottom, black, transparent 45%); | |
| } | |
| a { color: inherit; } | |
| button, a { -webkit-tap-highlight-color: transparent; } | |
| button:focus-visible, | |
| a:focus-visible, | |
| summary:focus-visible { | |
| outline: 3px solid var(--indigo); | |
| outline-offset: 3px; | |
| } | |
| .skip-link { | |
| position: fixed; | |
| left: 1rem; | |
| top: 1rem; | |
| z-index: 30; | |
| transform: translateY(-180%); | |
| padding: 0.7rem 1rem; | |
| border-radius: 999px; | |
| background: var(--ink); | |
| color: white; | |
| } | |
| .skip-link:focus { transform: translateY(0); } | |
| .site-header, | |
| main, | |
| footer { | |
| width: min(1180px, calc(100% - 40px)); | |
| margin-inline: auto; | |
| } | |
| .site-header { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 26px 0; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| text-decoration: none; | |
| font-weight: 720; | |
| letter-spacing: -0.02em; | |
| } | |
| .brand-mark { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| border: 1px solid var(--line); | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.35); | |
| } | |
| .brand-mark span { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: var(--indigo); | |
| } | |
| .brand-mark span:nth-child(1) { transform: translate(-7px, 5px); } | |
| .brand-mark span:nth-child(2) { transform: translate(1px, -7px); background: var(--sun); } | |
| .brand-mark span:nth-child(3) { transform: translate(8px, 6px); background: var(--rose); } | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.45rem 0.78rem; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--ink-soft); | |
| background: rgba(255, 253, 248, 0.62); | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--mint); | |
| box-shadow: 0 0 0 4px rgba(102, 135, 124, 0.12); | |
| } | |
| .hero { | |
| position: relative; | |
| padding: clamp(76px, 11vw, 142px) 0 clamp(72px, 9vw, 112px); | |
| text-align: center; | |
| } | |
| .hero::before, | |
| .hero::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| border-radius: 50%; | |
| transform: translateX(-50%); | |
| pointer-events: none; | |
| } | |
| .hero::before { | |
| top: 24px; | |
| width: min(640px, 72vw); | |
| aspect-ratio: 1; | |
| border: 1px solid rgba(71, 65, 102, 0.08); | |
| } | |
| .hero::after { | |
| top: 72px; | |
| width: min(530px, 62vw); | |
| aspect-ratio: 1; | |
| border: 1px solid rgba(210, 157, 74, 0.11); | |
| } | |
| .eyebrow { | |
| margin: 0 0 0.75rem; | |
| color: var(--rose); | |
| font-size: 0.72rem; | |
| font-weight: 780; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| } | |
| h1, h2, h3, p { margin-top: 0; } | |
| h1, h2, h3 { | |
| font-family: Iowan Old Style, Baskerville, "Times New Roman", serif; | |
| font-weight: 520; | |
| letter-spacing: -0.035em; | |
| line-height: 1.08; | |
| } | |
| h1 { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| font-size: clamp(3rem, 8.5vw, 7.1rem); | |
| } | |
| h1 em { | |
| color: var(--indigo-soft); | |
| font-weight: 420; | |
| } | |
| .hero-copy { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 650px; | |
| margin: 2rem auto 0; | |
| color: var(--ink-soft); | |
| font-size: clamp(1rem, 2vw, 1.18rem); | |
| } | |
| .hero-boundary { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| width: fit-content; | |
| margin: 2rem auto 0; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: rgba(255, 253, 248, 0.68); | |
| color: var(--ink-soft); | |
| font-size: 0.8rem; | |
| } | |
| .hero-boundary strong { color: var(--rose); } | |
| .snapshot-note { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| width: min(720px, 100%); | |
| margin: 1rem auto 0; | |
| align-items: baseline; | |
| justify-content: center; | |
| gap: 0.7rem; | |
| color: var(--ink-soft); | |
| font-size: 0.72rem; | |
| } | |
| .snapshot-note strong { | |
| color: var(--ink); | |
| font-size: 0.68rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .study-shell { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 310px; | |
| gap: 24px; | |
| align-items: start; | |
| } | |
| .study-main, | |
| .authority-card, | |
| .negative-space, | |
| .artifact-note, | |
| .next-study { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--card); | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(12px); | |
| } | |
| .study-main { padding: clamp(24px, 4vw, 42px); } | |
| .section-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1.5rem; | |
| align-items: end; | |
| margin-bottom: 2rem; | |
| } | |
| .section-heading h2, | |
| .negative-intro h2, | |
| .next-study > h2 { | |
| margin-bottom: 0; | |
| font-size: clamp(2rem, 4vw, 3.35rem); | |
| } | |
| .scope-note { | |
| flex: 0 0 auto; | |
| margin-bottom: 0.28rem; | |
| color: var(--ink-soft); | |
| font-size: 0.79rem; | |
| } | |
| .chart-card { | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: 22px; | |
| background: rgba(255, 255, 255, 0.45); | |
| } | |
| .chart-intro { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1.5rem; | |
| padding: 18px 20px 0; | |
| color: var(--ink-soft); | |
| font-size: 0.78rem; | |
| } | |
| .chart-intro p { max-width: 560px; margin-bottom: 0; } | |
| .legend { | |
| display: flex; | |
| flex: 0 0 auto; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| white-space: nowrap; | |
| } | |
| .legend span { display: inline-flex; align-items: center; } | |
| .legend i { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| margin-right: 0.35rem; | |
| border-radius: 50%; | |
| background: var(--indigo-soft); | |
| } | |
| .legend .context-key { background: var(--indigo-soft); } | |
| .legend .detail-key { | |
| border: 2px solid var(--indigo); | |
| background: var(--paper); | |
| } | |
| .chart-wrap { padding: 0 8px; } | |
| .chart-wrap svg { display: block; width: 100%; height: auto; } | |
| .chart-grid { stroke: rgba(71, 65, 102, 0.1); stroke-width: 1; } | |
| .chart-axis { stroke: rgba(71, 65, 102, 0.28); stroke-width: 1; } | |
| .chart-label { | |
| fill: var(--ink-soft); | |
| font-family: Inter, ui-sans-serif, sans-serif; | |
| font-size: 11px; | |
| } | |
| .chart-error { stroke: var(--indigo-soft); stroke-width: 1.2; } | |
| .chart-error.detailed { stroke: var(--indigo); stroke-width: 1.8; } | |
| .chart-point { | |
| cursor: default; | |
| fill: var(--indigo-soft); | |
| stroke: none; | |
| transition: r 120ms ease, fill 120ms ease; | |
| } | |
| .chart-point.detailed { | |
| fill: var(--paper); | |
| stroke: var(--indigo); | |
| stroke-width: 2.2; | |
| } | |
| .chart-point.selected { fill: var(--sun); stroke: var(--ink); } | |
| .chart-inset { | |
| fill: rgba(255, 253, 248, 0.96); | |
| stroke: rgba(71, 65, 102, 0.2); | |
| stroke-width: 1; | |
| } | |
| .chart-inset-axis { stroke: rgba(71, 65, 102, 0.22); stroke-width: 1; } | |
| .chart-inset-label, | |
| .chart-inset-tick { | |
| fill: var(--ink-soft); | |
| font-family: Inter, ui-sans-serif, sans-serif; | |
| font-size: 8.5px; | |
| } | |
| .chart-inset-label { font-weight: 680; } | |
| .inset-error { stroke-width: 0.9; } | |
| .chart-caution { | |
| margin: 0; | |
| padding: 14px 20px 17px; | |
| border-top: 1px solid var(--line); | |
| color: var(--ink-soft); | |
| background: rgba(210, 157, 74, 0.06); | |
| font-size: 0.78rem; | |
| } | |
| .context-table { | |
| margin-top: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .context-table summary { | |
| cursor: pointer; | |
| padding: 14px 16px; | |
| color: var(--ink); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .table-wrap { | |
| max-height: 420px; | |
| overflow: auto; | |
| border-top: 1px solid var(--line); | |
| } | |
| .context-table table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.7rem; | |
| text-align: left; | |
| } | |
| .context-table caption { | |
| padding: 12px 14px; | |
| color: var(--ink-soft); | |
| text-align: left; | |
| } | |
| .context-table th, | |
| .context-table td { | |
| padding: 10px 12px; | |
| border-top: 1px solid rgba(71, 65, 102, 0.09); | |
| white-space: nowrap; | |
| } | |
| .context-table thead th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| color: var(--ink-soft); | |
| background: #f8f5ed; | |
| font-size: 0.64rem; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .context-table tbody th { color: var(--ink); font-weight: 720; } | |
| .context-table tbody tr:nth-child(even) { background: rgba(71, 65, 102, 0.025); } | |
| .context-table a { font-weight: 680; } | |
| .detail-label { | |
| margin: 18px 0 0; | |
| color: var(--ink-soft); | |
| font-size: 0.7rem; | |
| font-weight: 740; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .observation-row { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| margin-top: 12px; | |
| } | |
| .observation-button { | |
| padding: 13px 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| color: var(--ink); | |
| background: rgba(255, 255, 255, 0.38); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .observation-button:hover, | |
| .observation-button[aria-pressed="true"] { | |
| border-color: rgba(71, 65, 102, 0.46); | |
| background: rgba(255, 255, 255, 0.74); | |
| } | |
| .observation-button:focus-visible { | |
| border-color: var(--indigo); | |
| background: rgba(255, 255, 255, 0.82); | |
| } | |
| .observation-button small, | |
| .observation-button strong { display: block; } | |
| .observation-button small { color: var(--ink-soft); font-size: 0.68rem; } | |
| .observation-button strong { margin-top: 0.15rem; font-size: 0.9rem; } | |
| .inspection { | |
| min-height: 190px; | |
| margin-top: 12px; | |
| padding: 24px; | |
| border: 1px dashed rgba(71, 65, 102, 0.24); | |
| border-radius: 20px; | |
| background: rgba(247, 243, 234, 0.48); | |
| } | |
| .inspection-empty { | |
| display: flex; | |
| min-height: 140px; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1.3rem; | |
| color: var(--ink-soft); | |
| } | |
| .inspection-empty h3 { margin-bottom: 0.5rem; color: var(--ink); font-size: 1.45rem; } | |
| .inspection-empty p:last-child { margin-bottom: 0; font-size: 0.85rem; } | |
| .inspection-orbit { | |
| position: relative; | |
| flex: 0 0 auto; | |
| width: 48px; | |
| height: 48px; | |
| border: 1px solid var(--line); | |
| border-radius: 50%; | |
| } | |
| .inspection-orbit::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--sun); | |
| transform: translate(-50%, -50%); | |
| } | |
| .receipt-head { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| align-items: start; | |
| } | |
| .receipt-head h3 { margin-bottom: 0.35rem; font-size: 1.7rem; } | |
| .receipt-value { color: var(--indigo); font-size: 1.1rem; font-weight: 760; white-space: nowrap; } | |
| .receipt-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-top: 18px; | |
| } | |
| .receipt-grid div { | |
| padding: 12px 14px; | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.46); | |
| } | |
| .receipt-grid dt { color: var(--ink-soft); font-size: 0.68rem; } | |
| .receipt-grid dd { margin: 0.18rem 0 0; overflow-wrap: anywhere; font-size: 0.78rem; } | |
| .receipt-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 16px 0 0; } | |
| .receipt-warning { | |
| margin: 16px 0 0; | |
| padding: 12px 14px; | |
| border-left: 3px solid var(--sun); | |
| color: var(--ink-soft); | |
| background: rgba(210, 157, 74, 0.07); | |
| font-size: 0.76rem; | |
| } | |
| .receipt-links a { | |
| padding: 0.48rem 0.7rem; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| text-decoration: none; | |
| font-size: 0.72rem; | |
| font-weight: 680; | |
| } | |
| .receipt-links a:hover, | |
| .receipt-links a:focus-visible { background: white; } | |
| .authority-card { | |
| position: sticky; | |
| top: 20px; | |
| padding: 28px; | |
| background: linear-gradient(160deg, rgba(71, 65, 102, 0.95), rgba(51, 46, 74, 0.98)); | |
| color: rgba(255, 255, 255, 0.75); | |
| } | |
| .authority-card .eyebrow { color: #edc585; } | |
| .authority-card h2 { margin-bottom: 0.8rem; color: white; font-size: 2.15rem; } | |
| .authority-card > p { font-size: 0.86rem; } | |
| .effect-list { margin: 1.5rem 0; padding: 0; list-style: none; } | |
| .effect-list li { padding: 0.72rem 0; border-top: 1px solid rgba(255, 255, 255, 0.11); } | |
| .effect-list span, | |
| .effect-list strong { display: block; } | |
| .effect-list span { font-size: 0.78rem; } | |
| .effect-list strong { margin-top: 0.12rem; color: #f0c5bf; font-size: 0.69rem; letter-spacing: 0.04em; text-transform: uppercase; } | |
| .quiet-rule { height: 1px; background: rgba(255, 255, 255, 0.13); } | |
| .aside-note { margin: 1.2rem 0 0; font-size: 0.75rem ; } | |
| .failure-panel { | |
| padding: 1rem 1.2rem; | |
| border: 1px solid rgba(182, 102, 97, 0.28); | |
| border-radius: 16px; | |
| color: #7d3f3a; | |
| background: rgba(182, 102, 97, 0.08); | |
| } | |
| .failure-panel strong, | |
| .failure-panel span { display: block; } | |
| .lanes { padding: clamp(82px, 11vw, 140px) 0; } | |
| .section-heading.wide { max-width: 820px; } | |
| .lane-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } | |
| .lane-grid article { min-height: 220px; padding: 26px 22px 8px; border-right: 1px solid var(--line); } | |
| .lane-grid article:last-child { border-right: 0; } | |
| .lane-number { color: var(--rose); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; } | |
| .lane-grid h3 { margin: 2.3rem 0 0.7rem; font-size: 1.6rem; } | |
| .lane-grid p { color: var(--ink-soft); font-size: 0.83rem; } | |
| .negative-space { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 46px; padding: clamp(28px, 5vw, 54px); } | |
| .negative-intro p:last-child { max-width: 390px; color: var(--ink-soft); } | |
| .unknown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } | |
| .unknown-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.38); } | |
| .unknown-grid h3 { margin-bottom: 0.55rem; font-size: 1.25rem; } | |
| .unknown-grid p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.78rem; } | |
| .next-study { margin-top: 24px; padding: clamp(28px, 5vw, 54px); } | |
| .next-study > h2 { max-width: 770px; } | |
| .study-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.5rem; } | |
| .study-steps article { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.36); } | |
| .study-steps span { color: var(--rose); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } | |
| .study-steps h3 { margin: 1.2rem 0 0.7rem; font-size: 1.38rem; } | |
| .study-steps p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.79rem; } | |
| .artifact-note { | |
| display: grid; | |
| grid-template-columns: 1.12fr 0.88fr; | |
| gap: 44px; | |
| margin-top: 24px; | |
| padding: clamp(28px, 5vw, 54px); | |
| background: | |
| radial-gradient(circle at 88% 20%, rgba(210, 157, 74, 0.12), transparent 18rem), | |
| var(--card); | |
| } | |
| .artifact-note h2 { max-width: 660px; margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.35rem); } | |
| .artifact-note > div:first-child > p:last-of-type { max-width: 650px; color: var(--ink-soft); } | |
| .artifact-note nav { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.4rem; } | |
| .artifact-note nav a { | |
| padding: 0.52rem 0.76rem; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.42); | |
| text-decoration: none; | |
| font-size: 0.72rem; | |
| font-weight: 680; | |
| } | |
| .artifact-comparison { | |
| display: flex; | |
| min-height: 270px; | |
| padding: 28px; | |
| align-items: stretch; | |
| justify-content: center; | |
| flex-direction: column; | |
| border: 1px solid var(--line); | |
| border-radius: 22px; | |
| background: rgba(71, 65, 102, 0.94); | |
| color: white; | |
| } | |
| .artifact-comparison p { margin: 0; } | |
| .artifact-comparison p span, | |
| .artifact-comparison p strong { display: block; } | |
| .artifact-comparison p span { color: rgba(255, 255, 255, 0.62); font-size: 0.7rem; } | |
| .artifact-comparison p strong { margin-top: 0.16rem; font-family: Iowan Old Style, Baskerville, serif; font-size: 1.45rem; font-weight: 520; } | |
| .artifact-comparison .not-equal { margin: 0.85rem 0; color: #edc585; font-size: 1.4rem; } | |
| .artifact-comparison small { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.68); } | |
| footer { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1.5rem; | |
| padding: 60px 0 44px; | |
| color: var(--ink-soft); | |
| font-size: 0.76rem; | |
| } | |
| footer p { margin: 0; } | |
| footer nav { display: flex; flex-wrap: wrap; gap: 1rem; } | |
| @media (max-width: 900px) { | |
| .study-shell { grid-template-columns: 1fr; } | |
| .authority-card { position: static; } | |
| .lane-grid { grid-template-columns: repeat(2, 1fr); } | |
| .lane-grid article:nth-child(2) { border-right: 0; } | |
| .lane-grid article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } | |
| .negative-space { grid-template-columns: 1fr; } | |
| .artifact-note { grid-template-columns: 1fr; } | |
| .study-steps { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 640px) { | |
| .site-header, main, footer { width: min(100% - 24px, 1180px); } | |
| .site-header { align-items: flex-start; gap: 1rem; } | |
| .status-pill { max-width: 160px; border-radius: 18px; } | |
| .hero { padding-top: 65px; } | |
| h1 { font-size: clamp(2.7rem, 15vw, 4.4rem); } | |
| .hero-boundary { gap: 0.42rem; padding-inline: 0.7rem; font-size: 0.69rem; } | |
| .snapshot-note { align-items: center; flex-direction: column; gap: 0.2rem; } | |
| .section-heading, .chart-intro, footer { align-items: flex-start; flex-direction: column; } | |
| .observation-row { grid-template-columns: repeat(2, 1fr); } | |
| .receipt-head { flex-direction: column; } | |
| .receipt-grid, .unknown-grid { grid-template-columns: 1fr; } | |
| .lane-grid { grid-template-columns: 1fr; } | |
| .lane-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } | |
| .lane-grid article:last-child { border-bottom: 0; } | |
| .lane-grid h3 { margin-top: 1.2rem; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| *, *::before, *::after { transition-duration: 0.001ms ; } | |
| } | |