/* Playground: interaction studies (js/playground.js) and the tile overlay */

/* ───────── Board: two big columns ───────── */
.lab { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--grid-gap)) / 2 * .78); }
.lab__tile--wide { grid-column: span 2; }
@media (max-width: 767px) { .lab { grid-template-columns: 1fr; grid-auto-rows: calc(100cqw * .95); } .lab__tile--wide { grid-column: auto; } }

button.lab__cover { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.lab__tile:has(.lab__cover) { cursor: pointer; }

/* Interaction tiles: the live demo is the tile; text sits above and below it */
.lab__tile--ix { background: var(--ix-bg); }
.lab__tile--ix .lab__stage { position: absolute; z-index: 1; left: 0; right: 0; top: 40px; bottom: 96px; }
.lab__tile--ix .lab__bottom { pointer-events: none; }
.lab__tile--ix .lab__scope { display: none; }
.lab__tile--ix .lab__cover { z-index: 3; }
.lab__tile--hover .lab__cover { z-index: 0; } /* hover-driven demos sit above the cover; clicks still bubble to the tile */
.lab__tile--hover .lab__stage { z-index: 2; }
.lab__tile--noptr .lab__stage { pointer-events: none; }
.lab__tile--ix::before { /* hint chip */
  content: "Open ↗"; position: absolute; z-index: 4; right: var(--space-5); bottom: var(--space-5); padding: 6px 10px; border-radius: 999px;
  font: 400 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent);
  opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease-standard), transform .25s var(--ease-standard); pointer-events: none;
}
.lab__tile--ix:hover::before, .lab__tile--ix:focus-within::before { opacity: 1; transform: none; }
.lab__tile--wide.lab__tile--shot .lab__shot { left: 18%; right: 18%; height: 62%; }
@media (max-width: 767px) { .lab__tile--wide.lab__tile--shot .lab__shot { left: var(--space-5); right: var(--space-5); height: 52%; } }

