/* The server's own pages: signing in, Who can read, Connect an app, Link a phone, Settings, the consent page, and the
   legal pages. Ported from the round-3 assistant-access mockups (docs/redesign/assistant-access-mockups/round3: 06a
   on the iPhone, 06b and 06c on the Mac, 05a-05e for connecting, 03a for a link code, 07a, 07c, and 08 for who can
   read) on the design-of-record tokens (tokens.css) and the site layer (site.css). Every component here is one of
   the mockups'; the class names follow round3/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--label); font: var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
a { color: var(--tint); text-decoration: none; }
button, input { font: inherit; color: inherit; }
b { font-weight: 600; color: var(--label); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The frame: the sidebar on a computer, the brand and a menu button on a phone ── */
.srv { min-height: 100vh; }
.srv-side { padding: calc(18px + env(safe-area-inset-top)) var(--margin) 6px; }
.srv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); font: var(--f-headline); color: var(--label); min-width: 0; }
.site-brand:hover { text-decoration: none; }
.site-brand .itile { width: 30px; height: 30px; border-radius: 8px; }
.brand-words { display: flex; flex-direction: column; min-width: 0; }
.site-brand .host { font: var(--f-footnote); color: var(--tertiary); overflow-wrap: anywhere; }
.srv-main { padding: 10px var(--margin) calc(48px + env(safe-area-inset-bottom)); }

@media (min-width: 1000px) {
  .srv { display: flex; }
  .srv-side {
    width: 248px; flex: 0 0 248px; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px;
    border-right: 0.5px solid var(--hairline); height: 100vh; position: sticky; top: 0; overflow: auto;
  }
  .srv-top { padding: 0 10px 18px; }
  .srv-top .site-menu-btn { display: none; }
  /* The menu is the sidebar here: always shown, in place. */
  .srv .site-menu {
    display: flex; flex-direction: column; flex: 1 1 auto; position: static; inset: auto; margin: 0; padding: 0;
    width: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  }
  .srv .site-nav { padding: 0; gap: 4px; }
  .srv .site-account { margin-top: auto; padding: 12px 12px 0; border-top: 0; }
  .srv-main { flex: 1; min-width: 0; padding: 36px 48px; }
  .bare .srv { display: block; }
  .bare .srv-side { width: auto; height: auto; border-right: 0; position: static; padding: 22px 48px 0; }
  .bare .srv-top { padding: 0; }
}

/* ── A page: one column of groups (a section header, a card, a footer) ── */
.page { display: flex; flex-direction: column; gap: var(--gap); }
.group { display: flex; flex-direction: column; gap: 8px; }
.screen-title { font: var(--f-screen-title); letter-spacing: 0.36px; margin: 2px 0 0; }
.lede { font: var(--f-sub-body); color: var(--secondary); }
.page > .lede { margin-top: -4px; }
.section-header { font: var(--f-section-header); letter-spacing: 0.4px; text-transform: uppercase; color: var(--tertiary); padding: 10px 4px 0; }
.footer { font: var(--f-footnote); color: var(--tertiary); padding: 0 4px; }
.note { font: var(--f-footnote); color: var(--tertiary); }
@media (min-width: 1000px) {
  .page { gap: 14px; max-width: 660px; }
  .page > .lede { margin-top: 0; }
}

