/* The template wizard (/templates), in the hub's bx design language. */
.tw { width: min(var(--bx-maxw, 1240px), 100% - 2rem); margin: 0 auto; padding: 2rem 0 5rem; color: var(--bx-text); }
.tw-top { padding: 1rem 0 1.25rem; }
.tw-top-row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.tw-eyebrow { font-family: var(--bx-font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--bx-text-soft); margin: 0 0 .4rem; }
.tw-title { font-family: var(--bx-font-display); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); margin: 0; letter-spacing: -.02em; }
.tw-progress { margin-top: 1rem; }
.tw-progress-bar { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--bx-night) 70%, transparent); box-shadow: inset 0 0 0 1px var(--bx-line); overflow: hidden; }
.tw-progress-bar span { display: block; height: 100%; background: var(--bx-grad); border-radius: inherit; transition: width .4s ease; }
.tw-progress-meta { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .88rem; color: var(--bx-text-soft); }
.tw-page { font-family: var(--bx-font-mono); }

.tw-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 19rem; gap: 1.75rem; align-items: start; margin-top: 1rem; }
/* The narrow-screen rules are at the END of this file: an override must come after the rule it
   overrides (same specificity, so the later one wins). */

.tw-rail { position: sticky; top: 6rem; }
.tw-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.tw-rail button { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem; border: 0; border-radius: var(--bx-radius-sm, 10px); background: transparent; color: var(--bx-text-soft); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.tw-rail button:hover { background: var(--bx-grad-soft); color: var(--bx-text); }
.tw-rail li.is-current button { background: var(--bx-grad-soft); color: var(--bx-text); box-shadow: inset 0 0 0 1px var(--bx-line-strong); }
/* Three states, told apart at a glance:
   - current: a brand-gradient disc with a white icon and a soft glow;
   - chosen (the developer answered or accepted something here): the ring turns green, and a green
     check badge appears once the step is complete;
   - decided only by suggestions and defaults: the purple ring, as before. */
.tw-rail-icon { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--tw-ring, var(--bx-purple)) calc(var(--p) * 1%), var(--bx-line) 0);
  transition: box-shadow .2s ease, transform .2s ease; }
.tw-rail-icon::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bx-night); }
.tw-rail-icon img { position: relative; }
.tw-rail li.is-chosen .tw-rail-icon { --tw-ring: var(--bx-ok); }
.tw-rail li.is-chosen .tw-rail-icon::before { background: color-mix(in oklab, var(--bx-ok) 12%, var(--bx-night)); }
.tw-rail-check { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bx-ok); box-shadow: 0 0 0 2px var(--bx-night); display: grid; place-items: center; }
.tw-rail-check::before { content: ""; width: 10px; height: 10px; background: var(--bx-night);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.tw-rail li.is-current .tw-rail-icon { background: var(--bx-grad); transform: scale(1.08);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bx-purple) 30%, transparent), 0 6px 18px -4px var(--bx-glow-pink, var(--bx-pink)); }
.tw-rail li.is-current .tw-rail-icon::before { background: transparent; }
.tw-rail li.is-current .tw-rail-icon img { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { .tw-rail-icon { transition: none; } }
.tw-rail li.is-done .tw-rail-text { color: var(--bx-text); }
.tw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bx-pink); margin-left: auto; flex: none; }

.tw-main { min-width: 0; }
.tw-step { background: color-mix(in oklab, var(--bx-night) 86%, transparent); border-radius: var(--bx-radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--bx-shadow); }
/* The question controls are Isabyte elements, styled from the product's --isa-* tokens, which the hub
   never defines: a switch label fell back to #212529 and was near-invisible on the dark theme (the
   Languages and page lists). Map them onto the hub's --bx-* tokens, which flip with the theme, as
   Release Notes does. The theme preview sets the developer's own tokens on its container, so it is
   unaffected. No colour literals (host-theme rule). */
