:root {
  --red: #d96769;
  --orange: #df9b52;
  --yellow: #d7b847;
  --green: #79b96f;
  --blue: #78a9d7;
  --violet: #a88bc9;
  --pink: #d37f9f;
}

.content-desktop { --proposal-window-width: 700px; align-items: center; justify-content: flex-start; flex-direction: column; gap: 12px; }
.content-window { width: min(var(--proposal-window-width), 100%); height: fit-content; }
.content-window .doc-title { font-size: clamp(2.4rem, 7vw, 3.0375rem); }
.content-window .doc-lead { margin-bottom: 0; font-size: .8rem; }
.content-window #doc-eyebrow { color: var(--accent-text); }

.language-switch { display: flex; margin-left: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--win-body); }
.language-switch button { min-width: 31px; padding: 4px 7px; color: var(--text-3); border: 0; border-left: 1px solid var(--line); background: transparent; font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.language-switch button:first-child { border-left: 0; }
.language-switch button:hover { color: var(--text-1); }
.language-switch button.active { color: var(--on-accent); background: var(--accent); }

.content-hero-mark { color: var(--on-accent); background: var(--accent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.explorer-section { margin-bottom: 0; }
.donut-layout { display: grid; gap: 28px; }
.donut-frame { position: relative; width: min(100%, 290px); margin: 0 auto; aspect-ratio: 1; }
.donut-frame::before { position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, var(--text-1) 12%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
#donut { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.slice { stroke: var(--win-body); stroke-width: 4; transition: transform 220ms var(--ease-lift), opacity 160ms ease; transform-box: fill-box; transform-origin: center; }
.slice:hover, .slice:focus-visible, .slice.active { transform: scale(1.045); }
.slice.dim { opacity: .42; }
.slice:focus-visible { stroke: var(--text-1); stroke-width: 6; }
.donut-centre { position: absolute; inset: 31%; z-index: 2; display: grid; place-content: center; width: 38%; height: 38%; margin: auto; padding: 14px; border-radius: 50%; background: var(--win-body); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 10%, transparent); text-align: center; pointer-events: none; }
.donut-centre strong { color: var(--text-1); font-size: 14px; letter-spacing: -.04em; line-height: .95; }

.theme-key { display: grid; gap: 2px; }
.theme-button { display: grid; grid-template-columns: 13px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 0; color: var(--text-1); border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.theme-button:hover, .theme-button.active { color: var(--colour); }
.theme-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--colour); }
.theme-button strong { font-size: 13px; }
.theme-button span { color: var(--text-3); font-size: 11px; }

.selection { min-height: 0; margin-top: 3.5rem; padding: 26px; border-top: 4px solid var(--colour, var(--accent)); background: color-mix(in srgb, var(--colour, var(--accent)) 12%, var(--soft-surface)); }
.selection-inner { display: grid; gap: 28px; animation: reveal 380ms var(--ease-lift) both; }
.selection-kicker { margin-bottom: 9px; color: var(--colour); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.selection h2 { max-width: 11ch; color: var(--text-1); font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; }
.selection-summary { margin: 2px 0 17px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.topic-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.topic-pill { padding: 5px 8px; color: color-mix(in srgb, var(--colour) 72%, var(--text-1)); border: 1px solid color-mix(in srgb, var(--colour) 55%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--colour) 13%, var(--win-body)); font-size: 11px; }
.piece-list { display: grid; border-top: 1px solid var(--line); }
.piece { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; color: var(--text-1); border-bottom: 1px solid var(--line); }
.piece:hover { color: var(--colour); }
.piece strong { font-size: 13px; }
.piece span { flex: none; color: var(--text-3); font-size: 11px; }
.doc-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 9px; margin-top: 3rem; color: var(--text-3); font-size: 11px; }

@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 621px) {
  .donut-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: center; }
  .donut-frame { width: 250px; }
}

@media (max-width: 480px) {
  .content-window .window-bar { gap: 5px; padding-inline: 10px; }
  .content-window .window-breadcrumb { flex: 1; min-width: 0; margin-left: 4px; white-space: nowrap; }
  .content-window .window-breadcrumb > span { display: none; }
  .content-window .language-switch { flex: none; }
}