/* Extempore showcase on pragmatly.com/extempore/ (29th Oct 2026): the app's own run, report and Analytics styles, captured from
   the app in sample-data mode (only the rules those screens use), scoped under .exs, with the app's light colours.
   Rebuild after a format change. */
.exs { --accent: #1f5d9c; --accent-hover: #2d73b9; --bg: #f6fafe; --card: #eaf3fd; --font-inter: Inter; --font-playfair: 'Playfair Display'; --ink: #123a68; --ink-hover: #0d2e54; --line: #d9e5f2; --muted: #56698a; --ok: #217858; --ok-bg: #e4f5ee; --on-ink: #fff; --radius: 16px; --radius-pill: 999px; --radius-sheet: 18px; --radius-sm: 10px; --sans: Inter, -apple-system, "Segoe UI", Helvetica, sans-serif; --serif: 'Playfair Display', Georgia, serif; --shadow: 0 18px 50px rgba(18, 58, 104, .08); --shadow-rgb: 18, 58, 104; --surface: #fff; --text: #123a68; --tint: #f3f7fc; --tint-strong: #dcebfa;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--text); text-align: left; }
.exs * {box-sizing: border-box;}
.exs h2 {font-family: var(--font-playfair), Georgia, serif; letter-spacing: -0.02em; color: var(--text); font-weight: 600;}
.exs a {color: var(--accent);}
.exs h2 {letter-spacing: -0.02em; text-wrap: balance; margin: 36px 0px 10px; font-size: 26px;}
.exs button {font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); min-height: 44px; color: var(--text); cursor: pointer; padding: 0px 20px; font-size: 12px; font-weight: 600; transition: background 0.15s, border-color 0.15s, opacity 0.15s, box-shadow 0.15s;}
.exs button:hover {border-color: var(--accent-hover); background: var(--card);}
.exs .aa-shell {grid-template-columns: 272px minmax(0px, 1fr); align-items: start; gap: 28px; max-width: 1680px; margin: 0px; padding: 32px 24px 80px; display: grid;}
@media (max-width: 900px) {
.exs .aa-shell {grid-template-columns: minmax(0px, 1fr);}
}
.exs .aa-sheet {background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); box-shadow: var(--shadow); min-width: 0px; padding: 36px 40px 44px; position: relative;}
@media (max-width: 900px) {
.exs .aa-shell {gap: 12px; padding: 14px 12px 64px;}
}
@media (max-width: 640px) {
.exs .aa-sheet {border-radius: 16px; padding: 22px 16px 28px;}
.exs h2 {margin-top: 28px; font-size: 22px;}
}
.exs .kr {--serif: var(--font-playfair), Georgia, serif; --sans: var(--font-inter), -apple-system, "Segoe UI", Helvetica, sans-serif; color: var(--text);}
.exs .kr .kr-num {font-family: var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-weight: 700;}
.exs :where(.kr) button {font: inherit; letter-spacing: normal; text-transform: none; min-height: 0px; color: inherit; box-shadow: none; cursor: pointer; background: none; border: 0px; border-radius: 0px; padding: 0px;}
.exs :where(.kr) button:hover {box-shadow: none; background: none; border-color: rgba(0, 0, 0, 0);}
.exs :where(.kr) :where(h2, p, ul, ol) {margin: 0px;}
.exs :where(.kr) :where(ul, ol) {padding: 0px; list-style: none;}
.exs .kr :focus-visible {outline: 2px solid var(--accent-hover); outline-offset: 2px; border-radius: 6px;}
.exs .kr-muted {color: var(--muted); font-size: 13.5px; line-height: 1.5;}
.exs .kr-main {min-width: 0px;}
.exs .kr-page {flex-direction: column; gap: 24px; max-width: 1040px; display: flex;}
.exs .kr-crumbs {color: var(--muted); align-items: center; gap: 6px; margin: -8px 0px; font-size: 13px; display: flex;}
.exs .kr-crumbs a {color: var(--accent); align-items: center; gap: 4px; font-weight: 600; text-decoration: none; display: inline-flex;}
.exs .kr-crumbs a:hover {text-decoration: underline;}
.exs .kr .kr-btn {border-radius: var(--radius-sm); border: 1px solid var(--accent-hover); background: var(--surface); min-height: 44px; color: var(--text); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; justify-content: center; align-items: center; gap: 6px; padding: 0px 20px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; display: inline-flex;}
.exs .kr .kr-btn:hover {background: var(--card); border-color: var(--accent-hover);}
.exs .kr .kr-btn-primary {background: var(--ink); border-color: var(--ink); color: var(--on-ink);}
.exs .kr .kr-btn-primary:hover {background: var(--ink-hover); border-color: var(--ink-hover); box-shadow: 0 8px 20px rgba(var(--shadow-rgb), .18);}
.exs .kr .kr-btn svg {flex-shrink: 0;}
.exs .kr-actions {flex-wrap: wrap; align-items: center; gap: 12px; display: flex;}
.exs .kn-filler {color: var(--muted); text-decoration: underline dotted var(--muted); text-underline-offset: 5px; border-radius: 3px; transition: background 0.2s;}
.exs .kn-pause {color: var(--muted); white-space: nowrap; font-size: 13px; font-weight: 600;}
.exs .kn-legend {color: var(--muted); margin: 12px 0px 0px; font-size: 13px;}
.exs .kn-flag {font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--muted); text-underline-offset: 3px; cursor: pointer; background: none; border: 0px; margin-top: 8px; padding: 0px; font-size: 13px; text-decoration: underline;}
.exs .kn-flag:hover {color: var(--accent);}
.exs .kn-rate {border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; font-size: 15px; display: flex;}
.exs .kn-rate button {border: 1px solid var(--line); background: var(--surface); min-height: 34px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--accent); cursor: pointer; border-radius: 999px; padding: 0px 16px; font-size: 13px; font-weight: 600;}
.exs .kn-rate button:hover {border-color: var(--accent-hover); background: var(--card);}
.exs .ex-structure {flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0px 16px; padding: 0px; list-style: none; display: flex;}
.exs .ex-structure li {border-radius: 999px; align-items: baseline; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; display: inline-flex;}
.exs .ex-structure li + li::before {content: "→"; color: var(--muted); margin: 0px 6px 0px -12px; font-weight: 400;}
.exs .ex-structure li small {text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600;}
.exs .ex-structure .is-found {background: var(--ok-bg); color: var(--ok);}
.exs .ex-structure .is-missing {border: 1px dashed var(--muted); color: var(--muted);}
.exs .ex-transcript {border: 1px solid var(--line); background: var(--tint); color: var(--text); border-radius: 12px; margin: 0px; padding: 16px 18px; font-size: 15.5px; line-height: 1.9;}
.exs .ex-mark {background: var(--tint-strong); color: inherit; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 4px; padding: 1px 2px; transition: background 0.15s;}
.exs .ex-audio-note {margin: 12px 0px 0px;}
.exs .ex-fixes {flex-direction: column; gap: 12px; margin: 10px 0px 0px; padding: 0px; list-style: none; display: flex;}
.exs .ex-fixes li {border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px 16px; transition: border-color 0.15s, box-shadow 0.15s;}
.exs .ex-fixes h4 {color: var(--text); align-items: center; gap: 10px; margin: 0px 0px 8px; font-size: 16px; display: flex;}
.exs .ex-fixes h4 .kr-num {background: var(--ink); width: 24px; height: 24px; color: var(--on-ink); border-radius: 50%; place-items: center; font-size: 12.5px; display: grid;}
.exs .ex-fixes blockquote {border-left: 3px solid var(--accent); background: var(--tint); color: var(--text); margin: 0px 0px 8px; padding: 6px 12px; font-style: italic;}
.exs .ex-fixes p {color: var(--text); margin: 0px 0px 6px; font-size: 14.5px; line-height: 1.55;}
.exs .ex-try {background: var(--ok-bg); border-radius: 10px; padding: 8px 12px;}
.exs .ex-try b {color: var(--ok);}
.exs .ex-report > section + section, .exs .ex-report .kn-rate {margin-top: 20px;}
.exs .ex-mark sup {color: var(--accent); margin-left: 2px; font-size: 10px; font-weight: 700;}
.exs .ex-sample-note {color: var(--muted); margin: 0px 0px 12px; font-size: 13px;}
.exs .pb {flex-direction: column; gap: 16px; display: flex;}
.exs .pb > * {margin: 0px;}
.exs .pb-label {letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); align-items: center; gap: 6px; margin: 0px 0px 8px; font-size: 11.5px; font-weight: 700; display: flex;}
.exs .pb-label.is-green {color: var(--ok);}
.exs .pb-text {color: var(--text); max-width: 74ch; margin: 0px; font-size: 15px; line-height: 1.6;}
.exs .pb-head {flex-direction: column; gap: 8px; display: flex;}
.exs .pb-title {font: 700 clamp(30px, 4.4vw, 40px)/1.1 var(--serif); letter-spacing: -0.02em; color: var(--text); margin: 0px;}
.exs .pb-title em {color: var(--accent-hover); font-style: italic; font-weight: 600;}
.exs .pb-details {border: 1px solid var(--line); background: var(--surface); border-radius: 14px; flex-wrap: wrap; gap: 6px 26px; margin: 4px 0px 0px; padding: 14px 18px; display: flex;}
.exs .pb-details div {gap: 6px; font-size: 14px; display: flex;}
.exs .pb-details .is-wide {flex-basis: 100%;}
.exs .pb-details dt {color: var(--text); font-weight: 700;}
.exs .pb-details dt::after {content: ":";}
.exs .pb-details dd {color: var(--text); margin: 0px;}
.exs .pb-card {border: 1px solid var(--line); background: var(--surface); border-radius: 14px; min-width: 0px; padding: 18px 20px;}
.exs .pb-card.is-soft {background: var(--tint); border-color: rgba(0, 0, 0, 0);}
.exs .pb-card ol {color: var(--text); flex-direction: column; gap: 6px; margin: 0px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; display: flex;}
.exs .pb-top {grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.7fr); gap: 14px; display: grid;}
@media (max-width: 760px) {
.exs .pb-top {grid-template-columns: 1fr;}
}
.exs .pb-big {margin: 0 0 8px; font: 700 64px/1 var(--sans); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;}
.exs .pb-big small {letter-spacing: 0px; color: var(--muted); margin-left: 4px; font-size: 18px; font-weight: 600;}
.exs .pb-stand {flex-direction: column; justify-content: center; gap: 10px; display: flex;}
.exs .pb-progress {color: var(--text); margin: 0px; font-size: 14px;}
.exs .pb-three {grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; display: grid;}
@media (max-width: 900px) {
.exs .pb-three {grid-template-columns: 1fr;}
}
.exs .pb-nums {flex-direction: column; margin: 0px; display: flex;}
.exs .pb-nums div {border-bottom: 1px solid var(--line); color: var(--text); justify-content: space-between; gap: 10px; padding: 7px 0px; font-size: 14px; display: flex;}
.exs .pb-nums div:last-child {border-bottom: 0px;}
.exs .pb-nums dd {color: var(--accent); margin: 0px; font-weight: 700;}
.exs .pb-pill {letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; border-radius: 999px; align-items: center; padding: 3px 10px; font-size: 10.5px; font-weight: 700; display: inline-flex;}
.exs .pb-pill.is-solid {background: var(--tint-strong); color: var(--accent);}
.exs .pb-pill.is-developing {background: var(--tint); color: var(--muted);}
.exs .pb-track {background: var(--tint-strong); border-radius: 999px; height: 8px; position: relative;}
.exs .pb-fill {border-radius: 999px; position: absolute; inset: 0px auto 0px 0px;}
.exs .pb-fill.is-solid {background: var(--accent);}
.exs .pb-fill.is-developing {background: var(--muted);}
.exs .pb-target {background: var(--ink); border-radius: 1px; width: 2px; height: 18px; margin-left: -1px; position: absolute; top: -5px;}
.exs .pb-avg {border: 2.5px solid var(--muted); background: var(--surface); border-radius: 50%; width: 11px; height: 11px; margin: -5.5px 0px 0px -5.5px; position: absolute; top: 50%;}
.exs .pb-legend {color: var(--muted); flex-wrap: wrap; gap: 6px 18px; margin: 0px; font-size: 12.5px; display: flex;}
.exs .pb-legend span {align-items: center; gap: 6px; display: inline-flex;}
.exs .pb-l-score {background: rgb(54, 166, 123); border-radius: 999px; width: 18px; height: 7px; display: inline-block;}
.exs .pb-l-target {background: var(--ink); width: 2px; height: 13px; display: inline-block;}
.exs .pb-l-avg {border: 2.5px solid var(--muted); border-radius: 50%; width: 10px; height: 10px; display: inline-block;}
.exs .pb-sec {align-items: center; gap: 12px; display: flex; margin-top: 12px !important;}
.exs .pb-badge {background: var(--tint-strong); width: 34px; height: 34px; color: var(--accent); border-radius: 10px; flex: 0 0 auto; place-items: center; font-size: 14px; display: grid;}
.exs .pb-sec h3 {font: 700 24px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--text); margin: 0px;}
.exs .pb-sec p {color: var(--muted); margin: 2px 0px 0px; font-size: 13.5px;}
.exs .pb-group {padding: 6px 20px 10px;}
.exs .pb-group-head {justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0px 4px; display: flex;}
.exs .pb-group-head .pb-label {margin: 0px;}
.exs .pb-group-head > span {color: var(--text); align-items: center; gap: 8px; font-size: 16px; display: inline-flex;}
.exs .pb-group-head small {color: var(--muted); font-size: 12px;}
.exs .pb-rows {margin: 0px; padding: 0px; list-style: none;}
.exs .pb-row {border-bottom: 1px solid var(--line); padding: 12px 0px;}
.exs .pb-row:last-child {border-bottom: 0px;}
.exs .pb-row-top {grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1.4fr) 62px 104px; align-items: center; gap: 16px; display: grid;}
.exs .pb-row-top b {color: var(--text); align-items: center; gap: 6px; font-size: 15px; display: inline-flex;}
.exs .pb-row-num {text-align: right; color: var(--text); font-size: 16px; font-weight: 700;}
.exs .pb-row-num small {color: var(--muted); margin-left: 1px; font-size: 11px;}
.exs .pb-row-top .pb-pill {justify-self: end;}
.exs .pb-row-note {color: var(--muted); margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5;}
@media (max-width: 640px) {
.exs .pb-row-top {grid-template-columns: minmax(0px, 1fr) 54px;}
.exs .pb-row-top .pb-track {grid-area: 2 / 1 / auto / -1;}
.exs .pb-row-top .pb-pill {grid-area: 1 / 2; display: none;}
}
.exs .pb-call {color: var(--text); border-radius: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.55;}
.exs .pb-call p {margin: 0px;}
.exs .pb-call p + p {margin-top: 4px;}
.exs .pb-call .pb-label {margin-bottom: 6px;}
.exs .pb-call.is-key {background: var(--tint); border-left: 4px solid var(--accent);}
.exs .pb-call.is-note {background: var(--surface); border: 1px solid var(--line);}
.exs .pb-call.is-watch {color: rgb(255, 255, 255); background: rgb(18, 58, 104);}
.exs .pb-call.is-watch .pb-label {color: rgb(185, 204, 226);}
.exs .pb-two {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; display: grid;}
.exs .pb-compare {grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; display: grid;}
@media (max-width: 640px) {
.exs .pb-compare {grid-template-columns: 1fr;}
}
.exs .pb-compare > div {color: var(--text); border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.55;}
.exs .pb-compare p {margin: 0px;}
.exs .pb-compare .is-said {background: var(--tint);}
.exs .pb-compare .is-better {background: var(--surface); border: 1px solid var(--line);}
.exs .pb-compare .pb-label {color: var(--muted); margin-bottom: 6px;}
.exs .pb-compare .pb-label.is-green {color: var(--ok);}
.exs .ex-model {flex-direction: column; gap: 12px; display: flex;}
.exs .ex-model-sides {flex-wrap: wrap; gap: 6px; display: flex;}
.exs .ex-model-sides button {border: 1px solid var(--line); background: var(--surface); min-height: 36px; color: var(--text); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; cursor: pointer; border-radius: 999px; align-items: center; gap: 6px; padding: 0px 14px; font-size: 14px; font-weight: 600; display: inline-flex;}
.exs .ex-model-sides button small {letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); font-size: 11px; font-weight: 700;}
.exs .ex-model-sides button.is-on {background: var(--ink); border-color: var(--ink); color: var(--on-ink);}
.exs .ex-model-sides button.is-on small {color: inherit; opacity: 0.85;}
.exs .ex-model-sides button:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
.exs .ex-model-stance {color: var(--text); max-width: 70ch; margin: 0px; font-size: 17px; font-weight: 600; line-height: 1.45;}
.exs .ex-model-text {color: var(--text); white-space: pre-line; max-width: 70ch; margin: 0px; font-size: 15.5px; line-height: 1.7;}
.exs .ex-model-meta {margin: 0px; font-size: 13.5px;}
.exs .ex-model-facts {color: var(--text); flex-direction: column; gap: 6px; max-width: 78ch; margin: 0px 0px 8px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; display: flex;}
.exs .pb-plan {grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; display: grid;}
@media (max-width: 900px) {
.exs .pb-plan {grid-template-columns: 1fr;}
}
.exs .pb-plan h4 {color: var(--text); margin: 0px 0px 4px; font-size: 16px;}
.exs .pb-plan p {color: var(--text); margin: 0px; font-size: 14px; line-height: 1.5;}
.exs .pb .ex-fixes, .exs .pb .ex-structure, .exs .pb .ex-transcript {margin-top: 0px;}
.exs .pb-title {font-size: clamp(28px, 3.6vw, 34px);}
.exs .pb-sec h3 {font-size: 21px; font-weight: 600;}
.exs .pb-call, .exs .pb-text {font-size: 14.5px;}
.exs .ex .kr-page, .exs .ex .kr-main {min-width: 0px;}
.exs .pb-row-top b {flex-wrap: wrap;}
.exs .pb-group-head {border-bottom: 1px solid var(--line); margin-bottom: 4px; padding: 12px 0px;}
.exs .pb-group-avg {background: var(--tint); border-radius: 999px; align-items: baseline; gap: 4px; padding: 4px 12px; display: inline-flex; color: var(--muted) !important; font-size: 13px !important;}
.exs .pb-group-avg b {color: var(--text); font-size: 14px;}
.exs .pb-group-avg small {font-size: 11.5px;}
.exs .pb-group-avg i {margin: 0px 2px; font-style: normal;}
.exs .pb-l-score {background: var(--accent);}
.exs .kr .kr-link {color: var(--accent); background: none; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; display: inline-flex;}
.exs .kr .kr-link:hover {background: none; text-decoration: underline;}
.exs .ex-trend {width: 100%; height: auto; margin-top: 8px;}
.exs .ex-trend .ex-area {fill: var(--tint-strong); opacity: 0.6;}
.exs .ex-trend .ex-line {fill: none; stroke: var(--accent); stroke-width: 2.5px; stroke-linejoin: round;}
.exs .ex-trend .ex-dot {fill: var(--surface); stroke: var(--accent); stroke-width: 2px;}
.exs .ex-trend .ex-dot.is-now {fill: var(--ink); stroke: var(--ink);}
.exs .pb-pill.is-strong {background: var(--ok-bg); color: var(--ok);}
.exs .pb-fill.is-strong {background: rgb(54, 166, 123);}
.exs .pb-l-tline {border-top: 2px dashed var(--ink); width: 18px; display: inline-block;}
.exs .pb-l-aline {border-top: 2px dotted var(--muted); width: 18px; display: inline-block;}
.exs .pb-l-sline {border-top: 3px solid var(--accent); border-radius: 2px; width: 18px; display: inline-block;}
.exs .ex-trend .pb-t-line {stroke: var(--ink); stroke-width: 1.5px; stroke-dasharray: 6, 5;}
.exs .ex-trend .pb-a-line {stroke: var(--muted); stroke-width: 1.5px; stroke-dasharray: 2, 4;}
@media (max-width: 560px) {
.exs .ex-trend .ex-axis, .exs .ex-trend .pb-t-text {font-size: 20px;}
}
.exs .ex-ctile-shade {z-index: -1; background: linear-gradient(rgba(13, 46, 84, 0.05) 0%, rgba(13, 46, 84, 0.35) 45%, rgba(13, 46, 84, 0.9) 100%); position: absolute; inset: 0px;}
.exs .ex-stats {grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; display: grid;}
.exs .ex-stat {border: 1px solid var(--line); background: linear-gradient(150deg, var(--card) 0%, var(--tint) 100%); border-radius: 14px; flex-direction: column; gap: 2px; padding: 16px 18px; display: flex;}
.exs .ex-stat b {margin-top: 8px; font: 700 30px/1.05 var(--sans); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums;}
.exs .ex-stat > span:not([class]) {color: var(--text); font-size: 13px; font-weight: 600;}
.exs .ex-stat small {color: var(--muted); margin-top: 6px; font-size: 12.5px;}
.exs .ex-stat-ico {background: var(--tint-strong); width: 32px; height: 32px; color: var(--accent); border-radius: 9px; place-items: center; display: grid;}
.exs .ex-stat-ico svg {fill: none; stroke: currentcolor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; width: 18px; height: 18px;}
.exs .ex-stat-bar {background: var(--tint-strong); border-radius: 999px; height: 6px; margin-top: 10px; display: block; position: relative;}
.exs .ex-stat-bar i {border-radius: inherit; background: rgb(45, 115, 185); height: 100%; display: block;}
.exs .ex-stat-bar em {background: var(--ink); width: 2px; height: 14px; position: absolute; top: -4px;}
.exs .ex-stat-dots {align-items: flex-end; gap: 3px; height: 26px; margin-top: 10px; display: flex;}
.exs .ex-stat-dots i {background: var(--tint-strong); border-radius: 3px 3px 0px 0px; flex: 1 1 0%;}
.exs .ex-stat-dots i.is-best {background: rgb(54, 166, 123);}
.exs .ex-stat-spark {width: 100%; height: 26px; margin-top: 10px; display: block;}
.exs .ex-stat-spark polyline {fill: none; stroke: rgb(45, 115, 185); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round;}
.exs .ex-stat.is-lead {color: rgb(255, 255, 255); background: radial-gradient(80% 120% at 0px 0px, rgba(45, 115, 185, 0.6) 0%, rgba(45, 115, 185, 0) 65%), linear-gradient(155deg, rgb(31, 93, 156) 0%, rgb(18, 58, 104) 100%); border: 0px; box-shadow: rgba(18, 58, 104, 0.7) 0px 12px 28px -16px;}
.exs .ex-stat.is-lead b, .exs .ex-stat.is-lead > span:not([class]) {color: rgb(255, 255, 255);}
.exs .ex-stat.is-lead small {color: rgba(255, 255, 255, 0.78);}
.exs .ex-stat.is-lead .ex-stat-ico {color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.14);}
.exs .ex-stat.is-lead .ex-stat-bar {background: rgba(255, 255, 255, 0.2);}
.exs .ex-stat.is-lead .ex-stat-bar i {background: rgb(255, 255, 255);}
@media (max-width: 900px) {
.exs .ex-stats {grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
.exs .ex-ksum {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; display: grid;}
.exs .ex-kcard {grid-row: span 4; grid-template-rows: subgrid; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; row-gap: 10px; padding: 0px 0px 14px; display: grid; overflow: hidden;}
.exs .ex-kcard-head {color: rgb(255, 255, 255); isolation: isolate; align-items: flex-end; min-height: 84px; padding: 12px 16px; display: flex; position: relative;}
.exs .ex-kcard-head img {z-index: -2; object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0px;}
.exs .ex-kcard-head b {text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 8px; font-size: 15.5px;}
.exs .ex-krow {color: var(--text); border-radius: 12px; margin: 0px 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5;}
.exs .ex-krow ul {flex-direction: column; gap: 3px; margin: 0px; padding-left: 18px; display: flex;}
.exs .ex-krow-k {letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0px 0px 6px; font-size: 11px; font-weight: 700;}
.exs .ex-krow-none {color: var(--muted); margin: 0px;}
.exs .ex-krow.is-win {background: linear-gradient(140deg, var(--ok-bg) 0%, var(--surface) 130%); border-left: 3px solid rgb(54, 166, 123);}
.exs .ex-krow.is-win .ex-krow-k {color: var(--ok);}
.exs .ex-krow.is-key {color: rgb(255, 255, 255); background: radial-gradient(80% 120% at 0px 0px, rgba(45, 115, 185, 0.6) 0%, rgba(45, 115, 185, 0) 65%), linear-gradient(155deg, rgb(31, 93, 156) 0%, rgb(18, 58, 104) 100%);}
.exs .ex-krow-go {color: rgb(255, 255, 255); align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex;}
.exs .ex-krow-go:hover {text-decoration: underline;}
.exs .ex-krow.is-slip {border: 1px solid var(--line); background: linear-gradient(120deg, var(--card) 0%, var(--tint) 100%);}
.exs .ex-trend {width: auto; max-width: 100%; height: auto; margin-top: 8px; display: block; overflow: visible;}
.exs .ex-trend .ex-axis {fill: var(--muted); font: 400 12px var(--sans, sans-serif);}
.exs .ex-trend .ex-base {stroke: var(--line); stroke-width: 1px;}
.exs .ex-trend .pb-t-line {stroke: var(--ink); stroke-width: 1.25px; stroke-dasharray: 5, 5; opacity: 0.55;}
.exs .ex-trend .pb-t-text {fill: var(--muted); font: 600 12px var(--sans, sans-serif);}
.exs .ex-trend .pb-a-line {stroke: var(--muted); stroke-width: 1.25px; stroke-dasharray: 2, 4; opacity: 0.7;}
.exs .ex-trend .ex-area {opacity: 0.45;}
@media (max-width: 560px) {
.exs .ex-trend .ex-axis, .exs .ex-trend .pb-t-text {font-size: 12px;}
}
.exs .pb-tick {border-radius: 999px; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; font-size: 12px; font-weight: 600; line-height: 1.5; display: inline-flex;}
.exs .pb-tick span[aria-hidden] {font-size: 9px;}
.exs .pb-tick.is-up {color: rgb(33, 120, 88); background: rgb(228, 245, 238);}
.exs .ex-kcard {color: rgb(255, 255, 255); background: radial-gradient(70% 60% at 0px 30%, rgba(45, 115, 185, 0.45) 0%, rgba(45, 115, 185, 0) 60%), linear-gradient(160deg, rgb(18, 58, 104) 0%, rgb(13, 46, 84) 100%); border: 0px; box-shadow: rgba(18, 58, 104, 0.55) 0px 12px 32px -18px;}
.exs .ex-krow, .exs .ex-krow.is-win, .exs .ex-krow.is-slip {color: rgba(255, 255, 255, 0.9); background: none; border: 0px; border-radius: 0px; margin: 0px 14px; padding: 4px 6px;}
.exs .ex-krow-k, .exs .ex-krow.is-win .ex-krow-k, .exs .ex-krow.is-slip .ex-krow-k {letter-spacing: 0px; text-transform: none; color: rgba(255, 255, 255, 0.66); margin: 0px 0px 4px; font-size: 13px; font-weight: 600;}
.exs .ex-krow.is-slip, .exs .ex-krow.is-win {border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 10px;}
.exs .ex-krow-none {color: rgba(255, 255, 255, 0.7);}
.exs .ex-krow.is-key {color: rgb(18, 58, 104); background: rgb(255, 255, 255); border-radius: 12px; margin: 6px 14px 0px; padding: 14px 16px; box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 20px -12px;}
.exs .ex-krow.is-key .ex-krow-k {color: rgb(31, 93, 156);}
.exs .ex-krow.is-key li {font-weight: 600;}
.exs .ex-krow.is-key .ex-krow-go {color: rgb(31, 93, 156);}
@media (max-width: 640px) {
.exs .aa-sheet {border-radius: 16px; padding: 22px 16px 28px;}
}
.exs .ex-ctiles {grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; display: grid;}
.exs .ex-ctiles.is-jump {grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 0px 0px 18px;}
.exs .ex-ctile {color: rgb(255, 255, 255); min-height: 128px; font: inherit; text-align: left; cursor: pointer; isolation: isolate; background: rgb(18, 58, 104); border: 2px solid rgba(0, 0, 0, 0); border-radius: 14px; align-items: flex-end; padding: 0px; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; display: flex; position: relative; overflow: hidden;}
.exs .ex-ctile img {z-index: -2; object-fit: cover; width: 100%; height: 100%; transition: transform 0.4s; position: absolute; inset: 0px;}
.exs .ex-ctile:hover {transform: translateY(-2px); box-shadow: rgba(18, 58, 104, 0.8) 0px 14px 28px -18px;}
.exs .ex-ctile:hover img {transform: scale(1.05);}
.exs .ex-ctile:focus-visible {outline: 3px solid var(--accent-hover); outline-offset: 2px;}
.exs .ex-ctile-body {flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; display: flex;}
.exs .ex-ctile-body b {text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 8px; font-size: 15.5px; line-height: 1.25;}
.exs .ex-ctile-body small {color: rgba(255, 255, 255, 0.85); font-size: 12.5px;}
.exs .ex-ctile-tag {color: rgb(18, 58, 104); letter-spacing: 0.06em; text-transform: uppercase; background: rgb(255, 255, 255); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; position: absolute; top: 10px; left: 10px;}
@media (prefers-reduced-motion: reduce) {
.exs .ex-ctile, .exs .ex-ctile img {transition: none;}
}
.exs .kr-eyebrow {letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); align-items: center; gap: 10px; font-size: 11px; font-weight: 600; display: flex;}
.exs .kr-eyebrow::before {content: ""; background: var(--accent-hover); flex-shrink: 0; width: 24px; height: 2px;}
.exs .kr .kr-btn-large {min-height: 52px; padding: 0px 30px; font-size: 12.5px;}
.exs .kr-banner {border-radius: var(--radius-sm); background: var(--card); color: var(--text); flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; font-size: 14px; display: flex;}
.exs .kr-banner.is-warn {background: var(--tint-strong); border-left: 3px solid var(--accent);}
.exs .kr-run {background: var(--bg); flex-direction: column; min-height: 100vh; display: flex;}
.exs .kr-run-card {background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); width: min(980px, 100% - 32px); box-shadow: var(--shadow); flex-direction: column; gap: 24px; margin: 32px auto 0px; padding: 36px 40px 44px; display: flex; position: relative;}
.exs .kr-center {text-align: center; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0px; display: flex;}
.exs .kr-center .kr-eyebrow::before {display: none;}
@media (max-width: 720px) {
.exs .kr-run-card {margin-top: 16px; padding: 22px 16px 28px;}
}
.exs .ex-draw {gap: 18px;}
.exs .ex-envelope {aspect-ratio: 3 / 2; cursor: pointer; background: linear-gradient(160deg, rgb(31, 93, 156) 0%, rgb(18, 58, 104) 100%); border: 0px; border-radius: 14px; width: 220px; max-width: 70vw; transition: transform 0.2s; position: relative; box-shadow: rgba(18, 58, 104, 0.6) 0px 18px 40px -18px;}
.exs .ex-envelope:hover {transform: translateY(-3px);}
.exs .ex-flap {clip-path: polygon(0px 0px, 100% 0px, 50% 100%); background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); border-radius: 14px 14px 0px 0px; height: 58%; position: absolute; inset: 0px 0px auto;}
.exs .ex-seal {color: rgb(18, 58, 104); width: 46px; height: 46px; font: 700 22px/1 var(--serif); background: rgb(255, 255, 255); border-radius: 50%; place-items: center; display: grid; position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 16px -6px;}
@media (prefers-reduced-motion: no-preference) {
.exs .ex-envelope {animation: 3s ease-in-out 0s infinite normal none running ex-float;}
}
.exs h1 {font-family: var(--font-playfair), Georgia, serif; letter-spacing: -0.02em; color: var(--text); font-weight: 600;}
.exs h1 {letter-spacing: -0.03em; margin: 0px 0px 4px; font-size: 30px;}
@media (max-width: 640px) {
.exs h1 {font-size: 26px;}
}
.exs .kr h1 {margin: 0px; font-size: 30px; line-height: 1.2;}
.exs .kr .kr-run-q {letter-spacing: -0.02em; text-wrap: balance; font-size: 32px; line-height: 1.25;}
@media (max-width: 720px) {
.exs .kr-run-card {margin-top: 16px; padding: 22px 16px 28px;}
.exs .kr .kr-run-q {font-size: 24px;}
}
.exs .ex-topic .kr-run-q {max-width: 760px;}
.exs .kr-bar {border-radius: var(--radius-pill); background: var(--line); height: 6px; overflow: hidden;}
.exs .kr-bar i {background: var(--accent); border-radius: var(--radius-pill); height: 100%; transition: width 0.2s linear; display: block;}
.exs .kr-bar-run i {transform-origin: 0px center; width: 100%; transition: none; animation-name: kr-shrink; animation-timing-function: linear; animation-fill-mode: forwards;}
.exs .kr-run-grid {grid-template-columns: 1fr; gap: 20px; display: grid;}
.exs .kr-timer {background: var(--card); border-radius: var(--radius); flex-direction: column; gap: 12px; padding: 26px 30px; display: flex;}
.exs .kr-clock {letter-spacing: -0.03em; color: var(--text); font-size: 64px; line-height: 1;}
@media (max-width: 720px) {
.exs .kr-run-card {margin-top: 16px; padding: 22px 16px 28px;}
.exs .kr .kr-run-q {font-size: 24px;}
.exs .kr-clock {font-size: 48px;}
}
.exs .ex-plan-hint {flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0px 0px; padding: 0px; list-style: none; display: flex;}
.exs .ex-plan-hint li {border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 13px;}
.exs .ex-plan-hint b {color: var(--text); margin-right: 4px;}
@keyframes kr-shrink { 
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
/* page fits: the chart scales with its card; the run card sits in its frame; headings are not page headings */
.exs .ex-trend { display: block; width: 640px; max-width: 100%; height: auto; margin: 0 auto; }
.exs .kr-run { min-height: 0; background: transparent; }
.exs .kr-run-card { width: 100%; margin: 0; box-shadow: none; }
.exs .kr .kr-run-q { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
@media (max-width: 640px) { .exs .kr .kr-run-q { font-size: 24px; } }
.exs .aa-sheet { box-shadow: none; }