/*
 * The surface, as `docs/08_DESIGN.md` and the reference screens under `docs/design/`
 * describe it. Glass over near-black, one light source, exact numerals.
 *
 * Three rules from the charter are load-bearing here rather than decorative:
 *
 *   §1  the assistant is the arc — a ring extruding past the top edge with one
 *       luminous segment on it. No wordmark, no logo, no name.
 *   §2  colour means one thing. Blue is Katip working, warm is his turn, grey is
 *       quiet or suspended, and the state shows in three places at once: the arc, the
 *       top edge of the panel, and the button. There is no fifth colour.
 *   §9  no tab bar, no menu, no badge, no counter, no red bubble.
 *
 * Every value below comes from the reference files. Nothing here invents one.
 */

/* The two faces, kept beside the code that uses them.
 *
 * Not fetched from anywhere. A screen that has to reach a third party to be legible
 * is a screen that tells that third party every time he opens his own assistant, and
 * one that stops being itself the moment he is on a train. Both faces are under the
 * open licence that ships beside them. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/surface/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/surface/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/surface/azeret-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/surface/azeret-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --abyss: #05070b;
  --pane: rgba(146, 183, 240, 0.055);
  --pane2: rgba(146, 183, 240, 0.09);
  --edge: rgba(150, 190, 255, 0.16);
  --beam: #6faeff;
  --ice: #cfe2ff;
  --text: #e8eef6;
  --dim: #78889c;
  --warm: #ffb05c;
  --hot: #ff6b57;
  --good: #7be3b0;
  --grey: #7c8b9e;

  /* The one light, named once. Everything that carries the state reads these two, so
   * a state change is one assignment rather than a sweep through the stylesheet. */
  --light: var(--beam);
  --light-soft: rgba(111, 174, 255, 0.5);
  --light-fill: rgba(111, 174, 255, 0.3);
  --light-fill-under: rgba(111, 174, 255, 0.14);
  --light-ink: #eaf3ff;

  /* The ring, and how much of it is above the top edge.
   *
   * The reference screens give both, in dots, for each posture: in hand it is a wide
   * ring showing a shallow cap, and at the desk it is wider still and shows a little
   * more. Taken from there rather than worked out as a fraction of the window — a ring
   * in proportion to the window is a ring that swallows the first line of the
   * conversation on a wide phone, which is the whole reason these two numbers are not
   * one number. Narrower than the reference, the ring shrinks with the window. */
  --ring: min(430px, 140vw);
  --ring-shows: min(94px, 30vw);
}

/* §2: each state shows in three places at once. Setting it on the shell is what puts
 * it in all three, and there is deliberately no way to set one of them alone. */
.shell[data-light='warm'] {
  --light: var(--warm);
  --light-soft: rgba(255, 176, 92, 0.6);
  --light-fill: rgba(255, 176, 92, 0.3);
  --light-fill-under: rgba(255, 176, 92, 0.12);
  --light-ink: #fff1df;
}
.shell[data-light='hot'] {
  --light: var(--hot);
  --light-soft: rgba(255, 107, 87, 0.65);
  --light-fill: rgba(255, 107, 87, 0.28);
  --light-fill-under: rgba(255, 107, 87, 0.12);
  --light-ink: #ffe3dd;
}
.shell[data-light='grey'] {
  --light: var(--grey);
  --light-soft: rgba(124, 139, 158, 0.35);
  --light-fill: rgba(124, 139, 158, 0.22);
  --light-fill-under: rgba(124, 139, 158, 0.09);
  --light-ink: #dfe7f0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--abyss);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 620px at 22% -8%, #0e1826 0%, transparent 62%),
    radial-gradient(900px 520px at 90% 8%, #151122 0%, transparent 58%),
    #04060a;
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

input,
select {
  font: inherit;
  color: var(--text);
}

/*
  Where he is typing, said in the one blue that is already in the dictionary rather
  than in the ring a browser draws by default — which is white, which is a colour this
  screen does not have, and which lands on the largest thing on the page.
*/
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 1px solid rgba(111, 174, 255, 0.5);
  outline-offset: 1px;
}

/* ---------- the shell ---------- */

.shell {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* §1: the ring, extruding past the top of the screen, and the one luminous segment
 * turning slowly on it. This is the assistant. There is nothing else that is. */
.arc,
.seg {
  position: absolute;
  left: 50%;
  top: calc(var(--ring-shows) - var(--ring));
  width: var(--ring);
  height: var(--ring);
  border-radius: 50%;
  pointer-events: none;
}
.arc {
  transform: translateX(-50%);
  border: 1px solid rgba(150, 190, 255, 0.2);
}
.seg {
  border: 1px solid transparent;
  border-top-color: var(--light);
  transform: translateX(-50%) rotate(128deg);
  filter: drop-shadow(0 0 7px var(--light-soft));
}

/* The same light again, along the top edge of the surface. */
.gl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--light-soft), transparent);
  pointer-events: none;
}

