/* GENERATED by build.py , each block lifted verbatim from its component.
   Do not edit. Edit the component in 04 design-system/ (and nothing here
   may edit that either: it is read-only to this build). */

/* ===== C-buttons , 04 design-system/components/controls/C-buttons.html ===== */
.c-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.c-slabbtn{display:inline-flex;align-items:center;justify-content:center;
  appearance:none;cursor:pointer;text-decoration:none;border:0;
  padding:var(--s4) var(--s6);min-height:var(--tap-min);
  background:var(--primary);color:var(--black);border-radius:var(--radius-slab);
  font:900 clamp(17px,1.8vw,22px)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.04em;
  transition:transform var(--dur-squash) var(--ease-verb-squash),
             background var(--dur-state) var(--ease-out)}
.c-slabbtn:hover,.c-slabbtn.is-hover{transform:scale(1.03,.95)}
.c-slabbtn:active,.c-slabbtn.is-active{transform:scale(.97,1.04)}
.c-slabbtn.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-slabbtn.is-disabled,.c-slabbtn[disabled]{cursor:not-allowed;transform:none;
  background:var(--hairline);color:var(--cream)}
.on-dark .c-slabbtn.is-focus,.spec-stage--black .c-slabbtn.is-focus{
  outline-color:var(--focus-colour-on-dark)}
.c-btn2{display:inline-flex;align-items:center;gap:var(--s4);appearance:none;
  cursor:pointer;text-decoration:none;border:0;
  padding:var(--s4) var(--s5);min-height:var(--tap-min);
  background:var(--dc,var(--primary));color:var(--black);border-radius:var(--radius-slab);
  font:900 clamp(16px,1.6vw,21px)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.02em;
  transition:transform var(--dur-state) var(--ease-out)}
.c-btn2--ghost{background:none;color:var(--ink);
  box-shadow:inset 0 0 0 var(--rule) currentColor}
.c-btn2 svg{width:30px;height:18px;flex:none}
.c-btn2 svg path{fill:none;stroke:currentColor;stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round}
.c-btn2:hover,.c-btn2.is-hover{transform:translateX(var(--s2))}
.c-btn2:active,.c-btn2.is-active{transform:translateX(var(--s2)) scale(1,.95)}
.c-btn2.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-btn2.is-disabled,.c-btn2[disabled]{cursor:not-allowed;transform:none;
  background:var(--hairline);color:var(--cream)}
.c-btn2--ghost.is-disabled,.c-btn2--ghost[disabled]{background:none;color:var(--hairline);
  box-shadow:inset 0 0 0 var(--rule) var(--hairline)}
.c-link{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;
  color:inherit;min-height:var(--tap-min);
  font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;
  box-shadow:inset 0 calc(var(--rule) * -1) 0 currentColor}
.c-link svg{width:28px;height:17px;flex:none;
  transition:transform var(--dur-state) var(--ease-bounce)}
.c-link svg path{fill:none;stroke:currentColor;stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round}
.c-link:hover svg,.c-link.is-hover svg{transform:translateX(var(--s2))}
.c-link.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-link.is-disabled{opacity:.45;pointer-events:none}
.c-iconbtn{display:inline-flex;align-items:center;justify-content:center;
  appearance:none;cursor:pointer;border:0;padding:var(--s3);
  width:var(--tap-min);height:var(--tap-min);flex:none;
  background:var(--black);color:var(--cream);border-radius:var(--radius-slab);
  font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed);
  transition:background var(--dur-state) var(--ease-out)}
.c-iconbtn u-svg{width:22px;display:block}
.c-iconbtn:hover,.c-iconbtn.is-hover{background:var(--primary);color:var(--black)}
.c-iconbtn.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-iconbtn.is-disabled,.c-iconbtn[disabled]{cursor:not-allowed;
  background:var(--hairline);color:var(--cream)}
.c-sold.is-sold .c-btn2{--dc:var(--care)}

/* ===== C-choices , 04 design-system/components/controls/C-choices.html ===== */
.c-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.c-tog{appearance:none;border:0;cursor:pointer;background:var(--black);padding:6px;
  width:132px;height:56px;position:relative;display:block;
  border-radius:var(--radius-slab)}
.c-tog__knob{position:absolute;top:6px;left:6px;width:60px;height:44px;
  background:var(--cream);border-radius:var(--radius-slab);
  transition:transform var(--dur-bounce) var(--ease-verb-bounce),
             background var(--dur-state) var(--ease-out)}
.c-tog[aria-pressed="true"] .c-tog__knob,
.c-tog[aria-checked="true"] .c-tog__knob{transform:translateX(60px);background:var(--primary)}
.c-tog em{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-invert);font:900 14px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.08em;font-style:normal}
.c-tog[aria-pressed="true"] em,
.c-tog[aria-checked="true"] em{right:auto;left:16px;color:var(--ink-invert)}
.c-tog:focus-visible,.c-tog.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-tog.is-disabled,.c-tog[disabled]{cursor:not-allowed}
.c-tog.is-disabled .c-tog__knob,.c-tog[disabled] .c-tog__knob{background:var(--hairline)}
.c-tog.is-disabled em,.c-tog[disabled] em{opacity:.4}
.c-cb{display:flex;align-items:center;gap:14px;cursor:pointer;min-height:var(--tap-min);
  font:900 20px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase}
