/* PhysKit site — palette from outreach/PLAN.md §5. No external requests: system fonts only. */
:root {
  /* Phosphor scheme (outreach/PLAN.md §5). --accent is the brand teal darkened to 5.2:1 on white so it
     can carry link text; the logo itself keeps the brand teal #0f8f7e (4.0:1 — shapes only). */
  --ink: #11302b;
  --muted: #4f6661;
  --paper: #ffffff;
  --panel: #f3f8f6;
  --line: #dde7e4;
  --accent: #0b7a6b;
  --amber: #b97a00;
  --code-bg: #eef4f2;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #dff3ee;
    --muted: #9fbcb5;
    --paper: #0b1a17;
    --panel: #10241f;
    --line: #1f3a34;
    --accent: #2dd4bf;
    --amber: #fbbf24;
    --code-bg: #12302b;
  }
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--sans);
}
a { color: var(--accent); text-underline-offset: 2px; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
section.wrap { padding-top: 28px; padding-bottom: 8px; }
h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: 26px; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 6px; }
h3.sub { margin-top: 26px; }

/* header */
.top { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 10; }
.top .wrap { max-width: 1120px; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 16px; }
.brand { display: flex; align-items: center; }
.brand img, .foot img { display: block; height: auto; }
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.top nav a { padding: 4px 0 5px; }
.top nav a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.top nav .sep { flex: none; width: 1px; align-self: stretch; margin: 4px 0; background: var(--line); }

/* hero */
.hero { max-width: 1120px; margin: 0 auto; padding: 44px 16px 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; align-items: center; }
.hero-logo img { display: block; width: 100%; max-width: 440px; height: auto; margin-left: auto; }
.hero .note { margin-bottom: 0; }
@media (max-width: 860px) {
  .hero { padding-top: 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-logo { order: -1; }
  .hero-logo img { max-width: 340px; margin: 0 0 0 -6px; }
}
.lede { font-size: 19px; color: var(--muted); margin: 0 0 22px; }
.lede strong { color: var(--ink); font-weight: 600; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 550; font-size: 15px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #08201c; } }
.btn[aria-disabled="true"] { color: var(--muted); }
.note { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* cards */
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid.two { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }

table.skills { border-collapse: collapse; width: 100%; font-size: 16px; }
.skills td { border-top: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
.skills td:first-child { white-space: nowrap; width: 1%; padding-right: 16px; }


/* FAQ */
details { border-top: 1px solid var(--line); padding: 10px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 4px; color: var(--muted); }

.ref { background: var(--panel); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 4px; }

footer { margin-top: 48px; border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: 15px; color: var(--muted); }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot p { margin: 6px 0 0; }
.foot .links { display: flex; flex-direction: column; gap: 4px; }

/* how a campaign works: figure beside the text */
.split { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 32px; align-items: start; }
.split .figure img { display: block; width: 100%; height: auto; }
.split h3 { margin-top: 4px; }
.split p { margin: 4px 0 18px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .split .figure img { max-width: 380px; margin: 0 auto; } }

/* the replay: wider than the text column, because the dashboard is text-dense */
section.wide { padding: 28px 0 8px; }
.video { margin: 8px auto 0; max-width: 1180px; padding: 0 16px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px;
  background: #0b1220; border: 1px solid var(--line); }
.video figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; padding: 0; }

/* case-study pages */
.page-head { padding-top: 40px !important; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--muted); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 22px 0 6px; }
.facts > div { background: var(--panel); padding: 10px 14px; }
.facts dt { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 15.5px; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }
/* narrow screens: the nav takes its own row under the logo and scrolls sideways instead of wrapping */
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 2px; }
  .top nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; font-size: 14.5px; }
}

