/* Creator OS prototype: components (spec sections 2.2 to 2.9).
   Every class here is the component's name in the spec. Scope: everything lives under .screen (a frame) or at the
   root for the image-mode classes. Colours come from tokens only. */

/* a slash as an anti-aliased mask (a gradient hairline on a diagonal renders dotted) */
:root { --slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 10 0' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E"); --slash-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 10 0' stroke='%23000' stroke-width='1.9' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E"); }
:root { --tri-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 11'%3E%3Cpath d='M7.5 .6V10.5H.6z' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E"); --tri-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7'%3E%3Cpath d='M4 0V7H0z' fill='%23000'/%3E%3C/svg%3E"); }
:root { --sil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 258 291' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M131 30 L102 35 L91 40 L83 45 L79 50 L75 55 L70 60 L66 65 L64 70 L63 75 L61 80 L59 85 L58 90 L59 95 L59 100 L58 105 L59 110 L60 115 L60 120 L62 125 L53 130 L52 135 L52 140 L52 145 L54 150 L56 155 L57 160 L59 165 L61 170 L70 175 L72 180 L73 185 L75 190 L76 195 L77 200 L77 205 L76 210 L69 215 L65 220 L63 225 L59 230 L53 235 L44 240 L35 245 L26 250 L18 255 L10 260 L1 265 L0 270 L0 275 L0 280 L0 285 L0 290 L85 290 L258 285 L258 280 L258 275 L258 270 L258 265 L252 260 L241 255 L231 250 L222 245 L213 240 L208 235 L200 230 L191 225 L188 220 L184 215 L179 210 L178 205 L179 200 L180 195 L181 190 L183 185 L184 180 L185 175 L194 170 L197 165 L199 160 L202 155 L204 150 L206 145 L207 140 L207 135 L207 130 L196 125 L197 120 L198 115 L200 110 L200 105 L200 100 L200 95 L200 90 L200 85 L200 80 L199 75 L197 70 L194 65 L189 60 L185 55 L179 50 L175 45 L166 40 L158 35 L141 30z'/%3E%3C/svg%3E"); --sil-cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220' preserveAspectRatio='xMidYMax meet'%3E%3Cpath fill='%23000' d='M26 118 34 22l52 40q14-4 28 0l52-40 8 96q4 78-74 82-78-4-74-82z'/%3E%3C/svg%3E"); }
:root { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 376 50' preserveAspectRatio='none'%3E%3Cpath d='M1.3 24.5V26.5 M6.3 23.5V27.5 M11.3 22.5V27.5 M16.3 19.5V30.5 M21.3 16.5V33.5 M25.8 13.5V36.5 M30.3 18.5V32.5 M35.3 21.5V28.5 M39.8 23.5V26.5 M44.3 23.5V26.5 M48.3 24.5V27.5 M52.3 22.5V27.5 M57.3 18.5V31.5 M62.8 16.5V34.5 M67.8 11.5V39.5 M73.3 6.5V42.5 M77.8 14.5V35.5 M83.3 16.5V33.5 M88.3 9.5V42.5 M93.3 6.5V46.5 M98.3 0.5V49.5 M103.3 2.5V46.5 M108.3 13.5V40.5 M113.3 14.5V36.5 M118.3 8.5V40.5 M123.8 18.5V31.5 M129.3 16.5V32.5 M134.3 16.5V34.5 M138.8 21.5V28.5 M143.3 21.5V27.5 M149.3 19.5V31.5 M153.3 23.5V27.5 M158.8 19.5V29.5 M163.3 15.5V33.5 M169.3 17.5V32.5 M174.3 13.5V36.5 M178.3 9.5V42.5 M183.3 2.5V48.5 M188.3 6.5V44.5 M193.3 9.5V38.5 M198.3 17.5V33.5 M203.3 9.5V41.5 M208.3 8.5V41.5 M213.8 13.5V36.5 M218.8 21.5V28.5 M223.8 14.5V38.5 M229.3 5.5V46.5 M234.3 2.5V42.5 M238.3 8.5V36.5 M243.3 10.5V35.5 M248.3 14.5V32.5 M252.8 17.5V32.5 M257.8 21.5V28.5 M262.3 23.5V27.5 M267.3 23.5V27.5 M272.3 18.5V31.5 M277.3 13.5V36.5 M282.3 13.5V36.5 M287.3 17.5V32.5 M291.3 22.5V28.5 M295.3 24.5V27.5 M299.3 22.5V27.5 M303.3 18.5V31.5 M308.3 17.5V32.5 M313.8 19.5V30.5 M319.3 15.5V35.5 M323.8 16.5V34.5 M328.8 18.5V32.5 M333.3 20.5V30.5 M337.3 22.5V29.5 M342.3 23.5V27.5 M347.8 20.5V30.5 M351.3 22.5V28.5 M355.3 23.5V27.5 M359.3 24.5V27.5 M364.3 24.5V27.5 M368.3 24.5V27.5 M372.3 24.5V26.5 M376.3 24.5V26.5' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); }
:root { --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 44' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 42.5C50 30 150 12 250 2L250 6C160 26 60 40 0 44z'/%3E%3C/svg%3E"); }

:root {
  --ico-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v11.4a3.8 3.8 0 1 1-3.8-3.8'/%3E%3Cpath d='M14 3c.4 2.8 2.2 4.6 5 4.9'/%3E%3C/svg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='1.5' fill='%23000'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --ico-clapper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4.5 9.6h15.2V22H4.5zM4.5 8.4 3.6 4.4 19.4 1.8l.9 4.1zM7.6 7.2 7.1 5.2l1.8-.3.5 2zM11.6 6.5 11.1 4.5l1.8-.3.5 2zM15.6 5.8 15.1 3.8l1.8-.3.5 2zM6.4 13.2h2.6v1.6H6.4zM6.4 16.8h11v1.6h-11z'/%3E%3C/svg%3E");
  --ico-chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 1 1.5 9l7 8'/%3E%3C/svg%3E");
  --ico-chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1l7 8-7 8'/%3E%3C/svg%3E");
  --ico-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 5.5 20.5 12 14 18.5'/%3E%3C/svg%3E");
  --ico-arrow-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h19M15 5.5 21.5 12 15 18.5'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  --ico-check-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5 8 20 21 3.5'/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E");
  --ico-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  --ico-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l11-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.8' fill='%23000'/%3E%3Ccircle cx='17.5' cy='16' r='2.8' fill='%23000'/%3E%3C/svg%3E");
  --ico-cc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='butt'%3E%3Cpath d='M10.7 8.6a4 4 0 1 0 0 6.8M20.7 8.6a4 4 0 1 0 0 6.8'/%3E%3C/svg%3E");
  --ico-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
  --ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4.5L16 4.5l3.5 3.5L8.5 19z'/%3E%3Cpath d='M13.5 7l3.5 3.5'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E");
  --ico-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10.5' stroke-width='2.8'/%3E%3Ccircle cx='12' cy='19.4' r='1.7' fill='%23000'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
  --ico-drive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A2 2 0 0 1 5 5.5h4.2l2 2.5H19a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
  --ico-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='12' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E");
  --ico-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1'/%3E%3Cpath d='M7.5 4v16M16.5 4v16M3 9h4.5M3 15h4.5M16.5 9H21M16.5 15H21'/%3E%3C/svg%3E");
}
.i--tiktok { --icon: var(--ico-tiktok); }
.i--instagram { --icon: var(--ico-instagram); }
.i--lock { --icon: var(--ico-lock); }
.i--clapper { --icon: var(--ico-clapper); }
.i--chev-l { --icon: var(--ico-chev-l); }
.i--chev-r { --icon: var(--ico-chev-r); }
.i--arrow-r { --icon: var(--ico-arrow-r); }
.i--check { --icon: var(--ico-check); }
.i--play { --icon: var(--ico-play); }
.i--lines { --icon: var(--ico-lines); }
.i--note { --icon: var(--ico-note); }
.i--cc { --icon: var(--ico-cc); }
.i--dots { --icon: var(--ico-dots); }
.i--plus { --icon: var(--ico-plus); }
.i--pencil { --icon: var(--ico-pencil); }
.i--x { --icon: var(--ico-x); }
.i--bang { --icon: var(--ico-bang); }
.i--clock { --icon: var(--ico-clock); }
.i--drive { --icon: var(--ico-drive); }
.i--phone { --icon: var(--ico-phone); }
.i--mic { --icon: var(--ico-mic); }
.i--film { --icon: var(--ico-film); }

/* ================================================================ base */
.screen, .screen *, .screen *::before, .screen *::after { box-sizing: border-box; }
.screen {
  position: relative;
  width: 1586px;
  height: 992px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  font: 400 var(--t-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1300px 760px at 16% 10%, color-mix(in srgb, var(--paper-2) 20%, transparent), transparent 70%),
    radial-gradient(1100px 720px at 88% 92%, color-mix(in srgb, var(--paper-2) 16%, transparent), transparent 70%),
    var(--paper);
}
:root { --speck-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .6' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .29 0 0 0 0 .27 1.1 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); --cloud-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .06' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .35 .55 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
:root { --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.2 0 0 0 .4 1.2 0 0 0 .4 1.2 0 0 0 .4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.screen :where(h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
.screen :where(ul, ol) { padding: 0; list-style: none; }
.screen :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.screen :where(a) { color: inherit; text-decoration: none; }
.screen :where(img) { display: block; max-width: none; }
.screen :where(table) { border-collapse: collapse; }
/* paper grain: data-URI feTurbulence noise, no image file. Opacity = palette grain x shell multiplier. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--grain-img);
  background-size: 240px 240px;
  opacity: calc(var(--grain) * var(--grain-scale, 1));
  mix-blend-mode: var(--grain-blend);
}
/* standalone (one screen on its own page, also what shot.mjs renders) */
html.standalone, html.standalone body { margin: 0; width: 1586px; height: 992px; overflow: hidden; background: var(--paper); }

/* ================================================================ images */
/* default: a natural photo with the light print filter */
.still { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); }
/* .duo: the duotone (and optional halftone) treatment, palette-driven. Used where the reference uses it. */
.duo { position: relative; background: var(--duotone-dark); isolation: isolate; overflow: hidden; }
/* duotone = lerp(dark, light, luminance): the grey photo screened onto the dark colour, then multiplied by the light colour, so highlights clip to clean paper */
.duo > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(2.1) brightness(1.2); mix-blend-mode: screen; }
.duo::after { content: ""; position: absolute; inset: 0; background: var(--duotone-light); mix-blend-mode: multiply; pointer-events: none; }
.duo--dots::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, var(--duotone-dark) 32%, transparent 34%) 0 0 / 3px 3px;
  mix-blend-mode: multiply; opacity: .3;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 62%);
  mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 62%);
}
/* root modes: the world root (or html) carries .img-duo-all or .img-natural. Neither = as the references. */
.img-natural .duo { background: none; }
.img-natural .duo > img { filter: saturate(.9) contrast(1.04); mix-blend-mode: normal; }
.img-natural .duo::before, .img-natural .duo::after { display: none; }
.img-duo-all img.still { filter: grayscale(1) contrast(1.8) brightness(1.1); mix-blend-mode: multiply; }
:where(.img-duo-all :has(> img.still)) { position: relative; isolation: isolate; background-color: var(--duotone-light); }
:where(.img-duo-all :has(> img.still))::after { content: ""; position: absolute; inset: 0; background: var(--duotone-dark); mix-blend-mode: screen; pointer-events: none; }
.img-duo-all .duo > img.still { filter: grayscale(1) contrast(1.8) brightness(1.1); mix-blend-mode: multiply; }
/* silhouette placeholder (ref 13 card 3). --cat is used only for rejected Jynx face candidates. */
.silhouette { position: relative; background: var(--silhouette-bg); overflow: hidden; isolation: isolate; }
.silhouette::before {
  content: ""; position: absolute; inset: 0; background: var(--silhouette-fig);
  -webkit-mask: var(--sil) center bottom / 100% 100% no-repeat; mask: var(--sil) center bottom / 100% 100% no-repeat;
}
.silhouette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
  background: radial-gradient(circle, var(--silhouette-fig) 32%, transparent 34%) 0 0 / 3px 3px;
}
.silhouette--cat::before { -webkit-mask-image: var(--sil-cat); mask-image: var(--sil-cat); left: 12%; right: 12%; top: 18%; }

