/* ==========================================================================
   Pikett · division demo "div-brand" (divisions/brand.html hero stage)
   An identity playground for "morrow", a sample brand made for this demo.
   1. Shell + layout (container queries on the stage)
   2. Artboards + the shared lockup, guides
   3. 01 Lockup   4. 02 Poster   5. 03 Web   6. 04 Card   7. 05 Icon
   8. Inspector: sliders, swatches, ground switch, reset, tokens
   9. States: intro, pulling, rules flash, paused, reduced motion
   Colours are set live by js/scenes/div-brand.js as custom properties on .bp:
   --b brand · --g ground · --i ink on ground · --s desk surface · --m mark on ground
   --bm type on brand · --mn mark on night · --dk 0..1 (how dark the ground is)
   Sizes of every logo instance are set inline by the script (rules, not CSS).
   ========================================================================== */

/* 1. Shell + layout ------------------------------------------------------- */
.dhero__stage > .scene[data-scene="div-brand"] { container: bpstage / size; }

.bp {
  --b: #2B33FF; --g: #F2EFE8; --i: #141418; --s: #E2DED3; --m: #2B33FF; --bm: #F2EFE8; --mn: #F2EFE8; --dk: 0;
  --guide: #8C6CFF;                                /* tool annotations: Pikett Brand ultraviolet */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --hint: var(--bp-hint, 46px);                    /* height of the page's demo hint, measured by the script */
  --gap: 6px;
  position: absolute; inset: 0; z-index: 1;
  display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "board" "panel";
  padding: 12px 12px calc(var(--hint) + 8px);
  font-family: var(--sans); color: var(--fg); text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.bp *, .bp *::before, .bp *::after { box-sizing: border-box; }
.bp p { margin: 0; }


.bp__board {
  grid-area: board; min-width: 0; min-height: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, .62fr) minmax(0, 1fr);
  grid-template-areas: "lk" "ft";
}
.bp__master { grid-area: lk; }
/* phones: one artboard at a time, full width and big enough to read; the tabs (or a swipe) switch it */
.bp__ft { grid-area: ft; --bp-top: 42px; }
@container bpstage (max-width: 679.98px) {
  .bp__ft { transition: opacity .42s var(--ease), transform .8s var(--ease), visibility 0s .8s; }
  .bp__ft:not(.is-feat) { opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(calc(var(--bp-dir, 1) * -18px), 0, 0) scale(.985); }
  .bp__ft.is-feat { transition: opacity .5s var(--ease) .06s, transform .8s var(--ease), visibility 0s 0s; }
  .bp__ft.is-feat:not(.was-feat) { animation: bp-feat-in .8s var(--ease) both; }
  .bp.is-pre .bp__ft.is-feat, .bp.is-reduced .bp__ft.is-feat { animation: none; }
  /* the tabs name the artboard: its own label steps aside, the "min size" badge moves to the foot */
  .bp__ft .bp__tl { top: auto; left: auto; right: 10px; bottom: 9px; }
  .bp__ft .bp__tl > b, .bp__ft .bp__tl > span { display: none; }
  .bp__ft { touch-action: pan-y; }
}
@keyframes bp-feat-in { from { transform: translate3d(calc(var(--bp-dir, 1) * 22px), 0, 0) scale(.985); } }

