/* ==========================================================================
   Y2K BOARD (gyk-). Loaded on a/y2k.html only, after grammar.css.
   Floating frosted shells on the room's pastel-metallic ground, alternating
   offsets, ranked by gloss. Face is the room's "Nunito X" (x-y2k.css);
   colours are the grammar's tokens, which are the room's. Reading text always
   sits on near-solid pearl. Motion only under no-preference.
   ========================================================================== */
.gm--y2k {
  --gm-tag-inverse: #F4F5FB;
  position: relative;
  z-index: 1;
  border-radius: 32px;
  color: var(--gm-color-ink);
  font-family: "Nunito X", "Varela Round", "Trebuchet MS", sans-serif;
  font-weight: 500;
  background:
    radial-gradient(ellipse at 18% 6%, #FFFFFF, transparent 40%),
    radial-gradient(ellipse at 88% 20%, #CFE6FF, transparent 45%),
    radial-gradient(ellipse at 30% 70%, #F3D6FF, transparent 50%),
    linear-gradient(160deg, var(--gm-color-ground), #C8D0E6 50%, #E8DFF4);
  box-shadow: inset 0 1px 0 #fff, 0 20px 40px -24px rgba(40, 50, 110, 0.45);
}
.gm--y2k .gm__title { font-weight: 900; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.03em; line-height: 0.95; color: var(--gm-color-chrome); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* the room's heading chrome (.yk-chrome): dark enough to read on the pale ground */
  .gm--y2k .gm__title, .gyk-display {
    background: linear-gradient(180deg, #1D2340 0%, #454C74 42%, var(--gm-color-chrome) 52%, #2C3560 64%, #1D2340 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.gm--y2k .gm__lede, .gm--y2k .gm__key, .gm--y2k .gm__get { background: rgba(244, 245, 251, 0.85); border-radius: 16px; padding: 0.35rem 0.75rem; opacity: 1; }
.gm--y2k .gm__get a { color: var(--gm-color-link); font-weight: 700; }
.gm--y2k :focus-visible { outline: 3px solid var(--gm-color-link); outline-offset: 3px; border-radius: 12px; }

/* the loading bar: a documented interface trait (kcc:interface-1) */
.gyk-load { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.75rem; padding: 0.6rem 1rem; border-radius: 999px; background: var(--gm-color-pearl); box-shadow: inset 0 1px 0 #fff, 0 10px 18px -14px rgba(40, 50, 110, 0.55); }
.gyk-load__k { font-weight: 800; font-size: 0.875rem; }
.gyk-load__bar { flex: 1 1 12rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: #E8EBF6; box-shadow: inset 0 2px 4px rgba(40, 50, 110, 0.2); }
.gyk-load__bar i { height: 12px; border-radius: 999px; background: linear-gradient(180deg, #fff 0 20%, var(--gm-color-ice) 60%, #7FA6F0); }

/* the shells */
.gyk { display: grid; gap: 2rem; }
.gyk-f { position: relative; overflow: hidden; margin-right: 8%; padding: 1.1rem 1.4rem 1.2rem; border-radius: 28px; background: rgba(244, 245, 251, 0.9); border: 1px solid #fff; box-shadow: 0 14px 30px -20px rgba(40, 50, 110, 0.4), inset 0 1px 0 #fff; }
.gyk-f--r { margin-right: 0; margin-left: 8%; }
.gyk-f--wide { margin-left: 0; margin-right: 0; }
.gyk-f > * { position: relative; z-index: 1; }
/* the glossiest object leads */
.gyk-f--gloss { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 40px -20px rgba(40, 50, 110, 0.5), inset 0 1px 0 #fff; }
.gyk-f--gloss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); border-radius: 28px 28px 60% 60% / 28px 28px 30px 30px; }
.gyk-f .gm-f__n { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--gm-color-pink) 45%, #E77BC6); color: var(--gm-color-ink); font-weight: 900; font-size: 0.875rem; }
.gyk-f .gm-f__name { font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em; }
.gyk-f .gm-t { border-radius: 999px; padding: 0 0.5rem; }
.gyk-f .gm-t[data-g="translation"] { color: #4F56A0; }
.gyk-f .gm-t[data-g="record"] { color: var(--gm-color-ink); }
.gyk-f .gm-more summary { color: var(--gm-color-link); }
.gyk-cap { margin: 0.6rem 0 0; font-size: 0.9375rem; color: #454C74; }

/* colour */
.gyk-plastic { position: relative; height: 4.5rem; }
.gyk-plastic span { position: absolute; top: 0.25rem; width: 5.5rem; height: 4rem; border-radius: 46% 54% 52% 48% / 56% 44% 56% 44%; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.75); }
.gyk-plastic__p { left: 0; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 10%, rgba(255, 154, 223, 0.6) 36%, rgba(255, 154, 223, 0.35)); }
.gyk-plastic__i { left: 3.5rem; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 10%, rgba(166, 200, 255, 0.6) 36%, rgba(166, 200, 255, 0.35)); }
.gyk-sws { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem 0.75rem; font-size: 0.8125rem; }
.gyk-sws li { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.45rem; align-items: center; }
.gyk-sws i { grid-row: span 2; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(29, 35, 64, 0.25); box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.7); }
.gyk-sws code { font: 700 0.75rem/1 "Nunito X", sans-serif; color: #454C74; }

/* type */
.gyk-display { margin: 0; font-weight: 900; font-size: clamp(3rem, 9vw, 5rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--gm-color-chrome); }
.gyk-body { margin: 0.5rem 0 0; }

/* layout */
.gyk-float { position: relative; height: 7rem; }
.gyk-float span { position: absolute; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 1px solid #fff; box-shadow: 0 10px 16px -10px rgba(40, 50, 110, 0.4); }
.gyk-float span:nth-child(1) { left: 0; top: 0.5rem; width: 46%; height: 3.25rem; }
.gyk-float span:nth-child(2) { left: 30%; top: 2.75rem; width: 50%; height: 3.5rem; }
.gyk-float span:nth-child(3) { right: 0; top: 0; width: 28%; height: 2.5rem; }

/* shape */
.gyk-forms { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.gyk-blob { width: 5rem; height: 4.25rem; border-radius: 46% 54% 52% 48% / 56% 44% 56% 44%; background: radial-gradient(circle at 34% 30%, #fff 0 10%, var(--gm-color-ice) 45%, #7FA6F0); box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.7); }
.gyk-pillshape { width: 7rem; height: 2.5rem; border-radius: 999px; background: linear-gradient(160deg, var(--gm-color-pink), var(--gm-color-ice)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8); }
.gyk-corner { padding: 0.5rem 0.75rem; border: 2px dashed rgba(29, 35, 64, 0.4); font-weight: 800; font-size: 0.875rem; }

/* imagery */
.gyk-casing { position: relative; width: 9rem; height: 7rem; }
.gyk-casing__shell { position: absolute; inset: 0; border-radius: 48% 52% 46% 54% / 58% 58% 42% 42%; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9) 0 8%, rgba(166, 200, 255, 0.5) 32%, rgba(127, 166, 240, 0.35)); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: inset 0 10px 14px rgba(255, 255, 255, 0.6), 0 14px 20px -14px rgba(40, 50, 110, 0.45); }
.gyk-casing__core { position: absolute; left: 30%; top: 36%; width: 40%; height: 34%; border-radius: 10px; background: rgba(29, 35, 64, 0.22); }

/* components */
.gyk-ui { display: grid; gap: 1.25rem; }
.gyk-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gyk-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: #E8EBF6; border: 1px solid #fff; color: var(--gm-color-ink); font-weight: 700; text-decoration: none; }
.gyk-nav a:hover { background: #fff; }
.gyk-nav a[aria-current="page"] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--gm-color-pink), #FBD3EE); font-weight: 900; box-shadow: inset 0 1px 0 #fff, 0 8px 14px -10px rgba(40, 50, 110, 0.5); }
.gyk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.gyk-card { position: relative; overflow: hidden; display: grid; gap: 0.25rem; padding: 1rem 1.2rem; border-radius: 24px; background: var(--gm-color-pearl); border: 1px solid #C9CFE6; color: var(--gm-color-ink); text-decoration: none; }
.gyk-card b { font-weight: 900; font-size: 1.125rem; }
.gyk-card--lead { background: rgba(255, 255, 255, 0.85); border-color: #fff; box-shadow: 0 18px 28px -16px rgba(40, 50, 110, 0.5), inset 0 1px 0 #fff; }
.gyk-card--lead::before { content: ""; position: absolute; left: 6%; right: 6%; top: 4%; height: 40%; border-radius: 20px 20px 50% 50%; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); pointer-events: none; }
.gyk-card > * { position: relative; }
.gyk-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; }
.gyk-form label { flex-basis: 100%; font-weight: 800; font-size: 0.875rem; }
.gyk-form input { flex: 1 1 12rem; min-width: 0; height: 2.75rem; padding: 0 0.9rem; border-radius: 18px; background: var(--gm-color-pearl); border: 1px solid #C9CFE6; box-shadow: inset 0 2px 4px rgba(40, 50, 110, 0.18); color: var(--gm-color-ink); }
.gyk-form input:focus { border-color: var(--gm-color-link); }
.gyk-btn { position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 0 1.5rem; border: 1px solid #fff; border-radius: 999px; background: linear-gradient(160deg, var(--gm-color-pink), var(--gm-color-ice)); color: var(--gm-color-ink); font-weight: 900; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 10px 18px -12px rgba(40, 50, 110, 0.55); }
.gyk-btn::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3px; height: 45%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); pointer-events: none; z-index: -1; }
.gyk-btn:hover { transform: translateY(-2px); }
.gyk-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(40, 50, 110, 0.25); }

/* motion */
.gyk-sheen { position: relative; overflow: hidden; height: 3.5rem; border-radius: 999px; background: linear-gradient(160deg, #C8D4F2, #A9B8E0); border: 1px solid #fff; }
.gyk-sheen i { position: absolute; top: 0; bottom: 0; left: 30%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .gyk-sheen i { left: -40%; animation: gyk-sheen 4s linear infinite; }
  .gyk-btn { transition: transform 200ms ease-out; }
}
@keyframes gyk-sheen { to { left: 140%; } }

@media (max-width: 720px) {
  .gyk-f, .gyk-f--r { margin-left: 0; margin-right: 0; }
  .gm--y2k { border-radius: 24px; }
  .gm--y2k .gm__head { grid-template-columns: minmax(0, 1fr); }
  .gm--y2k .gm__title { grid-row: auto; }
}