/* Voronda — the product, drawn: the app window the films play in, the close-up scenes of what it
   does, and the small working pieces on the page (switches, roles, the log, your name on it).

   Anything that *is* the product is rounded, the way real software is; the site around it stays
   square. Inside a stage every size is in --u, a hundredth of the stage's width (cqw), so a film
   or a scene keeps its proportions at any size and a phone can give it larger type. The widgets
   outside a stage are sized in rem, like the rest of the page. js/demos.js plays all of it; the
   markup is always the finished frame, which is what shows without scripts or with reduced
   motion. */

/* ---------- the stage: a desktop with the app open ---------- */

.stage { --u: 1cqw; position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 1.2cqw; background: #0d0c0c;
  box-shadow: 0 0 0 1px var(--rule); }
.app { position: absolute; left: 0; top: 0; width: 100cqw; height: 68.75cqw; }

/* The app: a desktop with your app open, its tabs down the side, the modes on top, the chat, and
   the prompt with its permissions, usage ring and model. --mh is the window's height and --ct
   where the prompt sits while the chat is empty, both in --u; --px the inset of the chat. */
.app { overflow: hidden; background: #000; color: var(--c-charcoal); }
.app__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.app::before { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(14.5% 0 0 / 0.24); pointer-events: none; }
.app__win { --mh: 52.5; --ct: 15; --px: 2.4; --side: 19; position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 5.4); width: calc(var(--u) * 90);
  height: calc(var(--u) * var(--mh)); z-index: 2; display: grid; grid-template-columns: calc(var(--u) * var(--side)) minmax(0, 1fr);
  overflow: hidden; border-radius: calc(var(--u) * 1.1);
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.28), 0 calc(var(--u) * 2.2) calc(var(--u) * 5.5) oklch(0% 0 0 / 0.5); }
/* The window is white only behind the main column, so the sidebar can show the desktop through it,
   blurred, the way a Mac's sidebar does. */
.app__win::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: calc(var(--u) * var(--side)); z-index: -1; background: var(--c-white); }
.app__side { display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); min-width: 0; padding: calc(var(--u) * 1.2) calc(var(--u) * 0.9) calc(var(--u) * 1.1);
  background: oklch(95.5% 0.01 12 / 0.82); -webkit-backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(1.25); backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(1.25);
  box-shadow: inset -1px 0 0 oklch(0% 0 0 / 0.1); color: oklch(30% 0.005 67.7); }
/* Line icons, drawn like the system's own. */
.app__ico { flex: none; width: calc(var(--u) * 1.45); height: calc(var(--u) * 1.45); fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
/* The window's three buttons, and the sidebar toggle across from them. */
.app__chrome { display: flex; align-items: center; justify-content: space-between; margin: 0 0 calc(var(--u) * 1.1); padding-inline: calc(var(--u) * 0.2);
  color: oklch(46.4% 0.013 39.4 / 0.85); }
.app__lights { display: flex; gap: calc(var(--u) * 0.62); }
.app__lights i { width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.2); }
.app__lights i:nth-child(2) { background: #febc2e; }
.app__lights i:nth-child(3) { background: #28c840; }
.app__org { display: flex; align-items: center; gap: calc(var(--u) * 0.75); min-width: 0; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.5); margin: 0 0 calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 1.2); font-weight: var(--w-display); }
/* A long name typed onto the app is cut short rather than pushing the window apart. */
.app__org > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__org > .app__ico { margin-left: auto; width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); opacity: 0.55; }
.app__logo { position: relative; background: linear-gradient(var(--c-red), var(--c-crimson)); }
.app__logo { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: calc(var(--u) * 0.55); }
/* Voronda's V, in white on red. */
.app__logo::after, .app__icon--ours::after { content: ""; position: absolute; inset: 22%; background: var(--c-white);
  clip-path: polygon(4% 14%, 32% 14%, 50% 62%, 68% 14%, 96% 14%, 59% 90%, 41% 90%); }
.app__new { display: flex; align-items: center; gap: calc(var(--u) * 0.75); margin: 0 0 calc(var(--u) * 0.6); padding: calc(var(--u) * 0.65) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.12); font-weight: var(--w-strong); background: oklch(100% 0 0 / 0.6);
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.07), 0 1px 1px oklch(0% 0 0 / 0.05); }
.app__tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 0.15); }
.app__tab { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 0.75); padding: calc(var(--u) * 0.6) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 1.12); font-weight: var(--w-ui); }
.app__tab > .app__ico { opacity: 0.7; }
.app__tab > b { margin-left: auto; min-width: calc(var(--u) * 1.7); padding: calc(var(--u) * 0.15) calc(var(--u) * 0.5); border-radius: calc(var(--u) * 0.9); text-align: center;
  font-size: calc(var(--u) * 0.95); color: var(--c-white); background: var(--c-red); transition: opacity 300ms var(--ease-out-quart), scale 400ms var(--ease-out-expo); }
.app__tab--ask, .app__tab.is-on { font-weight: var(--w-strong); background: oklch(0% 0 0 / 0.075); }
.app__tab--ask > .app__ico, .app__tab.is-on > .app__ico { color: var(--c-red); opacity: 1; }
.app__sec { margin: calc(var(--u) * 1.1) 0 0; padding: 0 calc(var(--u) * 0.8) calc(var(--u) * 0.2); font-size: calc(var(--u) * 0.92); font-weight: var(--w-strong);
  color: oklch(46.4% 0.013 39.4 / 0.9); }
.app__recent { list-style: none; margin: 0; padding: 0; display: grid; }
.app__recent li { padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: oklch(36% 0.008 50); }
/* Who is signed in, at the foot of the sidebar. */
.app__user { margin: auto 0 0; display: flex; align-items: center; gap: calc(var(--u) * 0.75); min-width: 0; padding: calc(var(--u) * 0.9) calc(var(--u) * 0.5) 0;
  border-top: 1px solid oklch(0% 0 0 / 0.08); }
.app__user > i { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; font-style: normal;
  font-weight: var(--w-display); font-size: calc(var(--u) * 1.05); color: var(--c-white); background: var(--c-charcoal); }
.app__user > span { display: grid; min-width: 0; line-height: 1.25; font-size: calc(var(--u) * 1.08); }
.app__user b { font-weight: var(--w-strong); }
.app__user span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * 0.92); color: oklch(46.4% 0.013 39.4); }
.app__main { position: relative; min-width: 0; transition: opacity 500ms var(--ease-out-quart); }

/* The modes, a segmented switch at the top; the white pill slides to the one in use. */
.app__modes { position: absolute; top: calc(var(--u) * 1.6); left: 0; right: 0; z-index: 1; width: max-content; margin: 0 auto; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; padding: calc(var(--u) * 0.3); border-radius: calc(var(--u) * 1.2); background: #ece6e7; white-space: nowrap; }
.app__mode { position: relative; z-index: 1; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.5); text-align: center; font-size: calc(var(--u) * 1.1);
  font-weight: var(--w-strong); color: var(--c-warmgray); transition: color 300ms var(--ease-out-quart); }
.app__pill { position: absolute; left: calc(var(--u) * 0.3); top: calc(var(--u) * 0.3); bottom: calc(var(--u) * 0.3); width: calc((100% - var(--u) * 0.6) / 2);
  border-radius: calc(var(--u) * 0.9); background: #fff; box-shadow: 0 1px 2px oklch(14.5% 0 0 / 0.14); transition: translate 420ms var(--ease-out-expo); }
.stage[data-mode="agent"] .app__pill { translate: 100% 0; }
.stage[data-mode="chat"] .app__mode--chat, .stage[data-mode="agent"] .app__mode--agent { color: var(--c-charcoal); }

/* The greeting, standing just above the prompt while the chat is empty. */
.app__hello { position: absolute; left: calc(var(--u) * var(--px)); right: calc(var(--u) * var(--px)); bottom: calc(var(--u) * (var(--mh) - var(--ct) + 1.6));
  margin: 0; text-align: center; font-size: calc(var(--u) * 2.3); font-weight: var(--w-display); letter-spacing: -0.02em; line-height: 1.2;
  text-wrap: balance; transition: opacity 400ms var(--ease-out-quart); }

/* The chat. The feed stands on the prompt; motion.js lifts it by --feed while it is still short. */
.app__chat { position: absolute; left: calc(var(--u) * var(--px)); right: calc(var(--u) * var(--px)); top: calc(var(--u) * 5.6); bottom: calc(var(--u) * 11.6);
  overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--u) * 2.2)); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--u) * 2.2)); }
.app__feed { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 2.2);
  transform: translateY(var(--feed, 0px)); transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.app__feed > * { flex: none; transition: opacity 450ms var(--ease-out-quart), transform 600ms var(--ease-out-expo); }
.app__me { align-self: flex-end; max-width: 62%; margin: 0; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 0.3) calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 1.25); font-weight: var(--w-strong); color: var(--c-white); background: var(--c-red); }
.app__plan { align-self: flex-start; box-sizing: border-box; width: min(100%, calc(var(--u) * 40)); display: grid; gap: calc(var(--u) * 0.6); padding: var(--u) calc(var(--u) * 1.3);
  background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); border-radius: calc(var(--u) * 0.8); box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--c-red); }
.app__plan-h { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--u); font-size: calc(var(--u) * 1.15); font-weight: var(--w-display); }
.app__steps { margin: 0; padding: 0 0 0 calc(var(--u) * 1.5); display: grid; gap: calc(var(--u) * 0.3); font-size: calc(var(--u) * 1.05); line-height: 1.35; }
.app__steps li::marker { color: var(--c-red); font-weight: var(--w-strong); }
.app__approve { display: inline-grid; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 0.4); font-size: var(--u); font-weight: var(--w-strong);
  color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); transition: color 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart); }
.app__approve > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.app__approve-a { opacity: 0; }
.app__r { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.2); }
.app__r > i { position: relative; flex: none; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; background: var(--c-red); }
.app__r > i::after { content: ""; position: absolute; left: calc(var(--u) * 0.5); top: calc(var(--u) * 0.28); width: calc(var(--u) * 0.35); height: calc(var(--u) * 0.65);
  border: solid var(--c-white); border-width: 0 calc(var(--u) * 0.18) calc(var(--u) * 0.18) 0; rotate: 45deg; }
.app__lanes, .app__file, .app__reply { margin-left: calc(var(--u) * 2.3); }
.app__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); }
.app__lane { display: grid; gap: calc(var(--u) * 0.45); align-content: start; min-width: 0; }
.app__lane b { font-size: var(--u); color: var(--c-warmgray); }
.app__lane span { padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8); font-size: var(--u); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); border-radius: calc(var(--u) * 0.45); box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--c-red); }
.app__file { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.app__pdf { margin: 0; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9); font-size: calc(var(--u) * 1.05);
  font-weight: var(--w-strong); color: var(--c-crimson); border: 1px solid var(--c-red); border-radius: calc(var(--u) * 0.5); }