.bp__tabs {
  grid-area: ft; align-self: start; justify-self: start; z-index: 6; position: relative;
  display: inline-grid; grid-auto-flow: column; gap: 0; height: 30px; padding: 3px; margin: 7px 0 0 7px; border-radius: 999px;
  background: rgba(16, 16, 20, .74);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, .12), 0 8px 20px -10px rgba(0, 0, 0, .7);
}
.bp__tabs-th { position: absolute; left: 0; top: 3px; bottom: 3px; width: 25%; border-radius: 999px; background: #F3F2EE; will-change: transform, width; }
.bp__tabs button {
  position: relative; z-index: 1; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; font-stretch: 108%; letter-spacing: -.005em; color: rgba(243, 242, 238, .78); white-space: nowrap;
  transition: color .35s var(--ease);
}
.bp__tabs button.is-on { color: #0A0A0C; }
.bp__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* side inspector once the stage is wide enough */
@container bpstage (min-width: 680px) {
  .bp {
    --gap: 8px;
    grid-template-columns: minmax(0, 1fr) clamp(204px, 28cqw, 262px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "board panel";
    gap: 12px;
    padding: 16px;
  }
  .bp__board {
    margin-bottom: max(0px, calc(var(--hint) - 4px));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: minmax(0, .82fr) minmax(0, 1fr) minmax(0, .8fr);
    grid-template-areas:
      "lk lk lk lk lk lk"
      "ps ps wb wb wb wb"
      "cd cd cd ic ic ic";
  }
  .bp__ft { --bp-top: 27px; }
  .bp__poster { grid-area: ps; }
  .bp__web { grid-area: wb; }
  .bp__card { grid-area: cd; }
  .bp__icon { grid-area: ic; }
  .bp__tabs { display: none; }
}

/* 2. Artboards + shared lockup -------------------------------------------- */
.bp__tile {
  position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  border-radius: 12px; background: var(--g); color: var(--i);
  box-shadow:
    0 0 0 1px rgba(243, 242, 238, calc(.05 + .09 * var(--dk))),
    0 1px 0 0 rgba(255, 255, 255, calc(.16 * (1 - var(--dk)))) inset,
    0 26px 50px -30px rgba(0, 0, 0, .95);
  container-type: size;
}
.bp__tl {
  position: absolute; left: 10px; top: 9px; z-index: 4;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent); white-space: nowrap; pointer-events: none;
}
.bp__tl b { font-weight: 400; }
.bp__min {
  display: inline-flex; align-items: center; height: 16px; padding: 0 7px; border-radius: 99px;
  font-style: normal; font-size: 9px; letter-spacing: .05em; background: #FF5A1F; color: #0A0A0C;
  opacity: 0; transform: translateY(-4px) scale(.85); transform-origin: 0 50%;
  transition: opacity .3s var(--ease), transform .55s var(--spring);
}
.is-min .bp__min { opacity: 1; transform: none; }

.bp-lk { display: block; flex: none; max-width: none; overflow: visible; }
.bp-lk__mk { color: var(--m); }
.bp-lk__arch { fill: none; stroke: currentColor; stroke-linejoin: round; }
.bp-lk__moon { fill: currentColor; }
.bp-lk__word { fill: var(--i); font-family: var(--sans); font-kerning: normal; font-synthesis: none; }
.bp-lk__zone, .bp-lk__ghost { fill: none; stroke: var(--guide); vector-effect: none; transition: opacity .45s var(--ease); }
.bp-lk__zone { opacity: .5; }
.bp-lk__ghost { opacity: .36; }

/* 3. 01 Lockup ------------------------------------------------------------- */
.bp__master { cursor: grab; touch-action: pan-y; }
.bp__master.is-drag { cursor: grabbing; }
.bp__master::after { /* a faint baseline grid: this is the master artboard */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--i) 13%, transparent) 1px, transparent 1.2px);
  background-size: 14px 14px; background-position: 7px 7px;
  -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 85% at 50% 50%, #000 30%, transparent 100%);
}
.bp__cons { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; color: var(--i); }
.bp__cl { stroke: currentColor; stroke-width: 1; opacity: .13; shape-rendering: crispEdges; transition: opacity .45s var(--ease); }
.bp__cl--x { stroke-dasharray: 2 3; opacity: .16; }
/* "Drag the mark": shown until the first touch */
.bp__nudge {
  position: absolute; z-index: 5; top: 7px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0 9px 0 8px; border-radius: 99px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; white-space: nowrap; pointer-events: none;
  color: color-mix(in srgb, var(--guide) 70%, var(--i)); background: color-mix(in srgb, var(--guide) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guide) 45%, transparent);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.bp__nudge svg { width: 18px; height: 9px; flex: none; animation: bp-nudge 2.2s var(--ease-io, ease-in-out) infinite; }
