/*
 * Homepage composition layer.
 *
 * The reveal card and its switch entry remain owned by index.html.  This file
 * only paints the revealed homepage: one shared semantic DOM, twenty spatial
 * compositions, and a non-interactive world behind the information surface.
 */

:root {
  --tw-x: 0;
  --tw-y: 0;
  --tw-canvas: #0e1724;
  --tw-shell: rgba(16, 24, 36, .9);
  --tw-tile: rgba(255, 255, 255, .08);
  --tw-border: rgba(255, 255, 255, .18);
  --tw-world-border: rgba(255, 255, 255, .2);
  --tw-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --tw-radius: 8px;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 92px;
  --tw-gap: 12px;
  --tw-enter: tw-enter-fade;
  --tw-enter-duration: .48s;
  --tw-texture: none;
  --tw-art: none;
}

/* The previous login-only glows are not part of the themed homepage world. */
body.portal-themed.portal-home .glow { display: none !important; }

body.portal-themed.portal-home {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(24px, 5vh, 64px) max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--tw-canvas) !important;
  color: var(--st-text) !important;
}

body.portal-themed.portal-home .theme-scenery {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  contain: strict !important;
  isolation: isolate;
}

.theme-scenery__texture,
.theme-scenery__plane,
.theme-scenery__line,
.theme-scenery__object {
  position: absolute;
  pointer-events: none;
}

.theme-scenery__texture {
  inset: -8%;
  z-index: 0;
  opacity: .62;
  background-image: var(--tw-texture), var(--tw-art);
  background-size: cover, 100% 100%;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  transform: translate3d(calc(var(--tw-x) * -.35px), calc(var(--tw-y) * -.35px), 0) scale(1.04);
  transition: transform .35s ease-out;
}

.theme-scenery__plane {
  z-index: 1;
  opacity: .65;
  transform: translate3d(calc(var(--tw-x) * .55px), calc(var(--tw-y) * .55px), 0);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2, .75, .25, 1);
}

.theme-scenery__line,
.theme-scenery__object { z-index: 2; }

.theme-scenery__line--a { inset: 8% 4% auto; height: 1px; background: var(--tw-world-border); }
.theme-scenery__line--b { inset: auto 4% 8%; height: 1px; background: var(--tw-world-border); }
.theme-scenery__line--c { inset: 10% auto 10% 7%; width: 1px; background: var(--tw-world-border); }

body.portal-themed.portal-home #portalCard {
  position: relative !important;
  z-index: 2 !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: 30px 34px 34px !important;
  overflow: visible !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  background: var(--tw-shell) !important;
  background-image: none !important;
  box-shadow: var(--tw-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.portal-themed.portal-home #portalCard > .crt-body {
  display: block !important;
  padding: 0 !important;
}

body.portal-themed.portal-home #portalCard .brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  text-align: left !important;
}

body.portal-themed.portal-home #portalCard .brand-icon {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  border-radius: var(--tw-radius) !important;
  display: grid !important;
  place-items: center !important;
  background: var(--tw-tile) !important;
  border: 1px solid var(--tw-border) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.portal-themed.portal-home #portalCard .brand h1 {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: min(100%, 620px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--st-text) !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.portal-themed.portal-home #portalCard .brand .sub {
  flex: 1 1 260px !important;
  width: auto !important;
  max-width: 430px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  color: var(--st-text2) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  display: block !important;
}

body.portal-themed.portal-home #portalCard .app-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: var(--tw-grid) !important;
  grid-auto-rows: var(--tw-row) !important;
  grid-auto-flow: dense !important;
  gap: var(--tw-gap) !important;
  border: 0 !important;
}

body.portal-themed.portal-home #portalCard .app-tile {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: var(--tw-row) !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  padding: 16px 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  background: var(--tw-tile) !important;
  background-image: none !important;
  color: var(--st-text) !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .24s cubic-bezier(.2, .75, .25, 1), border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

body.portal-themed.portal-home #portalCard .app-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .18 !important;
  background: var(--tw-tile-art, none) !important;
  mix-blend-mode: overlay;
}

body.portal-themed.portal-home #portalCard .app-tile > * { position: relative; z-index: 1; }
body.portal-themed.portal-home #portalCard .tile-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 32px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  color: var(--st-accent) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
body.portal-themed.portal-home #portalCard .tile-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--st-text) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}
body.portal-themed.portal-home #portalCard .tile-desc {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--st-text2) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

body.portal-themed.portal-home #portalCard .maint-toggle,
body.portal-themed.portal-home #portalCard > .crt-body > .text-link {
  position: relative !important;
  z-index: 2 !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding: 10px 8px !important;
  color: var(--st-text2) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
body.portal-themed.portal-home #portalCard .maint-box {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  background: var(--tw-shell) !important;
  box-shadow: none !important;
}
body.portal-themed.portal-home #portalCard .maint-box h3,
body.portal-themed.portal-home #portalCard .maint-title,
body.portal-themed.portal-home #portalCard .maint-desc,
body.portal-themed.portal-home #portalCard .maint-date { color: var(--st-text) !important; }
body.portal-themed.portal-home #portalCard .maint-desc { color: var(--st-text2) !important; }
body.portal-themed.portal-home #portalCard .maint-date { color: var(--st-text3) !important; }

@media (hover: hover) and (pointer: fine) {
  body.portal-themed.portal-home #portalCard .app-tile:hover {
    border-color: var(--st-accent) !important;
    background: var(--tw-tile-hover, var(--tw-tile)) !important;
    box-shadow: var(--tw-tile-shadow, 0 12px 28px rgba(0, 0, 0, .14)) !important;
  }
}

/* A single, short arrival animation is shared by the controller but each
   theme supplies a distinct physical metaphor through --tw-enter. */
body.portal-themed.portal-home.theme-enter #portalCard .app-tile {
  animation: var(--tw-enter) var(--tw-enter-duration) both !important;
}
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(2) { animation-delay: .04s !important; }
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(3) { animation-delay: .08s !important; }
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(4) { animation-delay: .12s !important; }
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(5) { animation-delay: .16s !important; }
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(6) { animation-delay: .20s !important; }
body.portal-themed.portal-home.theme-enter #portalCard .app-tile:nth-child(7) { animation-delay: .24s !important; }

body.portal-themed.portal-home.theme-motion-paused .theme-scenery *,
body.portal-themed.portal-home.theme-motion-paused #portalCard .app-tile { animation-play-state: paused !important; }

/* -------------------------------------------------------------------------
   Paper: editorial front page
   ------------------------------------------------------------------------- */