/* A demo canvas: fixed design size, scaled from its centre by JS */
.ix { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; font-family: "Inter", -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:where(.ix) button { font: inherit; border: 0; background: none; padding: 0; margin: 0; color: inherit; cursor: pointer; }
.ix button:focus-visible, .ix a:focus-visible { outline: 2px solid #2E8BF0; outline-offset: 3px; }

/* ───────── 02 · Bounding box ───────── */
.ix-bb { --bb: #2E8BF0; }
.bb__zoom { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.7, 0, .2, 1); }
.bb__box { position: absolute; border: 1px dashed var(--bb); box-sizing: border-box; }
.bb__box.is-tween { transition: width .35s var(--ease-drawer), height .35s var(--ease-drawer), left .35s var(--ease-drawer), top .35s var(--ease-drawer); }
.bb__h { position: absolute; z-index: 2; width: 7px; height: 7px; margin: -4px 0 0 -4px; box-sizing: border-box; background: #fff; border: 1px solid var(--bb); touch-action: none; transition: opacity .3s ease; }
.bb__h::before { content: ""; position: absolute; inset: -9px; }
.bb__h[data-d="nw"] { left: 0; top: 0; } .bb__h[data-d="n"] { left: 50%; top: 0; } .bb__h[data-d="ne"] { left: 100%; top: 0; }
.bb__h[data-d="e"] { left: 100%; top: 50%; } .bb__h[data-d="se"] { left: 100%; top: 100%; } .bb__h[data-d="s"] { left: 50%; top: 100%; }
.bb__h[data-d="sw"] { left: 0; top: 100%; } .bb__h[data-d="w"] { left: 0; top: 50%; }
/* The handle turns into a blue resize arrow under the pointer */
.bb__h i {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; transform: scale(.4); pointer-events: none;
  transition: opacity .15s ease, transform .2s var(--ease-drawer);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 12 7 6.5V10h10V6.5l5.5 5.5L17 17.5V14H7v3.5Z' fill='%23fff' stroke='%232E8BF0' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bb__h[data-d="n"] i, .bb__h[data-d="s"] i { rotate: 90deg; }
.bb__h[data-d="nw"] i, .bb__h[data-d="se"] i { rotate: 45deg; }
.bb__h[data-d="ne"] i, .bb__h[data-d="sw"] i { rotate: -45deg; }
.is-ready .bb__h:hover, .bb__h.is-active { cursor: none; background: transparent; border-color: transparent; }
.is-ready .bb__h:hover i, .bb__h.is-active i { opacity: 1; transform: scale(1); }
.bb__h.is-active i { filter: drop-shadow(0 0 0 var(--bb)); }
.is-intro .bb__h:not([data-d="se"]) { opacity: 0; }
.is-intro .bb__h[data-d="se"] { width: 9px; height: 9px; margin: -5px 0 0 -5px; }
.ix-bb:not(.is-ready):not(.is-intro) .bb__h { opacity: 0; }
/* Centre guide for edge drags */
.bb__mid { position: absolute; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ix-bb[data-drag="e"].is-dragging .bb__mid, .ix-bb[data-drag="w"].is-dragging .bb__mid { opacity: 1; left: 0; right: 0; top: 50%; border-top: 1px dotted color-mix(in srgb, var(--bb) 45%, transparent); }
.ix-bb[data-drag="n"].is-dragging .bb__mid, .ix-bb[data-drag="s"].is-dragging .bb__mid { opacity: 1; top: 0; bottom: 0; left: 50%; border-left: 1px dotted color-mix(in srgb, var(--bb) 45%, transparent); }
/* Readouts: W on the bottom edge, H on the right edge; hover turns one into an editable field */
.bb__dim {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 3px; height: 14px; padding: 0 5px; border-radius: 999px;
  background: var(--bb); color: #fff; box-shadow: 0 0 0 1px var(--bb); font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .15s ease, transform .2s var(--ease-drawer), background-color .15s ease, color .15s ease;
}
.bb__dim.on { opacity: 1; transform: none; pointer-events: auto; }
.bb__dim--w { bottom: -7px; right: 14px; }
.bb__dim--h { right: -7px; bottom: 14px; translate: 50% 0; }
.bb__dim--w { translate: 0 0; }
.ix-bb[data-drag="sw"] .bb__dim--w, .ix-bb[data-drag="nw"] .bb__dim--w { right: auto; left: 14px; }
.ix-bb[data-drag="ne"] .bb__dim--h, .ix-bb[data-drag="nw"] .bb__dim--h { bottom: auto; top: 14px; }
.ix-bb[data-drag="nw"] .bb__dim--w, .ix-bb[data-drag="ne"] .bb__dim--w, .ix-bb[data-drag="n"] .bb__dim--w { bottom: auto; top: -7px; }
.ix-bb[data-drag="sw"] .bb__dim--h, .ix-bb[data-drag="nw"] .bb__dim--h, .ix-bb[data-drag="w"] .bb__dim--h { right: auto; left: -7px; translate: -50% 0; }
.ix-bb[data-drag="e"] .bb__dim--w { bottom: auto; top: 50%; margin-top: -7px; right: 14px; }
.ix-bb[data-drag="w"] .bb__dim--w { bottom: auto; top: 50%; margin-top: -7px; right: auto; left: 14px; }
.ix-bb[data-drag="s"] .bb__dim--h { right: 50%; bottom: 14px; translate: 50% 0; }
.ix-bb[data-drag="n"] .bb__dim--h { right: 50%; bottom: auto; top: 14px; translate: 50% 0; }
.bb__dim input { width: 3.4ch; padding: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; text-align: center; cursor: text; }
.bb__eq { display: none; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px #8f8f8f; color: #6f6f6f; font: 600 7px/9px inherit; text-align: center; margin-left: -18px; position: absolute; left: 4px; }
.bb__dim:hover, .bb__dim:focus-within { background: #fff; color: #1d1d1d; }
.bb__dim:hover .bb__eq, .bb__dim:focus-within .bb__eq { display: block; }
.lab__stage .bb__dim { pointer-events: none !important; }

/* ───────── 03 · Segmented navigation ───────── */
.sn__bar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 8px 18px;
  border-radius: 999px; background: #1c1c1c; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.02);
}
.sn__t { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; width: 3px; height: 12px; border-radius: 1.5px; background: #484848; text-decoration: none; outline: none; will-change: width, height, filter; }
.sn__t:focus-visible { box-shadow: 0 0 0 2px #2E8BF0; }
.sn__l { font-size: 12px; font-weight: 500; letter-spacing: .01em; color: #141414; white-space: nowrap; opacity: 0; pointer-events: none; }

/* ───────── 04 · Clouds that wiggle ───────── */
.cw__grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: .8fr 1fr 1.5fr; column-gap: 20px; }
.cw__cell { display: grid; place-items: end center; padding-bottom: 18px; }
.cw__cloud { display: block; overflow: visible; transform-origin: 50% 85%; }
.cw__cell--sm .cw__cloud { width: 84px; }
.cw__cell--md .cw__cloud { width: 124px; }
.cw__cell--lg .cw__cloud { width: 204px; }

/* ───────── 05 · Market select flow ───────── */
.lab__tile--bleed .lab__stage { top: 0; bottom: 0; }
.lab__tile--bleed .lab__top, .lab__tile--bleed .lab__bottom { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.ms { position: absolute; inset: 0; overflow: hidden; background: #2B3150; font-family: "Inter", -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ms__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
:where(.ms) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.ms button:focus-visible { outline: 2px solid #8FB2FF; outline-offset: 2px; }
.ms__stack { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ms__card {
  position: relative; width: 520px; border-radius: 22px; overflow: hidden; color: #121316;
  background: linear-gradient(180deg, rgba(221, 225, 235, .9), rgba(234, 235, 240, .94));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 18px 50px rgba(8, 10, 28, .22);
}
.ms__main { flex: none; transition: height .55s var(--ease-drawer), width .55s var(--ease-drawer), border-radius .55s var(--ease-drawer); }
.ms[data-view="done"] .ms__main { width: 340px; border-radius: 34px; }
.ms__auto {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 79px; margin-top: 19px; padding: 0 33px; font-size: 22px;
  background: linear-gradient(180deg, rgba(234, 235, 240, .93), rgba(228, 229, 235, .93));
  transition: opacity .35s ease, transform .5s var(--ease-drawer), margin .55s var(--ease-drawer), background-color .2s ease;
}
.ms[data-view]:not([data-view="select"]) .ms__auto { opacity: 0; transform: translateY(-20px) scale(.96); margin-top: -79px; pointer-events: none; }
.ms__auto:hover .ms__next svg, .ms__foot:not(:disabled):hover .ms__next svg { transform: translateX(3px); }
.ms__auto.is-press, .ms__foot.is-press { transform: scale(.98); }

/* Views cross-fade inside the main card while it resizes to fit them */
.ms__view { position: absolute; top: 0; left: 0; width: 520px; opacity: 0; filter: blur(6px); transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .3s ease, filter .3s ease, transform .5s var(--ease-drawer); }
.ms__view.is-on { opacity: 1; filter: none; transform: none; pointer-events: auto; transition-delay: .1s; }

/* Select */
.ms__rows { list-style: none; margin: 0; padding: 12px 0; }
.ms__row { position: relative; display: flex; align-items: center; width: 100%; height: 70px; padding: 0 25px; font-size: 22px; letter-spacing: -.005em; transition: background-color .2s ease; }
.ms__row:hover { background: rgba(255,255,255,.3); }
.ms__ico { flex: none; width: 32px; height: 32px; transition: filter .3s ease, opacity .3s ease, transform .45s cubic-bezier(.32, .72, 0, 1.4); }
.ms__name { margin-left: 13px; white-space: nowrap; transition: color .3s ease; }
.ms__apr { position: absolute; left: 376px; color: #6F7380; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.ms__row:not(.is-on) .ms__ico { filter: grayscale(1); opacity: .32; transform: scale(.82); }
.ms__row:not(.is-on) .ms__name, .ms__row:not(.is-on) .ms__apr { color: #A3A6AF; }
.ms__foot { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 89px; padding: 0 33px; border-top: 1px solid rgba(20, 22, 30, .11); font-size: 22px; color: #141518; transition: transform .2s ease; }
.ms__foot:disabled { cursor: default; }
.ms__foot:disabled .ms__next { opacity: .35; }
.ms__count { display: inline-flex; gap: 6px; overflow: hidden; }
.ms__num { display: inline-block; font-variant-numeric: tabular-nums; }
.ms__next { display: inline-flex; align-items: center; gap: 12px; transition: opacity .25s ease; }
.ms__next svg { width: 11px; height: 18px; transition: transform .25s var(--ease-drawer); }

/* AI thinking: a sheen reads down the list */
.ms__main::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); transform: translateX(-100%); }
.ms__main.is-thinking::after { opacity: 1; animation: ms-sheen 1s linear infinite; }
@keyframes ms-sheen { to { transform: translateX(100%); } }

/* Allocate */
.ms__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 33px 0 24px; }
.ms__back { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: #5D616C; }
.ms__back svg { width: 9px; height: 15px; transform: rotate(180deg); }
.ms__back:hover { color: #121316; }
.ms__step { font: 500 11px/1 "Geist Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; color: #7A7E89; }
.ms__sum { display: flex; align-items: flex-end; justify-content: space-between; padding: 22px 33px 0; }
.ms__k { margin: 0 0 8px; font-size: 14px; color: #7A7E89; }
.ms__amt { margin: 0; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.ms__amt small { font-size: 16px; font-weight: 400; letter-spacing: 0; color: #7A7E89; }
.ms__blend { text-align: right; }
.ms__bapr { margin: 0; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.ms__bar { display: flex; gap: 3px; height: 8px; margin: 22px 33px 6px; }
.ms__bar i { flex: .001 1 0; border-radius: 4px; transition: flex-grow 1s var(--ease-drawer); }
.ms__alloc { list-style: none; margin: 0; padding: 4px 0 12px; }
.ms__alloc li { display: flex; align-items: center; height: 54px; padding: 0 33px 0 27px; font-size: 18px; animation: ms-in .5s var(--ease-drawer) both; animation-delay: calc(var(--d, 0ms) + .15s); }
.ms__ico--sm { width: 26px; height: 26px; }
.ms__pct { margin-left: auto; font-variant-numeric: tabular-nums; }
.ms__usd { width: 84px; text-align: right; color: #7A7E89; font-variant-numeric: tabular-nums; }
@keyframes ms-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.ms__hold { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.ms__fill { position: absolute; inset: 0; background: rgba(18, 19, 22, .1); transform: scaleX(0); transform-origin: left; }
.ms__holdlbl, .ms__hold .ms__next { position: relative; }

/* Deposit */
.ms__head--run { padding: 26px 33px 6px 27px; }
.ms__title { font-size: 22px; }
.ms__alloc--run { padding-bottom: 18px; }
.ms__alloc--run li { opacity: .45; transition: opacity .3s ease; animation: none; }
.ms__alloc--run li.is-busy, .ms__alloc--run li.is-ok { opacity: 1; }
.ms__st { position: relative; flex: none; width: 22px; height: 22px; margin-left: auto; }
.ms__st i { position: absolute; inset: 0; box-sizing: border-box; border: 2px solid rgba(18, 19, 22, .14); border-radius: 50%; transition: background-color .25s ease, border-color .25s ease; }
.is-busy .ms__st i { border-top-color: #121316; animation: ms-spin .7s linear infinite; }
.is-ok .ms__st i { background: #121316; border-color: #121316; }
.is-ok .ms__st::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: ms-pop .35s cubic-bezier(.32, .72, 0, 1.6) both; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
@keyframes ms-pop { from { opacity: 0; transform: rotate(45deg) scale(.3); } }

/* Done: the card folds down to a summary pill */
.ms__done { display: flex; align-items: center; gap: 16px; width: 340px; padding: 16px 22px; }
.ms__pile { display: flex; padding-left: 9px; }
.ms__ico--pile { width: 32px; height: 32px; margin-left: -9px; border-radius: 50%; box-shadow: 0 0 0 2.5px #E6E8EE; }
.ms__dtxt { display: flex; flex-direction: column; gap: 3px; }
.ms__dtxt b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms__dtxt small { font-size: 14px; color: #7A7E89; }

/* Chrome around the stage: the AI button and the poster captions */
.ms__ai { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #fff; color: #2B3550; box-shadow: 0 6px 18px rgba(8, 10, 28, .2); transition: transform .2s ease; }
.ms__ai:hover { transform: scale(1.06); }
.ms__ai svg { width: 24px; height: 24px; }
.ms__ai.is-thinking svg { animation: ms-spin 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
.ms__cap { position: absolute; bottom: 14px; left: 14px; width: 150px; margin: 0; font-size: 11px; line-height: 1.12; color: #fff; }
.ms__cap--2 { left: max(170px, 26%); width: 120px; }
.lab__stage .ms__ai, .lab__stage .ms__cap { display: none; }

/* ───────── Overlay ───────── */
html.pgx-lock { overflow: hidden; }
.pgx { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; }
.pgx__scrim { position: absolute; inset: 0; background: rgba(8, 8, 8, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s var(--ease-standard); }
.pgx__frame {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-2);
  width: min(1240px, calc(100vw - 144px)); height: min(760px, calc(100dvh - 96px));
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s var(--ease-standard), transform .45s var(--ease-drawer);
}
.pgx.is-open .pgx__scrim, .pgx.is-open .pgx__frame { opacity: 1; transform: none; }
.pgx__stage { position: relative; overflow: hidden; border-radius: 12px; background: #fff; }
.pgx__shot { position: absolute; inset: var(--space-6); overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 20px 50px rgba(0,0,0,.25); }
.pgx__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pgx__info {
  display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; padding: var(--space-5); border-radius: 12px;
  background: var(--bg-page); color: var(--text-primary);
}
.pgx__code, .pgx__label { margin: 0; font: 400 11px/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.pgx__title { margin: 0; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--font-ntype); letter-spacing: -.01em; }
.pgx__desc { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--text-secondary); }
.pgx__hint { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-card); font: 400 13px/1.45 var(--font-body); color: var(--text-primary); }
.pgx__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pgx__tags li { padding: 5px 8px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 14%, transparent); font: 400 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.pgx__credit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); }
.pgx__by { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; color: inherit; text-decoration: none; font: 500 15px/1.3 var(--font-body); }
.pgx__handle { grid-row: 2; font: 400 13px/1.4 var(--font-body); color: var(--text-secondary); }
.pgx__arrow { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 8px 12px; border-radius: 999px; background: var(--surface-card); font: 400 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; transition: background-color .2s var(--ease-standard); }
.pgx__by:hover .pgx__arrow { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.pgx__open { align-self: flex-start; }
.pgx__btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; transition: background-color .2s var(--ease-standard), opacity .3s var(--ease-standard); opacity: 0;
}
.pgx.is-open .pgx__btn { opacity: 1; }
.pgx__btn:hover { background: rgba(255,255,255,.2); }
.pgx__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pgx__btn svg { width: 16px; height: 16px; }
.pgx__close { top: 16px; left: 16px; }
.pgx__nav { top: 50%; margin-top: -20px; }
.pgx__nav--prev { left: 16px; } .pgx__nav--next { right: 16px; }

@media (max-width: 900px) {
  .pgx__frame { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; width: calc(100vw - 32px); height: calc(100dvh - 128px); margin-top: 40px; }
  .pgx__info { max-height: 38dvh; padding: var(--space-4); gap: var(--space-2); }
  .pgx__desc { font-size: 14px; }
  .pgx__close { top: 12px; left: 16px; }
  .pgx__nav { top: 12px; margin-top: 0; }
  .pgx__nav--prev { left: auto; right: 64px; } .pgx__nav--next { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pgx__frame, .pgx__scrim { transition: opacity .15s linear; transform: none; }
  .bb__zoom { transition-duration: .01s !important; }
}

/* ───────── Material motion tokens (Material 3): standard for small moves, emphasized decelerate in, accelerate out ───────── */
.ix, .sl { --m3-std: cubic-bezier(.2, 0, 0, 1); --m3-dec: cubic-bezier(.05, .7, .1, 1); --m3-acc: cubic-bezier(.3, 0, .8, .15); }

/* ───────── 08 · Onboarding tour ───────── */
.ix-pm { height: 540px; display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border-radius: 16px; overflow: hidden; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 36px -14px rgba(0,0,0,.2); }
.pm__left { display: flex; flex-direction: column; padding: 24px 24px 0; }
.pm__logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pm__logo svg { width: 20px; height: 16px; fill: #111; }
.pm__h { margin: 40px 0 6px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.pm__sub { margin: 0 0 18px; font-size: 12.5px; line-height: 1.4; color: #555; }
.pm__list { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pm__sel { position: absolute; left: 0; right: 0; top: 0; border-radius: 12px; background: #f4f4f4; pointer-events: none; transition: transform .35s var(--m3-std), height .35s var(--m3-std); }
.pm__sel::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 0 3px 3px 0; background: #FF6A00; }
.pm__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-align: left; }
.pm__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; color: #5a5a5a; box-shadow: inset 0 0 0 1px #e7e7e7, 0 1px 1px rgba(0,0,0,.03); transition: color .2s var(--m3-std); }
.pm__ico svg { width: 17px; height: 17px; }
.pm__item[aria-selected="true"] .pm__ico { color: #FF6A00; }
.pm__txt b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.pm__txt small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: #666; }
.pm__foot { display: flex; align-items: center; gap: 14px; margin: auto -24px 0; padding: 14px 24px 16px; border-top: 1px solid #eee; font-size: 12px; color: #8a8a8a; }
.pm__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: #f2f2f2; color: #333; }
.pm__chip svg { width: 13px; height: 13px; }
.pm__right { position: relative; padding: 24px 24px 72px; background: #f7f7f7; }
.pm__view { position: relative; height: 236px; border-radius: 12px; background: #efefef; overflow: hidden; }
.pm__scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .15s var(--m3-acc), transform .15s var(--m3-acc); }
.pm__scene.is-on { opacity: 1; transform: none; transition: opacity .3s var(--m3-dec) .08s, transform .3s var(--m3-dec) .08s; }
.pm__copy { margin-top: 22px; transition: opacity .26s var(--m3-dec), transform .26s var(--m3-dec); }
.pm__copy.is-out { opacity: 0; transform: translateY(-4px); transition: opacity .12s var(--m3-acc), transform .12s var(--m3-acc); }
.pm__ttl { margin: 0 0 8px; font-size: 15px; font-weight: 500; line-height: 1.3; }
.pm__dsc { max-width: 300px; margin: 0; font-size: 12.5px; line-height: 1.5; color: #666; }
.pm__cta { position: absolute; right: 24px; bottom: 18px; height: 32px; padding: 0 13px; border-radius: 8px; background: #FF6A00; color: #fff; font-size: 12px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s var(--m3-std), background-color .15s var(--m3-std); }
.pm__cta:hover { background: #ec5f00; } .pm__cta:active { transform: scale(.96); }
/* scene: generate */
.pm__prompt { width: 300px; padding: 13px 14px; border-radius: 12px; background: #fff; font-size: 12.5px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pm__type { display: inline-block; vertical-align: bottom; clip-path: inset(0 100% 0 0); }
.is-on .pm__type { animation: pm-type 1.3s steps(33) .25s forwards; }
.pm__caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -3px; background: #FF6A00; animation: pm-blink 1s steps(2) infinite; }
.pm__gen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; width: 300px; margin-top: 12px; }
.pm__gen i { height: 62px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.is-on .pm__gen i { animation: pm-rise .45s var(--m3-dec) both; animation-delay: calc(1.45s + var(--n, 0) * 90ms); }
.pm__gen i:nth-child(2) { --n: 1; } .pm__gen i:nth-child(3) { --n: 2; }
/* scene: components */
.pm__grid { display: grid; grid-template-columns: repeat(3, 62px); gap: 10px; }
.pm__grid i { height: 62px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pm__grid i:nth-child(5) { background: #FF6A00; }
.is-on .pm__grid i { animation: pm-rise .45s var(--m3-dec) both; animation-delay: calc(var(--k) * 70ms); }
/* scene: prototype */
.pm__flow { position: relative; display: flex; align-items: center; gap: 8px; }
.pm__scr { width: 72px; height: 124px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pm__link { width: 34px; height: 0; border-top: 2px dotted #b9b9b9; }
.is-on .pm__scr { animation: pm-hl 4.5s var(--m3-std) infinite; }
.is-on .pm__scr:nth-of-type(2) { animation-delay: 1.5s; } .is-on .pm__scr:nth-of-type(3) { animation-delay: 3s; }
.pm__cur { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.pm__cur svg { display: block; width: 100%; height: 100%; }
.pm__flow .pm__cur { left: 30px; top: 70px; }
.is-on .pm__flow .pm__cur { animation: pm-fly 4.5s var(--m3-std) infinite; }
/* scene: code */
.pm__code { display: flex; flex-direction: column; gap: 10px; width: 264px; padding: 18px; border-radius: 12px; background: #1d1d1f; }
.pm__code i { height: 7px; width: var(--w); border-radius: 4px; background: #8a8a90; }
.pm__code i:nth-child(3n+1) { background: #FF8A3D; } .pm__code i:nth-child(3n+2) { background: #7cc4ff; margin-left: 18px; }
.is-on .pm__code i { animation: pm-wipe .5s var(--m3-dec) both; animation-delay: calc(var(--k) * 110ms); }
/* scene: team */
.pm__users { position: relative; width: 392px; height: 190px; }
.pm__user { position: absolute; display: flex; align-items: center; gap: 10px; width: 270px; padding: 9px 14px; border-radius: 12px; background: #fff; }
.pm__user--0 { left: 112px; top: 6px; opacity: .45; } .pm__user--1 { left: 56px; top: 70px; z-index: 2; transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 26px -10px rgba(0,0,0,.28); } .pm__user--2 { left: 0; top: 136px; opacity: .45; }
.is-on .pm__user--1 { animation: pm-lift .5s var(--m3-dec) .4s both; }
.is-on .pm__user--0, .is-on .pm__user--2 { animation: pm-dim .5s var(--m3-dec) .4s both; }
.pm__av { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #dcdcdc; }
.pm__av::before { content: attr(data-t); font-size: 10px; font-weight: 600; color: #666; }
.pm__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm__who b { display: block; font-size: 12px; font-weight: 500; line-height: 1.25; } .pm__who small { display: block; font-size: 11px; color: #777; }
.pm__user em { margin-left: auto; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-style: normal; color: #444; box-shadow: inset 0 0 0 1px #ddd; }
.pm__users .pm__cur { left: 300px; top: 100px; }
.is-on .pm__users .pm__cur { animation: pm-arrive .6s var(--m3-dec) .7s both; }
.pm__ping { position: absolute; left: 306px; top: 104px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,106,0,.55); opacity: 0; }
.is-on .pm__ping { animation: pm-ping .5s var(--m3-std) 1.25s both; }
@keyframes pm-type { to { clip-path: inset(0); } }
@keyframes pm-blink { 50% { opacity: 0; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(-12px) scale(.94); } }
@keyframes pm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes pm-hl { 0%, 28%, 100% { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); } 6%, 22% { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 24px -10px rgba(0,0,0,.3), 0 0 0 2px #FF6A00; } }
@keyframes pm-fly { 0% { transform: translate(0, 0); } 28% { transform: translate(0, 0); } 33% { transform: translate(122px, 0); } 61% { transform: translate(122px, 0); } 66% { transform: translate(244px, 0); } 94% { transform: translate(244px, 0); } 100% { transform: translate(0, 0); } }
@keyframes pm-lift { from { opacity: .45; transform: none; box-shadow: 0 0 0 transparent; } }
@keyframes pm-dim { from { opacity: 1; } }
@keyframes pm-arrive { from { opacity: 0; transform: translate(46px, 38px); } }
@keyframes pm-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }

/* ───────── 09 · API key and install snippets ───────── */
.ix-ak { display: flex; flex-direction: column; gap: 20px; color: #14181f; }
.ix-ak > * { flex: none; }
.ak__lbl { margin: 0; font-size: 15px; font-weight: 500; }
.ak__field { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 12px 0 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #d3dbe6; }
.ak__key { flex: 1; min-width: 0; font: 400 18px/1 ui-monospace, "SF Mono", Menlo, "Geist Mono", monospace; letter-spacing: .02em; }
.ak__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border-radius: 19px; font-size: 14px; font-weight: 500; background: linear-gradient(#fff, #f0f4f8); box-shadow: inset 0 0 0 1px #cdd7e4, 0 1px 2px rgba(15,23,42,.08); transition: transform .12s var(--m3-std), box-shadow .15s var(--m3-std); }
.ak__btn:hover { box-shadow: inset 0 0 0 1px #b7c4d6, 0 2px 4px rgba(15,23,42,.1); } .ak__btn:active { transform: scale(.97); }
.ak__spark { display: grid; width: 18px; height: 18px; transition: transform .35s var(--m3-std), color .2s; } .ak__spark svg { width: 100%; height: 100%; }
.ak__reveal.is-on .ak__spark { transform: rotate(90deg) scale(1.1); color: #12a37a; }
.ak__rl, .ak__cl { transition: opacity .1s var(--m3-acc); } .ak__rl.is-out { opacity: 0; }
.ak__ic, .ak__cp { display: grid; place-items: center; width: 18px; height: 18px; }
.ak__ic > span, .ak__cp > span { grid-area: 1 / 1; display: grid; transition: transform .22s var(--m3-std), opacity .15s var(--m3-std); } .ak__ic svg, .ak__cp svg { width: 100%; height: 100%; }
.ak__i2 { opacity: 0; transform: scale(.5); color: #12a37a; }
.is-done .ak__i1 { opacity: 0; transform: scale(.5); } .is-done .ak__i2 { opacity: 1; transform: none; }
.ak__card { position: relative; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #d3dbe6; }
.ak__tabs { position: relative; display: flex; align-items: center; gap: 30px; height: 64px; padding: 0 22px; box-shadow: inset 0 -1px 0 #dde3ec; }
.ak__tab { position: relative; height: 100%; font-size: 15px; font-weight: 500; letter-spacing: .02em; color: #66707f; transition: color .2s var(--m3-std); }
.ak__tab:hover { color: #14181f; } .ak__tab[aria-selected="true"] { color: #12a37a; }
.ak__ul { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #12a37a; transition: transform .3s var(--m3-std), width .3s var(--m3-std); }
.ak__term { margin-left: auto; font: 400 15px/1 ui-monospace, "SF Mono", Menlo, "Geist Mono", monospace; color: #66707f; }
.ak__line { display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 16px 0 22px; }
.ak__run { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 400 15.5px/1 ui-monospace, "SF Mono", Menlo, "Geist Mono", monospace; color: #243247; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); transition: opacity .2s var(--m3-dec), transform .2s var(--m3-dec); }
.ak__run.is-out { opacity: 0; transform: translateY(5px); transition: opacity .11s var(--m3-acc), transform .11s var(--m3-acc); }
.ak__run .p { color: #7c3aed; }
.ak__cp { flex: none; width: 36px; height: 36px; border-radius: 10px; color: #4b5563; transition: background-color .15s var(--m3-std), transform .12s var(--m3-std); }
.ak__cp > span { width: 20px; height: 20px; } .ak__cp:hover { background: #f1f5f9; } .ak__cp:active { transform: scale(.94); }
.ak__code { padding: 22px 24px; } .ak__code .ak__cp { position: absolute; top: 12px; right: 12px; z-index: 1; }
.ak__code pre { margin: 0; overflow: hidden; font: 400 15.5px/1.55 ui-monospace, "SF Mono", Menlo, "Geist Mono", monospace; color: #1f2328; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.ak__code .r { color: #cf222e; } .ak__code .b { color: #0969da; } .ak__code .g { color: #1a7f37; }

/* ───────── 10 · Day timeline ───────── */
.ix-tl { color: #e6e6e6; }
.tl__chip { position: absolute; left: 40px; top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 236px; height: 46px; padding: 0 18px; border-radius: 12px; background: linear-gradient(#1d1d1d, #181818); box-shadow: inset 0 0 0 1px #2b2b2b; font-size: 20px; }
.tl__plus { font-weight: 500; color: #8fd11f; font-variant-numeric: tabular-nums; } .tl__plus.bump { animation: tl-bump .26s var(--m3-dec); }
.tl__play { position: absolute; left: 292px; top: 32px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #5c5c5c; transition: color .2s var(--m3-std), transform .12s var(--m3-std); }
.tl__play:hover { color: #b0b0b0; } .tl__play:active { transform: scale(.92); } .tl__play.is-on { color: #fff; }
.tl__play svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform .2s var(--m3-std), opacity .15s var(--m3-std); }
.tl__ipause, .tl__play.is-on .tl__ip { opacity: 0; transform: scale(.5); } .tl__play.is-on .tl__ipause { opacity: 1; transform: none; }
.tl__base { position: absolute; left: 48px; width: 624px; top: 214px; height: 1px; background: #3a3a3a; }
.tl__tick { position: absolute; top: 214px; width: 1px; height: 8px; background: #3a3a3a; } .tl__tick.is-major { height: 14px; }
.tl__lbl { position: absolute; top: 182px; margin-left: -7px; transform: translateX(-100%); font-size: 17px; color: #767676; transition: color .2s var(--m3-std); font-variant-numeric: tabular-nums; } .tl__lbl.is-hot { color: #fff; }
.tl__track { position: absolute; left: 0; width: 100%; height: 38px; }
.tl__seg, .tl__stub { position: absolute; top: 0; height: 38px; box-sizing: border-box; border-radius: 3px; }
.tl__seg { background: #1f1f1f; box-shadow: inset 0 0 0 1px #3d3d3d; } .tl__stub { box-shadow: inset 0 0 0 1px #3d3d3d; background: repeating-linear-gradient(90deg, #111 0 4px, transparent 4px 7px); opacity: .6; }
.tl__ph { position: absolute; left: 0; top: 0; width: 0; height: 100%; pointer-events: none; will-change: transform; }
.tl__tip { position: absolute; left: 0; top: 88px; padding: 3px 8px; border-radius: 6px; background: #2b2b2b; font: 400 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; transform: translate(-50%, 6px); opacity: 0; transition: opacity .15s var(--m3-std), transform .2s var(--m3-dec); }
.ix-tl.is-drag .tl__tip, .ix-tl:has(.tl__hit:hover) .tl__tip, .ix-tl:has(.tl__hit:focus-visible) .tl__tip { opacity: 1; transform: translate(-50%, 0); }
.tl__grip { position: absolute; left: -21px; top: 118px; display: flex; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 26px; border-radius: 9px; background: #262626; box-shadow: inset 0 0 0 1px #3a3a3a; transition: transform .15s var(--m3-std); }
.tl__grip i { width: 3px; height: 9px; border-radius: 1.5px; background: #6b6b6b; transition: background-color .15s var(--m3-std); }
.tl__cap { position: absolute; left: -20px; top: 152px; display: flex; flex-direction: column; align-items: center; width: 40px; height: 164px; padding: 12px 0; border-radius: 20px; background: rgba(38,38,38,.94); box-shadow: inset 0 0 0 1px #3d3d3d; color: #8fd11f; transform-origin: 50% 50%; transition: transform .18s var(--m3-std); }
.tl__cap svg { width: 16px; height: 12px; }
.tl__ln { flex: 1; width: 2px; margin: 8px 0; border-radius: 1px; background: #8fd11f; }
.tl__dot { width: 10px; height: 10px; border-radius: 50%; background: #8fd11f; }
.tl__dot--b { position: absolute; left: -5px; top: 332px; } .tl__ln--b { position: absolute; left: -1px; top: 342px; width: 2px; height: 118px; margin: 0; background: linear-gradient(#8fd11f, rgba(143,209,31,.15)); flex: none; }
.ix-tl.is-drag .tl__cap { transform: scale(.94, .98); } .ix-tl.is-drag .tl__grip i { background: #8fd11f; } .ix-tl.is-drag .tl__grip { transform: translateY(-3px); }
.tl__hit { position: absolute; top: 100px; height: 360px; cursor: grab; touch-action: none; outline: none; } .ix-tl.is-drag .tl__hit { cursor: grabbing; }
.tl__hit:focus-visible { outline: 2px solid #2E8BF0; outline-offset: -2px; border-radius: 6px; }
@keyframes tl-bump { from { opacity: .2; transform: translateY(6px); } }

/* ───────── 11 · Glass sliders ───────── */
.sl { position: absolute; inset: 0; overflow: hidden; background: #1a2418; font-family: "Inter", -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.sl__bg { position: absolute; inset: -4%; background: url("/assets/images/playground/moss.jpg") center / cover, radial-gradient(55% 45% at 28% 30%, #566f3d, transparent 70%), radial-gradient(50% 55% at 82% 72%, #2d4a2a, transparent 72%), radial-gradient(40% 40% at 62% 18%, #7d9158, transparent 75%), #1b2a1a; filter: blur(2px); will-change: filter; }
.sl__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.32)); pointer-events: none; }
.ix-sl { display: flex; flex-direction: column; gap: 12px; }
.sl__row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 30px; border-radius: 22px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; transition: background-color .3s var(--m3-std), box-shadow .2s var(--m3-std); }
.sl__row:hover, .sl__row.is-drag { background: rgba(255,255,255,.15); } .sl__row:focus-visible { box-shadow: inset 0 0 0 2px #2E8BF0; }
.sl__fill { position: absolute; inset: 0; border-radius: 22px; background: rgba(255,255,255,.22); clip-path: inset(0 calc((1 - var(--f, 0)) * 100%) 0 0 round 22px); pointer-events: none; }
.sl__h { position: absolute; top: 50%; left: clamp(18px, calc(var(--f, 0) * 100% - 24px), calc(100% - 18px)); width: 2px; height: 36px; margin-top: -18px; border-radius: 1px; background: #fff; opacity: calc(.35 + var(--f, 0) * .65); pointer-events: none; }
.sl__name, .sl__val { position: relative; display: inline-block; font-size: 21px; font-weight: 400; line-height: 1; pointer-events: none; }
.sl__name { color: rgba(255,255,255,.7); } .sl__val { color: #fff; font-variant-numeric: tabular-nums; }

/* ───────── 12 · Podcast player ───────── */
.ix-pp { overflow: hidden; background: #000; color: #fff; }
.ix-pp::before { content: ""; position: absolute; left: 6px; right: 6px; top: -60px; bottom: 6px; border-radius: 56px; box-shadow: inset 0 0 0 3px #1c1c1e, 0 0 0 1px #2d2d30; pointer-events: none; -webkit-mask-image: linear-gradient(transparent 60px, #000 130px); mask-image: linear-gradient(transparent 60px, #000 130px); }
.pp__tx { position: absolute; left: 34px; right: 34px; top: 30px; height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 72%, transparent); }
.pp__lines { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 60px; will-change: transform; }
.pp__ln { display: block; text-align: left; font-size: 16px; line-height: 1.42; color: rgba(255,255,255,.3); transition: color .3s var(--m3-std); }
.pp__ln small { display: block; margin-bottom: 5px; font: 400 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; color: rgba(255,255,255,.3); } .pp__ln small span { margin-left: 6px; }
.pp__ln.is-past { color: rgba(255,255,255,.46); } .pp__ln.is-now { color: #fff; } .pp__ln.is-now small { color: #b7b7b7; }
.pp__ln:hover { color: rgba(255,255,255,.7); }
.pp__trk { position: absolute; left: 34px; right: 34px; top: 312px; }
.pp__pins { position: relative; height: 24px; } .pp__pn { position: absolute; bottom: 4px; width: 12px; height: 14px; margin-left: -6px; color: #b4b4b4; animation: pp-pin .3s var(--m3-dec) both; } .pp__pn svg { display: block; width: 100%; height: 100%; }
.pp__bar { position: relative; height: 16px; border-radius: 8px; background: #2e2e30; cursor: pointer; touch-action: none; outline: none; } .pp__bar:focus-visible { box-shadow: 0 0 0 2px #2E8BF0; }
.pp__seg { position: absolute; top: 2px; height: 12px; border-radius: 6px; } .pp__seg--g { background: #d6f27f; } .pp__seg--p { background: #c78cf0; }
.pp__head { position: absolute; left: 0; top: -10px; width: 100%; height: 36px; pointer-events: none; will-change: transform; }
.pp__head::after { content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 100%; border-radius: 2px; background: #fff; transition: transform .15s var(--m3-std); } .ix-pp.is-scrub .pp__head::after { transform: scaleX(1.7); }
.pp__times { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: #b0b0b0; font-variant-numeric: tabular-nums; }
.pp__ctl { position: absolute; left: 30px; right: 30px; top: 408px; display: flex; align-items: center; justify-content: space-between; }
.pp__spd, .pp__set { width: 40px; height: 40px; font-size: 15px; font-weight: 500; color: #b3b3b3; transition: color .15s var(--m3-std), transform .12s var(--m3-std); } .pp__set { display: grid; place-items: center; color: #e0e0e0; } .pp__set svg { width: 26px; height: 26px; }
.pp__spd:hover, .pp__set:hover { color: #fff; } .pp__spd:active, .pp__set:active { transform: scale(.92); }
.pp__skip { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #2a2a2c; color: #fff; transition: transform .12s var(--m3-std), background-color .15s var(--m3-std); }
.pp__skip svg { width: 36px; height: 36px; } .pp__skip b { position: absolute; font-size: 11px; font-weight: 700; margin-top: 3px; }
.pp__skip:hover, .pp__play:hover { background: #343437; } .pp__skip:active { transform: scale(.94); } .pp__skip.is-tap svg { animation: pp-spin .3s var(--m3-std); }
.pp__play { display: grid; place-items: center; width: 108px; height: 80px; border-radius: 40px; background: #2a2a2c; color: #fff; transition: border-radius .32s var(--m3-std), transform .12s var(--m3-std), background-color .15s var(--m3-std); } .pp__play.is-on { border-radius: 24px; } .pp__play:active { transform: scale(.96); }
.pp__play svg { grid-area: 1 / 1; width: 30px; height: 30px; transition: transform .2s var(--m3-std), opacity .15s var(--m3-std); }
.pp__i2, .pp__play.is-on .pp__i1 { opacity: 0; transform: scale(.5); } .pp__play.is-on .pp__i2 { opacity: 1; transform: none; }
.pp__menu { position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px; border-radius: 14px; background: #2a2a2c; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform-origin: 100% 100%; animation: pp-menu .2s var(--m3-dec); } .pp__menu[hidden] { display: none; }
.pp__menu button { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; white-space: nowrap; } .pp__menu button:hover { background: #3a3a3d; }
.pp__home { position: absolute; left: 50%; bottom: 20px; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: #fff; }
@keyframes pp-spin { to { transform: rotate(-360deg); } }
@keyframes pp-pin { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pp-menu { from { opacity: 0; transform: scale(.9); } }

/* Reduced motion: no autoplay loops or choreography; every control still works */
@media (prefers-reduced-motion: reduce) {
  .ix-pm *, .ix-ak *, .ix-tl *, .ix-sl *, .ix-pp *, .pm__scene { animation: none !important; transition-duration: .01s !important; }
  .pm__type { clip-path: none; }
}

/* ───────── 13 · Compose bars ───────── */
/* One iPhone-sized screen (393 x 852 pt) with a switch under it for the three looks. The controls are the real sizes:
   44pt icons and send button, 17pt text. */
.ix-cb { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.cb {
  --bar: #202020; --txt: #d8d8d8; --ph: #7a7a7a; --ic-bg: #2d2d2d; --ic: #a8a8a8; --snd-bg: #fff; --snd: #111; --msg-bg: #262626; --msg: #ececec;
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; width: 393px; height: 852px; padding: 0 12px 34px; border-radius: 55px; overflow: hidden; isolation: isolate; color: var(--txt);
  background: #131313; box-shadow: 0 0 0 10px #0a0a0a, 0 0 0 11px rgba(255, 255, 255, .12);
  font: 400 17px/1.35 -apple-system, "SF Pro Text", "Inter", "Geist", system-ui, sans-serif;
}
.cb[data-th="light"] { --bar: #e6e6e6; --txt: #1d1d1d; --ph: #7d7d7d; --ic-bg: #d6d6d6; --ic: #6a6a6a; --snd-bg: #000; --snd: #fff; --msg-bg: #e9e9e9; --msg: #1d1d1d; }
.cb[data-th="sun"] { --bar: rgba(122, 72, 44, .58); --txt: #fff; --ph: rgba(255, 255, 255, .72); --ic-bg: rgba(60, 30, 20, .34); --ic: rgba(255, 255, 255, .86); --snd-bg: #fff; --snd: #111; --msg-bg: rgba(255, 255, 255, .22); --msg: #fff; }
/* the three grounds are stacked and cross-fade: a gradient cannot be transitioned, a layer's opacity can */
.cb__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--m3-std); }
.cb__bg--dark { background: #131313; }
.cb__bg--light { background: #f5f5f5; }
.cb__bg--sun { background: linear-gradient(180deg, #05050f 0%, #25226f 36%, #5a46a8 55%, #e49a7e 82%, #f07f3c 100%), url("/assets/images/playground/sunset.jpg") center / cover; }
.cb[data-th="dark"] .cb__bg--dark, .cb[data-th="light"] .cb__bg--light, .cb[data-th="sun"] .cb__bg--sun { opacity: 1; }
.cb__status { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 52px; color: var(--txt); font-weight: 600; font-size: 17px; line-height: 1; transition: color .45s var(--m3-std); }
.cb__status span { display: flex; align-items: center; gap: 6px; }
.cb__status svg { display: block; height: 12px; width: auto; fill: currentColor; }
.cb__status svg:nth-child(3) { height: 13px; }
.cb__island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.cb__head { position: absolute; z-index: 1; top: 74px; left: 24px; right: 24px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; transition: color .45s var(--m3-std); }
.cb__head span { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.cb__head small { font-size: 15px; color: var(--ph); transition: color .45s var(--m3-std); }
.cb__feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 10px; padding: 6px 4px 16px; overflow: hidden; }
.cb__msg { margin: 0; max-width: 86%; padding: 11px 16px; border-radius: 22px 22px 7px 22px; background: var(--msg-bg); color: var(--msg); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; animation: cb-in .34s var(--m3-dec); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .45s var(--m3-std), color .45s var(--m3-std); }
.cb__bar { position: relative; flex: none; padding: 14px 14px 12px; border-radius: 32px; background: var(--bar); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background-color .45s var(--m3-std); }
.cb__in { display: block; width: 100%; min-height: 56px; max-height: 132px; padding: 4px 4px; border: 0; outline: 0; resize: none; background: none; color: var(--txt); font: 400 17px/1.4 -apple-system, "SF Pro Text", "Inter", "Geist", system-ui, sans-serif; caret-color: var(--txt); transition: opacity .2s var(--m3-std), color .45s var(--m3-std); }
.cb__in::placeholder { color: var(--ph); } .cb__in.is-busy { opacity: .45; animation: cb-pulse .7s var(--m3-std) infinite alternate; }
.cb__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cb__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ic-bg); color: var(--ic); transition: transform .12s var(--m3-std), opacity .2s var(--m3-std), color .2s var(--m3-std), background-color .45s var(--m3-std); }
.cb__ic svg { width: 22px; height: 22px; } .cb__ic:hover:not(:disabled) { color: var(--txt); } .cb__ic:active:not(:disabled) { transform: scale(.92); } .cb__ic:disabled { opacity: .45; cursor: default; }
.cb__magic.is-busy svg { animation: cb-spin .9s linear infinite; }
.cb__mic > span { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .2s var(--m3-std), opacity .15s var(--m3-std); }
.cb__i2 { display: flex !important; gap: 3px; align-items: center; opacity: 0; transform: scale(.5); } .cb__i2 i { width: 3px; height: 16px; border-radius: 2px; background: currentColor; transform: scaleY(.3); }
.cb__mic.is-on { color: #ff5a4d; } .cb__mic.is-on .cb__i1 { opacity: 0; transform: scale(.5); } .cb__mic.is-on .cb__i2 { opacity: 1; transform: none; }
.cb__mic.is-on .cb__i2 i { animation: cb-bar .6s var(--m3-std) infinite alternate; } .cb__i2 i:nth-child(2) { animation-delay: .1s !important; } .cb__i2 i:nth-child(3) { animation-delay: .2s !important; } .cb__i2 i:nth-child(4) { animation-delay: .3s !important; }
.cb__send { display: grid; place-items: center; width: 64px; height: 44px; margin-left: auto; border-radius: 22px; background: var(--snd-bg); color: var(--snd); transition: transform .12s var(--m3-std), opacity .2s var(--m3-std), background-color .45s var(--m3-std), color .45s var(--m3-std); }
.cb__send svg { width: 22px; height: 22px; } .cb__send:disabled { opacity: .5; cursor: default; } .cb__send:active:not(:disabled) { transform: scale(.94); }
.cb__home { position: absolute; z-index: 1; left: 50%; bottom: 9px; width: 140px; height: 5px; border-radius: 3px; background: var(--txt); opacity: .9; transform: translateX(-50%); pointer-events: none; transition: background-color .45s var(--m3-std); }
.cb:focus-within .cb__bar { box-shadow: 0 0 0 2px rgba(46, 139, 240, .55); }

/* the look switch: three 44pt targets under a sliding thumb */
.cb__switch { --i: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 288px; padding: 4px; border-radius: 26px; background: rgba(255, 255, 255, .1); }
.cb__thumb { position: absolute; left: 4px; top: 4px; width: calc((100% - 8px) / 3); height: calc(100% - 8px); border-radius: 22px; background: rgba(255, 255, 255, .94); transform: translateX(calc(var(--i) * 100%)); transition: transform .32s var(--m3-std); }
.cb__switch button { position: relative; height: 44px; border-radius: 22px; color: rgba(255, 255, 255, .72); font: 500 15px/1 -apple-system, "SF Pro Text", "Inter", "Geist", system-ui, sans-serif; transition: color .25s var(--m3-std); }
.cb__switch button[aria-checked="true"] { color: #111; }
.cb__switch button:focus-visible { outline: 2px solid #2E8BF0; outline-offset: 2px; }
@keyframes cb-in { from { opacity: 0; transform: translateY(36px) scale(.96); } }
@keyframes cb-spin { to { transform: rotate(360deg); } } @keyframes cb-pulse { to { opacity: .8; } } @keyframes cb-bar { to { transform: scaleY(1); } }

/* ───────── 15 · Empty state ───────── */
.ix-es { --px: 0; --py: 0; }
.es__card { position: relative; width: 640px; height: 640px; border-radius: 30px; background: #0d0d0d; box-shadow: inset 0 0 0 1px #1d1d1d; overflow: hidden; color: #fff; text-align: center; }
.es__stage { position: absolute; left: 20px; right: 20px; top: 100px; height: 330px; }
.es__stack { position: absolute; left: 50%; top: 94px; width: 300px; height: 190px; margin-left: -150px; perspective: 800px; cursor: pointer; transform: translate(calc(var(--px) * 6px), calc(var(--py) * 4px)); transition: transform .5s var(--m3-std); }
.es__win { position: absolute; left: 50%; top: 0; width: 220px; height: 150px; margin-left: -110px; border-radius: 14px; background: #1a1a1a; box-shadow: inset 0 0 0 1px #2a2a2a; transition: transform .55s var(--m3-std), background-color .4s var(--m3-std), opacity .4s; }
.es__win::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: #2c2c2c; }
.es__win i { position: absolute; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #3b3b3b; } .es__win i:nth-child(1) { left: 12px; } .es__win i:nth-child(2) { left: 24px; } .es__win i:nth-child(3) { left: 36px; }
.es__win[data-role="0"] { z-index: 1; background: #161616; transform: translate(-96px, 52px) rotate(-8deg); }
.es__win[data-role="1"] { z-index: 2; background: #1c1c1c; transform: translate(-6px, -4px) rotate(3deg); }
.es__win[data-role="2"] { z-index: 3; background: #232323; transform: translate(34px, 52px) rotate(-3deg); }
.es__stack:hover .es__win[data-role="0"] { transform: translate(-108px, 56px) rotate(-10deg); } .es__stack:hover .es__win[data-role="2"] { transform: translate(46px, 56px) rotate(-1deg); }
.es__stack:active .es__win { transition-duration: .15s; }
.es__stack:focus-visible { outline: 2px solid #2E8BF0; outline-offset: 8px; border-radius: 14px; }
.es__g { position: absolute; display: block; width: 40px; height: 40px; transform: translate(calc(var(--px) * var(--d) * -12px), calc(var(--py) * var(--d) * -9px)) rotate(var(--r)); transition: transform .6s var(--m3-std); animation: es-bob 4s steps(1) infinite; animation-delay: calc(var(--i) * -.7s); }
.es__g svg { display: block; width: 100%; height: 100%; fill: var(--c); } .es__g.is-hop svg { animation: es-hop .45s steps(4) 1; }
.es__msg { position: absolute; left: 0; right: 0; top: 440px; margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.es__sub { position: absolute; left: 0; right: 0; top: 480px; margin: 0; font-size: 18px; color: #757575; }
.es__sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: opacity .15s var(--m3-std); } .es__sub a:hover { opacity: .7; } .es__sub a:focus-visible { outline: 2px solid #2E8BF0; outline-offset: 3px; }
.es__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 38px; background: #1a1a1a; font-size: 22px; } .es__foot span:last-child { color: #7b7b7b; }
@keyframes es-bob { 0%, 50% { margin-top: 0; } 51%, 100% { margin-top: 3px; } }
@keyframes es-hop { 25% { transform: translateY(-9px); } 50% { transform: translateY(-14px); } 75% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .ix-cb *, .ix-es * , .ix-es .es__g { animation: none !important; transition-duration: .01s !important; }
}

/* ───────── Branding tiles: the artwork, contained, on a tint taken from it ───────── */
.lab__stage--img { padding: 0 var(--space-5); }
.lab__stage--img img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.22)); transition: transform .5s var(--ease-out); }
.lab__tile:hover .lab__stage--img img { transform: scale(1.02); }
.pgx__img { position: absolute; inset: var(--space-6); width: calc(100% - 2 * var(--space-6)); height: calc(100% - 2 * var(--space-6)); object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
@media (prefers-reduced-motion: reduce) { .lab__stage--img img { transition: none; } .lab__tile:hover .lab__stage--img img { transform: none; } }

/* ───────── 16 · Trade ticket ───────── */
.lab__tile--tall { grid-row: span 2; }
.tt { position: absolute; inset: 0; overflow: hidden; background: #000; }
@keyframes tt-in { from { opacity: 0; transform: translateY(14px); } }
.ix-tt { --g: #4be3a0; --dn: #ff7b7b; --sans: "Inter", -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.ix-tt * { box-sizing: border-box; } .ix-tt button { font-family: var(--sans); } .ix-tt button:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.ix-tt > * { animation: tt-in .6s var(--ease-out) backwards; } .ix-tt > :nth-child(2) { animation-delay: 80ms; } .ix-tt > :nth-child(3) { animation-delay: 160ms; } .ix-tt > :nth-child(4) { animation-delay: 240ms; }
.tt__top { display: flex; align-items: center; gap: 20px; height: 92px; padding: 0 12px; }
.tt__ico { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.3); } .tt__ico svg { width: 28px; height: 28px; }
.tt__who h4 { margin: 0; font: 500 32px/1.1 var(--sans); letter-spacing: -.01em; } .tt__who h4 i { font-style: normal; font-weight: 400; color: #7d7d7d; margin-left: 6px; }
.tt__who p { margin: 6px 0 0; font: 400 20px/1.2 var(--mono); color: #6c6c6c; }
.tt__px { margin-left: auto; text-align: right; } .tt__px b { display: block; font: 500 52px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tt__px span { display: block; margin-top: 6px; font: 400 22px/1 var(--mono); color: var(--g); transition: color .4s var(--ease-out); } .tt__px.is-dn span { color: var(--dn); }
.tt__card { flex: none; border-radius: 28px; background: #181818; box-shadow: 0 0 0 1px rgba(255,255,255,.06); transition: opacity .3s var(--ease-out); }
.tt__card[data-s="locked"] { opacity: .42; }
.tt__head { display: flex; align-items: center; gap: 20px; height: 88px; padding: 0 28px; }
.tt__head h5 { margin: 0; font: 500 26px/1.1 var(--sans); } .tt__head p { margin: 4px 0 0; font: 400 20px/1.2 var(--sans); color: #7d7d7d; }
.tt__n { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.28); color: #8a8a8a; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); }
.tt__n em { font: 500 21px/1 var(--mono); font-style: normal; transition: opacity .15s var(--ease-out); }
.tt__n svg { position: absolute; width: 26px; height: 26px; } .tt__ck { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s var(--ease-out) .08s; }
.tt__card[data-s="active"] .tt__n { border: 2px solid var(--g); color: var(--g); }
.tt__card[data-s="done"] .tt__n { background: var(--g); border-color: var(--g); color: #0b0b0b; } .tt__card[data-s="done"] .tt__n em { opacity: 0; } .tt__card[data-s="done"] .tt__n .tt__ck { stroke-dashoffset: 0; }
.tt__sum { margin-left: auto; font: 400 20px/1 var(--mono); color: #8a8a8a; opacity: 0; transform: translateX(8px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.tt__card[data-s="done"] .tt__sum { opacity: 1; transform: none; color: var(--g); }
.tt__edit { display: none; padding: 10px 16px; border: 0; border-radius: 9px; background: #2d2d2d; color: #fff; font: 500 18px/1 var(--mono); cursor: pointer; transition: transform .16s var(--ease-out), background-color .2s var(--ease-out); } .tt__edit:active { transform: scale(.96); }
.tt__card[data-s="done"] .tt__edit { display: inline-block; }
.tt__fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-drawer); }
.tt__card[data-s="active"] .tt__fold, .tt__card:has(.tt__body.is-filled) .tt__fold { grid-template-rows: 1fr; }
.tt__fi { min-height: 0; overflow: hidden; }
.tt__body { position: relative; display: flex; flex-direction: column; height: 440px; margin: 0 8px 8px; padding: 28px 32px 24px; border-radius: 20px; background: #1f1f1f; opacity: 0; transform: translateY(8px); transition: opacity .15s linear, transform .15s var(--ease-out); }
.tt__card[data-s="active"] .tt__body, .tt__body.is-filled { opacity: 1; transform: none; transition: opacity .3s var(--ease-out) .12s, transform .3s var(--ease-out) .12s; }
.tt__rev { display: flex; flex-direction: column; flex: 1; min-height: 0; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), filter .3s var(--ease-out); }
.tt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; flex: 1; min-height: 0; } .tt__rev .tt__cols { flex: 1; }
.tt__col { position: relative; min-width: 0; }
.tt__lab { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font-size: 20px; line-height: 1; color: #a9a9a9; }
.tt__lab em, .tt__lab strong { font: 400 20px/1 var(--mono); font-style: normal; } .tt__lab em { color: #5c5c5c; } .tt__lab strong { color: var(--g); font-weight: 400; font-variant-numeric: tabular-nums; }
.tt__seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 56px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #0b0b0b; }
.tt__thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: #2d2d2d; transition: transform .28s var(--ease-drawer); }
.tt__seg button { position: relative; border: 0; background: none; color: #8d8d8d; font: 500 20px/1 var(--sans); cursor: pointer; transition: color .2s var(--ease-out), transform .16s var(--ease-out); } .tt__seg button[aria-checked="true"] { color: #fff; } .tt__seg button:active { transform: scale(.97); }
.tt__step { display: grid; grid-template-columns: 72px 1fr 72px; height: 64px; border-radius: 14px; overflow: hidden; background: #0b0b0b; }
.tt__step button { display: grid; place-items: center; border: 0; background: #2d2d2d; color: #fff; cursor: pointer; transition: background-color .15s var(--ease-out), opacity .2s var(--ease-out); }
.tt__step button svg { width: 24px; height: 24px; transition: scale .12s var(--ease-out); } .tt__step button:active:not(:disabled) { background: #3a3a3a; } .tt__step button:active:not(:disabled) svg { scale: .78; }
.tt__step button:disabled { opacity: .35; cursor: default; } .tt__step button:focus-visible { outline-offset: -2px; }
.tt__step output { display: flex; align-items: baseline; justify-content: center; gap: 10px; align-self: center; font: 500 30px/1 var(--mono); font-variant-numeric: tabular-nums; } .tt__step output u { font: 400 20px/1 var(--mono); text-decoration: none; color: #7a7a7a; }
.tt__cost { margin-top: 14px; } .tt__cost > div:first-child { display: flex; align-items: baseline; gap: 14px; } .tt__cost b { font: 500 40px/1 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: color .2s var(--ease-out); } .tt__cost span { font: 400 20px/1 var(--mono); color: #7a7a7a; }
.tt__meter { height: 8px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: #0b0b0b; } .tt__meter i { display: block; height: 100%; background: var(--g); transform-origin: 0 50%; transition: background-color .2s var(--ease-out); }
.tt__cost p { margin: 8px 0 0; font: 400 20px/1 var(--mono); color: #7a7a7a; transition: color .2s var(--ease-out); }
.tt__card.is-over .tt__meter i { background: var(--dn); } .tt__card.is-over [data-cost], .tt__card.is-over [data-bp] { color: var(--dn); } .tt__card.is-over [data-go="0"] { opacity: .4; pointer-events: none; }
.tt__col--z > * { transition: opacity .25s var(--ease-out); } .tt__col--z.is-off > :not(.tt__mk) { opacity: .16; pointer-events: none; }
.tt__hist { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 124px; }
.tt__hist i { flex: 1; border-radius: 2px 2px 0 0; background: #2b2b2b; transition: background-color .15s var(--ease-out); } .tt__hist i.is-in { background: #2f8a62; }
.tt__hist i.tt__now { position: absolute; left: 0; top: 0; bottom: 0; flex: none; width: 0; border-radius: 0; border-left: 2px dashed rgba(255,255,255,.55); background: none; will-change: transform; }
.tt__now::after { content: "now"; position: absolute; left: 8px; top: -2px; font: 400 16px/1 var(--mono); color: #9a9a9a; }
.tt__rng { position: relative; height: 44px; margin: 4px 0 6px; cursor: pointer; touch-action: none; }
.tt__tk { position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 4px; background: #0b0b0b; }
.tt__rf { position: absolute; left: 0; top: 10px; width: 496px; height: 8px; border-radius: 4px; background: var(--g); transform-origin: 0 50%; will-change: transform; }
.tt__hd { position: absolute; left: -14px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, var(--g) 0 5.5px, #f4f4f4 6px); box-shadow: 0 3px 10px rgba(0,0,0,.5); will-change: transform; scale: 1; transition: scale .16s var(--ease-out), box-shadow .2s var(--ease-out); outline: none; }
.tt__hd:focus-visible { box-shadow: 0 0 0 3px rgba(75,227,160,.55), 0 3px 10px rgba(0,0,0,.5); }
.tt__rng.is-drag[data-on="lo"] [data-h="lo"], .tt__rng.is-drag[data-on="hi"] [data-h="hi"] { scale: 1.2; }
.tt__ax { display: flex; justify-content: space-between; font: 400 17px/1 var(--mono); color: #5c5c5c; }
.tt__mk { position: absolute; inset: 40px 0 0; display: grid; place-items: center; padding: 0 36px; text-align: center; font: 400 22px/1.35 var(--sans); color: #9a9a9a; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); } .tt__col--z.is-off .tt__mk { opacity: 1; }
.tt__read { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; } .tt__read b { font: 500 44px/1 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .tt__read span { font: 400 22px/1 var(--mono); color: var(--g); }
.tt__pad { position: relative; height: 200px; border-radius: 16px; overflow: hidden; background: #0b0b0b radial-gradient(rgba(255,255,255,.075) 1.2px, transparent 1.7px) 12px 12px / 24px 24px; cursor: crosshair; touch-action: none; outline: none; }
.tt__pad:focus-visible { box-shadow: inset 0 0 0 2px var(--g); }
.tt__vx, .tt__hy, .tt__rk, .tt__rw { position: absolute; pointer-events: none; will-change: transform; }
.tt__vx { left: 0; top: 0; width: 0; height: 100%; border-left: 2px dashed rgba(75,227,160,.5); margin-left: -1px; } .tt__hy { left: 0; top: 0; height: 0; width: 100%; border-top: 2px dashed rgba(75,227,160,.5); margin-top: -1px; }
.tt__rk { left: 0; bottom: 0; height: 5px; width: 100%; background: var(--dn); transform-origin: 0 50%; opacity: .9; } .tt__rw { left: 0; bottom: 0; width: 5px; height: 100%; background: var(--g); transform-origin: 50% 100%; opacity: .9; }
.tt__c { position: absolute; font: 400 18px/1 var(--mono); color: #55555a; pointer-events: none; } .tt__c--tl { left: 18px; top: 14px; } .tt__c--bl { left: 18px; bottom: 16px; } .tt__c--br { right: 14px; bottom: 16px; }
.tt__puck { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.tt__halo { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; background: rgba(75,227,160,.14); transition: transform .3s var(--ease-out), background-color .3s var(--ease-out); }
.tt__dot { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, var(--g) 0 5.5px, #fff 6px); box-shadow: 0 4px 12px rgba(0,0,0,.45); transition: scale .16s var(--ease-out); }
.tt__pad.is-drag .tt__halo { transform: scale(1.45); background: rgba(75,227,160,.22); } .tt__pad.is-drag .tt__dot { scale: 1.14; }
.tt__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.tt__stats > div { padding: 16px 18px; border-radius: 14px; background: #0b0b0b; } .tt__stats span { display: block; font: 400 19px/1 var(--sans); color: #8d8d8d; }
.tt__stats b { display: block; margin-top: 10px; font: 500 30px/1 var(--mono); font-variant-numeric: tabular-nums; } .tt__stats em { display: block; margin-top: 8px; font: 400 20px/1 var(--mono); font-style: normal; color: #6c6c6c; }
.tt__stats b.is-dn { color: var(--dn); } .tt__stats b.is-up { color: var(--g); } .tt__stats--s { margin: 18px 0 0; } .tt__stats--s b { font-size: 26px; }
.tt__row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 76px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 14px; background: #0b0b0b; color: #fff; text-align: left; cursor: pointer; transition: transform .16s var(--ease-out); }
.tt__row:first-of-type { margin-top: 0; } .tt__row:active { transform: scale(.985); }
.tt__row b { display: block; font: 500 22px/1.15 var(--sans); } .tt__row em { display: block; margin-top: 3px; font: 400 19px/1.15 var(--sans); font-style: normal; color: #8b8b8b; }
.tt__sw { position: relative; flex: none; width: 64px; height: 36px; border-radius: 18px; background: #3b3b3b; transition: background-color .2s var(--ease-out); }
.tt__sw i { position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #8d8d8d; transition: transform .25s var(--ease-out), background-color .2s var(--ease-out); } .tt__row:active .tt__sw i { scale: 1.1; }
.tt__row[aria-checked="true"] .tt__sw { background: var(--g); } .tt__row[aria-checked="true"] .tt__sw i { transform: translateX(28px); background: #0a0a0a; }
.tt__list { margin: 0; } .tt__list > div { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #2c2c2c; font-size: 22px; line-height: 1.1; } .tt__list > div:first-child { padding-top: 0; } .tt__list dt { color: #8d8d8d; } .tt__list dd { margin: 0; font: 500 21px/1.1 var(--mono); }
.tt__col--t { display: flex; flex-direction: column; } .tt__lab2 { margin: 0; font-size: 20px; color: #a9a9a9; } .tt__total { margin: 10px 0 0; font: 500 64px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tt__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 20px; } .tt__foot p { margin: 0; font: 400 20px/1.3 var(--mono); color: #6f6f6f; }
.tt__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; min-width: 340px; height: 60px; padding: 0 28px; border: 0; border-radius: 12px; overflow: hidden; background: #2d2d2d; color: #fff; font: 500 22px/1 var(--sans); cursor: pointer; transition: transform .16s var(--ease-out), background-color .2s var(--ease-out), opacity .2s var(--ease-out); }
.tt__btn:active { transform: scale(.97); } .tt__btn svg { width: 22px; height: 22px; } .tt__btn--p { background: #f2f2f2; color: #0b0b0b; }
.tt__fill { position: absolute; inset: 0; background: var(--g); transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s var(--ease-out); } .tt__btn--hold span { position: relative; }
.tt__btn--hold.is-hold .tt__fill { transform: scaleX(1); transition: transform 1.2s linear; }
.tt__ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.tt__ok h5 { margin: 6px 0 0; font: 500 36px/1.1 var(--sans); } .tt__okm { margin: 0; font: 500 32px/1.1 var(--mono); } .tt__okn { margin: 0 0 12px; font: 400 20px/1.4 var(--mono); color: #8d8d8d; }
.tt__okc { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--g); color: #0b0b0b; scale: .6; transition: scale .5s var(--ease-out) .1s; } .tt__okc svg { width: 46px; height: 46px; }
.tt__body.is-filled .tt__ok { opacity: 1; pointer-events: auto; transform: none; transition: opacity .35s var(--ease-out) .15s, transform .35s var(--ease-out) .15s; }
.tt__body.is-filled .tt__okc { scale: 1; } .tt__body.is-filled .tt__okc .tt__ck { stroke-dashoffset: 0; transition-delay: .35s; }
.tt__body.is-filled .tt__rev { opacity: 0; transform: translateY(-10px); filter: blur(2px); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .tt__btn:hover { background: #383838; } .tt__btn--p:hover { background: #fff; } .tt__edit:hover { background: #383838; }
  .tt__step button:hover:not(:disabled) { background: #363636; } .tt__seg button:hover { color: #fff; } .tt__row:hover { background: #121212; } .tt__pad:hover .tt__halo { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-tt > * { animation: none; } .tt__fold, .tt__thumb, .tt__halo, .tt__dot, .tt__hd, .tt__sw i, .tt__okc, .tt__ck, .tt__fill { transition: none; }
  .tt__body, .tt__ok, .tt__rev, .tt__sum { transition-property: opacity; transform: none !important; } .tt__btn, .tt__row, .tt__edit, .tt__seg button { transition-property: background-color, color, opacity; }
}

/* ───────── 17 · Motion lab ─────────
   Built from docs/DESIGN.md: greyscale ramp as bare RGB channels, mono caps for every label and button,
   4px controls and 8px panels, fills and space instead of borders and shadows, one frost level for hover,
   a 2px yellow focus ring, quiet motion on the standard ease. The lab follows the page theme; in the board tile it is dark. */
.ix-ml {
  --ink: 4 4 4; --paper: var(--greyscale-100);
  --ml-bg: rgb(var(--greyscale-100));
  --ml-panel: rgb(var(--greyscale-200) / .5);
  --ml-card: rgb(var(--greyscale-900) / .05);
  --ml-hover: rgb(var(--greyscale-900) / .1);
  --ml-field: rgb(var(--greyscale-900) / .05);
  --ml-frost: rgb(var(--greyscale-white) / .8);
  --ml-text: rgb(var(--greyscale-black));
  --ml-mute: rgb(var(--greyscale-900));
  --ml-line: rgb(var(--greyscale-900) / .2);
  --ml-solid: rgb(var(--greyscale-black));
  --ml-solid-fg: rgb(var(--greyscale-white));
  --ml-focus: rgb(var(--accent-yellow));
  --ml-mono: var(--font-mono, "Geist Mono", monospace);
  --ml-ntype: var(--font-ntype, "Instrument Sans", sans-serif);
  --ml-std: cubic-bezier(.4, 0, .2, 1);
  --ml-expr: cubic-bezier(.74, 0, .19, .99);
  display: grid; grid-template-rows: 56px minmax(0, 1fr); gap: var(--space-2, 8px); padding: var(--space-2, 8px);
  background: var(--ml-bg); color: var(--ml-text); font: 400 14px/1.4 var(--font-body, "Geist", sans-serif);
  -webkit-font-smoothing: antialiased;
}
.ix-ml[data-mode="dark"] {
  --ml-bg: rgb(var(--greyscale-black));
  --ml-panel: rgb(var(--greyscale-dm-light));
  --ml-card: rgb(var(--greyscale-white) / .05);
  --ml-hover: rgb(var(--greyscale-white) / .1);
  --ml-field: rgb(var(--greyscale-1000) / .6);
  --ml-frost: rgb(var(--greyscale-900) / .6);
  --ml-text: rgb(var(--greyscale-white));
  --ml-mute: rgb(var(--greyscale-default));
  --ml-line: rgb(var(--greyscale-white) / .16);
  --ml-solid: rgb(var(--greyscale-white));
  --ml-solid-fg: rgb(var(--greyscale-black));
}
.ix-ml * { box-sizing: border-box; }
.ix-ml :focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.ix-ml :is(.ml__icon, .ml__btn, .ml__chip, .ml__nav, .ml__card, .ml__cell):focus-visible { outline-offset: -2px; }
.ix-ml :is(button, a, label, select) { -webkit-tap-highlight-color: transparent; }

/* the labels: Geist Mono, uppercase, 12px (§3.4) */
.ml__eyebrow, .ml__lab, .ml__group, .ml__sechead, .ml__btn, .ml__chip, .ml__nav, .ml__row > span, .ml__check, .ml__sel, .ml__cardlab, .ml__cell span, .ml__keys, .ml__foot, .ml__tabs button, .ml__state, .ml__top output {
  font-family: var(--ml-mono); text-transform: uppercase; letter-spacing: 0; line-height: 1.25;
}

/* ── top bar: the nav pill's frost, 8px radius ── */
.ml__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); padding: 0 var(--space-2, 8px) 0 var(--space-3, 12px);
  border-radius: 8px; background: var(--ml-frost); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); white-space: nowrap; min-width: 0;
}
.ml__brand, .ml__ctl, .ml__end { display: flex; align-items: center; gap: var(--space-3, 12px); min-width: 0; }
.ml__brand { gap: var(--space-2, 8px); }
.ml__eyebrow { font: 800 14px/1 var(--font-ndot, "Doto", monospace); letter-spacing: .02em; }
.ml__state { font-size: 12px; color: var(--ml-mute); }
.ml__knobs { display: flex; gap: var(--space-4, 16px); }
.ml__top .ml__row { display: flex; align-items: center; gap: var(--space-2, 8px); font-size: 12px; color: var(--ml-mute); }
.ml__top .ml__row input { width: 72px; }
.ml__top output { min-width: 32px; font-size: 12px; color: var(--ml-text); }

.ml__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 4px; background: transparent; color: var(--ml-text); text-decoration: none;
  transition: background-color .2s var(--ml-std), opacity .2s var(--ml-std), transform .15s var(--ml-std);
}
.ml__icon svg { width: 16px; height: 16px; }
.ml__icon[data-play] svg { width: 12px; height: 12px; }
.ml__icon:disabled { opacity: .4; cursor: not-allowed; }
.ml__pair { display: flex; }

/* buttons (§9.2): 40px, 4px radius, mono caps, trailing chevron. Primary inverts with the theme; ghost is one frost level. */
.ml__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); height: 40px; padding: 0 var(--space-4, 16px); border: 0; border-radius: 4px;
  background: var(--ml-solid); color: var(--ml-solid-fg); font-size: 12px; font-weight: 400; white-space: nowrap; cursor: pointer;
  transition: opacity .2s var(--ml-std), background-color .2s var(--ml-std), transform .15s var(--ml-std);
}
.ml__btn svg { width: 16px; height: 16px; flex: none; }
.ml__btn--ghost { background: var(--ml-card); color: var(--ml-text); }
.ml__btn--full { width: 100%; margin-top: var(--space-2, 8px); }
.ml__btn:disabled { opacity: .4; cursor: not-allowed; }
.ml__btn:not(:disabled):active, .ml__icon:not(:disabled):active, .ml__chip:active { transform: scale(.97); }

.ml__sel { position: relative; display: flex; align-items: center; gap: var(--space-2, 8px); font-size: 12px; color: var(--ml-mute); }
.ml__sel select, .ml__row--sel select {
  appearance: none; -webkit-appearance: none; min-width: 104px; height: 40px; padding: 0 32px 0 var(--space-3, 12px); border: 0; border-radius: 4px; background-color: var(--ml-field); color: var(--ml-text);
  font: 400 12px/1.25 var(--ml-mono); text-transform: uppercase; cursor: pointer; transition: background-color .2s var(--ml-std);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.500l3 3 3-3' fill='none' stroke='%23999' stroke-width='1.200'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 8px;
}
.ml__sel select option, .ml__row--sel select option { background: #181818; color: #fff; }
.ml__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* colour swatches: square, 4px; the chosen one is outlined by a ring of the ground */
.ml__sw { display: flex; gap: var(--space-2, 8px); padding: 0 var(--space-1, 4px); }
.ml__sw button { width: 16px; height: 16px; border-radius: 4px; background: var(--c); transition: box-shadow .2s var(--ml-std); }
.ml__sw button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ml-bg), 0 0 0 3.5px var(--ml-text); }

/* ── the three panels: 8px apart, 8px radius, a fill and no border ── */
.ml__body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: var(--space-2, 8px); min-height: 0; }
.ml__side, .ml__main, .ml__panel { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ml-line) transparent; border-radius: 8px; background: var(--ml-panel); }
.ml__side { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2, 8px); }
.ml__group { margin: var(--space-4, 16px) var(--space-2, 8px) var(--space-2, 8px); font-size: 12px; color: var(--ml-mute); }
.ml__group:first-of-type { margin-top: var(--space-3, 12px); }
.ml__nav { display: flex; align-items: center; gap: var(--space-3, 12px); width: 100%; min-height: 40px; padding: 0 var(--space-2, 8px); border-radius: 4px; text-align: left; font-size: 12px; color: var(--ml-text); transition: background-color .2s var(--ml-std); }
.ml__nav[aria-pressed="true"] { background: var(--ml-card); }
.ml__nav canvas, .ml__allico { flex: none; }
.ml__allico { display: grid; place-items: center; width: 22px; height: 22px; }
.ml__allico i { width: 8px; height: 8px; background: currentColor; }
.ml__navt { display: block; }
.ml__navt small { display: block; margin-top: 2px; font: 400 12px/1.25 var(--ml-mono); color: var(--ml-mute); text-transform: none; }

.ml__main { padding: var(--space-5, 24px); }
.ix-ml[data-bg="grid"] .ml__main { background-image: radial-gradient(circle at center, var(--ml-line) 1px, transparent 1.500px); background-size: 20px 20px; background-position: 10px 10px; }
.ml__main.is-trail { overflow: hidden; padding: 0; }
.ml__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2, 8px); }
.ml__card { position: relative; display: grid; place-items: center; height: 124px; border-radius: 8px; background: var(--ml-card); transition: background-color .2s var(--ml-std); }
.ml__card canvas { margin-top: var(--space-3, 12px); }
.ml__cardlab { position: absolute; left: var(--space-3, 12px); top: var(--space-3, 12px); font-size: 12px; color: var(--ml-mute); }
.ml__sec { margin-top: var(--space-6, 32px); padding-top: var(--space-4, 16px); border-top: 1px solid var(--ml-line); }
.ml__sechead { display: flex; justify-content: space-between; gap: var(--space-4, 16px); margin-bottom: var(--space-4, 16px); font-size: 12px; color: var(--ml-mute); }
.ml__swatchgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2, 8px); }
.ml__cell { display: grid; justify-items: center; gap: var(--space-1, 4px); padding: var(--space-2, 8px) 0; border-radius: 4px; transition: background-color .2s var(--ml-std); }
.ml__cell.is-on { background: var(--ml-card); }
.ml__cell span { font-size: 12px; color: var(--ml-mute); }
.ml__hero { position: relative; display: grid; place-items: center; height: 262px; }
.ml__hero > canvas { touch-action: none; }
.ml__sizes { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--space-4, 16px); }
.ml__sizes figure { display: grid; justify-items: center; gap: var(--space-1, 4px); margin: 0; }
.ml__sizes figcaption, .ml__foot { font-size: 12px; color: var(--ml-mute); }
.ml__foot { margin: var(--space-2, 8px) 0 0; }
.ml__trail { position: relative; height: 100%; }
.ml__trail canvas { display: block; cursor: crosshair; touch-action: none; }
.ml__hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 12px/1.25 var(--ml-mono); text-transform: uppercase; color: var(--ml-mute); pointer-events: none; transition: opacity .3s var(--ml-std); }
.ml__trail.has-ink .ml__hint { opacity: 0; }
.ml__scrub { margin-top: var(--space-3, 12px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3, 12px); }
.ml__scrub input { grid-row: auto; grid-column: auto; }

/* ── right panel ── */
.ml__panel { padding: var(--space-5, 24px) var(--space-4, 16px); }
.ml__panel h3 { margin: 0 0 var(--space-2, 8px); font: 400 24px/1.1 var(--ml-ntype); letter-spacing: 0; }
.ml__desc { margin: 0 0 var(--space-4, 16px); font-size: 14px; line-height: 1.4; color: var(--ml-mute); }
.ml__desc b { font-weight: 500; color: var(--ml-text); }
.ml__lab { margin: var(--space-5, 24px) 0 var(--space-3, 12px); font-size: 12px; color: var(--ml-mute); }
.ml__panel .ml__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2, 8px) var(--space-2, 8px); margin-bottom: var(--space-3, 12px); }
.ml__panel .ml__row > span { font-size: 12px; }
.ml__panel .ml__row input[type="range"] { grid-row: 2; grid-column: 1 / -1; }
.ml__panel output { font-size: 12px; color: var(--ml-mute); }
.ml__row--sel { grid-template-columns: 1fr auto !important; align-items: center; }
.ml__row--sel select { min-width: 132px; }
.ml__row--text { grid-template-columns: 1fr !important; }
.ml__text { width: 100%; height: 40px; padding: 0 var(--space-3, 12px); border: 0; border-radius: 4px; background: var(--ml-field); color: var(--ml-text); font: 400 12px/1.25 var(--ml-mono); text-transform: uppercase; -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); }
.ml__text::placeholder { color: var(--ml-mute); }
.ml__save { display: flex; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.ml__save .ml__text { flex: 1; min-width: 0; }

/* chips (§9.12): mono caps, 4px radius, a 1px inset outline */
.ml__chips { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.ml__chipwrap { display: inline-flex; }
.ml__chip { height: 32px; padding: 0 var(--space-3, 12px); border-radius: 4px; background: transparent; color: var(--ml-text); font-size: 12px; box-shadow: inset 0 0 0 1px var(--ml-line); transition: background-color .2s var(--ml-std), transform .15s var(--ml-std); }
.ml__chipwrap .ml__chip:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ml__chipx { width: 28px; height: 32px; border-radius: 0 4px 4px 0; background: transparent; color: var(--ml-mute); font: 400 14px/1 var(--ml-mono); box-shadow: inset 0 0 0 1px var(--ml-line); transition: background-color .2s var(--ml-std), color .2s var(--ml-std); }
.ml__chipx:focus-visible { outline-offset: -2px; }

/* palette: six square wells over native colour inputs */
.ml__pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2, 8px); margin-bottom: var(--space-4, 16px); }
.ml__well { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; background: var(--c); cursor: pointer; transition: opacity .2s var(--ml-std); }
.ml__well input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ml__well:focus-within { outline: 2px solid var(--ml-focus); outline-offset: 2px; }

/* checkboxes (§9.3): 18px, 4px radius, the same frost fill */
.ml__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px) var(--space-2, 8px); margin-bottom: var(--space-3, 12px); }
.ml__check { display: flex; align-items: center; gap: var(--space-2, 8px); font-size: 12px; cursor: pointer; }
.ml__check--wide { margin-bottom: var(--space-3, 12px); }
.ml__check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 0; border-radius: 4px; background: var(--ml-field); cursor: pointer;
  background-position: center; background-repeat: no-repeat; background-size: 12px; transition: background-color .2s var(--ml-std);
}
.ml__check input:checked { background-color: var(--ml-solid); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.500 6.200l2.400 2.400 4.600-5' fill='none' stroke='%23888' stroke-width='1.800'/%3E%3C/svg%3E"); }
.ix-ml[data-mode="dark"] .ml__check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.500 6.200l2.400 2.400 4.600-5' fill='none' stroke='%23040404' stroke-width='1.800'/%3E%3C/svg%3E"); }
.ix-ml:not([data-mode="dark"]) .ml__check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.500 6.200l2.400 2.400 4.600-5' fill='none' stroke='%23fff' stroke-width='1.800'/%3E%3C/svg%3E"); }

.ml__keys { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2, 8px) var(--space-3, 12px); margin: 0 0 var(--space-3, 12px); font-size: 12px; }
.ml__keys dt { color: var(--ml-text); }
.ml__keys dd { margin: 0; color: var(--ml-mute); text-transform: none; }
.ml__tip { margin-top: var(--space-4, 16px); }

/* sliders: a 2px track and a small square handle, no round pill */
.ix-ml input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.ix-ml input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--ml-text), var(--ml-text)) 0 / var(--p) 100% no-repeat, var(--ml-line); }
.ix-ml input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 16px; margin-top: -7px; border: 0; border-radius: 2px; background: var(--ml-text); }
.ix-ml input[type="range"]::-moz-range-track { height: 2px; background: var(--ml-line); }
.ix-ml input[type="range"]::-moz-range-progress { height: 2px; background: var(--ml-text); }
.ix-ml input[type="range"]::-moz-range-thumb { width: 6px; height: 16px; border: 0; border-radius: 2px; background: var(--ml-text); }

/* ── export: a frost sheet over the panels, 8px radius, no shadow ── */
.ml__sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: var(--space-6, 32px); background: rgb(var(--greyscale-black) / .5); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); }
.ml__sheet[hidden] { display: none; }
.ml__sheetin { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; width: min(920px, 100%); height: min(640px, 100%); padding: var(--space-5, 24px); border-radius: 8px; background: var(--ml-panel); animation: ml-sheet .3s var(--ml-expr) both; }
.ix-ml:not([data-mode="dark"]) .ml__sheetin { background: rgb(var(--greyscale-100)); }
@keyframes ml-sheet { from { opacity: 0; transform: translateY(8px); } }
.ml__sheethead { display: flex; align-items: center; gap: var(--space-4, 16px); }
.ml__sheethead h3 { margin: 0 auto 0 0; font: 400 24px/1.1 var(--ml-ntype); }
.ml__tabs { display: flex; gap: var(--space-2, 8px); margin: var(--space-4, 16px) 0 var(--space-3, 12px); }
.ml__tabs button { height: 32px; padding: 0 var(--space-3, 12px); border-radius: 4px; font-size: 12px; color: var(--ml-mute); box-shadow: inset 0 0 0 1px var(--ml-line); transition: background-color .2s var(--ml-std), color .2s var(--ml-std); }
.ml__tabs button[aria-selected="true"] { background: var(--ml-solid); color: var(--ml-solid-fg); box-shadow: none; }
.ml__xnote { margin-bottom: var(--space-3, 12px); }
.ml__code { margin: 0; padding: var(--space-4, 16px); overflow: auto; border-radius: 4px; background: var(--ml-card); font: 400 12px/1.6 var(--ml-mono); text-transform: none; tab-size: 2; white-space: pre; overscroll-behavior: contain; }
.ml__sheetfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); flex-wrap: wrap; }
.ml__sheetfoot > div { display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; }
.ml__media .ml__check { margin-right: var(--space-2, 8px); }

/* full page (/motion-lab): the lab is the page */
.ix-ml.is-full { position: fixed; inset: 0; width: auto; height: auto; transform: none; }
.ix-ml.is-full .ml__body { grid-template-columns: 220px minmax(0, 1fr) 300px; }
.ix-ml.is-full .ml__cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ix-ml.is-full .ml__top .ml__row input { width: 96px; }

@media (hover: hover) and (pointer: fine) {
  .ml__icon:not(:disabled):hover, .ml__nav:hover, .ml__cell:hover, .ml__card:hover { background: var(--ml-hover); }
  .ml__btn:not(:disabled):hover { opacity: .7; }
  .ml__chip:hover, .ml__chipx:hover { background: var(--ml-card); }
  .ml__tabs button:not([aria-selected="true"]):hover { color: var(--ml-text); }
  .ml__sel select:hover, .ml__row--sel select:hover { background-color: var(--ml-hover); }
  .ml__well:hover { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { .ix-ml * { transition: none !important; } .ml__sheetin { animation: none; } }
.ml__scrub > span { font-size: 12px; color: var(--ml-mute); }