.app__clip { width: calc(var(--u) * 0.75); height: calc(var(--u) * 1.2); border: calc(var(--u) * 0.2) solid currentColor; border-radius: calc(var(--u) * 0.4); }
.app__dot { color: var(--c-warmgray); }
.app__doc { width: calc(var(--u) * 5); aspect-ratio: 3 / 4; padding: calc(var(--u) * 0.6); display: flex; flex-direction: column; gap: calc(var(--u) * 0.45);
  background: #fff; border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); }
.app__doc i { display: block; height: calc(var(--u) * 0.4); background: oklch(46.4% 0.013 39.4 / 0.32); }
.app__doc i:nth-child(2n) { width: 75%; }
.app__doc i.is-hit { height: calc(var(--u) * 0.55); background: var(--c-red); transform-origin: left; transition: transform 420ms var(--ease-out-expo); }
.app__reply { display: grid; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); background: oklch(97% 0.004 5.6);
  border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); border-radius: calc(var(--u) * 0.8); }
.app__subj { margin: 0; font-size: calc(var(--u) * 1.1); font-weight: var(--w-display); }
.app__draft { margin: 0; font-size: calc(var(--u) * 1.05); line-height: 1.45; }
.app__w { transition: opacity 120ms linear; }
.app__send { justify-self: end; display: inline-grid; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 0.4); font-size: calc(var(--u) * 1.05);
  font-weight: var(--w-strong); color: var(--c-white); background: var(--c-red); }
.app__send > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.app__send-a { opacity: 0; }

/* The prompt: what you type, and under it the permissions, the model and send. */
.app__ask { position: absolute; left: calc(var(--u) * var(--px)); right: calc(var(--u) * var(--px)); bottom: calc(var(--u) * 2.2); z-index: 2;
  display: grid; gap: var(--u); padding: calc(var(--u) * 1.1) calc(var(--u) * 0.9) calc(var(--u) * 0.9) calc(var(--u) * 1.5);
  background: #fff; border: 1px solid oklch(31.8% 0.005 67.7 / 0.24); border-radius: calc(var(--u) * 1.6);
  box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1.4) oklch(14.5% 0 0 / 0.07); transition: transform 850ms cubic-bezier(0.65, 0, 0.35, 1); }
.app__field { margin: 0; min-height: calc(var(--u) * 2.2); padding-top: calc(var(--u) * 0.25); font-size: calc(var(--u) * 1.25); line-height: 1.4; }
.app__ph { color: var(--c-warmgray); }
.app__typed:empty { display: none; }
.app__caret { display: inline-block; width: calc(var(--u) * 0.16); height: 1.2em; margin: 0 calc(var(--u) * 0.15) 0 calc(var(--u) * 0.05); vertical-align: -0.22em;
  background: var(--c-red); opacity: 0; }
.app__tools { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 0.8); }
.app__chip--model { margin-left: auto; }
.app__chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 1.05); font-weight: var(--w-strong); white-space: nowrap; color: var(--c-charcoal); background: oklch(97% 0.004 5.6);
  border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); }
.app__chip--perm { color: var(--c-crimson); }
.app__chev { width: calc(var(--u) * 0.55); height: calc(var(--u) * 0.55); margin-right: calc(var(--u) * 0.15); border: solid currentColor;
  border-width: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 0; rotate: 45deg; }
.app__down { width: calc(var(--u) * 0.45); height: calc(var(--u) * 0.45); margin: 0 calc(var(--u) * 0.1) calc(var(--u) * 0.25); border: solid currentColor;
  border-width: 0 calc(var(--u) * 0.16) calc(var(--u) * 0.16) 0; rotate: 45deg; opacity: 0.6; }
.app__go { position: relative; flex: none; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border-radius: 50%; background: var(--c-red); }
.app__go::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); translate: -50% -25%;
  border: solid var(--c-white); border-width: calc(var(--u) * 0.22) 0 0 calc(var(--u) * 0.22); rotate: 45deg; }
/* The two menus, opening under their chips while the prompt waits in the middle. */
.app__menu { position: absolute; top: calc(100% + var(--u) * 0.6); z-index: 3; display: grid; gap: calc(var(--u) * 0.15); min-width: calc(var(--u) * 15);
  padding: calc(var(--u) * 0.6); border-radius: var(--u); background: #fff; border: 1px solid oklch(31.8% 0.005 67.7 / 0.18);
  box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) oklch(14.5% 0 0 / 0.16); opacity: 0; visibility: hidden;
  transform: translateY(calc(var(--u) * -0.6)) scale(0.97); transform-origin: top left;
  transition: opacity 180ms var(--ease-out-quart), transform 240ms var(--ease-out-expo), visibility 0s linear 240ms; }
.app__menu--perm { left: calc(var(--u) * 0.9); }
.app__menu--model { right: calc(var(--u) * 4.4); transform-origin: top right; }
.stage.is-menu-perm .app__menu--perm, .stage.is-menu-model .app__menu--model { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.app__menu-h { margin: 0; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.8) calc(var(--u) * 0.3); font-size: calc(var(--u) * 0.9); font-weight: var(--w-strong); color: var(--c-warmgray); }
.app__opt { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 0.6) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.5); font-size: calc(var(--u) * 1.1); font-weight: var(--w-strong); transition: background-color 150ms linear; }
.app__opt.is-hover { background: #f1ecec; }
.app__opt::after { content: ""; width: calc(var(--u) * 0.45); height: calc(var(--u) * 0.85); margin: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.2); border: solid var(--c-red);
  border-width: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0; rotate: 45deg; opacity: 0; }
.stage[data-perm="ask"] [data-opt="ask"]::after, .stage[data-perm="plan"] [data-opt="plan"]::after, .stage[data-perm="auto"] [data-opt="auto"]::after,
.stage[data-model="quick"] [data-opt="quick"]::after, .stage[data-model="deep"] [data-opt="deep"]::after { opacity: 1; }

/* The dock: frosted glass over the desktop, the apps everyone has, and yours, running. */
.app__dock { position: absolute; bottom: calc(var(--u) * 1.5); left: 50%; z-index: 3; translate: -50% 0; display: flex; gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 0.75); border-radius: calc(var(--u) * 1.9); background: oklch(100% 0 0 / 0.2);
  -webkit-backdrop-filter: blur(calc(var(--u) * 2)) saturate(1.5); backdrop-filter: blur(calc(var(--u) * 2)) saturate(1.5);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.32), 0 calc(var(--u) * 0.6) calc(var(--u) * 2.2) oklch(0% 0 0 / 0.28); }
.app__icon { position: relative; display: grid; place-items: center; overflow: visible; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2);
  border-radius: calc(var(--u) * 1); color: var(--c-charcoal); background: linear-gradient(#fdfcfc, #e6e1e1);
  box-shadow: 0 calc(var(--u) * 0.15) calc(var(--u) * 0.45) oklch(0% 0 0 / 0.28), inset 0 0 0 0.5px oklch(0% 0 0 / 0.1); }
.app__glyph { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app__icon--mail { color: var(--c-red); }
.app__icon--cal { overflow: hidden; }
.app__icon--cal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: var(--c-red); }
.app__icon--cal .app__glyph { stroke-width: 2.4; }
.app__icon--ours { overflow: visible; background: linear-gradient(var(--c-red), var(--c-crimson)); }
/* The dot under an app that is running. */
.app__icon--ours::before { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -0.6); width: calc(var(--u) * 0.42); height: calc(var(--u) * 0.42);
  border-radius: 50%; translate: -50% 0; background: oklch(100% 0 0 / 0.85); }
/* The pointer, only in the films: a Mac's black arrow with its white edge and soft shadow, which
   turns into the text beam over a field. demos.js moves it to what it clicks, along a hand's path. */
.app__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: calc(var(--u) * 1.75); height: auto; overflow: visible; opacity: 0;
  transform-origin: 0 0; translate: var(--cx, 0px) var(--cy, 0px); transition: opacity 300ms var(--ease-out-quart); will-change: translate;
  filter: drop-shadow(0 calc(var(--u) * 0.12) calc(var(--u) * 0.22) oklch(0% 0 0 / 0.45)); }