/* ================================================================ icons (CSS masks, recolour with the palette) */
.i { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor; vertical-align: -.12em;
     -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.glyph.glyph--text { font: 500 10px/1 var(--font-mono); letter-spacing: 0; }

/* ================================================================ registration kit */
.reg { box-shadow: inset 1px 0 var(--mark), inset -1px 0 var(--mark); }
.cross { position: absolute; width: 15px; height: 15px; margin: -7px 0 0 -7px; pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--mark); }
.cross::before { left: 0; right: 0; top: 6px; height: 2px; background: var(--accent); opacity: .9; }
.cross::after { top: 0; bottom: 0; left: 7px; width: 1px; background: color-mix(in srgb, var(--accent) 40%, var(--mark)); }
.masthead .cross::after { left: 6px; width: 2px; background: var(--accent); opacity: .8; }
/* crosses of the Shell B masthead (absolute screen coordinates) */
.cross--m1 { left: 25px; top: 24px; }
.cross--m2 { left: 1212px; top: 24px; }
.cross--m3 { left: 1564px; top: 24px; }
.cross--m4 { left: 25px; top: 182px; }
.cross--m5 { left: 1560px; top: 210px; }
/* crosses on the corners of a card (.ccard) */
.cross--tl { left: -1px; top: -1px; }
.cross--tr { left: 100%; top: -1px; }
.cross--bl { left: -1px; top: calc(100% - 1px); }
.cross--br { left: calc(100% - 1px); top: calc(100% - 1px); }
/* the two bottom corner crosses of ref 13 are heavier than the others: 2 px, saturated */
.ccard > .cross--bl::before, .ccard > .cross--br::before { height: 2px; top: 6px; background: var(--accent); opacity: .85; }
.ccard > .cross--bl::after, .ccard > .cross--br::after { width: 2px; left: 6px; background: var(--accent); opacity: .85; }
.brk-tick { position: absolute; width: 7px; height: 12px; pointer-events: none;
  background: var(--mark); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.brk-tick--r { transform: scaleX(-1); }
.ccard > .brk-tick { left: 1px; top: 11px; }
.ccard > .brk-tick--r { left: auto; right: 1px; top: 11px; }
.brk-tri { position: absolute; width: 8px; height: 11px; pointer-events: none; background: var(--mark);
  -webkit-mask: var(--tri-outline) center / 100% 100% no-repeat; mask: var(--tri-outline) center / 100% 100% no-repeat; }
.brk-tri--fill { width: 4px; height: 7px; -webkit-mask-image: var(--tri-filled); mask-image: var(--tri-filled); }
.brk-tri--l { transform: scaleX(-1); }
.ccard > .brk-tri { right: 0; bottom: 0; }
.ccard > .brk-tri--l { right: auto; left: 0; }

/* ================================================================ type (2.4) */
.sq { display: inline-block; transform: scaleX(var(--sq, 1)); transform-origin: 0 50%; white-space: nowrap; }
/* block roles squeeze themselves; width is widened so the squeezed text fills its container */
.hero-name, .ccard__name, .headline {
  display: block; width: calc(100% / var(--sq)); transform: scaleX(var(--sq)); transform-origin: 0 0; white-space: nowrap;
}
.hero-name { font: 400 var(--t-hero)/.85 var(--font-display); letter-spacing: -2.5px; -webkit-text-stroke: 1px currentColor; --sq: var(--sq-hero); text-transform: uppercase; }
.ccard__name { font: 400 var(--t-name)/.9 var(--font-display); letter-spacing: -2.6px; -webkit-text-stroke: 1px currentColor; --sq: var(--sq-name); text-transform: uppercase; }
.headline { font: 700 var(--t-headline)/1 var(--font-sans); --sq: .944; letter-spacing: -.01em; -webkit-text-stroke: .8px currentColor; margin: 9px 0 0 18px; }
.headline em { font-style: normal; color: var(--accent-2-ink); margin-left: -7px; letter-spacing: -.0125em; }
.counter__title, .counter__count { font: 400 var(--t-counter)/1 var(--font-display); text-transform: uppercase; margin-top: 4px;
  display: block; transform: scaleX(var(--sq)); transform-origin: 0 50%; white-space: nowrap; }
.counter__title { font-size: 39px; --sq: var(--sq-counter); }
.counter__count { --sq: var(--sq-count); }
.slash-label { display: inline-flex; align-items: flex-start; font: 700 var(--t-slash)/1 var(--font-sans); text-transform: uppercase; letter-spacing: .02em; --sq: var(--sq-head); }
.slash-label::before { content: ""; flex: none; width: 15px; height: 34px; margin: 4px 15px 0 0;
  background: var(--accent); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.slash-label__t { display: inline-block; transform: scaleX(var(--sq)); transform-origin: 0 50%; white-space: nowrap; }
.slash-label--s { font-size: 15px; letter-spacing: .02em; }
.slash-label--s::before { height: 11px; width: 5px; margin: 3px 9px 0 2px; }
.sec-head { display: flex; align-items: center; gap: 10px; font: 700 var(--t-head)/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; --sq: .76; }
/* a slash before a section head only where the references have one: the hero head (--l), the calendar head, or --slash */
.sec-head--l::before, .sec-head--slash::before, .cal .sec-head::before { content: ""; flex: none; width: 10px; height: 25px; margin: -3px 0 0 -2px;
  background: var(--ink); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.cal .sec-head { font-size: 19px; padding-top: 2px; }
.cal .sec-head::before { width: 8px; height: 16px; margin: 1px 0 0 1px; background: var(--accent); -webkit-mask: var(--slash-b) center / 100% 100% no-repeat; mask: var(--slash-b) center / 100% 100% no-repeat; }
.sec-head__t { display: inline-block; transform: scaleX(var(--sq)); transform-origin: 0 50%; white-space: nowrap; }
.sec-head > .t-label { letter-spacing: .2em; font-weight: 400; }
.sec-head__aside { margin-left: auto; font: 500 15px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.sec-head__aside--sl { font-size: 14px; letter-spacing: -.04em; margin: -4px 3px 0 auto; }
.sec-head__aside--sl::before { content: ""; display: inline-block; width: 6px; height: 16px; margin: 0 9px -3px 0; background: var(--ink-soft); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.sec-head--l { font-size: var(--t-head-l); --sq: .68; letter-spacing: 0; align-items: flex-start; gap: 14px; }
.stat { display: flex; align-items: center; gap: 15px; }
/* --lw = the label's unscaled text width, set where something follows it, so the squeeze does not leave a gap */
.stat__label { display: inline-block; font: 700 var(--t-stat)/1 var(--font-sans); --sq: .75; text-transform: uppercase; letter-spacing: .05em; word-spacing: 3px;
  transform: scaleX(var(--sq)); transform-origin: 0 50%; white-space: nowrap; margin-right: calc(var(--lw, 0px) * (var(--sq) - 1)); }
.stat__count { display: inline-block; font: 400 28px/1 var(--font-display); color: var(--accent-2-ink); transform: scaleX(.8); transform-origin: 0 50%; margin-right: -4.5px; }
.stat .i, .status-table__row .i { color: var(--accent-2-ink); font-size: 22px; --icon: var(--ico-check-thin); }
.stat .i--play { font-size: inherit; }
.t-body-l { font: 400 var(--t-body-l)/1.3 var(--font-sans); }
.t-body { font: 400 var(--t-body)/1.3 var(--font-sans); }
.t-body-s { font: 400 var(--t-body-s)/1.3 var(--font-sans); }
.t-label { font: 400 var(--t-label)/1.3 var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.t-label--wide { font-size: 13px; letter-spacing: var(--tr-wide); }
.t-status { font: 500 var(--t-status)/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.mono { font-family: var(--font-mono); }
.rule { height: 0; border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--mark { border-top-color: var(--mark); }

/* ================================================================ masthead (2.3) */
.masthead { position: relative; z-index: 2; }
.masthead__word { position: absolute; display: flex; font: 400 var(--t-masthead)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-masthead, 0); -webkit-text-stroke: .5px currentColor; color: var(--ink); text-transform: uppercase; }
.masthead__word > * { display: block; transform: scaleX(var(--sq)); transform-origin: 0 0; white-space: nowrap; }
.masthead__word > :last-child { color: var(--accent); }
.masthead--a .masthead__word { --sq: var(--sq-masthead); left: 177px; top: 22px; }
/* the two vertical dividers of the masthead (ref 05: x 1035 from y 15 and x 1127 from y 93, both to y 154) */
.masthead--a::before { content: ""; position: absolute; left: 1035px; top: 15px; width: 2px; height: 139px; background: color-mix(in srgb, var(--accent) 45%, color-mix(in srgb, var(--ink-soft) 25%, var(--paper))); }
.masthead--a::after { content: ""; position: absolute; left: 1127px; top: 93px; width: 1px; height: 61px; background: color-mix(in srgb, var(--accent) 35%, var(--paper)); }
.masthead--a .masthead__word > :first-child { flex: 0 0 415px; min-width: 0; }
.masthead--b .masthead__word { left: 41px; top: 44px; letter-spacing: 0; }
.masthead--b .masthead__word > :first-child { --sq: .86; font-size: 166px; letter-spacing: 2.75px; flex: 0 0 490px; min-width: 0; }
.masthead--b .masthead__word > :last-child { --sq: .849; font-size: 170.5px; letter-spacing: -3.25px; }
.masthead .slash-label { position: absolute; }
.masthead--a .slash-label { left: 730px; top: 12px; font-size: 29px; --sq: .66; }
.masthead--b .slash-label { left: 686px; top: 110px; font-size: 27px; --sq: .675; letter-spacing: .1em; }
.masthead--b .slash-label::before { width: 14px; height: 31px; margin: 4px 19px 0 0; }
.index-list { position: absolute; left: 740px; top: 87px; white-space: nowrap; font: 400 9.5px/13px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 88%, var(--paper)); font-weight: 500; }
.index-list li.is-current { color: var(--ink); font-weight: 700; }
.index-list li.is-current::before { content: "/ "; }
.index-list--six { line-height: 12.5px; }
.dateline { position: absolute; left: 1054px; top: 89px; font: 500 16px/19.5px var(--font-sans); word-spacing: 3px; text-transform: uppercase; color: var(--ink); }
.aside-col { position: absolute; left: 1138px; top: 92px; width: 90px; font: 400 9px/13.1px var(--font-mono); letter-spacing: .145em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 85%, var(--paper)); font-weight: 500; padding-left: 5.5px; text-indent: -5.5px; }
.aside-col .is-sig { display: block; margin-top: 4px; white-space: nowrap; letter-spacing: .05em; text-indent: 0; }
.account-col { position: absolute; left: 1250px; top: 92px; width: 310px; font: 400 9.5px/14px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 85%, var(--paper)); font-weight: 500; }
.account-col::before { content: ""; position: absolute; left: -15px; top: 0; height: 70px; width: 1px; background: var(--mark); }
.account-col .is-stage { color: var(--ink); font-weight: 500; }
.account-col a { color: inherit; }
.masthead--b .account-col { left: 1260px; top: 40px; }
.masthead--b .account-col::before { display: none; }
/* masthead B decoration: top rule y 22 and the vertical hairline x 23 */
.masthead--b::before { content: ""; position: absolute; left: 17px; right: 22px; top: 23px; height: 1.5px; background: color-mix(in srgb, var(--accent) 55%, var(--paper)); }
.masthead--b::after { content: ""; position: absolute; left: 24px; top: 14px; height: 177px; width: 1.5px; background: color-mix(in srgb, var(--accent) 62%, var(--paper)); }
.underline-brush { position: absolute; left: 668px; top: 138px; width: 250px; height: 44px; background: var(--accent-2);
  -webkit-mask: var(--brush) 0 0 / 100% 100% no-repeat; mask: var(--brush) 0 0 / 100% 100% no-repeat; }
.meter-top { position: absolute; left: 957px; top: 129px; width: 262px; }
.meter-top__label { font: 400 18px/18px var(--font-sans); letter-spacing: .098em; text-transform: uppercase; white-space: nowrap; }
.meter-top__label b { font-weight: 700; color: var(--ink); }
.meter-top .bar { width: 262px; height: 12px; margin-top: 8px; border-radius: 6px; }

/* ================================================================ bar / progress / steps */
.bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; width: calc(var(--p, 50) * 1%); border-radius: inherit;
  background: linear-gradient(to right, var(--accent) calc(100% - 30px), color-mix(in srgb, var(--accent) 55%, var(--mark))); }
.progress { width: 244px; min-height: 187px; padding-left: 17px; border-left: 1px solid color-mix(in srgb, var(--mark) 30%, var(--rule)); }
.progress__head { display: flex; align-items: baseline; margin-bottom: 5px; }
.progress__head .sec-head { flex: none; width: 87px; --sq: .70; margin-left: -1px; }
.progress__head .t-label { font: 400 9px/1 var(--font-sans); letter-spacing: .1em; margin: 1px 0 0 1px; }
.progress .bar { width: 226px; margin-left: -1px; }
.steps { position: relative; margin-top: 12px; }
.steps li { position: relative; display: flex; align-items: center; gap: 11px; height: var(--h, 26px); font: 400 12px/1 var(--font-sans); letter-spacing: .02em; color: var(--ink); }
.steps__c { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink-soft); background: var(--paper); color: var(--on-accent); font-size: 10px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 7.5px; top: 21px; height: 18px; width: 1px; background: var(--rule); }
.steps li.is-done .steps__c, .steps li.is-current .steps__c { border-color: var(--accent); background: var(--accent); }
.steps li.is-current { font-weight: 500; }

/* ================================================================ buttons (2.7) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; height: 54px; padding: 0 16px 0 20px;
  background: var(--accent); color: var(--on-accent); font: 700 18px/1 var(--font-sans); letter-spacing: -.04em; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; }
.btn .i { font-size: 17px; vertical-align: 0; letter-spacing: 0; }
.btn--bar { --sqb: .74; display: flex; width: calc(100% / var(--sqb)); height: 51px; gap: 22px; font-size: 24px; font-weight: 700; letter-spacing: .14em; word-spacing: 0; text-transform: uppercase; transform: scaleX(var(--sqb)); transform-origin: 0 0; padding: 0 16px 0 32px; }
.btn--bar .i { font-size: 26px; --icon: var(--ico-arrow-thin); }
.btn--outline { background: var(--paper); color: var(--accent); border: 1.5px solid var(--accent); }
.btn--bar.btn--outline { height: 53px; letter-spacing: .11em; padding: 1px 22px 0 14px; gap: 26px; }
.btn--alert { background: var(--accent-2); color: var(--on-accent-2); }
.btn--s { height: 34px; padding: 0 12px; gap: 8px; font-size: 15px; }
.btn--s .i { font-size: 15px; }

/* ================================================================ chips (2.7) */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 29px; padding: 0 14px; font: 700 16px/1 var(--font-sans); letter-spacing: -.075em; word-spacing: .28em; text-transform: uppercase; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; }
.chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip[data-tone="alert"] { background: var(--accent-2); color: var(--on-accent-2); }
.chip[data-tone="calm"] { background: var(--accent-soft); color: var(--accent); }
.chip[data-tone="ok"], .chip[data-tone="warn"], .chip[data-tone="danger"], .chip[data-tone="muted"] { background: transparent; }
.chip[data-tone="ok"] { border-color: var(--success); color: var(--success); }
.chip[data-tone="warn"] { border-color: var(--warn); color: var(--warn); }
.chip[data-tone="danger"] { border-color: var(--danger); color: var(--danger); }
.chip[data-tone="muted"] { border-color: var(--rule); color: var(--muted); }
.chip[data-tone="ok"]::before, .chip[data-tone="warn"]::before, .chip[data-tone="danger"]::before, .chip[data-tone="muted"]::before
  { width: 12px; height: 12px; border-radius: 0; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.chip[data-tone="ok"]::before, .chip--s[data-tone="ok"]::before { --m: var(--ico-check); }
.chip[data-tone="warn"]::before, .chip--s[data-tone="warn"]::before { --m: var(--ico-bang); }
.chip[data-tone="danger"]::before, .chip--s[data-tone="danger"]::before { --m: var(--ico-x); }
.chip[data-tone="muted"]::before, .chip--s[data-tone="muted"]::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.chip--s { height: 18px; padding: 0; gap: 7px; background: none !important; border-color: transparent !important; font: 500 var(--t-status)/1 var(--font-mono); letter-spacing: .02em; }
.chip--s::before { width: 8px; height: 8px; }
.chip--s[data-tone="alert"] { color: var(--accent-2-ink); }
.chip--s[data-tone="ok"]::before, .chip--s[data-tone="warn"]::before, .chip--s[data-tone="danger"]::before, .chip--s[data-tone="muted"]::before { width: 9px; height: 9px; }
.brief-who { display: inline-flex; align-items: center; gap: 6px; height: 18px; font: 500 var(--t-status)/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.brief-who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.brief-who[data-who="you"]::before { background: var(--accent-2); }
.brief-who[data-who="you"] { color: var(--ink); font-weight: 700; }
.brief-who[data-who="agent"] { color: var(--accent); }

/* ================================================================ rails (2.2, 2.7) */
.rail { position: relative; z-index: 2; border-left: 1px solid var(--mark); border-right: 1px solid var(--mark); min-height: 0; }
/* end caps: a 6px tick and a 3 x 6 nub at each side, top and bottom */
.rail::before, .rail::after { content: ""; position: absolute; left: -4px; right: -4px; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) 3px 0 / 3px 6px no-repeat,
    linear-gradient(var(--mark), var(--mark)) 100% 0 / 7px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) calc(100% - 3px) 0 / 3px 6px no-repeat; }
.rail::before { top: 0; }
.rail::after { bottom: 0; transform: scaleY(-1); }
.rail-l { padding: 126px 0 0; overflow: visible; }
/* ref 05: a hand-inked hairline across the top (y 17) and a deep blue rule across the bottom (y 972-973), each ending in an inked tick */
.rail-l::before { left: -5px; right: -5px; top: -5px; height: 17px;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 62%, var(--paper)), color-mix(in srgb, var(--accent) 62%, var(--paper))) 4px 8px / 142px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 4px 0 / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 2px 3px / 4px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 144px -1px / 2px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 142px 4px / 4px 6px no-repeat; }
.rail-l::after { left: -5px; right: -5px; bottom: -2px; height: 20px; transform: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 4px 10px / 142px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 4px 0 / 2px 20px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 7px / 6px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 144px 7px / 2px 13px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 142px 8px / 4px 6px no-repeat; }
.rail-r { padding: 13px; border-top: 2px solid var(--accent); }
.rail-head { position: relative; height: 37px; padding: 0; }
.rail-head::before, .rail-head::after { content: ""; position: absolute; left: -1px; right: -1px; height: 1px; background: var(--mark); }
.rail-head::before { top: -3px; }
.rail-head::after { top: 36px; }
.rail-head .slash-label { font-size: 15px; --sq: .75; letter-spacing: .02em; margin-top: 2px; }
.rail-head .t-label { margin-top: -2px; padding-left: 13px; font-size: 9px; letter-spacing: .06em; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); white-space: nowrap; }
.rail-head + .tile { margin-top: 6px; }
.rail-toggle { position: absolute; right: 2px; top: -1px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 14px; cursor: pointer; z-index: 3; }
.rail-r > .rail-toggle { right: -19px; top: -2px; width: 17px; }
.rail-r__strip { display: none; }
.is-l-closed .rail-l .rail-toggle .i { transform: scaleX(-1); }
.is-r-closed .rail-r .rail-toggle .i { transform: scaleX(-1); }

