/* La materia es una intervención física sobre la página, no un tema de color. */
.matter-canvas {
  position:fixed;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  z-index:24;
  pointer-events:none;
  opacity:.95;
  contain:strict;
}
.matter-status {
  position:fixed;
  bottom:22px;
  left:24px;
  z-index:26;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:min(360px,calc(100vw - 156px));
  padding:11px 16px 11px 11px;
  background:rgba(7,30,43,.83);
  border:1px solid rgba(231,225,197,.3);
  box-shadow:0 8px 30px rgba(8,22,29,.16);
  color:#e6e5da;
  backdrop-filter:blur(12px);
  pointer-events:none;
}
.matter-status-symbol {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid currentColor;
  border-radius:50%;
  font:500 23px/1 'IBM Plex Mono',monospace;
  color:#99dcee;
  flex:none;
}
.matter-status strong {
  display:block;
  margin-bottom:3px;
  font:700 13px/1.1 'Bricolage Grotesque',sans-serif;
  letter-spacing:.015em;
}
.matter-status small {
  display:block;
  font:400 10px/1.3 'IBM Plex Mono',monospace;
  color:#c1cdd0;
}
.matter-menu {width:268px;z-index:50}
.materia-menu button {padding:10px 11px;gap:13px}
.materia-menu .swatch {flex:none;width:23px;height:23px;border-radius:50%}
.matter-choice-copy {display:grid;gap:2px;font-weight:600;font-size:13px}
.matter-choice-copy small {font-weight:400;font-size:10px;color:#656c6b;line-height:1.35}
.materia-menu button[aria-pressed=true] .matter-choice-copy {color:#0d536f}
.materia-menu .matter-new-option {border-top:1px solid #ada28d;margin-top:8px;padding-top:17px;position:relative}
.matter-new-option .matter-choice-copy {color:#22565b}
.matter-new-pill {align-self:flex-start;font:700 8px/1 'IBM Plex Mono',monospace;letter-spacing:.04em;background:#b88448;color:#fff;padding:5px 6px;margin-left:auto}
.swatch.neumen {background:radial-gradient(circle,#e0c48c 0 24%,#164d57 26% 52%,#ebd7ab 54% 56%,#123141 58%);box-shadow:0 0 0 1px #ab844d}
body[data-materia=gaseoso] .matter-status-symbol{color:#e0e9ed}
body[data-materia=solido] .matter-status-symbol{color:#efbc80}
body[data-materia=plasma] .matter-status-symbol{color:#eba4fb}
body[data-materia=neumen]{--teal:#205866;--coral:#b88957;--ochre:#e5bf88;--signal:#88d3d6}
body[data-materia=neumen] .matter-status-symbol{color:#ebce94}
body[data-materia=neumen] .matter-status{border-color:#bb9867}

/* An editorial announcement, part of the document when this state is active. */
.neumen-state-feature{position:relative;isolation:isolate;overflow:hidden;background:#102e39;color:#ecdfc7;border-top:4px solid #b88c52;border-bottom:1px solid #c2a16d}
.neumen-state-feature:before{content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle at 76% 50%,transparent 0 62px,rgba(210,188,141,.085) 63px,transparent 64px),linear-gradient(110deg,rgba(19,57,65,.1),rgba(24,90,91,.38));transform:rotate(-8deg)}
.neumen-state-inner{display:grid;grid-template-columns:1.13fr .87fr;gap:8vw;align-items:center;padding-top:76px;padding-bottom:78px}
.neumen-state-kicker{display:flex;align-items:center;gap:15px;color:#e5c999;font:500 clamp(10px,1vw,13px)/1.5 'IBM Plex Mono',monospace;letter-spacing:.06em}
.neumen-state-glyph{width:38px;height:38px;display:grid;place-items:center;border:1px solid #cbb17c;font:700 17px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.05em;transform:rotate(-6deg)}
.neumen-state-heading h2{font:750 clamp(67px,8.4vw,138px)/.83 'Bricolage Grotesque',sans-serif;letter-spacing:-.064em;margin:30px 0 0}
.neumen-state-heading h2 em{font-style:normal;color:#e6bf78}
.neumen-state-description{padding:25px 0 15px;border-top:1px solid rgba(231,215,171,.38)}
.neumen-state-statement{font:550 clamp(24px,2.6vw,38px)/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;color:#f4e6ca;margin:0 0 24px}
.neumen-state-description>p:not(.neumen-state-statement){font:400 15px/1.8 'IBM Plex Sans',sans-serif;color:#c8d4d0;max-width:550px;margin:0 0 27px}
.neumen-state-sequence{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0 23px;color:#e7c58d;font:500 11px/1.5 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.045em}
.neumen-state-sequence span:nth-child(even){color:#89cace;font-size:17px}
.neumen-reorganize{background:transparent;border:1px solid rgba(224,194,139,.63);color:#f2d9aa;padding:14px 20px;font:500 11px/1.2 'IBM Plex Mono',monospace;letter-spacing:.065em;transition:background .2s,color .2s}
.neumen-reorganize:hover{background:#e6c48f;color:#142c35}
.neumen-state-description>small{display:block;color:#9fbbb9;font:400 10px/1.55 'IBM Plex Mono',monospace;margin-top:20px}

/* El escenario queda detrás de los controles, pero delante de los planos. */
body[data-materia=liquido] .hero-art-cleared,
body[data-materia=gaseoso] .hero-art-cleared,
body[data-materia=plasma] .hero-art-cleared,
body[data-materia=solido] .hero-art-cleared {transition:opacity 1.2s ease}

@media(max-width:760px){
  .materia-menu{width:min(268px,calc(100vw - 20px));right:-40px}
  .matter-status{bottom:15px;left:12px;gap:8px;padding:8px 11px 8px 8px;max-width:calc(100vw - 153px)}
  .matter-status-symbol{width:30px;height:30px;font-size:18px}
  .matter-status strong{font-size:11px}
  .matter-status small{font-size:9px}
  .matter-new-pill{font-size:7px}
  .neumen-state-inner{grid-template-columns:1fr;gap:35px;padding-top:57px;padding-bottom:57px}
  .neumen-state-heading h2{font-size:clamp(66px,14vw,102px)}
  .neumen-state-kicker{font-size:9px}
  .neumen-state-statement{font-size:29px}
  .neumen-state-sequence{gap:8px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.matter-canvas{opacity:.7}}