.app__arrow path { fill: #0b0b0b; stroke: #fff; stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.app__beam { display: none; }
.app__beam path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.app__beam path:first-child { stroke: #fff; stroke-width: 3; }
.app__beam path:last-child { stroke: #0b0b0b; stroke-width: 1.3; }
.app__cursor.is-text .app__arrow { display: none; }
.app__cursor.is-text .app__beam { display: inline; }
.stage.is-live .app__cursor { opacity: 1; }
.app__cursor.is-press { animation: app-press 200ms var(--ease-out-quart) both; }
@keyframes app-press { 40% { scale: 0.86; } }
@keyframes story-caret { 50% { opacity: 0; } }

/* ---------- the work film (home) ----------
   The stage carries b1 to b4 for the steps reached, with bp, ba and bs between them (the plan
   shown, approved, the reply sent). Each rule says what is not yet so (":not(.bN)"); a step's own
   timing sits on its arrival (".bN"). */
.stage--work:not(.bs) .app__send-a { opacity: 1; }
.stage--work:not(.bs) .app__send-b { opacity: 0; }
.stage--work:not(.b4) .app__r--4, .stage--work:not(.b4) .app__reply { opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--work:not(.b4) .app__w { opacity: 0; }
.stage--work:not(.b3) .app__r--3, .stage--work:not(.b3) .app__file { opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--work:not(.b3) .app__doc i.is-hit { transform: scaleX(0); }
.stage--work:not(.b3) .app__tab--docs > b { opacity: 0; scale: 0.4; }
.stage--work:not(.b2) .app__r--1, .stage--work:not(.b2) .app__r--2, .stage--work:not(.b2) .app__lanes { opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--work:not(.b2) .app__tab--inbox > b { opacity: 0; scale: 0.4; }
.stage--work:not(.ba) .app__approve { color: var(--c-white); background: var(--c-red); }
.stage--work:not(.ba) .app__approve-a { opacity: 1; }
.stage--work:not(.ba) .app__approve-b { opacity: 0; }
.stage--work:not(.bp) .app__plan { opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--work:not(.b1) .app__me { opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--work:not(.b1) .app__ask { transform: translateY(calc(var(--u) * (var(--ct) + 10.5 - var(--mh)))); }
.app__hello { opacity: 0; }
.stage--work:not(.b1) .app__hello { opacity: 1; }
.stage.is-typing .app__ph { display: none; }
.stage.is-typing .app__caret, .stage--work:not(.b1) .app__caret { opacity: 1; }
.motion .stage--work:not(.b1):not(.is-typing):not(.is-held) .app__caret { animation: story-caret 1.05s steps(1) infinite; }
.stage.b2 .app__r--1 { transition-delay: 300ms; }
.stage.b2 .app__r--2 { transition-delay: 900ms; }
.stage.b2 .app__lanes { transition-delay: 1200ms; }
.stage.b2 .app__tab--inbox > b { transition-delay: 1500ms; }
.stage.b3 .app__r--3 { transition-delay: 300ms; }
.stage.b3 .app__file { transition-delay: 700ms; }
.stage.b3 .app__doc i.is-hit { transition-delay: 1100ms; }
.stage.b3 .app__tab--docs > b { transition-delay: 900ms; }
.stage.b4 .app__r--4 { transition-delay: 300ms; }
.stage.b4 .app__reply { transition-delay: 600ms; }
.stage.b4 .app__w { transition-delay: calc(900ms + var(--i, 0) * 55ms); }

/* Between two runs of a film: it fades, everything is put back at once, and it fades in again. */
.stage.is-fade .app__main, .stage.is-fade .app__tab > b { opacity: 0; }
.stage.is-snap, .stage.is-snap * { transition: none !important; animation: none !important; }
/* Until a film starts, its first frame is not yet set: nothing shows rather than the last one. */
@media (prefers-reduced-motion: no-preference) { .js .stage--film:not(.is-live) .app__main { opacity: 0; } }

/* ---------- the demo to try ----------
   The same app with real buttons and a real field (demos.js answers them). The greeting and the
   prompt stand in the middle, as in the film before anything is asked; sending is where the
   preview ends, so they stay there. */
:where(.stage--try) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.stage--try .app__org, .stage--try .app__new, .stage--try .app__user, .stage--try .app__tab { width: 100%; text-align: left; }
.stage--try .app__org:hover, .stage--try .app__user:hover, .stage--try .app__tab:hover, .app__rec:hover { background: oklch(0% 0 0 / 0.05); }
.stage--try .app__tab.is-on:hover { background: oklch(0% 0 0 / 0.09); }
.stage--try .app__new:hover { background: #fff; }
.stage--try .app__org, .stage--try .app__user { border-radius: calc(var(--u) * 0.6); }
.stage--try .app__recent li { padding: 0; }
.app__rec.is-on { font-weight: var(--w-strong); background: oklch(0% 0 0 / 0.075); }
.app__rec { display: block; width: 100%; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.stage--try .app__mode:hover { color: var(--c-charcoal); }
.stage--try .app__chip:hover { border-color: oklch(31.8% 0.005 67.7 / 0.32); }
.stage--try .app__icon { transition: filter 160ms var(--ease-out-quart); }
.stage--try .app__icon:hover { filter: brightness(0.94); }
.stage--try button:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.stage--try .app__ask { transition: border-color 200ms var(--ease-out-quart); }
.stage--try .app__ask:focus-within { border-color: var(--c-red); }
.app__input { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-charcoal);
  font: inherit; font-size: calc(var(--u) * 1.25); line-height: 1.4; outline: none; caret-color: var(--c-red); }
.app__input::placeholder { color: var(--c-warmgray); opacity: 1; }
/* A phone zooms into a field whose type is smaller than 16px; this one is never smaller. */
@media (pointer: coarse) { .app__input { font-size: max(1rem, calc(var(--u) * 1.25)); } }
/* In the chat view the greeting and the prompt stand in the middle, as in the film before anything
   is asked; in an old chat the prompt waits at the foot; the inbox, documents and what is due
   take the whole window. */
.stage--try[data-view="ask"] .app__ask { transform: translateY(calc(var(--u) * (var(--ct) + 10.5 - var(--mh)))); }
.stage--try[data-view="ask"] .app__hello { opacity: 1; }
.stage--try:is([data-view="inbox"], [data-view="docs"], [data-view="due"]) :is(.app__ask, .app__modes, .app__hello) { display: none; }
.stage--try .app__ai { display: grid; gap: calc(var(--u) * 0.6); }
.stage--try .app__ai p { margin: 0; }
.stage--try .app__ai .app__pdf { justify-self: start; }
/* The two menus: real choices; above the prompt when it waits at the foot. */
.stage--try .app__opt { width: 100%; text-align: left; }
.stage--try .app__opt:hover { background: #f1ecec; }
.stage--try:not([data-view="ask"]) .app__menu { top: auto; bottom: calc(100% + var(--u) * 0.6); transform-origin: bottom left; }
.stage--try:not([data-view="ask"]) .app__menu--model { transform-origin: bottom right; }

/* ---------- the demo's other views ---------- */
.tv { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
.tv[hidden] { display: none; }
.tv p { margin: 0; }
.tv__list { display: grid; align-content: start; gap: calc(var(--u) * 0.6); min-height: 0; overflow: auto; padding: calc(var(--u) * 1.8) calc(var(--u) * 1.1);
  border-right: 1px solid oklch(31.8% 0.005 67.7 / 0.12); }
.tv__list--full { grid-column: 1 / -1; border-right: 0; padding: calc(var(--u) * 2.4) calc(var(--u) * 4); }
.tv__h { display: grid; gap: calc(var(--u) * 0.2); padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.5); }
.tv__h b { font-size: calc(var(--u) * 1.6); font-weight: var(--w-display); letter-spacing: -0.01em; }
.tv__h span { font-size: var(--u); color: var(--c-warmgray); }
.tv__items { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 0.25); }
.tv__item { position: relative; display: grid; gap: calc(var(--u) * 0.25); width: 100%; padding: calc(var(--u) * 0.75) calc(var(--u) * 0.9) calc(var(--u) * 0.75) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 0.6); text-align: left; transition: background-color 150ms var(--ease-out-quart); }
.tv__item:hover { background: oklch(0% 0 0 / 0.04); }
.tv__item.is-on { background: oklch(59.2% 0.241 29.2 / 0.08); box-shadow: inset calc(var(--u) * 0.25) 0 0 var(--c-red); }
.tv__item.is-unread::before { content: ""; position: absolute; left: calc(var(--u) * 0.5); top: calc(var(--u) * 1.2); width: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.5); border-radius: 50%; background: var(--c-red); }
.tv__top { display: flex; justify-content: space-between; gap: var(--u); font-size: calc(var(--u) * 1.05); }
.tv__top b { font-weight: var(--w-ui); }
.tv__item.is-unread .tv__top b { font-weight: var(--w-display); }
.tv__top span { flex: none; font-size: calc(var(--u) * 0.9); color: var(--c-warmgray); }
.tv__subj { font-size: calc(var(--u) * 1.02); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: oklch(38% 0.008 50); }
.tv__tag { justify-self: start; margin-top: calc(var(--u) * 0.15); padding: calc(var(--u) * 0.1) calc(var(--u) * 0.5); border-radius: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 0.82); font-weight: var(--w-strong); color: var(--c-crimson); box-shadow: inset 0 0 0 1px oklch(59.2% 0.241 29.2 / 0.45); }
.tv__file { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-left: calc(var(--u) * 0.9); }
.tv__file::before { display: none; }
.tv__kind { font-size: calc(var(--u) * 0.82); font-weight: var(--w-strong); color: var(--c-warmgray); }
.tv__read { position: relative; min-height: 0; overflow: auto; padding: calc(var(--u) * 2) calc(var(--u) * 2.2); }
.tv__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--u); text-align: center; font-size: calc(var(--u) * 1.1);
  color: var(--c-warmgray); }
.tv__empty[hidden], .tv__mail[hidden], .tv__doc[hidden] { display: none; }
.tv__mail { display: grid; gap: var(--u); }
.tv__mh { font-size: calc(var(--u) * 1.5); font-weight: var(--w-display); line-height: 1.2; }
.tv__mfrom { display: flex; align-items: center; gap: calc(var(--u) * 0.6); font-size: var(--u); }
.tv__mfrom > span { margin-left: auto; color: var(--c-warmgray); }
.tv__av { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); border-radius: 50%; font-style: normal;
  font-weight: var(--w-display); font-size: calc(var(--u) * 0.95); color: #fff; background: var(--c-charcoal); }
.tv__body { font-size: calc(var(--u) * 1.1); line-height: 1.5; }
.tv__draft { display: grid; gap: calc(var(--u) * 0.7); margin-top: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 0.8); background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.14); box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--c-red); }
.tv__dh { display: flex; align-items: center; gap: calc(var(--u) * 0.5); font-size: calc(var(--u) * 0.95); font-weight: var(--w-strong); color: var(--c-crimson); }
.tv__spark { width: calc(var(--u) * 0.55); height: calc(var(--u) * 0.55); rotate: 45deg; background: var(--c-red); }
.tv__dt { font-size: calc(var(--u) * 1.08); line-height: 1.5; border-radius: calc(var(--u) * 0.3); outline: none; }
.tv__dt[contenteditable] { padding: calc(var(--u) * 0.4) calc(var(--u) * 0.6); background: #fff; box-shadow: 0 0 0 1px var(--c-red); }
.tv__draft .app__pdf { justify-self: start; }
.tv__keys { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6); }
.tv__send, .tv__edit, .tv__ask, .tv__notice { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 0.45); font-size: calc(var(--u) * 1.02);
  font-weight: var(--w-strong); transition: background-color 150ms var(--ease-out-quart), color 150ms var(--ease-out-quart); }
.tv__send { color: #fff; background: var(--c-red); }
.tv__send:hover { background: var(--c-crimson); }
.tv__edit, .tv__ask { color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); }
.tv__edit:hover, .tv__ask:hover { background: oklch(59.2% 0.241 29.2 / 0.08); }
.tv__doc { display: grid; gap: calc(var(--u) * 1.2); justify-items: start; }
.tv__page { display: grid; align-content: start; gap: calc(var(--u) * 0.9); width: min(100%, calc(var(--u) * 26)); padding: calc(var(--u) * 2) calc(var(--u) * 1.9);
  border-radius: calc(var(--u) * 0.4); background: #fff; box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 2) oklch(0% 0 0 / 0.16), 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.08); }
.tv__ph { font-size: calc(var(--u) * 1.25); font-weight: var(--w-display); }
.tv__page > i { display: block; height: calc(var(--u) * 0.5); border-radius: calc(var(--u) * 0.25); background: oklch(46.4% 0.013 39.4 / 0.2); }
.tv__page > i:nth-of-type(2n) { width: 80%; }
.tv__page > i:nth-of-type(3n) { width: 92%; }
.tv__hit { font-size: calc(var(--u) * 1.05); font-weight: var(--w-strong); line-height: 1.45; }
.tv__hit span { background: oklch(59.2% 0.241 29.2 / 0.25); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tv__dues { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 0.8); }
.tv__due { display: grid; grid-template-columns: calc(var(--u) * 8.5) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 0.7); background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.14); }
.tv__when { justify-self: start; padding: calc(var(--u) * 0.2) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.4); white-space: nowrap; font-size: calc(var(--u) * 0.95);
  font-weight: var(--w-strong); color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); }
