@font-face {
  font-family: "Konkhmer Sleokchher";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/konkhmer-sleokchher-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  color: #000;
  background: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-synthesis: none;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-300-italic.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
}

.liquid-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 70%, #d3c0ec 0%, transparent 55%),
    radial-gradient(ellipse at 15% 35%, #e5d9f4 0%, transparent 55%),
    #fcfaff;
}

#liquid-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.identity-frame { position: relative; z-index: 1; }

.motion-toggle {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #49385f;
  font: 12px "IBM Plex Sans", sans-serif;
  cursor: pointer;
}

.motion-toggle img { display: block; width: 24px; height: 24px; }
.motion-toggle .motion-toggle__play,
.motion-toggle[aria-pressed="true"] .motion-toggle__pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__play { display: block; }
.motion-toggle:hover { background: #ffffff80; }
.motion-toggle:focus-visible { outline: 2px solid #440099; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #liquid-canvas, body:not(.game-mode) #motion-toggle { display: none; }
}

.game-toggle { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px); }
#sand-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background: #000;
  touch-action: none;
  cursor: none;
}
#sand-canvas:focus-visible { outline: 1px solid #ffffff55; outline-offset: -4px; }
body.game-mode { color: #fff; background: #000; }
#sand-cursor {
  position: fixed;
  z-index: 3;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
}
.game-mode .identity-frame { pointer-events: none; }
.game-mode .identity__link, .game-mode .identity__school a { pointer-events: auto; }
.game-mode .identity__school { color: #fff; }
.game-mode .identity__icon img, .game-mode .motion-toggle img { filter: brightness(0) invert(1); }
.game-mode .identity__link:hover, .game-mode .motion-toggle:hover { background: #ffffff18; }
.game-mode .identity__link:focus-visible, .game-mode .motion-toggle:focus-visible { outline-color: #fff; }
.game-mode .game-toggle { background: #ffffff18; }
.sand-tools {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  --sand-pixel: 6px;
  max-width: min(calc(100% - 224px), 780px);
  max-height: min(160px, 35svh);
  padding: 4px;
  margin: -4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff55 transparent;
  color: #fff;
  font-size: 12px;
}
.sand-tools__buttons { display: flex; flex-wrap: wrap; gap: max(8px, var(--sand-pixel)); }
.sand-tools button {
  width: calc(4 * var(--sand-pixel));
  height: calc(4 * var(--sand-pixel));
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--swatch, #000);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.sand-tools button[data-material="0"] { background: conic-gradient(#555 25%, #111 0 50%, #555 0 75%, #111 0) 0 0 / calc(2 * var(--sand-pixel)) calc(2 * var(--sand-pixel)); }
.sand-tools button[data-material="16"],
.sand-tools button[data-material="17"] {
  background: conic-gradient(var(--swatch) 25%, #111 0 50%, var(--swatch) 0 75%, #111 0) 0 0 / calc(2 * var(--sand-pixel)) calc(2 * var(--sand-pixel));
}
.sand-tools button[data-material="18"] {
  background: linear-gradient(#fff, #fff) center / 50% 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 50% no-repeat, var(--swatch);
}
.sand-tools button[data-material="19"] {
  background: linear-gradient(#fff, #fff) center / 50% 2px no-repeat, var(--swatch);
}
#sand-clear { border: 1px solid #777; background: linear-gradient(45deg, transparent 47%, #aaa 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, #aaa 48% 52%, transparent 53%); }
.sand-tools button[aria-pressed="true"] { outline: 1px solid #fff; outline-offset: 3px; }
.sand-tools button:hover { outline: 1px solid #fff; outline-offset: 3px; }
.sand-tools button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sand-options {
  position: fixed;
  right: calc(max(12px, env(safe-area-inset-right)) + 48px);
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  color: #fff;
}
.sand-options[hidden] { display: none; }
.sand-options button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid #ffffff44;
  border-radius: 0;
  background: #000c;
  color: inherit;
  cursor: pointer;
}
.sand-options svg { display: block; width: 24px; height: 24px; }
.sand-options button:hover { border-color: #fff; }
.sand-options button[aria-pressed="true"] { color: #000; background: #fff; border-color: #fff; }
.sand-options button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
  .sand-tools { max-width: calc(100% - 184px); }
  .sand-options button { width: 32px; height: 32px; padding: 3px; }
}

/* One shared scale keeps the name and icons the same height. The compact
   composition needs 289px for the name, 102.4px for the grid, and 7px padding. */
.identity-frame { container: header / inline-size; }

.identity {
  --unit: min(calc(100cqw / 398.4), 1px);
  --name-line-height: calc(51.2 * var(--unit));
  --icon-gap: calc(2 * var(--unit));
  --icon-size: calc(var(--name-line-height) - var(--icon-gap) / 2);
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-right: calc(7 * var(--unit));
}

.identity__brand {
  flex: 1 1 0;
  min-width: 0;
}

.identity__type {
  position: relative;
  height: calc(110 * var(--unit));
}

.identity__name {
  position: absolute;
  top: calc(4 * var(--unit));
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "Konkhmer Sleokchher", sans-serif;
  font-size: calc(64 * var(--unit));
  font-weight: 400;
  line-height: var(--name-line-height);
  letter-spacing: -0.13em;
  /* Match the font's Figma baseline to its browser line box. */
  transform: translateY(calc(1.28 * var(--unit)));
}

.identity__name > span { display: block; white-space: nowrap; }

.identity__details {
  position: absolute;
  top: calc(51 * var(--unit));
  left: calc(177 * var(--unit));
  width: calc(116 * var(--unit));
  margin: 0;
  font-size: calc(32 * var(--unit));
  font-weight: 400;
  line-height: 0.77;
  letter-spacing: -0.09em;
  text-align: center;
  /* CSS includes tracking after the last glyph; Figma centers without it. */
  padding-right: 0.09em;
  transform: translateY(calc(0.8 * var(--unit)));
}

.identity__studies,
.identity__school {
  display: block;
  white-space: nowrap;
}

.identity__school { color: #440099; }

.identity__school a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.identity__studies { white-space: pre; }
.identity__studies em,
.desktop-space { font-weight: 300; font-style: italic; }
.desktop-space { display: none; }

/* Keep @ independent of WSU's centered line, as in Figma node 2:234. */
.identity__at {
  position: absolute;
  top: calc(79 * var(--unit));
  left: calc(184 * var(--unit));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20 * var(--unit));
  height: calc(20 * var(--unit));
  font-size: calc(20 * var(--unit));
  font-style: italic;
  font-weight: 300;
  line-height: 0.8;
  transform: translateY(calc(1 * var(--unit)));
}

.identity__links {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, var(--icon-size));
  gap: var(--icon-gap);
  margin-top: calc(5.28 * var(--unit));
}

.identity__link {
  position: relative;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 3px;
}

.identity__link:hover { background: #f1f1f1; }
.identity__link:focus-visible { outline: 2px solid #440099; outline-offset: 1px; }

/* Phosphor Regular icons share a 256px square canvas and a common weight.
   Size all four identically from the cell, with no transforms or offsets. */
.identity__icon {
  position: absolute;
  inset: 0;
}
.identity__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Keep four icons in a row beside the wrapped name while they fit:
   289px compact name + four 51.2px icons + three 2px gaps + 4px = 503.8px. */
@container header (min-width: 504px) {
  .identity { --icon-size: var(--name-line-height); padding-right: 4px; }
  .identity__links { grid-template-columns: repeat(4, var(--icon-size)); }
}

/* The name unwraps separately once its full 464px width fits beside the row:
   464px name + four 51.2px icons + three 2px gaps + 4px = 678.8px. */
@container header (min-width: 679px) {
  .identity__name { white-space: nowrap; }
  .identity__name > span { display: inline; }
  .identity__type { height: 80px; }
  .identity__details {
    left: 271px;
    width: 207px;
    line-height: 0.8;
    letter-spacing: -0.06em;
    padding-right: 0.06em;
    white-space: nowrap;
  }
  .identity__studies, .identity__school, .desktop-space { display: inline; }
  .desktop-space { white-space: pre; }
  .mobile-space { display: none; }
  .identity__at { left: 383px; top: 53px; font-weight: 400; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}