.gl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gl-viewer { position: relative; background: #1C0416; color: #F6EEE9; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; }
.gl-guides i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(201,182,205,.22); pointer-events: none; }
.gl-guides b { position: absolute; left: 12px; top: -14px; font: 500 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #A587A7; font-weight: 500; }
.gl-guides i[data-g="base"] b { top: 4px; }
.gl-stage { position: relative; display: grid; place-items: center; align-items: baseline; width: 100%; }
.gl-probe { display: inline-block; width: 0; height: 0; }
.gl-big, .gl-ghost { grid-area: 1 / 1; font-family: var(--font-marquee); font-weight: 400; font-size: clamp(160px, 22vw, 340px); line-height: 1; text-transform: none; }
.gl-big { color: #F6EEE9; }
.gl-ghost { font-family: var(--font-display); font-weight: 300; color: transparent; -webkit-text-stroke: 1px #964785; opacity: 0; transition: opacity .4s var(--ease); }
.gl-viewer.is-cmp .gl-ghost { opacity: 1; }
.gl-in { display: inline-block; animation: gl-rise .38s var(--ease) both; }
@keyframes gl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gl-viewer.is-cmp .gl-ghost.gl-in { animation-name: gl-rise-g; }
@keyframes gl-rise-g { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gl-cmp { position: absolute; right: 12px; top: 12px; padding: 7px 11px; border: 1px solid rgba(201,182,205,.35); background: none; color: #C9B6CD; font: 500 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.gl-cmp[aria-pressed="true"] { background: #964785; color: #F6EEE9; border-color: #964785; }
.gl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.gl-code { font: 500 13px/1 var(--font-body); letter-spacing: .08em; }
.gl-name { font-size: 13px; color: var(--grey-1); flex: 1 1 200px; }
.gl-set { margin-left: auto; }
.gl-pills { margin-bottom: 16px; }
.gl-grid { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.gl-grid button { aspect-ratio: 1 / 1; border: 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: none; color: var(--ink); font-family: var(--font-marquee); font-weight: 400; font-size: clamp(18px, 2.2vw, 28px); line-height: 1; cursor: pointer; padding: 0; text-transform: none; transition: background .25s var(--ease), color .25s var(--ease); }
.gl-grid button:hover, .gl-grid button.is-on { background: #441C47; color: #F6EEE9; }
.gl-grid button:focus-visible { outline: 2px solid #964785; outline-offset: -2px; }
.gl-hint { margin: 12px 0 0; color: var(--grey-1); }
@media (max-width: 860px) {
  .gl { grid-template-columns: 1fr; gap: 20px; }
  .gl-viewer { aspect-ratio: 4 / 3; }
  .gl-big, .gl-ghost { font-size: clamp(150px, 46vw, 240px); }
  .gl-grid { grid-template-columns: repeat(6, 1fr); }
  .gl-grid button { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .gl-in { animation: none; } }