/* persona tile: 134 wide, pitch 133 */
.tile { position: relative; display: block; width: 134px; height: 133px; margin: 0 3px 0; }
.tile__photo { position: relative; height: 92px; background: var(--paper-2); }
.tile__photo > img { width: 100%; height: 100%; object-fit: cover; }
.tile__num { position: absolute; right: 0; top: 0; z-index: 2; width: 18px; height: 16px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--paper); font: 500 10px/1 var(--font-mono); }
.tile__label { margin-top: 3px; padding-left: 8px; }
.tile__name { display: block; font: 700 16px/1.1 var(--font-sans); text-transform: uppercase; }
.tile__label .t-label { display: block; margin-top: 1px; font-size: 9.5px; letter-spacing: -.02em; color: var(--ink-soft); }
.tile.is-selected .tile__photo { height: 85px; border: 2px solid var(--accent-2); border-bottom: 0; }
.tile.is-selected .tile__num { border-color: var(--accent-2); right: -2px; top: -2px; }
.tile.is-selected .tile__label { margin-top: 0; height: 36px; padding: 3px 5px 0 8px; background: var(--accent-2); color: var(--on-accent-2);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 88% 100%, 0 100%); }
.tile.is-selected .tile__label .t-label { color: var(--on-accent-2); margin-top: 1px; }
.tile.is-dim .tile__photo { opacity: .45; }
/* collapsed rail (48 px): 36 x 36 photo with the number tab overlapping its top-right */
.tile--icon, .is-l-closed .rail-l .tile { width: 36px; height: 40px; margin: 0 0 8px 6px; }
.tile--icon .tile__photo, .is-l-closed .rail-l .tile .tile__photo { width: 36px; height: 36px; }
.tile--icon .tile__label, .is-l-closed .rail-l .tile .tile__label { display: none; }
.tile--icon .tile__num, .is-l-closed .rail-l .tile .tile__num { right: -8px; top: -6px; width: 16px; height: 14px; font-size: 9px; }
.tile--icon.is-selected .tile__photo, .is-l-closed .rail-l .tile.is-selected .tile__photo { height: 36px; border: 2px solid var(--accent-2); }
.is-l-closed .rail-l .rail-head .slash-label, .is-l-closed .rail-l .rail-head .t-label, .is-l-closed .rail-l .tile-parked { display: none; }
.is-l-closed .rail-l .tile + .tile, .is-l-closed .rail-l .tile { margin-bottom: 10px; }
.tile-parked { margin: 10px 3px 0; width: 134px; }
.tile-parked .locked { height: 62px; margin: 0; padding: 0 8px; gap: 0; }
.tile-parked .locked__lock { width: 20px; height: 20px; margin: 0 6px 0 0; font-size: 20px; }
.tile-parked .locked__title { width: auto; font-size: 12px; letter-spacing: .02em; }
.tile-parked__names { margin-top: 6px; color: var(--ink-soft); font-size: 9px; letter-spacing: .12em; }

