/* ==========================================================================
   SYNTHWAVE BOARD (gsy-). Loaded on a/synthwave.html only, after grammar.css.
   The horizon again: sky and banded sun at the top, a perspective floor under
   it, and the fields as night panels standing in depth. Faces are the room's
   own ("Monoton X", "Space Grotesk X", declared in x-synthwave.css); colours
   are the room's tokens. Only width and heading size shrink with depth.
   ========================================================================== */
.gm--synthwave {
  --gm-tag-inverse: #120725;
  --gsy-s: 1;
  position: relative;
  z-index: 1;
  background: var(--gm-color-night);
  color: var(--gm-color-ink);
  font-family: "Space Grotesk X", "Helvetica Neue", Arial, sans-serif;
  border: 2px solid var(--gm-color-neon);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.45);
  overflow: hidden;
}
.gm--synthwave .gm__head { position: relative; z-index: 1; }
.gm--synthwave .gm__title { font: 400 clamp(1.75rem, 4vw, 2.75rem)/1 "Monoton X", "Arial Black", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #E9F9FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gm--synthwave .gm__title, .gsy-chrome {
    background: linear-gradient(180deg, #E9F9FF 0%, #9EE9FF 40%, #3A1A6B 52%, #FF8AD8 60%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.gm--synthwave .gm__get a { color: var(--gm-color-cyan); }
.gm--synthwave :focus-visible { outline: 2px solid var(--gm-color-cyan); outline-offset: 3px; }

/* the horizon behind the head */
.gsy { position: relative; }
.gsy-horizon { position: relative; height: 7rem; margin: -0.5rem 0 1.5rem; overflow: hidden; background: linear-gradient(180deg, var(--gm-color-panel), var(--gm-color-violet) 45%, #B0247A 70%, var(--gm-color-dusk) 72%, var(--gm-color-night) 72.5%); }
.gsy-horizon__sun { position: absolute; left: 50%; bottom: 28%; width: 7rem; aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%; background: linear-gradient(#FFE45E, var(--gm-color-dusk) 45%, var(--gm-color-neon)); -webkit-mask: linear-gradient(#000 0 50%, transparent 50% 55%, #000 55% 63%, transparent 63% 69%, #000 69% 100%); mask: linear-gradient(#000 0 50%, transparent 50% 55%, #000 55% 63%, transparent 63% 69%, #000 69% 100%); clip-path: inset(0 0 50% 0); }
.gsy-horizon__floor { position: absolute; left: -25%; width: 150%; top: 72%; height: 5rem; transform-origin: top center; transform: perspective(3rem) rotateX(60deg); background: linear-gradient(90deg, var(--gm-color-neon) 1px, transparent 1px) 50% 0 / 32px 32px, linear-gradient(0deg, var(--gm-color-neon) 1px, transparent 1px) 0 0 / 32px 32px, var(--gm-color-night); }

/* panels in depth */
.gsy-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.gsy-f { grid-column: span 3; justify-self: center; width: 100%; padding: 1rem 1.25rem 1.1rem; background: var(--gm-color-panel); border: 2px solid var(--gm-color-neon); border-radius: 6px; box-shadow: 0 0 12px rgba(255, 43, 214, 0.35); }
.gsy-f--0 { --gsy-s: 1; grid-column: 1 / -1; }
.gsy-f--1 { --gsy-s: 0.78; }
.gsy-f--2 { --gsy-s: 0.6084; }
.gm-f--img.gsy-f { grid-column: 1 / -1; width: min(100%, 61%); }
.gsy-tag { margin: 0 0 0.35rem; font: 500 0.75rem/1.5 "Space Grotesk X", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-color-cyan); }
.gsy-f .gm-f__n { color: var(--gm-color-neon); }
.gsy-f .gm-f__name { font-size: max(1.125rem, calc(1.9rem * var(--gsy-s))); line-height: 1.05; color: #fff; text-shadow: 0 0 8px var(--gm-color-cyan); }
.gsy-f .gm-t { color: var(--gm-color-ink); }
.gsy-f .gm-t[data-g="translation"] { color: var(--gm-color-cyan); }
.gsy-f .gm-more summary { color: var(--gm-color-cyan); }
.gsy-cap { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: #CDB8EE; }
.gsy-cap b { color: var(--gm-color-ink); }

/* colour */
.gsy-sky { height: 3rem; border: 1px solid rgba(45, 226, 230, 0.5); background: linear-gradient(180deg, var(--gm-color-panel), var(--gm-color-violet) 40%, #B0247A 70%, var(--gm-color-dusk)); }
.gsy-sws { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; font-size: 0.8125rem; }
.gsy-sws li { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: 0.4rem; align-items: center; }
.gsy-sws i { grid-row: span 2; width: 1.1rem; height: 2rem; border: 1px solid rgba(247, 233, 255, 0.35); }
.gsy-sws code { font-size: 0.75rem; color: #CDB8EE; }

/* type */
.gsy-chrome { margin: 0; font: 400 clamp(2rem, 5vw, 3rem)/1 "Monoton X", "Arial Black", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #E9F9FF; filter: drop-shadow(0 0 8px rgba(45, 226, 230, 0.6)); }
.gsy-chrome--s { font-size: 1.75rem; }
.gsy-body { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.55; }

/* horizon */
.gsy-vp { position: relative; height: 7rem; overflow: hidden; background: linear-gradient(180deg, var(--gm-color-violet), var(--gm-color-dusk) 48%, var(--gm-color-night) 48.5%); border: 1px solid rgba(45, 226, 230, 0.5); }
.gsy-vp__floor { position: absolute; left: -25%; width: 150%; top: 48%; height: 60%; transform-origin: top center; transform: perspective(2.5rem) rotateX(55deg); background: linear-gradient(90deg, var(--gm-color-neon) 1px, transparent 1px) 50% 0 / 20px 20px, linear-gradient(0deg, var(--gm-color-neon) 1px, transparent 1px) 0 0 / 20px 20px; }
.gsy-vp__p { position: absolute; left: 50%; transform: translateX(-50%); background: var(--gm-color-panel); border: 1px solid var(--gm-color-neon); }
.gsy-vp__p--0 { bottom: 8%; width: 44%; height: 26%; }
.gsy-vp__p--1 { bottom: 38%; width: 34%; height: 18%; }
.gsy-vp__p--2 { bottom: 58%; width: 26%; height: 12%; }

/* line and surface */
.gsy-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.gsy-tube { padding: 0.4rem 0.9rem; border: 2px solid var(--gm-color-neon); border-radius: 4px; box-shadow: 0 0 12px rgba(255, 43, 214, 0.6), inset 0 0 8px rgba(255, 43, 214, 0.35); font-weight: 700; }

/* imagery */
.gsy-scene { position: relative; height: 8rem; overflow: hidden; background: linear-gradient(180deg, var(--gm-color-violet), var(--gm-color-neon) 58%, var(--gm-color-night) 58.5%); border: 1px solid var(--gm-color-cyan); }
.gsy-scene__sun { position: absolute; left: 50%; top: 12%; width: 5rem; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#FFE45E, var(--gm-color-neon)); -webkit-mask: linear-gradient(#000 0 50%, transparent 50% 56%, #000 56% 66%, transparent 66% 73%, #000 73%); mask: linear-gradient(#000 0 50%, transparent 50% 56%, #000 56% 66%, transparent 66% 73%, #000 73%); }
.gsy-scene__floor { position: absolute; top: 58%; left: -20%; width: 140%; height: 46%; transform-origin: top center; transform: perspective(90px) rotateX(58deg); background: linear-gradient(90deg, var(--gm-color-neon) 1px, transparent 1px) 50% 0 / 22px 22px, linear-gradient(0deg, var(--gm-color-neon) 1px, transparent 1px) 0 0 / 22px 22px, var(--gm-color-night); }
.gsy-scene__vhs { position: absolute; left: 0; right: 0; bottom: 12%; height: 7%; transform: translateX(3%); mix-blend-mode: screen; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 3px, transparent 3px 9px, rgba(255, 255, 255, 0.22) 9px 11px, transparent 11px 23px); box-shadow: 0 -2px 0 rgba(255, 43, 214, 0.75), 0 2px 0 rgba(45, 226, 230, 0.75); }

/* components */
.gsy-ui { display: grid; gap: 1.25rem; }
.gsy-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 43, 214, 0.5); }
.gsy-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gm-color-ink); text-decoration: none; font-weight: 500; }
.gsy-nav a:hover { color: var(--gm-color-cyan); }
.gsy-nav a[aria-current="page"] { color: var(--gm-color-cyan); text-decoration: underline 2px var(--gm-color-neon); text-underline-offset: 6px; }
.gsy-cards { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1rem; }
.gsy-card { --c: 1; display: grid; gap: 0.2rem; flex: 0 1 calc(18rem * var(--c)); min-width: 9rem; padding: 0.8rem 1rem; background: var(--gm-color-panel); border: 2px solid var(--gm-color-neon); border-radius: 6px; color: var(--gm-color-ink); text-decoration: none; }
.gsy-card--1 { --c: 0.78; } .gsy-card--2 { --c: 0.6084; }
.gsy-card b { font-size: max(1rem, calc(1.5rem * var(--c))); color: #fff; }
.gsy-card span { font-size: 0.9375rem; color: #CDB8EE; }
.gsy-card:hover { border-color: var(--gm-color-cyan); }
.gsy-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; }
.gsy-form label { flex-basis: 100%; font-size: 0.875rem; color: #CDB8EE; }
.gsy-form input { flex: 1 1 12rem; min-width: 0; height: 2.75rem; padding: 0 0.5rem; background: var(--gm-color-night); color: var(--gm-color-ink); border: 0; border-bottom: 2px solid var(--gm-color-cyan); border-radius: 0; }
.gsy-form input:focus { border-bottom: 3px solid var(--gm-color-neon); }
.gsy-btn { min-height: 44px; padding: 0 1.25rem; background: var(--gm-color-panel); color: var(--gm-color-ink); border: 2px solid var(--gm-color-neon); border-radius: 4px; font-weight: 700; box-shadow: 0 0 12px rgba(255, 43, 214, 0.55); cursor: pointer; }
.gsy-btn:hover { border-color: var(--gm-color-cyan); box-shadow: 0 0 20px rgba(45, 226, 230, 0.6); }
.gsy-btn:active { background: var(--gm-color-violet); box-shadow: none; }

/* motion */
.gsy-run { position: relative; height: 4.5rem; overflow: hidden; border: 1px solid rgba(45, 226, 230, 0.5); background: var(--gm-color-night); }
.gsy-run i { position: absolute; left: -25%; width: 150%; top: 0; height: 100%; transform-origin: top center; transform: perspective(3rem) rotateX(50deg); background: linear-gradient(90deg, var(--gm-color-neon) 1px, transparent 1px) 50% 0 / 20px 20px; overflow: hidden; }
.gsy-run i::before { content: ""; position: absolute; inset: -40px 0 0 0; background: linear-gradient(0deg, var(--gm-color-neon) 1px, transparent 1px) 0 0 / 20px 20px; }
@media (prefers-reduced-motion: no-preference) { .gsy-run i::before { animation: gsy-run 3s linear infinite; } }
@keyframes gsy-run { to { transform: translateY(40px); } }

@media (max-width: 720px) {
  .gsy-grid { grid-template-columns: minmax(0, 1fr); }
  .gsy-f, .gm-f--img.gsy-f { grid-column: 1 / -1; width: 100%; }
  .gm--synthwave .gm__head { grid-template-columns: minmax(0, 1fr); }
  .gm--synthwave .gm__title { grid-row: auto; }
}
.gsy-rho { text-transform: none; letter-spacing: 0; }