.c-cb input{position:absolute;opacity:0;width:0;height:0}
.c-cb__box{width:44px;height:44px;flex:0 0 44px;background:var(--cream);position:relative;
  border-radius:var(--radius-slab);box-shadow:inset 0 0 0 var(--rule-heavy) var(--black);
  transition:background var(--dur-state) var(--ease-out)}
.c-cb__box svg{position:absolute;inset:6px;width:auto;height:auto}
.c-cb__box path{stroke:var(--black);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  fill:none;stroke-dasharray:44;stroke-dashoffset:44;
  transition:stroke-dashoffset var(--dur-draw) var(--ease-verb-draw)}
.c-cb input:checked + .c-cb__box,.c-cb.is-checked .c-cb__box{background:var(--care)}
.c-cb input:checked + .c-cb__box path,
.c-cb.is-checked .c-cb__box path{stroke-dashoffset:0}
.c-cb input:focus-visible + .c-cb__box,
.c-cb.is-focus .c-cb__box{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-cb.is-error .c-cb__box{box-shadow:inset 0 0 0 var(--rule-heavy) var(--black),
  inset 0 0 0 9px var(--coral)}
.c-cb.is-disabled{pointer-events:none;color:var(--hairline)}
.c-cb.is-disabled .c-cb__box{box-shadow:inset 0 0 0 var(--rule-heavy) var(--hairline)}
.c-r.is-disabled{pointer-events:none;color:var(--hairline)}
.c-r.is-disabled .c-r__dot{box-shadow:inset 0 0 0 var(--rule-heavy) var(--hairline)}
.c-rad{display:flex;flex-direction:column;gap:10px}
.c-r{display:flex;align-items:center;gap:14px;cursor:pointer;min-height:var(--tap-min);
  font:900 20px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase}
.c-r input{position:absolute;opacity:0;width:0;height:0}
.c-r__dot{width:34px;height:34px;flex:0 0 34px;border-radius:var(--radius-round);
  background:transparent;box-shadow:inset 0 0 0 var(--rule-heavy) var(--black);
  transition:box-shadow var(--dur-bounce) var(--ease-verb-bounce)}
.c-r input:checked + .c-r__dot,
.c-r.is-selected .c-r__dot{box-shadow:inset 0 0 0 17px var(--stage)}
.c-r input:focus-visible + .c-r__dot,
.c-r.is-focus .c-r__dot{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-set{border:0;margin:0;padding:0;min-width:0}
.c-set > legend{padding:0;margin:0 0 var(--s4);
  font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.c-set__items{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}

/* ===== C-countdown , 04 design-system/components/controls/C-countdown.html ===== */
.c-count-stage{display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(320px,34vw,430px)}
.c-count{--cd:clamp(46px,8.4vw,100px);
  display:flex;align-items:center;justify-content:center;flex:1 1 auto;
  perspective:2600px;perspective-origin:34% 44%}
.c-count__sep{display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--cd) * .20);
  padding:0 calc(var(--cd) * .23);align-self:center}
.c-count__sep i{display:block;width:calc(var(--cd) * .13);height:calc(var(--cd) * .13);
  background:var(--black)}
.c-count{--cy:-7deg}
.c-count__d{--turn:0deg;position:relative;width:var(--cd);height:calc(var(--cd) * 1.35);
  flex:none;transform-style:preserve-3d;
  transform:rotateY(var(--cy)) rotateX(var(--turn));
  transition:transform var(--dur-drop) var(--ease-verb-drop)}
.c-count__d + .c-count__d{margin-left:calc(var(--cd) * .11)}
.c-count__d[data-face="1"]{--turn:-90deg}
.c-count__d[data-face="2"]{--turn:-180deg}
.c-count__d[data-face="3"]{--turn:-270deg}
.c-count__d::after{content:"";position:absolute;top:0;bottom:0;
  left:50%;width:calc(var(--cd) * 1.35);margin-left:calc(var(--cd) * -.675);
  background:var(--black);backface-visibility:hidden;
  transform:rotateY(90deg) translateZ(calc(var(--cd) * .5))}
.c-count__f{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--black);border-radius:var(--radius-slab);
  font:900 calc(var(--cd) * .80)/1 var(--font);font-stretch:var(--wdth-condensed);
  letter-spacing:-.02em;backface-visibility:hidden}
.c-count__f:nth-child(1){transform:translateZ(calc(var(--cd) * .675))}
.c-count__f:nth-child(2){transform:rotateX(90deg) translateZ(calc(var(--cd) * .675))}
.c-count__f:nth-child(3){transform:rotateX(180deg) translateZ(calc(var(--cd) * .675))}
.c-count__f:nth-child(4){transform:rotateX(270deg) translateZ(calc(var(--cd) * .675))}
.c-count--flat .c-count__d{transform-style:flat;transform:none}
.c-count--flat .c-count__d::after{display:none}
.c-count--flat .c-count__f{backface-visibility:visible;opacity:0;transform:none;
  box-shadow:inset 0 0 0 var(--rule) var(--black);
  transition:opacity var(--dur-state) var(--ease-out)}
.c-count--flat .c-count__d[data-face="0"] .c-count__f:nth-child(1),
.c-count--flat .c-count__d[data-face="1"] .c-count__f:nth-child(2),
.c-count--flat .c-count__d[data-face="2"] .c-count__f:nth-child(3),
.c-count--flat .c-count__d[data-face="3"] .c-count__f:nth-child(4){opacity:1}
.c-count-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7);
  margin-top:var(--s7)}