/* ================================================================ counter band (2.7) */
.counters { position: relative; display: flex; gap: 14px; padding: 3px 4px 0; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); border-bottom: 1px solid var(--accent); background: transparent; z-index: 2; }
.counter { display: flex; align-items: center; height: 65px; min-width: 0; }
.counters { gap: 12px; }
.counter--alert { flex: 0 0 481px; padding-left: 20px; padding-right: 8px; background: var(--accent-2); color: var(--on-accent-2); --tw: 158px; --sq-counter: .86; }
.counter--calm { flex: 1 1 0; padding-left: 21px; background: var(--accent-soft); color: var(--accent); --tw: 234px; --sq-counter: .85; }
.counter--calm .counter__count { color: var(--ink); }
.counter__title { flex: 0 0 var(--tw); min-width: 0; }
.counter__count { flex: 0 0 84px; min-width: 0; }
.counter--calm .counter__count { flex-basis: 51px; }
.counter .i--chev-r { width: 10px; height: 18px; margin-right: 14px; flex: none; color: var(--ink); }
.counter--calm .i--chev-r { margin-right: 13px; }
.counter__div { flex: none; align-self: center; width: 1px; height: 49px; background: var(--ink); margin-right: 15px; }
.counter--calm .counter__div { margin-right: 13px; }
.counter--calm .counter__div { background: var(--accent); opacity: .6; }
.counter__mini { flex: 1; min-width: 0; padding-right: 3px; color: var(--ink); align-self: flex-start; margin-top: 7px; }
.counter__mini li { display: grid; grid-template-columns: 79px minmax(0, 1fr); overflow: hidden; height: 28px; align-items: center; font: 400 13px/1 var(--font-sans); white-space: nowrap; }
.counter__mini li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.counter__mini li + li { border-top: 1px solid color-mix(in srgb, var(--on-accent-2) 40%, transparent); }
.counter__mini b { display: inline-block; transform: scaleX(.82); transform-origin: 0 50%; font-weight: 700; text-transform: uppercase; }
.counter__grid { display: grid; grid-template-columns: 57px 59px; grid-template-rows: 28px 28px; align-items: center; flex: none; margin-top: 3px; white-space: nowrap; font: 400 11px/1 var(--font-sans); word-spacing: 5px; color: var(--ink); }
.counter__grid { position: relative; }
.counter__grid::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; border-top: 1px solid color-mix(in srgb, var(--accent) 40%, var(--accent-soft)); }
.bars { display: flex; align-items: flex-end; gap: 3.7px; height: 39px; margin: 6px 22px 0 8px; flex: none; }
.bars i { display: block; width: 5px; height: 100%; background: var(--accent); }
.bars i.is-ghost { background: none; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--accent-soft)); border-top-color: transparent; }
.bars i.is-line { width: 1px; margin-left: 3px; background: color-mix(in srgb, var(--accent) 35%, var(--accent-soft)); }

