:root {
  --ink: #e9f2ed;
  --muted: #91a39d;
  --dim: #60716c;
  --ground: #07131a;
  --panel: #0d1c23;
  --panel-2: #10252c;
  --line: rgba(184, 216, 199, 0.15);
  --line-bright: rgba(184, 216, 199, 0.32);
  --lime: #c6f34a;
  --lime-2: #84bf55;
  --cyan: #74d9d4;
  --amber: #ffbc5b;
  --danger: #ff746c;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% -10%, rgba(99, 186, 133, 0.17), transparent 34rem),
    linear-gradient(155deg, #07131a 0%, #08161d 42%, #061116 100%);
  font-family: "Noto Sans JP", "Manrope", sans-serif;
  line-height: 1.6;
  letter-spacing: .01em;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
.site-shell { overflow: clip; }
.section-wrap { width: min(1380px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; color: var(--ground); background: var(--lime); border-radius: 4px; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.topbar { width: min(1380px, calc(100% - 64px)); min-height: 92px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.header-start { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.view-mode-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line); background: rgba(3, 13, 18, .45); }
.view-mode-toggle button { min-height: 30px; padding: .32rem .48rem; color: var(--muted); border: 0; background: transparent; font: 500 .57rem "Noto Sans JP", sans-serif; white-space: nowrap; }
.view-mode-toggle button.active { color: var(--ground); background: var(--lime); }
.view-mode-toggle button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font: 700 .69rem/1.15 "DM Mono", monospace; letter-spacing: .14em; }
.brand-version { color: var(--lime); font: 500 .72em "DM Mono", monospace; letter-spacing: .02em; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 41px; height: 41px; border: 1px solid var(--lime); color: var(--lime); font: 500 .75rem "DM Mono", monospace; letter-spacing: -.04em; }
.topbar-meta { display: flex; align-items: center; gap: .65rem; color: var(--muted); font: 500 .65rem "DM Mono", monospace; letter-spacing: .08em; }
.data-version { padding-left: .7rem; border-left: 1px solid var(--line); color: var(--dim); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(198,243,74,.1); }

.hero { min-height: 330px; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 4rem; padding: 72px 0 52px; }
.eyebrow, .micro-label { margin: 0 0 .85rem; color: var(--lime); font: 500 .67rem "DM Mono", monospace; letter-spacing: .14em; }
.hero h1, .section-heading h2, .community h2 { margin: 0; font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 800; line-height: 1.06; letter-spacing: -.055em; }
.hero h1 { max-width: 820px; font-size: clamp(3.2rem, 6.8vw, 6.8rem); }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-text { max-width: 660px; margin: .9rem 0 1.25rem; color: #c2d0ca; font-size: .88rem; line-height: 1.9; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-tags span { padding: .44rem .65rem; border: 1px solid var(--line); color: var(--muted); font: .68rem "DM Mono", monospace; letter-spacing: .02em; }
.hero-tags b { color: var(--ink); font-weight: 500; }
.hero-note { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.7rem; background: linear-gradient(135deg, rgba(140,198,112,.14), rgba(13,28,35,.7)); border: 1px solid var(--line); border-bottom: 2px solid var(--lime); }
.note-label { margin: 0 0 .8rem; color: var(--lime); font: .64rem "DM Mono", monospace; letter-spacing: .14em; }
.hero-note h2 { margin: 0; font-size: 1.8rem; line-height: 1.25; letter-spacing: -.04em; }
.hero-note h2 span { color: var(--lime); }
.hero-note p:not(.note-label) { margin: .9rem 0 1.5rem; color: var(--muted); font-size: .77rem; line-height: 1.8; }
.hero-note a { color: var(--ink); font: 500 .75rem "DM Mono", monospace; text-underline-offset: .35em; }
.hero-note a span { color: var(--lime); }

.terrain-section { padding-top: 44px; }.table-section + .race-card-panel[hidden] + .terrain-section { padding-top: 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.7rem; }
.section-heading h2 { font-size: clamp(1.45rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; }
.section-lead { max-width: 300px; margin: 0 0 .4rem; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.terrain-heading { align-items: center; }
.terrain-actions { display: flex; align-items: center; gap: 1.4rem; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); background: rgba(0,0,0,.12); }
.segmented button { padding: .46rem .75rem; color: var(--muted); border: 0; background: transparent; font: .7rem "DM Mono", monospace; }
.segmented button.active { color: var(--ground); background: var(--lime); }
.angle-control { display: flex; align-items: center; gap: .6rem; color: var(--muted); font: .65rem "DM Mono", monospace; letter-spacing: .08em; }
.angle-control input { width: 90px; accent-color: var(--lime); }
.terrain-card { position: relative; padding: 1.3rem 1.4rem 1rem; overflow: hidden; background: linear-gradient(140deg, rgba(22,48,54,.92), rgba(8,20,27,.96)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.terrain-card::before { content:""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.terrain-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0 0 .8rem; color: var(--muted); font: .64rem "DM Mono", monospace; }
.terrain-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-line { width: 19px; height: 3px; background: var(--lime); }
.legend-line.descent { background: var(--cyan); }.legend-line.night { background: #7a6ae6; }
.legend-pin { width: 7px; height: 7px; border: 2px solid var(--lime); border-radius: 50%; }
.terrain-chart { position: relative; z-index: 1; min-height: 365px; }
.terrain-chart svg { width: 100%; height: 365px; display: block; overflow: visible; }
.terrain-chart .terrain-marker { cursor: pointer; outline: none; }
.terrain-chart .terrain-marker circle { transition: r .2s ease, fill .2s ease; }
.terrain-chart .terrain-marker:hover circle, .terrain-chart .terrain-marker:focus circle, .terrain-chart .terrain-marker.selected circle { r: 7; fill: var(--lime); }
.terrain-chart .marker-label { fill: #e1ede5; font: 600 10px "Noto Sans JP", sans-serif; paint-order: stroke; stroke: #0d2228; stroke-width: 4px; stroke-linejoin: round; }
.terrain-chart .axis-label { fill: #72847d; font: 10px "DM Mono", monospace; }
.terrain-tooltip { position: absolute; z-index: 4; right: 1.35rem; bottom: 2.8rem; width: min(340px, calc(100% - 2.7rem)); min-height: 62px; padding: .8rem .9rem; color: var(--muted); background: rgba(5,16,21,.88); border: 1px solid var(--line-bright); backdrop-filter: blur(10px); font-size: .71rem; line-height: 1.7; }
.terrain-tooltip b { color: var(--ink); }.terrain-tooltip em { color: var(--lime); font-style: normal; }
.terrain-footnote { position: relative; z-index: 1; margin: .5rem 0 0; color: var(--dim); font-size: .62rem; }

.pace-lab { padding-top: 120px; }
.lab-grid { display: grid; grid-template-columns: 310px 1fr; align-items: stretch; border: 1px solid var(--line); background: rgba(8,22,29,.55); box-shadow: var(--shadow); }
.controls-panel { padding: 1.25rem; border-right: 1px solid var(--line); background: rgba(7,18,23,.68); }
.control-title { display: flex; align-items: center; gap: .55rem; margin: .1rem 0 1.1rem; color: var(--ink); font: 500 .68rem "DM Mono", monospace; letter-spacing: .08em; }.control-title.sub { margin-top: 1.65rem; }
.control-index { color: var(--lime); }
.field-label { display: grid; gap: .45rem; margin-top: 1rem; color: var(--muted); font-size: .69rem; }
.field-label select, .time-input { width: 100%; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: #0d2027; outline: none; }
.field-label select { height: 42px; padding: 0 .7rem; font-size: .77rem; }.field-label select:focus, .time-input:focus-within { border-color: var(--lime); }
.time-fields { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: .65rem; }.time-fields .field-label { margin: 1rem 0 0; }
.time-input { display: flex; align-items: center; height: 52px; padding: 0 .6rem; }.time-input input { min-width: 0; width: 100%; color: var(--ink); border: 0; background: transparent; font: 500 1.5rem "DM Mono", monospace; outline: 0; }.time-input small { color: var(--lime); font: .68rem "DM Mono", monospace; }.time-input.minutes { margin-bottom: 0; }
.reset-button { width: 100%; margin-top: 1.8rem; padding: .64rem; color: var(--muted); border: 1px solid var(--line); background: transparent; font-size: .68rem; }.reset-button:hover { color: var(--ink); border-color: var(--line-bright); }
.command-center { min-width: 0; padding: 1.5rem; }
.race-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem; padding-bottom: 1.05rem; border-bottom: 1px solid var(--line); color: var(--muted); font: .67rem "DM Mono", monospace; letter-spacing: .08em; }.race-strip span:first-child { color: var(--lime); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); margin: 1.4rem 0; }.metric { min-width: 0; padding: .2rem 1rem .2rem 0; border-right: 1px solid var(--line); }.metric:not(:first-child) { padding-left: 1rem; }.metric:last-child { border: 0; }.metric small { display: block; color: var(--dim); font: .58rem "DM Mono", monospace; letter-spacing: .08em; }.metric b { display: block; margin-top: .3rem; overflow: hidden; color: var(--ink); font: 600 clamp(1rem, 1.65vw, 1.55rem) "DM Mono", monospace; letter-spacing: -.08em; text-overflow: ellipsis; white-space: nowrap; }.metric b.good { color: var(--lime); }.metric b.warn { color: var(--amber); }.metric b.danger { color: var(--danger); }.metric span { display: block; margin-top: .15rem; color: var(--muted); font-size: .58rem; }
.timeline-panel { padding: 1.1rem; background: linear-gradient(130deg, rgba(23,53,54,.6), rgba(11,28,35,.75)); border: 1px solid var(--line); }.timeline-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }.timeline-head h3, .analysis-card h3 { margin: 0; font-size: 1rem; letter-spacing: -.03em; }.timeline-caption { margin: .1rem 0; color: var(--muted); font: .64rem "DM Mono", monospace; text-align: right; }.time-allocation { display: flex; height: 17px; margin: 1.25rem 0 .65rem; overflow: hidden; background: #071218; }.time-allocation span { display: block; min-width: 1px; height: 100%; }.time-allocation .moving { background: linear-gradient(90deg, #8abb54, var(--lime)); }.time-allocation .rest { background: var(--amber); }.allocation-labels { display: flex; justify-content: space-between; color: var(--muted); font: .62rem "DM Mono", monospace; }.allocation-labels b { color: var(--ink); font-weight: 500; }
.checkpoint-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: .45rem; margin-top: 1.2rem; }.checkpoint-chip { min-width: 0; padding: .45rem .5rem; border-left: 2px solid var(--line-bright); background: rgba(0,0,0,.12); }.checkpoint-chip small { display: block; overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }.checkpoint-chip b { display: block; margin-top: .1rem; color: var(--lime); font: .63rem "DM Mono", monospace; }.checkpoint-chip.warn { border-color: var(--amber); }.checkpoint-chip.warn b { color: var(--amber); }.checkpoint-chip.danger { border-color: var(--danger); }.checkpoint-chip.danger b { color: var(--danger); }
.formula-note { display: flex; gap: .75rem; margin-top: 1.1rem; color: var(--muted); font-size: .62rem; line-height: 1.7; }.formula-note span { flex: 0 0 auto; color: var(--lime); font: .62rem "DM Mono", monospace; }.formula-note p { margin: 0; }.formula-note code { color: #c5d6cc; font-family: "DM Mono", monospace; }

.analysis-section, .table-section { padding-top: 120px; }.hero + .table-section { padding-top: 64px; }.analysis-grid { display: grid; grid-template-columns: 1.12fr .9fr .9fr; gap: 1rem; }.analysis-card { min-height: 250px; padding: 1.35rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(16,39,45,.84), rgba(8,22,28,.78)); }.analysis-card .micro-label { color: var(--cyan); }.risk-list { display: grid; gap: .7rem; margin-top: 1.15rem; }.risk-item { display: grid; grid-template-columns: 28px 1fr auto; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }.risk-score { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ground); background: var(--amber); font: 500 .62rem "DM Mono", monospace; }.risk-name { min-width: 0; color: var(--ink); font-size: .72rem; }.risk-name small { display: block; overflow: hidden; color: var(--muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }.risk-tags { color: var(--amber); font: .57rem "DM Mono", monospace; white-space: nowrap; }
.coefficient-scale { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 1.2rem; color: var(--muted); font: .59rem "DM Mono", monospace; }.coefficient-scale > div { display: flex; flex: 1; height: 8px; gap: 2px; }.coefficient-scale i { flex: 1; background: #2e6967; }.coefficient-scale i:nth-child(2) { background: #649564; }.coefficient-scale i:nth-child(3) { background: var(--lime); }.coefficient-scale i:nth-child(4) { background: var(--amber); }.coefficient-scale i:nth-child(5) { background: var(--danger); }.coefficient-card p { color: var(--muted); font-size: .69rem; line-height: 1.85; }.coefficient-card p b { color: var(--lime); }.coefficient-card ul { display: grid; gap: .35rem; padding: 0; margin: 1rem 0 0; list-style: none; }.coefficient-card li { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .61rem; }.coefficient-card li b { color: #c8d5ce; font-weight: 500; }.coefficient-card li span { color: var(--cyan); }
.risk-name b { display: block; color: var(--ink); font-weight: 600; }.support-list { display: grid; gap: .6rem; margin-top: 1.15rem; }.support-line { display: flex; align-items: start; gap: .55rem; padding: .6rem 0; border-top: 1px solid var(--line); }.support-icon { color: var(--lime); font: .8rem "DM Mono", monospace; }.support-line b { display: block; color: var(--ink); font-size: .7rem; }.support-line small { display: block; color: var(--muted); font-size: .59rem; }

.table-heading { align-items: end; }.table-tools { display: flex; gap: .5rem; }.outline-button, .solid-button, .close-button { border: 1px solid var(--line-bright); padding: .58rem .75rem; background: transparent; color: var(--ink); font-size: .68rem; }.solid-button { color: var(--ground); border-color: var(--lime); background: var(--lime); }.outline-button:hover, .close-button:hover { border-color: var(--lime); color: var(--lime); }.table-intro { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: var(--dim); font-size: .62rem; }.table-intro b { color: var(--muted); }.desktop-table-scroll-hint { display: none; }.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: rgba(7,19,25,.72); }.table-wrap::-webkit-scrollbar { height: 9px; }.table-wrap::-webkit-scrollbar-thumb { background: #35544e; }.table-wrap::-webkit-scrollbar-track { background: #0b1b21; } table { width: 100%; min-width: 1140px; border-collapse: collapse; font-size: .68rem; } th { position: sticky; top: 0; z-index: 2; padding: .76rem .65rem; color: var(--muted); background: #11252b; border-bottom: 1px solid var(--line-bright); font: 500 .57rem/1.55 "DM Mono", monospace; letter-spacing: .04em; text-align: left; white-space: nowrap; } td { padding: .72rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr { transition: background .2s ease; } tbody tr:hover, tbody tr.selected { background: rgba(120,181,104,.08); } tbody tr.selected { box-shadow: inset 3px 0 var(--lime); } tbody tr.aid-row td:first-child { color: var(--ink); } tbody tr.water-row { background: rgba(255,255,255,.015); }.point-cell { min-width: 168px; }.point-cell b { display: block; font-size: .75rem; }.table-section-number { display: inline-block; margin-right: .38rem; color: var(--lime); font: .61rem "DM Mono", monospace; }.point-cell small, .cell-label { display: block; margin-top: .1rem; color: var(--dim); font: .54rem "DM Mono", monospace; }.mini-number { color: #dce7e1; font: .68rem "DM Mono", monospace; white-space: nowrap; }.mini-number em { color: var(--muted); font-style: normal; }.distance-cell { min-width: 90px; }.coefficient { display: inline-block; min-width: 34px; color: var(--lime); font: .7rem "DM Mono", monospace; }.coefficient-source { display: block; margin-top: .13rem; color: var(--dim); font-size: .54rem; }.split-time { color: #dce7e1; font: .72rem "DM Mono", monospace; white-space: nowrap; }.pace-small { display: block; margin-top: .12rem; color: var(--muted); font-size: .55rem; }.time-cell { min-width: 142px; }.time-main { color: var(--ink); font: .66rem "DM Mono", monospace; white-space: nowrap; }.time-sub { display: block; margin-top: .12rem; color: var(--dim); font-size: .56rem; }.cutoff-cell { min-width: 120px; }.cutoff-time { color: var(--muted); font: .58rem "DM Mono", monospace; }.margin { display: block; margin-top: .2rem; font: .68rem "DM Mono", monospace; }.margin.good { color: var(--lime); }.margin.warn { color: var(--amber); }.margin.danger { color: var(--danger); }.ops-badges { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 120px; }.ops-badge { padding: .18rem .28rem; color: var(--muted); border: 1px solid var(--line); font: .52rem "DM Mono", monospace; white-space: nowrap; }.ops-badge.drop, .ops-badge.pacer { color: var(--cyan); border-color: rgba(116,217,212,.35); }

.route-overview { padding-top: 28px; }.overview-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }.overview-heading .eyebrow { margin: 0; }.overview-heading > p:last-child { margin: 0; color: var(--muted); font-size: .65rem; }.route-overview-chart { min-height: 214px; padding: .45rem .25rem; border-top: 1px solid var(--line-bright); border-bottom: 1px solid var(--line); background: linear-gradient(100deg, rgba(17,43,46,.4), rgba(7,19,25,.14)); }.route-overview-chart svg { display: block; width: 100%; height: 214px; overflow: visible; }.route-overview-node { cursor: pointer; outline: none; }.route-overview-dot { transition: r .2s ease, opacity .2s ease; }.route-overview-node:hover .route-overview-dot, .route-overview-node:focus .route-overview-dot { opacity: 1; r: 16px; }.route-overview-node.selected .route-overview-dot { stroke: #f2ffcf; stroke-width: 3px; }.route-overview-number { fill: #07131a; font: 600 10px "DM Mono", monospace; pointer-events: none; }.route-overview-selected-label { fill: #c6f34a; font: 10px "DM Mono", monospace; pointer-events: none; }.route-overview-start, .route-overview-finish { fill: #91a39d; font: 9px "DM Mono", monospace; }.route-overview-detail { display: grid; grid-template-columns: minmax(220px, 1.2fr) 1fr 1fr; gap: .8rem; padding: .72rem .2rem 0; color: var(--muted); font: .62rem/1.6 "DM Mono", monospace; }.route-overview-detail b { color: var(--ink); font: 600 .7rem "Noto Sans JP", sans-serif; }.route-overview-detail span:last-child { color: var(--cyan); }

.race-card-panel { padding-top: 100px; }.table-section + .race-card-panel { padding-top: 34px; }.race-card-panel[hidden] { display: none; }.race-day-card { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line-bright); background: #0a181e; }.card-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 1.15rem 1.3rem; color: var(--muted); border-bottom: 1px solid var(--line); font: .64rem "DM Mono", monospace; }.card-header b { color: var(--lime); font-size: .8rem; }.card-stop { padding: 1rem 1.15rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.card-stop:nth-child(3n+1) { border-right: 0; }.card-stop b { display: block; color: var(--ink); font-size: .82rem; }.card-stop .card-distance { color: var(--cyan); font: .62rem "DM Mono", monospace; }.card-stop .card-time { margin-top: .55rem; color: var(--lime); font: .92rem "DM Mono", monospace; }.card-stop small { display: block; color: var(--muted); font-size: .57rem; }.card-note { color: var(--muted); font-size: .62rem; }

.community { display: grid; grid-template-columns: .88fr 1.12fr; gap: 4rem; align-items: center; margin-top: 126px; padding: 2.5rem; border: 1px solid var(--line); border-bottom-color: var(--lime); background: linear-gradient(125deg, rgba(77,112,62,.26), rgba(14,31,37,.94) 48%, rgba(20,45,52,.77)); }.community h2 { font-size: clamp(1.65rem, 2.9vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; }.community-copy > p:not(.eyebrow) { max-width: 460px; color: #afc0b8; font-size: .75rem; line-height: 1.9; }.community-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }.podcast-link, .ofuse-link { display: flex; align-items: center; gap: .8rem; min-height: 82px; padding: .9rem; border: 1px solid var(--line); text-decoration: none; transition: transform .2s ease, border .2s ease; }.podcast-link:hover, .ofuse-link:hover { transform: translateY(-2px); border-color: var(--lime); }.action-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: var(--ground); border-radius: 50%; background: var(--lime); font-size: 1.2rem; }.podcast-link.apple .action-icon { color: var(--cyan); background: transparent; border: 1px solid var(--cyan); }.podcast-link span:nth-child(2), .ofuse-link div { min-width: 0; }.podcast-link small, .ofuse-link small { display: block; color: var(--dim); font: .53rem "DM Mono", monospace; }.podcast-link b, .ofuse-link b { display: block; color: var(--ink); font-size: .68rem; }.podcast-link i, .ofuse-link i { margin-left: auto; color: var(--lime); font-style: normal; }.ofuse-link { grid-column: 1 / -1; min-height: 74px; background: rgba(0,0,0,.12); }.ofuse-link > span { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; color: var(--lime); border: 1px solid var(--lime); border-radius: 50%; }.ofuse-link p { margin: .12rem 0 0; color: var(--muted); font-size: .57rem; }
.footer { display: flex; justify-content: space-between; gap: 2rem; padding: 34px 0; color: var(--dim); font-size: .58rem; }.footer > div:first-child { display: flex; align-items: center; gap: .65rem; }.footer .brand-mark { width: 29px; height: 29px; font-size: .56rem; }.footer p { margin: 0; }.footer-copy { max-width: 740px; text-align: right; line-height: 1.8; }.footer-copy a { color: var(--muted); }

@media (max-width: 960px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem 0; }.metric:nth-child(3) { border-right: 0; }.metric:nth-child(4) { padding-left: 0; }.lab-grid { grid-template-columns: 260px 1fr; }.analysis-grid { grid-template-columns: 1fr 1fr; }.support-card { grid-column: 1 / -1; }.community { gap: 2rem; }.community-actions { grid-template-columns: 1fr; }.ofuse-link { grid-column: auto; }
}
@media (max-width: 720px) {
  .section-wrap, .topbar { width: min(100% - 32px, 1380px); }.topbar { min-height: 72px; }.topbar-meta span:not(.live-dot) { display: none; }.data-version { display: none !important; }.hero { grid-template-columns: 1fr; gap: 1.4rem; min-height: auto; padding: 64px 0 38px; }.hero h1 { font-size: clamp(2.85rem, 14vw, 4.4rem); }.hero-text { font-size: .8rem; }.hero-note { min-height: 200px; }.terrain-section { padding-top: 24px; }.section-heading { align-items: start; flex-direction: column; gap: .8rem; margin-bottom: 1.1rem; }.section-heading h2 { font-size: 1.55rem; }.terrain-heading { flex-direction: row; align-items: end; }.terrain-actions { gap: .5rem; }.angle-control { display: none; }.terrain-card { padding: .9rem .75rem .75rem; }.terrain-chart, .terrain-chart svg { min-height: 290px; height: 290px; }.terrain-legend { gap: .65rem; font-size: .55rem; }.terrain-tooltip { right: .75rem; bottom: 2.4rem; width: calc(100% - 1.5rem); font-size: .63rem; }.terrain-footnote { font-size: .52rem; }.pace-lab, .analysis-section, .table-section { padding-top: 82px; }.lab-grid { grid-template-columns: 1fr; }.controls-panel { border-right: 0; border-bottom: 1px solid var(--line); }.command-center { padding: 1rem; }.metric-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem 0; }.metric { padding-left: 0 !important; }.metric:nth-child(odd) { border-right: 1px solid var(--line); padding-right: .8rem; }.metric:nth-child(even) { padding-left: .8rem !important; border-right: 0; }.metric b { font-size: 1.25rem; }.timeline-head { display: block; }.timeline-caption { margin-top: .35rem; text-align: left; }.checkpoint-ribbon { grid-template-columns: repeat(2, 1fr); }.analysis-grid { grid-template-columns: 1fr; }.support-card { grid-column: auto; }.table-heading { flex-direction: column; align-items: start; }.table-tools { width: 100%; }.table-tools button { flex: 1; }.table-intro { display: block; line-height: 1.9; }.table-intro span { display: block; }.race-day-card { grid-template-columns: repeat(2, 1fr); }.card-stop:nth-child(3n+1) { border-right: 1px solid var(--line); }.card-stop:nth-child(2n+1) { border-right: 0; }.community { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 84px; padding: 1.4rem; }.footer { align-items: start; flex-direction: column; gap: 1rem; }.footer-copy { text-align: left; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; color: #0b1b1d; font-family: "Noto Sans JP", sans-serif; }.topbar, .hero, .terrain-section, .pace-lab, .analysis-section, .community, .footer, .table-tools, .table-intro { display: none !important; }.section-wrap { width: 100%; }.table-section { padding: 0; }.table-heading { display: block; }.table-heading .eyebrow { color: #426a38; }.table-heading h2 { color: #0b1b1d; }.table-wrap { overflow: visible; border-color: #9baaa1; background: #fff; } table { min-width: 0; font-size: 8px; } th { position: static; color: #30443b; background: #eef4eb; border-color: #b5c1b9; } td { border-color: #d3dbd5; }.point-cell b, .mini-number, .split-time, .time-main { color: #0b1b1d; }.race-card-panel[hidden] { display: block !important; }.race-card-panel { padding-top: 18px; }.race-day-card { border-color: #9baaa1; background: #fff; }.card-header, .card-stop { border-color: #ccd5ce; }.card-header, .card-stop b { color: #0b1b1d; }.card-stop .card-time { color: #3e7637; }.card-note, .close-button { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* Mobile-first interaction layer: rendered only where it replaces the dense desktop table. */
.mobile-edit-button, .mobile-race-ops, .mobile-bottom-nav, .mobile-split-list, .mobile-day-card-button, .mobile-race-card-section, .close-plan-sheet { display: none; }
.mobile-race-card-section[hidden] { display: none !important; }
.terrain-rotate-controls { display: flex; align-items: center; gap: .38rem; }
.terrain-rotate-controls button { min-height: 36px; padding: .35rem .55rem; color: var(--muted); border: 1px solid var(--line); background: rgba(7,19,25,.74); font: .59rem "DM Mono", monospace; }
.terrain-rotate-controls button:hover, .terrain-rotate-controls button:focus-visible { color: var(--lime); border-color: var(--lime); }
.terrain-gesture-hint { display: none; }
.terrain-point-chips { position: relative; z-index: 2; display: flex; gap: .42rem; margin-top: .45rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.terrain-point-chip { flex: 0 0 auto; min-height: 34px; padding: .35rem .48rem; color: var(--muted); border: 1px solid var(--line); background: rgba(4,14,19,.72); font: .56rem "Noto Sans JP", sans-serif; white-space: nowrap; }
.terrain-point-chip span { margin-right: .24rem; color: var(--cyan); font-family: "DM Mono", monospace; }
.terrain-point-chip.active { color: var(--ink); border-color: var(--lime); background: rgba(198,243,74,.12); }
.terrain-chart { touch-action: auto; cursor: default; user-select: none; }
.terrain-chart .terrain-marker-hit { pointer-events: all; }
.terrain-chart .terrain-marker-dot { pointer-events: none; }
.terrain-chart .terrain-marker:hover .terrain-marker-hit, .terrain-chart .terrain-marker:focus .terrain-marker-hit, .terrain-chart .terrain-marker.selected .terrain-marker-hit { r: 22px; fill: transparent; }
.terrain-chart .terrain-marker:hover .terrain-marker-dot, .terrain-chart .terrain-marker:focus .terrain-marker-dot, .terrain-chart .terrain-marker.selected .terrain-marker-dot { fill: var(--lime); }
.terrain-chart .marker-label-plate { fill: rgba(6,19,24,.88); stroke: rgba(198,243,74,.35); }
.terrain-chart .selected-axis { fill: var(--cyan); font-size: 8px; }
.terrain-tooltip span { display: block; color: var(--cyan); font: .54rem "DM Mono", monospace; letter-spacing: .06em; }
.mobile-focus-status.neutral { color: var(--muted); border-color: var(--line); }
.mobile-focus-status.good { color: var(--lime); border-color: rgba(198,243,74,.45); }
.mobile-focus-status.warn { color: var(--amber); border-color: rgba(244,186,72,.45); }
.mobile-focus-status.danger { color: var(--danger); border-color: rgba(240,113,101,.48); }

@media (max-width: 720px) {
  html { scroll-padding-top: 20px; scroll-padding-bottom: 88px; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.plan-sheet-open { overflow: hidden; }
  button, select, input { font-size: 16px; }
  .topbar { position: relative; z-index: 5; min-height: 64px; }
  .header-start { gap: .48rem; }
  .view-mode-toggle button { min-height: 34px; padding: .32rem .4rem; font-size: .52rem; }
  .brand { font-size: .54rem; }
  .brand-mark { width: 34px; height: 34px; }
  .topbar-meta { margin-left: auto; }
  .mobile-edit-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: .65rem; padding: .45rem .72rem; color: var(--ground); border: 1px solid var(--lime); background: var(--lime); font: 600 .62rem "Noto Sans JP", sans-serif; white-space: nowrap; }
  .hero { display: block; padding: 30px 0 28px; }
  .hero-copy .eyebrow, .hero-text, .hero-tags, .hero-note { display: none; }
  .hero h1 { max-width: 9ch; margin: 0; font-size: clamp(2.2rem, 11.4vw, 3.3rem); line-height: 1.15; }
  .mobile-race-ops { display: block; margin-top: 1.25rem; }
  .mobile-focus-head { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font: .58rem "DM Mono", monospace; letter-spacing: .08em; }
  .mobile-focus-kicker { display: flex; justify-content: space-between; align-items: center; margin: .5rem 0 .38rem; color: var(--muted); font: .7rem "Noto Sans JP", sans-serif; }
  .mobile-focus-kicker span { color: var(--cyan); font: .5rem "DM Mono", monospace; }
  .mobile-focus-rail { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: stretch; gap: .22rem; }
  .mobile-focus-card { min-width: 0; overflow: hidden; border: 1px solid var(--line-bright); background: linear-gradient(135deg, rgba(33,68,65,.84), rgba(8,23,29,.95)); box-shadow: 0 12px 30px rgba(0,0,0,.16); cursor: ew-resize; touch-action: pan-y; user-select: none; }
  .mobile-focus-preview { display: grid; grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; padding: .45rem .16rem; overflow: hidden; color: var(--muted); border: 1px solid var(--line); background: rgba(10,29,35,.55); opacity: .42; text-align: center; transform: scale(.94); transition: opacity .2s ease, transform .2s ease; }
  .mobile-focus-preview:not(:disabled):active { opacity: .75; transform: scale(.98); }
  .mobile-focus-preview:disabled { opacity: .16; }
  .mobile-focus-preview-label { display: block; color: var(--cyan); font: .45rem "DM Mono", monospace; letter-spacing: .06em; }
  .mobile-focus-preview b { display: block; margin-top: .36rem; color: var(--ink); font: .7rem "DM Mono", monospace; }
  .mobile-focus-preview b small { margin-left: .04rem; font-size: .45rem; }
  .mobile-focus-preview-name { display: -webkit-box; margin-top: .48rem; overflow: hidden; color: var(--muted); font-size: .47rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .mobile-focus-title { display: flex; align-items: center; gap: .45rem; min-height: 42px; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
  .mobile-focus-title > span:first-child { color: var(--lime); font: .62rem "DM Mono", monospace; }
  .mobile-focus-title b { min-width: 0; overflow: hidden; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-focus-status { flex: 0 0 auto; margin-left: auto; padding: .18rem .32rem; border: 1px solid; font: .53rem "DM Mono", monospace; white-space: nowrap; }
  .mobile-focus-distance { display: flex; align-items: baseline; gap: .4rem; padding: .68rem .58rem .52rem; }
  .mobile-focus-distance b { color: var(--lime); font: 600 2rem/1 "DM Mono", monospace; letter-spacing: -.12em; }
  .mobile-focus-distance small { margin-left: .12rem; font-size: .75rem; letter-spacing: 0; }
  .mobile-focus-distance span { color: var(--muted); font: .65rem "DM Mono", monospace; }
  .mobile-focus-time { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .mobile-focus-time span { display: grid; gap: .18rem; padding: .5rem .58rem; }
  .mobile-focus-time span + span { border-left: 1px solid var(--line); }
  .mobile-focus-time small { color: var(--dim); font: .52rem "DM Mono", monospace; letter-spacing: .08em; }
  .mobile-focus-time b { display: grid; gap: .08rem; color: var(--ink); font: .82rem "DM Mono", monospace; }
  .mobile-focus-time b em { color: var(--cyan); font: normal .53rem "DM Mono", monospace; }
  .mobile-focus-segment { display: grid; gap: .25rem; padding: .52rem .58rem .62rem; color: var(--muted); border-top: 1px solid var(--line); font: .54rem/1.45 "DM Mono", monospace; }
  .mobile-focus-segment i { color: var(--dim); font-style: normal; }
  .mobile-focus-segment b { color: var(--cyan); font-weight: 500; }
  .terrain-section { padding-top: 72px; }
  .terrain-heading { display: block; }
  .terrain-heading h2 { margin: .2rem 0 .7rem; }
  .terrain-card { padding: .85rem .7rem .78rem; }
  .terrain-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem .55rem; padding-bottom: .5rem; font-size: .52rem; }
  .terrain-gesture-hint { display: block; position: relative; z-index: 1; margin: .1rem 0 .45rem; color: var(--cyan); font: .55rem "DM Mono", monospace; }
  .terrain-chart, .terrain-chart svg { min-height: 254px; height: 254px; }
  .terrain-chart { overflow: hidden; }
  .terrain-point-chips { margin-top: .52rem; padding-bottom: .1rem; }
  .terrain-point-chip { min-height: 40px; padding: .38rem .5rem; font-size: .6rem; }
  .terrain-tooltip { position: relative; right: auto; bottom: auto; width: auto; min-height: 0; margin-top: .7rem; padding: .68rem .72rem; font-size: .62rem; line-height: 1.7; }
  .terrain-footnote { margin-top: .6rem; font-size: .5rem; line-height: 1.65; }
  .pace-lab { padding-top: 78px; }
  .lab-grid { display: block; border: 1px solid var(--line); }
  .controls-panel { display: none; position: fixed; z-index: 80; inset: auto 0 0; max-height: min(84dvh, 720px); padding: 1rem max(16px, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; border: 1px solid var(--line-bright); background: #0b1d23; box-shadow: 0 -18px 48px rgba(0,0,0,.55); }
  .controls-panel.is-open { display: block; }
  .controls-panel::before { content: "計画を編集"; display: block; margin: 0 0 1rem; color: var(--lime); font: .68rem "DM Mono", monospace; letter-spacing: .08em; }
  .controls-panel .control-title:first-of-type { margin-top: 0; }
  .field-label { gap: .48rem; margin-top: 1.15rem; font-size: .76rem; }
  .field-label select { height: 48px; padding: 0 .75rem; font-size: 16px; }
  .time-input { height: 54px; }
  .reset-button, .close-plan-sheet { min-height: 48px; font-size: .75rem; }
  .close-plan-sheet { display: block; position: sticky; bottom: -1rem; width: 100%; margin-top: .65rem; color: var(--ground); border: 1px solid var(--lime); background: var(--lime); }
  .command-center { padding: .9rem; }
  .race-strip { gap: .45rem .8rem; padding-bottom: .8rem; font-size: .57rem; }
  .metric-grid { gap: .7rem 0; margin: 1rem 0; }
  .metric { min-height: 66px; }
  .timeline-panel { padding: .9rem; }
  .formula-note { margin-top: .85rem; }
  .analysis-section { padding-top: 78px; }
  .analysis-card { min-height: 0; padding: 1.05rem; }
  .table-section { padding-top: 78px; }
  .hero + .table-section { padding-top: 52px; }
  .table-tools { display: none; }
  .table-intro, .table-wrap { display: none; }
  .mobile-day-card-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin: .7rem 0 .15rem; padding: .55rem .75rem; color: var(--lime); border: 1px solid rgba(198,243,74,.48); background: linear-gradient(100deg, rgba(50,91,66,.42), rgba(7,22,28,.84)); font: 600 .67rem "Noto Sans JP", sans-serif; text-align: left; }
  .mobile-day-card-button span { font: 1rem/1 "DM Mono", monospace; }
  .mobile-split-list { display: grid; gap: .52rem; }
  .mobile-split-card { overflow: hidden; border: 1px solid var(--line); background: rgba(9,25,31,.78); }
  .mobile-split-card.selected { border-color: rgba(198,243,74,.7); box-shadow: inset 3px 0 var(--lime); }
  .mobile-split-select { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; width: 100%; min-height: 48px; padding: .48rem .58rem; color: inherit; border: 0; background: transparent; text-align: left; }
  .mobile-split-index { color: var(--lime); font: .58rem "DM Mono", monospace; }
  .mobile-split-place { min-width: 0; }
  .mobile-split-place b { display: block; overflow: hidden; color: var(--ink); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-split-place small { display: block; margin-top: .14rem; color: var(--muted); font: .53rem "DM Mono", monospace; }
  .mobile-split-goal { color: var(--lime) !important; text-align: right; white-space: nowrap; }
  .mobile-split-goal i { margin-right: .18rem; color: var(--dim); font-style: normal; }
  .mobile-split-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .38rem 0; padding: .52rem .58rem .58rem; border-top: 1px solid var(--line); background: rgba(4, 15, 20, .22); }
  .mobile-split-stats > span { display: grid; min-width: 0; gap: .08rem; padding: 0 .34rem; border-right: 1px solid var(--line); }
  .mobile-split-stats > span:nth-child(4n) { border-right: 0; }
  .mobile-split-stats > span:nth-child(n + 5) { border-top: 1px solid rgba(184,216,199,.1); padding-top: .38rem; }
  .mobile-split-stats small { overflow: hidden; color: var(--dim); font: .47rem "DM Mono", monospace; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-split-stats b { overflow: hidden; color: var(--cyan); font: 600 .66rem/1.2 "DM Mono", monospace; letter-spacing: -.065em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-split-stats > span:nth-child(2) b { color: var(--ink); }
  .mobile-split-stats > span:nth-child(7) b { color: var(--lime); }
  .mobile-split-stats > span:nth-child(8) b { color: var(--lime); }
  .mobile-split-details { display: grid; gap: .22rem; padding: .5rem .6rem .65rem; color: var(--muted); border-top: 1px solid var(--line); font: .53rem/1.55 "DM Mono", monospace; }
  .mobile-split-details i { color: var(--dim); font-style: normal; }
  .mobile-split-details b { color: var(--lime); font-weight: 500; }
  .route-overview { padding-top: 24px; }
  .overview-heading { display: block; margin-bottom: .55rem; }
  .overview-heading > p:last-child { margin-top: .24rem; font-size: .57rem; }
  .route-overview-chart { min-height: 174px; padding: .18rem 0; }
  .route-overview-chart svg { height: 174px; }
  .route-overview-detail { grid-template-columns: 1fr; gap: .16rem; padding-top: .62rem; font-size: .56rem; }
  .route-overview-detail b { font-size: .64rem; }
  .race-card-panel { padding-top: 78px; }
  .table-section + .race-card-panel { padding-top: 24px; }
  .race-day-card { grid-template-columns: 1fr; }
  .card-header { display: grid; gap: .35rem; padding: .85rem; }
  .card-stop, .card-stop:nth-child(2n+1), .card-stop:nth-child(3n+1) { padding: .78rem .85rem; border-right: 0; }
  .mobile-race-card-section { display: block; padding-top: 28px; }
  .mobile-card-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
  .mobile-card-section-head .eyebrow { margin-bottom: .2rem; font-size: .51rem; }
  .mobile-card-section-head h2 { font-size: 1rem; }
  .mobile-card-section-head .close-button { flex: 0 0 auto; }
  .mobile-race-day-card { width: 100%; }
  .mobile-card-note { margin: .55rem .15rem 0; color: var(--muted); font-size: .56rem; line-height: 1.65; }
  .wallpaper-card { position: relative; overflow: hidden; padding: .72rem; border: 1px solid rgba(184,216,199,.58); background: radial-gradient(circle at 80% 7%, rgba(116,217,212,.17), transparent 34%), linear-gradient(145deg, #10272c, #07151b 58%, #0c2326); box-shadow: 0 16px 34px rgba(0,0,0,.25); }
  .wallpaper-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .2; background-image: linear-gradient(rgba(184,216,199,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(184,216,199,.16) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
  .wallpaper-card > * { position: relative; z-index: 1; }
  .wallpaper-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .16rem .55rem; align-items: end; padding-bottom: .48rem; border-bottom: 1px solid rgba(184,216,199,.32); }
  .wallpaper-head span { color: var(--muted); font: .46rem "DM Mono", monospace; letter-spacing: .075em; }
  .wallpaper-head b { color: var(--lime); font: 700 .92rem "DM Mono", monospace; letter-spacing: -.06em; }
  .wallpaper-head i { grid-column: 1 / -1; color: var(--ink); font: normal .68rem "DM Mono", monospace; }
  .wallpaper-start { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0 .5rem; color: var(--cyan); font: .5rem "DM Mono", monospace; }
  .wallpaper-start span:last-child { color: var(--muted); text-align: right; }
  .wallpaper-static-layout { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: .52rem; align-items: stretch; }
  .wallpaper-profile { min-width: 0; border: 1px solid rgba(184,216,199,.28); background: rgba(4,16,21,.48); }
  .wallpaper-profile-vertical { display: flex; flex-direction: column; padding: .42rem .28rem; }
  .wallpaper-profile-vertical > div { display: flex; align-items: start; justify-content: space-between; min-height: 43px; }
  .wallpaper-profile-vertical span { color: var(--lime); font: .48rem "DM Mono", monospace; letter-spacing: .08em; writing-mode: vertical-rl; }
  .wallpaper-profile-vertical i { color: var(--dim); font: normal .38rem/1.35 "DM Mono", monospace; text-align: right; }
  .wallpaper-profile-vertical svg { display: block; flex: 1 1 auto; width: 100%; min-height: 438px; margin-top: .12rem; }
  .wallpaper-profile-marker { vector-effect: non-scaling-stroke; }
  .wallpaper-profile-index { fill: var(--lime); font: 700 7.5px "DM Mono", monospace; letter-spacing: -.06em; paint-order: stroke; pointer-events: none; stroke: #07171d; stroke-width: 2.8px; stroke-linejoin: round; }
  .wallpaper-all-areas { min-width: 0; border-top: 1px solid rgba(184,216,199,.3); }
  .wallpaper-all-areas-head { display: flex; justify-content: space-between; gap: .35rem; padding: .42rem 0 .28rem; }
  .wallpaper-all-areas-head span, .wallpaper-all-areas-head i { color: var(--lime); font: .46rem "DM Mono", monospace; letter-spacing: .06em; }
  .wallpaper-all-areas-head i { color: var(--cyan); font-style: normal; }
  .wallpaper-area-row { display: grid; grid-template-columns: 19px minmax(0, 1fr) 40px 62px; gap: .12rem .24rem; align-items: center; min-height: 34px; padding: .26rem 0; border-top: 1px solid rgba(184,216,199,.16); }
  .wallpaper-area-index { color: var(--lime); font: .47rem "DM Mono", monospace; }
  .wallpaper-area-main { min-width: 0; }
  .wallpaper-area-main b { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: .52rem; line-height: 1.22; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .wallpaper-area-distance { color: var(--cyan); font: 500 .46rem "DM Mono", monospace; letter-spacing: -.06em; text-align: right; white-space: nowrap; }
  .wallpaper-area-arrival { color: var(--lime); font: .46rem "DM Mono", monospace; letter-spacing: -.075em; text-align: right; white-space: nowrap; }
  .community { margin-top: 74px; }
  .mobile-bottom-nav { position: fixed; z-index: 70; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line-bright); background: rgba(6,18,23,.96); box-shadow: 0 -8px 30px rgba(0,0,0,.26); backdrop-filter: blur(16px); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { display: grid; place-items: center; min-height: 62px; padding: .35rem .15rem; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: transparent; font: .55rem "Noto Sans JP", sans-serif; text-decoration: none; }
  .mobile-bottom-nav button { color: var(--lime); }
  .mobile-bottom-nav > :last-child { border-right: 0; }

  /* The PC mode keeps the complete split table available even on a phone. */
  body.view-mode-desktop { padding-bottom: 0; }
  body.view-mode-desktop .mobile-split-list, body.view-mode-desktop .mobile-bottom-nav { display: none; }
  body.view-mode-desktop .table-tools { display: flex; }
  body.view-mode-desktop .table-intro { display: block; }
  body.view-mode-desktop .desktop-table-scroll-hint { display: block; margin-bottom: .18rem; color: var(--cyan); }
  body.view-mode-desktop .table-swipe-hint { display: none; }
  body.view-mode-desktop .table-wrap { display: block; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  body.view-mode-desktop #pace-table { touch-action: pan-x pan-y; }
  body.view-mode-desktop .table-plan-controls.controls-panel { display: grid; position: static; inset: auto; grid-template-columns: 1fr; align-items: stretch; gap: .75rem; max-height: none; margin: 0 0 .9rem; padding: .9rem 1rem; overflow: visible; border: 1px solid var(--line); background: rgba(7, 18, 23, .68); box-shadow: none; }
  body.view-mode-desktop .table-plan-controls.controls-panel::before { display: none; }
  body.view-mode-desktop .table-plan-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  body.view-mode-desktop .table-plan-controls .field-label { margin-top: 0; font-size: .69rem; }
  body.view-mode-desktop .table-plan-controls .field-label select { height: 48px; padding: 0 .55rem; font-size: 16px; }
  body.view-mode-desktop .table-plan-controls .goal-swipe-control { grid-template-columns: 52px minmax(0, 1fr) 52px; margin-top: 0; }
  body.view-mode-desktop .table-plan-controls .goal-swipe-control > button, body.view-mode-desktop .table-plan-controls .goal-swipe-zone { min-height: 68px; }
  body.view-mode-desktop .table-plan-controls .goal-swipe-zone b { font-size: 1.55rem; }
  body.view-mode-desktop .table-plan-controls .goal-swipe-zone small { margin-top: .12rem; font-size: .53rem; white-space: normal; }
  body.view-mode-desktop .table-plan-controls .reset-button { width: 100%; min-height: 48px; margin-top: 0; padding: .45rem .65rem; white-space: nowrap; }
  body.view-mode-desktop .table-plan-controls .close-plan-sheet { display: none; }
}

/* Desktop users can inspect the compact, race-day card layout without resizing a browser. */
@media (min-width: 721px) {
  body.view-mode-mobile .table-wrap, body.view-mode-mobile .table-intro, body.view-mode-mobile .table-tools { display: none; }
  body.view-mode-mobile .table-swipe-hint { display: block; width: min(100%, 560px); margin: .62rem auto .48rem; color: var(--cyan); font: .55rem "DM Mono", monospace; text-align: center; }
  body.view-mode-mobile .mobile-split-list { display: grid; width: min(100%, 560px); gap: .52rem; margin-inline: auto; }
  body.view-mode-mobile .mobile-split-card { overflow: hidden; border: 1px solid var(--line); background: rgba(9,25,31,.78); }
  body.view-mode-mobile .mobile-split-card.selected { border-color: rgba(198,243,74,.7); box-shadow: inset 3px 0 var(--lime); }
  body.view-mode-mobile .mobile-split-select { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; width: 100%; min-height: 48px; padding: .48rem .58rem; color: inherit; border: 0; background: transparent; text-align: left; }
  body.view-mode-mobile .mobile-split-index { color: var(--lime); font: .58rem "DM Mono", monospace; }
  body.view-mode-mobile .mobile-split-place { min-width: 0; }
  body.view-mode-mobile .mobile-split-place b { display: block; overflow: hidden; color: var(--ink); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  body.view-mode-mobile .mobile-split-place small { display: block; margin-top: .14rem; color: var(--muted); font: .53rem "DM Mono", monospace; }
  body.view-mode-mobile .mobile-split-goal { color: var(--lime) !important; text-align: right; white-space: nowrap; }
  body.view-mode-mobile .mobile-split-goal i { margin-right: .18rem; color: var(--dim); font-style: normal; }
  body.view-mode-mobile .mobile-split-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .38rem 0; padding: .52rem .58rem .58rem; border-top: 1px solid var(--line); background: rgba(4, 15, 20, .22); }
  body.view-mode-mobile .mobile-split-stats > span { display: grid; min-width: 0; gap: .08rem; padding: 0 .34rem; border-right: 1px solid var(--line); }
  body.view-mode-mobile .mobile-split-stats > span:nth-child(4n) { border-right: 0; }
  body.view-mode-mobile .mobile-split-stats > span:nth-child(n + 5) { border-top: 1px solid rgba(184,216,199,.1); padding-top: .38rem; }
  body.view-mode-mobile .mobile-split-stats small { overflow: hidden; color: var(--dim); font: .47rem "DM Mono", monospace; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
  body.view-mode-mobile .mobile-split-stats b { overflow: hidden; color: var(--cyan); font: 600 .66rem/1.2 "DM Mono", monospace; letter-spacing: -.065em; text-overflow: ellipsis; white-space: nowrap; }
  body.view-mode-mobile .mobile-split-stats > span:nth-child(2) b { color: var(--ink); }
  body.view-mode-mobile .mobile-split-stats > span:nth-child(7) b, body.view-mode-mobile .mobile-split-stats > span:nth-child(8) b { color: var(--lime); }
  body.view-mode-mobile .mobile-split-details { display: grid; gap: .22rem; padding: .5rem .6rem .65rem; color: var(--muted); border-top: 1px solid var(--line); font: .53rem/1.55 "DM Mono", monospace; }
  body.view-mode-mobile .mobile-split-details i { color: var(--dim); font-style: normal; }
}

/* The goal is adjusted directly from the split sheet: one clear gesture, no separate planner. */
@media (min-width: 721px) {
  .table-plan-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr) auto;
    align-items: end;
    gap: .85rem;
    margin: 0 0 .9rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: rgba(7, 18, 23, .68);
  }
  .table-plan-selects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .table-plan-controls .field-label { margin: 0; }
  .table-plan-controls .field-label select { height: 38px; font-size: .68rem; }
  .table-plan-controls .reset-button { width: auto; min-height: 38px; margin: 0; padding: .45rem .65rem; white-space: nowrap; }
  .table-plan-controls .close-plan-sheet { display: none; }
}

.goal-swipe-control { position: relative; display: grid; grid-template-columns: 45px minmax(0, 1fr) 45px; align-items: stretch; min-width: 0; }
.goal-swipe-control > button { min-height: 58px; color: var(--lime); border: 1px solid var(--line); background: rgba(6, 19, 24, .85); font: 500 .68rem "DM Mono", monospace; }
.goal-swipe-control > button:first-child { border-right: 0; }
.goal-swipe-control > button:last-of-type { border-left: 0; }
.goal-swipe-control > button:hover, .goal-swipe-control > button:focus-visible { color: var(--ground); border-color: var(--lime); background: var(--lime); }
.goal-swipe-zone { display: grid; place-content: center; min-width: 0; min-height: 58px; padding: .3rem .6rem; overflow: hidden; color: var(--muted); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(40, 79, 67, .52), rgba(8, 24, 29, .92)); cursor: ew-resize; text-align: center; touch-action: pan-y; user-select: none; }
.goal-swipe-zone:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.goal-swipe-zone span { color: var(--dim); font: .51rem "DM Mono", monospace; letter-spacing: .12em; }
.goal-swipe-zone b { color: var(--ink); font: 600 1.3rem/1.05 "DM Mono", monospace; letter-spacing: -.08em; }
.goal-swipe-zone small { overflow: hidden; color: var(--cyan); font: .46rem/1.3 "Noto Sans JP", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.mobile-focus-card, .mobile-split-list, #pace-table, .goal-swipe-zone { will-change: transform; }
.swipe-reward-later { animation: swipe-reward-later .46s cubic-bezier(.2,.82,.28,1); }
.swipe-reward-earlier { animation: swipe-reward-earlier .46s cubic-bezier(.2,.82,.28,1); }
@keyframes swipe-reward-later { 0% { transform: translateX(0) scale(1); } 36% { transform: translateX(10px) scale(1.012); box-shadow: 0 0 0 1px rgba(198,243,74,.65), 0 0 26px rgba(198,243,74,.18); } 100% { transform: translateX(0) scale(1); } }
@keyframes swipe-reward-earlier { 0% { transform: translateX(0) scale(1); } 36% { transform: translateX(-10px) scale(1.012); box-shadow: 0 0 0 1px rgba(116,217,212,.72), 0 0 26px rgba(116,217,212,.18); } 100% { transform: translateX(0) scale(1); } }
.swipe-feedback { position: fixed; z-index: 110; bottom: calc(78px + env(safe-area-inset-bottom)); left: 50%; display: flex; align-items: center; gap: .32rem; min-height: 34px; padding: .45rem .68rem; color: var(--ground); border: 1px solid var(--lime); background: var(--lime); box-shadow: 0 12px 28px rgba(0,0,0,.34); font: 600 .62rem "DM Mono", monospace; letter-spacing: -.04em; opacity: 0; pointer-events: none; transform: translate(-50%, 14px) scale(.94); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.82,.28,1); }
.swipe-feedback::before { color: var(--ground); font-size: .9rem; line-height: 1; }
.swipe-feedback.is-earlier { color: var(--ground); border-color: var(--cyan); background: var(--cyan); }
.swipe-feedback.is-later::before { content: "→"; }
.swipe-feedback.is-earlier::before { content: "←"; }
.swipe-feedback.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.table-swipe-hint { display: none; }
.mobile-split-list, #pace-table { touch-action: pan-y; }

@media (max-width: 720px) {
  .table-plan-controls .table-plan-selects { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .7rem; }
  .table-plan-controls .field-label { margin-top: 0; }
  .table-plan-controls .goal-swipe-control { margin-top: 1rem; grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .goal-swipe-control > button, .goal-swipe-zone { min-height: 68px; }
  .goal-swipe-zone b { font-size: 1.55rem; }
  .goal-swipe-zone small { margin-top: .12rem; font-size: .53rem; white-space: normal; }
  .table-swipe-hint { display: block; margin: .62rem 0 .48rem; color: var(--cyan); font: .55rem "DM Mono", monospace; letter-spacing: -.02em; text-align: center; }
  .table-plan-controls .reset-button { width: 100%; margin-top: .8rem; }
}

/* Color semantics: lime = plan, goals and selection; cyan = segment and course data. */
.color-key { display: flex; flex-wrap: wrap; gap: .36rem .82rem; margin: 0 0 .58rem; color: var(--dim); font: .52rem/1.35 "DM Mono", monospace; }
.color-key span { display: inline-flex; align-items: center; gap: .28rem; }
.color-key i { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.color-key-plan { color: var(--lime); }
.color-key-data { color: var(--cyan); }
.color-key-caution { color: var(--amber); }
.color-key-caution i { background: linear-gradient(135deg, var(--amber) 0 50%, var(--danger) 50% 100%); }

.mini-number, .coefficient, .split-time, .pace-small { color: var(--cyan); }
.time-main { color: var(--lime); }
.time-sub { color: var(--muted); }
.cell-label .plan-value { color: var(--lime); font-weight: 500; }
.mobile-focus-time b { color: var(--lime); }
.mobile-focus-time b em { color: var(--muted); }
.mobile-focus-kicker span, .mobile-focus-preview-label, .goal-swipe-zone small, .table-swipe-hint { color: var(--lime); }
.mobile-split-stats > span:nth-child(1) b,
.mobile-split-stats > span:nth-child(2) b,
.mobile-split-stats > span:nth-child(7) b { color: var(--lime); }
.mobile-split-stats > span:nth-child(8) b { color: var(--cyan); }
body.view-mode-mobile .mobile-split-stats > span:nth-child(1) b,
body.view-mode-mobile .mobile-split-stats > span:nth-child(2) b,
body.view-mode-mobile .mobile-split-stats > span:nth-child(7) b { color: var(--lime); }
body.view-mode-mobile .mobile-split-stats > span:nth-child(8) b { color: var(--cyan); }

@keyframes swipe-reward-earlier { 0% { transform: translateX(0) scale(1); } 36% { transform: translateX(-10px) scale(1.012); box-shadow: 0 0 0 1px rgba(198,243,74,.65), 0 0 26px rgba(198,243,74,.18); } 100% { transform: translateX(0) scale(1); } }
.swipe-feedback.is-earlier { color: var(--ground); border-color: var(--lime); background: var(--lime); }