.tv__due.is-now .tv__when { color: #fff; background: var(--c-red); box-shadow: none; }
.tv__what { display: grid; gap: calc(var(--u) * 0.2); font-size: calc(var(--u) * 1.08); font-weight: var(--w-strong); }
.tv__what em { font-style: normal; font-weight: var(--w-body); font-size: calc(var(--u) * 0.92); color: var(--c-warmgray); }
.tv__notice { display: inline-grid; color: #fff; background: var(--c-red); }
.tv__notice > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.tv__notice:not(.is-done) .tv__notice-b, .tv__notice.is-done .tv__notice-a { opacity: 0; }
.tv__notice.is-done { color: var(--c-crimson); background: transparent; box-shadow: inset 0 0 0 1px var(--c-red); }

/* ---------- the tutor film (school) ----------
   A pupil asks it to do the sum; it asks back until the pupil has done it, then sets a new one.
   t1 to t6 are the messages reached. */
.app__topic { position: absolute; top: calc(var(--u) * 1.6); left: 0; right: 0; z-index: 1; width: max-content; margin: 0 auto;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.2); background: #ece6e7;
  font-size: calc(var(--u) * 1.1); font-weight: var(--w-strong); }
.app__ai { align-self: flex-start; max-width: 76%; margin: 0; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 1.2); line-height: 1.42; background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.16);
  box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--c-red); }
.app__turn { display: grid; gap: calc(var(--u) * 0.6); }
.app__turn p { margin: 0; }
.app__turn .app__task { justify-self: start; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 1.6); font-weight: var(--w-display); letter-spacing: -0.01em; color: var(--c-crimson); border: 1px dashed var(--c-red); }
.app__chip--hint { color: var(--c-crimson); }
.stage--tutor .app__go { margin-left: auto; }
.stage--tutor:not(.t1) [data-t="1"], .stage--tutor:not(.t2) [data-t="2"], .stage--tutor:not(.t3) [data-t="3"],
.stage--tutor:not(.t4) [data-t="4"], .stage--tutor:not(.t5) [data-t="5"], .stage--tutor:not(.t6) [data-t="6"] {
  opacity: 0; transform: translateY(calc(var(--u) * 0.8)); }
.stage--tutor:not(.t1) .app__ask { transform: translateY(calc(var(--u) * (var(--ct) + 10.5 - var(--mh)))); }
.stage--tutor:not(.t1) .app__hello { opacity: 1; }
.stage--tutor:not(.t1) .app__caret { opacity: 1; }
.motion .stage--tutor:not(.t1):not(.is-typing):not(.is-held) .app__caret { animation: story-caret 1.05s steps(1) infinite; }
.stage--tutor.t6 .app__task { transition: opacity 450ms var(--ease-out-quart) 500ms, transform 600ms var(--ease-out-expo) 500ms; }
.stage--tutor.is-live:not(.t6) .app__task { opacity: 0; transform: scale(0.9); }

/* ---------- steps, for anything played a step at a time ----------
   An element with data-s="n" arrives at step n. js/demos.js gives the player .is-play and then
   s1, s2 ... as each step is reached; the markup carries every step, so without it all is there. */
[data-scene] [data-s] { transition: opacity 450ms var(--ease-out-quart), transform 650ms var(--ease-out-expo); }
[data-scene].is-play:not(.s1) [data-s="1"], [data-scene].is-play:not(.s2) [data-s="2"], [data-scene].is-play:not(.s3) [data-s="3"],
[data-scene].is-play:not(.s4) [data-s="4"], [data-scene].is-play:not(.s5) [data-s="5"], [data-scene].is-play:not(.s6) [data-s="6"],
[data-scene].is-play:not(.s7) [data-s="7"], [data-scene].is-play:not(.s8) [data-s="8"] {
  opacity: 0; transform: translateY(calc(var(--u, 0.5rem) * 1.2)); }
[data-scene].is-snap, [data-scene].is-snap * { transition: none !important; animation: none !important; }
/* Words that write themselves, one after the other. */
[data-scene] .w { transition: opacity 120ms linear; transition-delay: calc(var(--i, 0) * 55ms); }
[data-scene].is-play:not(.s1) .w { opacity: 0; }

/* ---------- the frame: one close-up scene at a time, on the desktop's photograph ---------- */
.frame { position: relative; isolation: isolate; display: grid; container-type: inline-size; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: 1.2cqw; background: #0d0c0c; box-shadow: 0 0 0 1px var(--rule); }
.frame__wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: oklch(14.5% 0 0 / 0.46); pointer-events: none; }
.scene { --u: 1cqw; grid-area: 1 / 1; position: relative; display: grid; align-content: center; gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 4.5) calc(var(--u) * 5); font-size: calc(var(--u) * 2.05); line-height: 1.4; color: var(--c-charcoal); }
.scene[hidden] { display: none; }
.scene p { margin: 0; }

.sc-card { display: grid; gap: calc(var(--u) * 1.4); align-content: start; padding: calc(var(--u) * 2.8); border-radius: calc(var(--u) * 1.4);
  background: #fff; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 3.2) oklch(0% 0 0 / 0.32); }
.sc-me { justify-self: end; max-width: 84%; padding: calc(var(--u) * 1.05) calc(var(--u) * 1.6); font-weight: var(--w-strong);
  border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 0.35) calc(var(--u) * 1.5); color: var(--c-white); background: var(--c-red); }
.sc-ai { justify-self: start; display: grid; gap: calc(var(--u) * 0.9); max-width: 92%; padding: calc(var(--u) * 1.15) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 0.35);
  background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.14); }
.sc-chip { justify-self: start; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 1.6); font-weight: var(--w-strong); color: var(--c-crimson); border: 1px solid var(--c-red); border-radius: calc(var(--u) * 0.5); }
.sc-chip .sc-dot { color: var(--c-warmgray); }
.sc-clip { width: calc(var(--u) * 0.8); height: calc(var(--u) * 1.3); border: calc(var(--u) * 0.22) solid currentColor; border-radius: calc(var(--u) * 0.45); }
.sc-label { font-size: calc(var(--u) * 1.3); font-weight: var(--w-strong); color: var(--c-warmgray); }
/* A tick in a red disc: done. */
.sc-tick { position: relative; flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: var(--c-red);
  transition: background-color 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart); }
.sc-tick::after { content: ""; position: absolute; left: 36%; top: 20%; width: 24%; height: 44%; border: solid var(--c-white);
  border-width: 0 calc(var(--u) * 0.24) calc(var(--u) * 0.24) 0; rotate: 45deg; transition: opacity 200ms var(--ease-out-quart); }

/* Answers from your own files: the question, the answer with where it came from, and that page. */
.scene--ask { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 3.5); }
.scene--ask .sc-card { align-self: center; }
.sc-wait { display: flex; gap: calc(var(--u) * 0.5); padding-block: calc(var(--u) * 1.5); }
.sc-wait i { width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8); border-radius: 50%; background: var(--c-warmgray); opacity: 0.5; }
.motion .sc-wait i { animation: sc-wait 1s ease-in-out infinite; }
.motion .sc-wait i:nth-child(2) { animation-delay: 160ms; }
.motion .sc-wait i:nth-child(3) { animation-delay: 320ms; }
@keyframes sc-wait { 40% { opacity: 1; transform: translateY(calc(var(--u) * -0.4)); } }
.scene--ask.s3 .sc-wait { display: none; }
.sc-page { position: relative; display: grid; align-content: start; gap: calc(var(--u) * 1.1); aspect-ratio: 3 / 4; padding: calc(var(--u) * 2.6) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 0.5); background: #fff; rotate: 2.5deg; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 3.2) oklch(0% 0 0 / 0.32); }
.sc-page__h { font-size: calc(var(--u) * 1.8); font-weight: var(--w-display); }
.sc-page > i { display: block; height: calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.3); background: oklch(46.4% 0.013 39.4 / 0.22); }
.sc-page > i:nth-of-type(2n) { width: 78%; }
.sc-page > i:nth-of-type(3n) { width: 90%; }
.sc-page__hit { font-size: calc(var(--u) * 1.55); font-weight: var(--w-strong); line-height: 1.45; }
.sc-page__hit span { background: linear-gradient(oklch(59.2% 0.241 29.2 / 0.3), oklch(59.2% 0.241 29.2 / 0.3)) 0 0 / 100% 100% no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 800ms var(--ease-out-expo); }
[data-scene].is-play:not(.s5) .sc-page__hit span { background-size: 0% 100%; }
.sc-page__n { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.2); font-weight: var(--w-strong); color: var(--c-warmgray); }
.scene--ask .sc-page { transition: opacity 450ms var(--ease-out-quart), transform 800ms var(--ease-out-expo); }
.scene--ask.is-play:not(.s4) .sc-page { transform: translateX(calc(var(--u) * 6)) rotate(6deg); }

/* Tells you what's due: what is coming up, found in the mail, the files and the calendar; then a
   reminder for the one that matters most, with the draft one press away. */
.scene--due { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 3); }
.sc-due__h { font-weight: var(--w-display); }
/* The dates share one column, as wide as the longest in this language. */
.sc-due__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 0.9); margin: 0; padding: 0; list-style: none; }
.sc-due__i { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; column-gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 0.7); background: oklch(97% 0.004 5.6);
  border: 1px solid oklch(31.8% 0.005 67.7 / 0.14); }
.scene--due .sc-due__i[data-s] { transition: opacity 450ms var(--ease-out-quart), transform 650ms var(--ease-out-expo),
  background-color 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart); }
.sc-when { justify-self: start; padding: calc(var(--u) * 0.2) calc(var(--u) * 0.7); border-radius: calc(var(--u) * 0.45); white-space: nowrap;
  font-size: calc(var(--u) * 1.45); font-weight: var(--w-strong); color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); }
.sc-due__i:first-child .sc-when { color: var(--c-white); background: var(--c-red); box-shadow: none; }
.sc-due__t { display: grid; gap: calc(var(--u) * 0.3); min-width: 0; font-weight: var(--w-strong); line-height: 1.3; }
.sc-due__t em { font-style: normal; font-weight: var(--w-body); font-size: calc(var(--u) * 1.45); color: var(--c-warmgray); }
/* The reminder is for the third: it lights up as the reminder arrives. */
.scene--due.s4 .sc-due__i:nth-child(3) { background: oklch(59.2% 0.241 29.2 / 0.09); box-shadow: inset calc(var(--u) * 0.32) 0 0 var(--c-red); }
.sc-toast { display: grid; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.8) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.2);
  background: #fff; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 3.2) oklch(0% 0 0 / 0.32); }