/* ================================================================ main panel + hero (2.2, 2.7) */
.main { position: relative; min-width: 0; min-height: 0; padding: 14px 10px 0 14px; border-right: 1px solid var(--mark); z-index: 1; }
.main::before { content: ""; position: absolute; left: 2px; top: 3px; bottom: 0; width: 1px; background: var(--mark); }
.main::after { content: ""; position: absolute; left: 2px; top: -2px; width: 2px; height: 5px; background: var(--accent); }
.hero { position: relative; display: grid; grid-template-columns: 558px minmax(0, 1fr) 235px; height: 187px; border-bottom: 1px solid var(--mark); }
.hero__l { padding-top: 0; }
.hero__l .t-label { display: block; margin: -2px 0 0 26px; font: 500 9.5px/1.3 var(--font-sans); letter-spacing: .014em; }
.hero__l .hero-name { margin: 9px 0 0 -3px; height: 104px; }
.hero__tag { margin-top: 12px; font: 400 9px/1.3 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.hero__m { position: relative; padding-top: 3px; }
.hero__stage { display: flex; align-items: center; gap: 12px; }
.hero__stage > b { display: inline-block; transform: scaleX(.86); transform-origin: 0 50%; margin-right: -5px; font: 700 14px/1 var(--font-sans); text-transform: uppercase; }
.hero__stage .chip { width: 165px; height: 31px; padding: 0 0 0 7px; gap: 13px; margin-left: 1px; }
.hero__ep { display: flex; align-items: center; gap: 21px; margin-top: 17px; font: 400 8.5px/1 var(--font-mono); letter-spacing: 0; color: var(--ink-soft); }
.hero__ep .i { font-size: 24px; margin: 0 -9px 0 0; color: var(--ink); }
.hero__ep .t-label { font-size: 8.5px; letter-spacing: 0; }
.hero__sl { width: 7px; height: 15px; margin-left: -9px; background: color-mix(in srgb, var(--accent) 55%, var(--ink-soft)); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.hero__title { margin-top: 20px; max-width: 205px; font: 500 21px/26px var(--font-sans); letter-spacing: .02em; word-spacing: 3px; text-transform: uppercase; }
.hero__meta { margin-top: 8px; letter-spacing: .043em; word-spacing: 2px; }
.hero__img { position: relative; height: 170px; margin-top: 9px; }
.hero__img .t-label { position: absolute; left: 175px; top: 11px; z-index: 3; width: 60px; font-size: 8.5px; font-weight: 500; letter-spacing: .24em; line-height: 13.5px; color: var(--ink); }
.hero__img > .i { --icon: var(--ico-arrow-thin); position: absolute; right: 10px; top: calc(50% + 10px); z-index: 3; font-size: 22px; color: var(--accent); transform: translateY(-50%); }

/* ================================================================ storyboard (2.7) */
.storyboard-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-left: 8px; }
.storyboard-head .sec-head { flex: none; width: 101px; letter-spacing: .02em; --sq: .76; }
.storyboard-head .t-label { margin-left: 0; font: 400 11px/1 var(--font-sans); letter-spacing: .01em; }
.storyboard-head .t-label::before { content: ""; display: inline-block; width: 6px; height: 12px; margin: 0 14px -1px 0; background: var(--accent); -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.storyboard { display: grid; grid-template-columns: repeat(4, 1fr); width: 948px; max-width: 100%; height: 212px; margin-top: 9px; border: 1px solid var(--rule); }
.shot { position: relative; padding: 7px var(--pr, 6px) 0 var(--pl, 6px); min-width: 0; }
.shot + .shot { border-left: 1px solid var(--rule); }
.shot + .shot::before { content: ""; position: absolute; left: -4px; top: 75px; z-index: 2; width: 8px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.shot__head { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--hg, 19px); margin-left: var(--hm, 0); width: max-content; height: 24px; padding: 0 9px 0 1px; margin-bottom: -24px; background: var(--paper); }
.shot__n { display: grid; place-items: center; width: 18px; height: 18px; margin-top: -3px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--font-mono); }
.shot__time { white-space: nowrap; font: 400 10px/1 var(--font-sans); letter-spacing: .03em; word-spacing: -.5px; text-transform: none; color: color-mix(in srgb, var(--ink) 62%, var(--paper)); margin-top: -3px; }
.shot__photo { height: 156px; margin-top: 0; overflow: hidden; }
.shot__title { display: block; margin-top: 8px; font: 500 13px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transform: scaleX(.8); transform-origin: 0 50%; -webkit-text-stroke: .3px currentColor; }
.shot__line { margin-top: 3px; letter-spacing: .05em; font-size: 11.5px; color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }

/* ================================================================ next tasks, progress block */
.hero-below { display: flex; gap: 0; }
.task { display: flex; align-items: center; width: 444px; height: 52px; padding: 0 4px 0 15px; background: var(--paper); border: 1px solid var(--rule); }
.task + .task { margin-top: 4px; }
.task__check { flex: none; width: 17px; height: 17px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--ink-soft)); background: transparent; }
.task__icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 21px; background: var(--ink); color: var(--paper); font-size: 19px; }
.task__label { margin-left: 9px; font: 500 15px/1 var(--font-sans); flex: 1; white-space: nowrap; }
.task__thumbs { flex: none; display: flex; gap: 7px; margin-right: 26px; }
.task__thumbs > * { display: block; width: 44px; height: 35px; }
.task__thumbs--one > * { width: 91px; }
.task__avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; margin-right: 9px; }
.task__avatar img { width: 100%; height: 100%; object-fit: cover; }
.task .t-status { flex: none; width: 64px; white-space: nowrap; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); font-size: 8.5px; letter-spacing: .06em; -webkit-text-stroke: .2px currentColor; }
.task.is-active { background: var(--accent-2-soft); border-color: var(--accent-2); }
.task.is-active .task__label { font-weight: 700; }
.task.is-active .t-status { color: var(--accent); }