@keyframes bp-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
.bp.is-touched .bp__nudge { opacity: 0; transform: translateX(-50%) translateY(-4px); }
/* phones: no room in the middle, so it stands in for the legend until the first touch */
@container bpstage (max-width: 679.98px) {
  .bp__nudge { left: auto; right: 8px; transform: none; }
  .bp:not(.is-touched) .bp__legend { opacity: 0; }
  .bp__legend { transition: opacity .5s var(--ease) .2s; }
  .bp.is-touched .bp__nudge { transform: translateY(-4px); }
}
.bp__mlk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bp__legend {
  position: absolute; right: 10px; top: 9px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; line-height: 1.2; letter-spacing: .04em; white-space: nowrap;
  color: color-mix(in srgb, var(--i) 58%, transparent); pointer-events: none;
}
.bp__legend i { width: 13px; height: 9px; border: 1px dashed var(--guide); border-radius: 1px; opacity: .9; }
.bp__meta {
  position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 4;
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10px; line-height: 1.2; letter-spacing: .04em; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--i) 58%, transparent); pointer-events: none;
}
.bp__meta span { overflow: hidden; text-overflow: ellipsis; }
.bp__meta [data-o="contrast"] { transition: color .4s var(--ease); }
.is-fallback-ink .bp__meta [data-o="contrast"] { color: #E8501A; }
[data-ground="dark"].is-fallback-ink .bp__meta [data-o="contrast"] { color: #FF8A5C; }

/* 4. 02 Poster ------------------------------------------------------------- */
.bp__poster {
  display: flex; flex-direction: column;
  padding: var(--bp-top) 11px 9px;
  background: var(--b); color: var(--bm);
}
.bp__pst { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bp__poster::before { /* paper tooth */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(transparent 60%, rgba(0, 0, 0, .1));
}
.bp__pst-sym { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bp__poster .bp-lk__mk { color: var(--bm); }
.bp__poster .bp-lk__zone, .bp__poster .bp-lk__ghost { stroke: var(--bm); }
.bp__poster .bp-lk__zone { opacity: .32; }
.bp__poster .bp-lk__ghost { opacity: .22; }
.bp__pst-h {
  flex: none; margin-top: 4px; height: 2.75em; overflow: hidden;
  display: flex; align-items: flex-end;
  font-size: clamp(10px, 11.2cqi, 26px); line-height: .9; letter-spacing: -.025em;
  text-wrap: balance; overflow-wrap: break-word;
}
@container (max-height: 170px) {
  .bp__pst-h { display: none; }
  .bp__pst-f { margin-top: 4px; }
}
.bp__pst-f {
  flex: none; margin-top: 7px; padding-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-top: 1px solid color-mix(in srgb, var(--bm) 38%, transparent);
}
.bp__pst-w { flex: 1 1 auto; min-width: 0; height: clamp(9px, 6.4cqi, 16px); display: flex; align-items: center; }
.bp__poster .bp-lk__word { fill: var(--bm); }
.bp__pst-k { flex: none; font-family: var(--mono); font-size: clamp(7px, 4.4cqi, 10.5px); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .85; }

/* a wide poster (the phone artboard): symbol left, headline and footer right */
@container (min-aspect-ratio: 13 / 10) {
  .bp__pst { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; }
  .bp__pst-sym { grid-row: 1 / 3; grid-column: 1; }
  .bp__pst-h { display: flex; grid-column: 2; align-self: end; height: auto; max-height: 3.3em; margin: 0; font-size: clamp(14px, 6.6cqi, 30px); }
  .bp__pst-f { grid-column: 2; margin-top: 8px; }
}

/* 5. 03 Web ---------------------------------------------------------------- */
.bp__web { background: var(--s); }
.bp__win {
  position: absolute; left: 10px; right: 10px; top: var(--bp-top); bottom: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 8px 8px 0 0; background: var(--g); color: var(--i);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--i) 10%, transparent), 0 18px 30px -18px rgba(0, 0, 0, .55);
}
.bp__bar {
  flex: none; position: relative; height: clamp(16px, 5.6cqi, 22px);
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  background: color-mix(in srgb, var(--i) 7%, var(--g));
  border-bottom: 1px solid color-mix(in srgb, var(--i) 8%, transparent);
}
.bp__bar i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--i) 24%, transparent); }
.bp__url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 1px 9px; border-radius: 4px; background: color-mix(in srgb, var(--i) 7%, transparent);
  font-family: var(--mono); font-size: clamp(7px, 2.5cqi, 10px); line-height: 1.5; letter-spacing: .02em; white-space: nowrap;
  color: color-mix(in srgb, var(--i) 55%, transparent);
}
.bp__hdr {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 0 9px 0 0;
  background: var(--g);
  border-bottom: 1px solid color-mix(in srgb, var(--i) 9%, transparent);
}
.bp__hlk { flex: none; display: flex; }
.bp__web .bp-lk__zone { opacity: 0; }
.bp__web .bp-lk__ghost { opacity: 0; }
.bp__nav {
  flex: 1 1 auto; min-width: 0; height: 1.6em; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 1em;
  font-size: clamp(7.5px, 2.9cqi, 11.5px); line-height: 1.6; font-weight: 550; font-stretch: 105%; white-space: nowrap;
  color: color-mix(in srgb, var(--i) 72%, transparent);
}
.bp__book {
  flex: none; display: inline-flex; align-items: center; height: 2em; padding: 0 .9em; border-radius: 99px;
  background: var(--b); color: var(--bm); font-size: clamp(7.5px, 2.9cqi, 11.5px); font-weight: 650; font-stretch: 110%;
}
.bp__hero { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 9px 9px 9px var(--cs, 10px); }
.bp__hero { --moon: clamp(30px, min(27cqi, 40cqb), 120px); --ring: clamp(4px, 3.2cqi, 13px); }
.bp__hero::before { /* the moon, rising behind the headline */
  content: ""; position: absolute; z-index: 0; right: 9%; top: calc(100% - var(--moon) * .78);
  width: var(--moon); aspect-ratio: 1; border-radius: 50%;
  background: var(--b);
}
.bp__hero::after { /* the arch, framing it */
  content: ""; position: absolute; z-index: 0; right: calc(9% - var(--ring)); top: calc(100% - var(--moon) * .78 - var(--ring));
  width: calc(var(--moon) + 2 * var(--ring)); height: 200%;
  border: clamp(1.2px, .9cqi, 3.5px) solid var(--i); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .85;
}
.bp__hero-h {
  position: relative; z-index: 1; max-width: 6.2ch;
  font-size: clamp(10px, min(8.4cqi, 15cqb), 32px); line-height: .9; letter-spacing: -.03em; color: var(--i);
}
.bp__hero-s { position: relative; z-index: 1; margin-top: 6px; max-width: 17ch; font-size: clamp(8px, 3.2cqi, 12px); line-height: 1.3; color: color-mix(in srgb, var(--i) 62%, transparent); }
@container (max-height: 140px) { .bp__hero-s { display: none; } }