/* ---------- the state row, which is also the way between the three surfaces ---------- */

.sys {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  /* Every surface begins *below* the ring rather than across it.
   *
   * The number is the ring's own, less this row's height, so the two cannot drift
   * apart. It is also less whatever the operating system has already put above the
   * ring — the reference screens draw a phone's own clock there and a real phone has
   * the status bar, and on a screen that has neither there is nothing between the ring
   * and the first thing he reads.
   *
   * Found by looking rather than by reasoning, twice. The first time it was the desk,
   * where the ring is nearly as wide as the surface, and the answer was written as a
   * rule for wide screens only — on the argument that in hand the ring is shallow
   * enough that a sentence clears it at the edges. It does not: at a phone's width the
   * deepest part of the cap lands squarely on the first line, and on the board it lands
   * on the middle chip, which is a bordered pill and shows it plainly. So the rule is
   * the ring's number everywhere, and the floor is what the row needs to breathe. */
  padding: max(28px, calc(var(--ring-shows) - 25px - env(safe-area-inset-top, 0px))) 0 12px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--light);
}
.sys .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Three words, shown only while he is choosing, and gone the moment he has. Not a tab
 * bar: it does not persist, it carries no icon and no count, and it is the same
 * control that was already telling him the state (§9). */
.switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 12px;
}
.switch button {
  border: 1px solid var(--edge);
  border-radius: 99px;
  padding: 7px 15px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.switch button[aria-current='true'] {
  border-color: rgba(111, 174, 255, 0.45);
  background: rgba(111, 174, 255, 0.14);
  color: var(--ice);
}

/* Constitution §7.3: an indefinite suspension is always visibly indicated. It is a
 * band rather than a word, it is on every surface, and it does not go away. */
.band {
  margin: 0 17px 10px;
  border: 1px solid rgba(124, 139, 158, 0.35);
  border-radius: 13px;
  padding: 10px 13px;
  background: linear-gradient(180deg, rgba(146, 183, 240, 0.07), rgba(146, 183, 240, 0.02));
  color: #a6b4c4;
  font-size: 12.8px;
  line-height: 1.45;
}

.flow {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 17px 26px;
}

/* ---------- what Katip says ---------- */

.it {
  max-width: 93%;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: -0.012em;
  white-space: pre-line;
}
.it.hero {
  font-size: 19px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.24;
}
.it.sm {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--dim);
}
.stamp {
  align-self: flex-end;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #4e5d70;
}

/* ---------- what he says ---------- */

/* His own words, against the edge he holds the phone by. Deliberately not a bubble
 * for Katip too: the reference screens give the assistant plain text and the operator
 * one soft panel, so a glance tells the two apart without reading either. */
.me {
  align-self: flex-end;
  max-width: 84%;
  border: 1px solid rgba(150, 190, 255, 0.14);
  border-radius: 16px 16px 5px 16px;
  padding: 9px 13px;
  background: rgba(146, 183, 240, 0.1);
  font-size: 13.5px;
  white-space: pre-line;
}

/* ---------- panels ---------- */

.pane {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 15px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--pane2), var(--pane));
}
.pane::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: -1px;
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, var(--light), transparent);
}
.tag {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light);
}
.tag .aside {
  color: #5a6a7e;
  letter-spacing: 0.14em;
}
/* A sentence of Katip's inside a panel is denser than one standing on its own — the
 * reference screens keep everything in a panel at this size, and a card that borrowed
 * the size of the conversation stopped reading as a card. */
.pane .it {
  font-size: 12.5px;
}

/* §2: warm marks the thing awaiting his decision, and only that. A card says so on
 * its own account rather than by whatever the shell's light happens to be, so it is
 * still the warm thing on the surface when everything else has gone warm with it. */
.pane.warm {
  border-color: rgba(255, 176, 92, 0.3);
}
.pane.warm::before {
  background: linear-gradient(90deg, transparent, var(--warm), transparent);
}
.tag.warm {
  color: var(--warm);
}

/* A row of the card: what it is on the left, the value on the right. */
.kv {
  display: flex;
  gap: 9px;
  margin-bottom: 3px;
  font-size: 12.5px;
}
.kv b {
  flex: 0 0 44px;
  font-weight: 400;
  color: #5a6a7e;
}