/* ================================================================ locked strip (2.7) */
.locked { position: relative; isolation: isolate; display: flex; align-items: center; height: 62px; margin: 3px 8px 3px 3px; padding: 0 31px 0 21px; gap: 0; color: var(--ink); --tear: polygon(0.00% 2px, 1.61% 3px, 3.23% 3px, 4.84% 3px, 6.45% 3px, 8.06% 3px, 9.68% 3px, 11.29% 2px, 12.90% 1px, 14.52% 4px, 16.13% 2px, 17.74% 3px, 19.35% 1px, 20.97% 2px, 22.58% 1px, 24.19% 3px, 25.81% 4px, 27.42% 2px, 29.03% 4px, 30.65% 2px, 32.26% 1px, 33.87% 2px, 35.48% 2px, 37.10% 1px, 38.71% 3px, 40.32% 2px, 41.94% 4px, 43.55% 3px, 45.16% 2px, 46.77% 4px, 48.39% 2px, 50.00% 1px, 51.61% 2px, 53.23% 2px, 54.84% 2px, 56.45% 4px, 58.06% 2px, 59.68% 2px, 61.29% 1px, 62.90% 1px, 64.52% 2px, 66.13% 2px, 67.74% 2px, 69.35% 2px, 70.97% 3px, 72.58% 3px, 74.19% 2px, 75.81% 2px, 77.42% 3px, 79.03% 3px, 80.65% 2px, 82.26% 2px, 83.87% 3px, 85.48% 2px, 87.10% 4px, 88.71% 3px, 90.32% 1px, 91.94% 3px, 93.55% 4px, 95.16% 2px, 96.77% 2px, 98.39% 3px, 100.00% 1px, 100.00% calc(100% - 2px), 98.39% calc(100% - 3px), 96.77% calc(100% - 2px), 95.16% calc(100% - 2px), 93.55% calc(100% - 3px), 91.94% calc(100% - 2px), 90.32% calc(100% - 1px), 88.71% calc(100% - 4px), 87.10% calc(100% - 1px), 85.48% calc(100% - 3px), 83.87% calc(100% - 3px), 82.26% calc(100% - 3px), 80.65% calc(100% - 2px), 79.03% calc(100% - 1px), 77.42% calc(100% - 4px), 75.81% calc(100% - 3px), 74.19% calc(100% - 2px), 72.58% calc(100% - 3px), 70.97% calc(100% - 2px), 69.35% calc(100% - 3px), 67.74% calc(100% - 4px), 66.13% calc(100% - 2px), 64.52% calc(100% - 1px), 62.90% calc(100% - 2px), 61.29% calc(100% - 2px), 59.68% calc(100% - 2px), 58.06% calc(100% - 3px), 56.45% calc(100% - 1px), 54.84% calc(100% - 4px), 53.23% calc(100% - 1px), 51.61% calc(100% - 2px), 50.00% calc(100% - 4px), 48.39% calc(100% - 3px), 46.77% calc(100% - 4px), 45.16% calc(100% - 2px), 43.55% calc(100% - 1px), 41.94% calc(100% - 4px), 40.32% calc(100% - 3px), 38.71% calc(100% - 3px), 37.10% calc(100% - 1px), 35.48% calc(100% - 3px), 33.87% calc(100% - 1px), 32.26% calc(100% - 2px), 30.65% calc(100% - 3px), 29.03% calc(100% - 4px), 27.42% calc(100% - 4px), 25.81% calc(100% - 2px), 24.19% calc(100% - 3px), 22.58% calc(100% - 3px), 20.97% calc(100% - 4px), 19.35% calc(100% - 3px), 17.74% calc(100% - 3px), 16.13% calc(100% - 3px), 14.52% calc(100% - 1px), 12.90% calc(100% - 3px), 11.29% calc(100% - 3px), 9.68% calc(100% - 3px), 8.06% calc(100% - 2px), 6.45% calc(100% - 1px), 4.84% calc(100% - 2px), 3.23% calc(100% - 2px), 1.61% calc(100% - 3px), 0.00% calc(100% - 3px)); }
/* torn paper: an outline layer and a speckled fill layer share the torn clip-path, the fill 1 px smaller, so the ink edge shows along the tear */
.locked::before, .locked::after { content: ""; position: absolute; z-index: -1; clip-path: var(--tear); pointer-events: none; }
.locked::before { inset: 0; background: color-mix(in srgb, var(--ink) 44%, var(--paper)); }
.locked::after { inset: 1px 1px 1.2px; background: var(--speck-img) 0 0 / 300px 120px, var(--cloud-img) 0 0 / 400px 120px, color-mix(in srgb, var(--ink) 1.5%, var(--paper)); }
.locked__lock { flex: none; width: 26px; height: 26px; margin: 0 23px 0 -5px; font-size: 26px; }
.locked__title { flex: none; width: 87px; font: 500 12.5px/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; -webkit-text-stroke: .3px currentColor; transform: scaleX(.91); transform-origin: 0 50%; margin-left: -1px; }
.locked__div { flex: none; width: 1px; height: 31px; background: color-mix(in srgb, var(--ink) 52%, var(--paper)); }
.locked__dot { display: inline-block; width: 7.3px; height: 7.3px; margin: 0 8.6px 1px 13.6px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.locked__what { flex: none; width: 304px; padding-left: 26px; position: relative; top: -3px; white-space: nowrap; transform: scaleX(.875); transform-origin: 0 50%; font: 700 13.2px/1 var(--font-sans); letter-spacing: .03em; word-spacing: 4.6px; text-transform: uppercase; }
.locked__text { flex: 1 1 450px; min-width: 0; padding: 0 23px 0 16px; font: 400 11px/14px var(--font-sans); letter-spacing: .03em; padding-top: 2px; color: color-mix(in srgb, var(--ink) 75%, var(--paper)); }
.locked__more { flex: none; display: inline-flex; align-items: center; gap: 12px; padding-left: 28px; font: 500 9.5px/1 var(--font-sans); }
.locked__more .i { font-size: 17px; --icon: var(--ico-arrow-thin); }

/* ================================================================ right rail (2.7): calendar, releases, queue */
.rail-r { padding: 13px 8px 13px 12px; }
.rail-r .cal { padding-top: 0; }
.cal__days { display: grid; grid-template-columns: repeat(7, 46.3px); margin: 0 0 0 -11px; }
.cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; margin: 0 3px; font: 400 10px/1 var(--font-sans); letter-spacing: -.02em; text-transform: uppercase; gap: 8px; }
.cal__day b { font: 400 17px/1 var(--font-sans); letter-spacing: 0; }
.cal__day.is-today { background: var(--accent-2); color: var(--on-accent-2); }
.cal__day.is-today b { font-weight: 700; }
.cal__nav { display: flex; justify-content: flex-end; gap: 3px; margin: 1px -2px 0 0; height: 12px; font-size: 12px; }
.cal__rule { height: 1px; background: var(--mark); margin: 17px 0 4px; }
.rail-r .releases-head { margin-top: 10px; }
.sec-head--u { padding-bottom: 2px; margin-left: 5px; border-bottom: 1px solid var(--mark); width: 114px; --sq: .79; }
.release { position: relative; display: grid; grid-template-columns: 78px 1fr; width: 100%; min-height: 90px; padding: 1px; margin-top: 8px; border: 1px solid var(--rule); box-shadow: var(--shadow-lift); }
.release + .release { margin-top: 13px; }
.release__thumb { height: 84px; }
.release__main { display: grid; grid-template-columns: 37px 1px 1fr; gap: 0 4px; padding: 9px 8px 0 8px; align-items: start; }
.release__body { padding-left: 5px; }
.release__rule { align-self: start; height: 34px; background: var(--rule); margin: 0; }
.release__body { min-width: 0; }
.release__row { display: flex; align-items: center; justify-content: space-between; }
.release__time { font: 400 16px/1 var(--font-sans); letter-spacing: -.02em; }
.release__title { margin-top: 10px; font: 500 12px/1.2 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sep { display: inline-block; font-style: normal; margin: 0 var(--sepm, .63em); }
.release__meta { --sepm: .95em; margin-top: 10px; font-size: 11px; letter-spacing: -.02em; color: var(--ink-soft); }
.release__row { padding-right: 3px; }
.release__more { position: absolute; right: 8px; bottom: 12px; font-size: 20px; }
.glyph { display: inline-grid; place-items: center; flex: none; width: 37px; height: 36px; border-radius: var(--r-2); background: var(--ink); color: var(--paper); font-size: 35px; }
.glyph--bare { background: none; color: var(--ink); width: 28px; height: 30px; font-size: 34px; margin: -10px 2px 0 -3px; }
.glyph--sm { width: 27px; height: 28px; border-radius: 5px; font-size: 25px; }
.queue { margin-top: 30px; }
.queue__head { display: flex; align-items: flex-start; height: 29px; gap: 17px; padding-bottom: 0; border-bottom: 1px solid var(--rule-mark, var(--rule)); }
.queue__head .sec-head { flex: none; width: 90px; margin-left: 4px; --sq: .75; }
.queue__count { font: 400 19px/1 var(--font-display); color: var(--accent); margin-top: 0; }
.queue__all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; margin: 0 3px 0 auto; height: 18px; font-size: 10px; }
.queue__all .i { font-size: 20px; }
.q-row { display: grid; grid-template-columns: 27px 71px 56px 1fr 20px; align-items: center; height: var(--rh, 78px); border-bottom: 1px solid var(--rule); gap: 0; }
.q-row .glyph { justify-self: center; }
.q-row__n { font: 400 14px/1 var(--font-sans); letter-spacing: -.03em; margin: -1px 0 0 -2px; }
.q-row__thumb { align-self: start; margin-top: var(--tm, 9px); width: 71px; height: var(--th, 62px); }
.q-row__date { font: 400 10.5px/1.2 var(--font-sans); letter-spacing: -.045em; }
.q-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 6px 8px 0 0; font: 500 12px/1.2 var(--font-sans); letter-spacing: -.03em; }
.q-row__meta { margin-top: 9.5px; font: 400 10.5px/1.2 var(--font-sans); letter-spacing: -.02em; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.q-row > .i--dots { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='4.5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19.5' cy='12' r='1.6'/%3E%3C/svg%3E"); font-size: 24px; margin-left: -6px; color: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.q-row > :nth-child(4) { padding-top: 4px; }
.q-row > :nth-child(4) { padding-left: 2px; min-width: 0; }
/* collapsed right rail (48 px strip) */
.is-r-closed .rail-r { padding: 13px 0; overflow: hidden; }
.is-r-closed .rail-r > :not(.rail-toggle):not(.rail-r__strip) { display: none; }
.is-r-closed .rail-r > .rail-toggle { right: 14px; }
.is-r-closed .rail-r__strip { display: block; margin-top: 40px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: left; color: var(--ink-soft); height: 330px; margin-left: 15px; }

/* ================================================================ creator card (13), placeholder card, compact card */
.ccard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 17px 16px 0 17px; border: 1px solid var(--mark); border-top: 2px solid var(--accent); }
.ccard__name { height: 66px; margin: 3px 0 0 -2px; flex: none; }
.ccard__meta { margin: 9px 0 0 3px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); font: 400 18px/20px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ccard__body { display: grid; grid-template-columns: var(--ph, 303px) 1px minmax(0, 1fr); column-gap: var(--cg, 9px); height: 293px; margin: 4px 0 10px -1px; }
.ccard__photo { height: 293px; }
.ccard__photo > img { width: 100%; height: 100%; object-fit: cover; }
.ccard__vr { background: var(--rule); }
.ccard__side { display: flex; flex-direction: column; min-width: 0; padding-left: 2px; }
.ccard__side .stat { flex: none; height: 35px; padding-bottom: 3px; margin-bottom: 10px; border-bottom: 1px solid var(--rule); margin-left: 0; }
.ccard__still { flex: 1 1 0; min-height: 0; }
.ccard__side > .stat + .ccard__still { flex: 0 0 116px; }
.ccard__still + .ccard__still { margin-top: 8px; }
.ccard__still > img { width: 100%; height: 100%; object-fit: cover; }
.ccard__voice, .ccard__hooks { margin: 0; padding: 0 0 0 7px; border-top: 1px solid var(--rule); }
.ccard__voice { padding-top: 7px; padding-bottom: 9px; }
.ccard__voice .stat, .ccard__hooks .stat { height: 22px; }
.ccard__hooks { padding-top: 4px; padding-bottom: 0; }
.ccard__voice .wave { margin: 7px 0 0 -1px; }
.ccard .hook-chip { height: 39px; margin: 2px 3px 11px 6px; padding-left: 15px; }
.ccard > .btn--bar { margin: 0 1px; flex: none; }
.ccard > .btn--bar.btn--outline { margin-top: 3.5px; margin-bottom: 14.5px; }
.ccard > :last-child { margin-bottom: 16px; }
.play { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent-2); color: var(--ink); font-size: 26px; }
.play .i { margin-left: 3px; vertical-align: 0; }
.ccard__voice .play { transform: translateY(-2px); }
.ccard__hooks .stat .i { transform: translate(-2px, -2px); }
.wave { display: flex; align-items: center; gap: 19px; }
.wave__bars { flex: 1; height: 50px; max-width: 376px; background: var(--muted);
  -webkit-mask: var(--wave) 0 0 / 100% 100% no-repeat; mask: var(--wave) 0 0 / 100% 100% no-repeat; }
