.logo-demo { max-width: 760px; border: 2px solid #0a0a0a; border-radius: 20px; background: #fff; color: #0a0a0a; overflow: hidden; }
.logo-demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid rgb(10 10 10 / 20%); }
.logo-demo-title { font: 400 12px/18px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.logo-demo-title span { white-space: nowrap; }
.logo-demo-status { border-radius: 2px; font: 700 12px/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.logo-demo--glitch-demo .logo-demo-top { border-bottom-color: #0a0a0a; background: #0a0a0a; color: #fff; }
.logo-demo-stage { position: relative; display: grid; place-items: center; height: 200px; padding: 0 24px; overflow: hidden; }
.logo-demo-stage > *, .logo-demo-tile > * { grid-area: 1 / 1; }
.logo-demo-live { display: contents; }
.logo-demo-poster-stage .lk { zoom: 1.12; }
.logo-demo-poster-header .lk { zoom: .262; }
.logo-demo-poster-tile .lk { zoom: .476; }
.logo-demo-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; padding: 0 20px 20px; }
.logo-demo-size { display: grid; gap: 8px; }
.logo-demo-size > p { color: #666; font: 400 12px/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.logo-demo-size-header { flex: 1 1 240px; }
.logo-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 16px; border: 1px solid rgb(10 10 10 / 20%); border-radius: 12px; overflow: hidden; }
.logo-demo-nav { display: flex; gap: 16px; font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.logo-demo-tile { --kp-line: #f4ff3d; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #0a0a0a; overflow: hidden; }
.logo-demo-panel { display: grid; gap: 16px; padding: 20px; border-top: 1px solid rgb(10 10 10 / 20%); }
.logo-demo-picker, .logo-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.logo-demo-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border: 2px solid #0a0a0a; border-radius: 999px; background: #fff; color: #0a0a0a; font: 700 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.logo-demo-button:hover { background: #f3f3f3; }
.logo-demo-button[aria-pressed="true"] { background: #f4ff3d; }
.logo-demo-number { color: #666; font-weight: 400; }
.logo-demo-button[aria-pressed="true"] .logo-demo-number { color: #0a0a0a; }
.logo-demo-speed { display: inline-flex; border: 2px solid #0a0a0a; border-radius: 999px; overflow: hidden; }
.logo-demo-speed-button { min-width: 52px; min-height: 40px; padding: 0 12px; border: 0; background: #fff; color: #0a0a0a; font: 700 12px/16px var(--font-mono); cursor: pointer; }
.logo-demo-speed-button + .logo-demo-speed-button { border-left: 2px solid #0a0a0a; }
.logo-demo-speed-button[aria-pressed="true"] { background: #0a0a0a; color: #fff; }
.logo-demo-speed-button:focus-visible { outline: 2px solid #0a0a0a; outline-offset: -6px; }
.logo-demo-speed-button[aria-pressed="true"]:focus-visible { outline-color: #f4ff3d; }
.logo-demo-button:disabled, .logo-demo-speed-button:disabled { opacity: .55; cursor: default; }
.logo-demo-button:disabled:hover { background: #fff; }
.logo-demo-desc { max-width: 640px; min-height: 52px; font-size: 16px; line-height: 26px; }
.logo-demo-note { padding: 10px 14px; border-radius: 10px; background: #f4ff3d; font-size: 14px; line-height: 22px; }
.logo-demo-note[hidden] { display: none; }
.logo-demo .lk { display: inline-flex; align-items: center; gap: 16px; color: #0a0a0a; font-family: var(--font-mono); -webkit-font-smoothing: antialiased; }
.logo-demo .lk-word { font-size: 60px; font-weight: 700; line-height: 60px; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.logo-demo .lk-heart { position: relative; flex: none; width: 84px; height: 84px; }
.logo-demo .lk-chip { display: inline-block; padding: 7px 14px 11px; border-radius: 10px; background: #f4ff3d; transform: translate(var(--jx, 0px), var(--jy, 0px)) rotate(-1.5deg); }
.logo-demo .lk-dotcom { align-self: flex-end; color: #666; font-size: 20px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.logo-demo .lk--heart { gap: 0; }
.logo-demo .lk-layer { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
@media (max-width: 799px) { .logo-demo-poster-stage .lk { zoom: .85; } }
@media (max-width: 599px) {
  .logo-demo-top { padding: 12px 16px; }
  .logo-demo-stage { height: 132px; padding: 0 16px; }
  .logo-demo-poster-stage .lk { zoom: .5; }
  .logo-demo-sizes { flex-wrap: nowrap; gap: 12px; padding: 0 16px 16px; }
  .logo-demo-size-header { flex: 1 1 auto; min-width: 0; }
  .logo-demo-header { padding: 0 12px; }
  .logo-demo-nav { display: none; }
  .logo-demo-panel { padding: 16px; }
  .logo-demo-picker { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .logo-demo-picker .logo-demo-button { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .logo-demo-button { padding: 8px 12px; font-size: 11px; }
  .logo-demo-desc { min-height: 78px; }
}