/* The day, line by line. The mark is a clock or nothing, and the column stays either
 * way so that lines with an hour and lines without still line up. */
.agenda div {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgba(150, 190, 255, 0.09);
  font-size: 12.8px;
}
.agenda div:first-child {
  border-top: none;
}
.agenda .mark {
  flex: 0 0 36px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--beam);
}
.agenda .what {
  flex: 1;
}

.acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.acts button {
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ice);
}
/* The third of the three places §2 says the state shows at once. Composed entirely
 * out of the light, so there is no way to change one of the three and not the others. */
.acts button.go {
  flex: 1;
  text-align: center;
  border-color: var(--light);
  background: linear-gradient(180deg, var(--light-fill), var(--light-fill-under));
  box-shadow: 0 0 18px -6px var(--light-soft);
  color: var(--light-ink);
}
/* The same button on a card that is his to answer. Warm on its own account, for the
 * reason the card's own edge is: §2 puts warm on the thing awaiting his decision. */
.acts button.wgo {
  flex: 1;
  text-align: center;
  border-color: rgba(255, 176, 92, 0.5);
  background: linear-gradient(180deg, rgba(255, 176, 92, 0.3), rgba(255, 176, 92, 0.12));
  box-shadow: 0 0 18px -6px rgba(255, 176, 92, 0.55);
  color: #fff1df;
}
.acts button[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ---------- the one place he speaks ---------- */

.ask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  border-top: 1px solid rgba(150, 190, 255, 0.1);
  padding: 12px 17px 18px;
}
.ask .f {
  flex: 1;
  border: 1px solid var(--edge);
  border-radius: 99px;
  padding: 10px 15px;
  background: rgba(146, 183, 240, 0.06);
  font-size: 13px;
}
.ask .f::placeholder {
  color: #5d6e82;
}
/* Deliberately *not* the light, which is the one place on this screen where that is
 * true. §2 says warm marks the thing awaiting his decision and appears nowhere else,
 * and this button is not one — it is where he speaks, present on every conversation
 * whatever Katip is doing. The reference screens settle it: on the approval screen the
 * arc, the top edge and the card's own button are warm and this one is still blue. */
.ask .m {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(111, 174, 255, 0.42);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(111, 174, 255, 0.28), rgba(111, 174, 255, 0.1));
  box-shadow: 0 0 18px -6px rgba(111, 174, 255, 0.8);
}
/* An arrow, drawn rather than fetched: a shaft and a head turned through an eighth of
 * a turn. No icon set, nothing to load, the same blue as everything else. */
.ask .m::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: #dcebff;
}
.ask .m::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 13px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #dcebff;
  border-left: 2px solid #dcebff;
  border-radius: 2px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}
.ask .m[disabled] {
  opacity: 0.45;
  cursor: default;
}

/*
  What marks off one stretch of a surface from the next: a day on the board, a group
  of settings on the settings page. Small, quiet, and in the face records are written
  in, because what it marks off is a record either way.
*/
.grp {
  margin: 16px 0 2px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4e5d70;
}

/* ---------- the board ---------- */

/*
  The three filters. Not a tab bar: a tab bar moves between surfaces, and these
  filter one stream on one surface. Blue when chosen, because blue is what Katip is
  doing and choosing a filter is not the operator's turn at anything.
*/
.chips {
  display: flex;
  gap: 7px;
  margin: 2px 0 4px;
}
.chip {
  padding: 5px 11px;
  border: 1px solid var(--edge);
  border-radius: 99px;
  font-size: 11px;
  color: var(--dim);
  background: none;
}
.chip.on {
  border-color: rgba(111, 174, 255, 0.45);
  background: rgba(111, 174, 255, 0.14);
  color: var(--ice);
  font-weight: 500;
}

.jr {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(150, 190, 255, 0.09);
}
.jr .num {
  flex: 0 0 26px;
  padding-top: 2px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--beam);
}
.jr .what {
  flex: 1;
  font-size: 12.6px;
  line-height: 1.42;
}
.jr .what .about {
  display: block;
  margin-top: 2px;
  font-size: 11.3px;
  color: var(--dim);
}
.pip {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: #3d5468;
}
.pip.run {
  background: var(--beam);
  box-shadow: 0 0 8px var(--beam);
}
.pip.you {
  background: var(--warm);
  box-shadow: 0 0 8px rgba(255, 176, 92, 0.8);
}

