/* A terminal for live visual experiments; the artwork keeps its own colour. */
.aa-showcase {
  --sc-paper: #e1e9df;
  --sc-muted: #99ad9d;
  --sc-line: #24422d;
  --sc-signal: var(--terminal, #00ff41);
  box-sizing: border-box;
  color: var(--sc-paper);
  font-family: "IBM Plex Mono", monospace;
  margin: 0 auto;
  max-width: 1520px;
  padding: clamp(1.25rem, 3.5vw, 3.5rem) clamp(1rem, 4vw, 4.5rem) 2rem;
}
.aa-showcase *, .aa-showcase *::before, .aa-showcase *::after { box-sizing: border-box; }
.aa-showcase button { font: inherit; }
.aa-showcase__masthead { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: .3rem 0 2.2rem; }
.aa-showcase__eyebrow, .aa-showcase__kicker { color: var(--sc-signal); font-size: .62rem; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
.aa-showcase h1 { margin: .65rem 0 0; color: var(--sc-paper); font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(3rem, 7.8vw, 7rem); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.aa-showcase__statement { font-family: monospace; font-size: clamp(.68rem, 1vw, .82rem); line-height: 1.8; margin: 0 0 .15rem; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .06em; }
.aa-showcase__statement em { font-weight: 400; font-style: normal; color: var(--sc-signal); }
.aa-showcase__selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sc-line); margin-bottom: 1rem; }
.aa-showcase__scene { display: flex; align-items: center; gap: .85rem; min-height: 64px; padding: .8rem 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--sc-muted); cursor: pointer; text-align: left; transition: color .24s, background-color .24s, border-color .24s; }
.aa-showcase__scene:hover { background: #0e1a11; color: var(--sc-paper); }
.aa-showcase__scene[aria-selected="true"] { color: var(--sc-signal); border-bottom-color: var(--sc-signal); background: #102016; }
.aa-showcase__scene-index { font-size: .6rem; color: #7d9c85; }
.aa-showcase__scene-title { font-size: clamp(.7rem, 1.3vw, .9rem); }
.aa-showcase__scene-dot { margin-left: auto; color: var(--sc-signal); opacity: 0; }
.aa-showcase__scene[aria-selected="true"] .aa-showcase__scene-dot { opacity: 1; }
.aa-showcase__stage { margin: 0; }
.aa-showcase__canvas-shell { position: relative; overflow: hidden; background: #090c15; height: min(64vh, 760px); min-height: 400px; border-radius: 0; border: 1px solid var(--sc-line); touch-action: none; cursor: grab; }
.aa-showcase__canvas-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--sc-signal), var(--sc-signal)) top left / 16px 1px no-repeat, linear-gradient(var(--sc-signal), var(--sc-signal)) top left / 1px 16px no-repeat, linear-gradient(var(--sc-signal), var(--sc-signal)) bottom right / 16px 1px no-repeat, linear-gradient(var(--sc-signal), var(--sc-signal)) bottom right / 1px 16px no-repeat; }
.aa-showcase__canvas-shell:active { cursor: grabbing; }
.aa-showcase__canvas-mount, .aa-showcase__canvas-mount canvas { position: absolute; display: block; inset: 0; width: 100%; height: 100%; }
.aa-showcase__live, .aa-showcase__edition, .aa-showcase__gesture { position: absolute; z-index: 1; color: #9ac6a5; font-size: .59rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 8px #080c17; }
.aa-showcase__live { left: 1.5rem; top: 1.4rem; display: flex; align-items: center; gap: .55rem; }
.aa-showcase__live::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sc-signal); }
.aa-showcase__live[data-paused="true"]::before { background: #e7c681; }
.aa-showcase__edition { right: 1.5rem; top: 1.4rem; }
.aa-showcase__gesture { left: 1.5rem; bottom: 1.3rem; }
.aa-showcase__art-caption { display: grid; grid-template-columns: 1fr 1.05fr auto; gap: 2rem; align-items: center; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--sc-line); }
.aa-showcase__work-name { font-family: Anton, Impact, sans-serif; text-transform: uppercase; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.035em; line-height: 1.08; margin: .45rem 0 0; }
.aa-showcase__work-summary { font-size: .72rem; line-height: 1.8; margin: 0; color: var(--sc-muted); max-width: 48ch; }
.aa-showcase__controls { display: flex; gap: .65rem; }
.aa-showcase__control { border: 1px solid #345940; border-radius: 0; background: #0e1912; color: #b1d9bb; text-transform: uppercase; letter-spacing: .04em; min-height: 44px; padding: .7rem .8rem; font-size: .64rem !important; cursor: pointer; white-space: nowrap; transition: background-color .24s, border-color .24s; }
.aa-showcase__control:hover { background: #152c1c; border-color: var(--sc-signal); }
.aa-showcase__control[aria-pressed="true"] { color: #e7c681; border-color: #806c44; }
.aa-showcase__control:disabled { cursor: default; color: #a5a6b1; }
.aa-showcase__footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem 0 .5rem; }
.aa-showcase__footer p { color: #819a87; font-family: monospace; font-size: .7rem; line-height: 1.6; margin: 0; }
.aa-showcase__footer p::before { content: "// "; color: var(--sc-signal); }
.aa-showcase__frequency-link { display: flex; gap: 1rem; align-items: center; min-height: 44px; color: #91ac96; background: none; border: 0; font-size: .64rem !important; cursor: pointer; padding: .5rem 0; }
.aa-showcase__frequency-link span { color: var(--sc-signal); }
.aa-showcase :focus-visible { outline: 2px solid var(--sc-signal); outline-offset: 4px; }
.aa-showcase__canvas-shell:focus-visible { outline-offset: -3px; }
.aa-showcase__fallback { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #c3ddc8; }
.aa-showcase__fallback button { min-height: 44px; border: 1px solid #568863; background: #102016; color: #dceade; padding: .6rem 1rem; cursor: pointer; }
@media (max-width: 1000px) { .aa-showcase__art-caption { grid-template-columns: 1fr 1.3fr; } .aa-showcase__controls { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .aa-showcase { padding: 1.6rem 1rem 1rem; }
  .aa-showcase__masthead { gap: 1rem; padding-bottom: 1.6rem; }
  .aa-showcase h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .aa-showcase__eyebrow { font-size: .5rem; letter-spacing: .08em; }
  .aa-showcase__statement { font-size: .6rem; letter-spacing: .025em; }
  .aa-showcase__selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-showcase__scene { min-height: 50px; gap: .6rem; padding: .6rem .65rem; }
  .aa-showcase__scene-title { font-size: .7rem; }
  .aa-showcase__canvas-shell { height: 58vh; min-height: 370px; max-height: 560px; }
  .aa-showcase__live { left: 1rem; top: 1rem; }
  .aa-showcase__edition { right: 1rem; top: 1rem; }
  .aa-showcase__gesture { left: 1rem; bottom: 1rem; font-size: .54rem; }
  .aa-showcase__art-caption { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.4rem .1rem; }
  .aa-showcase__work-summary { font-size: .7rem; max-width: 45ch; }
  .aa-showcase__controls { grid-column: auto; }
  .aa-showcase__footer { align-items: start; gap: 1rem; flex-direction: column; padding: 1.5rem 0; }
  .aa-showcase__frequency-link { flex-wrap: wrap; gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .aa-showcase *, .aa-showcase *::before, .aa-showcase *::after { transition: none !important; scroll-behavior: auto !important; } }