/* ═════════════════════════════════════════════════════════════════════════
   ACADEMY — the redesign (23.10.2026), from the Claude Design "Academy" file.
   A dark head with the search and four suggestions, a half-minute-tour card, chapters in a
   sticky row, then six numbered sections: start here, the map (one line through every
   screen), the guides (accordion), the plays (cards that open the tactical board), the
   glossary (topics and terms) and the official documents. Orange is this screen's own
   accent (the design's choice); everything else follows the design-system tokens.
   Everything follows the screen's own width (container queries): phone, tablet, desktop.
   ═════════════════════════════════════════════════════════════════════════ */

#screen-academy { width: 100%; overflow-y: auto; background: var(--ds-bg); }
#academy-screen { inline-size: 100%; }

.ac {
  --ac-o: #FF6B00;
  --ac-head: #0C1630; --ac-tour: #F3D9C1; --ac-tour-ink: #0C1630; --ac-chalk: #0C1630; --ac-mark: rgba(255, 107, 0, .26);
  container-type: inline-size; container-name: ac;
  inline-size: 100%; max-inline-size: 1280px; margin: 0 auto; color: var(--ds-ink); font-family: var(--ds-font); font-size: 15px; line-height: 1.5;
}
html[data-theme="dark"] .ac { --ac-head: #131C2E; --ac-tour: #3A2416; --ac-tour-ink: #F7E6D6; --ac-chalk: #16213A; --ac-mark: rgba(255, 154, 77, .34); }
.ac *, .ac *::before, .ac *::after { box-sizing: border-box; }
.ac :where(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }
.ac :where(ol, ul) { list-style: none; }
.ac button { font-family: inherit; }
.ac button:focus-visible, .ac a:focus-visible, .ac input:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.ac mark { background: var(--ac-mark); color: inherit; padding: 0 1px; }
.ac .ac-ico { flex: none; }

/* ── The head ── */
.ac-head { position: relative; overflow: hidden; isolation: isolate; background: var(--ac-head); color: #fff; border-bottom: 5px solid var(--ac-o); }
.ac-head-pat {
  position: absolute; inset: 0; z-index: 0; opacity: .09; background-size: 88px 88px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M14 14l12 12M26 14L14 26'/%3E%3Ccircle cx='64' cy='64' r='7.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to var(--ac-far, left), transparent 10%, #000 80%); mask-image: linear-gradient(to var(--ac-far, left), transparent 10%, #000 80%);
}
.ac[dir="ltr"] { --ac-far: right; }
.ac[dir="rtl"] { --ac-far: left; }
.ac-head-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 8% 118%, rgba(255, 107, 0, .42), rgba(255, 107, 0, 0) 52%); }
.ac[dir="ltr"] .ac-head-glow { background: radial-gradient(circle at 92% 118%, rgba(255, 107, 0, .42), rgba(255, 107, 0, 0) 52%); }
.ac-head-arrow { display: none; position: absolute; z-index: 1; inset-inline-end: 4%; bottom: 8%; width: min(36%, 440px); height: auto; opacity: .45; pointer-events: none; }
.ac[dir="ltr"] .ac-head-arrow { transform: scaleX(-1); }
.ac-head-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 16px 26px; }
.ac-head-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--ac-head), 0 0 0 6px var(--ac-o); }
.ac-h1 { max-width: 16ch; font: 900 40px/.98 var(--ds-font); letter-spacing: -.035em; text-wrap: balance; color: #fff; }
.ac-sub { max-width: 46ch; font: 500 15px/1.5 var(--ds-font); color: #D5DCEA; text-wrap: pretty; }
.ac-search {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 4px; padding-block: 6px; padding-inline: 16px 6px;
  background: #fff; color: #0C1630; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ac-search:focus-within { box-shadow: 0 0 0 3px var(--ac-o), 0 18px 40px rgba(0, 0, 0, .35); }
.ac-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: none; background: transparent; color: #0C1630; font: 600 15px var(--ds-font); }
.ac-search input::placeholder { color: #5B6475; opacity: 1; }
.ac-search input::-webkit-search-cancel-button { display: none; }
.ac-clear { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: #E9E4DA; color: #0C1630; cursor: pointer; }
.ac-clear[hidden] { display: none; }
.ac-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-sugg button {
  min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 0; background: transparent; color: #fff;
  font: 700 14px var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.ac-sugg button:hover { background: rgba(255, 255, 255, .12); }
.ac-sugg button[aria-pressed="true"] { background: #fff; color: #0C1630; border-color: #fff; }

.ac-body { padding: 0 12px 96px; }

/* ── The tour card ── */
.ac-tour {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px;
  padding: 24px 18px; background: var(--ac-tour); color: var(--ac-tour-ink); border-top: 4px solid var(--ac-o);
}
.ac-tour-av { position: relative; z-index: 1; flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--ac-tour), 0 0 0 7px var(--ac-o); }
.ac-tour-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-tour-k { font: 800 14px/1.2 var(--ds-font); letter-spacing: .06em; }
.ac-tour h2 { font: 900 24px/1.12 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.ac-tour p { font: 600 17px/1.6 var(--ds-font); max-width: 52ch; text-wrap: pretty; }
.ac-tour-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 6px; }
.ac-tour-btn {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0;
  background: #0C1630; color: #fff; font: 800 17px var(--ds-font); cursor: pointer;
}
html[data-theme="dark"] .ac-tour-btn { background: var(--ac-o); color: #111; }
.ac-ticks { display: flex; align-items: center; gap: 4px; }
.ac-ticks i { width: 18px; height: 5px; background: currentColor; opacity: .35; }

/* ── Chapters ── */
.ac-chap {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-top: 18px;
  background: var(--ds-bg); border-bottom: 1px solid var(--ds-line);
}
.ac-chap[hidden] { display: none; }
.ac-chap::-webkit-scrollbar { display: none; }
.ac-chap button {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; color: var(--ds-ink2); font: 700 14px var(--ds-font); cursor: pointer; white-space: nowrap;
}
.ac-chap button[aria-current="true"] { color: var(--ds-ink); font-weight: 800; border-bottom-color: var(--ac-o); }
.ac-chap b { font: 800 20px/1 var(--ds-font-num); color: var(--ds-ink); }
.ac-chap-n { min-width: 24px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--ds-ink); color: var(--ds-bg); font: 800 13px/1 var(--ds-font-num); }
.ac-chap-n.zero { background: var(--ds-line); color: var(--ds-ink); }

/* ── Sections ── */
.ac-sec { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; transition: opacity var(--ds-t-layer) ease; scroll-margin-top: 64px; }
.ac-sec.dim { opacity: .42; }
.ac-sec-h { display: flex; align-items: flex-end; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ds-ink); }
.ac-sec-n { flex: none; font: 800 56px/.78 var(--ds-font-num); color: transparent; -webkit-text-stroke: 2px var(--ds-ink); direction: ltr; }
.ac-sec-h h2 { flex: 1; min-width: 0; font: 900 24px/1.1 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.ac-sec-c { flex: none; min-width: 36px; height: 32px; padding: 0 10px; display: grid; place-items: center; background: var(--ds-ink); color: var(--ds-bg); font: 800 17px/1 var(--ds-font-num); }
.ac-sub-h { display: flex; align-items: center; gap: 10px; font: 900 19px/1.2 var(--ds-font); }
.ac-sub-h span { min-width: 28px; height: 26px; padding: 0 8px; display: grid; place-items: center; border: 1.5px solid var(--ds-line); color: var(--ds-ink2); font: 800 15px/1 var(--ds-font-num); }

/* 01 */
.ac-start { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ac-start li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 16px; background: var(--ds-card); border-top: 4px solid var(--ds-ink); }
.ac-start b { flex: none; font: 800 48px/.8 var(--ds-font-num); color: var(--ds-ink); }
.ac-start p { font: 600 17px/1.65 var(--ds-font); text-wrap: pretty; }

/* 02 — a line through every screen */
.ac-metro { display: flex; flex-direction: column; gap: 28px; padding: 10px 24px 6px; }
.ac-mrow { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ac-track { position: absolute; top: 19px; height: 6px; inset-inline: calc(100% / (2 * var(--n))); background: var(--ac-o); }
.ac-turn {
  position: absolute; top: 19px; height: calc(100% + 34px); width: calc(100% / (2 * var(--n)) + 18px); border: 6px solid var(--ac-o); pointer-events: none;
}
.ac-turn.end { inset-inline-end: -18px; border-inline-start-width: 0; border-start-end-radius: 52px; border-end-end-radius: 52px; }
.ac-turn.start { inset-inline-start: -18px; border-inline-end-width: 0; border-start-start-radius: 52px; border-end-start-radius: 52px; }
.ac-station { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 8px; text-align: center; min-width: 0; }
.ac-station b { font: 900 15px/1.3 var(--ds-font); text-wrap: balance; }
.ac-station > span { font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink2); max-width: 26ch; text-wrap: pretty; }
.ac-node {
  position: relative; z-index: 1; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--ds-ink);
  background: var(--ds-card); color: var(--ds-ink); font: 800 20px/1 var(--ds-font-num);
}
.ac-node.here { border-color: var(--ac-o); background: var(--ac-o); color: #111; animation: acPing 1.8s ease-out infinite; }
@keyframes acPing { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, .6); } 100% { box-shadow: 0 0 0 18px rgba(255, 107, 0, 0); } }
.ac-stripw { position: relative; }
.ac-stripline { position: absolute; top: 22px; bottom: 22px; inset-inline-start: 19px; width: 6px; background: var(--ac-o); }
.ac-strip { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ac-strip li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.ac-strip li > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 9px; }
.ac-strip b { font: 900 15px/1.3 var(--ds-font); }
.ac-strip li > div > span { font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink2); }

/* 03 — guides */
.ac-guides { display: flex; flex-direction: column; border-top: 1px solid var(--ds-line); }
.ac-guide { border-bottom: 1px solid var(--ds-line); transition: background var(--ds-t-ctrl) ease; }
.ac-guide.open { background: var(--ds-card); box-shadow: inset 0 3px 0 var(--ds-ink); }
.ac-g-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 10px 4px; border: 0; border-radius: 0; background: none;
  color: var(--ds-ink); font: inherit; cursor: pointer; text-align: start;
}
.ac-g-num { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ac-g-num b { font: 800 32px/.9 var(--ds-font-num); }
.ac-g-num span { font: 700 12px/1.2 var(--ds-font); color: var(--ds-ink2); }
.ac-g-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ds-ink); color: var(--ds-bg); }
.ac-g-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ac-g-tx b { font: 900 20px/1.25 var(--ds-font); }
.ac-g-tx span { font: 600 14px/1.4 var(--ds-font); color: var(--ds-ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-g-head > svg:last-child { flex: none; color: var(--ds-ink2); transition: transform var(--ds-t-ctrl) ease; }
.ac-guide.open .ac-g-head > svg:last-child { transform: rotate(180deg); }
.ac-g-body { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 4px 6px 24px; animation: acUp var(--ds-t-layer) ease-out; }
@keyframes acUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ac-g-main, .ac-g-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ac-g-side { gap: 18px; }
.ac-lab { display: block; margin-bottom: 8px; font: 800 13px/1.2 var(--ds-font); letter-spacing: .06em; color: var(--ds-ink); }
.ac-what { font: 600 17px/1.65 var(--ds-font); text-wrap: pretty; }
.ac-tl { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(var(--ds-line), var(--ds-line)) no-repeat; background-size: 2px calc(100% - 32px); background-position: 15px 16px; }
.ac[dir="rtl"] .ac-tl { background-position: calc(100% - 15px) 16px; }
.ac-tl li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.ac-tl li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-card); border: 2px solid var(--ds-ink); font: 800 17px/1 var(--ds-font-num); }
.ac-tl p { padding-top: 4px; font: 500 15px/1.6 var(--ds-font); text-wrap: pretty; }
.ac-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-crumbs > span { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; background: var(--ds-bg); border: 1px solid var(--ds-line); font: 700 14px/1.35 var(--ds-font); }
.ac-tip { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--ds-bg); }
.ac-tip img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ac-o); }
.ac-tip p { font: 600 15px/1.6 var(--ds-font); text-wrap: pretty; }
.ac-pri {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 0;
  background: var(--ac-o); color: #111; font: 800 15px var(--ds-font); cursor: pointer;
}
.ac-pri:hover { filter: brightness(1.05); }