/* Cards and rows */
.card { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.list-card { list-style: none; margin: 0; background: var(--surface); border-radius: var(--radius); padding: 0 16px; }
.list-card > * + * { border-top: 0.5px solid var(--hairline); }
.row { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; }
.row.tall { min-height: 62px; }
.row.top { align-items: flex-start; }
a.row:hover { text-decoration: none; }
a.row:hover .t { color: var(--tint); }
.row .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t { font: var(--f-body); color: var(--label); overflow-wrap: anywhere; }
.row .t.strong { font: var(--f-row-title); }
.row .s { font: var(--f-footnote); color: var(--tertiary); overflow-wrap: anywhere; }
.row .s.attention { color: var(--attention-ink); }
.nb { white-space: nowrap; }
.row .v { font: var(--f-body); color: var(--tertiary); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.row .chev { flex: 0 0 auto; color: var(--chevron); width: 8px; height: 14px; }
.row.tint .t { color: var(--tint); }
.row form { margin: 0; flex: 0 0 auto; }
.row .acts-inline { display: flex; gap: 8px; flex: 0 0 auto; }
.row .t.quiet { color: var(--tertiary); font: var(--f-callout); }
/* A row with two actions: on a phone they go under the words, lined up with them. */
.row.wrap { flex-wrap: wrap; row-gap: 10px; }
.row.wrap > .grow { flex-basis: calc(100% - 46px); }
.row.wrap > .acts-inline, .row.wrap > form { margin-left: 46px; }
@media (min-width: 600px) {
  .row.wrap { flex-wrap: nowrap; }
  .row.wrap > .grow { flex-basis: auto; }
  .row.wrap > .acts-inline, .row.wrap > form { margin-left: 0; }
}

/* A state: a dot, a heading, and at most one line. */
.dot { width: 10px; height: 10px; border-radius: 5px; flex: 0 0 auto; display: inline-block; }
.dot.good { background: var(--good); }
.dot.neutral { background: var(--neutral-dot); }
.dot.attention { background: var(--attention); }
.state-head { display: flex; align-items: flex-start; gap: 10px; font: var(--f-headline); color: var(--label); }
.state-head .dot { margin-top: 6px; }
.state-line { font: var(--f-body); color: var(--tertiary); margin-top: 6px; }
.state-card .btn { margin-top: 14px; }

/* An intro: a tinted circle, a heading, and what it is. */
.intro { display: flex; gap: 14px; align-items: flex-start; }
.intro .circle { width: 44px; height: 44px; border-radius: 22px; background: var(--tint-fill-12); color: var(--tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.intro .circle svg { width: 22px; height: 22px; }
.intro .h { font: var(--f-headline); color: var(--label); }
.intro p { font: var(--f-body); color: var(--secondary); margin-top: 3px; }
.intro-card { display: flex; flex-direction: column; gap: 16px; }

/* "What goes to …": the inset block a card shows before the button that starts it. */
.goes { background: var(--inset); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.goes .h { font: var(--f-card-head); color: var(--label); }
.goes p, .goes li { font: var(--f-sub-body); color: var(--secondary); }
.goes ul { list-style: none; padding: 0; display: grid; gap: 6px; }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--gray-chip); font: 500 13px/1 var(--font); color: var(--secondary); white-space: nowrap; }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; width: 100%; padding: 0 16px;
  border: 0; border-radius: var(--button-radius); font: var(--f-headline); cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn.filled { background: var(--action); color: var(--on-tint); }
.btn.filled:hover { background: var(--action-pressed); }
.btn.bordered { background: var(--tint-fill-12); color: var(--tint); }
.btn.bordered:hover { background: var(--tint-fill-18); }
.btn.gray { background: var(--pill-fill); color: var(--label); }
.btn.danger { background: var(--pill-fill); color: var(--destructive-ink); }
.btn.gray:hover, .btn.danger:hover { background: var(--hairline); }
.btn.plain { color: var(--tint); background: none; min-height: var(--target); }
.btn.small { min-height: var(--target); width: auto; padding: 0 14px; font: 600 15px/20px var(--font); border-radius: 12px; }
.btn.small svg { width: 17px; height: 17px; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 600px) {
  .btn.inline { width: auto; align-self: flex-start; padding: 0 20px; }
}

/* Fields */
.field-label { display: block; font: var(--f-footnote); color: var(--tertiary); margin: 0 0 5px; }
.field {
  display: block; width: 100%; min-height: var(--target); padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--field-fill); color: var(--label); font: var(--f-callout);
}
.field::placeholder { color: var(--meta); }
.field:focus-visible { outline: 2px solid var(--tint); outline-offset: 0; border-radius: 10px; }
.field-error { font: var(--f-footnote); color: var(--destructive-ink); }
/* The design's 51-by-31 switch, as a real checkbox. */
.switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 51px; height: 31px; margin: 0; border-radius: 16px;
  background: var(--toggle-off); position: relative; cursor: pointer; transition: background 0.2s ease;
}
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: left 0.2s ease; }
.switch:checked { background: var(--good); }
.switch:checked::after { left: 22px; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 16px; }