.tw-step {
  --isa-color-bg: var(--bx-night);
  --isa-color-text: var(--bx-text);
  --isa-color-text-muted: var(--bx-mist);
  --isa-color-border: var(--bx-line-strong);
  --isa-color-border-focus: var(--bx-purple);
  --isa-color-primary: var(--bx-purple);
  --isa-color-hover-bg: var(--bx-night-2);
  --isa-color-bg-light: var(--bx-night-2);          /* the help dialogue's title bar */
  --isa-color-disabled-bg: var(--bx-night-2);
  --isa-color-track-bg: var(--bx-line-strong);      /* a switch that is off */
  --isa-color-danger-bg: color-mix(in oklab, var(--bx-danger) 14%, transparent);
  --isa-color-selected-bg: color-mix(in oklab, var(--bx-purple) 16%, transparent);
  --isa-color-selected-hover-bg: color-mix(in oklab, var(--bx-purple) 24%, transparent);
  --isa-color-danger: var(--bx-danger);
  --isa-shadow-popup: var(--bx-shadow);
  --isa-focus-shadow: var(--bx-glow-violet);
  /* The help dialogue opened with a 0.2 s fade-and-scale of the whole panel over an undimmed page: for
     a few frames its half-transparent text lay on top of the question's text (the "flash"). It opens
     at once, over a backdrop made of the theme's own surface, which hides the page in both themes. */
  --isa-dialogue-transition-speed: 0s;
  --isa-dialogue-backdrop-color: color-mix(in oklab, var(--bx-night) 78%, transparent);
}

/* The dialogue locks scrolling by hiding the page's scrollbar; without a reserved gutter the whole
   page shifted sideways by its width as the dialogue opened, and back as it closed. */
html { scrollbar-gutter: stable; }
.tw-step-image { display: block; width: 56px; height: 56px; padding: 12px; border-radius: 16px; background: var(--bx-grad-soft); box-shadow: inset 0 0 0 1px var(--bx-line-strong); margin-bottom: 1rem; }
.tw-step h2 { font-family: var(--bx-font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 1.25rem; letter-spacing: -.01em; }
.tw-step h3 { font-family: var(--bx-font-display); font-size: 1.05rem; margin: 2rem 0 .75rem; }
.tw-lead { font-size: 1.08rem; color: var(--bx-text-soft); max-width: 46rem; }
.tw-hint { color: var(--bx-text-soft); font-size: .9rem; }
.tw-list { color: var(--bx-text-soft); display: grid; gap: .45rem; padding-left: 1.2rem; }
.tw-list strong { color: var(--bx-text); }
.tw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* Page one's showcase: one carousel slide per business category (WizardIntro). The carousel needs a
   fixed height, so it is a token per width; the picture takes what the caption leaves. */
.tw-intro { --tw-showcase-h: 27rem; }
@media (max-width: 640px) { .tw-intro { --tw-showcase-h: 23rem; } }
.tw-showcase { margin: .4rem 0 1.4rem; border-radius: var(--bx-radius, 14px); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bx-line), var(--bx-shadow); }
/* The core carousel gives a slide min-width 100% but no width, so content wider than the carousel
   (a 960 px picture, a long line) widens the slide and every later slide is offset. Pinned here
   until the core rule is fixed (migrate-component references/components/carousel.md). */
.tw-showcase .isabyte-carousel-slide { flex: 0 0 100%; width: 100%; }
.tw-slide { margin: 0; height: 100%; display: flex; flex-direction: column; background: var(--isa-color-bg); }
.tw-slide-img { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; height: auto; object-fit: cover; object-position: top center; display: block; }
.tw-slide-text { flex: none; display: grid; gap: .25rem; padding: .85rem 3.4rem 1rem; border-top: 1px solid var(--bx-line); }
.tw-slide-title { font-size: 1.15rem; line-height: 1.25; }
.tw-slide-desc { color: var(--bx-text-soft); font-size: .9rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-slide-badge { justify-self: start; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .55rem; border-radius: 999px; }
.tw-slide-badge.is-ready { background: var(--bx-ok-soft); color: var(--bx-ok); }
.tw-slide-badge.is-planned { background: color-mix(in oklab, var(--bx-text-soft) 14%, transparent); color: var(--bx-text-soft); }
@media (max-width: 640px) {
  .tw-slide-text { padding: .7rem 1rem .85rem; }
  /* A phone's slide is far taller than the 16:10 picture (its caption wraps), so "cover" cut both
     sides of every picture off, headline first (TEST feedback, 2026-10-09). Show it whole, at the
     top, on the frame's own background. */
  .tw-slide-img { object-fit: contain; object-position: top center; background: var(--bx-grad-soft); }
}

.tw-q { border: 0; margin: 0 0 1.75rem; padding: 0; }
.tw-q legend { font-family: var(--bx-font-display); font-weight: 700; font-size: 1.02rem; margin-bottom: .5rem; padding: 0; }
.tw-help { color: var(--bx-text-soft); font-size: .9rem; margin: -.2rem 0 .6rem; }
.tw-suggested { font-size: .88rem; color: var(--bx-text-soft); margin: 0 0 .7rem; }
.tw-tag { display: inline-block; font-family: var(--bx-font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--bx-info-soft); color: var(--bx-info); margin-right: .35rem; }
.tw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .6rem; }
.tw-tiles--rich { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tw-tile { position: relative; display: grid; gap: .25rem; text-align: left; padding: .85rem 1rem; border: 0; border-radius: var(--bx-radius-sm, 10px); background: color-mix(in oklab, var(--bx-night-2, var(--bx-night)) 80%, transparent); box-shadow: inset 0 0 0 1px var(--bx-line); color: var(--bx-text); font: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.tw-tile span { color: var(--bx-text-soft); font-size: .84rem; line-height: 1.4; }
.tw-tile:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--bx-line-strong); }
.tw-tile.is-selected { box-shadow: inset 0 0 0 2px var(--bx-purple), 0 10px 26px -14px var(--bx-glow-violet); background: var(--bx-grad-soft); }
/* Business categories carry an example image: a screenshot of the template, or an illustration of
   the planned layout (powertools/templates/previews/). Three across on desktop, two on a phone. */
.tw-tiles--pics { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); align-items: start; }
.tw-tiles--pics .tw-tile { align-content: start; padding: .55rem .55rem .8rem; }
.tw-tiles--pics .tw-tile > :not(img) { margin-inline: .3rem; }
.tw-tile-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: calc(var(--bx-radius-sm, 10px) - 4px); box-shadow: 0 0 0 1px var(--bx-line); background: var(--bx-grad-soft); margin-bottom: .35rem; }
.tw-tiles--pics .tw-tile strong { font-size: .95rem; line-height: 1.3; }
/* Font tiles: each in its own typeface, the sample large. */
.tw-tiles--fonts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.tw-font { gap: .1rem; padding: .7rem .85rem; }
.tw-font .tw-font-sample { font-size: 1.7rem; line-height: 1.1; color: var(--bx-text); }
.tw-font strong { font-weight: 500; font-size: .88rem; }
.tw-tile-caption { font-size: .72rem; line-height: 1.35; color: var(--bx-text-soft); }
.tw-example { margin: 0; }
.tw-example img { display: block; width: 100%; max-width: 36rem; height: auto; aspect-ratio: 16 / 10; border-radius: var(--bx-radius-sm, 10px); box-shadow: 0 0 0 1px var(--bx-line-strong); background: var(--bx-grad-soft); }
.tw-example figcaption { margin-top: .55rem; font-size: .8rem; color: var(--bx-text-soft); }
.tw-badge { font-style: normal; font-family: var(--bx-font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--bx-warn); }
.tw-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem 1rem; }
.tw-switch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tw-switch-desc { flex-basis: 100%; margin: -.15rem 0 .2rem 2.9rem; color: var(--bx-text-soft); font-size: .8rem; line-height: 1.4; }
.tw-continue { margin: .25rem 0 1rem; padding-left: 1.2rem; line-height: 1.5; }
.tw-continue span { color: var(--bx-text-soft); }
.tw-color { display: flex; align-items: center; gap: 1rem; }
.tw-undecided { margin-top: .6rem; border: 0; background: none; padding: 0; font: inherit; font-size: .82rem; color: var(--bx-text-soft); text-decoration: underline dotted; cursor: pointer; }
.tw-undecided.is-on { color: var(--bx-warn); }

