.brand-lab { padding: clamp(3.5rem,6vw,6rem) 0 clamp(3.5rem,6vw,6rem); border-top: 1px solid var(--line); }
.brand-lab-heading { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(15rem,.65fr); gap: 2rem; align-items: end; }
.brand-lab-heading h2 { max-width: 18ch; margin-top: .6rem; font-size: clamp(2rem,3.2vw,3.15rem); line-height: 1.08; letter-spacing: -.055em; }
.brand-lab-heading > p { max-width: 25rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.brand-lab-form { margin-top: clamp(2rem,3vw,3rem); }
.brand-lab-form label { display: block; margin-bottom: .65rem; color: var(--ink); font-size: .78rem; font-weight: 720; }
.brand-lab-input-row { display: flex; width: 100%; min-height: 4.25rem; border: 1px solid #252a27; background: #fff; }
.brand-lab-input-row:focus-within { outline: 2px solid #586f65; outline-offset: 3px; }
.brand-lab-input-row input { flex: 1; min-width: 0; padding: .9rem 1.1rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(.92rem,1.25vw,1.07rem); }
.brand-lab-input-row input::placeholder { color: #8c9590; }
.brand-lab-input-row button { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-width: 10rem; padding: 0 1.2rem; border: 0; background: #202724; color: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.brand-lab-input-row button:hover { background: #35473d; }
.brand-lab-input-row button:disabled { opacity: .65; cursor: wait; }
.brand-lab-examples { display: flex; flex-wrap: wrap; gap: .45rem .5rem; align-items: center; margin-top: .7rem; }
.brand-lab-examples span { margin-right: .45rem; color: #7b8580; font-size: .62rem; font-weight: 760; letter-spacing: .11em; }
.brand-lab-examples button { padding: .38rem .65rem; border: 1px solid #d9ded9; border-radius: 999px; background: #f8faf8; color: #48564d; font: inherit; font-size: .72rem; cursor: pointer; }
.brand-lab-examples button:hover, .brand-lab-examples button:focus-visible { border-color: #5b7162; color: #21332a; }
.brand-lab-meta { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-top: 2rem; padding-bottom: .55rem; }
.brand-lab-meta p { max-width: 40rem; color: #67736b; font-size: .73rem; line-height: 1.45; }
.brand-lab-meta button { flex: none; padding: .2rem 0; border: 0; border-bottom: 1px solid #98a59d; background: none; color: #334038; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.brand-lab-meta button:hover { color: #0f1f15; border-color: #0f1f15; }
.brand-lab-tray { position: relative; isolation: isolate; width: 100%; height: clamp(25rem,46vw,35rem); overflow: hidden; border: 1px solid #323b35; background-color: #f7f8f6; background-image: radial-gradient(#d7ddd7 .6px,transparent .6px); background-size: 22px 22px; user-select: none; }
.brand-lab-tray::before, .brand-lab-tray::after { position: absolute; z-index: 0; color: #a7b0aa; font-size: .61rem; font-weight: 720; letter-spacing: .12em; pointer-events: none; }
.brand-lab-tray::before { content: '01 / THE FIELD'; top: 1rem; left: 1rem; }
.brand-lab-tray::after { content: 'DRAG · DROP · DISCOVER'; top: 1rem; right: 1rem; }
.brand-token { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; width: var(--token-size,5.7rem); height: var(--token-size,5.7rem); padding: .5rem; border: 1px solid #cbd3cc; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(17,29,20,.075); color: #253029; font: inherit; text-align: center; touch-action: none; cursor: grab; will-change: transform; transition: opacity .4s, filter .4s, background-color .4s, border-color .4s, box-shadow .4s; }
.brand-token:hover { z-index: 3; border-color: #586f60; box-shadow: 0 5px 15px rgba(17,29,20,.12); }
.brand-token:focus-visible { z-index: 4; outline: 2px solid #324b3a; outline-offset: 3px; }
.brand-token.is-dragging { z-index: 5; cursor: grabbing; box-shadow: 0 13px 25px rgba(17,29,20,.18); }
.brand-token.is-picked { border-color: #1d3e2a; background: #e7f3e8; box-shadow: 0 0 0 3px rgba(36,91,51,.13),0 5px 14px rgba(17,29,20,.12); }
.brand-token.is-muted { opacity: .23; filter: grayscale(1); }
.brand-token.is-muted:hover, .brand-token.is-muted:focus-visible { opacity: .65; }
.brand-token img { display: block; width: 2rem; height: 2rem; flex: none; object-fit: contain; pointer-events: none; }
.brand-token span { display: block; width: 100%; color: inherit; font-size: .58rem; font-weight: 760; line-height: 1.06; white-space: pre-line; pointer-events: none; }
.brand-lab-footer { display: flex; justify-content: space-between; gap: 2rem; align-items: start; padding-top: .8rem; }
.brand-lab-footer p:first-child { max-width: 45rem; color: #29362d; font-size: .79rem; font-weight: 670; line-height: 1.5; }
.brand-lab-footer p:last-child { max-width: 22rem; color: #747f76; font-size: .69rem; line-height: 1.45; text-align: right; }
.brand-lab-tray.is-static { display: grid; grid-template-columns: repeat(auto-fit,minmax(5rem,1fr)); gap: .65rem; justify-items: center; align-content: center; padding: 2.5rem 1rem; }
.brand-lab-tray.is-static .brand-token { position: static; transform: none !important; cursor: pointer; }
@media (max-width: 700px) {
  .brand-lab-heading { grid-template-columns: 1fr; gap: .8rem; }
  .brand-lab-heading h2 { font-size: clamp(2rem,8vw,2.65rem); }
  .brand-lab-meta { align-items: start; }
  .brand-lab-tray { height: 29rem; }
  .brand-lab-footer { flex-direction: column; gap: .45rem; }
  .brand-lab-footer p:last-child { text-align: left; }
}
@media (max-width: 480px) {
  .brand-lab-input-row { min-height: 3.8rem; }
  .brand-lab-input-row button { min-width: auto; gap: .5rem; padding: 0 .85rem; }
  .brand-lab-meta { gap: .7rem; }
  .brand-lab-meta p { max-width: 14rem; }
  .brand-lab-tray { height: 30rem; }
  .brand-token { width: var(--token-size,4.25rem); height: var(--token-size,4.25rem); gap: .2rem; }
  .brand-token img { width: 1.55rem; height: 1.55rem; }
  .brand-token span { font-size: .53rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-token { will-change: auto; }
}