/* Status lines: what a ceremony is doing, or what just happened. */
.status { font: var(--f-footnote); color: var(--tertiary); min-height: 18px; }
.status:empty { display: none; }
.status[data-tone="error"] { color: var(--destructive-ink); }
.notice { display: flex; align-items: center; gap: 10px; font: var(--f-sub-body); color: var(--label); }
.notice.attention { color: var(--attention-ink); }

/* The segmented picker, the spinner, and the green check */
.seg { display: flex; background: var(--pill-fill); border-radius: 10px; padding: 2px; gap: 2px; margin: 6px 0 4px; }
.seg a { flex: 1 1 0; min-height: var(--target); display: flex; align-items: center; justify-content: center; border-radius: 8px; font: 500 15px/1 var(--font); color: var(--label); text-align: center; }
.seg a:hover { text-decoration: none; background: rgba(127, 127, 127, 0.08); }
.seg a.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hairline); border-top-color: var(--meta-shape); flex: 0 0 auto; animation: srv-spin 1s linear infinite; }
@keyframes srv-spin { to { transform: rotate(360deg); } }
.check-badge { width: 24px; height: 24px; border-radius: 12px; background: var(--good); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.check-badge svg { width: 14px; height: 14px; }
.check-badge.small { width: 18px; height: 18px; }
.check-badge.small svg { width: 11px; height: 11px; }

/* Identity tiles: 34 px, radius 9, in lists; 52 px, radius 13, as a header; brand marks on their fixed tiles. */
.itile {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--gray-chip);
  box-shadow: inset 0 0 0 0.5px var(--card-border); color: var(--secondary);
  display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mono);
}
.itile svg { width: 19px; height: 19px; color: var(--tertiary); }
.itile.lg { width: 52px; height: 52px; border-radius: 13px; font-size: 18px; }
.itile.lg svg { width: 28px; height: 28px; }
.itile.own { background: var(--tint-fill-12); color: var(--tint); box-shadow: none; }
.itile.own svg { color: var(--tint); }
.itile.brand { background: #FFFFFF; box-shadow: inset 0 0 0 0.5px var(--brand-edge-light); overflow: hidden; }
.itile.brand svg { width: 58%; height: 58%; display: block; }
.itile.brand.meta svg { width: 66%; height: 66%; }
.itile.brand.on-black { background: #000000; box-shadow: inset 0 0 0 0.5px var(--brand-edge-dark); }
.itile.brand.on-ink { background: #191919; box-shadow: inset 0 0 0 0.5px var(--brand-edge-dark); }
/* A group of assistants: their marks, small, inside one tile of the usual size ("Another assistant"). */
.itile.folder { display: grid; grid-template-columns: 15px 15px; gap: 1.5px; padding: 1px; align-content: center; justify-content: center; }
.itile.folder .mini { width: 15px; height: 15px; border-radius: 4px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 0.5px var(--brand-edge-light); }
.itile.folder .mini svg { width: 10.5px; height: 10.5px; }
.itile.folder .mini.more { background: transparent; box-shadow: inset 0 0 0 1px var(--chevron); }
.itile.folder .mini.more svg { width: 10px; height: 10px; color: var(--tertiary); stroke-width: 3; }

/* ── Confirming: the iOS sheet on a phone, the alert on a computer ───── */
dialog.confirm {
  border: 0; padding: 22px 20px 16px; color: var(--label); background: var(--alert-bg);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; margin: 0; width: auto; max-width: none;
  border-radius: 34px; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18); text-align: center;
}
dialog.confirm::backdrop { background: var(--scrim); }
.confirm .h { font: var(--f-headline); }
.confirm p { font: var(--f-sub-body); color: var(--secondary); margin-top: 8px; }
.confirm .field { margin-top: 14px; text-align: left; }
.confirm .acts { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.confirm .acts button { min-height: 50px; border: 0; border-radius: 25px; font: var(--f-headline); background: var(--pill-fill); color: var(--label); cursor: pointer; }
.confirm .acts button:hover { background: var(--hairline); }
.confirm .acts .danger { color: var(--destructive-ink); }
.confirm .acts .primary { color: var(--tint); }
@media (min-width: 600px) {
  dialog.confirm { inset: 0; margin: auto; width: 300px; height: fit-content; border-radius: 30px; text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
  .confirm .acts button { min-height: 48px; border-radius: 24px; }
}

/* ── Connect an app ───────────────────────────────────────────────────── */
.connect { display: flex; flex-direction: column; gap: 14px; }
.connect .col { display: flex; flex-direction: column; gap: var(--gap); }
.connect .col > .lede { margin-top: -4px; }
.steps-card { list-style: none; padding: 2px 16px; }
.stepn { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.stepn + .stepn { border-top: 0.5px solid var(--hairline); }
.stepn .n { flex: 0 0 26px; height: 26px; border-radius: 13px; background: var(--tint-fill-12); color: var(--tint); font: 600 14px/26px var(--font); text-align: center; }
.stepn .g { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stepn .t { font: var(--f-headline); padding-top: 2px; }
/* A second way under a step's button ("Or open in the browser"): a plain link at the step's left edge. */
.stepn .btn.plain { align-self: flex-start; width: auto; padding: 0; margin-top: -4px; }
.cmd { margin: 0 0 0 -40px; padding: 12px; border-radius: 10px; background: var(--code-bg); color: var(--label); font: 12px/19px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd .k { color: var(--tint); font-weight: 600; }
.cmd.flat { margin-left: 0; }
.wait { display: flex; align-items: flex-start; gap: 10px; }
.wait .spinner, .wait .check-badge { margin-top: 1px; }
.fallback { display: grid; gap: 4px; justify-items: start; padding: 4px 4px 0; }
.fallback-head { font: var(--f-card-head); color: var(--label); }
.fallback .btn { margin-top: 6px; }
.aside .list-card { padding: 0 16px; }
.aside { display: flex; flex-direction: column; gap: 10px; }
.aside .group { gap: 6px; }
.aside .section-header { padding-top: 0; }

/* The server's address with its Copy button (05a). */
.address { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.address .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.address .label { font: var(--f-footnote); color: var(--tertiary); }
.address .value { font: var(--f-row-title); color: var(--label); overflow-wrap: anywhere; }

/* What to do in another app: numbered, that app's own labels in bold (05a-05e). */
.tool-card { display: flex; flex-direction: column; gap: 14px; }
.open-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: s; }
.open-steps li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; font: var(--f-sub-body); color: var(--secondary); }
.open-steps li::before { content: counter(s); flex: 0 0 22px; height: 22px; border-radius: 11px; background: var(--tint-fill-12); color: var(--tint); font: 600 13px/22px var(--font); text-align: center; margin-top: -1px; }
.open-steps li > span, .open-steps li > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.open-steps .cmd, .open-steps .goes { margin: 8px 0 0; }
/* A value to type in another app under that app's own label, with Copy beside it: the address card, inset in a step. */
.address.inset { margin-top: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--inset); }
.address.inset .value { font: var(--f-callout); }
.address.inset .btn { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }
.alt { font: var(--f-footnote); color: var(--tertiary); }
.alt b { color: var(--secondary); }
/* A link in a line of fine print: the line stays as it is, the place to tap grows to the usual height. */
.alt a { padding: 14px 0; }
.tool-card .wait { padding-top: 14px; border-top: 0.5px solid var(--hairline); }

/* The access key form for an assistant that can't sign in. */
.key-form { display: flex; flex-direction: column; gap: 14px; }
.key-form .switch-row { display: flex; align-items: center; gap: 12px; }
.key-form .switch-row label { flex: 1; font: var(--f-body); }

@media (min-width: 1000px) {
  .connect { flex-direction: row; gap: 28px; align-items: flex-start; }
  .connect .col { flex: 1; max-width: 660px; gap: 14px; }
  .connect .col > .lede { margin: 0; }
  .seg { max-width: 420px; }
  .steps-card { padding: 4px 20px; }
  .cmd { margin-left: 0; padding: 14px 16px; font-size: 13.5px; line-height: 21px; }
  .aside { width: 300px; flex: 0 0 300px; margin-top: 94px; }
  .tool-card { padding: 20px; }
}

/* ── Link a phone ─────────────────────────────────────────────────────── */
.qr { display: block; width: 216px; max-width: 100%; aspect-ratio: 1; margin: 2px auto 0; padding: 12px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 0.5px var(--brand-edge-light); }
.qr svg { display: block; width: 100%; height: 100%; }
.link-card { display: flex; flex-direction: column; gap: 14px; }
.code-boxes { display: flex; gap: 6px; align-items: center; }
.code-boxes .box { flex: 1 1 0; height: 48px; border-radius: 10px; background: var(--field-fill); display: flex; align-items: center; justify-content: center; font: 600 21px/1 var(--mono); color: var(--label); }
.code-boxes .gap { flex: 0 0 6px; height: 2px; background: var(--faint); border-radius: 1px; }
.server-field { min-height: var(--target); display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--field-fill); font: var(--f-callout); color: var(--label); overflow-wrap: anywhere; }

/* The page a phone without the app opens from the code (no app on this phone). */
.link-page { max-width: 520px; display: grid; gap: 8px; padding-top: 18px; }
.link-page .lede { margin-bottom: 8px; }
.link-code { padding: 18px 16px; border-radius: var(--radius); background: var(--surface); font: 600 30px/1.1 var(--mono); letter-spacing: 0.08em; text-align: center; font-variant-numeric: tabular-nums; }
.link-server { font: var(--f-footnote); color: var(--tertiary); text-align: center; }

/* ── Settings ─────────────────────────────────────────────────────────── */
.setting { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
.setting .what { display: flex; flex-direction: column; gap: 2px; }
.setting .what .t { font: var(--f-body); color: var(--label); }
.setting .what .s { font: var(--f-footnote); color: var(--tertiary); }
.setting .how { display: flex; align-items: center; gap: 8px; }
.setting .how .field { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.setting .how .unit { font: var(--f-sub-body); color: var(--tertiary); }
@media (min-width: 600px) {
  .setting .how .unit { min-width: 76px; }
}
.setting .after { font: var(--f-footnote); color: var(--tertiary); }
.setting .after.field-error { color: var(--destructive-ink); }
@media (min-width: 600px) {
  .setting { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .setting .after { grid-column: 1 / -1; }
  .setting .how { justify-content: flex-end; min-width: 220px; }
}
.form-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 16px; border-top: 0.5px solid var(--hairline); }
.passkey-add { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 14px; }
.passkey-add .line { display: grid; gap: 10px; }
@media (min-width: 600px) {
  .passkey-add .line { display: flex; align-items: center; }
  .passkey-add .line .field { flex: 1; }
}

/* ── Signing in, setting up, the consent page, and anything else that stands alone ── */
.auth { max-width: 440px; margin: 0 auto; padding-top: 18px; display: flex; flex-direction: column; gap: var(--gap); }
.auth .card { display: flex; flex-direction: column; gap: 14px; }
.auth .lede { margin-top: -6px; }
.consent-head { display: flex; align-items: center; gap: 14px; }
.list-card.flush { padding: 0; border-radius: 0; border-top: 0.5px solid var(--hairline); border-bottom: 0.5px solid var(--hairline); }
.consent-head .screen-title { margin: 0; }
.consent-acts { display: flex; flex-direction: column-reverse; gap: 10px; }
@media (min-width: 600px) {
  .consent-acts { flex-direction: row; }
  .consent-acts .btn { flex: 1 1 0; }
}
@media (min-width: 1000px) {
  .auth { padding-top: 48px; }
}

/* The legal pages */
.legal { max-width: 660px; display: flex; flex-direction: column; gap: var(--gap); padding-top: 8px; }
.legal .card { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font: var(--f-headline); }
.legal p { font: var(--f-sub-body); color: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .switch, .switch::after { transition: none; }
}