/* The Digital Twin page (src/twin.html, at /twin): a scroll story over one fixed WebGL stage. The page is a
   tall, empty scroll track under the site's header, and what you read is pinned over the scene and fades in
   and out with the scroll: the arrival and headline; what a twin does, on one twin in five steps; every
   patient scored, one twin at a time; "Who are you?" with each audience's page; the tools room; then the
   site's closing section slides up over the world, and the site's footer follows. The scene starts in a dark
   grid room and ends in daylight, so its words take the scene's colours, not the site's theme (the closing
   section and the page without its 3D take the site's).
   Everything is under .dtw (the page's <main>), and its colours are set there, not on :root, so the site's
   header and footer keep theirs. Class names the site's stylesheet also uses are renamed here (kick, dlede,
   scard, apanel, achips, dctl, fsteps, snum, smedals, dbtn, tkick, pback, dhl, tband). */
/* the site's own colours, kept before .dtw sets the scene's: the end, and the page without its 3D, are in them */
.dtw-page { --site-canvas: var(--canvas); --site-ink: var(--ink); --site-ink-2: var(--ink-2); --site-muted: var(--muted); --site-line: var(--line); --site-surface: var(--surface); }
.dtw {
  --void: #05080f;                     /* the empty grid room */
  --beam: #8cc8ff;                     /* the twins' own blue: grid, beams, status dot */
  --ink: #e8f1ff;                      /* text while the room is dark */
  --ink-soft: rgba(232, 241, 255, .66);
  --glass: rgba(12, 20, 36, .55);
  --glass-line: rgba(140, 200, 255, .24);
  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gut: clamp(16px, 4.5vw, 64px);
  --scrim: rgba(5, 8, 15, 0);
  --card-bg: rgba(12, 20, 36, .72);
  --panel-bg: rgba(12, 20, 36, .82);
  --card-line: rgba(140, 200, 255, .2);
  --track: rgba(232, 241, 255, .12);
  --on-ink: #05080f;
  --page: #eef0f3;                     /* the finished room's floor, for the closing section */
  --page-ink: #0e1b30;
  --page-soft: rgba(14, 27, 48, .68);
  --page-line: rgba(14, 27, 48, .1);
  color-scheme: dark;
}
:root.day .dtw {
  --ink: #0e1b30;
  --ink-soft: rgba(14, 27, 48, .7);
  --glass: rgba(255, 255, 255, .64);
  --glass-line: rgba(14, 27, 48, .14);
  --scrim: rgba(238, 241, 246, .8);
  --card-bg: rgba(255, 255, 255, .84);
  --panel-bg: rgba(250, 251, 253, .9);
  --card-line: rgba(14, 27, 48, .09);
  --track: rgba(14, 27, 48, .08);
  --on-ink: #ffffff;
  color-scheme: light;
}
.dtw { background: var(--void); color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
.dtw #story { width: 1px; height: 1190vh; }   /* 11.9 screens; the script sets it exactly */
.dtw em.s { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.dtw #world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; outline: none; }
.dtw #world.grab { cursor: grab; }
.dtw #world.dragging { cursor: grabbing; }
.dtw #world.point { cursor: pointer; }

.dtw .title, .dtw .cap {
  position: fixed; left: var(--gut);
  top: calc(env(safe-area-inset-top, 0px) + clamp(92px, 14vh, 128px));
  width: min(36rem, calc(100% - 2 * var(--gut)));
  pointer-events: none; display: grid; gap: .9rem; margin: 0;
}
.dtw .tkick, .dtw .kick {
  margin: 0; font: 500 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: .6rem;
}
.dtw .tkick i, .dtw .kick i { width: 1.6rem; height: 1px; background: currentColor; opacity: .6; flex: none; }
.dtw h1 {
  margin: 0; font-weight: 500; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance;
  font-size: clamp(2.15rem, 1.1rem + 3.9vw, 4.75rem); color: var(--ink);
}
.dtw .sub { margin: 0; max-width: 31ch; font-size: clamp(.95rem, .86rem + .3vw, 1.1rem); line-height: 1.5; color: var(--ink-soft); }
.dtw .cap { opacity: 0; gap: .7rem; }
.dtw .cap h2 { margin: 0; font-weight: 500; letter-spacing: -.022em; line-height: 1.06; text-wrap: balance; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.dtw .cap .dlede { margin: 0; max-width: 44ch; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }

/* "digital twin": bold, in a slow-drifting gradient from the twins' blue through violet to orchid, like
   the site's own highlighted words (a flat violet wherever text can't be filled with a gradient) */
.dtw .dhl { font-weight: 600; letter-spacing: -.034em; white-space: nowrap; color: #5B52B4; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dtw .dhl {
    background-image: linear-gradient(96deg, #1E88E5 0%, #6A5CF5 28%, #C94BD8 52%, #6A5CF5 76%, #1E88E5 100%);
    background-size: 250% 100%; background-position: 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: dtw-hlshift 10s linear infinite;
  }
}
@keyframes dtw-hlshift { to { background-position: 250% 0; } }

/* each word of the title arrives on its own, from a soft blur */
.dtw .title .w, .dtw .title .tkick, .dtw .title .sub {
  display: inline-block; opacity: 0; transform: translateY(.4em); filter: blur(7px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, .8, .14, 1), filter 1s ease;
  transition-delay: calc(var(--i, 0) * 75ms);
}
.dtw .title .tkick { display: flex; color: rgba(14, 27, 48, .82); }  /* over the room itself (the 3D), so a little darker than the captions' kickers: 5:1 or better */
.dtw .title.show .w, .dtw .title.show .tkick, .dtw .title.show .sub { opacity: 1; transform: none; filter: none; }
.dtw .title::before, .dtw .cap::before, .dtw .ft::before {
  content: ""; position: absolute; inset: -14% -18% -18% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--scrim), transparent); opacity: 0; transition: opacity 1.2s ease;
}
:root.day .dtw .title.show::before, :root.day .dtw .cap::before, :root.day .dtw .ft::before { opacity: 1; }

/* what a twin does: five steps, one at a time, left of the twin (on a phone, a card under it) */
.dtw .feat { position: fixed; z-index: 4; left: var(--gut); top: 52%; width: min(29rem, 38vw); height: 0; pointer-events: none; }
.dtw .ft { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-50%); display: grid; gap: .85rem; opacity: 0; }
.dtw .ft h2 { margin: 0; font-weight: 500; letter-spacing: -.022em; line-height: 1.06; text-wrap: balance; font-size: clamp(1.7rem, 1rem + 2vw, 2.9rem); }
.dtw .ft p:not(.kick) { margin: 0; max-width: 40ch; font-size: clamp(.95rem, .88rem + .2vw, 1.06rem); line-height: 1.58; color: var(--ink-soft); }
.dtw .fsteps { display: flex; gap: 5px; margin-left: .2rem; }
.dtw .fsteps b { width: 16px; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.dtw .fsteps b.on { opacity: 1; width: 26px; }

/* chips beside the twin: what shapes it, its plans, its pillars, its medals, who sees it */
.dtw .fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.dtw .fx > * { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.dtw .pill, .dtw .fgroup, .dtw .chip {
  color: var(--ink); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: 0 14px 30px -20px rgba(14, 27, 48, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dtw .fgroup { box-sizing: border-box; padding: 10px 12px 11px; width: 16.5rem; display: grid; gap: 7px; }
.dtw .fgroup h3 { margin: 0; font: 500 .62rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.dtw .fgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.dtw .fgroup li { font-size: .76rem; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ac, #8cc8ff) 14%, transparent); }
.dtw .rule-lbl { font: 500 .78rem/1 var(--mono); color: var(--ink); white-space: nowrap; padding: 5px 8px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--card-line); }
.dtw .chip {
  width: 15rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 11px;
}
.dtw .chip b { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.dtw .chip small { display: block; font-size: .66rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.dtw .chip .sc { font: 500 .8rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.dtw .chip .sc small { display: inline; font-size: .62rem; }
.dtw .pdot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.dtw .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 999px; white-space: nowrap; font-size: .76rem; }
.dtw .pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc); flex: none; }
.dtw .pill b { font-weight: 600; }
.dtw .pill span { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); }
.dtw .pill.medal span { color: var(--ink); }

/* the score card: one sample patient's plan, beside them, with a line to where it sits on the body */
.dtw .scard {
  position: fixed; z-index: 4; left: 0; top: 0; width: min(16.5rem, calc(100% - 2 * var(--gut)));
  padding: .8rem .95rem .75rem; border-radius: 16px; display: grid; gap: .55rem;
  background: var(--card-bg); border: 1px solid var(--card-line); color: var(--ink);
  box-shadow: 0 20px 44px -24px rgba(14, 27, 48, .38), 0 2px 6px rgba(14, 27, 48, .05);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  pointer-events: none; opacity: 0; will-change: opacity, transform;
}
.dtw .scard header { display: flex; align-items: center; gap: .5rem; }
.dtw .scard h2 { margin: 0; font-size: .96rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.dtw .scard .who { margin-left: auto; font: 500 .56rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.dtw .scard .score { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.dtw .scard .snum { font-size: 1.8rem; font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.dtw .scard .of { font-size: .74rem; color: var(--ink-soft); }
.dtw .scard .delta { margin-left: auto; align-self: center; font-size: .68rem; font-weight: 500; padding: .25rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); white-space: nowrap; }
.dtw .scard .delta i { font-style: normal; color: var(--accent); }
.dtw .scard .lab { flex-basis: 100%; margin-top: .15rem; font: 500 .56rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dtw .scard ul { list-style: none; margin: 0; padding: .55rem 0 0; border-top: 1px solid var(--card-line); display: grid; gap: .38rem; }
.dtw .scard li { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem .9rem; align-items: center; column-gap: .5rem; }
.dtw .scard .hn { font-size: .72rem; line-height: 1.25; }
.dtw .scard .hb { position: relative; height: 5px; border-radius: 99px; background: var(--track); }
.dtw .scard .hb i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.dtw .scard .hb .was { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.dtw .scard .hb .gain { background: var(--accent); }
.dtw .scard .hb b { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); opacity: .5; }
.dtw .scard .hv { font: 500 .74rem/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.dtw .scard footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .5rem; border-top: 1px solid var(--card-line); font-size: .68rem; color: var(--ink-soft); }
.dtw .smedals { display: flex; gap: .5rem; font: 500 .72rem/1 var(--mono); color: var(--ink); }
.dtw .smedals span { display: inline-flex; align-items: center; gap: .25rem; }
.dtw .coin { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), 0 1px 2px rgba(14, 27, 48, .25); }
.dtw .coin.gold { background: radial-gradient(circle at 35% 30%, #fbe7a1, #d4a21f 60%, #a77a0c); }
.dtw .coin.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c4cad3 60%, #8b939e); }
.dtw .coin.bronze { background: radial-gradient(circle at 35% 30%, #f4c7a1, #c27c48 60%, #8d4f25); }

.dtw .leader { position: fixed; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dtw .leader path { fill: none; stroke: var(--ink); stroke-opacity: .42; stroke-width: 1.25; }
.dtw .leader path.dash { stroke-dasharray: 3 4; }

/* "Who are you?": a label under each person, and who each group is for above them */
.dtw .labels { position: fixed; z-index: 4; inset: 0; pointer-events: none; opacity: 0; }
.dtw .lbl {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: grid; justify-items: center; gap: .22rem; width: 10.2rem; padding: .5rem .55rem .55rem; border-radius: 14px;
  font: inherit; color: var(--ink); text-align: center; background: transparent; border: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.dtw .lbl b { font-size: .9rem; font-weight: 600; letter-spacing: -.005em; display: inline-flex; align-items: center; gap: .4rem; }
.dtw .lbl b i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dtw .lbl small { font-size: .7rem; line-height: 1.35; color: var(--ink-soft); }
.dtw .lbl .go { font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transition: opacity .3s ease; }
.dtw .lbl.hot, .dtw .lbl:hover, .dtw .lbl:focus-visible { background: var(--card-bg); border-color: var(--card-line); box-shadow: 0 14px 30px -20px rgba(14, 27, 48, .45); }
.dtw .lbl.hot .go, .dtw .lbl:hover .go, .dtw .lbl:focus-visible .go { opacity: 1; }
.dtw .grp { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .7rem; font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.dtw .grp.span::before, .dtw .grp.span::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }

/* the tools room: a sign over each pillar's tools, a plaque on each plinth, and a window for the one chosen */
.dtw .tlabels { position: fixed; z-index: 4; inset: 0; pointer-events: none; }
.dtw .tg, .dtw .tl { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.dtw .tg {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .75rem .42rem .6rem; border-radius: 999px; pointer-events: none;
  font: 500 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: var(--card-bg); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dtw .tg i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 28%, transparent), 0 0 14px var(--tc); }
.dtw .tl {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .74rem/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); padding: .4rem .7rem .4rem .55rem; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: 0 10px 24px -16px rgba(14, 27, 48, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .25s, box-shadow .25s;
}
.dtw .tl i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex: none; }
.dtw .tl.hot, .dtw .tl:hover, .dtw .tl:focus-visible { border-color: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent), 0 14px 30px -18px rgba(14, 27, 48, .55); }
.dtw .tcard {
  position: fixed; z-index: 6; left: 0; top: 0; width: min(20rem, calc(100% - 24px)); box-sizing: border-box;
  padding: .95rem 1.05rem .9rem; border-radius: 20px; display: grid; gap: .62rem; color: var(--ink);
  background: var(--panel-bg); border: 1px solid var(--card-line);
  box-shadow: 0 26px 60px -30px rgba(14, 27, 48, .5), 0 2px 6px rgba(14, 27, 48, .05);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  opacity: 0; pointer-events: none; will-change: transform, opacity; transition: opacity .2s ease;
}
.dtw .tcard.on { pointer-events: auto; }
.dtw .tcard header { display: flex; align-items: flex-start; gap: .65rem; }
.dtw .tcard header > div { min-width: 0; flex: 1; }
.dtw .ticons { display: flex; flex: none; margin: -.35rem 0 -.2rem -.3rem; }
.dtw .ticons img { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--tc) 16%, transparent); }
.dtw .ticons.many img { width: 40px; height: 40px; border-radius: 12px; }
.dtw .ticons.many img + img { margin-left: -12px; }
.dtw .tpil { margin: 0 0 .2rem; font: 500 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.dtw .tcard h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.dtw .tsub { margin: .15rem 0 0; font-size: .74rem; color: var(--ink-soft); }
.dtw .tsub:empty { display: none; }
.dtw .tx { margin: -.3rem -.4rem 0 0; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font: 400 1.2rem/1 var(--display); cursor: pointer; }
.dtw .tx:hover { background: var(--track); color: var(--ink); }
.dtw .twhat { margin: 0; font-size: .86rem; line-height: 1.5; }
.dtw .tprev {
  position: relative; height: 96px; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--tc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
}
.dtw .tprev svg { display: block; width: 100%; height: 100%; }
.dtw .tsample { position: absolute; right: 7px; bottom: 6px; z-index: 1; font: 500 .52rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(14, 27, 48, .7); }
.dtw .thelps { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.dtw .thelps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
.dtw .thelps li::before { content: ""; width: 6px; height: 6px; margin-top: .48em; border-radius: 2px; background: var(--tc); }
.dtw .tplans { margin: 0; padding-top: .55rem; border-top: 1px solid var(--card-line); font-size: .72rem; line-height: 1.45; color: var(--ink-soft); }
.dtw .tfree { margin: -.2rem 0 0; font: 500 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dtw .tfree a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
/* the small pictures: light, whatever the room's light (their small words at .7, 6:1 or better on every pillar's
   tint: WCAG AA) */
.dtw .tprev text { font-family: var(--display); font-size: 11px; fill: #0e1b30; }
.dtw .tprev .s { fill: rgba(14, 27, 48, .7); }
.dtw .tprev .tb { font-weight: 600; }
.dtw .tprev .dsm { font-size: 9.5px; }
.dtw .tprev .big { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.dtw .tprev .a { fill: var(--tc); }
.dtw .tprev .as { stroke: color-mix(in srgb, var(--tc) 80%, #0e1b30); }
.dtw .tprev .w { fill: #fff; stroke: rgba(14, 27, 48, .12); }
.dtw .tprev .trk { fill: rgba(14, 27, 48, .1); }
.dtw .tprev .trk-s { stroke: rgba(14, 27, 48, .1); }
.dtw .tprev .tband { fill: color-mix(in srgb, var(--tc) 55%, #0e1b30); opacity: .22; }
.dtw .tprev .ring { fill: none; stroke: #0e1b30; stroke-width: 1.5; }
.dtw .tprev .box { fill: #fff; stroke: #0e1b30; stroke-width: 2; }
.dtw .tprev .cross { stroke: #0e1b30; stroke-width: 3; stroke-linecap: round; }
.dtw .tprev .tick { fill: none; stroke: #0e1b30; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dtw .tprev .mark { stroke: #0e1b30; stroke-width: 1.2; stroke-dasharray: 3 3; }
.dtw .tp-count { stroke-dasharray: 100; animation: dtw-tpcount 7s linear infinite; }
@keyframes dtw-tpcount { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
.dtw .tp-grow { transform-origin: 12px 36px; animation: dtw-tpgrow 3.2s cubic-bezier(.2, .7, .2, 1) infinite alternate; }
@keyframes dtw-tpgrow { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
.dtw .tp-pop { transform-box: fill-box; transform-origin: center; animation: dtw-tppop 4.8s ease-out infinite; }
@keyframes dtw-tppop { 0% { transform: scale(0); } 12%, 100% { transform: scale(1); } }
.dtw .tp-breathe { transform-box: fill-box; transform-origin: center; animation: dtw-tpbreathe 16s ease-in-out infinite; }
@keyframes dtw-tpbreathe { 0% { transform: scale(.68); } 25%, 50% { transform: scale(1); } 75%, 100% { transform: scale(.68); } }
.dtw .tp-hop { animation: dtw-tphop 3s steps(1) infinite; }
@keyframes dtw-tphop { 0% { transform: translateX(80px); } 25% { transform: translateX(0); } 50% { transform: translateX(120px); } 75% { transform: translateX(40px); } }
.dtw .tp-shrink { transform-origin: 200px 40px; animation: dtw-tpshrink 10s linear infinite; }
@keyframes dtw-tpshrink { from { transform: scaleX(1); } to { transform: scaleX(.04); } }

/* an audience's page: the person on the left, three of their plans on them, the page on the right */
.dtw .achips { position: fixed; z-index: 4; inset: 0; pointer-events: none; }
.dtw .achips .chip { position: absolute; left: 0; top: 0; width: 12.5rem; opacity: 0; }
.dtw .apanel {
  position: fixed; z-index: 9; right: var(--gut); width: min(31rem, 46vw);
  top: calc(env(safe-area-inset-top, 0px) + 80px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  overflow: auto; overscroll-behavior: contain; display: grid; gap: 1rem; align-content: start;
  padding: 1.4rem 1.6rem 1.4rem; border-radius: 22px; color: var(--ink);
  background: var(--panel-bg); border: 1px solid var(--card-line);
  box-shadow: 0 30px 70px -36px rgba(14, 27, 48, .45);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  opacity: 0; transform: translateX(30px); pointer-events: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, .8, .14, 1);
}
.dtw .apanel.open { opacity: 1; transform: none; pointer-events: auto; }
.dtw .apanel .pback { justify-self: start; padding: .5rem .8rem; font-size: .76rem; }
.dtw .apanel .kick { font-size: .64rem; line-height: 1.4; letter-spacing: .13em; }
.dtw .apanel .kick .pdot { width: 9px; height: 9px; }
.dtw .apanel h2 { margin: 0; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.15rem); font-weight: 500; letter-spacing: -.022em; line-height: 1.1; text-wrap: balance; }
.dtw .apanel .dlede { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.dtw .apanel .reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; padding-top: 1rem; border-top: 1px solid var(--card-line); }
.dtw .apanel h3 { margin: 0 0 .3rem; font-size: .86rem; font-weight: 600; letter-spacing: -.005em; }
.dtw .apanel .reasons p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.dtw .apanel .cta { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .2rem; }
.dtw .apanel .note { margin: 0; font-size: .7rem; color: var(--ink-soft); }

.dtw .status {
  position: fixed; z-index: 5; left: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  transition: opacity .6s ease, color .6s ease; pointer-events: none;
}
.dtw .status.off { opacity: 0; }
.dtw .status b { width: 6px; height: 6px; border-radius: 50%; background: var(--beam); box-shadow: 0 0 10px var(--beam); animation: dtw-pulse 1.4s ease-in-out infinite; }
:root.day .dtw .status b { background: #2f7fd6; box-shadow: none; }
@keyframes dtw-pulse { 50% { opacity: .35; } }

.dtw .dctl { position: fixed; right: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; gap: .5rem; z-index: 6; transition: opacity .4s ease; }
.dtw .dctl.off { opacity: 0; pointer-events: none; }
.dtw .dctl button, .dtw .dbtn {
  font: 500 .82rem/1 var(--display); color: var(--ink); cursor: pointer; text-decoration: none;
  padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  transition: color .6s ease, background-color .6s ease, border-color .6s ease, transform .15s ease;
}
.dtw .dctl button:hover, .dtw .dbtn:hover { transform: translateY(-1px); }
.dtw .dbtn.pri { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.dtw .dbtn.dsm { padding: .55rem .9rem; font-size: .8rem; }
.dtw button:focus-visible, .dtw a:focus-visible, .dtw #world:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }
.dtw .dctl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the end of the page (after <main>, so in the site's own colours): the site's closing section, sliding up
   over the world, then the site's footer. Once it covers the screen, the world stops drawing and is hidden. */
.dtw-end { position: relative; z-index: 10; background: var(--canvas); min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.dtw-end::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--canvas)); }
.dtw-end .hero-you { margin: 30px auto 0; }
.flat .dtw-end { min-height: 0; }
.flat .dtw-end::before { display: none; }
.dtw-covered .dtw #world, .dtw-covered .dtw .fx, .dtw-covered .dtw .leader { visibility: hidden; }
.dtw-page .foot { position: relative; z-index: 10; }

/* without the 3D (no WebGL, or the scene couldn't start): the same words and choices, laid out flat, in the
   site's own colours */
.flat .dtw { background: transparent; --ink: var(--site-ink); --ink-soft: var(--site-muted); --page-line: var(--site-line); color: var(--site-ink); }
.dtw .nogl, .dtw .flatwho { display: none; }
.flat .dtw #world, .flat .dtw .fx, .flat .dtw .cap, .flat .dtw .leader, .flat .dtw .scard, .flat .dtw .labels, .flat .dtw .achips, .flat .dtw .apanel, .flat .dtw .status, .flat .dtw .dctl, .flat .dtw #story, .flat .dtw .tlabels, .flat .dtw .tcard { display: none !important; }
.flat .dtw .title, .flat .dtw .nogl, .flat .dtw .feat, .flat .dtw .flatwho {
  position: relative; inset: auto; width: auto; height: auto; max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); box-sizing: border-box;
}
.flat .dtw .title { padding-top: 56px; }
.flat .dtw .title h1 { max-width: 20ch; }
.flat .dtw .title .w, .flat .dtw .title .tkick, .flat .dtw .title .sub { opacity: 1; transform: none; filter: none; transition: none; }
.flat .dtw .title::before, .flat .dtw .ft::before { display: none; }
.flat .dtw .nogl { display: block; margin-top: 18px; font: 400 .74rem/1.5 var(--mono); color: var(--ink-soft); }
.flat .dtw .nogl p { margin: 0; }
.flat .dtw .feat { padding-block: 48px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 14px; pointer-events: auto; scroll-margin-top: 64px; }
.flat .dtw .ft { box-sizing: border-box; position: relative; inset: auto; opacity: 1; transform: none; padding: 1.2rem 1.3rem 1.3rem; border-radius: 18px; background: var(--site-surface); border: 1px solid var(--page-line); align-content: start; }
.flat .dtw .ft h2 { font-size: 1.45rem; }
.flat .dtw .ft p:not(.kick) { font-size: .92rem; }
.flat .dtw .flatwho { display: grid; gap: .8rem; padding-block: 40px 120px; scroll-margin-top: 64px; }
.dtw .flatwho h2 { margin: 0; font-weight: 500; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.dtw .who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 12px; margin-top: .6rem; }
.dtw .who-grid a { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--page-line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.dtw .who-grid a:hover { border-color: var(--accent); transform: translateY(-1px); }
.dtw .who-grid b { display: inline-flex; align-items: center; gap: .45rem; font-size: .98rem; font-weight: 600; }
.dtw .who-grid b i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.dtw .who-grid small { font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.dtw .who-grid span { margin-top: .3rem; font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dtw .flattools { display: none; }
.flat .dtw .flattools { display: grid; gap: .8rem; position: relative; max-width: 1200px; margin-inline: auto; padding: 0 var(--gut) 120px; box-sizing: border-box; scroll-margin-top: 64px; }
.dtw .flattools h2 { margin: 0; font-weight: 500; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.dtw .flattools .dlede { margin: 0; max-width: 56ch; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }
.dtw .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 12px; margin-top: .6rem; }
.dtw .tool-grid article { display: grid; gap: .4rem; align-content: start; padding: 1rem 1.1rem 1.1rem; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--page-line); border-top: 3px solid var(--tc); }
.dtw .tool-grid .ticons { margin: 0 0 .1rem -.2rem; }
.dtw .tool-grid .tpil { display: flex; align-items: center; gap: .45rem; margin: 0; }
.dtw .tool-grid .tpil i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.dtw .tool-grid h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.dtw .tool-grid p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 860px) {
}
@media (max-width: 560px) {
  .dtw .status { bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); }
}
@media (max-aspect-ratio: 9/10) {
  .dtw .feat { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); }
  .dtw .ft { top: auto; bottom: 0; transform: none; padding: 1rem 1.1rem 1.05rem; border-radius: 18px; gap: .55rem;
    background: var(--card-bg); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .dtw .ft::before { display: none; }
  .dtw .ft h2 { font-size: 1.45rem; }
  .dtw .ft p:not(.kick) { font-size: .88rem; line-height: 1.5; }
  .dtw .fgroup { width: 12.4rem; padding: 8px 9px 9px; }
  .dtw .fgroup li { font-size: .68rem; padding: 3px 7px; }
  .dtw .chip { width: 10.6rem; padding: 6px 8px; gap: 6px; }
  .dtw .chip b { font-size: .7rem; }
  .dtw .chip small { font-size: .6rem; }
  .dtw .pill { font-size: .66rem; padding: 4px 8px 4px 6px; gap: 5px; }
  .dtw .pill span { font-size: .64rem; }
  .dtw .scard { left: 0; right: 0; top: auto; margin-inline: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); width: min(21rem, calc(100% - 2 * var(--gut))); }
  .dtw .lbl { width: 7.6rem; padding: .4rem .35rem; }
  .dtw .lbl small { display: none; }
  .dtw .achips .chip { width: 9.6rem; }
  .dtw .apanel { left: 12px; right: 12px; width: auto; top: auto; max-height: 52svh; bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); padding: 1.1rem 1.15rem; transform: translateY(30px); }
  .dtw .apanel .reasons { grid-template-columns: 1fr; }
  .dtw #capChoose .dlede, .dtw #capTools .dlede { display: none; }
  .dtw .tcard { left: 12px; right: 12px; top: auto; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); max-height: 50svh; overflow: auto; overscroll-behavior: contain; gap: .5rem; padding: .85rem .9rem .8rem; }
  .dtw .tcard .tprev { height: 84px; }
  .dtw .thelps li { font-size: .74rem; }
  .dtw .tl { font-size: .68rem; padding: .32rem .55rem .32rem .45rem; }
}
/* headless checks (?test): no transitions, so a still shows the state it was asked for */
.tw-test .dtw *, .tw-test .dtw *::before, .tw-test .dtw *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dtw .title .w, .dtw .title .tkick, .dtw .title .sub, .dtw .apanel { transition: none; }
  .dtw .dhl { animation: none; }
  .dtw .tprev * { animation: none !important; }
  .dtw .status b { animation: none; }
}