/* 6. 04 Card --------------------------------------------------------------- */
.bp__card {
  background:
    radial-gradient(90% 70% at 70% 100%, rgba(0, 0, 0, calc(.08 + .18 * var(--dk))), transparent 70%),
    var(--s);
}
.bp__cds { position: absolute; left: 10px; right: 10px; top: calc(var(--bp-top) - 2px); bottom: 9px; }
.bp__cd {
  position: absolute; display: flex; overflow: hidden;
  height: min(78%, calc((100cqi - 20px) * .6 / 1.545)); aspect-ratio: 85 / 55;
  border-radius: clamp(2px, 1.6cqi, 5px);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 22px -12px rgba(0, 0, 0, .65);
  container-type: size;   /* the card's type scales with the card */
}
.bp__cd--back {
  z-index: 2; left: 3%; bottom: 4%; transform: rotate(-3.5deg);
  flex-direction: column; justify-content: space-between;
  background: var(--g); color: var(--i);
}
.bp__cd--front {
  z-index: 1; right: 3%; top: 2%; transform: rotate(4deg);
  align-items: center; justify-content: center;
  background: var(--b);
}
.bp__cd--front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .16), transparent 45%); pointer-events: none; }
.bp__clk, .bp__flk { display: flex; }
.bp__cd--front .bp-lk__mk { color: var(--bm); }
.bp__cd--front .bp-lk__word { fill: var(--bm); }
.bp__card .bp-lk__zone { opacity: .0; }
.bp__card .bp-lk__ghost { opacity: 0; }
.bp__cd--front .bp-lk__zone, .bp__cd--front .bp-lk__ghost { stroke: var(--bm); }
.bp__cd-t {
  display: grid; gap: .15em; padding: 0 8% var(--cs, 8px) var(--cs, 8px);
  font-size: clamp(4.5px, 5.6cqi, 11px); line-height: 1.2; white-space: nowrap;
}
.bp__cd-t b { font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; }
.bp__cd-t span { opacity: .7; }
.bp__cd-m { font-family: var(--mono); font-size: .86em; }