.c-count-cap{margin:0;font:700 var(--size-micro)/1.4 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--black)}
.c-count-btn{appearance:none;cursor:pointer;background:var(--cream);color:var(--black);
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  padding:var(--s3) var(--s5);min-height:var(--tap-min);
  font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.c-count-btn:hover{background:var(--black);color:var(--cream)}

/* ===== C-form , 04 design-system/components/controls/C-form.html ===== */
.c-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.c-col{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;min-width:0}
.c-btn2{display:inline-flex;align-items:center;gap:var(--s4);appearance:none;
  cursor:pointer;text-decoration:none;border:0;
  padding:var(--s4) var(--s5);min-height:var(--tap-min);
  background:var(--dc,var(--primary));color:var(--black);border-radius:var(--radius-slab);
  font:900 clamp(16px,1.6vw,21px)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.02em;
  transition:transform var(--dur-state) var(--ease-out)}
.c-btn2 svg{width:30px;height:18px;flex:none}
.c-btn2 svg path{fill:none;stroke:currentColor;stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round}
.c-btn2:hover,.c-btn2.is-hover{transform:translateX(var(--s2))}
.c-btn2:active,.c-btn2.is-active{transform:translateX(var(--s2)) scale(1,.95)}
.c-btn2.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-btn2.is-disabled,.c-btn2[disabled]{cursor:not-allowed;transform:none;
  background:var(--hairline);color:var(--cream)}
.c-sold.is-sold .c-btn2{--dc:var(--care)}
.c-field{display:flex;flex-direction:column;gap:var(--s2);min-width:0;width:100%;
  max-width:420px}
.c-field__l{font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.c-field__i{appearance:none;width:100%;min-height:var(--tap-min);
  padding:var(--s3) var(--s4);background:var(--cream);color:var(--black);
  border:0;box-shadow:inset 0 0 0 var(--rule-heavy) var(--black);
  border-radius:var(--radius-slab);
  font:400 var(--size-body)/1.4 var(--font);
  transition:box-shadow var(--dur-state) var(--ease-out)}
.c-field__i::placeholder{color:var(--black);opacity:.4}
.c-field__i:hover,.c-field__i.is-hover{box-shadow:inset 0 0 0 var(--rule-heavy) var(--black),
  inset 0 calc(var(--s1) * -1) 0 var(--primary)}
.c-field__i:focus-visible,.c-field__i.is-focus{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}
.c-field__i[disabled],.c-field__i.is-disabled{cursor:not-allowed;color:var(--hairline);
  box-shadow:inset 0 0 0 var(--rule-heavy) var(--hairline)}
textarea.c-field__i{min-height:128px;resize:vertical}
.c-field__sel{position:relative;display:block}
.c-field__sel select{appearance:none;padding-right:var(--s8)}
.c-field__sel svg{position:absolute;right:var(--s4);top:50%;width:22px;height:14px;
  transform:translateY(-50%);pointer-events:none}
.c-field__sel svg path{fill:currentColor;stroke:none}
.c-field__h{font:400 var(--size-small)/1.4 var(--font);opacity:.7}
.c-field__m{display:flex;align-items:center;gap:var(--s2);
  font:700 var(--size-small)/1.3 var(--font)}
.c-field--error .c-field__i{box-shadow:inset 0 0 0 var(--rule-heavy) var(--black),
  inset 0 0 0 7px var(--coral)}
.c-field--success .c-field__i{box-shadow:inset 0 0 0 var(--rule-heavy) var(--black),
  inset 0 0 0 7px var(--care)}
.c-field__m i{display:block;width:12px;height:12px;flex:none;background:var(--coral)}
.c-field:not(.c-field--error):not(.c-field--success) .c-field__m i{visibility:hidden}
.c-field--success .c-field__m i{background:var(--care)}
.c-search{display:flex;align-items:stretch;max-width:480px;width:100%}
.c-search .c-field__i{box-shadow:inset 0 0 0 var(--rule-heavy) var(--black)}
.c-search__go{appearance:none;cursor:pointer;border:0;flex:none;
  padding:0 var(--s5);min-height:var(--tap-min);
  background:var(--black);color:var(--cream);border-radius:var(--radius-slab);
  font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.c-search__go:hover{background:var(--primary);color:var(--black)}

/* ===== C-lang , 04 design-system/components/controls/C-lang.html ===== */
.c-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.c-cap{display:block;margin-top:var(--s2);max-width:24ch;
  font:700 var(--size-micro)/1.4 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;opacity:.65}

/* ===== C-river-button , 04 design-system/components/controls/C-river-button.html ===== */
.c-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.c-cap{display:block;margin-top:var(--s2);max-width:24ch;
  font:700 var(--size-micro)/1.4 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;opacity:.65}
.c-river-btn{position:relative;appearance:none;border:0;cursor:pointer;padding:0;
  background:none;isolation:isolate;display:block;text-decoration:none;color:inherit}
.c-river-btn__face{position:relative;display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5) clamp(var(--s5),2.4vw,var(--s6));
  background:var(--black);color:var(--ink-invert);
  border-radius:var(--radius-slab);overflow:hidden;min-height:var(--tap-min);
  transition:transform var(--dur-state) var(--ease-out)}
.c-river-btn__face > u-svg{width:clamp(26px,2.4vw,36px);flex:none;
  position:relative;z-index:var(--z-body)}
.c-river-btn__t{position:relative;z-index:var(--z-body);padding:var(--s1) var(--s3);
  background:var(--cream);color:var(--black);
  font:900 clamp(20px,2vw,30px)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.c-river-btn__inside{position:absolute;inset:0;z-index:var(--z-river);
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--dur-flood) var(--ease-verb-flood)}
.c-river-btn:hover .c-river-btn__inside,
.c-river-btn:focus-visible .c-river-btn__inside,
.c-river-btn.is-hover .c-river-btn__inside,
.c-river-btn.is-focus .c-river-btn__inside{clip-path:inset(0 0 0 0)}
.c-river-btn:active .c-river-btn__face,
.c-river-btn.is-active .c-river-btn__face{transform:translateY(3px)}
.c-river-btn.is-focus .c-river-btn__face{outline:var(--focus-width) solid var(--focus-colour-on-dark);
  outline-offset:calc(var(--focus-offset) * -1)}
.c-river-btn:focus-visible .c-river-btn__face{outline-offset:calc(var(--focus-offset) * -1)}
.c-river-btn.is-disabled,.c-river-btn[disabled]{pointer-events:none;cursor:not-allowed}
.c-river-btn.is-disabled .c-river-btn__inside,
.c-river-btn[disabled] .c-river-btn__inside{display:none}
.c-river-btn.is-disabled .c-river-btn__t,
.c-river-btn[disabled] .c-river-btn__t{background:var(--hairline);color:var(--cream)}
.c-river-btn.is-disabled .c-river-btn__face > u-svg,
.c-river-btn[disabled] .c-river-btn__face > u-svg{opacity:.35}
.c-river-btn--ghost .c-river-btn__face{background:none;color:var(--ink);
  box-shadow:inset 0 0 0 var(--rule-heavy) var(--black)}
.c-river-btn--ghost .c-river-btn__inside{clip-path:inset(0 0 0 0)}
.c-river-btn--ghost:hover .c-river-btn__inside,
.c-river-btn--ghost:focus-visible .c-river-btn__inside,
.c-river-btn--ghost.is-hover .c-river-btn__inside{clip-path:inset(0 0 100% 0)}
.c-river-btn--ghost.is-focus .c-river-btn__face{outline-color:var(--focus-colour)}

/* ===== C-tear , 04 design-system/components/controls/C-tear.html ===== */
.c-replay{appearance:none;cursor:pointer;background:none;color:inherit;
  border:var(--rule) solid currentColor;padding:var(--s2) var(--s4);min-height:var(--tap-min);
  font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;border-radius:var(--radius-slab)}
.c-replay:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.c-tear{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;
  max-width:560px}
.c-tear__done{display:none;font:700 var(--size-small)/1.4 var(--font)}
.c-tear.is-done .c-tear__done{display:block}
.c-tear.is-done .c-tear__hint{display:none}
.c-tear__hint{font:700 var(--size-micro)/1.4 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}

/* ===== C-toast , 04 design-system/components/controls/C-toast.html ===== */
.c-col{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;min-width:0}
.c-cap{display:block;margin-top:var(--s2);max-width:24ch;
  font:700 var(--size-micro)/1.4 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;opacity:.65}
.c-replay{appearance:none;cursor:pointer;background:none;color:inherit;
  border:var(--rule) solid currentColor;padding:var(--s2) var(--s4);min-height:var(--tap-min);
  font:700 var(--size-micro)/1 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;border-radius:var(--radius-slab)}
.c-replay:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.c-view{position:relative;overflow:hidden;background:var(--cream);color:var(--black);
  border:var(--rule-heavy) solid var(--black);border-radius:var(--radius-slab);
  height:340px;width:100%;max-width:760px;contain:layout paint}
.c-view__inner{padding:var(--s5);height:100%;overflow:hidden}
.c-view__foot{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-chrome);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s2) var(--s4);background:var(--black);color:var(--cream)}
.c-view__foot .t-micro{opacity:.7}
.c-toast-dock{position:absolute;left:14px;right:14px;bottom:16px;
  z-index:var(--z-overlay);display:flex;flex-direction:column;gap:var(--s2);
  pointer-events:none;align-items:stretch}