/* 04 — plays */
.ac-pgroup { display: flex; flex-direction: column; gap: 12px; }
.ac-pgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ac-pcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; min-height: 172px; padding: 20px; border: 0; border-radius: 0;
  background: var(--ac-chalk); color: #fff; font: inherit; text-align: start; cursor: pointer; transition: transform var(--ds-t-layer) ease, box-shadow var(--ds-t-layer) ease;
}
html[data-theme="dark"] .ac-pcard { border: 1px solid #3A486A; }
.ac-pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0, 0, 0, .28); }
.ac-pcard-pat {
  position: absolute; inset: 0; opacity: .11; pointer-events: none; background-size: 66px 66px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M14 14l12 12M26 14L14 26'/%3E%3Ccircle cx='64' cy='64' r='7.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to var(--ac-far, left), transparent 25%, #000 95%); mask-image: linear-gradient(to var(--ac-far, left), transparent 25%, #000 95%);
}
.ac-pcard-tx { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-pcard-tx b { font: 900 20px/1.2 var(--ds-font); letter-spacing: -.01em; }
.ac-pcard-tx span { font: 600 14px/1.5 var(--ds-font); color: #C9D2E6; text-wrap: pretty; }
.ac-pcard-ft { position: relative; margin-top: auto; display: flex; align-items: center; gap: 12px; }
.ac-pticks { flex: 1; min-width: 0; display: flex; gap: 3px; }
.ac-pticks i { flex: 1; max-width: 18px; height: 4px; background: var(--ac-o); }
.ac-pmeta { font: 700 13px/1.2 var(--ds-font); color: #C9D2E6; white-space: nowrap; }
.ac-pplay { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #F7F4EE; color: #0C1630; }

/* 05 — glossary */
.ac-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ac-topic {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 96px; padding: 14px;
  border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer;
  transition: background var(--ds-t-ctrl) ease;
}
.ac-topic b { font: 800 40px/.85 var(--ds-font-num); }
.ac-topic span { font: 800 14px/1.3 var(--ds-font); }
.ac-topic.on { border-color: var(--ds-ink); background: var(--ds-ink); color: var(--ds-bg); }
.ac-topic.on b { color: var(--ac-o); }
.ac-topic.zero { opacity: .45; }
.ac-gblock { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ac-terms { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ac-term { min-width: 0; background: var(--ds-card); border: 1px solid var(--ds-line); }
.ac-term.open { border-color: var(--ds-ink); grid-column: 1 / -1; box-shadow: inset 0 3px 0 var(--ac-o); animation: acFade var(--ds-t-layer) ease-out; }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }
.ac-term > button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; border-radius: 0; background: none;
  color: var(--ds-ink); font: inherit; cursor: pointer; text-align: start;
}
.ac-term-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-term-tx b { font: 800 15px/1.35 var(--ds-font); }
.ac-term-tx > span { font: 700 14px/1.2 var(--ds-font-num); letter-spacing: .02em; color: var(--ds-ink2); }
.ac-term-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-bg); color: var(--ds-ink); }
.ac-term.open .ac-term-ic { background: var(--ds-ink); color: var(--ds-bg); }
.ac-term p { padding: 0 14px 18px; font: 500 16.5px/1.8 var(--ds-font); max-width: 68ch; text-wrap: pretty; }

/* 06 — documents */
.ac-docs { display: flex; flex-direction: column; border-top: 1px solid var(--ds-line); }
.ac-docs a {
  display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px 4px; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink);
  text-decoration: none; transition: background var(--ds-t-ctrl) ease;
}
.ac-docs a:hover { background: var(--ds-card); }
.ac-doc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ac-doc-tx b { font: 900 17px/1.3 var(--ds-font); }
.ac-doc-tx > span { font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink2); }
.ac-doc-tx .ac-doc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font: 700 15px/1.2 var(--ds-font-num); letter-spacing: .05em; }
.ac-doc-h i { padding: 1px 7px; border: 1px solid var(--ds-line); font: 800 12px/1.5 var(--ds-font-num); font-style: normal; letter-spacing: .08em; }
.ac-doc-ar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--ds-ink); color: var(--ds-ink); }