.sc-toast__h { display: flex; align-items: center; gap: calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.45); font-weight: var(--w-strong); color: var(--c-warmgray); }
.sc-toast__h i { flex: none; width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: var(--c-red); }
.sc-toast__h span + span { margin-left: auto; font-weight: var(--w-body); }
.sc-toast__b { font-weight: var(--w-strong); line-height: 1.35; }
.scene--due .sc-approve { justify-self: start; }
/* It drops in from the top right, the way a notification does. */
.scene--due.is-play:not(.s4) .sc-toast { transform: translate(calc(var(--u) * 3), calc(var(--u) * -2.5)); }
.scene--due:not(.s5) .sc-approve { color: var(--c-white); background: var(--c-red); }
.scene--due.s5 .sc-approve__a, .scene--due:not(.s5) .sc-approve__b { opacity: 0; }
.motion .scene--due.is-play.s5 .sc-approve { animation: sc-press 260ms var(--ease-out-quart); }

/* Drafts the replies: it writes, a colleague changes two words, and sends. */
.scene--draft { justify-items: center; }
.sc-mail-w { width: min(100%, calc(var(--u) * 66)); gap: calc(var(--u) * 1.1); }
.sc-row { display: flex; gap: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 0.9); border-bottom: 1px solid oklch(31.8% 0.005 67.7 / 0.12); }
.sc-k { min-width: calc(var(--u) * 7); color: var(--c-warmgray); }
.sc-body { padding-block: calc(var(--u) * 0.6); line-height: 1.55; min-height: calc(var(--u) * 9); }
.sc-old, .sc-new { border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color 300ms var(--ease-out-quart); }
.scene--draft.s2:not(.s3) .sc-old { background: oklch(59.2% 0.241 29.2 / 0.28); }
.scene--draft.s3 .sc-old, .scene--draft:not(.s3) .sc-new { display: none; }
.motion .scene--draft.is-play.s3 .sc-new { animation: sc-flash 1400ms var(--ease-out-quart); }
@keyframes sc-flash { from { background-color: oklch(59.2% 0.241 29.2 / 0.3); } to { background-color: transparent; } }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--u); padding-top: calc(var(--u) * 0.6); }
.sc-who { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.55); color: var(--c-warmgray); }
.sc-who i { display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; font-style: normal;
  font-weight: var(--w-display); font-size: calc(var(--u) * 1.1); color: var(--c-white); background: var(--c-charcoal); }
.sc-send { margin-left: auto; display: inline-grid; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 0.5);
  font-weight: var(--w-strong); color: var(--c-white); background: var(--c-red); transition: background-color 300ms var(--ease-out-quart); }
.sc-send > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.scene--draft.s4 .sc-send__a, .scene--draft:not(.s4) .sc-send__b { opacity: 0; }
.scene--draft.s4 .sc-send { background: var(--c-charcoal); }
.motion .scene--draft.is-play.s4 .sc-send { animation: sc-press 260ms var(--ease-out-quart); }
@keyframes sc-press { 50% { scale: 0.94; } }

/* Does whole tasks, with your OK: the plan, approved, then done a step at a time. */
.scene--task { justify-items: center; }
.scene--task .sc-card { width: min(100%, calc(var(--u) * 62)); }
.sc-plan { display: grid; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.7); border-radius: calc(var(--u) * 0.9);
  background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.16); box-shadow: inset calc(var(--u) * 0.32) 0 0 var(--c-red); }
.sc-plan__h { display: flex; align-items: center; justify-content: space-between; gap: var(--u); font-weight: var(--w-display); }
.sc-approve { display: inline-grid; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 0.45); font-size: calc(var(--u) * 1.55);
  font-weight: var(--w-strong); color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); transition: color 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart); }
.sc-approve > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.scene--task:not(.s3) .sc-approve { color: var(--c-white); background: var(--c-red); }
.scene--task.s3 .sc-approve__a, .scene--task:not(.s3) .sc-approve__b { opacity: 0; }
.motion .scene--task.is-play.s3 .sc-approve { animation: sc-press 260ms var(--ease-out-quart); }
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1); }
.sc-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.1); }
.sc-steps em { font-style: normal; font-size: calc(var(--u) * 1.55); font-weight: var(--w-strong); color: var(--c-crimson); white-space: nowrap; }
.scene--task:not(.s4) [data-done="4"] .sc-tick, .scene--task:not(.s5) [data-done="5"] .sc-tick, .scene--task:not(.s6) [data-done="6"] .sc-tick {
  background: transparent; box-shadow: inset 0 0 0 calc(var(--u) * 0.2) oklch(31.8% 0.005 67.7 / 0.3); }
.scene--task:not(.s4) [data-done="4"] .sc-tick::after, .scene--task:not(.s5) [data-done="5"] .sc-tick::after,
.scene--task:not(.s6) [data-done="6"] .sc-tick::after { opacity: 0; }

/* The school's scenes. Asks before it tells: a conversation where the pupil does the sums. */
.scene--talk { justify-items: center; }
.scene--talk .sc-card { width: min(100%, calc(var(--u) * 56)); }
.sc-ai--good { box-shadow: inset calc(var(--u) * 0.32) 0 0 var(--c-red); }

/* Hints, never the answer: a hint, a bigger one, and the answer locked away. */
.scene--hints { justify-items: center; }
.scene--hints .sc-card { width: min(100%, calc(var(--u) * 60)); }
.sc-q { font-weight: var(--w-display); font-size: calc(var(--u) * 2); line-height: 1.25; letter-spacing: -0.01em; }
.sc-hint { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 1); align-items: start; padding: calc(var(--u) * 1) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 0.8); background: oklch(97% 0.004 5.6); border: 1px dashed oklch(59.2% 0.241 29.2 / 0.6); }
.sc-hint b { color: var(--c-crimson); white-space: nowrap; }
.sc-keys { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.8); }
.sc-key { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.55) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 1.35); font-weight: var(--w-strong); color: var(--c-crimson); box-shadow: inset 0 0 0 1px var(--c-red); }
.sc-key--locked { color: var(--c-warmgray); box-shadow: inset 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.25); text-decoration: line-through; text-decoration-thickness: 0.08em; }
.sc-lock { position: relative; width: calc(var(--u) * 1.1); height: calc(var(--u) * 0.85); margin-top: calc(var(--u) * 0.45); border-radius: calc(var(--u) * 0.2); background: currentColor; }
.sc-lock::before { content: ""; position: absolute; left: 18%; bottom: 100%; width: 64%; height: calc(var(--u) * 0.6); border: calc(var(--u) * 0.18) solid currentColor;
  border-bottom: 0; border-radius: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 0; }
.motion .scene--hints.is-play.s6 .sc-key--locked { animation: sc-shake 420ms var(--ease-out-quart); }
@keyframes sc-shake { 25% { translate: calc(var(--u) * -0.4) 0; } 50% { translate: calc(var(--u) * 0.4) 0; } 75% { translate: calc(var(--u) * -0.2) 0; } }
.sc-aside { font-size: calc(var(--u) * 1.35); color: var(--c-warmgray); }

/* Hands the task back: a new one, theirs to try, and how many they have done alone. */
.scene--back { justify-items: center; }
.scene--back .sc-card { width: min(100%, calc(var(--u) * 58)); }
.sc-turn { display: grid; gap: calc(var(--u) * 0.9); padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 0.9); border: 1px dashed var(--c-red); }
.sc-turn__task { font-size: calc(var(--u) * 3); font-weight: var(--w-display); letter-spacing: -0.02em; color: var(--c-crimson); }
.sc-turn__line { display: flex; align-items: baseline; gap: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.6); font-weight: var(--w-strong); }
.sc-turn__line i { flex: 1; height: 1px; background: oklch(31.8% 0.005 67.7 / 0.3); }
.sc-tally { display: flex; align-items: center; gap: calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.35); color: var(--c-warmgray); }
.sc-tally i { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--u) * 0.2) oklch(31.8% 0.005 67.7 / 0.3);
  transition: background-color 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart); }
.sc-tally i.is-on { background: var(--c-red); box-shadow: none; }
.sc-tally span { margin-left: calc(var(--u) * 0.5); }
.sc-tally i.is-on:nth-child(1) { transition-delay: 0ms; } .sc-tally i.is-on:nth-child(2) { transition-delay: 150ms; } .sc-tally i.is-on:nth-child(3) { transition-delay: 300ms; }
[data-scene].is-play:not(.s3) .sc-tally i.is-on { background: transparent; box-shadow: inset 0 0 0 calc(var(--u) * 0.2) oklch(31.8% 0.005 67.7 / 0.3); }

/* Shows teachers where pupils get stuck: one dot a pupil, red where they got stuck. */
.scene--class { justify-items: center; }
.scene--class .sc-card { width: min(100%, calc(var(--u) * 70)); }
.sc-class__h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u); font-weight: var(--w-display); }
.sc-class__h span { font-size: calc(var(--u) * 1.3); font-weight: var(--w-strong); color: var(--c-warmgray); }
.sc-rows { display: grid; gap: calc(var(--u) * 1.2); }
.sc-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 0.5) calc(var(--u) * 1.6);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 0.7); transition: background-color 400ms var(--ease-out-quart), box-shadow 400ms var(--ease-out-quart); }
.sc-r > span { font-size: calc(var(--u) * 1.4); font-weight: var(--w-strong); }
.sc-r > b { font-size: calc(var(--u) * 1.3); color: var(--c-crimson); white-space: nowrap; }
.sc-dots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.45); }
.sc-dots i { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); border-radius: 50%; background: oklch(46.4% 0.013 39.4 / 0.22); }
.sc-dots i.is-red { background: var(--c-red); transition: background-color 300ms var(--ease-out-quart); transition-delay: calc(var(--i, 0) * 60ms); }
.sc-r--hot { background: oklch(59.2% 0.241 29.2 / 0.08); box-shadow: inset calc(var(--u) * 0.32) 0 0 var(--c-red); }
[data-scene].is-play:not(.s5) .sc-r--hot { background: transparent; box-shadow: none; }
[data-scene].is-play:not(.s2) [data-dots="2"] i.is-red, [data-scene].is-play:not(.s3) [data-dots="3"] i.is-red,
[data-scene].is-play:not(.s4) [data-dots="4"] i.is-red { background: oklch(46.4% 0.013 39.4 / 0.22); }