/* the detailed campaign figure: full text width; a light and a dark build, each on its own opaque ground */
.detail { margin: 36px 0 0; }
.detail img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.detail figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* how a campaign works: the animated loop (wide screens) or the static figure (phones), then the three steps */
.loop { margin: 8px 0 18px; }
.loop .anim { display: block; width: 100%; height: auto; aspect-ratio: 1720 / 968; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); }
.loop .still { display: none; }
.loop .still img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
@media (max-width: 699px) { .loop .anim { display: none; } .loop .still { display: block; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps h3 { margin-top: 4px; }
.steps p { margin: 4px 0 8px; font-size: 16px; }
@media (max-width: 699px) { .steps { grid-template-columns: 1fr; gap: 4px; } }


/* what PhysKit is: three benefits, what's inside */
.grid.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .grid.three { grid-template-columns: 1fr; } }
ul.inside { padding-left: 20px; margin: 6px 0 0; }
ul.inside li { margin-bottom: 4px; }
/* case studies: HTML cards (text in the page; graphic as a light/dark image), two columns, one on phones.
   Each card has an id (#case-a ...) so it can later link to its own page. */
.cases { display: grid; grid-auto-flow: column; grid-auto-columns: min(440px, 84%); gap: 16px; margin-top: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 3px 3px 14px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cases > .case { scroll-snap-align: start; }
.cases:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.case { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.case-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.case .chip { font: 600 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--chip-ink, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 5px 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.case .badge { font-size: 13.5px; font-weight: 650; color: var(--ink); border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; }
.case img { display: block; width: 100%; height: auto; border-radius: 8px; }
.case h3 { font-size: 18px; margin: 12px 0 4px; }
.case p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.case p sub, .case p sup { line-height: 0; font-size: .72em; }
.case .kind { margin-top: auto; padding-top: 8px; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.case .kind svg { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .35em; fill: none; stroke: var(--accent);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

:root { --chip-ink: #0a6e61; }
@media (prefers-color-scheme: dark) { :root { --chip-ink: var(--accent); } }
/* the campaign animation's pause control (wide screens, motion allowed) */
.loop { position: relative; }
.loop-toggle { position: absolute; right: 10px; bottom: 10px; font: 600 13px/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; opacity: .9; }
.loop-toggle:hover, .loop-toggle:focus-visible { opacity: 1; border-color: var(--accent); }
@media (max-width: 699px) { .loop-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) { .loop-toggle { display: none; } }

/* home-page case cards link to their pages: the title's link covers the whole card */
.case { position: relative; }
.case h3 a.stretch { color: inherit; text-decoration: none; }
.case h3 a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.case:hover, .case:has(.stretch:focus-visible) { border-color: var(--accent); }
.case h3 a.stretch:focus-visible { outline: none; }
.case h3 a.stretch:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.case .more { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--accent); }

/* case-study pages */
.case-page .kicker { font: 600 13px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.case-page .page-head .case-top { justify-content: flex-start; margin-top: 4px; }
.case-page .chip { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--chip-ink, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 5px 10px; }
.case-page .badge { font-size: 14px; font-weight: 650; border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; }
.case-fig { margin: 0 0 16px; }
.case-fig img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.case-fig figcaption { font: 500 13px/1.45 var(--mono); color: var(--muted); margin-top: 8px; }
.case-fig figcaption svg { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .35em; fill: none; stroke: var(--accent);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 10px; }
.keyfacts .kf { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.keyfacts b { display: block; font-size: 22px; line-height: 1.15; color: var(--accent); }
.keyfacts span { display: block; font-size: 14.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) { .keyfacts { grid-template-columns: 1fr; } }
h2.cs { font-size: 19px; margin: 22px 0 4px; }
.case-page p sub, .case-page p sup, .case-page dd sub, .case-page dd sup, .case-page h1 sub, .case-page h1 sup { line-height: 0; font-size: .72em; }
.paper-fig { margin: 14px 0 16px; }
.paper-fig img { display: block; width: 100%; height: auto; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.paper-fig.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.paper-fig figcaption { font-size: 15px; color: var(--muted); margin-top: 8px; }
.case-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; font-size: 15px; }
.case-nav a { text-decoration: none; }
.case-nav a.prev, .case-nav a.next { color: var(--accent); }
.case-nav .all { color: var(--muted); text-align: center; }
.case-nav .next { text-align: right; }
@media (max-width: 560px) { .case-nav { grid-template-columns: 1fr 1fr; } .case-nav .all { grid-column: 1 / -1; grid-row: 1; } }
ul.case-list { list-style: none; padding: 0; margin: 18px 0 0; }
ul.case-list li { border-top: 1px solid var(--line); padding: 12px 0; }
ul.case-list li span { color: var(--muted); font-size: 16px; }

:root { color-scheme: light dark; }
/* in-page links (#cases, #case-a ...) land below the sticky header */
html { scroll-padding-top: 72px; }
@media (max-width: 760px) { html { scroll-padding-top: 100px; } }

/* why it exists: a two-column panel, wider than the text column (problem | without / with PhysKit) */
.why { max-width: 1120px; margin: 18px auto 0; padding: 0 16px; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px 34px; }
.why .kicker { font: 600 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.why-h { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.why-h span { display: block; color: var(--accent); }
.why-points { list-style: none; padding: 0; margin: 0; }
.why-points li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.why-points b { display: block; font-size: 17px; line-height: 1.3; }
.why-points span:not(.ic) { display: block; font-size: 15.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.why-note { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
.ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.warn { color: #c0504d; }
@media (prefers-color-scheme: dark) { .ic.warn { color: #ea9891; } }
.ic.sm { width: 30px; height: 30px; border-radius: 8px; }
.ic.sm svg { width: 16px; height: 16px; }
.side-h { font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.side-h.muted { color: var(--muted); }
.side-h.accent { color: var(--accent); margin-top: 18px; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.bub { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.35; }
.bub small { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.bub.ag { background: #e7f5f2; border: 1px solid #7cc3b6; border-bottom-left-radius: 4px; }
.bub.ag small { color: #0a6e61; }
.bub.hu { align-self: flex-end; background: #fdf3dc; border: 1px solid #b97a00; border-bottom-right-radius: 4px; }
.bub.hu small { color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  .bub.ag { background: rgba(45,212,191,.10); border-color: rgba(45,212,191,.5); }
  .bub.ag small { color: #2dd4bf; }
  .bub.hu { background: rgba(251,191,36,.10); border-color: #fbbf24; }
  .bub.hu small { color: #fbbf24; }
}
ul.with { list-style: none; padding: 0; margin: 0; }
ul.with li { margin-bottom: 8px; }
ul.with a { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16.5px; }
ul.with a:hover { color: var(--accent); }
.teaser { display: block; margin-top: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); text-decoration: none; font-size: 15.5px; }
.teaser b { display: block; font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.teaser:hover { border-color: var(--accent); }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 24px; padding: 22px 20px; } }
/* benefit cards: icon beside the title */
h3.with-ic { display: flex; align-items: center; gap: 10px; }

/* home page sections: numbered headings; alternate sections sit on a full-width band */
h2 .num, .kicker .num { display: inline-block; font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--accent);
  border: 1px solid currentColor; border-radius: 6px; padding: 4px 6px; margin-right: 12px; vertical-align: 5px; }
.kicker .num { margin-right: 10px; vertical-align: 1px; padding: 3px 5px; }
section.sec { padding-top: 52px; padding-bottom: 12px; }
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 52px; padding: 40px 0 34px; }
.band + .band, .band:last-child { margin-bottom: 0; }
.band .case { background: var(--paper); }
.wrap.wide { max-width: 1120px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sec-head h2 { margin: 0; }
.wide > p { max-width: 828px; }
.scroller-ctl { display: flex; gap: 8px; }
.scroller-ctl[hidden] { display: none; }
.sc { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 600 18px/1 var(--sans); cursor: pointer; }
.sc:hover:not(:disabled), .sc:focus-visible { border-color: var(--accent); color: var(--accent); }
.sc:disabled { opacity: .4; cursor: default; }
.all-cases { margin: 4px 0 0; font-size: 15px; }
#faq details:last-of-type { border-bottom: 1px solid var(--line); }
main:has(> .band:last-child) + footer { margin-top: 0; }   /* the home page ends on the FAQ band */

/* how it works: the step titles sit under the 'A closed-loop campaign' subheading */
.steps h4 { font-size: 17px; margin: 4px 0 0; }
#how .teaser { margin-top: 20px; }

/* get started: Claude Code | Codex tabs (without JavaScript both show, one after the other) */
.tabs .tablist { display: none; }
.tabs.on .tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 0; }
.tablist [role="tab"] { font: 600 15px/1 var(--sans); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px 9px; margin-bottom: -1px; cursor: pointer; }
.tablist [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tablist [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.tabs.on .pane > p:first-child { margin-top: 12px; }
details.bib { border: 0; padding: 0; margin: 10px 0; }
details.bib summary { font-weight: 600; font-size: 15px; color: var(--accent); }
details.bib pre { margin: 8px 0 0; }

/* how-it-works page: the campaign schematic gets more width than the text column */
.detail-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.detail-wrap .detail { margin-top: 6px; }

/* how it works: the loop beside its three steps on wide screens */
.camp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.camp-grid .loop { margin: 0; }
.camp-grid .steps { grid-template-columns: 1fr; gap: 6px; }
@media (max-width: 900px) {
  .camp-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .camp-grid .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (max-width: 699px) { .camp-grid .steps { grid-template-columns: 1fr; gap: 4px; } }
/* get started: install beside the citation on wide screens */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.start-grid > div > h3.sub:first-child { margin-top: 10px; }
@media (max-width: 860px) { .start-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
#faq details { max-width: 860px; }
.cases { scroll-padding-inline: 3px; }
/* keep the side gutter on the widened home sections (an older 'section.wide' rule zeroes it), and widen the footer to match */
section.wrap.wide { padding-left: 16px; padding-right: 16px; }
footer .wrap { max-width: 1120px; }
@media (max-width: 699px) { .loop .still img { max-width: 300px; } }
/* text pages (case studies, how it works): the header matches the 860 px text column, so the logo lines up with the text */
body:has(main.case-page) .top .wrap { max-width: 860px; }
/* case row: the pause / resume button for auto-advance (pause icon while running) */
.sc.auto { display: inline-flex; align-items: center; justify-content: center; }
.sc.auto[hidden] { display: none; }
.sc.auto svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sc.auto .i-play { fill: currentColor; stroke-width: 1.5; }
.sc.auto[aria-pressed="true"] .i-play, .sc.auto[aria-pressed="false"] .i-pause { display: none; }