.c-toast-dock > *{pointer-events:auto}

/* ===== D-mascot , 04 design-system/components/devices/D-mascot.html ===== */
.dv-replay{appearance:none;cursor:pointer;border:var(--rule) solid var(--black);
  background:var(--cream);color:var(--black);padding:8px 12px;min-height:38px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.dv-replay:hover{background:var(--yellow)}

/* ===== D-print-poster , 04 design-system/components/formats/D-print-poster.html ===== */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
  aspect-ratio:var(--aw) / var(--ah);
  container-type:inline-size;
  /* the frame is the only thing that clips: an artboard bleeds nothing. */
  overflow:hidden;
  box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
  width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform-origin:0 0;
  /* --fit is set per frame by js/formats.js from the frame's measured width.
     A CSS-only fallback of 1 keeps the board readable if the script never runs. */
  transform:scale(var(--fit,1));
  background:var(--ground);color:var(--ink);
  overflow:hidden;
  font-family:var(--font)}
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-item--tall{flex:1 1 300px;max-width:360px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
.ab-pad{position:absolute;inset:var(--pad,56px)}
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-row{display:flex;align-items:center;gap:var(--gap,16px)}
.ab-row--sb{justify-content:space-between;width:100%}
.ab-push{margin-top:auto}
.ab-ground{position:absolute;inset:0}
.ab-ground--cream{background:var(--cream)}
.ab-ground--black{background:var(--black)}
.ab-slab{background:var(--black);color:var(--cream);padding:var(--s5) var(--s6);
  border-radius:var(--radius-slab)}
.ab-corner{line-height:1.45;letter-spacing:var(--track-micro)}
.ab-corner--r{text-align:right}
.ab-rule{height:var(--rule);background:currentColor;width:100%;flex:none;opacity:.9}

/* ===== D-ribbon , 04 design-system/components/devices/D-ribbon.html ===== */
.dv-replay{appearance:none;cursor:pointer;border:var(--rule) solid var(--black);
  background:var(--cream);color:var(--black);padding:8px 12px;min-height:38px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.dv-replay:hover{background:var(--yellow)}
.dv-riverbtn{position:relative;display:inline-flex;align-items:center;gap:var(--s4);
  overflow:hidden;appearance:none;border:0;cursor:pointer;
  padding:var(--s5) var(--s6);background:var(--black);color:var(--cream);
  font:900 clamp(18px,2vw,26px)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;min-height:var(--tap-min)}
.dv-riverbtn span{position:relative;z-index:var(--z-body);padding:4px 12px;
  background:var(--cream);color:var(--black)}
.dv-riverbtn .rv{z-index:var(--z-river)}
.dv-bars{display:flex;flex-direction:column;gap:var(--s3);max-width:420px}

/* ===== D-signage , 04 design-system/components/formats/D-signage.html ===== */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
  aspect-ratio:var(--aw) / var(--ah);
  container-type:inline-size;
  /* the frame is the only thing that clips: an artboard bleeds nothing. */
  overflow:hidden;
  box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
  width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform-origin:0 0;
  /* --fit is set per frame by js/formats.js from the frame's measured width.
     A CSS-only fallback of 1 keeps the board readable if the script never runs. */
  transform:scale(var(--fit,1));
  background:var(--ground);color:var(--ink);
  overflow:hidden;
  font-family:var(--font)}
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
.ab-pad{position:absolute;inset:var(--pad,56px)}
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-push{margin-top:auto}
.ab-ground{position:absolute;inset:0}
.ab-ground--cream{background:var(--cream)}
.ab-slab{background:var(--black);color:var(--cream);padding:var(--s5) var(--s6);
  border-radius:var(--radius-slab)}
.ab-slab--tight{padding:var(--s4) var(--s5)}
.ab-bar{display:flex;align-items:center;gap:var(--s3);
  background:var(--dc,var(--primary));color:var(--black);
  padding:var(--s2) var(--s4);border-radius:var(--radius-slab)}
.ab-flag{position:relative;display:flex;flex-direction:column}
.ab-flag__pole{position:absolute;top:0;bottom:0;left:0;width:var(--rule-heavy);
  background:var(--black)}
.ab-flag__cloth{margin-left:var(--s3);flex:1 1 auto;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:var(--s4);padding:var(--s5) var(--s4)}
.ab-totem-fill{display:flex;flex-direction:column}
.ab-totem-fill > .d-totem__bar{flex:1 1 0;min-height:0}

/* ===== D-slab , 04 design-system/components/devices/D-slab.html ===== */
.dv-anatomy{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start}
.dv-anatomy__live{min-width:0}
.dv-parts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.dv-parts li{display:grid;grid-template-columns:26px 1fr;gap:var(--s3);align-items:baseline;
  font-size:var(--size-small);line-height:1.45}
.dv-parts b{display:grid;place-items:center;width:26px;height:26px;background:var(--black);
  color:var(--cream);font:900 12px/1 var(--font);font-stretch:var(--wdth-condensed)}
.dv-parts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--yellow);padding:1px 4px}
.dv-verb{display:inline-flex;align-items:center;gap:var(--s3);margin:0;
  padding:var(--s2) var(--s3);background:var(--black);color:var(--cream);
  font:700 var(--size-micro)/1.35 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.dv-verb b{font-stretch:var(--wdth-condensed);font-weight:900;font-size:14px;letter-spacing:.02em}
.dv-replay{appearance:none;cursor:pointer;border:var(--rule) solid var(--black);
  background:var(--cream);color:var(--black);padding:8px 12px;min-height:38px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.dv-replay:hover{background:var(--yellow)}
.dv-frame{position:relative;height:250px;overflow:hidden;background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--hairline);padding:var(--s5)}
.dv-frame__toasts{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);
  z-index:var(--z-overlay);display:flex;flex-direction:column;gap:var(--s3)}