.tw-preview { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.tw-card { background: color-mix(in oklab, var(--bx-night) 86%, transparent); border-radius: var(--bx-radius); padding: 1.25rem; box-shadow: var(--bx-shadow); }
.tw-meter strong { display: block; font-family: var(--bx-font-display); font-size: 2.6rem; line-height: 1; background: var(--bx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tw-meter span { color: var(--bx-text-soft); font-size: .88rem; }
.tw-note { font-size: .85rem; color: var(--bx-warn); }
.tw-demo { display: flex; flex-direction: column; gap: .15rem; margin: .5rem 0; }
.tw-demo a { font-weight: 600; }
.tw-components { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; font-size: .86rem; }
.tw-components li { display: flex; justify-content: space-between; gap: .5rem; }
.tw-components em { font-style: normal; font-family: var(--bx-font-mono); font-size: .74rem; }
.tw-components .is-shipped em { color: var(--bx-ok); }
.tw-components .is-stub em { color: var(--bx-info); }
.tw-components .is-planned em { color: var(--bx-warn); }

.tw-callout { padding: .9rem 1.1rem; border-radius: var(--bx-radius-sm, 10px); background: var(--bx-warn-soft); margin-bottom: 1rem; font-size: .92rem; }
.tw-callout.is-error { background: var(--bx-danger-soft); }
.tw-summary { display: grid; gap: .1rem; margin: 0; }
.tw-summary > div { display: grid; grid-template-columns: minmax(10rem, 1fr) 1.4fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--bx-line); font-size: .9rem; }
.tw-summary dd { margin: 0; display: flex; justify-content: space-between; gap: .75rem; }
.tw-link { border: 0; background: none; padding: 0; font: inherit; color: var(--bx-text-soft); cursor: pointer; text-align: left; }
.tw-link:hover { color: var(--bx-text); text-decoration: underline; }
.tw-source { font-family: var(--bx-font-mono); font-size: .7rem; color: var(--bx-text-soft); }
.tw-source.is-explicit { color: var(--bx-ok); }
.tw-source.is-suggested { color: var(--bx-info); }
.tw-source.is-undecided, .tw-source.is-unanswered { color: var(--bx-warn); }
.tw-push { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bx-line); }
.tw-push-grid { display: grid; gap: .9rem; max-width: 32rem; }
.tw-push-grid label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; }
.tw-callout.is-ok { background: var(--bx-ok-soft); }

/* "Help - The beginners guide to professional software design": one round button per question. */
.tw-q legend { display: flex; align-items: center; gap: .5rem; }
.tw-guide-btn { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px var(--bx-line-strong); background: color-mix(in oklab, var(--bx-night-2, var(--bx-night)) 80%, transparent); color: var(--bx-text-soft); font: 700 .8rem/1 var(--bx-font-display); cursor: pointer; }
.tw-guide-btn:hover, .tw-guide-btn:focus-visible { color: var(--bx-text); outline: none; box-shadow: inset 0 0 0 2px var(--bx-purple), 0 0 0 3px color-mix(in oklab, var(--bx-purple) 30%, transparent); }
.tw-guide h3.tw-guide-topic { margin: 0 0 .75rem; font-size: 1.15rem; }
.tw-guide h4 { margin: 1rem 0 .3rem; font-size: .95rem; }
.tw-guide p { margin: 0; line-height: 1.55; }
.tw-guide code { font-size: .88em; }