.ac-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--ds-ink); font: 700 14px var(--ds-font); color: var(--ds-ink2); }
.ac-foot b { font: 800 20px/1 var(--ds-font-num); color: var(--ds-ink); }

/* No results / loading / error */
.ac-nores { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-top: 28px; padding: 40px 16px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.ac-nores-n { font: 800 110px/.8 var(--ds-font-num); color: transparent; -webkit-text-stroke: 2px var(--ds-ink2); }
.ac-nores p { font: 900 24px/1.4 var(--ds-font); text-wrap: balance; }
.ac-nores-s { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ac-nores-s button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink); font: 700 14px var(--ds-font); cursor: pointer; }
.ac-err { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 24px; padding: 22px 24px; background: var(--ds-card); border: 1.5px solid var(--ds-live); color: var(--ds-live); }
.ac-err b { flex: 1 1 220px; font: 800 17px/1.5 var(--ds-font); color: var(--ds-ink); }
.ac-sk { height: 180px; margin-top: 16px; background: linear-gradient(90deg, var(--ds-line) 0%, var(--ds-card) 50%, var(--ds-line) 100%); background-size: 200% 100%; animation: acShim 1.2s linear infinite; }
.ac-sk--tour { height: 260px; } .ac-sk--bar { height: 52px; } .ac-sk--tall { height: 320px; }
@keyframes acShim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ac-node.here, .ac-sk { animation: none; }
  .ac-g-body, .ac-term.open { animation: none; }
  .ac-pcard, .ac-guide, .ac-topic { transition: none; }
}