/* ===== D-social-announce , 04 design-system/components/formats/D-social-announce.html ===== */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
  aspect-ratio:var(--aw) / var(--ah);
  container-type:inline-size;
  /* the frame is the only thing that clips: an artboard bleeds nothing. */
  overflow:hidden;
  box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
  width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform-origin:0 0;
  /* --fit is set per frame by js/formats.js from the frame's measured width.
     A CSS-only fallback of 1 keeps the board readable if the script never runs. */
  transform:scale(var(--fit,1));
  background:var(--ground);color:var(--ink);
  overflow:hidden;
  font-family:var(--font)}
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-item--sq{flex:1 1 320px;max-width:420px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
.ab-pad{position:absolute;inset:var(--pad,56px)}
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-row{display:flex;align-items:center;gap:var(--gap,16px)}
.ab-row--sb{justify-content:space-between;width:100%}
.ab-push{margin-top:auto}
.ab-ground{position:absolute;inset:0}
.ab-ground--coral{background:var(--coral)}
.ab-ground--cream{background:var(--cream)}
.ab-corner{line-height:1.45;letter-spacing:var(--track-micro)}
.ab-corner--r{text-align:right}
.ab-rule{height:var(--rule);background:currentColor;width:100%;flex:none;opacity:.9}

/* ===== D-social-story , 04 design-system/components/formats/D-social-story.html ===== */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
  aspect-ratio:var(--aw) / var(--ah);
  container-type:inline-size;
  /* the frame is the only thing that clips: an artboard bleeds nothing. */
  overflow:hidden;
  box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
  width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform-origin:0 0;
  /* --fit is set per frame by js/formats.js from the frame's measured width.
     A CSS-only fallback of 1 keeps the board readable if the script never runs. */
  transform:scale(var(--fit,1));
  background:var(--ground);color:var(--ink);
  overflow:hidden;
  font-family:var(--font)}
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-item--tall{flex:1 1 300px;max-width:360px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
.ab{position:absolute}
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-push{margin-top:auto}
.ab-ground{position:absolute;inset:0}
.ab-ground--yellow{background:var(--yellow)}
.ab-ground--black{background:var(--black)}
.ab-safe{position:absolute;pointer-events:none;
  outline:2px dashed var(--pink);outline-offset:0}
.ab-safe__tag{position:absolute;top:0;left:0;transform:translateY(-100%);
  background:var(--pink);color:var(--black);padding:3px 6px;
  font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}

/* ===== D-sticker , 04 design-system/components/devices/D-sticker.html ===== */
/* no component-specific CSS: it is built from the shared devices alone */

/* ===== D-stub , 04 design-system/components/devices/D-stub.html ===== */
.dv-anatomy{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start}
.dv-anatomy__live{min-width:0}
.dv-parts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.dv-parts li{display:grid;grid-template-columns:26px 1fr;gap:var(--s3);align-items:baseline;
  font-size:var(--size-small);line-height:1.45}
.dv-parts b{display:grid;place-items:center;width:26px;height:26px;background:var(--black);
  color:var(--cream);font:900 12px/1 var(--font);font-stretch:var(--wdth-condensed)}
.dv-parts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--yellow);padding:1px 4px}
.dv-verb{display:inline-flex;align-items:center;gap:var(--s3);margin:0;
  padding:var(--s2) var(--s3);background:var(--black);color:var(--cream);
  font:700 var(--size-micro)/1.35 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.dv-verb b{font-stretch:var(--wdth-condensed);font-weight:900;font-size:14px;letter-spacing:.02em}
.dv-step{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center}
.dv-step__ctl{display:flex;align-items:stretch;background:var(--black)}
.dv-step__ctl button{appearance:none;border:0;cursor:pointer;background:var(--black);
  color:var(--cream);width:64px;min-height:var(--tap-min);
  font:900 34px/1 var(--font);font-stretch:var(--wdth-condensed);
  transition:background var(--dur-state) var(--ease-out)}
.dv-step__ctl button:hover{background:var(--pink);color:var(--black)}
.dv-step__ctl output{display:flex;align-items:center;justify-content:center;min-width:86px;
  background:var(--cream);color:var(--black);
  font:900 40px/1 var(--font);font-stretch:var(--wdth-condensed)}
.dv-step__stubs{display:flex;gap:7px;min-height:96px;align-items:flex-end;flex-wrap:wrap}

/* ===== D-totem , 04 design-system/components/devices/D-totem.html ===== */
.dv-anatomy{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start}
.dv-anatomy__live{min-width:0}
.dv-parts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.dv-parts li{display:grid;grid-template-columns:26px 1fr;gap:var(--s3);align-items:baseline;
  font-size:var(--size-small);line-height:1.45}
.dv-parts b{display:grid;place-items:center;width:26px;height:26px;background:var(--black);
  color:var(--cream);font:900 12px/1 var(--font);font-stretch:var(--wdth-condensed)}
.dv-parts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--yellow);padding:1px 4px}
.dv-verb{display:inline-flex;align-items:center;gap:var(--s3);margin:0;
  padding:var(--s2) var(--s3);background:var(--black);color:var(--cream);
  font:700 var(--size-micro)/1.35 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase}