/* The review step's architecture summary (WizardArchitecture.razor; the SVG is ArchitectureDiagram's). */
.tw-arch { container-type: inline-size; margin: 1.5rem 0 2rem; }
.tw-arch h3 { margin-bottom: .25rem; }
.tw-arch-body { display: grid; gap: 1rem; margin-top: .75rem; }
.tw-arch-figure { margin: 0; }
.tw-arch-figure svg { display: block; width: 100%; height: auto; border-radius: var(--bx-radius-sm); box-shadow: 0 0 0 1px var(--bx-line); }
.tw-arch-narrow { display: none; }
.tw-arch-narrow svg { max-width: 30rem; }
/* Below this width the wide diagram's text would shrink under reading size: the stacked one instead. */
@container (max-width: 44rem) { .tw-arch-wide { display: none; } .tw-arch-narrow { display: block; } }
.tw-arch-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.tw-arch-card { background: var(--bx-night-2); border-radius: var(--bx-radius-sm); padding: 1rem 1.1rem; box-shadow: inset 0 0 0 1px var(--bx-line); }
.tw-arch-card h4 { font-family: var(--bx-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-text-soft); margin: 0 0 .6rem; }
.tw-arch-pages { margin: 0; padding-left: 1.4rem; column-gap: 1.5rem; font-size: .92rem; }
.tw-arch-pages:has(li:nth-child(6)) { columns: 2 9rem; }
.tw-arch-colours { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.tw-arch-colours li { display: flex; align-items: center; gap: .6rem; }
.tw-arch-colours code { margin-left: auto; font-family: var(--bx-font-mono); font-size: .85rem; color: var(--bx-text-soft); }
.tw-arch-chip { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bx-line-strong); }
.tw-arch-text { margin-top: 1rem; font-size: .92rem; }
.tw-arch-text summary { cursor: pointer; color: var(--bx-text-soft); }
.tw-arch-text dl { margin: .5rem 0 0; }
.tw-arch-text dt { font-weight: 700; margin-top: .6rem; }
.tw-arch-text dd { margin: .1rem 0 0 1rem; }
/* The diagram follows the hub's theme toggle; the SVG's own colours and its prefers-color-scheme
   rule are for the download, where it stands alone. */
.tw-arch .isa-arch { --ia-bg: var(--bx-night-2); --ia-box: var(--bx-night); --ia-ink: var(--bx-text); --ia-soft: var(--bx-text-soft);
  --ia-line: var(--bx-line-strong); --ia-dash: var(--bx-text-soft); --ia-accent: var(--bx-purple); --ia-band: var(--bx-abyss); }
/* The live theme preview (WizardThemePreview): real components on the developer's theme. The
   app surface, card, heading font and text colours come from the scoped style element. */
.tw-live { display: grid; gap: .6rem; }
.tw-live-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tw-live-head .tw-eyebrow { margin: 0; }
.tw-live-mode { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bx-line); }
.tw-live-mode button { border: 0; background: transparent; color: var(--bx-text-soft); font: inherit; font-size: .78rem; padding: .2rem .7rem; border-radius: 999px; cursor: pointer; }
.tw-live-mode button.is-on { background: var(--bx-grad-soft); color: var(--bx-text); box-shadow: inset 0 0 0 1px var(--bx-line-strong); }
.tw-live-app { padding: .6rem; transition: background .25s ease; }
.tw-live-card { padding: 1rem; display: grid; gap: .75rem; }
/* .tw-live .tw-live-h, not .tw-live-h: the in-step copy sits inside .tw-step, whose h3 rule adds a 2rem top margin. */
.tw-live .tw-live-h { margin: 0; font-size: 1.15rem; line-height: 1.25; letter-spacing: normal; }
.tw-live-p { margin: 0; font-size: .85rem; }
.tw-live-form { display: grid; gap: .6rem; }
.tw-live-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tw-live--compact .tw-live-h, .tw-live--compact .tw-live-p, .tw-live--compact .tw-live-form { display: none; }
.tw-live--compact .tw-live-card { padding: .75rem; gap: .5rem; }
.tw-live--instep { display: none; }