/* ── Wider: tablet and desktop, by the screen's own width ── */
@container ac (min-width: 560px) {
  .ac-body { padding-inline: 20px; }
  .ac-head-in { gap: 18px; padding: 44px 30px 38px; }
  .ac-head-av { width: 64px; height: 64px; }
  .ac-h1 { font-size: 64px; line-height: .96; }
  .ac-sub { font-size: 19px; }
  .ac-search { min-height: 64px; margin-top: 10px; }
  .ac-search input { font-size: 17px; }
  .ac-tour { flex-direction: row; align-items: center; gap: 30px; margin-top: 24px; padding: 28px; }
  .ac-tour-av { width: 108px; height: 108px; }
  .ac-tour h2 { font-size: 32px; }
  .ac-chap { margin-top: 26px; }
  .ac-chap button { padding: 0 16px; }
  .ac-sec { gap: 22px; padding-top: 64px; }
  .ac-sec-h { gap: 18px; }
  .ac-sec-n { font-size: 82px; }
  .ac-sec-h h2 { font-size: 32px; }
  .ac-sub-h { font-size: 24px; }
  .ac-start b { font-size: 80px; }
  .ac-g-head { gap: 18px; min-height: 90px; padding: 12px 16px; }
  .ac-g-num { width: 56px; }
  .ac-g-ico { width: 52px; height: 52px; }
  .ac-g-body { padding: 6px 16px 28px; gap: 34px; }
  .ac-pgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .ac-pcard { min-height: 204px; }
  .ac-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-topic { min-height: 116px; } .ac-topic b { font-size: 48px; }
  .ac-terms { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ac-term p { padding: 2px 20px 24px; font-size: 17.5px; }
  .ac-docs a { padding: 18px 16px; }
  .ac-doc-ar { width: 56px; height: 56px; }
  .ac-foot { margin-top: 64px; }
  .ac-nores { padding: 56px 24px; } .ac-nores-n { font-size: 160px; }
}
@container ac (min-width: 1000px) {
  .ac-body { padding-inline: 0; }
  .ac-head-arrow { display: block; }
  .ac-head-in { padding: 60px 52px 52px; }
  .ac-h1 { font-size: 80px; line-height: .94; }
  .ac-search { max-width: 660px; }
  .ac-tour { padding: 36px 44px; }
  .ac-tour-av { width: 136px; height: 136px; }
  .ac-tour h2 { font-size: 40px; }
  .ac-sec-n { font-size: 104px; } .ac-sec-h h2 { font-size: 40px; }
  .ac-start { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ac-start li { flex-direction: column; gap: 14px; padding: 22px 22px 26px; }
  .ac-g-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-inline-start: 160px; }
  .ac-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Site review (30.10): the colour is a small mark, not a ground. The tour card is a plain card, and the map of the site is a
   list - it is not a process to go through in order, so no line joins its steps. */
html[data-theme] .ac { --ac-tour: var(--ds-card); --ac-tour-ink: var(--ds-ink); }
html[data-theme] .ac .ac-tour { border-top-color: var(--ds-ink); }
html[data-theme] .ac .ac-stripline { display: none; }
html[data-theme] .ac .ac-tour-btn { background: var(--ds-ink); color: var(--ds-card); }