main.search.site:not(.home) .hero { padding-block: 8px clamp(24px, 3vw, 36px); } main.search.site:not(.home) .hero-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; } main.search.site:not(.home) .hero .lead { margin: 16px 0 0; } main.search.site:not(.home) .hero h1 { margin-top: 4px; } main.search.site:not(.home) .today-answer { margin-top: 20px; } main.search.site:not(.home) .ans-row { display: flex; align-items: center; gap: 18px; } main.search.site:not(.home) .today-answer .big { white-space: nowrap; } main.search.site:not(.home) .ans-title { display: grid; gap: 6px; min-width: 0; } main.search.site:not(.home) .ans-name { font: var(--display-em-style, italic) var(--display-weight, 400) clamp(30px, 6vw, 44px)/1.05 var(--display, var(--serif)); font-variation-settings: var(--display-axes, normal); color: var(--ink); } main.search.site:not(.home) .ans-pos { justify-self: start; } main.search.site:not(.home) .today-answer .ans-sub { margin: 4px 0 6px; font-size: 18px; line-height: 1.5; } main.search.site:not(.home) .trk-svg { width: 100%; max-width: 360px; height: auto; margin: 4px 0 0; } main.search.site:not(.home) .trk-svg .trk { fill: var(--c-base); } main.search.site:not(.home) .trk-svg .trk-rest { fill: var(--stone-2); } main.search.site:not(.home) .trk-svg .trk-now { fill: var(--c-hi); } main.search.site:not(.home) .hero-still { display: block; margin: 4px auto 0; width: min(72%, 280px); } main.search.site:not(.home) .hero-still figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); } main.search.site:not(.home) .hero-still .pic { width: 100%; } main.search.site:not(.home) .op-stand { object-position: center 6%; } main.search.site:not(.home) .op-seat { object-position: center 22%; } main.search.site:not(.home) .op-hero-seat { object-position: center 24%; } @media (min-width: 860px) { main.search.site:not(.home) .hero { padding-top: 12px; } main.search.site:not(.home) .hero-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: center; } main.search.site:not(.home) .hero-still { margin: 0; width: 100%; } } main.search.site:not(.home) .before { margin-top: 14px; display: grid; gap: 10px; } @media (min-width: 900px) { main.search.site:not(.home) .before { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; } } main.search.site:not(.home) .safety { min-height: 52px; padding: 8px 16px 8px 14px; gap: 10px; } main.search.site:not(.home) .safety .row p { font-size: 17px; line-height: 1.45; } main.search.site:not(.home) .pl .seg-today { fill: var(--c-hi); } main.search.site:not(.home) .chart .seg-walkon { fill: var(--accent-soft); stroke: var(--c-hi); stroke-width: 1.5; stroke-dasharray: 5 4; } main.search.site:not(.home) .chart .seg-stretch { stroke: var(--c-2); stroke-width: 1; } main.search.site:not(.home) .chart .seg-rest { fill: var(--stone-2); stroke: var(--c-2); stroke-width: 1.5; stroke-dasharray: 3 3; } main.search.site:not(.home) .pl .seg-base { fill: var(--c-base); } main.search.site:not(.home) .pl .today-band { fill: color-mix(in srgb, var(--stone-2) 80%, var(--line)); } main.search.site:not(.home) .pl .dn { font-weight: 600; fill: var(--ink); } main.search.site:not(.home) .chart .hatch-bg { fill: var(--c-base); } main.search.site:not(.home) .chart .hatch-line { stroke: var(--c-2); stroke-width: 2; } main.search.site:not(.home) .legend .k.k-walkon { background: var(--accent-soft); outline: 1.5px dashed var(--c-hi); outline-offset: -1.5px; } main.search.site:not(.home) .legend .k.k-stretch { background: repeating-linear-gradient(45deg, var(--c-base) 0 3px, var(--c-2) 3px 5px); box-shadow: inset 0 0 0 1px var(--c-2); } main.search.site:not(.home) .legend .k.k-rest { background: var(--stone-2); box-shadow: inset 0 0 0 1.5px var(--c-2); } main.search.site:not(.home) .numbers summary { min-height: 48px; } main.search.site:not(.home) .plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } main.search.site:not(.home) .plan-fig { max-width: 520px; width: 100%; } main.search.site:not(.home) .weeks { display: grid; gap: 24px; align-content: start; } main.search.site:not(.home) .weeks li { padding: 0; } main.search.site:not(.home) .weeks li.now h3 { color: var(--accent); } main.search.site:not(.home) .weeks .wk { font-size: 15px; font-weight: 600; color: var(--accent); } main.search.site:not(.home) .weeks h3 { margin: 2px 0 6px; font: var(--display-weight, 400) 32px/1.1 var(--display-s, var(--display, var(--serif))); } main.search.site:not(.home) .weeks p { margin: 0 0 6px; font-size: 17px; line-height: 1.5; } main.search.site:not(.home) .weeks .note { margin: 0; font-size: 15px; } @media (min-width: 900px) { main.search.site:not(.home) .plan-grid { grid-template-columns: 520px minmax(0, 1fr); gap: 40px; } } main.search.site:not(.home) .moves { display: grid; gap: clamp(40px, 5vw, 56px); margin: 28px 0 0; } main.search.site:not(.home) h2 + .moves { margin-top: 0; } main.search.site:not(.home) #stretch, main.search.site:not(.home) #walkon { margin-top: 56px; } main.search.site:not(.home) .move { display: grid; gap: 16px; scroll-margin-top: 80px; } main.search.site:not(.home) .move header { display: flex; gap: 14px; align-items: center; } main.search.site:not(.home) .badge { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--paper); font: 700 20px/1 var(--sans); } main.search.site:not(.home) .badge-soft { background: var(--accent-soft); color: var(--ink); } main.search.site:not(.home) .move h3, main.search.site:not(.home) .walkon h3 { margin: 0; font: var(--display-weight, 400) clamp(28px, 6vw, 34px)/1.1 var(--display-s, var(--display, var(--serif))); } main.search.site:not(.home) .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; } main.search.site:not(.home) .dose { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } main.search.site:not(.home) .move .tag { min-height: 28px; padding: 0 12px; background: var(--stone-2); font-weight: 400; color: var(--text); } main.search.site:not(.home) .stills { max-width: 300px; } main.search.site:not(.home) .stills figure { margin: 0; } main.search.site:not(.home) .stills .pic { width: 100%; } main.search.site:not(.home) .stills figcaption { margin-top: 6px; font-size: 15px; color: var(--muted); } main.search.site:not(.home) .day-note, main.search.site:not(.home) .again { margin: 0 0 12px; color: var(--text); } main.search.site:not(.home) .again { font-size: 17px; color: var(--muted); } main.search.site:not(.home) .how-steps { display: grid; gap: 12px; margin: 0; counter-reset: s; } main.search.site:not(.home) .how-steps li { position: relative; margin: 0; padding: 0 0 0 40px; border: 0; line-height: 1.5; counter-increment: s; } main.search.site:not(.home) .how-steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--stone-2); color: var(--ink); font: 600 15px/1 var(--sans); } main.search.site:not(.home) .easier, main.search.site:not(.home) .seat { margin-top: 16px; padding: 12px; border-radius: var(--s-radius-s); background: var(--paper); } main.search.site:not(.home) .easier b, main.search.site:not(.home) .seat b { display: block; font-size: 15px; color: var(--accent-hover); } main.search.site:not(.home) .easier p, main.search.site:not(.home) .seat p { margin: 2px 0 0; font-size: 16px; line-height: 1.5; } main.search.site:not(.home) details.care { margin-top: 12px; } main.search.site:not(.home) details.care summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 600; color: var(--ink); } main.search.site:not(.home) details.care ul { margin: 0 0 4px; padding-left: 22px; font-size: 17px; line-height: 1.5; list-style: disc; } main.search.site:not(.home) details.care li { margin-bottom: 6px; } main.search.site:not(.home) .walkon { display: flex; align-items: center; gap: 14px; margin-top: 24px; } main.search.site:not(.home) .walkon p { margin: 0; } main.search.site:not(.home) h2 .tag { vertical-align: middle; margin-left: 6px; font-family: var(--sans); } @media (min-width: 760px) { main.search.site:not(.home) .easier, main.search.site:not(.home) .seat { padding: 14px 16px; } main.search.site:not(.home) .easier p, main.search.site:not(.home) .seat p { font-size: 17px; } main.search.site:not(.home) .move.has-img { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "h h" "s b"; column-gap: 36px; } main.search.site:not(.home) .move.has-img header { grid-area: h; } main.search.site:not(.home) .move.has-img .stills { grid-area: s; width: 100%; } main.search.site:not(.home) .move.has-img .body { grid-area: b; } } @media (min-width: 1100px) { main.search.site:not(.home) .move.has-img { grid-template-columns: 360px minmax(0, 1fr); } } main.search.site:not(.home) .plan-call p { margin-bottom: 8px; } main.search.site:not(.home) .plan-call .plan-btn { margin-top: 18px; } main.search.site:not(.home) .glance-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; } main.search.site:not(.home) .glance-head h2 { margin: 0; } main.search.site:not(.home) .glance-total { margin: 0; font: 600 clamp(17px, 1.6vw, 20px)/1.3 var(--sans); color: var(--ink); } main.search.site:not(.home) .glance { display: grid; gap: 16px; margin-top: 18px; } main.search.site:not(.home) .chart.strip { display: block; width: 100%; max-width: none; height: auto; } main.search.site:not(.home) .chart.strip-mid, main.search.site:not(.home) .chart.strip-wide { display: none; } @media (min-width: 760px) { main.search.site:not(.home) .chart.strip-phone { display: none; } main.search.site:not(.home) .chart.strip-mid { display: block; } } @media (min-width: 1180px) { main.search.site:not(.home) .chart.strip-mid { display: none; } main.search.site:not(.home) .chart.strip-wide { display: block; } } main.search.site:not(.home) .strip .seg-session { fill: var(--c-hi); } main.search.site:not(.home) .strip .seg-setup { fill: var(--accent-soft); stroke: var(--c-2); stroke-width: 1.5; } main.search.site:not(.home) .strip .seg-n { fill: var(--paper); font: 600 16px/1 var(--sans); } main.search.site:not(.home) .strip .seg-stretch + .seg-n, main.search.site:not(.home) .strip .seg-walkon + .seg-n { fill: var(--ink); } main.search.site:not(.home) .strip .seg { transform-box: fill-box; transform-origin: left center; animation: strip-fill .45s ease-out both; } main.search.site:not(.home) .strip .seg-n { animation: strip-num .3s ease-out both; } main.search.site:not(.home) .strip .a1 { animation-delay: .15s; } main.search.site:not(.home) .strip .a2 { animation-delay: .3s; } main.search.site:not(.home) .strip .a3 { animation-delay: .45s; } main.search.site:not(.home) .strip .a4 { animation-delay: .6s; } main.search.site:not(.home) .strip .a5 { animation-delay: .75s; } main.search.site:not(.home) .strip .a6 { animation-delay: .9s; } main.search.site:not(.home) .strip .a7 { animation-delay: 1.05s; } main.search.site:not(.home) .strip .a8 { animation-delay: 1.2s; } main.search.site:not(.home) .strip .a9 { animation-delay: 1.35s; } main.search.site:not(.home) .strip .a10 { animation-delay: 1.5s; } main.search.site:not(.home) .strip .a11 { animation-delay: 1.65s; } main.search.site:not(.home) .strip .a12 { animation-delay: 1.8s; } @keyframes strip-fill { from { transform: scaleX(0); } } @keyframes strip-num { from { opacity: 0; } } @media (max-width: 759px) { @supports (animation-timeline: view()) { main.search.site:not(.home) .strip .seg, main.search.site:not(.home) .strip .seg-n { animation-timeline: view(); animation-delay: 0s; animation-duration: auto; } main.search.site:not(.home) .strip .a0 { animation-range: entry 0% cover 10.0%; } main.search.site:not(.home) .strip .a1 { animation-range: entry 0% cover 11.2%; } main.search.site:not(.home) .strip .a2 { animation-range: entry 0% cover 12.4%; } main.search.site:not(.home) .strip .a3 { animation-range: entry 0% cover 13.6%; } main.search.site:not(.home) .strip .a4 { animation-range: entry 0% cover 14.8%; } main.search.site:not(.home) .strip .a5 { animation-range: entry 0% cover 16.0%; } main.search.site:not(.home) .strip .a6 { animation-range: entry 0% cover 17.2%; } main.search.site:not(.home) .strip .a7 { animation-range: entry 0% cover 18.4%; } main.search.site:not(.home) .strip .a8 { animation-range: entry 0% cover 19.6%; } main.search.site:not(.home) .strip .a9 { animation-range: entry 0% cover 20.8%; } main.search.site:not(.home) .strip .a10 { animation-range: entry 0% cover 22.0%; } main.search.site:not(.home) .strip .a11 { animation-range: entry 0% cover 23.2%; } main.search.site:not(.home) .strip .a12 { animation-range: entry 0% cover 24.4%; } } } @media (prefers-reduced-motion: reduce) { main.search.site:not(.home) .strip .seg, main.search.site:not(.home) .strip .seg-n { animation: none; } } main.search.site:not(.home) .seq { margin: 0; } @media (min-width: 760px) { main.search.site:not(.home) .seq { columns: 2; column-gap: 24px; } } main.search.site:not(.home) .seq li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 4px 0; break-inside: avoid; } main.search.site:not(.home) .seq .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-hi); color: var(--paper); font-size: 16px; font-weight: 600; } main.search.site:not(.home) .seq .k-walk-on .n { background: var(--accent-soft); outline: 1.5px dashed var(--c-hi); outline-offset: -1.5px; } main.search.site:not(.home) .seq .k-stretch .n { background: var(--c-base); color: var(--ink); } main.search.site:not(.home) .seq .k-session .n:empty { background: var(--accent-soft); } main.search.site:not(.home) .seq .nm { color: var(--ink); font-size: 17px; line-height: 1.3; } main.search.site:not(.home) .seq .tm { color: var(--muted); font-size: 15px; white-space: nowrap; }