/* Narrow screens. These sat at the top of the file once, so the base `.tw-rail ol { display: grid }`
   below them won: on a phone the rail stood as a column of seven icons and pushed the step 350px
   down, leaving the first screen nearly empty. On a phone the rail is one scrolling row of icons,
   pinned under the site header (.bx-nav: 72px + its 1px border, z-index 100, so the header's
   menu still opens over it) with the header's frosted band behind it, so the steps stay one tap
   away however far the page is scrolled. js/templatesRail.js keeps the current icon in view. */
@media (max-width: 1100px) { .tw-body { grid-template-columns: 13rem minmax(0, 1fr); } .tw-preview { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .tw-body { grid-template-columns: minmax(0, 1fr); }
  /* Edge to edge: no padding left or right of the icons, in the band or on the buttons; the
     row scrolls from the screen's edge to the screen's edge. Without button padding there is no
     room for the wide-screen highlight box, so the current step is the tinted icon instead. */
  .tw-rail { top: 73px; z-index: 50; margin: 0 -1rem; padding: .35rem 0;
    background: color-mix(in oklab, var(--bx-abyss) 72%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bx-line); }
  .tw-rail ol { display: flex; overflow-x: auto; gap: .6rem; scrollbar-width: none; }
  .tw-rail ol::-webkit-scrollbar { display: none; }
  .tw-rail li { flex: none; }
  .tw-rail button { position: relative; padding: .3rem 0; border-radius: 999px; background: transparent; box-shadow: none; }
  /* The current step opens into a gradient pill that names it; the icon stays flush left. */
  .tw-rail li.is-current button { padding: 0 .9rem 0 0; margin: .3rem 0; background: var(--bx-grad); color: #fff; box-shadow: 0 6px 16px -6px var(--bx-glow-pink, var(--bx-pink)); }
  .tw-rail li.is-current .tw-rail-icon { transform: none; box-shadow: none; background: transparent; }
  .tw-rail li.is-current .tw-rail-text { position: static; width: auto; height: auto; clip-path: none; font-weight: 600; font-size: .88rem; white-space: nowrap; color: #fff; }
  /* The other names stay for screen readers: the button needs its accessible name. */
  .tw-rail-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tw-rail .tw-dot { position: absolute; top: .2rem; right: -2px; margin: 0; box-shadow: 0 0 0 2px var(--bx-night); }
}
/* The review needs the width for the diagram: the preview column moves below it, as under 1100px. */
@media (min-width: 1101px) {
  .tw-body:has(.tw-review) { grid-template-columns: 15rem minmax(0, 1fr); }
  .tw-body:has(.tw-review) .tw-preview { grid-column: 2; position: static; }
  /* On the design step the side column is the live preview alone: with the other cards above it,
     the column outgrew the screen and its sticky top no longer held the preview in view. */
  .tw-preview--design > :not(.tw-live-aside--design) { display: none; }
}
/* On a phone the review's answer rows stack: two columns with a 10rem minimum pushed the page 64px wide. */
@media (max-width: 560px) { .tw-summary > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
/* The design step's live preview: in the side column above 1100px; below it that column drops
   under the step, so the step shows its own copy, pinned under the header (and under the rail on
   a phone, where only the heading, swatch row and buttons show). */
@media (max-width: 1100px) {
  .tw-live-aside--design { display: none; }
  .tw-live--instep { display: grid; position: sticky; top: calc(73px + .5rem); z-index: 40; margin: 0 0 1.5rem;
    padding: .6rem; border-radius: var(--bx-radius); background: var(--bx-night); box-shadow: var(--bx-shadow); }
  /* Pinned, it must leave the questions room: the heading, swatch row and buttons, not the form. */
  .tw-live--instep .tw-live-p, .tw-live--instep .tw-live-form { display: none; }
}
@media (max-width: 760px) {
  .tw-live--instep { top: 130px; margin: 0 -.75rem 1.25rem; padding: .45rem; }
  .tw-live--instep .tw-live-h { display: none; }
  .tw-live--instep .tw-live-card { padding: .6rem .75rem; gap: .45rem; }
  .tw-live--instep .tw-live-head { gap: .25rem; }
}