body.ps-paper {
  --tw-canvas: #e8e1d2;
  --tw-shell: rgba(250, 247, 238, .9);
  --tw-tile: rgba(255, 253, 245, .9);
  --tw-tile-hover: #fffdf7;
  --tw-border: #bdb29e;
  --tw-world-border: rgba(70, 61, 45, .28);
  --tw-shadow: 0 18px 42px rgba(67, 52, 32, .16);
  --tw-radius: 2px;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 94px;
  --tw-gap: 9px;
  --tw-enter: tw-paper-in;
  --tw-texture: url("assets/seal-textures/crayon-paper.webp");
  --tw-art: repeating-linear-gradient(90deg, transparent 0 119px, rgba(124, 39, 31, .18) 120px 121px), repeating-linear-gradient(0deg, transparent 0 37px, rgba(62, 54, 39, .15) 38px 39px);
}
body.ps-paper #portalCard { border-top: 7px solid #c5362d !important; }
body.ps-paper #portalCard .brand { border-bottom: 1px solid var(--tw-border); padding-bottom: 18px !important; }
body.ps-paper #portalCard .brand-icon { border-radius: 0 !important; border: 2px solid #c5362d !important; color: #c5362d; }
body.ps-paper #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-paper #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-paper #portalCard .app-tile { border-width: 0 0 1px !important; border-radius: 0 !important; }
body.ps-paper #portalCard .app-tile::after { content: ""; position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border: 1px solid #c5362d; }
body.ps-paper .theme-scenery__plane { inset: 14% 8% 14%; border-top: 1px solid var(--tw-world-border); border-bottom: 1px solid var(--tw-world-border); }
body.ps-paper .theme-scenery__object--a { left: 3%; top: 23%; width: 18vw; max-width: 260px; height: 18px; background: #c5362d; transform: rotate(-6deg); animation: tw-paper-register 10s ease-in-out infinite; }
body.ps-paper .theme-scenery__object--b { right: 4%; bottom: 24%; width: 16vw; max-width: 220px; height: 1px; background: #403d36; }
body.ps-paper .theme-scenery__object--c { right: 9%; top: 12%; width: 42px; height: 42px; border: 1px solid #c5362d; transform: rotate(45deg); }

/* -------------------------------------------------------------------------
   Doodle: controlled scrapbook collage
   ------------------------------------------------------------------------- */
body.ps-doodle {
  --tw-canvas: #f6d28c;
  --tw-shell: rgba(255, 247, 222, .82);
  --tw-tile: rgba(255, 252, 238, .92);
  --tw-tile-hover: #fffef7;
  --tw-border: #c99d65;
  --tw-world-border: rgba(93, 68, 42, .25);
  --tw-shadow: 7px 9px 0 rgba(97, 62, 35, .18);
  --tw-radius: 4px;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 96px;
  --tw-gap: 15px;
  --tw-enter: tw-doodle-in;
  --tw-texture: url("assets/seal-textures/crayon-paper.webp");
  --tw-art: radial-gradient(circle, rgba(53, 111, 168, .23) 0 1px, transparent 1.5px);
}
body.ps-doodle #portalCard { transform: rotate(-.35deg) !important; }
body.ps-doodle #portalCard .brand { align-items: flex-start !important; }
body.ps-doodle #portalCard .brand-icon { border-radius: 50% !important; transform: rotate(7deg) !important; }
body.ps-doodle #portalCard .app-tile { box-shadow: 4px 5px 0 rgba(97, 62, 35, .14) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(1) { grid-column: span 2; transform: rotate(-1deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(2) { transform: rotate(1.3deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(3) { transform: rotate(-.8deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(4) { transform: rotate(.7deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(5) { transform: rotate(-1.2deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(6) { transform: rotate(.9deg) !important; }
body.ps-doodle #portalCard .app-tile:nth-child(7) { grid-column: span 2; transform: rotate(-.4deg) !important; }
body.ps-doodle #portalCard .app-tile::after { content: ""; position: absolute; top: -6px; left: 24px; width: 58px; height: 14px; background: rgba(224, 154, 69, .62); transform: rotate(-4deg); }
body.ps-doodle .theme-scenery__plane { inset: 10% 6%; background-image: radial-gradient(circle, rgba(53,111,168,.3) 0 1px, transparent 1.5px); background-size: 18px 18px; }
body.ps-doodle .theme-scenery__object--a { left: 6%; top: 20%; width: 150px; height: 90px; border: 3px solid #4f8fc7; border-radius: 48% 52% 42% 58%; transform: rotate(-13deg); animation: tw-doodle-draw 7s ease-in-out infinite; }
body.ps-doodle .theme-scenery__object--b { right: 6%; bottom: 18%; width: 180px; height: 54px; border-top: 4px solid #e88f2f; border-bottom: 2px solid #e88f2f; transform: rotate(8deg); }
body.ps-doodle .theme-scenery__object--c { left: 4%; bottom: 15%; width: 74px; height: 74px; border: 3px dashed #e06c45; transform: rotate(19deg); }

/* -------------------------------------------------------------------------
   Neo: tactile embossed console
   ------------------------------------------------------------------------- */
body.ps-neo {
  --tw-canvas: #d8dee6;
  --tw-shell: #d8dee6;
  --tw-tile: #d8dee6;
  --tw-tile-hover: #e3e8ee;
  --tw-border: #b2bbc7;
  --tw-world-border: rgba(72, 85, 103, .22);
  --tw-shadow: 14px 16px 35px rgba(91, 105, 125, .22), -12px -12px 26px rgba(255,255,255,.8);
  --tw-radius: 8px;
  --tw-grid: repeat(3, minmax(0, 1fr));
  --tw-row: 104px;
  --tw-gap: 14px;
  --tw-enter: tw-neo-in;
  --tw-texture: url("assets/seal-textures/plaster.webp");
  --tw-art: linear-gradient(135deg, rgba(255,255,255,.55), transparent 32% 68%, rgba(128,141,159,.28));
}
body.ps-neo #portalCard { border: 0 !important; }
body.ps-neo #portalCard .brand { justify-content: center !important; text-align: center !important; }
body.ps-neo #portalCard .brand .sub { text-align: center !important; }
body.ps-neo #portalCard .brand-icon { border-radius: 50% !important; box-shadow: inset 5px 5px 10px rgba(107,119,134,.28), inset -5px -5px 10px rgba(255,255,255,.8) !important; }
body.ps-neo #portalCard .app-tile { border: 0 !important; box-shadow: inset 5px 5px 10px rgba(115,126,141,.22), inset -6px -6px 12px rgba(255,255,255,.82) !important; }
body.ps-neo #portalCard .app-tile:nth-child(1) { grid-column: span 3; }
body.ps-neo #portalCard .app-tile:nth-child(1) .tile-icon { align-self: flex-start; }
body.ps-neo #portalCard .app-tile:active { box-shadow: inset 7px 7px 12px rgba(115,126,141,.3), inset -3px -3px 8px rgba(255,255,255,.7) !important; transform: translateY(2px) !important; }
body.ps-neo .theme-scenery__plane { inset: 12%; border: 2px solid rgba(255,255,255,.38); border-radius: 30px; box-shadow: inset 12px 12px 25px rgba(105,119,137,.14), inset -12px -12px 25px rgba(255,255,255,.7); }
body.ps-neo .theme-scenery__object--a { left: 2%; top: 22%; width: 210px; height: 76px; border-radius: 18px; box-shadow: 10px 12px 20px rgba(92,105,125,.2), -8px -8px 16px rgba(255,255,255,.75); animation: tw-neo-pressure 8s ease-in-out infinite; }
body.ps-neo .theme-scenery__object--b { right: 4%; bottom: 18%; width: 180px; height: 36px; border-radius: 18px; box-shadow: inset 5px 5px 10px rgba(92,105,125,.22), inset -5px -5px 10px rgba(255,255,255,.76); }
body.ps-neo .theme-scenery__object--c { right: 12%; top: 16%; width: 58px; height: 58px; border-radius: 50%; border: 7px solid #c2cbd5; box-shadow: inset 4px 4px 8px rgba(92,105,125,.3), 4px 4px 8px rgba(92,105,125,.2); }

/* -------------------------------------------------------------------------
   CRT: terminal directory
   ------------------------------------------------------------------------- */
body.ps-crt {
  --tw-canvas: #020a06;
  --tw-shell: rgba(3, 18, 10, .94);
  --tw-tile: rgba(6, 30, 17, .9);
  --tw-tile-hover: #0b3c21;
  --tw-border: #246a45;
  --tw-world-border: rgba(61, 255, 138, .27);
  --tw-shadow: 0 0 0 1px rgba(61,255,138,.12), 0 20px 70px rgba(0,0,0,.5);
  --tw-radius: 0;
  --tw-grid: repeat(2, minmax(0, 1fr));
  --tw-row: 76px;
  --tw-gap: 5px;
  --tw-enter: tw-crt-in;
  --tw-texture: url("assets/seal-textures/metal.webp");
  --tw-art: repeating-linear-gradient(0deg, rgba(61,255,138,.12) 0 1px, transparent 1px 5px);
}
body.ps-crt #portalCard { border: 1px solid #246a45 !important; box-shadow: inset 0 0 0 6px rgba(4,16,10,.9), var(--tw-shadow) !important; }
body.ps-crt #portalCard .crt-topbar { display: flex !important; justify-content: space-between; padding: 8px 10px; margin: -30px -34px 24px; border-bottom: 1px solid #246a45; color: #3dff8a; font: 12px/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; }
body.ps-crt #portalCard .brand { display: block !important; margin-bottom: 16px !important; }
body.ps-crt #portalCard .brand-icon { display: none !important; }
body.ps-crt #portalCard .brand h1 { font: 26px/1.1 "VT323", monospace !important; letter-spacing: .08em !important; text-transform: uppercase; }
body.ps-crt #portalCard .brand .sub { max-width: none !important; margin-top: 5px !important; font: 12px/1.3 "JetBrains Mono", monospace !important; }
body.ps-crt #portalCard .app-tile { padding: 10px 14px !important; border-radius: 0 !important; font-family: "JetBrains Mono", monospace; }
body.ps-crt #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-crt #portalCard .tile-icon { width: auto !important; height: auto !important; margin-bottom: 2px !important; align-self: flex-start; font-size: 20px !important; }
body.ps-crt #portalCard .tile-name { font-size: 13px !important; }
body.ps-crt #portalCard .tile-desc { font-size: 10px !important; }
body.ps-crt #portalCard .app-tile::after { content: "_"; position: absolute; right: 10px; bottom: 7px; color: #3dff8a; animation: tw-crt-cursor 1s steps(2, jump-none) infinite; }
body.ps-crt .theme-scenery__plane { inset: 8% 5%; border: 1px solid rgba(61,255,138,.18); background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(61,255,138,.08) 6px); }
body.ps-crt .theme-scenery__object--a { left: 5%; top: 17%; width: 90%; height: 1px; background: #3dff8a; box-shadow: 0 0 14px #3dff8a; animation: tw-crt-scan 6s linear infinite; }
body.ps-crt .theme-scenery__object--b { right: 8%; bottom: 16%; width: 170px; height: 1px; background: #3dff8a; }
body.ps-crt .theme-scenery__object--c { left: 8%; bottom: 16%; width: 74px; height: 28px; border: 1px solid #3dff8a; }

/* -------------------------------------------------------------------------
   Cosmic: orbital workspace
   ------------------------------------------------------------------------- */
body.ps-cosmic {
  --tw-canvas: #05091b;
  --tw-shell: rgba(12, 18, 45, .78);
  --tw-tile: rgba(24, 32, 67, .72);
  --tw-tile-hover: rgba(42, 55, 105, .84);
  --tw-border: rgba(121, 137, 224, .5);
  --tw-world-border: rgba(133, 151, 255, .34);
  --tw-shadow: 0 26px 90px rgba(0, 0, 0, .5), 0 0 60px rgba(94, 184, 255, .12);
  --tw-radius: 8px;
  --tw-grid: repeat(3, minmax(0, 1fr));
  --tw-row: 102px;
  --tw-gap: 11px;
  --tw-enter: tw-cosmic-in;
  --tw-texture: url("assets/seal-textures/holographic.webp");
  --tw-art: radial-gradient(circle at 14% 20%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 70% 64%, rgba(94,184,255,.8) 0 1px, transparent 1.8px), radial-gradient(circle at 44% 84%, rgba(141,128,255,.65) 0 1px, transparent 1.8px);
}
body.ps-cosmic #portalCard { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.ps-cosmic #portalCard .brand { align-items: flex-start !important; }
body.ps-cosmic #portalCard .brand-icon { border-radius: 50% !important; border-color: #8d80ff !important; box-shadow: 0 0 24px rgba(141,128,255,.5) !important; }
body.ps-cosmic #portalCard .app-tile:nth-child(1) { grid-column: span 3; justify-content: flex-start !important; }
body.ps-cosmic #portalCard .app-tile { border-radius: 8px !important; }
body.ps-cosmic #portalCard .app-tile::after { content: ""; position: absolute; width: 7px; height: 7px; right: 14px; top: 14px; border-radius: 50%; background: var(--st-accent2); box-shadow: 0 0 12px var(--st-accent2); }
body.ps-cosmic .theme-scenery__plane { left: 50%; top: 50%; width: min(94vw, 1320px); height: min(52vw, 620px); border: 1px solid rgba(141,128,255,.3); border-radius: 50%; transform: translate3d(-50%, -50%, 0) rotate(-14deg); animation: tw-cosmic-orbit 26s linear infinite; }
body.ps-cosmic .theme-scenery__object--a { left: 50%; top: 50%; width: min(72vw, 980px); height: min(26vw, 350px); border: 1px solid rgba(94,184,255,.34); border-radius: 50%; transform: translate(-50%, -50%) rotate(28deg); }
body.ps-cosmic .theme-scenery__object--b { left: 8%; top: 24%; width: 3px; height: 3px; background: #fff; box-shadow: 0 0 14px #fff; animation: tw-cosmic-node 5s ease-in-out infinite; }
body.ps-cosmic .theme-scenery__object--c { right: 12%; bottom: 20%; width: 4px; height: 4px; background: #5eb8ff; box-shadow: 0 0 16px #5eb8ff; animation: tw-cosmic-node 7s ease-in-out .8s infinite; }

/* -------------------------------------------------------------------------
   Cyber: clipped data channels
   ------------------------------------------------------------------------- */
body.ps-cyber {
  --tw-canvas: #090214;
  --tw-shell: rgba(19, 8, 34, .92);
  --tw-tile: rgba(17, 26, 44, .9);
  --tw-tile-hover: #202e4a;
  --tw-border: #237b8b;
  --tw-world-border: rgba(0, 220, 237, .3);
  --tw-shadow: 0 24px 80px rgba(0, 0, 0, .52);
  --tw-radius: 0;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 92px;
  --tw-gap: 8px;
  --tw-enter: tw-cyber-in;
  --tw-texture: url("assets/seal-textures/holographic.webp");
  --tw-art: repeating-linear-gradient(135deg, transparent 0 24px, rgba(0,220,237,.14) 25px 26px), repeating-linear-gradient(45deg, transparent 0 31px, rgba(255,40,202,.1) 32px 33px);
}
body.ps-cyber #portalCard { clip-path: polygon(0 12px, 12px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 22px 100%, 0 calc(100% - 22px)) !important; border: 1px solid #00dced !important; }
body.ps-cyber #portalCard .brand { border-left: 3px solid #ff28ca; padding-left: 16px !important; }
body.ps-cyber #portalCard .brand-icon { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
body.ps-cyber #portalCard .app-tile { clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); border-color: #176c80 !important; }
body.ps-cyber #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-cyber #portalCard .app-tile:nth-child(4),
body.ps-cyber #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-cyber #portalCard .app-tile::after { content: "//"; position: absolute; right: 12px; top: 10px; color: #ff28ca; font: 11px/1 "JetBrains Mono", monospace; }
body.ps-cyber .theme-scenery__plane { inset: 12% 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(0,220,237,.16) 80px 81px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,40,202,.13) 60px 61px); transform: translate3d(calc(var(--tw-x) * .3px), calc(var(--tw-y) * .3px), 0) skewY(-4deg); }
body.ps-cyber .theme-scenery__object--a { left: -10%; top: 30%; width: 120%; height: 2px; background: #00dced; box-shadow: 0 0 18px rgba(0,220,237,.8); animation: tw-cyber-sweep 5s ease-in-out infinite; }
body.ps-cyber .theme-scenery__object--b { right: 4%; top: 14%; width: 130px; height: 18px; border-block: 1px solid #ff28ca; transform: skewX(-28deg); }
body.ps-cyber .theme-scenery__object--c { left: 8%; bottom: 17%; width: 180px; height: 1px; background: #ff28ca; }

/* -------------------------------------------------------------------------
   Glass: asymmetrical translucent bento
   ------------------------------------------------------------------------- */
body.ps-glass {
  --tw-canvas: #dce8f8;
  --tw-shell: rgba(246, 251, 255, .46);
  --tw-tile: rgba(255, 255, 255, .52);
  --tw-tile-hover: rgba(255, 255, 255, .74);
  --tw-border: rgba(91, 121, 164, .36);
  --tw-world-border: rgba(78, 134, 207, .24);
  --tw-shadow: 0 26px 70px rgba(78, 108, 148, .2);
  --tw-radius: 8px;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 98px;
  --tw-gap: 12px;
  --tw-enter: tw-glass-in;
  --tw-texture: url("assets/seal-textures/condensation.webp");
  --tw-art: linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.7) 45% 47%, transparent 50%), linear-gradient(30deg, rgba(78,134,207,.12), transparent 45%);
}
body.ps-glass #portalCard { background: rgba(246,251,255,.34) !important; backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); }
body.ps-glass #portalCard .brand { align-items: flex-start !important; }
body.ps-glass #portalCard .brand-icon { border-radius: 18px !important; background: rgba(255,255,255,.42) !important; }
body.ps-glass #portalCard .app-tile { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 8px !important; }
body.ps-glass #portalCard .app-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; justify-content: flex-end !important; }
body.ps-glass #portalCard .app-tile:nth-child(6),
body.ps-glass #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-glass #portalCard .app-tile::after { content: ""; position: absolute; inset: 10px 12px auto; height: 2px; background: rgba(255,255,255,.65); transform: translateX(-120%); transition: transform .5s ease; }
body.ps-glass #portalCard .app-tile:hover::after { transform: translateX(0); }
body.ps-glass .theme-scenery__plane { inset: -20% 22% 10% 18%; transform: rotate(14deg) translate3d(calc(var(--tw-x) * .4px), calc(var(--tw-y) * .4px), 0); background: linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.32) 47% 52%, transparent 53%); animation: tw-glass-refraction 14s ease-in-out infinite; }
body.ps-glass .theme-scenery__object--a { left: 4%; top: 18%; width: 230px; height: 120px; border: 1px solid rgba(255,255,255,.7); transform: skewX(-16deg); }
body.ps-glass .theme-scenery__object--b { right: 3%; bottom: 22%; width: 260px; height: 1px; background: rgba(78,134,207,.4); transform: rotate(-18deg); }
body.ps-glass .theme-scenery__object--c { right: 14%; top: 18%; width: 90px; height: 36px; border: 1px solid rgba(255,255,255,.8); transform: rotate(26deg); }

/* -------------------------------------------------------------------------
   Pop: comic storyboard
   ------------------------------------------------------------------------- */
body.ps-pop {
  --tw-canvas: #ffd600;
  --tw-shell: rgba(255, 236, 0, .92);
  --tw-tile: #fff;
  --tw-tile-hover: #fff7b0;
  --tw-border: #111;
  --tw-world-border: rgba(17,17,17,.38);
  --tw-shadow: 8px 9px 0 #111;
  --tw-radius: 0;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 100px;
  --tw-gap: 10px;
  --tw-enter: tw-pop-in;
  --tw-texture: url("assets/seal-textures/halftone.webp");
  --tw-art: radial-gradient(circle, rgba(17,17,17,.22) 0 1.5px, transparent 2px);
}
body.ps-pop #portalCard { border: 4px solid #111 !important; box-shadow: 11px 12px 0 #111 !important; }
body.ps-pop #portalCard .brand { padding-bottom: 12px !important; border-bottom: 4px solid #111; }
body.ps-pop #portalCard .brand-icon { border: 3px solid #111 !important; border-radius: 0 !important; }
body.ps-pop #portalCard .app-tile { border: 3px solid #111 !important; border-radius: 0 !important; box-shadow: 5px 6px 0 #111 !important; }
body.ps-pop #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-pop #portalCard .app-tile:nth-child(5) { grid-column: span 2; }
body.ps-pop #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-pop #portalCard .app-tile:nth-child(odd) { border-top: 11px solid #e63212 !important; }
body.ps-pop #portalCard .app-tile:nth-child(even) { border-top: 11px solid #1254ff !important; }
body.ps-pop #portalCard .app-tile::after { content: "✦"; position: absolute; right: 12px; top: 10px; color: #e63212; font-size: 18px; }
body.ps-pop .theme-scenery__plane { inset: 6%; background: conic-gradient(from 12deg at 50% 50%, transparent 0 5%, rgba(230,50,18,.2) 5% 7%, transparent 7% 17%, rgba(18,84,255,.18) 17% 19%, transparent 19% 100%); animation: tw-pop-rays 10s ease-in-out infinite; }
body.ps-pop .theme-scenery__object--a { left: 4%; top: 18%; width: 160px; height: 42px; border: 4px solid #111; background: #e63212; transform: rotate(-12deg); }
body.ps-pop .theme-scenery__object--b { right: 4%; bottom: 19%; width: 180px; height: 64px; border: 4px solid #111; background: #1254ff; transform: rotate(8deg); }
body.ps-pop .theme-scenery__object--c { right: 11%; top: 13%; width: 28px; height: 28px; border: 4px solid #111; background: #fff; transform: rotate(45deg); }

/* -------------------------------------------------------------------------
   Ukiyo: woodblock scroll
   ------------------------------------------------------------------------- */
body.ps-ukiyo {
  --tw-canvas: #eadfc8;
  --tw-shell: rgba(251, 246, 231, .9);
  --tw-tile: rgba(251, 246, 231, .72);
  --tw-tile-hover: #fffaf0;
  --tw-border: #1a237e;
  --tw-world-border: rgba(26,35,126,.28);
  --tw-shadow: 0 17px 38px rgba(60, 47, 37, .13);
  --tw-radius: 2px;
  --tw-grid: repeat(2, minmax(0, 1fr));
  --tw-row: 72px;
  --tw-gap: 7px;
  --tw-enter: tw-ukiyo-in;
  --tw-texture: url("assets/seal-textures/wood.webp");
  --tw-art: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 16px, rgba(26,35,126,.18) 17px 18px, transparent 19px 34px);
}
body.ps-ukiyo #portalCard { max-width: 1080px !important; }
body.ps-ukiyo #portalCard .crt-body { display: grid !important; grid-template-columns: 230px minmax(0, 1fr); gap: 0 24px; }
body.ps-ukiyo #portalCard .brand { grid-column: 1; grid-row: 1 / span 7; display: block !important; padding-right: 18px !important; border-right: 3px solid #c62828; }
body.ps-ukiyo #portalCard .brand-icon { margin-bottom: 18px !important; border-radius: 0 !important; }
body.ps-ukiyo #portalCard .brand h1 { writing-mode: vertical-rl; font-size: 28px !important; line-height: 1.05 !important; }
body.ps-ukiyo #portalCard .brand .sub { margin-top: 18px !important; }
body.ps-ukiyo #portalCard .app-grid { grid-column: 2; grid-row: 1; }
body.ps-ukiyo #portalCard .app-tile { border-block: 1px solid var(--tw-border) !important; border-inline: 0 !important; border-radius: 0 !important; }
body.ps-ukiyo #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-ukiyo #portalCard .app-tile:nth-child(odd) .tile-icon { color: #c62828 !important; }
body.ps-ukiyo #portalCard .maint-toggle,
body.ps-ukiyo #portalCard .maint-box,
body.ps-ukiyo #portalCard > .crt-body > .text-link { grid-column: 2; }
body.ps-ukiyo .theme-scenery__plane { inset: auto 0 0; height: 38%; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 18px, rgba(26,35,126,.2) 19px 20px, transparent 21px 40px); animation: tw-ukiyo-wave 14s linear infinite; }
body.ps-ukiyo .theme-scenery__object--a { left: 3%; top: 15%; width: 40px; height: 190px; border-inline: 2px solid #c62828; transform: rotate(4deg); }
body.ps-ukiyo .theme-scenery__object--b { right: 4%; top: 18%; width: 100px; height: 240px; border: 1px solid #1a237e; transform: rotate(-8deg); }
body.ps-ukiyo .theme-scenery__object--c { right: 8%; bottom: 10%; width: 54px; height: 54px; border: 2px solid #c62828; transform: rotate(45deg); }

/* -------------------------------------------------------------------------
   Vapor: horizon synthesizer
   ------------------------------------------------------------------------- */
body.ps-vapor {
  --tw-canvas: #8ca8df;
  --tw-shell: rgba(244, 230, 248, .55);
  --tw-tile: rgba(255, 255, 255, .52);
  --tw-tile-hover: rgba(255, 255, 255, .75);
  --tw-border: rgba(176, 71, 136, .64);
  --tw-world-border: rgba(45, 152, 183, .4);
  --tw-shadow: 0 24px 64px rgba(101, 41, 103, .22);
  --tw-radius: 8px;
  --tw-grid: repeat(6, minmax(0, 1fr));
  --tw-row: 84px;
  --tw-gap: 8px;
  --tw-enter: tw-vapor-in;
  --tw-texture: url("assets/seal-textures/fabric.webp");
  --tw-art: repeating-linear-gradient(0deg, rgba(45,152,183,.2) 0 1px, transparent 1px 20px), linear-gradient(110deg, transparent 0 48%, rgba(255,224,102,.32) 49% 52%, transparent 53%);
}
body.ps-vapor #portalCard { max-width: 1140px !important; background: rgba(247, 240, 249, .48) !important; }
body.ps-vapor #portalCard .brand { border-bottom: 1px solid rgba(176,71,136,.5); padding-bottom: 16px !important; }
body.ps-vapor #portalCard .brand h1 { font-style: italic !important; letter-spacing: .02em !important; }
body.ps-vapor #portalCard .app-tile { border-radius: 6px !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.ps-vapor #portalCard .app-tile:nth-child(1) { grid-column: span 6; min-height: 96px !important; }
body.ps-vapor #portalCard .app-tile:nth-child(n+2) { grid-column: span 2; }
body.ps-vapor #portalCard .app-tile::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, #d22b7c, #ffe066, #2d98b7); opacity: .8; }
body.ps-vapor .theme-scenery__plane { inset: 56% -5% -8%; background: repeating-linear-gradient(0deg, rgba(45,152,183,.28) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, transparent 0 89px, rgba(45,152,183,.2) 90px 91px); transform: perspective(380px) rotateX(58deg) translate3d(calc(var(--tw-x) * .3px), calc(var(--tw-y) * .2px), 0); transform-origin: top; }
body.ps-vapor .theme-scenery__object--a { left: 18%; top: 21%; width: 220px; height: 90px; border: 1px solid #ffe066; border-radius: 50% 50% 0 0; animation: tw-vapor-horizon 9s ease-in-out infinite; }
body.ps-vapor .theme-scenery__object--b { right: 8%; top: 31%; width: 260px; height: 2px; background: #d22b7c; box-shadow: 0 0 16px #d22b7c; }
body.ps-vapor .theme-scenery__object--c { left: 6%; bottom: 20%; width: 160px; height: 18px; border-block: 2px solid #2d98b7; transform: skewX(-32deg); }

/* -------------------------------------------------------------------------
   Lowpoly: faceted mosaic
   ------------------------------------------------------------------------- */
body.ps-lowpoly {
  --tw-canvas: #79c3ee;
  --tw-shell: rgba(252, 254, 255, .9);
  --tw-tile: #f7fbfd;
  --tw-tile-hover: #fff;
  --tw-border: #7893a8;
  --tw-world-border: rgba(22,126,195,.32);
  --tw-shadow: 10px 14px 0 rgba(42,91,123,.17);
  --tw-radius: 0;
  --tw-grid: repeat(4, minmax(0, 1fr));
  --tw-row: 96px;
  --tw-gap: 8px;
  --tw-enter: tw-lowpoly-in;
  --tw-texture: url("assets/seal-textures/metal.webp");
  --tw-art: conic-gradient(from 25deg at 20% 30%, rgba(22,126,195,.24), transparent 14% 34%, rgba(210,103,18,.2) 35% 49%, transparent 50% 72%, rgba(22,126,195,.2) 73% 86%, transparent 87%);
}
body.ps-lowpoly #portalCard { clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 16% 100%, 0 82%) !important; }
body.ps-lowpoly #portalCard .brand-icon { clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); border-radius: 0 !important; }
body.ps-lowpoly #portalCard .app-tile { clip-path: polygon(0 0, 86% 0, 100% 22%, 100% 100%, 14% 100%, 0 78%); border: 0 !important; }
body.ps-lowpoly #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-lowpoly #portalCard .app-tile:nth-child(4) { grid-column: span 2; }
body.ps-lowpoly #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-lowpoly .theme-scenery__plane { inset: 0; background-image: conic-gradient(from 20deg at 30% 30%, rgba(22,126,195,.24), transparent 12% 32%, rgba(210,103,18,.2) 33% 48%, transparent 49% 70%, rgba(22,126,195,.18) 71% 86%, transparent 87%); animation: tw-lowpoly-shift 18s ease-in-out infinite; }
body.ps-lowpoly .theme-scenery__object--a { left: 4%; top: 20%; width: 160px; height: 118px; background: rgba(22,126,195,.25); clip-path: polygon(0 12%, 67% 0, 100% 32%, 82% 100%, 12% 84%); }
body.ps-lowpoly .theme-scenery__object--b { right: 4%; bottom: 18%; width: 220px; height: 150px; background: rgba(210,103,18,.24); clip-path: polygon(20% 0, 100% 16%, 78% 100%, 0 74%); }
body.ps-lowpoly .theme-scenery__object--c { right: 15%; top: 13%; width: 44px; height: 44px; background: #167ec3; clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); }

/* -------------------------------------------------------------------------
   Zen: sparse raked path
   ------------------------------------------------------------------------- */
body.ps-zen {
  --tw-canvas: #ece7dd;
  --tw-shell: rgba(251, 248, 240, .62);
  --tw-tile: rgba(251, 248, 240, .36);
  --tw-tile-hover: rgba(251, 248, 240, .8);
  --tw-border: rgba(111,106,97,.36);
  --tw-world-border: rgba(111,106,97,.27);
  --tw-shadow: 0 16px 36px rgba(80, 75, 66, .08);
  --tw-radius: 0;
  --tw-grid: repeat(2, minmax(0, 1fr));
  --tw-row: 82px;
  --tw-gap: 6px;
  --tw-enter: tw-zen-in;
  --tw-texture: url("assets/seal-textures/sand.webp");
  --tw-art: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(111,106,97,.2) 13px 14px, transparent 15px 28px);
}
body.ps-zen #portalCard { max-width: 900px !important; background: rgba(251,248,240,.48) !important; border-inline: 0 !important; border-top: 1px solid var(--tw-border) !important; border-bottom: 1px solid var(--tw-border) !important; }
body.ps-zen #portalCard .brand { justify-content: center !important; text-align: center !important; }
body.ps-zen #portalCard .brand .sub { text-align: center !important; }
body.ps-zen #portalCard .brand-icon { border-radius: 50% !important; }
body.ps-zen #portalCard .app-tile { border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--tw-border) !important; background: transparent !important; }
body.ps-zen #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-zen #portalCard .app-tile:nth-child(odd) { transform: translateX(-8px) !important; }
body.ps-zen #portalCard .app-tile:nth-child(even) { transform: translateX(8px) !important; }
body.ps-zen #portalCard .tile-icon { color: #6f6a61 !important; }
body.ps-zen .theme-scenery__plane { inset: 54% -10% -10%; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 18px, rgba(111,106,97,.22) 19px 20px, transparent 21px 38px); animation: tw-zen-rake 16s ease-in-out infinite; }
body.ps-zen .theme-scenery__object--a { left: 8%; top: 24%; width: 180px; height: 1px; background: #6f6a61; transform: rotate(-7deg); }
body.ps-zen .theme-scenery__object--b { right: 10%; top: 18%; width: 90px; height: 48px; border-bottom: 1px solid #9b958a; transform: rotate(12deg); }
body.ps-zen .theme-scenery__object--c { right: 7%; bottom: 18%; width: 66px; height: 34px; border-bottom: 3px solid #6f6a61; border-radius: 50%; }

/* -------------------------------------------------------------------------
   Wanted: dossier board
   ------------------------------------------------------------------------- */
body.ps-wanted {
  --tw-canvas: #d8c399;
  --tw-shell: rgba(241, 226, 190, .9);
  --tw-tile: rgba(240, 227, 192, .9);
  --tw-tile-hover: #f8ebc9;
  --tw-border: #6f4423;
  --tw-world-border: rgba(73,52,27,.3);
  --tw-shadow: 8px 11px 0 rgba(73,52,27,.16);
  --tw-radius: 1px;
  --tw-grid: repeat(3, minmax(0, 1fr));
  --tw-row: 100px;
  --tw-gap: 10px;
  --tw-enter: tw-wanted-in;
  --tw-texture: url("assets/seal-textures/leather.webp");
  --tw-art: radial-gradient(circle, rgba(58,42,20,.2) 0 1px, transparent 1.5px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(111,68,35,.15) 26px 27px);
}
body.ps-wanted #portalCard { border: 2px solid #6f4423 !important; }
body.ps-wanted #portalCard .brand { border-bottom: 2px solid #6f4423; padding-bottom: 16px !important; }
body.ps-wanted #portalCard .brand-icon { border-radius: 0 !important; border: 2px solid #6f4423 !important; }
body.ps-wanted #portalCard .app-tile { border: 2px solid #6f4423 !important; border-radius: 1px !important; box-shadow: 4px 5px 0 rgba(73,52,27,.13) !important; }
body.ps-wanted #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-wanted #portalCard .app-tile:nth-child(2),
body.ps-wanted #portalCard .app-tile:nth-child(5) { transform: rotate(-1.2deg) !important; }
body.ps-wanted #portalCard .app-tile:nth-child(3),
body.ps-wanted #portalCard .app-tile:nth-child(6) { transform: rotate(.9deg) !important; }
body.ps-wanted #portalCard .app-tile::after { content: "CASE"; position: absolute; right: 9px; top: 9px; color: #a53b24; font: 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
body.ps-wanted .theme-scenery__plane { inset: 12% 5%; border: 1px dashed rgba(111,68,35,.25); background: repeating-linear-gradient(0deg, transparent 0 40px, rgba(111,68,35,.12) 41px 42px), repeating-linear-gradient(90deg, transparent 0 90px, rgba(111,68,35,.1) 91px 92px); }
body.ps-wanted .theme-scenery__object--a { left: 3%; top: 16%; width: 120px; height: 70px; border: 2px solid #6f4423; transform: rotate(-14deg); animation: tw-wanted-map 12s linear infinite; }
body.ps-wanted .theme-scenery__object--b { right: 4%; bottom: 20%; width: 170px; height: 32px; border: 2px solid #a53b24; transform: rotate(7deg); }
body.ps-wanted .theme-scenery__object--c { right: 12%; top: 13%; width: 64px; height: 42px; border: 2px solid #a53b24; transform: rotate(12deg); }

/* -------------------------------------------------------------------------
   Neon: signboard alley
   ------------------------------------------------------------------------- */
body.ps-neon {
  --tw-canvas: #050509;
  --tw-shell: rgba(8, 8, 14, .94);
  --tw-tile: rgba(13, 14, 24, .92);
  --tw-tile-hover: #171525;
  --tw-border: rgba(255,45,149,.62);
  --tw-world-border: rgba(0,216,232,.35);
  --tw-shadow: 0 0 30px rgba(255,45,149,.14), 0 28px 70px rgba(0,0,0,.5);
  --tw-radius: 5px;
  --tw-grid: repeat(2, minmax(0, 1fr));
  --tw-row: 84px;
  --tw-gap: 8px;
  --tw-enter: tw-neon-in;
  --tw-texture: url("assets/seal-textures/ceramic.webp");
  --tw-art: repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,45,149,.2) 43px 44px), repeating-linear-gradient(0deg, transparent 0 56px, rgba(0,216,232,.15) 57px 58px);
}
body.ps-neon #portalCard { max-width: 1040px !important; border-color: rgba(255,45,149,.75) !important; }
body.ps-neon #portalCard .crt-body { display: grid !important; grid-template-columns: 220px minmax(0,1fr); gap: 0 24px; }
body.ps-neon #portalCard .brand { grid-column: 1; grid-row: 1 / span 6; display: block !important; padding-right: 18px !important; border-right: 1px solid rgba(0,216,232,.5); }
body.ps-neon #portalCard .brand-icon { width: 86px !important; height: 86px !important; margin-bottom: 20px !important; border-radius: 50% !important; border-color: #ff2d95 !important; box-shadow: 0 0 26px rgba(255,45,149,.6) !important; }
body.ps-neon #portalCard .brand h1 { font-size: 26px !important; text-shadow: 0 0 14px rgba(255,45,149,.65); }
body.ps-neon #portalCard .brand .sub { margin-top: 8px !important; }
body.ps-neon #portalCard .app-grid { grid-column: 2; grid-row: 1; }
body.ps-neon #portalCard .app-tile { border-radius: 5px !important; box-shadow: inset 0 0 24px rgba(0,216,232,.05), 0 0 17px rgba(255,45,149,.1) !important; }
body.ps-neon #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-neon #portalCard .tile-name { text-shadow: 0 0 9px rgba(255,45,149,.42); }
body.ps-neon #portalCard .maint-toggle,
body.ps-neon #portalCard .maint-box,
body.ps-neon #portalCard > .crt-body > .text-link { grid-column: 2; }
body.ps-neon #portalCard .app-tile::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #00d8e8; box-shadow: 0 0 12px #00d8e8; animation: tw-neon-current 4.5s ease-in-out infinite; }
body.ps-neon .theme-scenery__plane { inset: 0; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,45,149,.14) 121px 122px), repeating-linear-gradient(0deg, transparent 0 78px, rgba(0,216,232,.14) 79px 80px); }
body.ps-neon .theme-scenery__object--a { left: 0; top: 32%; width: 100%; height: 1px; background: #ff2d95; box-shadow: 0 0 22px #ff2d95; animation: tw-neon-current 5s ease-in-out infinite; }
body.ps-neon .theme-scenery__object--b { right: 4%; bottom: 16%; width: 150px; height: 24px; border: 2px solid #00d8e8; box-shadow: 0 0 14px rgba(0,216,232,.5); transform: skewX(-18deg); }
body.ps-neon .theme-scenery__object--c { left: 5%; top: 14%; width: 70px; height: 70px; border: 1px solid #ff2d95; transform: rotate(45deg); }

/* -------------------------------------------------------------------------
   Jungle: trail map
   ------------------------------------------------------------------------- */
body.ps-jungle {
  --tw-canvas: #10261a;
  --tw-shell: rgba(28, 49, 31, .9);
  --tw-tile: rgba(34, 61, 42, .88);
  --tw-tile-hover: #355a3b;
  --tw-border: #6f984a;
  --tw-world-border: rgba(210,168,91,.3);
  --tw-shadow: 0 24px 60px rgba(0,0,0,.34);
  --tw-radius: 8px;
  --tw-grid: repeat(4, minmax(0,1fr));
  --tw-row: 94px;
  --tw-gap: 11px;
  --tw-enter: tw-jungle-in;
  --tw-texture: url("assets/seal-textures/foliage.webp");
  --tw-art: repeating-linear-gradient(60deg, rgba(85,127,54,.2) 0 3px, transparent 3px 28px), repeating-linear-gradient(-60deg, rgba(210,168,91,.1) 0 2px, transparent 2px 34px);
}
body.ps-jungle #portalCard { border-radius: 8px !important; }
body.ps-jungle #portalCard .brand { align-items: flex-start !important; }
body.ps-jungle #portalCard .brand-icon { border-radius: 50% !important; border-color: #d2a85b !important; }
body.ps-jungle #portalCard .app-tile { border-radius: 8px !important; }
body.ps-jungle #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-jungle #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-jungle #portalCard .app-tile:nth-child(2),
body.ps-jungle #portalCard .app-tile:nth-child(5) { transform: translateY(5px) !important; }
body.ps-jungle #portalCard .app-tile:nth-child(3),
body.ps-jungle #portalCard .app-tile:nth-child(6) { transform: translateY(-4px) !important; }
body.ps-jungle #portalCard .app-tile::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 24px; height: 9px; border-bottom: 2px solid #d2a85b; border-radius: 50%; transform: rotate(-20deg); }
body.ps-jungle .theme-scenery__plane { inset: -8% 0; background: repeating-linear-gradient(65deg, transparent 0 80px, rgba(139,195,74,.16) 81px 84px, transparent 85px 150px); animation: tw-jungle-sway 14s ease-in-out infinite; }
body.ps-jungle .theme-scenery__object--a { left: 3%; top: 12%; width: 110px; height: 330px; border-left: 6px solid #557f36; border-radius: 60%; transform: rotate(15deg); }
body.ps-jungle .theme-scenery__object--b { right: 4%; bottom: 10%; width: 130px; height: 250px; border-right: 5px solid #d2a85b; border-radius: 60%; transform: rotate(-18deg); }
body.ps-jungle .theme-scenery__object--c { right: 9%; top: 17%; width: 42px; height: 62px; border: 2px solid #8eb956; border-radius: 70% 30% 70% 30%; transform: rotate(28deg); }

/* -------------------------------------------------------------------------
   Acid: liquid lab
   ------------------------------------------------------------------------- */
body.ps-acid {
  --tw-canvas: #16002a;
  --tw-shell: rgba(39, 16, 57, .88);
  --tw-tile: rgba(45, 24, 66, .86);
  --tw-tile-hover: #4a2b67;
  --tw-border: #8265a0;
  --tw-world-border: rgba(24,255,255,.31);
  --tw-shadow: 0 26px 74px rgba(0,0,0,.45), 0 0 44px rgba(139,216,24,.1);
  --tw-radius: 8px;
  --tw-grid: repeat(4, minmax(0,1fr));
  --tw-row: 98px;
  --tw-gap: 12px;
  --tw-enter: tw-acid-in;
  --tw-texture: url("assets/seal-textures/holographic.webp");
  --tw-art: linear-gradient(112deg, rgba(24,255,255,.18), transparent 38% 62%, rgba(139,216,24,.18));
}
body.ps-acid #portalCard { border: 2px solid #18d7df !important; }
body.ps-acid #portalCard .brand h1 { background: linear-gradient(90deg, #8bd818, #18d7df); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent !important; }
body.ps-acid #portalCard .brand-icon { border-radius: 22px 8px 22px 8px !important; }
body.ps-acid #portalCard .app-tile { border-radius: 8px !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
body.ps-acid #portalCard .app-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; justify-content: flex-end !important; }
body.ps-acid #portalCard .app-tile:nth-child(4),
body.ps-acid #portalCard .app-tile:nth-child(7) { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
body.ps-acid #portalCard .app-tile::after { content: ""; position: absolute; inset: auto 12px 10px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #8bd818, #18d7df, #bf86ff); opacity: .75; }
body.ps-acid .theme-scenery__plane { inset: 10% -10%; background: repeating-linear-gradient(118deg, transparent 0 90px, rgba(24,255,255,.12) 91px 118px, transparent 119px 190px); transform: skewY(-7deg) translate3d(calc(var(--tw-x) * .4px), calc(var(--tw-y) * .4px), 0); animation: tw-acid-flow 12s ease-in-out infinite; }
body.ps-acid .theme-scenery__object--a { left: -5%; top: 24%; width: 360px; height: 56px; border: 3px solid #8bd818; border-radius: 50%; transform: rotate(-13deg); }
body.ps-acid .theme-scenery__object--b { right: -4%; bottom: 22%; width: 320px; height: 38px; border: 2px solid #18d7df; border-radius: 50%; transform: rotate(9deg); }
body.ps-acid .theme-scenery__object--c { right: 16%; top: 14%; width: 44px; height: 74px; border: 2px solid #bf86ff; border-radius: 50% 50% 10% 10%; transform: rotate(24deg); }

/* -------------------------------------------------------------------------
   Pixel: inventory HUD
   ------------------------------------------------------------------------- */
body.ps-pixel {
  --tw-canvas: #0c111b;
  --tw-shell: rgba(22, 30, 47, .94);
  --tw-tile: #202c43;
  --tw-tile-hover: #2c3e5d;
  --tw-border: #6f809d;
  --tw-world-border: rgba(52,152,219,.3);
  --tw-shadow: 8px 8px 0 rgba(0,0,0,.38);
  --tw-radius: 0;
  --tw-grid: repeat(6, minmax(0,1fr));
  --tw-row: 78px;
  --tw-gap: 6px;
  --tw-enter: tw-pixel-in;
  --tw-texture: url("assets/seal-textures/plaster.webp");
  --tw-art: linear-gradient(90deg, rgba(231,76,60,.2) 50%, transparent 50%), linear-gradient(rgba(52,152,219,.18) 50%, transparent 50%);
}
body.ps-pixel #portalCard { border: 3px solid #6f809d !important; box-shadow: 10px 10px 0 rgba(0,0,0,.38) !important; }
body.ps-pixel #portalCard .brand { align-items: flex-start !important; border-bottom: 2px solid #6f809d; padding-bottom: 13px !important; }
body.ps-pixel #portalCard .brand-icon { border-radius: 0 !important; border: 3px solid #e74c3c !important; }
body.ps-pixel #portalCard .app-tile { border: 2px solid #6f809d !important; border-radius: 0 !important; padding: 10px 12px !important; }
body.ps-pixel #portalCard .app-tile:nth-child(1) { grid-column: span 6; }
body.ps-pixel #portalCard .app-tile:nth-child(n+2) { grid-column: span 2; }
body.ps-pixel #portalCard .tile-icon { width: 24px !important; height: 22px !important; margin-bottom: 3px !important; font-size: 20px !important; }
body.ps-pixel #portalCard .tile-name { font-family: "VT323", monospace !important; font-size: 16px !important; }
body.ps-pixel #portalCard .tile-desc { font-family: "JetBrains Mono", monospace !important; font-size: 9px !important; }
body.ps-pixel #portalCard .app-tile::after { content: ""; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; background: #e74c3c; animation: tw-pixel-cursor 1.8s steps(2, jump-none) infinite; }
body.ps-pixel .theme-scenery__plane { inset: 0; background-size: 26px 26px; image-rendering: pixelated; animation: tw-pixel-step 13s steps(8, end) infinite; }
body.ps-pixel .theme-scenery__object--a { left: 4%; top: 20%; width: 156px; height: 88px; border: 6px solid #3498db; box-shadow: 6px 6px 0 #e74c3c; }
body.ps-pixel .theme-scenery__object--b { right: 5%; bottom: 17%; width: 188px; height: 54px; border: 6px solid #e74c3c; box-shadow: -6px -6px 0 #3498db; }
body.ps-pixel .theme-scenery__object--c { right: 15%; top: 13%; width: 36px; height: 36px; border: 6px solid #ffc21c; }

/* -------------------------------------------------------------------------
   Ink: long-form scroll
   ------------------------------------------------------------------------- */
body.ps-ink {
  --tw-canvas: #ebe6d8;
  --tw-shell: rgba(251, 248, 239, .55);
  --tw-tile: rgba(251, 248, 239, .48);
  --tw-tile-hover: rgba(255, 253, 246, .9);
  --tw-border: rgba(53,54,47,.4);
  --tw-world-border: rgba(53,54,47,.28);
  --tw-shadow: 0 16px 42px rgba(53,54,47,.1);
  --tw-radius: 0;
  --tw-grid: repeat(3, minmax(0,1fr));
  --tw-row: 96px;
  --tw-gap: 8px;
  --tw-enter: tw-ink-in;
  --tw-texture: url("assets/seal-textures/wood.webp");
  --tw-art: linear-gradient(118deg, transparent 0 42%, rgba(53,54,47,.14) 43% 48%, transparent 49%), repeating-linear-gradient(125deg, transparent 0 35px, rgba(53,54,47,.12) 36px 39px, transparent 40px 70px);
}
body.ps-ink #portalCard { max-width: 1000px !important; background: rgba(251,248,239,.34) !important; border-block: 1px solid var(--tw-border) !important; border-inline: 0 !important; }
body.ps-ink #portalCard .brand { display: block !important; padding-left: 24px !important; border-left: 3px solid #35362f; }
body.ps-ink #portalCard .brand-icon { border-radius: 50% 8% 50% 8% !important; }
body.ps-ink #portalCard .app-tile { border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--tw-border) !important; background: transparent !important; }
body.ps-ink #portalCard .app-tile:nth-child(1) { grid-column: span 3; }
body.ps-ink #portalCard .app-tile:nth-child(2),
body.ps-ink #portalCard .app-tile:nth-child(5) { transform: translateY(8px) !important; }
body.ps-ink #portalCard .app-tile:nth-child(3),
body.ps-ink #portalCard .app-tile:nth-child(6) { transform: translateY(-6px) !important; }
body.ps-ink #portalCard .app-tile::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 2px; background: #35362f; }
body.ps-ink .theme-scenery__plane { inset: 0 30% 0 0; background: repeating-linear-gradient(125deg, transparent 0 42px, rgba(53,54,47,.12) 43px 46px, transparent 47px 82px); transform: translate3d(calc(var(--tw-x) * .3px), calc(var(--tw-y) * .3px), 0) rotate(-3deg); animation: tw-ink-bleed 14s ease-in-out infinite; }
body.ps-ink .theme-scenery__object--a { left: 3%; top: 14%; width: 260px; height: 120px; border-bottom: 4px solid #35362f; border-radius: 0 0 60% 30%; transform: rotate(-8deg); }
body.ps-ink .theme-scenery__object--b { right: 4%; bottom: 18%; width: 210px; height: 2px; background: #6f7667; transform: rotate(17deg); }
body.ps-ink .theme-scenery__object--c { right: 13%; top: 17%; width: 50px; height: 50px; border: 2px solid #a33a2c; transform: rotate(45deg); }

/* -------------------------------------------------------------------------
   Beach: boardwalk and tide
   ------------------------------------------------------------------------- */
body.ps-beach {
  --tw-canvas: #79c3ed;
  --tw-shell: rgba(249, 254, 255, .78);
  --tw-tile: rgba(248, 253, 255, .86);
  --tw-tile-hover: #fff;
  --tw-border: #78b7d7;
  --tw-world-border: rgba(7,135,189,.3);
  --tw-shadow: 0 22px 54px rgba(7,88,127,.18);
  --tw-radius: 6px;
  --tw-grid: repeat(4, minmax(0,1fr));
  --tw-row: 92px;
  --tw-gap: 12px;
  --tw-enter: tw-beach-in;
  --tw-texture: url("assets/seal-textures/sand.webp");
  --tw-art: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 16px, rgba(7,135,189,.18) 17px 19px, transparent 20px 38px), linear-gradient(180deg, rgba(255,255,255,.22), transparent 44%);
}
body.ps-beach #portalCard { border: 0 !important; border-top: 8px solid #0787bd !important; }
body.ps-beach #portalCard .brand { align-items: flex-start !important; }
body.ps-beach #portalCard .brand-icon { border-radius: 50% !important; border-color: #d69b15 !important; }
body.ps-beach #portalCard .app-tile { border-radius: 4px !important; border-top: 4px solid #d69b15 !important; }
body.ps-beach #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-beach #portalCard .app-tile:nth-child(7) { grid-column: span 2; }
body.ps-beach #portalCard .app-tile::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1px; background: #0787bd; }
body.ps-beach .theme-scenery__plane { inset: auto -5% -6%; height: 48%; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 22px, rgba(7,135,189,.23) 23px 25px, transparent 26px 48px); animation: tw-beach-tide 13s ease-in-out infinite; }
body.ps-beach .theme-scenery__object--a { left: 3%; top: 18%; width: 220px; height: 70px; border-top: 7px solid #d69b15; transform: rotate(-5deg); }
body.ps-beach .theme-scenery__object--b { right: 4%; bottom: 20%; width: 190px; height: 2px; background: #0787bd; transform: rotate(8deg); }
body.ps-beach .theme-scenery__object--c { right: 12%; top: 14%; width: 50px; height: 72px; border-left: 2px solid #d69b15; transform: rotate(6deg); }

/* -------------------------------------------------------------------------
   Corp: operations cockpit
   ------------------------------------------------------------------------- */
body.ps-corp {
  --tw-canvas: #e7ecf4;
  --tw-shell: rgba(255, 255, 255, .92);
  --tw-tile: #f3f6fa;
  --tw-tile-hover: #fff;
  --tw-border: #c4cfdf;
  --tw-world-border: rgba(39,59,122,.24);
  --tw-shadow: 0 20px 46px rgba(39,59,122,.14);
  --tw-radius: 4px;
  --tw-grid: repeat(4, minmax(0,1fr));
  --tw-row: 78px;
  --tw-gap: 7px;
  --tw-enter: tw-corp-in;
  --tw-texture: url("assets/seal-textures/metal.webp");
  --tw-art: linear-gradient(rgba(39,59,122,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(39,59,122,.12) 1px, transparent 1px);
}
body.ps-corp #portalCard { max-width: 1140px !important; border-top: 4px solid #273b7a !important; }
body.ps-corp #portalCard .corp-bar { display: flex !important; justify-content: space-between; margin: -30px -34px 22px; padding: 10px 14px; border-bottom: 1px solid #c4cfdf; color: #273b7a; font: 11px/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; }
body.ps-corp #portalCard .brand { margin-bottom: 16px !important; }
body.ps-corp #portalCard .brand-icon { border-radius: 4px !important; border-color: #273b7a !important; }
body.ps-corp #portalCard .app-tile { min-height: 78px !important; padding: 10px 13px !important; border-radius: 4px !important; }
body.ps-corp #portalCard .app-tile:nth-child(1) { grid-column: span 2; }
body.ps-corp #portalCard .tile-icon { width: 24px !important; height: 22px !important; margin-bottom: 4px !important; font-size: 20px !important; }
body.ps-corp #portalCard .tile-name { font-size: 13px !important; }
body.ps-corp #portalCard .tile-desc { font: 10px/1.25 "JetBrains Mono", monospace !important; }
body.ps-corp #portalCard .app-tile::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #246f91; transform: scaleX(0); transform-origin: left; animation: tw-corp-progress 7s ease-in-out infinite; }
body.ps-corp .theme-scenery__plane { inset: 7%; background-size: 28px 28px; animation: tw-corp-scan 12s linear infinite; }
body.ps-corp .theme-scenery__object--a { left: 4%; top: 19%; width: 92%; height: 1px; background: #273b7a; animation: tw-corp-scan 8s linear infinite; }
body.ps-corp .theme-scenery__object--b { right: 5%; bottom: 17%; width: 200px; height: 34px; border: 1px solid #246f91; }
body.ps-corp .theme-scenery__object--c { left: 7%; bottom: 17%; width: 100px; height: 1px; background: #246f91; }

/* Shared arrival keyframes.  They are intentionally short and use only
   transform/opacity so the information layout never reflows during motion. */
@keyframes tw-enter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-paper-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tw-doodle-in { from { opacity: 0; transform: translateY(-12px) rotate(-3deg); } to { opacity: 1; } }
@keyframes tw-neo-in { from { opacity: 0; transform: translateY(8px); box-shadow: inset 12px 12px 18px rgba(115,126,141,.3), inset -2px -2px 6px rgba(255,255,255,.6); } to { opacity: 1; } }
@keyframes tw-crt-in { from { opacity: 0; clip-path: inset(0 0 100%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes tw-cosmic-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tw-cyber-in { 0% { opacity: 0; transform: translateX(-14px); } 60% { opacity: 1; transform: translateX(3px); } 100% { opacity: 1; transform: none; } }
@keyframes tw-glass-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tw-pop-in { from { opacity: 0; transform: translate(-8px, 8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tw-ukiyo-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes tw-vapor-in { from { opacity: 0; transform: translateY(18px) skewX(-4deg); } to { opacity: 1; transform: none; } }
@keyframes tw-lowpoly-in { from { opacity: 0; transform: translateY(10px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes tw-zen-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes tw-wanted-in { from { opacity: 0; transform: translateY(-10px) rotate(-2deg); } to { opacity: 1; } }
@keyframes tw-neon-in { from { opacity: 0; filter: brightness(.35); } to { opacity: 1; filter: none; } }
@keyframes tw-jungle-in { from { opacity: 0; transform: translateY(10px) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes tw-acid-in { from { opacity: 0; transform: skewX(-8deg) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tw-pixel-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes tw-ink-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes tw-beach-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tw-corp-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Ambient scenery motions, deliberately low amplitude. */
@keyframes tw-paper-register { 0%,100% { transform: translateX(0) rotate(-6deg); } 50% { transform: translateX(24px) rotate(-6deg); } }
@keyframes tw-doodle-draw { 0%,100% { stroke-dashoffset: 0; transform: rotate(-13deg); } 50% { transform: rotate(-8deg); } }
@keyframes tw-neo-pressure { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes tw-crt-scan { 0% { transform: translateY(-12vh); opacity: 0; } 12%,82% { opacity: .72; } 100% { transform: translateY(112vh); opacity: 0; } }
@keyframes tw-crt-cursor { 50% { opacity: .2; } }
@keyframes tw-cosmic-orbit { to { transform: translate3d(-50%, -50%, 0) rotate(346deg); } }
@keyframes tw-cosmic-node { 0%,100% { opacity: .32; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes tw-cyber-sweep { 0%,100% { transform: translateY(-24vh); opacity: 0; } 18%,78% { opacity: .65; } 90% { transform: translateY(118vh); opacity: 0; } }
@keyframes tw-glass-refraction { 0%,100% { transform: rotate(14deg) translate3d(-2%, 0, 0); opacity: .42; } 50% { transform: rotate(14deg) translate3d(8%, 2%, 0); opacity: .72; } }
@keyframes tw-pop-rays { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes tw-ukiyo-wave { 0%,100% { background-position: 0 0; } 50% { background-position: 30px 12px; } }
@keyframes tw-vapor-horizon { 0%,100% { transform: translateY(0) scaleX(.94); opacity: .4; } 50% { transform: translateY(-12px) scaleX(1); opacity: .85; } }
@keyframes tw-lowpoly-shift { 0%,100% { background-position: 0 0; } 50% { background-position: 80px -40px; } }
@keyframes tw-zen-rake { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes tw-wanted-map { 0%,100% { transform: rotate(-14deg) translate(0,0); } 50% { transform: rotate(-10deg) translate(8px,4px); } }
@keyframes tw-neon-current { 0%,100% { opacity: .25; } 45% { opacity: .95; } 52% { opacity: .45; } 60% { opacity: .9; } }
@keyframes tw-jungle-sway { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(12px,0,0) rotate(1deg); } }
@keyframes tw-acid-flow { 0%,100% { transform: skewY(-7deg) translate3d(-1%,0,0); } 50% { transform: skewY(-7deg) translate3d(5%,2%,0); } }
@keyframes tw-pixel-step { 0%,100% { background-position: 0 0; } 50% { background-position: 26px 13px; } }
@keyframes tw-pixel-cursor { 50% { opacity: .25; } }
@keyframes tw-ink-bleed { 0%,100% { opacity: .35; transform: translate3d(0,0,0) rotate(-3deg); } 50% { opacity: .66; transform: translate3d(18px,-5px,0) rotate(-3deg); } }
@keyframes tw-beach-tide { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes tw-corp-scan { 0%,100% { background-position: 0 0; } 50% { background-position: 28px 28px; } }
@keyframes tw-corp-progress { 0%,100% { transform: scaleX(.15); } 50% { transform: scaleX(.75); } }

/* The two side rails from the first visual pass are retired on the homepage;
   their nodes remain harmless for old reveal code and tests. */
body.portal-themed.portal-home .theme-scenery__rail { display: none !important; }


/* == Per-account identity stamp: one hue identity, twenty material voices.
   The hue/pattern come from the account (piApplyIdentity); each theme casts
   the stamp in its own material language and motion accent. == */
/* paper — an ink seal pressed into washi */
body.ps-paper #portalCard .hi-avatar {
  background: var(--tw-tile) !important;
  border: 2px solid hsl(var(--pi-h), 62%, 32%) !important;
  border-radius: 2px !important;
  box-shadow: 1.5px 2px 0 rgba(67, 52, 32, .16) !important;
  animation: piStamp 5.6s ease-in-out infinite;
}
body.ps-paper #portalCard .hi-face { color: hsl(var(--pi-h), 62%, 30%) !important; text-shadow: none !important; }
/* doodle — a crayon sticker that never sits straight */
body.ps-doodle #portalCard .hi-avatar {
  border: 2.5px dashed hsl(var(--pi-h), 70%, 34%) !important;
  border-radius: 50% !important;
  box-shadow: 2px 3px 0 rgba(97, 62, 35, .2) !important;
  animation: piWobble 3.6s ease-in-out infinite;
}
body.ps-doodle #portalCard .hi-face { color: #5d442a !important; text-shadow: none !important; }
/* neo — pressed into soft plaster */
body.ps-neo #portalCard .hi-avatar {
  background: var(--tw-tile) !important;
  border: 0 !important;
  box-shadow: 6px 6px 12px rgba(107, 119, 134, .3), -6px -6px 12px rgba(255, 255, 255, .85), inset 0 0 0 2px hsla(var(--pi-h), 70%, 48%, .5) !important;
  animation: piPress 4.6s ease-in-out infinite;
}
body.ps-neo #portalCard .hi-face { color: hsl(var(--pi-h), 70%, 42%) !important; text-shadow: none !important; }
/* crt — a phosphor badge on the terminal glass */
body.ps-crt #portalCard .hi-avatar {
  background: rgba(4, 20, 11, .9) !important;
  border: 1px solid hsl(var(--pi-h), 90%, 58%) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 14px hsla(var(--pi-h), 95%, 55%, .55), inset 0 0 8px hsla(var(--pi-h), 95%, 55%, .28) !important;
  animation: piFlicker 6s steps(1) infinite;
}
body.ps-crt #portalCard .hi-face { color: hsl(var(--pi-h), 95%, 66%) !important; text-shadow: 0 0 9px hsla(var(--pi-h), 100%, 60%, .9) !important; }
/* cosmic — a planetoid holding its own light */
body.ps-cosmic #portalCard .hi-avatar {
  border-radius: 50% !important;
  border-color: hsla(var(--pi-h), 85%, 70%, .75) !important;
  box-shadow: 0 0 22px hsla(var(--pi-h), 90%, 60%, .55), inset 0 0 12px hsla(var(--pi-h), 85%, 60%, .4) !important;
  animation: piDrift 6.4s ease-in-out infinite;
}
/* cyber — a clipped shard with signal glitches */
body.ps-cyber #portalCard .hi-avatar {
  border: 1px solid hsl(var(--pi-h), 95%, 60%) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 82% 100%, 0 100%);
  box-shadow: 0 0 16px hsla(var(--pi-h), 95%, 55%, .5) !important;
  animation: piGlitch 4.2s steps(1) infinite;
}
body.ps-cyber #portalCard .hi-face { text-shadow: 0 0 8px hsla(var(--pi-h), 100%, 65%, .9) !important; }
/* glass — breath on chilled condensation */
body.ps-glass #portalCard .hi-avatar {
  background: linear-gradient(135deg, hsla(var(--pi-h), 85%, 70%, .85), hsla(var(--pi-h), 80%, 48%, .88)) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  backdrop-filter: blur(3px);
  animation: piTilt 5.2s ease-in-out infinite;
}
/* pop — a sticker with a hard offset shadow */
body.ps-pop #portalCard .hi-avatar {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 hsl(var(--pi-h), 85%, 52%) !important;
  animation: piBounce 3.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
body.ps-pop #portalCard .hi-face { color: hsl(var(--pi-h), 85%, 44%) !important; text-shadow: none !important; }
/* ukiyo — a seal on washi, swaying with the woodblock grain */
body.ps-ukiyo #portalCard .hi-avatar {
  background: var(--tw-tile) !important;
  border: 2px solid hsl(var(--pi-h), 55%, 38%) !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 6px rgba(26, 35, 126, .18) !important;
  animation: piSway 6.8s ease-in-out infinite;
}
body.ps-ukiyo #portalCard .hi-face { color: hsl(var(--pi-h), 55%, 34%) !important; text-shadow: none !important; }
/* vapor — a pastel sundown floating on haze */
body.ps-vapor #portalCard .hi-avatar {
  background: linear-gradient(150deg, hsl(var(--pi-h), 95%, 78%), hsl(calc(var(--pi-h) + 40), 80%, 60%), hsl(var(--pi-h), 70%, 45%)) !important;
  border: 2px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 0 6px 22px hsla(var(--pi-h), 90%, 62%, .55) !important;
  animation: piDrift 5.6s ease-in-out infinite;
}
/* lowpoly — a faceted chip that turns in discrete steps */
body.ps-lowpoly #portalCard .hi-avatar {
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  border: 0 !important;
  animation: piStepB 4.4s steps(2) infinite;
}
@keyframes piStepB { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(6deg) scale(1.04); } }
/* zen — an enso ring, barely breathing */
body.ps-zen #portalCard .hi-avatar {
  background: transparent !important;
  border: 1.5px solid hsl(var(--pi-h), 45%, 40%) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  animation: piZen 9s ease-in-out infinite;
}
body.ps-zen #portalCard .hi-face { color: hsl(var(--pi-h), 45%, 34%) !important; text-shadow: none !important; }
body.ps-zen #portalCard .hi-avatar::before { opacity: .2; }
/* wanted — a hot-pressed brand on the poster */
body.ps-wanted #portalCard .hi-avatar {
  background: var(--tw-tile) !important;
  border: 2px solid hsl(var(--pi-h), 50%, 30%) !important;
  outline: 1px solid hsla(var(--pi-h), 50%, 30%, .5) !important;
  outline-offset: 2px;
  border-radius: 1px !important;
  box-shadow: 0 2px 5px rgba(73, 52, 27, .3) !important;
  animation: piSweep 5.8s ease-in-out infinite;
}
body.ps-wanted #portalCard .hi-face { color: hsl(var(--pi-h), 50%, 28%) !important; text-shadow: none !important; }
/* neon — a lit tube sign */
body.ps-neon #portalCard .hi-avatar {
  background: rgba(10, 10, 18, .92) !important;
  border: 2px solid hsl(var(--pi-h), 100%, 62%) !important;
  box-shadow: 0 0 16px hsl(var(--pi-h), 100%, 60%, .8), inset 0 0 10px hsla(var(--pi-h), 100%, 62%, .4) !important;
  animation: piFlicker 4.6s steps(1) infinite;
}
body.ps-neon #portalCard .hi-face { color: hsl(var(--pi-h), 100%, 72%) !important; text-shadow: 0 0 10px hsl(var(--pi-h), 100%, 62%, .95) !important; }
/* jungle — a leaf disc swaying under canopy light */
body.ps-jungle #portalCard .hi-avatar {
  border-color: hsl(var(--pi-h), 60%, 55%) !important;
  border-radius: 50% 12% 50% 12% !important;
  box-shadow: 0 4px 14px hsla(var(--pi-h), 70%, 45%, .45), inset 0 0 10px rgba(0, 0, 0, .3) !important;
  animation: piSway 5.4s ease-in-out infinite;
}
/* acid — a rave token that can't stand still */
body.ps-acid #portalCard .hi-avatar {
  border: 2px solid hsl(var(--pi-h), 100%, 64%) !important;
  box-shadow: 0 0 18px hsla(var(--pi-h), 100%, 60%, .65) !important;
  animation: piJitter 3.2s steps(2) infinite;
}
/* pixel — a chunky sprite with a hard drop frame */
body.ps-pixel #portalCard .hi-avatar {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 hsl(var(--pi-h), 60%, 30%), inset -2px -2px 0 rgba(0, 0, 0, .35), inset 2px 2px 0 rgba(255, 255, 255, .25) !important;
  animation: piStep 3.8s steps(2) infinite;
}
/* ink — pigment blooming in water */
body.ps-ink #portalCard .hi-avatar {
  background: var(--tw-tile) !important;
  border: 0 !important;
  border-radius: 50% 8% 50% 8% !important;
  box-shadow: 0 3px 8px rgba(53, 54, 47, .22) !important;
  animation: piInk 6s ease-in-out infinite;
}
body.ps-ink #portalCard .hi-face { color: hsl(var(--pi-h), 58%, 30%) !important; text-shadow: none !important; }
/* beach — a sunlit shell bobbing on the tide */
body.ps-beach #portalCard .hi-avatar {
  border: 2px solid hsl(var(--pi-h), 75%, 46%) !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 14px hsla(var(--pi-h), 80%, 45%, .4) !important;
  animation: piBob 4.6s ease-in-out infinite;
}
/* corp — a quiet enamel pin */
body.ps-corp #portalCard .hi-avatar {
  border: 1px solid hsl(var(--pi-h), 55%, 45%) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px hsla(var(--pi-h), 60%, 45%, .3), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  animation: piPress 6.2s ease-in-out infinite;
}
body.ps-corp #portalCard .hi-face { color: #fff !important; }

@media (max-width: 900px) {
  body.portal-themed.portal-home {
    padding: calc(72px + env(safe-area-inset-top, 0px)) 12px max(22px, env(safe-area-inset-bottom, 0px)) !important;
  }
  body.portal-themed.portal-home #portalCard {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    padding: 18px 14px 22px !important;
    border-radius: 8px !important;
  }
  body.portal-themed.portal-home #portalCard .brand {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 17px !important;
  }
  body.portal-themed.portal-home #portalCard .brand-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  body.portal-themed.portal-home #portalCard .brand h1 { font-size: 21px !important; line-height: 1.18 !important; }
  body.portal-themed.portal-home #portalCard .brand .sub { max-width: 250px !important; font-size: 11px !important; line-height: 1.35 !important; }
  body.portal-themed.portal-home #portalCard .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 124px !important;
    gap: 8px !important;
  }
  body.portal-themed.portal-home #portalCard .app-tile,
  body.portal-themed.portal-home #portalCard .app-tile:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 124px !important;
    padding: 13px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    clip-path: none !important;
  }
  body.portal-themed.portal-home #portalCard .app-tile:nth-child(1) { grid-column: span 2 !important; }
  body.portal-themed.portal-home #portalCard .tile-icon { margin: 0 !important; font-size: 24px !important; }
  body.portal-themed.portal-home #portalCard .tile-name { font-size: 13px !important; line-height: 1.28 !important; }
  body.portal-themed.portal-home #portalCard .tile-desc { font-size: 10px !important; line-height: 1.3 !important; }
  body.portal-themed.portal-home #portalCard .crt-topbar,
  body.portal-themed.portal-home #portalCard .corp-bar { margin: -18px -14px 17px !important; }
  body.ps-ukiyo #portalCard .crt-body,
  body.ps-neon #portalCard .crt-body { display: block !important; }
  body.ps-ukiyo #portalCard .brand,
  body.ps-neon #portalCard .brand { display: flex !important; padding: 0 !important; border: 0 !important; }
  body.ps-ukiyo #portalCard .brand h1 { writing-mode: horizontal-tb !important; }
  body.ps-ukiyo #portalCard .maint-toggle,
  body.ps-ukiyo #portalCard .maint-box,
  body.ps-ukiyo #portalCard > .crt-body > .text-link,
  body.ps-neon #portalCard .maint-toggle,
  body.ps-neon #portalCard .maint-box,
  body.ps-neon #portalCard > .crt-body > .text-link { grid-column: auto !important; }
  body.ps-crt #portalCard .crt-topbar,
  body.ps-corp #portalCard .corp-bar { margin-inline: -14px !important; }
  body.ps-cosmic .theme-scenery__plane { width: 150vw; height: 80vw; }
  body.ps-zen #portalCard .app-tile:nth-child(odd),
  body.ps-zen #portalCard .app-tile:nth-child(even),
  body.ps-jungle #portalCard .app-tile:nth-child(2),
  body.ps-jungle #portalCard .app-tile:nth-child(3),
  body.ps-jungle #portalCard .app-tile:nth-child(5),
  body.ps-jungle #portalCard .app-tile:nth-child(6),
  body.ps-ink #portalCard .app-tile:nth-child(2),
  body.ps-ink #portalCard .app-tile:nth-child(3),
  body.ps-ink #portalCard .app-tile:nth-child(5),
  body.ps-ink #portalCard .app-tile:nth-child(6) { transform: none !important; }
  .theme-scenery__line--a { inset: 8% 5% auto; }
  .theme-scenery__line--b { inset: auto 5% 7%; }
  .theme-scenery__line--c { left: 5%; }
  .theme-scenery__object--a { transform-origin: center; }
}

@media (max-width: 380px) {
  body.portal-themed.portal-home { padding-inline: 8px !important; }
  body.portal-themed.portal-home #portalCard { padding-inline: 10px !important; }
  body.portal-themed.portal-home #portalCard .app-grid { gap: 6px !important; }
  body.portal-themed.portal-home #portalCard .app-tile { padding-inline: 9px !important; }
  body.portal-themed.portal-home #portalCard .tile-name { font-size: 12px !important; }
  body.portal-themed.portal-home #portalCard .tile-desc { font-size: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.portal-themed.portal-home .theme-scenery *,
  body.portal-themed.portal-home #portalCard .app-tile,
  body.portal-themed.portal-home #portalCard .app-tile::after,
  body.portal-themed.portal-home #portalCard .hi-avatar,
  body.portal-themed.portal-home #portalCard .hi-avatar::before,
  body #packEdge::before { animation: none !important; transition: none !important; }
  body.portal-themed.portal-home .theme-scenery__texture,
  body.portal-themed.portal-home .theme-scenery__plane { transform: none !important; }
}

/* Reveal handoff invariants remain authoritative even though this stylesheet
   is loaded after the base theme rules. */
body.portal-themed.reveal-lock #portalCard {
  transform: var(--reveal-page-transform, none) !important;
  transform-origin: var(--reveal-page-origin, 50% 50%) !important;
  filter: var(--reveal-page-filter, none) !important;
  opacity: var(--reveal-page-opacity, 1) !important;
}
body.reveal-lock.portal-themed .theme-scenery,
body.reveal-lock.portal-themed .theme-scenery * { animation-play-state: paused !important; }