.dv-verb b{font-stretch:var(--wdth-condensed);font-weight:900;font-size:14px;letter-spacing:.02em}
.dv-replay{appearance:none;cursor:pointer;border:var(--rule) solid var(--black);
  background:var(--cream);color:var(--black);padding:8px 12px;min-height:38px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.dv-replay:hover{background:var(--yellow)}
.dv-vp{position:relative;height:460px;max-width:320px;overflow:hidden;
  border:var(--rule-heavy) solid var(--black);background:var(--black)}
.dv-vp .d-totem{border:0;height:100%}
.dv-vp .d-totem__bar{flex:1 1 0}

/* ===== D-wave , 04 design-system/components/devices/D-wave.html ===== */
.dv-wave-uses{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.dv-wave-uses > div{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
  min-width:0}
.dv-pinline{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:6px solid var(--stage)}

/* ===== D-wearables , 04 design-system/components/formats/D-wearables.html ===== */
.artboard-frame{position:relative;width:100%;max-width:calc(var(--aw) * 1px);
  aspect-ratio:var(--aw) / var(--ah);
  container-type:inline-size;
  /* the frame is the only thing that clips: an artboard bleeds nothing. */
  overflow:hidden;
  box-shadow:0 0 0 var(--rule) var(--hairline)}
.artboard{position:absolute;top:0;left:0;
  width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform-origin:0 0;
  /* --fit is set per frame by js/formats.js from the frame's measured width.
     A CSS-only fallback of 1 keeps the board readable if the script never runs. */
  transform:scale(var(--fit,1));
  background:var(--ground);color:var(--ink);
  overflow:hidden;
  font-family:var(--font)}
.fmt-set{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.fmt-item{flex:1 1 380px;min-width:0;max-width:640px}
.fmt-item--wide{flex-basis:100%;max-width:1080px}
.fmt-item--tall{flex:1 1 300px;max-width:360px}
.fmt-cap{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.5 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.65}
.fmt-cap b{font-weight:900;opacity:1;letter-spacing:.06em}
.ab{position:absolute}
.ab-pad{position:absolute;inset:var(--pad,56px)}
.ab-stack{display:flex;flex-direction:column;gap:var(--gap,16px);align-items:flex-start}
.ab-ground{position:absolute;inset:0}
.ab-ground--cream{background:var(--cream)}
.ab-slab{background:var(--black);color:var(--cream);padding:var(--s5) var(--s6);
  border-radius:var(--radius-slab)}
.ab-slab--tight{padding:var(--s4) var(--s5)}
.ab-bar{display:flex;align-items:center;gap:var(--s3);
  background:var(--dc,var(--primary));color:var(--black);
  padding:var(--s2) var(--s4);border-radius:var(--radius-slab)}
.ab-bar--main{--dc:var(--stage-main)}
.ab-bar--grove{--dc:var(--stage-grove)}
.ab-bar--corner{--dc:var(--stage-corner)}
.ab-tape{position:relative;overflow:hidden;background:var(--black)}
.ab-tape__print{position:relative;z-index:var(--z-body);display:flex;align-items:center;
  gap:var(--s6);height:100%;padding:0 var(--s5)}

/* ===== F-apps , 04 design-system/components/index/F-apps.html ===== */
.f-gallery{column-count:4;column-gap:var(--s4)}
.f-gallery figure{break-inside:avoid;margin:0 0 var(--s4);position:relative}
.f-gallery img{width:100%;height:auto;display:block}
.f-gallery figcaption{position:absolute;left:0;bottom:0;margin:0;padding:4px 7px;
  font:700 9px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  background:var(--black);color:var(--cream)}

/* ===== F-colour , 04 design-system/components/index/F-colour.html ===== */
.f-swatches{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:var(--rule) solid var(--black)}
.f-swatch{padding:var(--s6) var(--s4) var(--s4);min-height:190px;display:flex;
  flex-direction:column;justify-content:flex-end;gap:var(--s1);
  border-right:var(--rule) solid var(--black)}
.f-swatch:last-child{border-right:0}
.f-swatch b{font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-swatch code{font:700 11px/1.4 var(--font);letter-spacing:.1em}
.f-swatch span{font-size:13px;line-height:1.4;opacity:.8}
.f-stages{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f-stage{background:var(--stage);color:var(--black);padding:var(--s5);
  border:var(--rule) solid var(--black)}
.f-stage b{display:block;font:900 clamp(20px,2.4vw,30px)/.95 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase}
.f-stage span{display:block;margin-top:var(--s2);font-size:13px}
.f-matrix{overflow-x:auto}
.f-matrix td:first-child{white-space:nowrap}

/* ===== F-idea , 04 design-system/components/index/F-idea.html ===== */
.f-idea{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start}
.f-idea__n{display:block;margin:0 0 var(--s3);opacity:.5}
.f-idea p{margin:0;font-size:var(--size-small);line-height:1.55;max-width:44ch}
.f-idea__show{margin:0 0 var(--s4);min-height:84px;display:flex;align-items:center}
.f-idea__show u-svg{width:min(240px,100%)}
.f-idea__show .d-wave{height:62px}

/* ===== F-logos , 04 design-system/components/index/F-logos.html ===== */
.f-logos{display:grid;gap:var(--s5);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f-logo-item{display:flex;flex-direction:column;gap:var(--s3)}
.f-logo{padding:var(--s5);display:flex;align-items:center;justify-content:center;
  height:250px;box-shadow:inset 0 0 0 1px var(--hairline)}
.f-logo u-svg,.f-logo img{width:min(190px,100%);height:auto;
  max-height:100%;object-fit:contain}
.f-logo u-svg svg{max-height:200px;width:auto;margin:0 auto}
.f-logo--black{background:var(--black)}
.f-logo--pink{background:var(--pink)}
.f-logo--coral{background:var(--coral)}
.f-logo--cream{background:var(--cream)}
.f-logo-item > .t-micro{display:block;margin:var(--s3) 0 0;opacity:.6;max-width:30ch}
.f-clear{position:relative;display:inline-block;padding:var(--s7)}
.f-clear::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 6px,var(--hairline) 6px 7px)}
.f-clear u-svg{position:relative;width:min(280px,60vw);
  box-shadow:0 0 0 var(--s7) var(--cream)}
.f-min{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-end}
.f-min__item{display:flex;flex-direction:column;gap:var(--s2)}
.f-min__item u-svg{display:block}
.f-min__item img{display:block;height:auto}

/* ===== F-mascot , 04 design-system/components/index/F-mascot.html ===== */
/* no component-specific CSS: it is built from the shared devices alone */

/* ===== F-motion , 04 design-system/components/index/F-motion.html ===== */
.f-verbs{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.f-verb{border:var(--rule) solid var(--black);background:var(--cream);display:flex;
  flex-direction:column;min-width:0}
.f-verb__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:var(--rule) solid var(--black);background:var(--black);
  color:var(--cream)}
.f-verb__head b{font:900 17px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-verb__play{appearance:none;border:var(--rule) solid var(--cream);background:none;
  color:var(--cream);cursor:pointer;padding:6px 10px;min-height:32px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.f-verb__play:hover{background:var(--cream);color:var(--black)}
.f-verb__play:focus-visible{outline-color:var(--focus-colour-on-dark)}
.f-verb__stage{flex:1 1 auto;min-height:140px;display:flex;align-items:center;
  justify-content:center;padding:var(--s5);overflow:hidden}
.f-verb__note{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);
  font-size:12.5px;line-height:1.45}
.f-verb__note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--yellow);padding:1px 4px}
.f-flood{position:relative;display:inline-flex;align-items:stretch;overflow:hidden;
  background:var(--black);color:var(--cream)}
.f-flood__fill{position:absolute;inset:0;background:var(--pink);z-index:var(--z-river);
  clip-path:inset(0 100% 0 0)}
.f-flood .d-label{position:relative;z-index:var(--z-body)}
.f-flood__t{position:relative;z-index:var(--z-body);padding:var(--s4) var(--s5);
  font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase;
  white-space:nowrap;transition:color var(--dur-flood) var(--ease-verb-flood)}
.f-flood.is-flooded .f-flood__t{color:var(--black)}
.f-verb__note code{white-space:nowrap}
.f-obj{background:var(--pink);color:var(--black);padding:var(--s4) var(--s5);
  font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase;
  display:inline-block}
.f-obj--slab{background:var(--black);color:var(--cream)}
.f-obj--draw{width:100%;max-width:220px}
.f-obj--draw path{fill:none;stroke:var(--black);stroke-width:11;stroke-linecap:round}

/* ===== F-space , 04 design-system/components/index/F-space.html ===== */
.f-space{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-end}
.f-space__bar{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.f-space__bar i{display:block;height:28px;background:var(--black)}
.f-shape{display:flex;flex-wrap:wrap;gap:var(--s5)}
.f-shape__item{width:150px}
.f-shape__item i{display:block;height:96px;background:var(--pink);
  box-shadow:inset 0 0 0 var(--rule) var(--black)}
.f-shape__item:nth-child(2) i{border-radius:var(--radius-card);background:var(--coral)}
.f-shape__item:nth-child(3) i{border-radius:var(--radius-round);background:var(--yellow)}
.f-shape__item span{display:block;margin-top:var(--s2)}
.f-rules{display:flex;flex-direction:column;gap:var(--s4);max-width:560px}
.f-rules div{display:flex;align-items:center;gap:var(--s4)}
.f-rules i{flex:1 1 auto;background:var(--black)}

/* ===== F-type , 04 design-system/components/index/F-type.html ===== */
.f-spec{display:grid;gap:var(--s4) var(--s5);grid-template-columns:minmax(0,1fr) 210px;
  align-items:start;padding:var(--s5) 0;border-top:1px solid var(--hairline)}
.f-spec:first-child{border-top:0}
.f-spec__live{min-width:0;overflow-x:clip;overflow-y:visible;padding-top:28px}
.f-spec__meta{font-size:13px;line-height:1.5}
.f-spec__meta b{display:block;font:700 var(--size-micro)/1.35 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.6;margin-bottom:var(--s1)}
.f-spec__meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.f-ratio{display:flex;gap:var(--s6);align-items:flex-end;flex-wrap:wrap}
.f-ratio__big{line-height:.82;flex:0 1 auto}
.f-ratio__small{max-width:30ch;flex:0 1 30ch;padding-bottom:.5em}

/* ===== F-wave , 04 design-system/components/index/F-wave.html ===== */
.f-wave-scale{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-end}
.f-wave-scale figure{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.f-wave-scale u-svg{display:block}
.f-wave-scale figcaption{opacity:.65}
.f-wave-scale .is-bad{position:relative}
.f-wave-scale .is-bad::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;
  height:2px;background:var(--black)}

/* ===== F-wave-motion , 04 design-system/components/index/F-wave-motion.html ===== */
.f-wave-modes{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.f-wm{margin:0;border:var(--rule) solid var(--black);display:flex;flex-direction:column;
  min-width:0}
.f-wm figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--black);color:var(--cream);
  border-bottom:var(--rule) solid var(--black)}
.f-wm figcaption b{font:900 17px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-wm__play{appearance:none;border:var(--rule) solid var(--cream);background:none;
  color:var(--cream);cursor:pointer;padding:6px 10px;min-height:32px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.f-wm__play:hover{background:var(--cream);color:var(--black)}
.f-wm__play:focus-visible{outline-color:var(--focus-colour-on-dark)}
.f-wm__stage{flex:1 1 auto;min-height:150px;display:flex;align-items:center;
  justify-content:center;padding:var(--s5);background:var(--cream)}
.f-wm__stage u-svg{width:110px}
.f-wm__stage--pink{background:var(--pink)}
.f-wm__stage--coral{background:var(--coral)}
.f-wm__stage--yellow{background:var(--yellow)}
.f-wm__stage--black{background:var(--black)}
.f-wm p{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);
  font-size:12.5px;line-height:1.45}
.f-wm p code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--yellow);padding:1px 4px}