/*
  Reading further back. Quiet on purpose: it is the end of what is on the glass and
  not something asking to be pressed, so it carries no light and no fill.
*/
.older {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 0;
  font-size: 12px;
  color: var(--dim);
  background: none;
}
.older[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ---------- settings ---------- */

.set {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border-bottom: 1px solid rgba(150, 190, 255, 0.09);
}
.set .what {
  flex: 1;
  font-size: 12.8px;
}
.set .what .about {
  display: block;
  margin-top: 1px;
  font-size: 11.3px;
  color: var(--dim);
}
.sw {
  flex: 0 0 36px;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: rgba(150, 190, 255, 0.16);
}
.sw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9fb6ce;
}
.sw.on {
  background: rgba(111, 174, 255, 0.45);
  box-shadow: 0 0 12px -3px rgba(111, 174, 255, 0.9);
}
.sw.on::after {
  left: 19px;
  background: #eaf3ff;
}
.plain {
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--dim);
}

/*
  The field at the top of the one page (Constitution §8.1). It is how a page with no
  menu tree and no navigation is still a page you can find something on — so it sits
  above everything and belongs to no group.
*/
.search {
  width: 100%;
  margin-bottom: 4px;
  border: 1px solid var(--edge);
  border-radius: 11px;
  padding: 9px 13px;
  font-size: 12.5px;
  background: rgba(146, 183, 240, 0.06);
}
.search::placeholder {
  color: #5d6e82;
}

/*
  The fold the advanced items sit behind. Quiet, like the control that reads further
  back on the board: it is the edge of what is on the glass rather than something
  asking to be pressed, so it carries no light and no fill.
*/
.fold {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 11px 0;
  font-size: 12.8px;
  color: var(--dim);
}

/* One stretch of the page, so that narrowing it can take a heading away with its rows. */
.sec[hidden],
.set[hidden],
.fld[hidden],
.acts[hidden],
.plain[hidden] {
  display: none;
}

/*
  A setting picked from more answers than a group of switches can carry. One control on
  one row: the answers are behind it rather than spread down the page, because a page
  that has become a list of cities is a page nothing else on it can be found on.
*/
.pick {
  flex: 0 0 auto;
  max-width: 46%;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12.4px;
  background: rgba(146, 183, 240, 0.06);
}
.pick option {
  color: var(--text);
  background: #0b1018;
}

/* A setting he writes rather than taps: the row, then the field and the one button. */
.fld .set {
  border-bottom: none;
  padding-bottom: 2px;
}
/* Where a written setting stands now, told apart from what it is for: one is a fact
   about him and the other is an explanation, and two identical dim lines read as one
   sentence broken in half. Specific enough to beat the rule that dims the line above
   it — which it was not, and the two were the same grey on the glass. */
.fld .set .what .about.now {
  margin-top: 3px;
  color: var(--ice);
}
.fld .acts {
  margin: 0 0 11px;
  border-bottom: 1px solid rgba(150, 190, 255, 0.09);
  padding-bottom: 11px;
}
.fld .acts .f {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: rgba(146, 183, 240, 0.06);
}
.fld .acts .f::placeholder {
  color: #5d6e82;
}
.fld .acts button.go {
  flex: 0 0 auto;
}
.fld .plain {
  margin-top: -6px;
  padding-top: 0;
}

/* ---------- the door ---------- */

.door {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 26px 40px;
}
.door .saying {
  font-weight: 200;
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -0.035em;
}
.door .quiet {
  font-size: 13px;
  color: var(--dim);
}
.door .field {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 13px;
  background: rgba(146, 183, 240, 0.06);
}
.door .field::placeholder {
  color: #5d6e82;
}
.door .fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.door .fields[hidden] {
  display: none;
}

[hidden] {
  display: none !important;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .seg {
    animation: turn 16s linear infinite;
  }
  @keyframes turn {
    to {
      transform: translateX(-50%) rotate(488deg);
    }
  }
  /* The reference screens put it in one line: if the arc stops, the system has
   * stopped. That is the whole indication for a screen that cannot reach Katip —
   * there is no fifth colour and there must not be one (§2). */
  .shell[data-reaching='no'] .seg {
    animation: none;
  }
}

/* At the desk: the same application, wider. Two columns arrive with the surfaces that
 * fill them (`08_DESIGN.md` §3); what widens here is the shell itself. */
@media (min-width: 900px) {
  :root {
    --ring: 620px;
    --ring-shows: 100px;
  }
  .shell {
    max-width: 640px;
  }
  /* Nothing more about the ring here: the rule that keeps every surface below it is
   * written once, in the ring's own number, and follows these two values by itself. */
}