/* ---------- widgets: small working pieces of the app, outside a stage ---------- */
.ui { --ui-line: oklch(31.8% 0.005 67.7 / 0.16); --ui-soft: oklch(97% 0.004 5.6); position: relative; display: grid; gap: 0.875rem; align-content: start;
  padding: 1rem; border-radius: 1rem; background: #fff; color: var(--c-charcoal); font-size: 0.9375rem; line-height: 1.45;
  box-shadow: 0 1.25rem 3rem oklch(0% 0 0 / 0.3); }
.ui p { margin: 0; }

/* A segmented switch made of radio buttons: arrow keys move it, and :has slides the white pill. */
.seg { --n: 3; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border: 0; margin: 0;
  border-radius: 0.875rem; background: #ece6e7; }
.seg--2 { --n: 2; } .seg--4 { --n: 4; }
.seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label { position: relative; z-index: 1; display: grid; place-items: center; min-height: 2.75rem; padding: 0.25rem 0.5rem; border-radius: 0.65rem;
  text-align: center; font-size: 0.875rem; font-weight: var(--w-strong); line-height: 1.2; color: var(--c-warmgray); cursor: pointer;
  transition: color 200ms var(--ease-out-quart); }
.seg label:hover { color: var(--c-charcoal); }
/* Three choices in a phone-wide card: smaller, and a long word may break rather than spill out. */
@media (max-width: 480px) { .seg label { padding-inline: 0.25rem; font-size: 0.8125rem; overflow-wrap: anywhere; hyphens: auto; } }
.seg input:checked + label { color: var(--c-charcoal); }
.seg input:focus-visible + label { outline: 2px solid var(--c-red); outline-offset: 1px; }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 0.65rem;
  background: #fff; box-shadow: 0 1px 3px oklch(14.5% 0 0 / 0.16); transition: translate 260ms var(--ease-out-quart); }
.seg:has(input:nth-of-type(2):checked)::before { translate: 100% 0; }
.seg:has(input:nth-of-type(3):checked)::before { translate: 200% 0; }
.seg:has(input:nth-of-type(4):checked)::before { translate: 300% 0; }
@supports not selector(:has(*)) {
  .seg::before { display: none; }
  .seg input:checked + label { background: #fff; }
}

.ui-me { justify-self: end; max-width: 86%; padding: 0.6rem 0.9rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; font-weight: var(--w-strong); color: #fff; background: var(--c-red); }
.ui-ai { justify-self: start; display: grid; gap: 0.6rem; max-width: 94%; padding: 0.65rem 0.9rem; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
  background: var(--ui-soft); border: 1px solid var(--ui-line); }
.ui-keys { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ui-key { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0.3rem 0.85rem; border-radius: 0.5rem; font-size: 0.875rem;
  font-weight: var(--w-strong); color: #fff; background: var(--c-red); }
.ui-key--quiet { color: var(--c-charcoal); background: transparent; box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-plan { display: grid; gap: 0.5rem; padding: 0.75rem 0.9rem; border-radius: 0.75rem; background: var(--ui-soft); border: 1px solid var(--ui-line);
  box-shadow: inset 3px 0 0 var(--c-red); }
.ui-plan__h { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: var(--w-display); }
.ui-plan ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.2rem; }
.ui-plan li::marker { color: var(--c-red); font-weight: var(--w-strong); }
.ui-done { display: flex; align-items: center; gap: 0.6rem; }
/* A tick in a red disc, drawn with borders: the policy allows no data: images. */
.ui-tick { position: relative; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c-red); }
.ui-tick::after { content: ""; position: absolute; left: 0.4rem; top: 0.22rem; width: 0.3rem; height: 0.55rem; border: solid #fff;
  border-width: 0 2px 2px 0; rotate: 45deg; }
.ui-note { font-size: 0.8125rem; color: var(--c-warmgray); }

/* ---------- What we do: the pieces beside "how we work" ----------
   Who you talk to; a new request waiting for your yes; what it does and what it won't do alone;
   the checks before anyone relies on it. demos.js plays the last three once, as they arrive. */
.ui-people { gap: 0.8rem; }
.ui-person { display: flex; align-items: center; gap: 0.75rem; }
.ui-person i { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-style: normal;
  font-weight: var(--w-display); color: #fff; background: var(--c-charcoal); }
.ui-person i.is-red { background: var(--c-red); }
.ui-person > span { display: grid; line-height: 1.3; }
.ui-person b { font-weight: var(--w-strong); }
.ui-person span span { font-size: 0.8125rem; color: var(--c-warmgray); }
.ui-req__card { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: 0.75rem; background: var(--ui-soft); border: 1px solid var(--ui-line);
  box-shadow: inset 3px 0 0 var(--c-red); }
.ui-req__item { font-weight: var(--w-strong); }
.ui-req__ok { display: inline-grid; transition: color 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart), box-shadow 250ms var(--ease-out-quart); }
.ui-req__ok > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms var(--ease-out-quart); }
.ui-req__not { transition: opacity 250ms var(--ease-out-quart); }
.ui-req.s2 .ui-req__ok { color: var(--c-crimson); background: transparent; box-shadow: inset 0 0 0 1px var(--c-red); }
.ui-req.s2 .ui-req__a, .ui-req:not(.s2) .ui-req__b { opacity: 0; }
.ui-req.s2 .ui-req__not { opacity: 0.4; }
.motion .ui-req.is-play.s2 .ui-req__ok { animation: sc-press 260ms var(--ease-out-quart); }
.ui-can { gap: 0.6rem; }
.ui-can__i { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.65rem; padding: 0.6rem 0.75rem; border-radius: 0.7rem; background: var(--ui-soft);
  border: 1px solid var(--ui-line); }
.ui-can__i > span { flex: 1 1 10rem; min-width: 0; }
.ui-can__i em { font-style: normal; font-size: 0.8125rem; font-weight: var(--w-strong); color: var(--c-warmgray); white-space: nowrap; }
.ui-can__i--no em { color: var(--c-crimson); }
.ui-can__what { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--c-red);
  transition: text-decoration-color 600ms var(--ease-out-quart); }
.ui-can:not(.s3) .ui-can__what { text-decoration-color: transparent; }
/* A cross in a red ring: not this, not alone. */
.ui-x { position: relative; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-red); }
.ui-x::before, .ui-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 2px; border-radius: 1px; background: var(--c-red);
  translate: -50% -50%; rotate: 45deg; }