/* 7. 05 Icon --------------------------------------------------------------- */
.bp__icon {
  background:
    radial-gradient(110% 90% at 15% 0%, color-mix(in srgb, var(--b) 26%, transparent), transparent 60%),
    radial-gradient(100% 90% at 100% 100%, color-mix(in srgb, var(--b) 14%, transparent), transparent 55%),
    var(--s);
}
.bp__ics {
  position: absolute; left: 10px; right: 10px; top: var(--bp-top); bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 6px; align-items: center; justify-items: center;
}
.bp__ic {
  display: grid; justify-items: center; gap: 5px;
  font-size: clamp(7px, 3.4cqi, 11px); line-height: 1; font-weight: 500; letter-spacing: .01em; color: color-mix(in srgb, var(--i) 72%, transparent);
}
.bp-ic { width: min(24cqi, 40cqb, 76px); height: auto; aspect-ratio: 1; max-width: none; overflow: visible; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .22)); }
.bp-ic__bg { fill: var(--b); }
.bp-ic .bp-lk__mk { color: var(--bm); }
.bp-ic--alt .bp-ic__bg { fill: #111117; stroke: rgba(243, 242, 238, .14); stroke-width: 1; }
.bp-ic--alt .bp-lk__mk { color: var(--mn); }
.bp-ic--ci .bp-ic__bg { fill: var(--i); }
.bp-ic--ci .bp-lk__mk { color: var(--g); }
.bp__tab {
  grid-column: 1 / -1; justify-self: stretch; align-self: end;
  display: flex; align-items: center; gap: 6px; height: clamp(21px, 8cqi, 28px); padding: 0 9px 0 8px; margin-top: 6px;
  border-radius: 7px 7px 0 0; background: var(--g); color: var(--i);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--i) 9%, transparent);
  font-size: clamp(7.5px, 3.4cqi, 11px); font-weight: 550; font-stretch: 105%; white-space: nowrap; overflow: hidden;
}
.bp__fav { flex: none; display: flex; }
.bp__fav .bp-lk__zone, .bp__fav .bp-lk__ghost { display: none; }
.bp__tab em {
  margin-left: auto; padding-left: 6px; font-style: normal;
  font-family: var(--mono); font-size: .86em; letter-spacing: .02em; color: color-mix(in srgb, var(--i) 52%, transparent);
}
@container (max-height: 120px) {
  .bp__tab { display: none; }
  .bp__ics { grid-template-rows: minmax(0, 1fr); bottom: 6px; }
}