.hook-chip { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-1);
  background: var(--accent-2-soft); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); font: 500 22px/1 var(--font-sans); }
.ccard--empty { padding-left: 16px; }
.ccard--empty .ccard__body { grid-template-columns: 257px minmax(0, 1fr); column-gap: 0; }
.ccard--empty .ccard__desc { padding: 53px 0 0 28px; line-height: 1.35; }
.ccard--empty .silhouette { height: 292px; }
.status-table { margin: 0 0 15px; border: 1px solid var(--rule); }
.status-table__row:first-child { height: 37px; }
.status-table__row { display: flex; align-items: center; height: 40px; padding: 0 16px 0 18px; border-top: 1px solid var(--rule); }
.status-table__row:first-child { border-top: 0; }
.status-table__row > b { flex: 0 0 auto; margin-right: auto; display: inline-block; transform: scaleX(.84); transform-origin: 0 50%; font: 700 18px/1 var(--font-sans); letter-spacing: .01em; text-transform: uppercase; }
.status-table__dash { width: 19px; height: 0; border-top: 2px solid color-mix(in srgb, var(--muted) 85%, var(--rule)); margin-right: 35px; }
.status-table__state { width: 136px; font: 700 13.5px/1 var(--font-sans); letter-spacing: .14em; word-spacing: 4px; text-transform: uppercase; color: var(--muted); }
.status-table__row .i { color: var(--accent-2-ink); font-size: 20px; }
.ccard--empty .ccard__body + .status-table { margin-top: 0; }
.ccard--compact { width: 365px; padding: 16px 16px 16px; }
.ccard--compact .ccard__name { font-size: 48px; height: 44px; letter-spacing: -.02em; -webkit-text-stroke: .6px currentColor; --sq: .94; }
.ccard--compact .ccard__meta { margin-top: 10px; font-size: 12px; letter-spacing: .16em; line-height: 15px; padding-bottom: 8px; }
.ccard--compact .ccard__photo { width: 100%; height: auto; aspect-ratio: 1; margin: 10px 0 12px; }
.ccard--compact .chip { align-self: flex-start; }
.ccard--compact .stat { margin-top: 10px; }
.ccard--compact .stat + .stat { margin-top: 6px; }