.ui-x::after { rotate: -45deg; }
.ui-test { gap: 0.6rem; }
.ui-test__ok { justify-self: start; margin-top: 0.3rem; padding: 0.35rem 0.85rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: var(--w-strong);
  color: #fff; background: var(--c-red); }

/* Permissions: what it does before it acts, in each of the three modes. */
.perm__view { display: none; gap: 0.75rem; }
.perm:has(#perm-ask:checked) .perm__view--ask, .perm:has(#perm-plan:checked) .perm__view--plan,
.perm:has(#perm-auto:checked) .perm__view--auto { display: grid; }
@supports not selector(:has(*)) { .perm__view--plan { display: grid; } }
.motion .perm__view, .motion .roles .ui-file, .motion .settings__say > * { animation: ui-in 280ms var(--ease-out-quart); }
@keyframes ui-in { from { opacity: 0; transform: translateY(6px); } }

/* What it does, which model and where: features as chips to tick, counted as they are ticked
   (a CSS counter, so it works without scripts), and the model and the place as switches. */
.build { counter-reset: feat; gap: 1rem; }
.build__g { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.build__g legend { margin-bottom: 0.5rem; padding: 0; font-size: 0.8125rem; font-weight: var(--w-strong); color: var(--c-warmgray); }
.build__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chips input:checked { counter-increment: feat; }
.chips label { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.85rem 0.35rem 0.65rem; border-radius: 0.65rem;
  border: 1px solid var(--ui-line); background: var(--ui-soft); font-size: 0.875rem; font-weight: var(--w-strong); line-height: 1.2; cursor: pointer;
  transition: background-color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart); }
.chips label:hover { border-color: oklch(31.8% 0.005 67.7 / 0.4); }
/* A plus before it is picked, a tick once it is. */
.chips label::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; background:
  linear-gradient(currentColor, currentColor) 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% / 2px 100% no-repeat;
  opacity: 0.55; }
.chips input:checked + label { color: #fff; background: var(--c-red); border-color: var(--c-red); }
.chips input:checked + label::before { width: 0.35rem; height: 0.65rem; margin: 0 0.2rem 0.2rem; background: none; border: solid #fff;
  border-width: 0 2px 2px 0; rotate: 45deg; opacity: 1; }
.chips input:focus-visible + label { outline: 2px solid var(--c-red); outline-offset: 2px; }
/* A feature of your own: typed in, added as a chip already picked. */
.build__g > * { min-width: 0; }
.build__add { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.build__add input { flex: 1; width: 100%; min-width: 0; min-height: 2.5rem; margin: 0; padding: 0.35rem 0.8rem; border-radius: 0.65rem;
  border: 1px dashed oklch(31.8% 0.005 67.7 / 0.4); background: #fff; color: var(--c-charcoal); font: inherit; font-size: 0.875rem; }
.build__add input::placeholder { color: var(--c-warmgray); opacity: 1; }
.build__add input:focus { outline: none; border-style: solid; border-color: var(--c-red); }
.build__plus { flex: none; min-height: 2.5rem; padding: 0.35rem 1.05rem; border: 0; border-radius: 0.65rem; background: var(--c-charcoal); color: #fff;
  font: inherit; font-size: 0.875rem; font-weight: var(--w-strong); cursor: pointer; transition: background-color 160ms var(--ease-out-quart); }
.build__plus:hover { background: var(--c-red); }
.build__plus:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.build__add input:disabled, .build__plus:disabled { opacity: 0.45; cursor: not-allowed; }
.build__note { font-size: 0.8125rem; color: var(--c-warmgray); }
.motion .chips label.is-own { animation: ui-in 260ms var(--ease-out-quart); }
html:not(.js) .build__add { display: none; }
.build__sum { display: flex; align-items: baseline; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--ui-line); font-weight: var(--w-strong); }
.build__n { font-size: 1.5rem; font-weight: var(--w-display); color: var(--c-red); font-variant-numeric: tabular-nums; }
.build__n::after { content: counter(feat); }
@media (max-width: 560px) { .build__row { grid-template-columns: minmax(0, 1fr); } }

/* Roles: the same files, and who may open which. data-for lists the roles that may. */
.ui-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ui-file { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.45rem 0.75rem; border-radius: 0.6rem;
  background: var(--ui-soft); border: 1px solid var(--ui-line); font-weight: var(--w-strong); }
.ui-file::before { content: ""; flex: none; width: 1.15rem; height: 0.9rem; border-radius: 2px 3px 3px 3px; background: var(--c-red);
  clip-path: polygon(0 0, 42% 0, 54% 18%, 100% 18%, 100% 100%, 0 100%); }
.ui-file__s { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--c-warmgray); white-space: nowrap; }
.ui-file__no { display: none; }
.ui-lock { position: relative; width: 0.7rem; height: 0.55rem; margin-top: 0.3rem; border-radius: 2px; background: currentColor; }
.ui-lock::before { content: ""; position: absolute; left: 15%; bottom: 100%; width: 70%; height: 0.38rem; border: 2px solid currentColor; border-bottom: 0;
  border-radius: 0.4rem 0.4rem 0 0; box-sizing: border-box; }
.roles:has(#role-desk:checked) .ui-file:not([data-for~="desk"]), .roles:has(#role-acc:checked) .ui-file:not([data-for~="acc"]),
.roles:has(#role-head:checked) .ui-file:not([data-for~="head"]), .roles:has(#role-pupil:checked) .ui-file:not([data-for~="pupil"]),
.roles:has(#role-teacher:checked) .ui-file:not([data-for~="teacher"]), .roles:has(#role-admin:checked) .ui-file:not([data-for~="admin"]) {
  color: var(--c-warmgray); background: transparent; border-style: dashed; }
.roles:has(#role-desk:checked) .ui-file:not([data-for~="desk"])::before, .roles:has(#role-acc:checked) .ui-file:not([data-for~="acc"])::before,
.roles:has(#role-head:checked) .ui-file:not([data-for~="head"])::before, .roles:has(#role-pupil:checked) .ui-file:not([data-for~="pupil"])::before,
.roles:has(#role-teacher:checked) .ui-file:not([data-for~="teacher"])::before, .roles:has(#role-admin:checked) .ui-file:not([data-for~="admin"])::before {
  background: oklch(46.4% 0.013 39.4 / 0.35); }
.roles:has(#role-desk:checked) .ui-file:not([data-for~="desk"]) .ui-file__ok, .roles:has(#role-acc:checked) .ui-file:not([data-for~="acc"]) .ui-file__ok,
.roles:has(#role-head:checked) .ui-file:not([data-for~="head"]) .ui-file__ok, .roles:has(#role-pupil:checked) .ui-file:not([data-for~="pupil"]) .ui-file__ok,
.roles:has(#role-teacher:checked) .ui-file:not([data-for~="teacher"]) .ui-file__ok, .roles:has(#role-admin:checked) .ui-file:not([data-for~="admin"]) .ui-file__ok { display: none; }
.roles:has(#role-desk:checked) .ui-file:not([data-for~="desk"]) .ui-file__no, .roles:has(#role-acc:checked) .ui-file:not([data-for~="acc"]) .ui-file__no,
.roles:has(#role-head:checked) .ui-file:not([data-for~="head"]) .ui-file__no, .roles:has(#role-pupil:checked) .ui-file:not([data-for~="pupil"]) .ui-file__no,
.roles:has(#role-teacher:checked) .ui-file:not([data-for~="teacher"]) .ui-file__no, .roles:has(#role-admin:checked) .ui-file:not([data-for~="admin"]) .ui-file__no { display: inline-flex; }

/* The activity log: dark, like the server it lives on. Lines arrive once, when it comes into view. */
.log { --u: 0.5rem; list-style: none; margin: 0; padding: 0.6rem 1.1rem; display: grid; border-radius: 1rem; background: #151313;
  border: 1px solid oklch(92.7% 0.007 5.6 / 0.12); color: var(--c-white); font-size: 0.875rem; line-height: 1.4; }
.log li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid oklch(92.7% 0.007 5.6 / 0.08); }
.log li:last-child { border-bottom: 0; }
.log time { font-variant-numeric: tabular-nums; font-weight: var(--w-strong); color: var(--c-petal); }

/* Your name on it: a desktop with the app open, carrying the name being typed beside it. Every
   colour, face and corner of it is a --sk-* property with Voronda's own look as its fallback, so
   a design (the home page's .look, below) is only a list of values. A property left unset with no
   fallback (colour, font) is simply inherited. */
.mini { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 1rem; container-type: inline-size;
  box-shadow: 0 0 0 1px var(--rule); background: var(--sk-desk, none); }
.mini__wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: var(--sk-wall, 1); }
.mini__win { position: absolute; left: 7%; right: 7%; top: 10%; bottom: 0; display: grid; grid-template-columns: 31% minmax(0, 1fr);
  border: var(--sk-win-line, 0); border-bottom: 0; border-radius: var(--sk-r-win, 2.2cqw) var(--sk-r-win, 2.2cqw) 0 0;
  background: var(--sk-win, #fff); box-shadow: var(--sk-win-shadow, none); color: var(--sk-ink, var(--c-charcoal)); font-family: var(--sk-font); overflow: hidden; }
.mini__side { display: grid; align-content: start; gap: 2.4cqw; padding: 3cqw 2.4cqw; background: var(--sk-side, #e3dcdd); color: var(--sk-side-ink);
  border-right: var(--sk-side-line, 0); -webkit-backdrop-filter: var(--sk-glass, none); backdrop-filter: var(--sk-glass, none); }
.mini__org { display: flex; align-items: center; gap: 1.6cqw; min-width: 0; font-weight: var(--sk-org-w, var(--w-display)); font-size: max(0.75rem, 2.4cqw);
  letter-spacing: var(--sk-org-track, normal); }
.mini__org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__logo { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: var(--sk-r-logo, 1.3cqw); background: var(--sk-accent, var(--c-red));
  color: var(--sk-on-accent, var(--c-white)); font-style: normal; font-weight: var(--sk-org-w, var(--w-display)); font-size: max(0.6875rem, 2.6cqw); }
.mini__logo:empty::after { content: ""; width: 56%; height: 56%; background: var(--sk-on-accent, var(--c-white));
  clip-path: polygon(4% 14%, 32% 14%, 50% 62%, 68% 14%, 96% 14%, 59% 90%, 41% 90%); }
.mini__lights { display: flex; gap: 1cqw; margin-bottom: 0.6cqw; }
.mini__lights i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.2); }
.mini__lights i:nth-child(2) { background: #febc2e; }
.mini__lights i:nth-child(3) { background: #28c840; }
/* Sidebar rows: an icon and a line of text, the first one chosen. */
.mini__row { display: flex; align-items: center; gap: 1.4cqw; height: 3.6cqw; padding: 0 1.2cqw; border-radius: var(--sk-r-row, 0.9cqw); }
.mini__row::before { content: ""; flex: none; width: 2cqw; height: 2cqw; border-radius: var(--sk-r-ico, 0.55cqw); background: var(--sk-row-ico, oklch(46.4% 0.013 39.4 / 0.38)); }
.mini__row::after { content: ""; width: 62%; height: 1.1cqw; border-radius: var(--sk-r-ico, 0.55cqw); background: var(--sk-row-line, oklch(46.4% 0.013 39.4 / 0.24)); }
.mini__row:nth-of-type(2)::after { width: 48%; }
.mini__row:nth-of-type(3)::after { width: 70%; }
.mini__row:nth-of-type(4)::after { width: 40%; }
.mini__row:first-of-type { background: var(--sk-row-on, oklch(0% 0 0 / 0.075)); }
.mini__row:first-of-type::before { background: var(--sk-row-on-ico, var(--c-red)); }
.mini__row:first-of-type::after { background: var(--sk-row-on-line, var(--sk-row-line, oklch(46.4% 0.013 39.4 / 0.24))); }
.mini__main { display: grid; align-content: center; gap: 3cqw; padding: 4cqw; text-align: var(--sk-align, center); background: var(--sk-main, none); }
.mini__hello { font-weight: var(--sk-hello-w, var(--w-display)); font-size: max(0.875rem, var(--sk-hello-size, 3.6cqw)); letter-spacing: var(--sk-hello-track, -0.02em);
  line-height: var(--sk-hello-lh, 1.15); border-top: var(--sk-hello-rule, 0); padding-top: var(--sk-hello-pad, 0); }
.mini__field { height: 7cqw; border-radius: var(--sk-r-field, 2cqw); border: var(--sk-field-line, 1px solid oklch(31.8% 0.005 67.7 / 0.22)); background: var(--sk-field, none);
  box-shadow: var(--sk-field-shadow, 0 0.6cqw 2cqw oklch(14.5% 0 0 / 0.07)); }
/* Only Soft Swiss draws these: the clay behind the window, and the brush stroke under the greeting. */
.mini__clay, .mini__pill { position: absolute; display: var(--sk-clay, none); }
.mini__brush { display: var(--sk-brush, none); justify-self: start; width: 62%; height: auto; margin-top: -1.4cqw; overflow: visible; }

/* ---------- fully custom, in your design (home page) ----------
   The little app in four designs, a client's own and not Voronda's: Voronda's look (the default),
   Soft Swiss (the owner's style: Swiss grid and Helvetica, warm paper grain, one imperfect brush
   stroke, a frosted glass sidebar over a soft clay ball), a calm clinic and a bold one. Only colours,
   type, corners, surfaces and accents change, never the content. Only demos.js changes it, by
   data-look on .look, at the half-turn of its flip; without it, or with reduced motion, it stands
   in Voronda's own. The line under it names the design showing and marks its place in four dots. */
.look { display: grid; gap: var(--s-3); min-width: 0; }
.look .mini { --grain: url(../assets/img/grain.svg) 0 0 / 160px; }
.look[data-look="swiss"] .mini {
  --sk-wall: 0; --sk-desk: var(--grain), #eee7da; --sk-clay: block; --sk-brush: block;
  --sk-font: "Helvetica Neue", Helvetica, Arial, sans-serif; --sk-ink: #1d1a17;
  --sk-win: transparent; --sk-r-win: 0.8cqw; --sk-win-line: 1px solid rgb(255 255 255 / 0.7); --sk-win-shadow: 0 2.4cqw 6cqw rgb(60 40 20 / 0.16);
  --sk-side: var(--grain), rgb(255 250 242 / 0.34); --sk-glass: blur(14px) saturate(140%);
  --sk-org-w: 700; --sk-org-track: -0.02em; --sk-accent: #1d1a17; --sk-on-accent: #eee7da; --sk-r-logo: 0.6cqw;
  --sk-r-row: 0.5cqw; --sk-r-ico: 0; --sk-row-ico: rgb(29 26 23 / 0.42); --sk-row-line: rgb(29 26 23 / 0.22);
  --sk-row-on: rgb(255 250 242 / 0.55); --sk-row-on-ico: #dc3b26;
  --sk-main: var(--grain), linear-gradient(90deg, rgb(29 26 23 / 0.07) 1px, transparent 1px) 0 0 / calc(100% / 6) 100% content-box border-box, #f5efe5;
  --sk-align: left; --sk-hello-w: 700; --sk-hello-size: 4.4cqw; --sk-hello-track: -0.045em; --sk-hello-lh: 0.95;
  --sk-hello-rule: 0.5cqw solid #1d1a17; --sk-hello-pad: 1.6cqw;
  --sk-r-field: 0.6cqw; --sk-field-line: 1px solid rgb(29 26 23 / 0.55); --sk-field: rgb(255 250 242 / 0.7); --sk-field-shadow: none; }
.look[data-look="clinic"] .mini {
  --sk-wall: 0; --sk-desk: radial-gradient(120% 90% at 85% 0%, #f6fafc, transparent 60%), linear-gradient(165deg, #e4eff3, #cddfe6);
  --sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --sk-ink: #1f3441;
  --sk-win: #fff; --sk-r-win: 3cqw; --sk-win-shadow: 0 1cqw 5cqw rgb(30 72 92 / 0.16);
  --sk-side: #f3f7f9; --sk-side-line: 1px solid #e2ebef;
  --sk-org-w: 600; --sk-org-track: -0.01em; --sk-accent: #0d7a85; --sk-on-accent: #fff; --sk-r-logo: 50%;
  --sk-r-row: 99px; --sk-r-ico: 99px; --sk-row-ico: rgb(31 52 65 / 0.26); --sk-row-line: rgb(31 52 65 / 0.15);
  --sk-row-on: #e0f0f1; --sk-row-on-ico: #0d7a85; --sk-row-on-line: rgb(13 122 133 / 0.34);
  --sk-hello-w: 600; --sk-hello-size: 3.5cqw; --sk-hello-track: -0.015em; --sk-hello-lh: 1.2;
  --sk-r-field: 99px; --sk-field-line: 1px solid #cfdee5; --sk-field: #f7fbfc; --sk-field-shadow: none; }
.look[data-look="bold"] .mini {
  --sk-wall: 0; --sk-desk: #ffd60a;
  --sk-font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sk-ink: #111;
  --sk-win: #fff; --sk-r-win: 0; --sk-win-shadow: 0 0 0 0.5cqw #111, 1.4cqw 1.4cqw 0 0.5cqw #111;
  --sk-side: #111; --sk-side-ink: #fff;
  --sk-org-w: 800; --sk-org-track: -0.03em; --sk-accent: #ffd60a; --sk-on-accent: #111; --sk-r-logo: 0;
  --sk-r-row: 0; --sk-r-ico: 0; --sk-row-ico: rgb(255 255 255 / 0.45); --sk-row-line: rgb(255 255 255 / 0.28);
  --sk-row-on: #ffd60a; --sk-row-on-ico: #111; --sk-row-on-line: rgb(17 17 17 / 0.55);
  --sk-align: left; --sk-hello-w: 800; --sk-hello-size: 3.9cqw; --sk-hello-track: -0.04em; --sk-hello-lh: 1.05;
  --sk-r-field: 0; --sk-field-line: 0.45cqw solid #111; --sk-field: #fff; --sk-field-shadow: 0.9cqw 0.9cqw 0 #ffd60a; }
/* Soft Swiss: one clay ball behind the window's corner, so the glass sidebar has something to
   blur, and a sage pill half under its top edge; the brush stroke, tapered by three strokes. */
.mini__clay { left: -4cqw; top: 1.5cqw; width: 30cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f59c84 0%, #dc3b26 46%, #a2251a 100%);
  box-shadow: inset -2.4cqw -3.2cqw 5cqw rgb(110 30 10 / 0.35), inset 2cqw 2.4cqw 4cqw rgb(255 220 200 / 0.55), 2cqw 3cqw 5cqw rgb(120 60 30 / 0.28); }
.mini__pill { right: 3cqw; top: 2.2cqw; width: 19cqw; aspect-ratio: 2.6; border-radius: 99px; rotate: -12deg; background: linear-gradient(165deg, #d3dcc2, #93a283);
  box-shadow: inset -1.2cqw -1.6cqw 2.6cqw rgb(60 80 40 / 0.28), inset 1.2cqw 1.4cqw 2cqw rgb(255 255 255 / 0.6), 1.6cqw 2.4cqw 4cqw rgb(80 90 60 / 0.25); }
.mini__brush path { fill: none; stroke: #1b1815; stroke-linecap: round; }
.mini__brush path:nth-child(1) { stroke-width: 16; stroke-dasharray: 78 200; }
.mini__brush path:nth-child(2) { stroke-width: 10; stroke-dasharray: 92 200; opacity: 0.9; }
.mini__brush path:nth-child(3) { stroke-width: 5; stroke-dasharray: 100 200; opacity: 0.8; }
/* The line under it: four dots, the one showing filled, and its name. Plain text, not a control. */
.look__name { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--t-small); font-weight: var(--w-strong); color: var(--ink-muted); }
.look__dots { display: flex; gap: 0.3rem; }
.look__dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rule-firm); }
.look__name [data-n] { display: none; }
.look:not([data-look]) .look__dots i:first-child, .look[data-look="own"] .look__dots i:nth-child(1), .look[data-look="swiss"] .look__dots i:nth-child(2),
.look[data-look="clinic"] .look__dots i:nth-child(3), .look[data-look="bold"] .look__dots i:nth-child(4) { background: var(--c-red); }
.look:not([data-look]) [data-n="own"], .look[data-look="own"] [data-n="own"], .look[data-look="swiss"] [data-n="swiss"],
.look[data-look="clinic"] [data-n="clinic"], .look[data-look="bold"] [data-n="bold"] { display: inline; }

/* Teachers' settings: subjects on and off, and quiet during a test. */
.settings__rows { display: grid; gap: 0.25rem; }
.settings__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  border-radius: 0.6rem; background: var(--ui-soft); font-weight: var(--w-strong); cursor: pointer; }
.settings__row b { font-size: 0.8125rem; color: var(--c-warmgray); }
.settings__row { transition: background-color 160ms var(--ease-out-quart); }
.settings__row:hover { background: #efe9ea; }
.tog { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 2.75rem; height: 1.6rem; margin: 0; border-radius: 1rem;
  background: #cfc7c8; cursor: pointer; transition: background-color 200ms var(--ease-out-quart); }
.tog::after { content: ""; position: absolute; left: 0.2rem; top: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px oklch(14.5% 0 0 / 0.25); transition: translate 220ms var(--ease-out-quart); }
.tog:checked { background: var(--c-red); }
.tog:checked::after { translate: 1.15rem 0; }
.tog:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.settings__say > * { display: none; }
.settings:not(:has(#set-test:checked)) .settings__say > :first-child, .settings:has(#set-test:checked) .settings__say > :last-child { display: grid; }
@supports not selector(:has(*)) { .settings__say > :first-child { display: grid; } }

/* The film, the still and the demo to try on a phone: the window fills the frame, no side tabs or
   dock, and every size in the app is two and a half times larger, so its words can be read. */
@media (max-width: 640px) {
  :is(.intro, .tryit) .stage { --u: 2.4cqw; aspect-ratio: auto; height: calc(var(--u) * 54); border-radius: 3cqw; }
  :is(.intro, .tryit) .app { height: 100%; }
  :is(.intro, .tryit) .app__win { --mh: 48.4; --ct: 15; --px: 1.6; --side: 0; left: calc(var(--u) * 1.4); width: calc(100cqw - var(--u) * 2.8); top: calc(var(--u) * 4.2);
    grid-template-columns: minmax(0, 1fr); }
  :is(.intro, .tryit) .app__side, :is(.intro, .tryit) .app__dock { display: none; }
  :is(.intro, .tryit) .app__hello { font-size: calc(var(--u) * 2); }
  :is(.intro, .tryit) .app__mode { padding-inline: var(--u); }
  :is(.intro, .tryit) .app__me, :is(.intro, .tryit) .app__ai { max-width: 84%; }
  .motion .intro__pause { position: static; margin: var(--s-3) 0 0 auto; }
/* The demo to try on a phone: the sidebar becomes a bar of tabs along the window's foot, and a list
   and its reading pane stand one above the other. */
@media (max-width: 640px) {
  .tryit .stage--try .app__win { grid-template-rows: minmax(0, 1fr) auto; }
  .tryit .stage--try .app__main { --mh: 43.4; grid-row: 1; }
  .tryit .stage--try .app__side { display: flex; grid-row: 2; flex-direction: row; gap: 0; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.5);
    background: oklch(96.5% 0.006 12); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 oklch(0% 0 0 / 0.1); }
  .tryit .stage--try .app__side > :not(.app__tabs) { display: none; }
  .tryit .stage--try .app__tabs { display: flex; width: 100%; gap: 0; }
  .tryit .stage--try .app__tabs > li { flex: 1 1 0; min-width: 0; }
  .tryit .stage--try .app__tab { position: relative; flex-direction: column; justify-content: center; gap: calc(var(--u) * 0.2); padding: calc(var(--u) * 0.4) 0;
    font-size: calc(var(--u) * 0.82); text-align: center; white-space: nowrap; }
  .tryit .stage--try .app__tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tryit .stage--try .app__tab > .app__ico { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
  .tryit .stage--try .app__tab > b { position: absolute; top: calc(var(--u) * 0.1); left: 56%; min-width: calc(var(--u) * 1.4); margin: 0;
    padding: 0 calc(var(--u) * 0.35); font-size: calc(var(--u) * 0.72); }
  .tv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .tv__list { border-right: 0; border-bottom: 1px solid oklch(31.8% 0.005 67.7 / 0.12); padding: calc(var(--u) * 1.2) calc(var(--u) * 0.8); }
  .tv__list--full { grid-row: 1 / -1; border-bottom: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 1.2); }
  .tv__read { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.3); }
  .tv__due { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 0.6); }
  .tv__notice { justify-self: start; }
}
}

/* The scenes on a phone: taller than wide, everything in one column and larger, so it reads at
   the size of the text around it. */
@media (max-width: 640px) {
  .frame { aspect-ratio: auto; min-height: 118cqw; border-radius: 3cqw; }
  .scene { --u: 2.25cqw; padding: calc(var(--u) * 3.5) calc(var(--u) * 3); gap: calc(var(--u) * 1.8); }
  .scene--ask, .scene--due { grid-template-columns: minmax(0, 1fr); }
  .scene--ask .sc-page { width: 62%; justify-self: end; margin-top: calc(var(--u) * -2); aspect-ratio: auto; }
  .scene--ask .sc-page > i:nth-of-type(n + 3) { display: none; }
  .scene--due .sc-toast { width: 88%; justify-self: end; }
  .sc-k { min-width: calc(var(--u) * 6); }
}