/* 8. Inspector --------------------------------------------------------------- */
.bp__panel {
  grid-area: panel; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 11px 12px 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 30, 37, .82), rgba(18, 18, 23, .82));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, .09), inset 0 1px 0 rgba(243, 242, 238, .07), 0 30px 60px -34px rgba(0, 0, 0, .9);
}
.bp__ctls {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px;
  grid-template-areas: "wght wdth" "size col" "mode reset";
  align-items: end;
}
.bp__ctl--wght { grid-area: wght; } .bp__ctl--wdth { grid-area: wdth; } .bp__ctl--size { grid-area: size; }
.bp__ctl--col { grid-area: col; } .bp__ctl--mode { grid-area: mode; } .bp__reset { grid-area: reset; }
.bp__ctl { min-width: 0; }
.bp__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.bp__lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.bp__val { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* header: the file being edited, and what it is */
.bp__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-ic--head { flex: none; width: 30px; filter: none; }
.bp-ic--head .bp-ic__bg { stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; }
.bp__name { display: grid; gap: 2px; min-width: 0; }
.bp__name b { font-size: 14px; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; line-height: 1.1; color: var(--fg); }
.bp__cap { font-family: var(--mono); font-size: 10px; line-height: 1.35; letter-spacing: .01em; color: var(--fg-2); }

/* slider: a fisheye ruler with a lit playhead */
.bp__sl {
  position: relative; height: 26px; margin-inline: 1px;
  cursor: ew-resize; touch-action: pan-y; outline: none; border-radius: 6px;
}
.bp__sl::before { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; bottom: -4px; } /* bigger hit area */
.bp__sl:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.bp__ticks { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.bp__ticks i {
  display: block; width: 1.5px; height: 8px; border-radius: 1px; flex: none;
  background: rgba(243, 242, 238, .2); transform-origin: 50% 50%;
  transition: background-color .3s var(--ease);
}
.bp__ticks i:nth-child(6n + 1) { height: 11px; background: rgba(243, 242, 238, .28); }
.bp__ticks i.on { background: rgba(243, 242, 238, .72); }
.bp__ticks i.on:nth-child(6n + 1) { background: rgba(243, 242, 238, .92); }
.bp__needle {
  position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; border-radius: 2px;
  background: var(--c, #8C6CFF); box-shadow: 0 0 10px color-mix(in srgb, var(--c, #8C6CFF) 85%, transparent);
  pointer-events: none; will-change: transform; transform-origin: 50% 100%;
}
.bp__needle::before { /* the grip */
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 16px; margin: -8px 0 0 -5px; border-radius: 5px;
  background: #F3F2EE; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #8C6CFF) 34%, transparent), 0 4px 10px rgba(0, 0, 0, .55);
  transition: transform .5s var(--spring), box-shadow .3s var(--ease);
}
.bp__sl:hover .bp__needle::before { transform: scale(1.12); }
.bp__sl.is-drag .bp__needle::before { transform: scaleX(1.3) scaleY(1.12); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, #8C6CFF) 40%, transparent), 0 6px 14px rgba(0, 0, 0, .6); }

/* colour: five swatches and a ring that springs between them */
.bp__sw { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 2px; }
.bp__swb {
  position: relative; z-index: 1; flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 3px 8px -2px rgba(0, 0, 0, .6);
  transition: transform .55s var(--spring);
}
.bp__swb::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* hit area */
.bp__swb:hover { transform: scale(1.16); }
.bp__swb:active { transform: scale(.88); transition-duration: .12s; }
.bp__swb.is-on { transform: scale(.82); }
.bp__swb:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.bp__sw-ring {
  position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px #F3F2EE, 0 0 14px rgba(243, 242, 238, .18);
  pointer-events: none; will-change: transform;
}

/* light / dark: a segmented switch with a sliding thumb */
.bp__seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 32px; padding: 3px; border-radius: 999px;
  background: rgba(243, 242, 238, .06); box-shadow: inset 0 0 0 1px rgba(243, 242, 238, .1);
}
.bp__seg-th { position: absolute; left: 0; top: 3px; bottom: 3px; width: 50%; border-radius: 999px; background: #F3F2EE; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .7); will-change: transform, width; }
.bp__seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px;
  font-size: 12px; font-weight: 600; font-stretch: 110%; letter-spacing: -.005em; color: var(--fg-2);
  transition: color .35s var(--ease);
}
.bp__seg button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .35s var(--ease); }
.bp__seg button[data-mode="1"]::before { background: currentColor; }
.bp__seg button.is-on { color: #0A0A0C; }
.bp__seg button:not(.is-on):hover { color: var(--fg); }
.bp__seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* back to the rules */
.bp__reset {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; font-stretch: 108%; letter-spacing: -.005em; white-space: nowrap; color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, .2);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--spring);
}
.bp__reset span { overflow: hidden; text-overflow: ellipsis; }
.bp__reset svg { flex: none; width: 13px; height: 13px; }
.bp__reset:hover { background: #F3F2EE; color: #0A0A0C; box-shadow: inset 0 0 0 1px #F3F2EE; }
.bp__reset:active { transform: scale(.96); }
.bp__reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bp__reset.is-spin svg { animation: bp-spin .9s var(--spring); }
@keyframes bp-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* tokens: what the controls write into the design system */
.bp__tok {
  display: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid rgba(243, 242, 238, .08);
  font-family: var(--mono); font-size: 10px; line-height: 1.8; letter-spacing: 0; color: var(--fg-2);
  white-space: pre; overflow: hidden; text-overflow: clip; background: none;
}
.bp__tok span { color: var(--fg-3); }
.bp__tok b { font-weight: 400; color: var(--fg); }
.bp__tok b:first-of-type::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; background: var(--b); vertical-align: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }

@container bpstage (min-width: 680px) {
  .bp__panel { padding: 16px 16px 14px; gap: 16px; }
  .bp__head { padding-bottom: 14px; border-bottom: 1px solid rgba(243, 242, 238, .08); }
  .bp__ctls {
    flex: 1 1 auto; min-height: 0;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "wght" "wdth" "col" "size" "mode" "reset";
    grid-template-rows: repeat(6, auto); align-content: space-evenly; gap: 15px;
  }
  .bp__lbl { font-size: 10px; }
  .bp__val { font-size: 11px; }
  .bp__row { margin-bottom: 5px; }
  .bp__sl { height: 28px; }
  .bp__sw { height: 30px; }
  .bp__swb { width: 22px; height: 22px; }
  .bp__sw-ring { width: 31px; height: 31px; }
  .bp__seg, .bp__reset { height: 34px; }
  .bp__ctl--mode { margin-top: 3px; }
  .bp__reset { margin-top: -5px; }
}
@container bpstage (min-width: 680px) and (min-height: 600px) {
  .bp__tok { display: block; }
}
@container bpstage (max-width: 380px) {
  .bp__ctls { column-gap: 12px; }
  .bp__reset { padding: 0 9px; gap: 5px; font-size: 11.5px; }
  .bp__seg button { font-size: 11.5px; }
  .bp__tl { left: 9px; top: 8px; font-size: 9.5px; }
  .bp__legend { right: 9px; top: 8px; font-size: 9.5px; }
  .bp__meta { left: 9px; right: 9px; bottom: 7px; font-size: 9.5px; }
  .bp__win { left: 8px; right: 8px; }
  .bp__ics { left: 6px; right: 6px; }
  .bp__cds { left: 6px; right: 6px; bottom: 6px; }
  .bp__poster { padding: var(--bp-top) 10px 8px; }
  .bp__tile { border-radius: 10px; }
}

/* 9. States ------------------------------------------------------------------ */
.bp.is-pre .bp__tile, .bp.is-pre .bp__panel, .bp.is-pre .bp__cap { opacity: 0; }

/* while pulling, and right after "Back to the rules", the system shows its guides */
.bp.is-pulling .bp__master .bp-lk__zone, .bp.is-ruled .bp__master .bp-lk__zone { opacity: .95; }
.bp.is-pulling .bp__master .bp-lk__ghost, .bp.is-ruled .bp__master .bp-lk__ghost { opacity: .75; }
.bp.is-pulling .bp__cl, .bp.is-ruled .bp__cl { opacity: .3; }
.bp.is-pulling .bp__poster .bp-lk__zone, .bp.is-ruled .bp__poster .bp-lk__zone { opacity: .7; }
.bp.is-pulling .bp__poster .bp-lk__ghost, .bp.is-ruled .bp__poster .bp-lk__ghost { opacity: .5; }
.bp.is-pulling :is(.bp__web, .bp__card) .bp-lk__zone, .bp.is-ruled :is(.bp__web, .bp__card) .bp-lk__zone { opacity: .75; }
.bp.is-pulling :is(.bp__web, .bp__card) .bp-lk__ghost, .bp.is-ruled :is(.bp__web, .bp__card) .bp-lk__ghost { opacity: .5; }
.bp.is-ruled .bp__tile { animation: bp-ruled 1.2s var(--ease); }
@keyframes bp-ruled {
  0% { box-shadow: 0 0 0 1px var(--guide), 0 0 0 5px color-mix(in srgb, var(--guide) 30%, transparent), 0 26px 50px -30px rgba(0, 0, 0, .95); }
  100% { box-shadow: 0 0 0 1px rgba(243, 242, 238, calc(.05 + .09 * var(--dk))), 0 0 0 5px transparent, 0 26px 50px -30px rgba(0, 0, 0, .95); }
}
.bp.is-pulling, .bp.is-pulling * { cursor: grabbing; }
.bp.is-pulling .bp__sl, .bp.is-pulling .bp__sl * { cursor: ew-resize; }

/* off screen or hidden tab: nothing animates */
.bp.is-paused *, .bp.is-paused *::before, .bp.is-paused *::after,
.bp.is-hidden-tab *, .bp.is-hidden-tab *::before, .bp.is-hidden-tab *::after { animation-play-state: paused !important; }

/* reduced motion: controls still work, changes apply at once */
.bp.is-reduced *, .bp.is-reduced *::before, .bp.is-reduced *::after { transition: none !important; animation: none !important; }