/* ================================================================ extension components (2.8) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: flex-end; }
.tabs__i { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 6px; font: 700 15px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.tabs__i::before { content: ""; width: 8px; height: 15px; background: currentColor; -webkit-mask: var(--slash) center / 100% 100% no-repeat; mask: var(--slash) center / 100% 100% no-repeat; }
.tabs__i.is-current { color: var(--ink); box-shadow: inset 0 -2px var(--accent-2); }
.tabs--sub { gap: 4px 20px; margin-top: 10px; }
.tabs--sub .tabs__i { font: 400 var(--t-label)/1 var(--font-mono); letter-spacing: var(--tr-label); padding-bottom: 5px; }
.tabs--sub .tabs__i::before { display: none; }
.tabs--sub .tabs__i.is-current { font-weight: 700; }
.field { display: block; min-width: 0; }
.field > .t-label { display: block; color: var(--ink-soft); }
.field__v { display: block; margin-top: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 500 16px/1.2 var(--font-sans); min-height: 26px; }
.field.is-focus .field__v { border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.doc { background: var(--paper); border: 1px solid var(--rule); padding: 24px; font: 400 16px/1.45 var(--font-sans); }
.doc__line { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
.doc__line + .doc__line { margin-top: 8px; }
.doc__n { padding-top: 5px; color: var(--muted); font-size: 9px; }
.doc b { font-weight: 700; }
.table { width: 100%; font: 400 13px/1.3 var(--font-sans); }
.table th { height: 30px; padding: 0 10px; text-align: left; font: 400 var(--t-label)/1.3 var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.table td { height: 40px; padding: 0 10px; border-bottom: 1px solid var(--rule); }
.table .num { text-align: right; font: 500 13px/1 var(--font-mono); }
.table th.num { text-align: right; font: 400 var(--t-label)/1.3 var(--font-mono); letter-spacing: var(--tr-label); }
.pick__head { margin-bottom: 10px; color: var(--ink-soft); }
.pick__cards { display: flex; gap: 12px; }
.pick__card { position: relative; flex: 1 1 0; min-width: 0; padding: 8px; border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.pick__photo { height: 120px; }
.pick__photo > img { width: 100%; height: 100%; object-fit: cover; }
.pick__row { display: flex; align-items: center; justify-content: space-between; font: 500 11px/1 var(--font-mono); }
.pick__card .btn--outline { height: 30px; font-size: 14px; padding: 0 10px; }
.pick__card.is-picked { border: 2px solid var(--accent-2); padding: 7px; }
.consequence { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; color: var(--ink-soft); }
.consequence .mono { font-weight: 500; color: var(--ink); }
.thread__row { display: grid; grid-template-columns: 54px 250px 90px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.thread__row > time { font: 400 11px/1.3 var(--font-mono); padding-top: 1px; }
.who { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.who__av { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--paper); font: 700 8px/1 var(--font-sans); }
.who__av > img { width: 100%; height: 100%; object-fit: cover; }
.who__name { font: 700 12px/1 var(--font-sans); text-transform: uppercase; }
.who--shared .who__name { text-transform: none; }
.who .who__flag { color: var(--warn); font-weight: 700; }
.who .t-label { font-size: 9px; letter-spacing: .15em; color: var(--ink-soft); }
.meter { display: block; }
.meter__labels { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 9px; letter-spacing: .15em; }
.meter__bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--track); overflow: visible; }
.meter__bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--spent, 50%); border-radius: var(--r-pill) 0 0 var(--r-pill); background: var(--accent); }
.meter__bar > .meter__run { position: absolute; top: 0; bottom: 0; left: var(--spent, 50%); width: calc(min(var(--after, 70%), 100%) - var(--spent, 50%)); background: color-mix(in srgb, var(--accent) 55%, var(--paper)); border-radius: 0; }
.meter__tick { position: absolute; top: -4px; bottom: -4px; left: min(var(--after, 70%), 100%); width: 2px; margin-left: -1px; background: var(--ink); }
.meter__tick .t-label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.meter.is-over .meter__bar > .meter__run { background: var(--danger); }
.meter.is-over .meter__tick .t-label { color: var(--danger); font-weight: 700; }
.meter__bar { margin-bottom: 18px; }
.quote-box { padding: 16px 18px; background: var(--accent-2-soft); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); }
.quote-box__price { font: 400 var(--t-counter)/1 var(--font-display); }
.quote-box > .t-label { display: block; margin: 6px 0 14px; color: var(--ink-soft); }
.quote-box__actions { display: flex; gap: 10px; margin-top: 4px; }
.quote-record { padding: 10px 14px; border: 1px solid var(--rule); }
.quote-record > .t-label { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .12em; }
.timeline { position: relative; height: 86px; --len: 30; }
.timeline__ruler { position: relative; height: 18px; border-bottom: 1px solid var(--ink); font: 400 10px/1 var(--font-mono); }
.timeline__ruler span { position: absolute; bottom: 0; left: calc(var(--t) / var(--len) * 100%); padding-bottom: 4px; transform: translateX(-50%); }
.timeline__ruler span::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 1px; height: 3px; background: var(--ink); }
.timeline__shots { position: relative; height: 36px; margin-top: 6px; }
.timeline__shot { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / var(--len) * 100%); width: calc((var(--b) - var(--a)) / var(--len) * 100%); background: var(--accent-soft); border: 1px solid var(--accent); font: 500 9px/1 var(--font-mono); padding: 4px; }
.timeline__nomove { position: absolute; top: 0; bottom: 0; left: calc((var(--t) - 1) / var(--len) * 100%); width: calc(1 / var(--len) * 100%);
  background: repeating-linear-gradient(135deg, var(--accent-2-soft) 0 3px, transparent 3px 6px); }
.timeline__cut { position: absolute; top: -2px; bottom: -2px; left: calc(var(--t) / var(--len) * 100%); width: 1px; background: var(--ink); }
.timeline__zoom { position: absolute; bottom: -12px; left: calc(var(--t) / var(--len) * 100%); width: 9px; height: 9px; margin-left: -4px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.timeline__zoom--push { background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0, 50% 22%, 18% 88%, 82% 88%, 50% 22%); }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi__n { font: 400 64px/1 var(--font-display); }
.kpi--s .kpi__n { font-size: 51px; }
.chart-bars { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 140px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.chart-bars__c { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.chart-bars__c i { display: block; width: 100%; max-width: 22px; height: var(--h, 50%); background: var(--accent); }
.chart-bars__c .t-label { position: absolute; bottom: -18px; font-size: 10px; letter-spacing: 0; }
.chart-bars__target { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--tt, 60%) * .85); border-top: 1px dashed var(--accent-2-ink); }
.chart-bars__target .t-label { position: absolute; right: 0; top: -14px; color: var(--accent-2-ink); font-size: 9px; letter-spacing: .12em; }
.phone-frame { position: relative; width: 270px; height: 480px; overflow: hidden; background: var(--silhouette-bg); }
.phone-frame > .duo, .phone-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone-frame > img { object-fit: cover; }
.phone-frame .play { position: absolute; left: 50%; top: 50%; margin: -26px 0 0 -26px; z-index: 3; }
.phone-frame__cap { position: absolute; left: 14px; right: 14px; bottom: 74px; z-index: 3; text-align: center; font: 700 26px/1.05 var(--font-sans); text-transform: uppercase; color: #fff; -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.phone-frame__cap em { font-style: normal; color: var(--accent-2); }
.phone-frame__eyes, .phone-frame__beats-y { position: absolute; left: 0; right: 0; z-index: 3; height: 0; }
.phone-frame__eyes { top: 30%; border-top: 1px dashed var(--mark); }
.phone-frame__beats-y { top: 62%; border-top: 1px solid var(--accent-2-ink); }
.phone-frame__eyes > .t-label, .phone-frame__beats-y > .t-label { position: absolute; right: 4px; top: -13px; font-size: 8px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 0 #000; }
.wizard { display: flex; }
.wizard li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 400 11px/1.2 var(--font-sans); }
.wizard li:not(:last-child)::after { content: ""; position: absolute; left: 22px; right: 6px; top: 7.5px; height: 1px; background: var(--rule); }
.wizard li .steps__c { background: var(--paper); }
.wizard li.is-done .steps__c, .wizard li.is-current .steps__c { background: var(--accent); border-color: var(--accent); }
.wizard li.is-current { font-weight: 700; }
.dropzone { display: grid; place-items: center; min-height: 72px; border: 1px dashed var(--ink-soft); color: var(--ink-soft); }

/* grain sample for the kit page: the same noise on a patch, at the palette strength or at full strength */
.grain-demo { position: relative; isolation: isolate; background: var(--paper); }
.grain-demo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-img); background-size: 240px 240px;
  opacity: calc(var(--grain) * var(--grain-scale, 1)); mix-blend-mode: var(--grain-blend); }
.grain-demo--max::after { opacity: 1; }