.showcase {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}
.intro > .eyebrow, .usage .eyebrow { color: var(--muted); margin: 0; }
.intro h1 {
  margin: .18em 0 .13em;
  font: 900 clamp(3.8rem, 8vw, 8.25rem)/.95 var(--display);
  letter-spacing: -.085em;
  white-space: nowrap;
}
.intro h1 span { color: var(--ink); text-shadow: .044em .044em var(--acid); }
.tagline { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.95rem); font-weight: 800; letter-spacing: -.035em; }
.lede { max-width: 37ch; margin: .65rem 0 1.6rem; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.18rem); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.35rem;
  margin: 1.6rem 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
  font: .76rem/1.4 var(--mono);
}
.project-meta li + li::before { content: "/"; margin-inline-end: .65rem; }

.playground {
  min-width: 0;
  border: 1px solid var(--ink);
  border-radius: .65rem;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(.8rem, 2.5vw, 1.5rem);
  box-shadow: .38rem .38rem 0 var(--acid);
}
.panel-heading, .window-title, .window-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.panel-heading { margin-bottom: .85rem; }
.panel-heading h2 { margin: 0; }
.panel-heading .signal { color: var(--acid); white-space: nowrap; }
.demo-window {
  position: relative;
  overflow: hidden;
  border: 1px solid #d5d3cb;
  border-radius: .35rem;
  background: #fff;
  color: var(--ink);
}
.window-title { padding: .55rem .9rem; border-bottom: 1px solid var(--line); background: #ecede6; font: .69rem/1.4 var(--mono); letter-spacing: .07em; }
.window-title span:first-child { letter-spacing: .22em; color: var(--muted); }
.window-content { padding: clamp(.85rem, 2.2vw, 1.45rem); }
.window-content .eyebrow { margin: 0; color: var(--muted); }
.window-heading { margin: .05rem 0 .7rem; font: 900 clamp(1.7rem, 3vw, 2.5rem)/1.15 var(--display); letter-spacing: -.055em; }
.window-row { border-top: 1px solid var(--line); padding-block: .52rem; font-size: .84rem; }
.window-row span + span { color: var(--muted); text-align: end; }

.playground-controls > p { color: #dedbe3; margin: .85rem 0 .65rem; font-size: .9rem; }
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.presets button, .code-heading button {
  min-height: 2.75rem;
  border: 1px solid #77717f;
  border-radius: .28rem;
  padding: .4rem;
  background: #2d2933;
  color: var(--paper);
  font-size: .85rem;
  font-weight: 700;
}
.presets button span { display: inline-block; width: 1em; margin-inline-end: .15em; color: var(--acid); font-family: var(--mono); }
.presets button:hover, .code-heading button:hover { border-color: var(--acid); }
.motion { display: flex; gap: .6rem; align-items: center; width: fit-content; margin-top: .7rem; min-height: 2.75rem; cursor: pointer; }
.motion input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--acid); }
.motion strong { font-size: .87rem; }
.motion small { display: block; color: #dedbe3; }

#hattip {
  position: absolute;
  inset: auto 0 0;
  max-height: none;
  padding: .85rem 3.5rem .85rem 1rem;
  background: var(--ink);
  transform: translateY(105%);
  transition: transform .32s ease;
  overflow-wrap: anywhere;
}
#hattip.fire { bottom: 0; transform: translateY(0); }
#hattip.ht-success { background: var(--success); }
#hattip.ht-info { background: var(--info); }
#hattip.ht-danger { background: var(--danger); }
#hattip #msg { font-size: .95rem; }
#hattip button { inset: 0 0 auto auto; min-width: 2.75rem; min-height: 2.75rem; padding: 0; opacity: 1; text-shadow: none; }
#hattip button:focus-visible:not(:disabled) { outline: 2px solid var(--paper); outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) {
  #hattip, #hattip button { transition: none; }
  #hattip.fire.loud { animation: none; }
}

.usage {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.25rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 4rem);
}
.usage h2 { margin: .16em 0 .25em; font: 900 clamp(2rem, 4vw, 3.8rem)/1.02 var(--display); letter-spacing: -.06em; }
.usage p:not(.eyebrow) { margin: 0 0 .7rem; color: var(--muted); max-width: 42ch; }
.usage code { font-family: var(--mono); }
.text-link { font-size: .93rem; font-weight: 700; }
.code-card { min-width: 0; border: 1px solid var(--ink); border-radius: .45rem; background: var(--ink); color: var(--paper); }
.code-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-height: 3.5rem; padding: .25rem .85rem; border-bottom: 1px solid var(--dark-line); }
.code-heading .eyebrow { color: #dedbe3; }
.code-heading button { padding-inline: .65rem; }
.code-card pre { margin: 0; padding: 1rem .85rem; color: var(--acid); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 52rem) {
  .showcase, .usage { grid-template-columns: minmax(0, 1fr); }
  .intro h1 { font-size: clamp(3.25rem, 13vw, 7rem); }
}
@media (max-width: 29rem) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }