/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Share Tech Mono", "Courier New", monospace;
    --font-mono: "Share Tech Mono", "Courier New", monospace;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-bg: #070503;
    --color-surface: #0d0804;
    --color-border-2: #3a2210;
    --color-accent: #ff6d1a;
    --color-amber: #ff6d1a;
    --color-magenta: #e03b8a;
    --color-cyan: #00bdd4;
    --color-danger: #e82020;
    --color-success: #50e878;
    --category-damage: #ff4938;
    --category-healing: #3ecf9a;
    --category-stat: #e8b84a;
    --category-stat-up: #58e888;
    --category-stat-down: #ff5a48;
    --category-journal: #d4743a;
    --color-text: #d8c4a4;
    --color-muted: #4a3020;
    --color-muted-2: #8a6848;
    --font-display: "Bebas Neue", "Impact", sans-serif;
    --font-narrative: "Cormorant Garamond", "Palatino Linotype", serif;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-full {
    height: 100%;
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[42rem\] {
    max-width: 42rem;
  }
  .max-w-\[100px\] {
    max-width: 100px;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize-y {
    resize: vertical;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-px {
    gap: 1px;
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-border-2 {
    border-color: var(--color-border-2);
  }
  .bg-amber {
    background-color: var(--color-amber);
  }
  .bg-bg {
    background-color: var(--color-bg);
  }
  .bg-magenta {
    background-color: var(--color-magenta);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .text-center {
    text-align: center;
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .tracking-\[0\.1em\] {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-\[0\.15em\] {
    --tw-tracking: 0.15em;
    letter-spacing: 0.15em;
  }
  .tracking-\[0\.25em\] {
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
  }
  .tracking-\[0\.42em\] {
    --tw-tracking: 0.42em;
    letter-spacing: 0.42em;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:max-w-\[200px\] {
    @media (width >= 40rem) {
      max-width: 200px;
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-10 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
}
:root {
  --accent-glow: rgba(255, 109, 26, 0.5);
  --accent-border: rgba(255, 109, 26, 0.15);
  --accent-border-dim: rgba(255, 109, 26, 0.08);
  --danger-border: rgba(232, 32, 32, 0.18);
  --surface-modal: linear-gradient(160deg, #100a05 0%, #0a0603 100%);
  --overlay-bg: rgba(4, 3, 2, 0.9);
  --input-bg: rgba(0, 0, 0, 0.35);
  --input-border: rgba(255, 109, 26, 0.12);
  --input-border-focus: rgba(255, 109, 26, 0.35);
  --resume-modal-bg: linear-gradient(145deg, rgba(16, 10, 4, 0.98), rgba(8, 5, 2, 0.98));
  --game-bg-overlay-top: rgba(8, 5, 2, 0.88);
  --game-bg-overlay-bottom: rgba(8, 5, 2, 0.96);
  --game-border: rgba(255, 109, 26, 0.12);
  --game-border-dim: rgba(255, 109, 26, 0.06);
  --game-title-shadow: 0 0 20px rgba(255, 109, 26, 0.35);
  --game-text-shadow: 0 0 40px rgba(212, 176, 128, 0.06);
  --vitals-bg: rgba(255, 109, 26, 0.01);
  --narrative-thought: #8aacbc;
  --type-dialogue: clamp(1.12rem, 2.55vw, 1.34rem);
  --type-thought: clamp(1.06rem, 2.45vw, 1.24rem);
  --type-para: clamp(1.08rem, 2.5vw, 1.28rem);
  --type-meta: 0.58rem;
  --type-ui: 0.62rem;
  --tracking-hud: 0.24em;
  --tracking-meta: 0.16em;
  --tracking-prose: 0.018em;
  --leading-prose: 1.92;
  --glow-dialogue: 0 0 30px rgba(212, 176, 128, 0.07);
  --glow-thought: 0 0 36px var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    --glow-thought: 0 0 36px color-mix(in srgb, var(--panel-intel) 5.5%, transparent);
  }
  --panel-inventory: var(--color-success);
  --panel-inventory-bright: #8cf0aa;
  --panel-inventory-deep: #2da050;
  --panel-intel: var(--color-cyan);
  --panel-intel-bright: #68e2ee;
  --panel-journal: var(--category-journal);
  --panel-journal-bright: #e8a870;
  --panel-journal-soft: #e09860;
  --panel-journal-muted: #b46e3c;
  --panel-journal-dim: #c87848;
  --mm-vignette: radial-gradient(
    ellipse 92% 92% at 62% 44%,
    rgba(7, 5, 3, 0.03) 0%,
    rgba(7, 5, 3, 0.42) 100%
  );
  --mm-glow: radial-gradient(
    ellipse 60% 55% at 50% 42%,
    rgba(255, 109, 26, 0.015) 0%,
    transparent 70%
  );
  --mm-title-shadow: 0 0 30px rgba(255, 109, 26, 0.45);
  --mm-slot-num-shadow: 0 0 16px rgba(255, 109, 26, 0.35);
  --mm-accent-mid: rgba(255, 109, 26, 0.65);
  --mm-accent-soft: rgba(255, 109, 26, 0.48);
  --mm-accent-faint: rgba(255, 109, 26, 0.22);
  --mm-accent-ghost: rgba(255, 109, 26, 0.15);
  --mm-accent-whisper: rgba(255, 109, 26, 0.08);
  --mm-accent-fill: rgba(255, 109, 26, 0.025);
  --mm-accent-fill-strong: rgba(255, 109, 26, 0.055);
  --mm-earth: rgba(74, 48, 32, 0.65);
  --mm-earth-soft: rgba(74, 48, 32, 0.38);
  --mm-earth-line: rgba(74, 48, 32, 0.18);
  --mm-earth-track: rgba(74, 48, 32, 0.25);
  --mm-hint: rgba(138, 104, 72, 0.6);
  --mm-hint-danger: rgba(180, 80, 60, 0.65);
  --mm-bracket: rgba(255, 109, 26, 0.4);
  --mm-card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
  --mm-card-shadow-occupied-hover: 0 0 0 1px rgba(255, 109, 26, 0.1), 0 0 40px rgba(255, 109, 26, 0.1),
    inset 0 0 60px rgba(255, 109, 26, 0.025), 0 10px 40px rgba(0, 0, 0, 0.55);
  --mm-select-hover: rgba(255, 109, 26, 0.7);
  --mm-boot-beam: rgba(255, 109, 26, 0.55);
  --mm-theme-arrow: rgba(255, 109, 26, 0.4);
  --mm-volume-value: rgba(255, 109, 26, 0.5);
  --mm-volume-thumb-shadow: 0 0 6px rgba(255, 109, 26, 0.45);
  --mm-menu-active-border: rgba(255, 109, 26, 0.5);
  --mm-mini-border: rgba(255, 109, 26, 0.28);
  --mm-bg-image-opacity: 0.58;
  --mm-bg-image-opacity-slots: 0.44;
  --mm-vignette-opacity: 0.5;
  --mm-glow-opacity: 0.45;
}
:root[data-theme="light"] {
  --color-bg: #d5d0c3;
  --color-surface: #c9c1b2;
  --color-surface-2: #b9ae9d;
  --color-border: #998875;
  --color-border-2: #81715f;
  --color-accent: #8f4f37;
  --color-amber: #8f4f37;
  --color-cyan: #2d7680;
  --color-danger: #914237;
  --color-success: #3f7352;
  --category-damage: #a5332b;
  --category-healing: #2f8f68;
  --category-stat: #9a7438;
  --category-stat-up: #3f7352;
  --category-stat-down: #a5332b;
  --category-intel: #2d7680;
  --category-item: #3f7352;
  --category-journal: #80583a;
  --panel-inventory: var(--color-success);
  --panel-inventory-bright: #6aab7a;
  --panel-inventory-deep: #2d5a3a;
  --panel-intel: var(--color-cyan);
  --panel-intel-bright: #4a8a92;
  --panel-journal: var(--category-journal);
  --panel-journal-bright: #a07858;
  --panel-journal-soft: #947052;
  --panel-journal-muted: #6f5644;
  --panel-journal-dim: #806048;
  --color-text: #1e1710;
  --color-muted: #544539;
  --color-muted-2: #4a3d32;
  --accent-glow: rgba(143, 79, 55, 0.22);
  --accent-border: rgba(143, 79, 55, 0.16);
  --accent-border-dim: rgba(143, 79, 55, 0.075);
  --danger-border: rgba(145, 66, 55, 0.16);
  --surface-modal: linear-gradient(160deg, #ded8cc 0%, #c7bdad 100%);
  --overlay-bg: rgba(57, 49, 40, 0.34);
  --input-bg: rgba(246, 242, 232, 0.42);
  --input-border: rgba(85, 68, 54, 0.14);
  --input-border-focus: rgba(143, 79, 55, 0.3);
  --resume-modal-bg: linear-gradient(145deg, rgba(219, 213, 201, 0.98), rgba(196, 187, 172, 0.98));
  --game-bg-overlay-top: rgba(216, 210, 198, 0.91);
  --game-bg-overlay-bottom: rgba(219, 214, 203, 0.97);
  --game-border: rgba(143, 79, 55, 0.26);
  --game-border-dim: rgba(100, 80, 62, 0.18);
  --game-title-shadow: none;
  --game-text-shadow: none;
  --vitals-bg: rgba(65, 54, 43, 0.055);
  --narrative-thought: #355e6e;
  --glow-dialogue: 0 0 24px rgba(143, 79, 55, 0.05);
  --glow-thought: 0 0 28px var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    --glow-thought: 0 0 28px color-mix(in srgb, var(--panel-intel) 6%, transparent);
  }
  --mm-vignette: radial-gradient(
    ellipse 92% 92% at 62% 44%,
    rgba(246, 242, 232, 0.02) 0%,
    rgba(213, 208, 195, 0.2) 100%
  );
  --mm-glow: radial-gradient(
    ellipse 60% 55% at 50% 42%,
    rgba(143, 79, 55, 0.02) 0%,
    transparent 70%
  );
  --mm-title-shadow: 0 0 22px rgba(143, 79, 55, 0.18);
  --mm-slot-num-shadow: 0 0 14px rgba(143, 79, 55, 0.14);
  --mm-accent-mid: rgba(143, 79, 55, 0.78);
  --mm-accent-soft: rgba(143, 79, 55, 0.65);
  --mm-accent-faint: rgba(143, 79, 55, 0.38);
  --mm-accent-ghost: rgba(143, 79, 55, 0.28);
  --mm-accent-whisper: rgba(143, 79, 55, 0.18);
  --mm-accent-fill: rgba(143, 79, 55, 0.06);
  --mm-accent-fill-strong: rgba(143, 79, 55, 0.11);
  --mm-earth: rgba(90, 75, 62, 0.82);
  --mm-earth-soft: rgba(90, 75, 62, 0.62);
  --mm-earth-line: rgba(90, 75, 62, 0.28);
  --mm-earth-track: rgba(100, 86, 72, 0.48);
  --mm-hint: rgba(58, 46, 36, 0.82);
  --mm-hint-danger: rgba(110, 46, 36, 0.88);
  --mm-bracket: rgba(143, 79, 55, 0.45);
  --mm-card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12);
  --mm-card-shadow-occupied-hover: 0 0 0 1px rgba(143, 79, 55, 0.08), 0 0 24px rgba(143, 79, 55, 0.08),
    inset 0 0 40px rgba(143, 79, 55, 0.03), 0 8px 28px rgba(0, 0, 0, 0.12);
  --mm-select-hover: rgba(143, 79, 55, 0.85);
  --mm-boot-beam: rgba(143, 79, 55, 0.52);
  --mm-theme-arrow: rgba(143, 79, 55, 0.72);
  --mm-volume-value: rgba(143, 79, 55, 0.82);
  --mm-volume-thumb-shadow: 0 0 5px rgba(143, 79, 55, 0.35);
  --mm-menu-active-border: rgba(143, 79, 55, 0.42);
  --mm-mini-border: rgba(143, 79, 55, 0.28);
  --mm-bg-image-opacity: 0.64;
  --mm-bg-image-opacity-slots: 0.38;
  --mm-vignette-opacity: 0.42;
  --mm-glow-opacity: 0.35;
}
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    height: 100%;
    scroll-behavior: smooth;
  }
  body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.65;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-image: radial-gradient(ellipse at 14% 82%, rgba(255, 109, 26, 0.08) 0%, transparent 52%), radial-gradient( ellipse at 88% 12%, var(--panel-intel) 0%, transparent 46% ), radial-gradient(ellipse at 50% 100%, rgba(255, 109, 26, 0.035) 0%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(ellipse at 14% 82%, rgba(255, 109, 26, 0.08) 0%, transparent 52%), radial-gradient( ellipse at 88% 12%, color-mix(in srgb, var(--panel-intel) calc(0.05 * 100%), transparent) 0%, transparent 46% ), radial-gradient(ellipse at 50% 100%, rgba(255, 109, 26, 0.035) 0%, transparent 40%);
    }
  }
  :root[data-theme="light"] body {
    background-image: radial-gradient(ellipse at 16% 78%, rgba(143, 79, 55, 0.035) 0%, transparent 56%), radial-gradient(ellipse at 82% 18%, rgba(45, 118, 128, 0.03) 0%, transparent 44%), radial-gradient(ellipse at 50% 100%, rgba(45, 38, 30, 0.045) 0%, transparent 42%);
  }
  :root[data-theme="light"] body::before {
    opacity: 0.024;
  }
  :root[data-theme="light"] body::after {
    background: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.015) 2px, rgba(0, 0, 0, 0.015) 4px );
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 9998;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px );
    pointer-events: none;
    z-index: 9999;
  }
  #root {
    display: flex;
    flex-direction: column;
  }
  ::-webkit-scrollbar {
    width: 2px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 109, 26, 0.2);
    border-radius: 1px;
  }
}
@keyframes ct-backdrop {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ct-bar-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  22% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(0);
    opacity: 1;
  }
  94%, 100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes ct-bar-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  22% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(0);
    opacity: 1;
  }
  94%, 100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes ct-rule {
  0%, 26% {
    transform: scaleX(0);
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  44% {
    transform: scaleX(1);
    opacity: 0.6;
  }
  68% {
    opacity: 0.6;
  }
  80%, 100% {
    opacity: 0;
    transform: scaleX(0.85);
  }
}
@keyframes ct-eyebrow {
  0%, 20% {
    opacity: 0;
    transform: translateY(5px);
  }
  34% {
    opacity: 0.7;
    transform: translateY(0);
  }
  68% {
    opacity: 0.7;
    transform: translateY(0);
  }
  82%, 100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes ct-title {
  0%, 28% {
    opacity: 0;
    transform: translateY(10px);
  }
  46% {
    opacity: 1;
    transform: translateY(0);
  }
  68% {
    opacity: 1;
    transform: translateY(0);
  }
  84%, 100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}
.bb-preloader-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--color-bg, #0d0a08);
  transition: opacity 0.4s ease;
  overflow: hidden;
}
.bb-preloader-icon {
  opacity: 0.65;
  filter: drop-shadow(0 0 24px rgba(255, 109, 26, 0.5));
  animation: fade-up 0.5s ease-out 0.1s both;
}
.bb-preloader-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  animation: fade-up 0.45s ease-out 0.25s both;
}
.bb-preloader-label {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  letter-spacing: 0.42em;
  color: var(--color-accent, #ff6d1a);
  text-shadow: 0 0 24px rgba(255, 109, 26, 0.45);
}
.bb-preloader-sublabel {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--color-muted-2, #6b5843);
  opacity: 0.7;
}
.bb-preloader-dots {
  display: flex;
  gap: 0.5rem;
  animation: fade-up 0.4s ease-out 0.4s both;
}
.bb-preloader-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 109, 26, 0.08);
}
.bb-preloader-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.4), var(--color-accent, #ff6d1a));
  transition: width 0.25s ease-out;
  border-radius: 0 1px 1px 0;
}
@keyframes ct-backdrop-was-loading {
  0%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ct-bar-top-was-loading {
  0%, 72% {
    transform: translateY(0);
    opacity: 1;
  }
  94%, 100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes ct-bar-bottom-was-loading {
  0%, 72% {
    transform: translateY(0);
    opacity: 1;
  }
  94%, 100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
.chapter-transition--was-loading {
  animation: ct-backdrop-was-loading var(--ui-chapter-transition) cubic-bezier(0.4, 0, 0.2, 1) both;
}
.chapter-transition--was-loading .ct-bar--top {
  animation: ct-bar-top-was-loading var(--ui-chapter-transition) cubic-bezier(0.25, 0, 0.1, 1) both;
}
.chapter-transition--was-loading .ct-bar--bottom {
  animation: ct-bar-bottom-was-loading var(--ui-chapter-transition) cubic-bezier(0.25, 0, 0.1, 1) both;
}
.chapter-transition.chapter-transition--loading {
  animation: none;
  opacity: 1;
}
.chapter-transition.chapter-transition--loading .ct-bar--top {
  animation: ct-bar-in-top 0.35s cubic-bezier(0.25, 0, 0.1, 1) both;
}
.chapter-transition.chapter-transition--loading .ct-bar--bottom {
  animation: ct-bar-in-bottom 0.35s cubic-bezier(0.25, 0, 0.1, 1) both;
}
@keyframes ct-bar-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ct-bar-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ct-loading-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ct-chapter-loader {
  width: min(280px, 60vw);
  animation: ct-loading-fade-in 0.4s ease 0.25s both;
}
.mm-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  animation: ct-loading-fade-in 0.2s ease both;
}
.mm-loader-bar {
  height: 3px;
  border-radius: 0;
}
.chapter-transition {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(5, 3, 2, 0.82);
  backdrop-filter: blur(18px) saturate(0.35);
  -webkit-backdrop-filter: blur(18px) saturate(0.35);
  animation: ct-backdrop var(--ui-chapter-transition) cubic-bezier(0.4, 0, 0.2, 1) both;
}
.ct-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  background: rgba(3, 1, 0, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ct-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 109, 26, 0.15) 15%, rgba(255, 109, 26, 0.38) 50%, rgba(255, 109, 26, 0.15) 85%, transparent 100% );
}
.ct-bar--top {
  top: 0;
  animation: ct-bar-top var(--ui-chapter-transition) cubic-bezier(0.25, 0, 0.1, 1) both;
}
.ct-bar--top::after {
  bottom: 0;
}
.ct-bar--bottom {
  bottom: 0;
  animation: ct-bar-bottom var(--ui-chapter-transition) cubic-bezier(0.25, 0, 0.1, 1) both;
}
.ct-bar--bottom::after {
  top: 0;
}
.ct-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26vh 1.5rem;
}
.ct-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.57rem;
  letter-spacing: 0.38em;
  color: var(--color-muted-2);
  text-transform: uppercase;
  margin-bottom: 15px;
  animation: ct-eyebrow var(--ui-chapter-transition) cubic-bezier(0.4, 0, 0.2, 1) both;
}
.ct-rule {
  width: min(520px, 72vw);
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 109, 26, 0.25) 15%, rgba(255, 109, 26, 0.55) 50%, rgba(255, 109, 26, 0.25) 85%, transparent 100% );
  transform-origin: center center;
  animation: ct-rule var(--ui-chapter-transition) cubic-bezier(0.4, 0, 0.2, 1) both;
  margin-bottom: 20px;
}
.ct-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 3.6rem);
  letter-spacing: clamp(0.06em, 1.5vw, 0.15em);
  color: var(--color-accent);
  text-shadow: 0 0 40px rgba(255, 109, 26, 0.25), 0 0 120px rgba(255, 109, 26, 0.07);
  text-align: center;
  line-height: 1.15;
  margin: 0;
  max-width: 100%;
  word-break: break-word;
  animation: ct-title var(--ui-chapter-transition) cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes amber-breathe {
  0%, 100% {
    text-shadow: 0 0 14px rgba(255, 109, 26, 0.4);
  }
  50% {
    text-shadow: 0 0 28px rgba(255, 109, 26, 0.7), 0 0 60px rgba(255, 109, 26, 0.2);
  }
}
@keyframes blink-slow {
  0%, 45% {
    opacity: 1;
  }
  55%, 100% {
    opacity: 0.1;
  }
}
@keyframes pulse-amber {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 109, 26, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 109, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 109, 26, 0);
  }
}
@keyframes pulse-danger {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 32, 32, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(232, 32, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 32, 32, 0);
  }
}
@keyframes resolve-in {
  0% {
    opacity: 0;
    filter: blur(5px) saturate(0) brightness(0.72) contrast(1.22);
  }
  26% {
    opacity: 0.58;
    filter: blur(1.6px) saturate(0.16) brightness(1.18) contrast(1.1);
  }
  58% {
    opacity: 0.88;
    filter: blur(0.4px) saturate(0.55) brightness(1.05) contrast(1.02);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1) brightness(1) contrast(1);
  }
}
@keyframes stage-direction-in {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  5% {
    opacity: 0.85;
    clip-path: inset(0 97% 0 0);
  }
  8% {
    opacity: 0.4;
    clip-path: inset(0 96% 0 0);
  }
  12% {
    opacity: 1;
    clip-path: inset(0 94% 0 0);
    animation-timing-function: steps(18, end);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}
@keyframes choice-in {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 2px, 0);
  }
  16% {
    opacity: 0.68;
    transform: translate3d(-3px, 1px, 0);
  }
  26% {
    opacity: 0.32;
    transform: translate3d(-3px, 1px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes game-bg-fade-in {
  from {
    opacity: 0;
    transform: scale(1.012);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes game-bg-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.006);
  }
}
@keyframes bb-loader-sweep {
  0% {
    left: -55%;
  }
  100% {
    left: 110%;
  }
}
.bb-loader {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 109, 26, 0.1);
  border-radius: 1px;
  overflow: hidden;
}
.bb-loader-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  border-radius: 1px;
  animation: bb-loader-sweep 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes boot-scan {
  0% {
    transform: translateY(-8%);
    opacity: 0.55;
  }
  100% {
    transform: translateY(108vh);
    opacity: 0;
  }
}
@keyframes dot-breathe {
  0%, 80%, 100% {
    opacity: 0.12;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes music-bar-bounce {
  0%, 100% {
    transform: scaleY(0.25);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.85;
  }
}
.music-bar-live {
  transform-origin: bottom;
  animation: music-bar-bounce linear infinite;
}
.game-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}
.game-panel > :not(.game-bg-stack):not(.damage-vignette-stack) {
  position: relative;
  z-index: 3;
}
.game-bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--color-bg);
}
.game-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity, transform;
}
.game-bg-layer--current {
  animation: game-bg-fade-in var(--ui-background-fade, 900ms) ease-out both;
}
.game-bg-layer--previous {
  animation: game-bg-fade-out var(--ui-background-fade, 900ms) ease-out both;
}
@keyframes damage-vignette-hit {
  0% {
    opacity: 0;
  }
  7% {
    opacity: calc(0.72 + var(--damage-hit-strength, 0.5) * 0.28);
  }
  42% {
    opacity: calc(0.46 + var(--damage-hit-strength, 0.5) * 0.2);
  }
  100% {
    opacity: 0;
  }
}
@keyframes damage-vignette-critical-drift {
  0%, 100% {
    opacity: calc(var(--damage-intensity, 0.5) * 0.55);
  }
  50% {
    opacity: calc(var(--damage-intensity, 0.5) * 0.72);
  }
}
.damage-vignette-stack {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.damage-vignette--hit {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: damage-vignette-hit var(--ui-damage-hit, 540ms) ease-out both;
  background: radial-gradient( ellipse 88% 82% at 50% 48%, rgba(255, 88, 28, calc(var(--damage-hit-strength, 0.5) * 0.14)) 0%, transparent 42% ), radial-gradient( ellipse 96% 90% at 50% 50%, transparent 0%, transparent 42%, rgba(255, 91, 30, calc(0.08 + var(--damage-hit-strength, 0.5) * 0.22)) 68%, rgba(178, 18, 8, calc(0.5 + var(--damage-hit-strength, 0.5) * 0.38)) 100% );
  box-shadow: inset 0 0 32px rgba(255, 76, 22, 0.8), inset 0 0 90px rgba(180, 18, 8, 0.54);
}
.damage-vignette--critical {
  position: absolute;
  inset: 0;
  animation: damage-vignette-critical-drift var(--ui-damage-critical-pulse, 3800ms) ease-in-out infinite;
  background: radial-gradient( ellipse 100% 95% at 50% 50%, transparent 0%, transparent 38%, rgba(8, 5, 2, calc(var(--damage-intensity, 0.5) * 0.3)) 66%, rgba(4, 2, 0, calc(var(--damage-intensity, 0.5) * 0.68)) 100% );
}
:root[data-theme="light"] .damage-vignette--hit {
  background: radial-gradient( ellipse 88% 82% at 50% 48%, rgba(255, 80, 20, calc(var(--damage-hit-strength, 0.5) * 0.12)) 0%, transparent 42% ), radial-gradient( ellipse 96% 90% at 50% 50%, transparent 0%, transparent 42%, rgba(220, 48, 12, calc(0.08 + var(--damage-hit-strength, 0.5) * 0.18)) 68%, rgba(120, 8, 4, calc(0.38 + var(--damage-hit-strength, 0.5) * 0.32)) 100% );
  box-shadow: inset 0 0 30px rgba(210, 36, 10, 0.68), inset 0 0 84px rgba(130, 12, 4, 0.38);
}
:root[data-theme="light"] .damage-vignette--critical {
  background: radial-gradient( ellipse 100% 95% at 50% 50%, transparent 0%, transparent 40%, rgba(100, 85, 60, calc(var(--damage-intensity, 0.5) * 0.18)) 68%, rgba(70, 55, 35, calc(var(--damage-intensity, 0.5) * 0.42)) 100% );
}
@media (prefers-reduced-motion: reduce) {
  .damage-vignette--hit {
    animation-duration: 1ms;
  }
  .damage-vignette--critical {
    animation: none;
    opacity: calc(var(--damage-intensity, 0.5) * 0.58);
  }
  .ui-notification, .ui-notification::after {
    animation: none;
  }
  .narrative-para, .dialogue-block, .thought-block, .stage-direction, .choice-btn {
    animation: plain-fade-in 240ms ease-out both;
  }
}
@keyframes plain-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status-dot--info {
  background: rgba(255, 109, 26, 0.4);
  animation: blink-slow 1.6s step-end infinite;
}
.status-dot--ready {
  background: #ff6d1a;
  animation: pulse-amber 2.6s ease-out infinite;
}
.status-dot--error {
  background: #e82020;
  animation: pulse-danger 1.8s ease-out infinite;
}
.bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 1;
}
.bracket-tl {
  top: -1px;
  left: -1px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.bracket-tr {
  top: -1px;
  right: -1px;
  border-top: 1px solid;
  border-right: 1px solid;
}
.bracket-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
.bracket-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.bracket-amber {
  border-color: var(--mm-bracket);
}
.bracket-cyan {
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) calc(0.35 * 100%), transparent);
  }
}
.bracket-copper {
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) calc(0.38 * 100%), transparent);
  }
}
.bracket-danger {
  border-color: rgba(232, 32, 32, 0.4);
}
.bracket-dim {
  border-color: rgba(255, 255, 255, 0.1);
}
.bracket-green {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.32 * 100%), transparent);
  }
}
.bracket-subject {
  border-color: var(--modal-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--modal-accent, var(--color-accent)) 42%, transparent);
  }
}
.narrative-para, .dialogue-block, .thought-block {
  animation: resolve-in var(--ui-narrative-fade, 2600ms) cubic-bezier(0.08, 0, 0.22, 1) both;
  opacity: 0;
  will-change: opacity, filter;
}
.stage-direction {
  animation: stage-direction-in var(--ui-stage-direction-fade, 1600ms) linear both;
  opacity: 0;
  will-change: opacity, clip-path;
}
.narrative-margin > .narrative-stack > :nth-child(1) {
  animation-delay: var(--ui-narrative-delay-1, 40ms);
}
.narrative-margin > .narrative-stack > :nth-child(2) {
  animation-delay: var(--ui-narrative-delay-2, 170ms);
}
.narrative-margin > .narrative-stack > :nth-child(3) {
  animation-delay: var(--ui-narrative-delay-3, 300ms);
}
.narrative-margin > .narrative-stack > :nth-child(4) {
  animation-delay: var(--ui-narrative-delay-4, 430ms);
}
.narrative-margin > .narrative-stack > :nth-child(5) {
  animation-delay: var(--ui-narrative-delay-5, 560ms);
}
.narrative-margin > .narrative-stack > :nth-child(n + 6) {
  animation-delay: var(--ui-narrative-delay-max, 820ms);
}
.narrative-stack > * + * {
  margin-top: 2.15rem;
}
.narrative-stack > .dialogue-block--continuation, .narrative-stack > .thought-block--continuation {
  margin-top: 0.65rem;
}
.dialogue-block {
  max-width: 40rem;
}
.dialogue-block--right {
  margin-left: auto;
  text-align: right;
}
.dialogue-block--center {
  margin-inline: auto;
  text-align: center;
}
.dialogue-block-meta, .thought-block-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.dialogue-block--right .dialogue-block-meta {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.dialogue-block--center .dialogue-block-meta {
  justify-content: center;
}
.dialogue-block--right .dialogue-line {
  border-left: none;
  border-right: 1px solid var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid color-mix(in srgb, var(--character-accent, var(--color-accent)) 18%, transparent);
  }
  padding-left: 0;
  padding-right: 1rem;
  margin-left: auto;
}
.dialogue-block--center .dialogue-line {
  border-left: none;
  padding-left: 0;
  text-align: center;
  margin-inline: auto;
}
.dialogue-speaker {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.dialogue-block--right .dialogue-speaker {
  justify-content: flex-end;
}
.dialogue-block--center .dialogue-speaker {
  justify-content: center;
}
.dialogue-speaker-label {
  font-family: var(--font-mono);
  font-size: var(--type-ui);
  font-weight: 400;
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  opacity: 0.78;
}
.dialogue-emotion {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: color-mix(in srgb, #00bdd4 58%, #8a6848 42%);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 58%, var(--color-muted-2) 42%);
  }
  opacity: 0.88;
}
.dialogue-emotion::before {
  content: "[";
  margin-right: 0.15em;
  opacity: 0.55;
}
.dialogue-emotion::after {
  content: "]";
  margin-left: 0.15em;
  opacity: 0.55;
}
.dialogue-emotion--solo {
  margin-bottom: 0;
}
.dialogue-mood-inline {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, #00bdd4 42%, #8a6848);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 42%, var(--color-muted-2));
  }
  opacity: 0.55;
  margin-right: 0.75em;
  vertical-align: baseline;
}
.dialogue-mood-inline::before {
  content: "[";
  margin-right: 0.1em;
  opacity: 0.55;
}
.dialogue-mood-inline::after {
  content: "]";
  margin-left: 0.1em;
  opacity: 0.55;
}
.dialogue-line {
  max-width: 38rem;
  padding-left: 1rem;
  border-left: 1px solid var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--character-accent, var(--color-accent)) 20%, transparent);
  }
  font-family: var(--font-narrative);
  font-size: var(--type-dialogue);
  font-weight: 500;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--color-text);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-prose);
  text-wrap: pretty;
  text-shadow: var(--glow-dialogue);
}
.dialogue-line--continuation {
  padding-left: 1rem;
}
.dialogue-block--right .dialogue-line--continuation {
  padding-right: 1rem;
  padding-left: 0;
}
.dialogue-block--game-over .dialogue-line {
  color: #c89080;
}
.thought-block--game-over .thought-line {
  color: #a87868;
}
.thought-line {
  font-family: var(--font-narrative);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-thought);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--narrative-thought);
  line-height: calc(var(--leading-prose) + 0.04);
  letter-spacing: 0.022em;
  max-width: 38rem;
  text-wrap: pretty;
  text-shadow: var(--glow-thought);
}
.thought-line--continuation {
  margin-top: 0;
}
.narrative-para {
  font-family: var(--font-narrative);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-para);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
  color: var(--color-text);
  line-height: calc(var(--leading-prose) + 0.02);
  letter-spacing: 0.02em;
  text-shadow: var(--glow-dialogue);
  max-width: 38rem;
  text-wrap: pretty;
}
.narrative-para--game-over {
  color: #c89080;
  text-shadow: none;
}
.narrative-stack > .stage-direction {
  margin-top: 2.65rem;
  margin-bottom: 0.15rem;
}
.stage-direction {
  position: relative;
  display: block;
  max-width: 32rem;
  margin-inline: 0.15rem 0;
  padding: 0.5rem 0 0.5rem 1.05rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, #00bdd4 52%, #8a6848 48%);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 52%, var(--color-muted-2) 48%);
  }
  text-wrap: pretty;
}
.stage-direction::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, #00bdd4 18%, transparent) 28%, color-mix(in srgb, #00bdd4 18%, transparent) 72%, transparent 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--color-cyan) 18%, transparent) 28%, color-mix(in srgb, var(--color-cyan) 18%, transparent) 72%, transparent 100% );
  }
}
.stage-direction__text {
  display: block;
  opacity: 0.92;
}
.character-portrait-slot {
  --portrait-width: 2.35rem;
  --portrait-height: 2.85rem;
  flex: 0 0 var(--portrait-width);
  width: var(--portrait-width);
  height: var(--portrait-height);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--character-accent, var(--color-accent)) 22%, transparent);
  }
  background: transparent;
  border-radius: 1px;
}
.character-portrait-slot--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}
.character-portrait-fallback-name {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--character-accent, var(--color-accent));
  text-wrap: balance;
  word-break: break-word;
  opacity: 0.75;
}
.character-portrait-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.character-portrait-slot--interactive {
  appearance: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.character-portrait-slot--interactive:hover, .character-portrait-slot--interactive:focus-visible {
  border-color: var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--character-accent, var(--color-accent)) 48%, transparent);
  }
  box-shadow: 0 0 0 1px var(--character-accent, #ff6d1a), 0 0 18px var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--character-accent, var(--color-accent)) 18%, transparent), 0 0 18px color-mix(in srgb, var(--character-accent, var(--color-accent)) 16%, transparent);
  }
  outline: none;
  transform: translateY(-1px);
}
.character-portrait-slot--interactive:active {
  transform: translateY(0);
}
.thought-block-meta {
  margin-bottom: 0.75rem;
}
.thought-speaker {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  opacity: 0.68;
}
.choice-list-shell {
  max-width: min(100%, 52rem);
}
.choice-list-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.choice-btn {
  animation: choice-in var(--ui-choice-fade, 1100ms) cubic-bezier(0.16, 0.76, 0.24, 1) both;
  opacity: 0;
  will-change: opacity, transform;
}
.action-bar {
  animation: fade-up var(--ui-choice-fade, 460ms) cubic-bezier(0.16, 0.76, 0.24, 1) both;
  animation-delay: 0.5s;
  opacity: 0;
}
.choice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #c0a070;
  border: none;
  border-left: 2px solid rgba(255, 109, 26, 0.2);
  background: rgba(255, 109, 26, 0.022);
  cursor: pointer;
  line-height: 1.6;
  touch-action: manipulation;
  transition: border-left-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.choice-item:hover, .choice-item:focus-visible {
  border-left-color: #ff6d1a;
  background: rgba(255, 109, 26, 0.08);
  color: #e8904a;
  box-shadow: inset 0 0 40px rgba(255, 109, 26, 0.04), inset -1px 0 0 rgba(255, 109, 26, 0.06);
  outline: none;
}
.choice-item:active {
  background: rgba(255, 109, 26, 0.13);
  color: #ff6d1a;
}
.choice-item--disabled, .choice-item--disabled:hover, .choice-item--disabled:focus-visible {
  border-left-color: rgba(100, 100, 100, 0.15);
  background: rgba(60, 60, 60, 0.03);
  color: #5a5550;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}
.choice-check-tag {
  color: rgba(138, 104, 72, 0.75);
}
.choice-check-roll-mode {
  font-weight: 700;
  letter-spacing: 0.06em;
}
.choice-check-roll-mode--adv {
  color: rgba(80, 180, 120, 0.85);
}
.choice-check-roll-mode--dis {
  color: rgba(200, 80, 80, 0.8);
}
.choice-check-attempts {
  color: rgba(138, 104, 72, 0.6);
}
.choice-lock-reason {
  color: #6a5e52;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.choice-item--danger {
  border-left-color: rgba(232, 32, 32, 0.22);
  background: rgba(232, 32, 32, 0.02);
  color: #b07060;
}
.choice-item--danger:hover, .choice-item--danger:focus-visible {
  border-left-color: #e82020;
  background: rgba(232, 32, 32, 0.09);
  color: #e82020;
  box-shadow: inset 0 0 50px rgba(232, 32, 32, 0.05);
}
.choice-item--success {
  border-left-color: color-mix(in srgb, #50e878 28%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--color-success) 28%, transparent);
  }
  background: color-mix(in srgb, #50e878 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-success) 4%, transparent);
  }
  color: color-mix(in srgb, #50e878 72%, #d8eadf);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-success) 72%, #d8eadf);
  }
}
.choice-item--success:hover, .choice-item--success:focus-visible {
  border-left-color: var(--color-success);
  background: color-mix(in srgb, #50e878 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
  }
  color: var(--color-success);
  box-shadow: inset 0 0 50px color-mix(in srgb, #50e878 8%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 50px color-mix(in srgb, var(--color-success) 8%, transparent);
  }
}
.choice-arrow {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.6rem;
  color: rgba(255, 109, 26, 0.45);
  transition: color 0.18s ease, transform 0.18s ease;
}
.choice-item--danger .choice-arrow {
  color: rgba(232, 32, 32, 0.4);
}
.choice-item:hover .choice-arrow, .choice-item:focus-visible .choice-arrow {
  color: inherit;
  transform: translateX(3px);
}
.sys-btn {
  font-family: "Space Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: #5a3a20;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sys-btn:hover, .sys-btn:focus-visible {
  color: #a07850;
  border-color: rgba(255, 109, 26, 0.25);
  background: rgba(255, 109, 26, 0.04);
  outline: none;
}
.sys-btn:active {
  background: rgba(255, 109, 26, 0.08);
}
.location-bar {
  animation: fade-up var(--ui-location-fade, 300ms) ease-out both;
  animation-delay: 0.02s;
}
.boot-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--mm-boot-beam) 50%, transparent 100%);
  animation: boot-scan 2.8s ease-in-out infinite;
  pointer-events: none;
}
.boot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 109, 26, 0.7);
  animation: dot-breathe 1.4s ease-in-out infinite;
}
.title-glitch {
  animation: amber-breathe 5s ease-in-out infinite;
  display: inline-block;
}
.app-header-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.app-header-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.38rem;
  object-fit: cover;
  box-shadow: 0 0 14px rgba(255, 109, 26, 0.34), 0 0 0 1px rgba(255, 109, 26, 0.18);
}
.app-header-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.app-header-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 2.4vw, 1.12rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 22px rgba(255, 109, 26, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-chapter {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vitals-command-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 1fr);
  align-items: center;
  gap: 0.85rem;
}
.vitals-bank {
  min-width: 0;
}
.vitals-gauge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.vitals-command-bank {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}
.stat-gauge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.28rem 0.42rem 0.32rem;
  background: rgba(255, 109, 26, 0.04);
  border: 1px solid rgba(255, 109, 26, 0.11);
  border-top: 1px solid rgba(255, 109, 26, 0.18);
  width: 3.15rem;
  height: 2.55rem;
  position: relative;
  overflow: hidden;
}
.stat-gauge-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 109, 26, 0.32);
}
.stat-gauge-frac {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(255, 109, 26, 0.38);
  vertical-align: baseline;
}
.stat-gauge-key {
  font-family: "Space Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  color: rgba(255, 109, 26, 0.22);
  text-transform: uppercase;
  user-select: none;
}
.stat-gauge--hp {
  gap: 1px;
  border-color: color-mix(in srgb, #ff4938 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--category-damage) 15%, transparent);
  }
  border-top-color: color-mix(in srgb, #ff4938 24%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top-color: color-mix(in srgb, var(--category-damage) 24%, transparent);
  }
  background: color-mix(in srgb, #ff4938 4%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--category-damage) 4%, transparent);
  }
}
.stat-gauge--hp .stat-gauge-val {
  font-size: 0.92rem;
  color: var(--category-damage);
  text-shadow: 0 0 12px color-mix(in srgb, #ff4938 34%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 12px color-mix(in srgb, var(--category-damage) 34%, transparent);
  }
}
.stat-gauge--hp .stat-gauge-frac {
  color: color-mix(in srgb, #ff4938 42%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--category-damage) 42%, transparent);
  }
}
.stat-gauge--hp .stat-gauge-key {
  color: color-mix(in srgb, #ff4938 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--category-damage) 30%, transparent);
  }
}
.stat-gauge-bar {
  position: absolute;
  left: 0.36rem;
  right: 0.36rem;
  bottom: 0.2rem;
  height: 2px;
  background: rgba(255, 109, 26, 0.1);
  overflow: hidden;
}
.stat-gauge-bar-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.5s ease;
}
.stat-gauge--hp .stat-gauge-bar {
  background: color-mix(in srgb, #ff4938 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--category-damage) 12%, transparent);
  }
}
.stat-gauge--hp .stat-gauge-bar-fill {
  background: var(--category-damage);
}
.stat-gauge--low .stat-gauge-val {
  color: var(--category-damage);
  text-shadow: 0 0 12px color-mix(in srgb, #ff4938 48%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 12px color-mix(in srgb, var(--category-damage) 48%, transparent);
  }
  animation: blink-slow 1.5s step-end infinite;
}
.stat-gauge--low .stat-gauge-key {
  color: color-mix(in srgb, #ff4938 34%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--category-damage) 34%, transparent);
  }
}
.stat-gauge--low .stat-gauge-bar {
  background: color-mix(in srgb, #ff4938 12%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--category-damage) 12%, transparent);
  }
}
.stat-gauge--low .stat-gauge-bar-fill {
  background: var(--color-danger);
}
.vitals-item-tag {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(138, 104, 72, 0.65);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.vitals-item-pip {
  color: rgba(255, 109, 26, 0.3);
  font-size: 0.55rem;
  flex-shrink: 0;
}
.vitals-item-count {
  color: rgba(255, 109, 26, 0.4);
}
.vitals-mem-tag {
  font-family: "Space Mono", monospace;
  font-size: 0.57rem;
  letter-spacing: 0.05em;
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.48 * 100%), transparent);
  }
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.vitals-mem-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.35 * 100%), transparent);
  }
  flex-shrink: 0;
}
@keyframes pip-roll {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes pip-settle {
  0% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes verdict-appear {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes resolving-sweep {
  from {
    left: -55%;
  }
  to {
    left: 100%;
  }
}
.roll-entry {
  padding: 0.5rem 0.75rem;
  border-left: 2px solid rgba(255, 109, 26, 0.22);
  background: rgba(255, 109, 26, 0.02);
}
.resolution-entry-stack {
  display: grid;
  gap: 0.2rem;
}
.ui-notification {
  --notification-color: var(--category-damage);
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  min-height: 1.9rem;
  padding: 0.24rem 0.5rem;
  overflow: hidden;
  border: 1px solid var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--notification-color) 13%, transparent);
  }
  border-left: 1px solid var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--notification-color) 72%, transparent);
  }
  background: linear-gradient( 90deg, var(--notification-color), var(--notification-color) 64% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, var(--notification-color) 9px, var(--notification-color) 10px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--notification-color) 6%, transparent), color-mix(in srgb, var(--notification-color) 1%, transparent) 64% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, var(--notification-color) 1.2%, transparent) 9px, color-mix(in srgb, var(--notification-color) 1.2%, transparent) 10px );
  }
  box-shadow: inset 0 0 16px var(--notification-color), 0 0 10px var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--notification-color) 2%, transparent), 0 0 10px color-mix(in srgb, var(--notification-color) 2%, transparent);
  }
  animation: notification-entry-in var(--ui-notification-fade, 620ms) cubic-bezier(0.16, 0.76, 0.24, 1) both;
}
.ui-notification--damage {
  --notification-color: var(--category-damage);
}
.ui-notification--healing {
  --notification-color: var(--category-healing);
  background: linear-gradient( 90deg, var(--notification-color), var(--notification-color) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, var(--notification-color) 9px, var(--notification-color) 10px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--notification-color) 8%, transparent), color-mix(in srgb, var(--notification-color) 2%, transparent) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, var(--notification-color) 1.4%, transparent) 9px, color-mix(in srgb, var(--notification-color) 1.4%, transparent) 10px );
  }
}
.ui-notification--stat {
  --notification-color: var(--category-stat);
}
.ui-notification--intel {
  --notification-color: var(--panel-intel);
}
.ui-notification--item {
  --notification-color: var(--panel-inventory);
}
.ui-notification--lost {
  border-style: dashed;
  background: linear-gradient( 90deg, var(--notification-color), var(--notification-color) 64% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, var(--notification-color) 9px, var(--notification-color) 10px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--notification-color) 4%, transparent), color-mix(in srgb, var(--notification-color) 0.5%, transparent) 64% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, var(--notification-color) 1%, transparent) 9px, color-mix(in srgb, var(--notification-color) 1%, transparent) 10px );
  }
}
.ui-notification--stat.ui-notification--gained, .ui-notification--stat.ui-notification--lost {
  border-style: solid;
  border-color: color-mix(in srgb, #e8b84a 13%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--category-stat) 13%, transparent);
  }
  border-left-color: color-mix(in srgb, #e8b84a 72%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--category-stat) 72%, transparent);
  }
}
.ui-notification--stat.ui-notification--gained {
  background: linear-gradient( 90deg, color-mix(in srgb, #58e888 11%, transparent) 0%, color-mix(in srgb, #e8b84a 8%, transparent) 34%, color-mix(in srgb, #e8b84a 1%, transparent) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, #e8b84a 1.2%, transparent) 9px, color-mix(in srgb, #e8b84a 1.2%, transparent) 10px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--category-stat-up) 11%, transparent) 0%, color-mix(in srgb, var(--category-stat) 8%, transparent) 34%, color-mix(in srgb, var(--category-stat) 1%, transparent) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, var(--category-stat) 1.2%, transparent) 9px, color-mix(in srgb, var(--category-stat) 1.2%, transparent) 10px );
  }
}
.ui-notification--stat.ui-notification--lost {
  background: linear-gradient( 90deg, color-mix(in srgb, #ff5a48 10%, transparent) 0%, color-mix(in srgb, #e8b84a 7%, transparent) 34%, color-mix(in srgb, #e8b84a 1%, transparent) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, #e8b84a 1.2%, transparent) 9px, color-mix(in srgb, #e8b84a 1.2%, transparent) 10px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--category-stat-down) 10%, transparent) 0%, color-mix(in srgb, var(--category-stat) 7%, transparent) 34%, color-mix(in srgb, var(--category-stat) 1%, transparent) 68% ), repeating-linear-gradient( -55deg, transparent 0, transparent 9px, color-mix(in srgb, var(--category-stat) 1.2%, transparent) 9px, color-mix(in srgb, var(--category-stat) 1.2%, transparent) 10px );
  }
}
.ui-notification::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent, var(--notification-color), transparent );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--notification-color) 7%, transparent), transparent );
  }
  animation: notification-entry-scan var(--ui-notification-scan, 780ms) var(--ui-notification-scan-delay, 110ms) ease-out both;
}
.ui-notification-icon {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--notification-color) 76%, var(--color-muted-2));
  }
  filter: drop-shadow(0 0 2px var(--notification-color));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--notification-color) 28%, transparent));
  }
}
.ui-notification-label, .ui-notification-detail {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.ui-notification-label {
  color: var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--notification-color) 76%, var(--color-muted-2));
  }
}
.ui-notification-subject {
  overflow: hidden;
  color: var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--notification-color) 48%, var(--color-text));
  }
  font-family: var(--font-display);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 8px color-mix(in srgb, var(--notification-color) 14%, transparent);
  }
}
.ui-notification-detail {
  justify-self: end;
  color: var(--notification-color);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--notification-color) 36%, var(--color-muted-2));
  }
  letter-spacing: 0.06em;
}
@keyframes notification-entry-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  45% {
    opacity: 1;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes notification-entry-scan {
  to {
    left: 100%;
  }
}
@media (max-width: 520px) {
  .ui-notification {
    grid-template-columns: auto auto auto 1fr;
    gap: 0.32rem;
    padding-inline: 0.4rem;
  }
  .ui-notification-detail {
    font-size: 0.45rem;
    letter-spacing: 0.04em;
  }
  .ui-notification-subject {
    font-size: 0.64rem;
  }
}
.roll-entry--fade-in {
  animation: fade-up var(--ui-resolution-entry-fade, 480ms) cubic-bezier(0.16, 0.76, 0.24, 1) both;
}
.roll-entry--resolving {
  border-left-color: rgba(255, 109, 26, 0.35);
  background: rgba(255, 109, 26, 0.03);
}
.roll-entry--pass {
  border-left-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix(in srgb, var(--panel-inventory) calc(0.5 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.02 * 100%), transparent);
  }
  transition: border-left-color 0.2s ease, background 0.2s ease;
}
.roll-entry--fail {
  border-left-color: rgba(232, 32, 32, 0.5);
  background: rgba(232, 32, 32, 0.02);
  transition: border-left-color 0.2s ease, background 0.2s ease;
}
.roll-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.roll-entry-label {
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.roll-entry-meta {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.roll-entry-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.roll-entry-hint {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.roll-entry-mode-tag {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.roll-entry-mode-tag--advantage {
  color: rgba(80, 180, 120, 0.85);
}
.roll-entry-mode-tag--disadvantage {
  color: rgba(200, 80, 80, 0.8);
}
.roll-dice-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(255, 109, 26, 0.28);
  background: rgba(255, 109, 26, 0.07);
  font-family: "Space Mono", monospace;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0;
  color: var(--color-accent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.roll-dice-pip--rolling {
  animation: pip-roll var(--ui-roll-pip-interval, 64ms) step-end infinite;
  border-color: rgba(255, 109, 26, 0.4);
  background: rgba(255, 109, 26, 0.1);
  color: rgba(255, 109, 26, 0.65);
}
.roll-dice-pip--settled {
  animation: pip-settle var(--ui-roll-settle, 260ms) cubic-bezier(0.16, 0.78, 0.24, 1) both;
}
.roll-entry--pass .roll-dice-pip {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.3 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.06 * 100%), transparent);
  }
  color: var(--color-success);
}
.roll-entry--fail .roll-dice-pip {
  border-color: rgba(232, 32, 32, 0.3);
  background: rgba(232, 32, 32, 0.06);
  color: var(--color-danger);
}
.roll-entry-op {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  color: var(--color-muted);
}
.roll-entry-mod {
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  color: var(--color-muted-2);
}
.roll-entry-total {
  font-family: "Space Mono", monospace;
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--color-text);
}
.roll-entry-verdict {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: bold;
  margin-left: auto;
  animation: verdict-appear var(--ui-roll-verdict, 280ms) ease-out both;
}
.choice-resolving {
  padding: 0.4rem 0 0.5rem;
}
.choice-resolving-track {
  height: 1px;
  background: rgba(255, 109, 26, 0.07);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.choice-resolving-beam {
  position: absolute;
  top: 0;
  left: -55%;
  width: 55%;
  height: 100%;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 109, 26, 0.55) 50%, transparent 100% );
  animation: resolving-sweep var(--ui-resolving-sweep, 1000ms) ease-in-out infinite;
}
.choice-resolving-label {
  font-family: "Space Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: rgba(255, 109, 26, 0.32);
  animation: blink-slow 1.2s step-end infinite;
}
.choice-num {
  flex-shrink: 0;
  min-width: 2.2rem;
  font-family: "Space Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(255, 109, 26, 0.5);
  transition: color 0.18s ease;
}
.choice-item:hover .choice-num, .choice-item:focus-visible .choice-num {
  color: rgba(255, 109, 26, 0.85);
}
.choice-item--danger .choice-num {
  color: rgba(232, 32, 32, 0.5);
}
.choice-item--danger:hover .choice-num, .choice-item--danger:focus-visible .choice-num {
  color: rgba(232, 32, 32, 0.85);
}
.section-rule {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: var(--tracking-hud);
  color: color-mix(in srgb, #00bdd4 24%, rgba(255, 109, 26, 0.28));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 24%, rgba(255, 109, 26, 0.28));
  }
}
.section-rule::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: linear-gradient( to right, color-mix(in srgb, #00bdd4 42%, rgba(255, 109, 26, 0.55)), rgba(255, 109, 26, 0.2) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( to right, color-mix(in srgb, var(--color-cyan) 42%, rgba(255, 109, 26, 0.55)), rgba(255, 109, 26, 0.2) );
  }
  flex-shrink: 0;
}
.section-rule::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 109, 26, 0.07), transparent);
}
.narrative-margin {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 109, 26, 0.12);
}
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 109, 26, 0.06);
  border: 1px solid rgba(255, 109, 26, 0.14);
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: var(--color-muted-2);
}
.game-panel-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.018), transparent 45%), rgba(5, 3, 2, 0.38);
}
.game-panel-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.36rem 0.65rem;
  border: 1px solid rgba(255, 109, 26, 0.12);
  background: rgba(255, 109, 26, 0.03);
  color: rgba(216, 144, 80, 0.78);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.game-panel-switch svg, .game-panel-switch strong {
  flex-shrink: 0;
}
.game-panel-switch strong {
  min-width: 1.2rem;
  color: var(--color-accent);
  font-size: 0.68rem;
  text-align: right;
}
.game-panel-switch:hover, .game-panel-switch:focus-visible {
  border-color: rgba(255, 109, 26, 0.28);
  background: rgba(255, 109, 26, 0.065);
  color: var(--color-accent);
  outline: none;
}
.game-panel-switch--inventory {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) 18%, transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 3%, transparent);
  }
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) 68%, var(--color-muted-2));
  }
}
.game-panel-switch--inventory strong {
  color: var(--panel-inventory);
}
.game-panel-switch--inventory:hover, .game-panel-switch--inventory:focus-visible {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) 34%, transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 8%, transparent);
  }
  color: var(--panel-inventory);
}
.game-panel-switch--memory {
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) 18%, transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 3%, transparent);
  }
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) 68%, var(--color-muted-2));
  }
}
.game-panel-switch--memory strong {
  color: var(--panel-intel);
}
.game-panel-switch--memory:hover, .game-panel-switch--memory:focus-visible {
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) 34%, transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 8%, transparent);
  }
  color: var(--panel-intel);
}
.game-panel-switch--journal {
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) 20%, transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 4%, transparent);
  }
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) 72%, var(--color-muted-2));
  }
}
.game-panel-switch--journal strong {
  color: var(--panel-journal);
}
.game-panel-switch--journal:hover, .game-panel-switch--journal:focus-visible {
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) 36%, transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 9%, transparent);
  }
  color: var(--panel-journal);
}
.game-panel-switch--system {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
  color: rgba(180, 145, 108, 0.68);
}
.game-panel-switch--system:hover, .game-panel-switch--system:focus-visible {
  border-color: rgba(255, 109, 26, 0.28);
  background: rgba(255, 109, 26, 0.055);
  color: var(--color-accent);
}
@media (max-width: 760px) {
  .vitals-command-line {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .vitals-command-bank {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
  }
  .vitals-command-bank::-webkit-scrollbar {
    display: none;
  }
  .game-panel-switch {
    white-space: nowrap;
  }
}
.case-number {
  font-family: "Space Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255, 109, 26, 0.4);
}
.sys-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.transmission-rule {
  animation: fade-up var(--ui-response-fade, 320ms) ease-out both;
  animation-delay: 0.04s;
  opacity: 0;
}
@media (hover: none) {
  .choice-item:hover, .choice-item:focus-visible {
    border-left-color: rgba(255, 109, 26, 0.2);
    background: rgba(255, 109, 26, 0.022);
    color: #c0a070;
    box-shadow: none;
  }
  .choice-item:active {
    border-left-color: rgba(255, 109, 26, 0.6);
    background: rgba(255, 109, 26, 0.1);
    color: #e8904a;
  }
  .choice-item--danger:hover {
    border-left-color: rgba(232, 32, 32, 0.22);
    background: rgba(232, 32, 32, 0.02);
    color: #b07060;
  }
  .choice-item--danger:active {
    background: rgba(232, 32, 32, 0.09);
    color: #e82020;
  }
}
.response-rule {
  animation: fade-up var(--ui-response-fade, 320ms) ease-out both;
  animation-delay: 0.08s;
  opacity: 0;
}
.inventory-modal-content {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding-top: 0.1rem;
}
.inventory-modal-content.inventory-split {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
  gap: 0;
  align-items: stretch;
  min-height: 16rem;
}
.inventory-modal-content::before {
  content: "";
  position: absolute;
  inset: -0.45rem;
  pointer-events: none;
  background: linear-gradient( 90deg, transparent 0, var(--panel-inventory) 48%, transparent 52% ), repeating-linear-gradient( 0deg, var(--panel-inventory) 0, var(--panel-inventory) 1px, transparent 1px, transparent 12px );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, transparent 0, color-mix(in srgb, var(--panel-inventory) calc(0.05 * 100%), transparent) 48%, transparent 52% ), repeating-linear-gradient( 0deg, color-mix(in srgb, var(--panel-inventory) calc(0.03 * 100%), transparent) 0, color-mix(in srgb, var(--panel-inventory) calc(0.03 * 100%), transparent) 1px, transparent 1px, transparent 12px );
  }
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 82%);
}
.inventory-split-grid {
  position: relative;
  padding: 0.25rem 0.85rem 0.25rem 0;
  border-right: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent);
  }
  max-height: min(24rem, 58vh);
  overflow: auto;
}
.inventory-split-grid::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 1.5rem;
  margin-top: -1.5rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3, 12, 6, 0.92));
}
.inventory-split-detail {
  position: relative;
  min-width: 0;
  padding-left: 0.9rem;
}
.inventory-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.35rem, 1fr));
  gap: 0.48rem;
}
@keyframes inventory-slot-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.inventory-slot {
  position: relative;
  min-width: 0;
  animation: inventory-slot-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--slot-i, 0) * 36ms);
}
.inventory-slot-examine {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0.38rem;
  overflow: hidden;
  border: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent);
  }
  background: linear-gradient( 165deg, var(--panel-inventory) 0%, transparent 46% ), repeating-linear-gradient( -45deg, var(--panel-inventory) 0, var(--panel-inventory) 1px, transparent 1px, transparent 6px ), rgba(3, 12, 6, 0.92);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 165deg, color-mix(in srgb, var(--panel-inventory) calc(0.08 * 100%), transparent) 0%, transparent 46% ), repeating-linear-gradient( -45deg, color-mix(in srgb, var(--panel-inventory) calc(0.012 * 100%), transparent) 0, color-mix(in srgb, var(--panel-inventory) calc(0.012 * 100%), transparent) 1px, transparent 1px, transparent 6px ), rgba(3, 12, 6, 0.92);
  }
  box-shadow: inset 0 1px 0 var(--panel-inventory), inset 0 -12px 22px rgba(0, 0, 0, 0.16);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-inventory) calc(0.05 * 100%), transparent), inset 0 -12px 22px rgba(0, 0, 0, 0.16);
  }
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.inventory-slot-examine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 180deg, var(--panel-inventory), transparent 42% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent), transparent 42% );
  }
  opacity: 0;
  transition: opacity 0.18s ease;
}
.inventory-slot-examine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120%;
  height: 40%;
  pointer-events: none;
  background: linear-gradient( 180deg, transparent, var(--panel-inventory-bright), transparent );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, transparent, color-mix(in srgb, var(--panel-inventory-bright) calc(0.12 * 100%), transparent), transparent );
  }
  opacity: 0;
  transition: top 0.42s ease, opacity 0.18s ease;
}
.inventory-slot-examine:hover, .inventory-slot-examine:focus-visible {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.34 * 100%), transparent);
  }
  box-shadow: inset 0 1px 0 var(--panel-inventory), 0 0 18px var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent), 0 0 18px color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent);
  }
  transform: translateY(-1px);
  outline: none;
}
.inventory-slot-examine:hover::before, .inventory-slot-examine:focus-visible::before {
  opacity: 1;
}
.inventory-slot-examine:hover::after, .inventory-slot-examine:focus-visible::after {
  top: 120%;
  opacity: 1;
}
.inventory-slot-examine.is-selected {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.52 * 100%), transparent);
  }
  background: linear-gradient( 165deg, var(--panel-inventory) 0%, var(--panel-inventory) 58% ), rgba(3, 16, 8, 0.96);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 165deg, color-mix(in srgb, var(--panel-inventory) calc(0.16 * 100%), transparent) 0%, color-mix(in srgb, var(--panel-inventory) calc(0.03 * 100%), transparent) 58% ), rgba(3, 16, 8, 0.96);
  }
  box-shadow: inset 0 0 0 1px var(--panel-inventory), 0 0 24px var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent), 0 0 24px color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent);
  }
}
.inventory-slot--selected .inventory-slot-examine::before {
  opacity: 1;
}
.inventory-slot-count {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  z-index: 1;
  min-width: 1.2rem;
  padding: 0.1rem 0.18rem;
  border: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.28 * 100%), transparent);
  }
  background: rgba(0, 0, 0, 0.78);
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.92 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
}
.inventory-slot-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.16 * 100%), transparent);
  }
  background: radial-gradient( circle at 50% 18%, var(--panel-inventory), transparent 62% ), rgba(0, 0, 0, 0.28);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 50% 18%, color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent), transparent 62% ), rgba(0, 0, 0, 0.28);
  }
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.55 * 100%), transparent);
  }
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.inventory-slot-icon--compact {
  width: min(2.85rem, 100%);
  height: min(2.85rem, 100%);
  font-size: 1rem;
}
.inventory-slot-icon img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  filter: drop-shadow( 0 0 12px var(--panel-inventory) );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow( 0 0 12px color-mix(in srgb, var(--panel-inventory) calc(0.24 * 100%), transparent) );
  }
}
.inventory-slot-icon--compact img {
  width: min(2rem, 70%);
  height: min(2rem, 70%);
}
.inventory-slot-icon--pending {
  opacity: 0.35;
}
.inventory-slot-icon--placeholder span {
  opacity: 0.72;
}
.inventory-slot-icon-img--loading {
  opacity: 0.55;
}
.inventory-detail-pane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-height: 100%;
}
.inventory-detail-pane--idle {
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  min-height: 14rem;
  padding: 1rem;
  border: 1px dashed var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.02 * 100%), transparent);
  }
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.48 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.inventory-detail-pane--idle p {
  margin: 0;
}
.inventory-detail-idle-mark {
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.inventory-detail-header {
  display: grid;
  gap: 0.28rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent);
  }
}
.inventory-detail-kicker {
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.42 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
}
.inventory-detail-heading {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}
.inventory-detail-title {
  margin: 0;
  overflow: hidden;
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.94 * 100%), transparent);
  }
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.22rem);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.inventory-detail-count {
  flex-shrink: 0;
  padding: 0.14rem 0.28rem;
  border: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.24 * 100%), transparent);
  }
  background: rgba(0, 0, 0, 0.28);
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.78 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.58rem;
}
.inventory-detail-body {
  display: grid;
  gap: 0.72rem;
  align-content: start;
  min-height: 0;
}
.inventory-detail-body--loading {
  opacity: 0.82;
}
.inventory-detail-icon-stage {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0 0.15rem;
}
.inventory-detail-icon {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: contain;
  filter: drop-shadow( 0 0 16px var(--panel-inventory) );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow( 0 0 16px color-mix(in srgb, var(--panel-inventory) calc(0.28 * 100%), transparent) );
  }
}
.inventory-detail-lead {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.65;
  color: var(--color-muted);
}
.inventory-detail-lead--muted {
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.42 * 100%), transparent);
  }
  text-align: center;
}
.inventory-detail-text {
  margin: 0;
  padding-left: 0.72rem;
  border-left: 2px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 2px solid color-mix(in srgb, var(--panel-inventory) calc(0.28 * 100%), transparent);
  }
  font-family: var(--font-narrative);
  font-size: clamp(0.88rem, 1.8vw, 0.98rem);
  line-height: 1.72;
  letter-spacing: var(--tracking-prose);
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.78 * 100%), transparent);
  }
}
.inventory-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent);
  }
}
.inventory-detail-meta-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.38 * 100%), transparent);
  }
}
.inventory-detail-meta-value {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--color-muted-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes inventory-detail-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.inventory-detail-skeleton {
  display: grid;
  gap: 0.42rem;
}
.inventory-detail-skeleton-line {
  display: block;
  height: 0.52rem;
  border-radius: 1px;
  background: linear-gradient( 90deg, var(--panel-inventory) 0%, var(--panel-inventory) 48%, var(--panel-inventory) 100% );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-inventory) calc(0.05 * 100%), transparent) 0%, color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent) 48%, color-mix(in srgb, var(--panel-inventory) calc(0.05 * 100%), transparent) 100% );
  }
  background-size: 220% 100%;
  animation: inventory-detail-shimmer 1.35s ease-in-out infinite;
}
.inventory-detail-skeleton-line--short {
  width: 62%;
}
.inventory-detail-loading-label {
  margin: 0.35rem 0 0;
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.44 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inventory-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.1 * 100%), transparent);
  }
}
.inventory-detail-action {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 1.65rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.22 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.06 * 100%), transparent);
  }
  color: rgba(120, 220, 150, 0.9);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.inventory-detail-action--disabled, .inventory-detail-action--disabled:disabled {
  opacity: 1;
  color: #5a5550;
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.03 * 100%), transparent);
  }
  cursor: not-allowed;
}
.inventory-detail-action:hover:not(:disabled), .inventory-detail-action:focus-visible:not(:disabled) {
  color: rgba(180, 255, 200, 0.98);
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.42 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent);
  }
  outline: none;
}
.inventory-detail-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .inventory-modal-content.inventory-split {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .inventory-split-grid {
    padding-right: 0;
    padding-bottom: 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--panel-inventory);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent);
    }
    max-height: none;
  }
  .inventory-split-detail {
    padding-left: 0;
  }
}
.inventory-empty, .memory-empty {
  min-height: 8rem;
  display: grid;
  place-items: center;
  gap: 0.8rem;
  padding: 1.5rem;
  border: 1px dashed var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--panel-inventory) calc(0.16 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.02 * 100%), transparent);
  }
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.55 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.inventory-empty p, .memory-empty p {
  margin: 0;
}
.inventory-empty-mark, .memory-empty-mark {
  width: 1.8rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.memory-empty {
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) calc(0.18 * 100%), transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.03 * 100%), transparent);
  }
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.56 * 100%), transparent);
  }
}
.inventory-empty {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.16 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.02 * 100%), transparent);
  }
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.55 * 100%), transparent);
  }
}
.memory-grid {
  position: relative;
  display: grid;
  gap: 0.4rem;
}
.memory-modal-content {
  position: relative;
  display: grid;
  gap: 0.9rem;
  overflow: hidden;
}
.memory-modal-content::before {
  content: "";
  position: absolute;
  inset: -1rem;
  pointer-events: none;
  background: radial-gradient( circle at 18% 26%, var(--panel-intel), transparent 24% ), linear-gradient( 120deg, transparent 0 45%, var(--panel-intel) 46%, transparent 48% ), linear-gradient( 32deg, transparent 0 58%, var(--panel-intel) 59%, transparent 61% );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 18% 26%, color-mix(in srgb, var(--panel-intel) calc(0.14 * 100%), transparent), transparent 24% ), linear-gradient( 120deg, transparent 0 45%, color-mix(in srgb, var(--panel-intel) calc(0.08 * 100%), transparent) 46%, transparent 48% ), linear-gradient( 32deg, transparent 0 58%, color-mix(in srgb, var(--panel-intel) calc(0.055 * 100%), transparent) 59%, transparent 61% );
  }
  opacity: 0.9;
}
.memory-constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.memory-constellation span {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-intel) calc(0.45 * 100%), transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.08 * 100%), transparent);
  }
  box-shadow: 0 0 18px var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 18px color-mix(in srgb, var(--panel-intel) calc(0.22 * 100%), transparent);
  }
}
.memory-constellation span:nth-child(1) {
  top: 1.4rem;
  right: 18%;
}
.memory-constellation span:nth-child(2) {
  top: 48%;
  left: 8%;
}
.memory-constellation span:nth-child(3) {
  right: 9%;
  bottom: 1.2rem;
}
.memory-archive-head {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-intel) calc(0.16 * 100%), transparent);
  }
  background: linear-gradient( 90deg, var(--panel-intel), transparent 72% ), rgba(1, 10, 12, 0.58);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-intel) calc(0.105 * 100%), transparent), transparent 72% ), rgba(1, 10, 12, 0.58);
  }
}
.memory-archive-head::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient( 90deg, var(--panel-intel), transparent );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-intel) calc(0.56 * 100%), transparent), transparent );
  }
}
.memory-archive-kicker {
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.42 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.memory-archive-head strong {
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.82 * 100%), transparent);
  }
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}
.memory-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  min-height: 3.25rem;
  overflow: hidden;
  border: 1px solid var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-intel) calc(0.18 * 100%), transparent);
  }
  background: linear-gradient( 110deg, var(--panel-intel), transparent 46% ), linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent), rgba(2, 12, 14, 0.66);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 110deg, color-mix(in srgb, var(--panel-intel) calc(0.13 * 100%), transparent), transparent 46% ), linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent), rgba(2, 12, 14, 0.66);
  }
}
.memory-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient( 0deg, transparent 0, transparent 7px, var(--panel-intel) 7px, var(--panel-intel) 8px );
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient( 0deg, transparent 0, transparent 7px, color-mix(in srgb, var(--panel-intel) calc(0.028 * 100%), transparent) 7px, color-mix(in srgb, var(--panel-intel) calc(0.028 * 100%), transparent) 8px );
  }
}
.memory-card-index {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-right: 1px solid color-mix(in srgb, var(--panel-intel) calc(0.16 * 100%), transparent);
  }
  background: linear-gradient( 180deg, var(--panel-intel), transparent ), rgba(0, 0, 0, 0.18);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--panel-intel) calc(0.12 * 100%), transparent), transparent ), rgba(0, 0, 0, 0.18);
  }
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.56 * 100%), transparent);
  }
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}
.memory-card-index span {
  transform: rotate(-90deg);
}
.memory-card-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem 0.5rem;
  min-width: 0;
}
.memory-card h3 {
  margin: 0;
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.88 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}
.memory-card-detail {
  margin: 0.15rem 0 0;
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.42 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}
.memory-card p {
  margin: 0.15rem 0 0;
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.42 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}
.memory-card-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1rem;
  flex-shrink: 0;
}
.memory-card-signal span {
  width: 3px;
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.55 * 100%), transparent);
  }
}
.memory-card-signal span:nth-child(1) {
  height: 0.35rem;
}
.memory-card-signal span:nth-child(2) {
  height: 0.7rem;
}
.memory-card-signal span:nth-child(3) {
  height: 1rem;
}
.journal-modal-content {
  position: relative;
  display: grid;
  gap: 0.65rem;
}
.journal-modal-content::before {
  content: "";
  position: absolute;
  inset: -0.55rem -0.35rem auto;
  height: 5.5rem;
  pointer-events: none;
  background: radial-gradient( circle at 12% 38%, var(--panel-journal), transparent 34% ), repeating-linear-gradient( 90deg, var(--panel-journal) 0, var(--panel-journal) 1px, transparent 1px, transparent 18px );
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 12% 38%, color-mix(in srgb, var(--panel-journal) calc(0.16 * 100%), transparent), transparent 34% ), repeating-linear-gradient( 90deg, color-mix(in srgb, var(--panel-journal) calc(0.04 * 100%), transparent) 0, color-mix(in srgb, var(--panel-journal) calc(0.04 * 100%), transparent) 1px, transparent 1px, transparent 18px );
  }
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent);
}
.journal-ledger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-journal) calc(0.16 * 100%), transparent);
  }
  border-left: 3px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 3px solid color-mix(in srgb, var(--panel-journal) calc(0.46 * 100%), transparent);
  }
  background: linear-gradient( 90deg, var(--panel-journal), transparent 68% ), rgba(14, 8, 4, 0.74);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-journal) calc(0.1 * 100%), transparent), transparent 68% ), rgba(14, 8, 4, 0.74);
  }
}
.journal-ledger-kicker {
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) calc(0.52 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.journal-ledger strong {
  color: var(--panel-journal-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-bright) calc(0.9 * 100%), transparent);
  }
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.journal-ledger-count {
  flex-shrink: 0;
  color: var(--panel-journal-soft);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-soft) calc(0.58 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.journal-timeline {
  position: relative;
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.journal-entry {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.75rem;
  animation: journal-entry-in 0.42s ease-out both;
}
.journal-entry-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.35rem;
}
.journal-entry-node {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-journal) calc(0.62 * 100%), transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) calc(0.18 * 100%), transparent);
  }
  box-shadow: 0 0 12px var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 12px color-mix(in srgb, var(--panel-journal) calc(0.28 * 100%), transparent);
  }
  transform: rotate(45deg);
}
.journal-entry-line {
  flex: 1;
  width: 1px;
  margin-top: 0.35rem;
  background: linear-gradient( 180deg, var(--panel-journal), var(--panel-journal) );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 180deg, color-mix(in srgb, var(--panel-journal) calc(0.34 * 100%), transparent), color-mix(in srgb, var(--panel-journal) calc(0.06 * 100%), transparent) );
  }
}
.journal-entry-body {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-journal) calc(0.16 * 100%), transparent);
  }
  border-top: 2px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 2px solid color-mix(in srgb, var(--panel-journal) calc(0.3 * 100%), transparent);
  }
  background: linear-gradient( 125deg, var(--panel-journal), transparent 42% ), linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent), rgba(12, 7, 4, 0.82);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 125deg, color-mix(in srgb, var(--panel-journal) calc(0.09 * 100%), transparent), transparent 42% ), linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent), rgba(12, 7, 4, 0.82);
  }
  padding: 0.42rem 0.65rem 0.48rem;
}
.journal-entry-body::after {
  content: "";
  position: absolute;
  right: -1.2rem;
  top: -1.2rem;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-journal) calc(0.07 * 100%), transparent);
  }
  transform: rotate(18deg);
  pointer-events: none;
}
.journal-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.journal-entry-index {
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) calc(0.58 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.journal-entry-stamp {
  flex-shrink: 0;
  padding: 0.12rem 0.32rem;
  border: 1px solid var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--panel-journal) calc(0.22 * 100%), transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) calc(0.06 * 100%), transparent);
  }
  color: var(--panel-journal-soft);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-soft) calc(0.52 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.journal-entry-text {
  margin: 0;
  color: var(--panel-journal-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-bright) calc(0.92 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.journal-entry-detail {
  margin: 0.2rem 0 0;
  color: var(--panel-journal-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-muted) calc(0.52 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}
.journal-empty {
  min-height: 9rem;
  display: grid;
  place-items: center;
  gap: 0.8rem;
  padding: 1.5rem;
  border: 1px dashed var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--panel-journal) calc(0.18 * 100%), transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) calc(0.028 * 100%), transparent);
  }
  color: var(--panel-journal-dim);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-dim) calc(0.62 * 100%), transparent);
  }
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.journal-empty p {
  margin: 0;
}
.journal-empty-mark {
  width: 1.8rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
@keyframes journal-entry-in {
  from {
    opacity: 0;
    transform: translateX(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 1rem 1.5rem;
  background: rgba(4, 3, 2, 0.9);
  backdrop-filter: blur(8px);
  animation: modal-fade-in 0.2s ease-out both;
}
@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
    padding: 2rem;
  }
}
.modal-panel {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #100a05 0%, #0a0603 100%);
  border: 1px solid rgba(255, 109, 26, 0.2);
  box-shadow: 0 0 80px rgba(255, 109, 26, 0.06), 0 40px 80px rgba(0, 0, 0, 0.7);
  animation: modal-rise 0.28s ease-out both;
}
.modal-panel--cyan {
  background: radial-gradient( circle at 78% 22%, var(--panel-intel), transparent 34% ), linear-gradient(160deg, #041012 0%, #050809 58%, #030505 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 78% 22%, color-mix(in srgb, var(--panel-intel) calc(0.09 * 100%), transparent), transparent 34% ), linear-gradient(160deg, #041012 0%, #050809 58%, #030505 100%);
  }
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) calc(0.28 * 100%), transparent);
  }
  box-shadow: 0 0 90px var(--panel-intel), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 90px color-mix(in srgb, var(--panel-intel) calc(0.09 * 100%), transparent), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px color-mix(in srgb, var(--panel-intel) calc(0.035 * 100%), transparent);
  }
}
.modal-panel--cyan .modal-header {
  border-bottom-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--panel-intel) calc(0.16 * 100%), transparent);
  }
  background: linear-gradient( 90deg, var(--panel-intel), transparent 65% ), var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-intel) calc(0.08 * 100%), transparent), transparent 65% ), color-mix(in srgb, var(--panel-intel) calc(0.015 * 100%), transparent);
  }
}
.modal-panel--cyan .modal-icon {
  color: var(--panel-intel);
  filter: drop-shadow(0 0 8px var(--panel-intel));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--panel-intel) 42%, transparent));
  }
}
.modal-panel--cyan .modal-eyebrow {
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) calc(0.42 * 100%), transparent);
  }
}
.modal-panel--cyan .modal-title {
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.95 * 100%), transparent);
  }
  text-shadow: 0 0 16px var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 16px color-mix(in srgb, var(--panel-intel) calc(0.38 * 100%), transparent);
  }
}
.modal-panel--cyan .modal-header .sys-btn {
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.5 * 100%), transparent);
  }
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) calc(0.14 * 100%), transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.02 * 100%), transparent);
  }
}
.modal-panel--cyan .modal-header .sys-btn:hover, .modal-panel--cyan .modal-header .sys-btn:focus-visible {
  color: var(--panel-intel-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel-bright) calc(0.92 * 100%), transparent);
  }
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) calc(0.34 * 100%), transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) calc(0.065 * 100%), transparent);
  }
}
.modal-panel--copper {
  background: radial-gradient( circle at 16% 18%, var(--panel-journal), transparent 32% ), radial-gradient(circle at 84% 78%, rgba(184, 72, 40, 0.08), transparent 28%), linear-gradient(160deg, #120905 0%, #0c0704 58%, #080503 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 16% 18%, color-mix(in srgb, var(--panel-journal) calc(0.11 * 100%), transparent), transparent 32% ), radial-gradient(circle at 84% 78%, rgba(184, 72, 40, 0.08), transparent 28%), linear-gradient(160deg, #120905 0%, #0c0704 58%, #080503 100%);
  }
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) calc(0.26 * 100%), transparent);
  }
  box-shadow: 0 0 90px var(--panel-journal), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 90px color-mix(in srgb, var(--panel-journal) calc(0.08 * 100%), transparent), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px color-mix(in srgb, var(--panel-journal) calc(0.03 * 100%), transparent);
  }
}
.modal-panel--copper .modal-header {
  border-bottom-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--panel-journal) calc(0.16 * 100%), transparent);
  }
  background: linear-gradient( 90deg, var(--panel-journal), transparent 65% ), var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-journal) calc(0.09 * 100%), transparent), transparent 65% ), color-mix(in srgb, var(--panel-journal) calc(0.018 * 100%), transparent);
  }
}
.modal-panel--copper .modal-icon {
  color: var(--panel-journal);
  filter: drop-shadow( 0 0 8px var(--panel-journal) );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow( 0 0 8px color-mix(in srgb, var(--panel-journal) calc(0.42 * 100%), transparent) );
  }
}
.modal-panel--copper .modal-eyebrow {
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) calc(0.44 * 100%), transparent);
  }
}
.modal-panel--copper .modal-title {
  color: var(--panel-journal-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-bright) calc(0.94 * 100%), transparent);
  }
  text-shadow: 0 0 16px var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 16px color-mix(in srgb, var(--panel-journal) calc(0.34 * 100%), transparent);
  }
}
.modal-panel--copper .modal-header .sys-btn {
  color: var(--panel-journal-soft);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-soft) calc(0.52 * 100%), transparent);
  }
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) calc(0.14 * 100%), transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) calc(0.02 * 100%), transparent);
  }
}
.modal-panel--copper .modal-header .sys-btn:hover, .modal-panel--copper .modal-header .sys-btn:focus-visible {
  color: var(--panel-journal-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal-bright) calc(0.92 * 100%), transparent);
  }
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) calc(0.34 * 100%), transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) calc(0.065 * 100%), transparent);
  }
}
.modal-panel--green {
  background: radial-gradient( circle at 82% 16%, var(--panel-inventory), transparent 32% ), radial-gradient( circle at 12% 82%, var(--panel-inventory-deep), transparent 28% ), linear-gradient(160deg, #020b04 0%, #030906 58%, #020604 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 82% 16%, color-mix(in srgb, var(--panel-inventory) calc(0.08 * 100%), transparent), transparent 32% ), radial-gradient( circle at 12% 82%, color-mix(in srgb, var(--panel-inventory-deep) calc(0.06 * 100%), transparent), transparent 28% ), linear-gradient(160deg, #020b04 0%, #030906 58%, #020604 100%);
  }
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.22 * 100%), transparent);
  }
  box-shadow: 0 0 90px var(--panel-inventory), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 90px color-mix(in srgb, var(--panel-inventory) calc(0.07 * 100%), transparent), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px color-mix(in srgb, var(--panel-inventory) calc(0.025 * 100%), transparent);
  }
}
.modal-panel--green .modal-header {
  border-bottom-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent);
  }
  background: linear-gradient( 90deg, var(--panel-inventory), transparent 65% ), var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--panel-inventory) calc(0.07 * 100%), transparent), transparent 65% ), color-mix(in srgb, var(--panel-inventory) calc(0.012 * 100%), transparent);
  }
}
.modal-panel--green .modal-icon {
  color: var(--panel-inventory);
  filter: drop-shadow( 0 0 8px var(--panel-inventory) );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow( 0 0 8px color-mix(in srgb, var(--panel-inventory) calc(0.45 * 100%), transparent) );
  }
}
.modal-panel--green .modal-eyebrow {
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.44 * 100%), transparent);
  }
}
.modal-panel--green .modal-title {
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.94 * 100%), transparent);
  }
  text-shadow: 0 0 16px var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 16px color-mix(in srgb, var(--panel-inventory) calc(0.36 * 100%), transparent);
  }
}
.modal-panel--green .modal-header .sys-btn {
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.5 * 100%), transparent);
  }
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.14 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.02 * 100%), transparent);
  }
}
.modal-panel--green .modal-header .sys-btn:hover, .modal-panel--green .modal-header .sys-btn:focus-visible {
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.92 * 100%), transparent);
  }
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) calc(0.34 * 100%), transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) calc(0.065 * 100%), transparent);
  }
}
.modal-panel--sm {
  max-width: 24rem;
}
.modal-panel--subject {
  --modal-accent: var(--color-accent);
  background: radial-gradient( circle at 12% 14%, var(--modal-accent), transparent 34% ), linear-gradient(165deg, #0d0906 0%, #080503 58%, #050302 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 12% 14%, color-mix(in srgb, var(--modal-accent) 9%, transparent), transparent 34% ), linear-gradient(165deg, #0d0906 0%, #080503 58%, #050302 100%);
  }
  border-color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--modal-accent) 28%, transparent);
  }
  box-shadow: 0 0 90px var(--modal-accent), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 90px color-mix(in srgb, var(--modal-accent) 8%, transparent), 0 40px 80px rgba(0, 0, 0, 0.72), inset 0 0 45px color-mix(in srgb, var(--modal-accent) 3%, transparent);
  }
}
.modal-panel--subject .modal-header {
  border-bottom-color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom-color: color-mix(in srgb, var(--modal-accent) 16%, transparent);
  }
  background: linear-gradient( 90deg, var(--modal-accent), transparent 65% ), var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient( 90deg, color-mix(in srgb, var(--modal-accent) 8%, transparent), transparent 65% ), color-mix(in srgb, var(--modal-accent) 2%, transparent);
  }
}
.modal-panel--subject .modal-icon {
  color: var(--modal-accent);
  filter: drop-shadow(0 0 8px var(--modal-accent));
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--modal-accent) 40%, transparent));
  }
}
.modal-panel--subject .modal-eyebrow {
  color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--modal-accent) 44%, transparent);
  }
}
.modal-panel--subject .modal-title {
  color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--modal-accent) 88%, white);
  }
  text-shadow: 0 0 16px var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    text-shadow: 0 0 16px color-mix(in srgb, var(--modal-accent) 34%, transparent);
  }
}
.modal-panel--subject .modal-header .sys-btn {
  color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--modal-accent) 52%, transparent);
  }
  border-color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--modal-accent) 14%, transparent);
  }
  background: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--modal-accent) 2%, transparent);
  }
}
.modal-panel--subject .modal-header .sys-btn:hover, .modal-panel--subject .modal-header .sys-btn:focus-visible {
  color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--modal-accent) 90%, white);
  }
  border-color: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--modal-accent) 34%, transparent);
  }
  background: var(--modal-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--modal-accent) 6%, transparent);
  }
}
.subject-file {
  --subject-accent: var(--color-accent);
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 0.15rem 0 0.1rem;
}
.subject-file-stripe {
  position: absolute;
  top: 0;
  left: -1.25rem;
  width: 3px;
  height: 100%;
  background: linear-gradient( 180deg, transparent, var(--subject-accent) 12%, var(--subject-accent) 88%, transparent );
  opacity: 0.72;
}
.subject-file-grid {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.subject-file-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--subject-accent) 24%, transparent);
  }
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18)), var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18)), color-mix(in srgb, var(--subject-accent) 6%, transparent);
  }
}
.subject-file-photo--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
}
.subject-file-photo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.subject-file-photo-fallback {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 78%, white);
  }
  text-wrap: balance;
  word-break: break-word;
}
.subject-file-photo-frame {
  position: absolute;
  inset: 0.35rem;
  border: 1px solid var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--subject-accent) 18%, transparent);
  }
  pointer-events: none;
}
.subject-file-details {
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  padding-top: 0.1rem;
}
.subject-file-field {
  display: grid;
  gap: 0.22rem;
}
.subject-file-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 42%, transparent);
  }
}
.subject-file-value {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 82%, white);
  }
  overflow-wrap: anywhere;
}
.subject-file-value--mono {
  text-transform: uppercase;
}
.subject-file-subtitle {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 0.88rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(232, 220, 205, 0.88);
}
.subject-file-subtitle--muted {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 168, 150, 0.62);
}
.subject-file-field--metrics {
  margin-top: 0.1rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--subject-accent) 10%, transparent);
  }
}
.subject-file-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.subject-file-metric {
  display: grid;
  gap: 0.12rem;
  min-width: 4.2rem;
  padding: 0.32rem 0.42rem;
  border: 1px solid var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--subject-accent) 16%, transparent);
  }
  background: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--subject-accent) 4%, transparent);
  }
}
.subject-file-metric-key {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.16em;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 40%, transparent);
  }
}
.subject-file-metric-val {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 86%, white);
  }
}
.subject-file-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.35rem;
  border-top: 1px solid var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--subject-accent) 10%, transparent);
  }
}
.subject-file-stamp {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.18em;
  color: var(--subject-accent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--subject-accent) 34%, transparent);
  }
}
:root[data-theme="light"] .modal-panel--subject {
  background: radial-gradient( circle at 12% 14%, var(--modal-accent), transparent 34% ), linear-gradient(165deg, #f0ebe3 0%, #e8e2d8 58%, #e0d9ce 100%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient( circle at 12% 14%, color-mix(in srgb, var(--modal-accent) 7%, transparent), transparent 34% ), linear-gradient(165deg, #f0ebe3 0%, #e8e2d8 58%, #e0d9ce 100%);
  }
  box-shadow: 0 0 60px var(--modal-accent), 0 24px 48px rgba(42, 34, 27, 0.14);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 60px color-mix(in srgb, var(--modal-accent) 6%, transparent), 0 24px 48px rgba(42, 34, 27, 0.14);
  }
}
:root[data-theme="light"] .subject-file-subtitle {
  color: rgba(42, 34, 27, 0.82);
}
:root[data-theme="light"] .subject-file-subtitle--muted {
  color: rgba(90, 78, 68, 0.58);
}
@media (max-width: 480px) {
  .subject-file-grid {
    grid-template-columns: 1fr;
  }
  .subject-file-photo {
    max-width: 7.5rem;
  }
}
.modal-panel--md {
  max-width: 34rem;
}
.modal-panel--lg {
  max-width: 52rem;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255, 109, 26, 0.1);
}
.modal-header-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.modal-icon {
  color: var(--color-accent);
  display: flex;
  opacity: 0.75;
  filter: drop-shadow(0 0 6px rgba(255, 109, 26, 0.4));
  flex-shrink: 0;
}
.modal-titles {
  min-width: 0;
}
.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: rgba(255, 109, 26, 0.35);
  margin-bottom: 0.15rem;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 14px rgba(255, 109, 26, 0.35);
  line-height: 1.2;
  margin: 0;
}
.modal-body {
  padding: 1rem 1.25rem 1.25rem;
  max-height: min(75vh, 48rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 109, 26, 0.2) transparent;
}
.modal-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255, 109, 26, 0.35);
  font-family: var(--font-mono);
}
.modal-highlight-panel {
  padding: 0.75rem;
  background: rgba(255, 109, 26, 0.03);
  border: 1px solid rgba(255, 109, 26, 0.08);
  border-left: 2px solid rgba(255, 109, 26, 0.2);
}
.modal-textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 109, 26, 0.12);
  outline: none;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.modal-textarea:focus {
  border-color: rgba(255, 109, 26, 0.35);
}
.item-examine-content {
  display: grid;
  gap: 0.9rem;
}
.item-examine-icon-wrap {
  display: flex;
  justify-content: center;
}
.item-examine-icon {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  filter: drop-shadow( 0 0 12px var(--panel-inventory) );
  @supports (color: color-mix(in lab, red, red)) {
    filter: drop-shadow( 0 0 12px color-mix(in srgb, var(--panel-inventory) calc(0.24 * 100%), transparent) );
  }
}
.item-examine-lead {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}
.item-examine-detail {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--panel-inventory-bright);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory-bright) calc(0.72 * 100%), transparent);
  }
  margin: 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 2px solid color-mix(in srgb, var(--panel-inventory) calc(0.28 * 100%), transparent);
  }
}
.item-examine-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--panel-inventory) calc(0.12 * 100%), transparent);
  }
}
.item-examine-meta-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) calc(0.38 * 100%), transparent);
  }
}
.item-examine-meta-value {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted-2);
}
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scroll-fade {
  mask-image: linear-gradient( to bottom, transparent 0%, black 2.5rem, black calc(100% - 2.5rem), transparent 100% );
  -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 2.5rem, black calc(100% - 2.5rem), transparent 100% );
}
@keyframes scroll-hint-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.9;
  }
}
.scroll-hint {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--color-accent);
  animation: scroll-hint-bounce 1.4s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 6px rgba(255, 109, 26, 0.4));
}
.sys-btn--active {
  color: var(--color-accent);
  border-color: rgba(255, 109, 26, 0.3);
  background: rgba(255, 109, 26, 0.07);
}
.sys-btn--active:hover, .sys-btn--active:focus-visible {
  color: var(--color-accent);
  border-color: rgba(255, 109, 26, 0.45);
  background: rgba(255, 109, 26, 0.12);
}
.settings-divider {
  width: 1px;
  height: 1rem;
  background: rgba(255, 109, 26, 0.1);
  flex-shrink: 0;
  align-self: center;
}
:root[data-theme="light"] .choice-item {
  color: #1e1810;
  border-left-color: rgba(143, 79, 55, 0.32);
  background: rgba(65, 54, 43, 0.05);
}
:root[data-theme="light"] .choice-item:hover, :root[data-theme="light"] .choice-item:focus-visible {
  border-left-color: rgba(143, 79, 55, 0.62);
  background: rgba(143, 79, 55, 0.07);
  color: #100c08;
  box-shadow: inset 0 0 40px rgba(65, 54, 43, 0.04);
}
:root[data-theme="light"] .choice-item:active {
  background: rgba(143, 79, 55, 0.1);
  color: var(--color-accent);
}
:root[data-theme="light"] .choice-item--disabled, :root[data-theme="light"] .choice-item--disabled:hover {
  color: #6a5e52;
  border-left-color: rgba(90, 78, 66, 0.18);
  background: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .choice-item--danger {
  border-left-color: rgba(145, 66, 55, 0.3);
  background: rgba(145, 66, 55, 0.04);
  color: #5a2a22;
}
:root[data-theme="light"] .choice-item--danger:hover, :root[data-theme="light"] .choice-item--danger:focus-visible {
  border-left-color: rgba(145, 66, 55, 0.6);
  background: rgba(145, 66, 55, 0.08);
  color: var(--color-danger);
}
:root[data-theme="light"] .sys-btn {
  color: #66594d;
  border-color: rgba(45, 38, 30, 0.08);
}
:root[data-theme="light"] .sys-btn:hover, :root[data-theme="light"] .sys-btn:focus-visible {
  color: #312720;
  border-color: rgba(143, 79, 55, 0.22);
  background: rgba(143, 79, 55, 0.04);
}
:root[data-theme="light"] .sys-btn--active {
  color: var(--color-accent);
  border-color: rgba(143, 79, 55, 0.26);
  background: rgba(143, 79, 55, 0.055);
}
:root[data-theme="light"] .modal-backdrop {
  background: var(--overlay-bg);
}
:root[data-theme="light"] .modal-panel {
  background: var(--surface-modal);
  border-color: rgba(143, 79, 55, 0.15);
  box-shadow: 0 0 70px rgba(45, 38, 30, 0.08), 0 34px 70px rgba(31, 25, 20, 0.18);
}
:root[data-theme="light"] .modal-textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--color-text);
}
:root[data-theme="light"] .modal-textarea:focus {
  border-color: var(--input-border-focus);
}
:root[data-theme="light"] .roll-entry {
  border-left-color: rgba(143, 79, 55, 0.17);
  background: rgba(65, 54, 43, 0.025);
}
:root[data-theme="light"] .roll-entry--resolving {
  border-left-color: rgba(143, 79, 55, 0.3);
  background: rgba(143, 79, 55, 0.035);
}
:root[data-theme="light"] .roll-dice-pip {
  border-color: rgba(143, 79, 55, 0.22);
  background: rgba(143, 79, 55, 0.05);
}
:root[data-theme="light"] .stat-gauge {
  background: rgba(65, 54, 43, 0.055);
  border-color: rgba(143, 79, 55, 0.24);
  border-top-color: rgba(143, 79, 55, 0.42);
}
:root[data-theme="light"] .stat-gauge-val {
  text-shadow: none;
  color: var(--color-accent);
}
:root[data-theme="light"] .stat-gauge-frac {
  color: rgba(143, 79, 55, 0.78);
}
:root[data-theme="light"] .stat-gauge-key {
  color: rgba(65, 52, 41, 0.72);
}
:root[data-theme="light"] .stat-gauge-bar {
  background: rgba(143, 79, 55, 0.22);
}
:root[data-theme="light"] .dialogue-line {
  border-left-color: var(--character-accent, #ff6d1a);
  @supports (color: color-mix(in lab, red, red)) {
    border-left-color: color-mix( in srgb, var(--character-accent, var(--color-accent)) 55%, rgba(0, 0, 0, 0.2) );
  }
  text-shadow: none;
}
:root[data-theme="light"] .dialogue-speaker-label {
  filter: brightness(0.38) saturate(1.2);
  opacity: 1;
}
:root[data-theme="light"] .thought-speaker {
  filter: brightness(0.38) saturate(1.2);
  opacity: 1;
}
:root[data-theme="light"] .stage-direction {
  color: color-mix(in srgb, #00bdd4 55%, #8a6848 45%);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 55%, var(--color-muted-2) 45%);
  }
}
:root[data-theme="light"] .stage-direction::before {
  background: linear-gradient( to bottom, transparent 0%, rgba(45, 118, 128, 0.35) 28%, rgba(45, 118, 128, 0.35) 72%, transparent 100% );
}
:root[data-theme="light"] .section-rule {
  color: color-mix(in srgb, #00bdd4 20%, rgba(143, 79, 55, 0.75));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-cyan) 20%, rgba(143, 79, 55, 0.75));
  }
}
:root[data-theme="light"] .section-rule::before {
  background: linear-gradient(to right, rgba(143, 79, 55, 0.58), rgba(143, 79, 55, 0.22));
}
:root[data-theme="light"] .section-rule::after {
  background: linear-gradient(to right, rgba(143, 79, 55, 0.16), transparent);
}
:root[data-theme="light"] .narrative-margin {
  border-left-color: rgba(143, 79, 55, 0.28);
}
:root[data-theme="light"] .case-number {
  color: rgba(143, 79, 55, 0.62);
}
:root[data-theme="light"] .vitals-item-tag {
  color: rgba(70, 56, 45, 0.82);
}
:root[data-theme="light"] .vitals-item-pip, :root[data-theme="light"] .vitals-item-count {
  color: rgba(143, 79, 55, 0.68);
}
:root[data-theme="light"] .vitals-mem-tag {
  color: rgba(30, 95, 105, 0.82);
}
:root[data-theme="light"] .vitals-mem-dot {
  background: rgba(30, 95, 105, 0.55);
}
:root[data-theme="light"] .choice-resolving-track {
  background: rgba(143, 79, 55, 0.08);
}
:root[data-theme="light"] .choice-resolving-beam {
  background: linear-gradient(90deg, transparent 0%, rgba(143, 79, 55, 0.42) 50%, transparent 100%);
}
:root[data-theme="light"] .choice-resolving-label {
  color: rgba(143, 79, 55, 0.42);
}
:root[data-theme="light"] .game-panel-switcher {
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.06), transparent 48%), rgba(200, 194, 182, 0.7);
}
:root[data-theme="light"] .game-panel-switch {
  border-color: rgba(100, 80, 62, 0.22);
  background: rgba(65, 54, 43, 0.06);
  color: var(--color-muted);
}
:root[data-theme="light"] .game-panel-switch:hover, :root[data-theme="light"] .game-panel-switch:focus-visible {
  border-color: rgba(143, 79, 55, 0.42);
  background: rgba(143, 79, 55, 0.09);
  color: var(--color-accent);
}
:root[data-theme="light"] .game-panel-switch strong {
  color: var(--color-accent);
}
:root[data-theme="light"] .game-panel-switch--inventory {
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) 30%, transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 7%, transparent);
  }
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) 80%, var(--color-muted));
  }
}
:root[data-theme="light"] .game-panel-switch--inventory strong {
  color: var(--panel-inventory-deep);
}
:root[data-theme="light"] .game-panel-switch--memory {
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) 28%, transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 6%, transparent);
  }
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) 78%, var(--color-muted));
  }
}
:root[data-theme="light"] .game-panel-switch--memory strong {
  color: var(--color-cyan);
}
:root[data-theme="light"] .game-panel-switch--journal {
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) 32%, transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 7%, transparent);
  }
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) 82%, var(--color-muted));
  }
}
:root[data-theme="light"] .game-panel-switch--journal strong {
  color: var(--panel-journal);
}
:root[data-theme="light"] .game-panel-switch--system {
  border-color: rgba(65, 52, 41, 0.22);
  background: rgba(65, 52, 41, 0.05);
  color: var(--color-muted);
}
:root[data-theme="light"] .choice-check-tag {
  color: rgba(65, 52, 41, 0.78);
}
:root[data-theme="light"] .choice-check-roll-mode--adv {
  color: rgba(28, 110, 58, 0.9);
}
:root[data-theme="light"] .choice-check-roll-mode--dis {
  color: rgba(150, 38, 38, 0.88);
}
:root[data-theme="light"] .choice-check-attempts {
  color: rgba(65, 52, 41, 0.65);
}
:root[data-theme="light"] .roll-entry-mode-tag--advantage {
  color: rgba(28, 110, 58, 0.9);
}
:root[data-theme="light"] .roll-entry-mode-tag--disadvantage {
  color: rgba(150, 38, 38, 0.88);
}
:root[data-theme="light"] .choice-lock-reason {
  color: #4a3e34;
}
:root[data-theme="light"] .choice-num {
  color: rgba(143, 79, 55, 0.65);
}
:root[data-theme="light"] .choice-item:hover .choice-num, :root[data-theme="light"] .choice-item:focus-visible .choice-num {
  color: rgba(143, 79, 55, 0.9);
}
:root[data-theme="light"] .settings-divider {
  background: rgba(143, 79, 55, 0.16);
}
:root[data-theme="light"] .scroll-fade {
  mask-image: linear-gradient( to bottom, transparent 0%, white 2.5rem, white calc(100% - 2.5rem), transparent 100% );
  -webkit-mask-image: linear-gradient( to bottom, transparent 0%, white 2.5rem, white calc(100% - 2.5rem), transparent 100% );
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(143, 79, 55, 0.16);
}
@keyframes sys-menu-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sys-menu-panel {
  display: grid;
  gap: 0.85rem;
  animation: sys-menu-in 0.16s ease-out both;
}
.sys-menu-section {
  display: grid;
  gap: 0.5rem;
  padding: 0;
}
.sys-menu-section--audio {
  gap: 0.65rem;
}
.sys-menu-sep {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.22), rgba(255, 109, 26, 0.04));
}
.sys-menu-slider {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem 0.48rem;
  border: 1px solid rgba(255, 109, 26, 0.13);
  border-left: 2px solid rgba(255, 109, 26, 0.26);
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.06), transparent 74%), rgba(255, 109, 26, 0.024);
}
.sys-menu-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
}
.sys-menu-slider-label {
  color: var(--color-muted-2);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-transform: uppercase;
}
.sys-menu-slider-value {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.72;
}
.sys-menu-slider input[type="range"] {
  --slider-value: 50%;
  width: 100%;
  height: 1.05rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
}
.sys-menu-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 0.42rem;
  border: 1px solid rgba(255, 109, 26, 0.16);
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.72) var(--slider-value), transparent 0), repeating-linear-gradient( 90deg, rgba(255, 109, 26, 0.08) 0, rgba(255, 109, 26, 0.08) 1px, transparent 1px, transparent 10px ), rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 12px rgba(255, 109, 26, 0.045);
}
.sys-menu-slider input[type="range"]::-moz-range-track {
  height: 0.42rem;
  border: 1px solid rgba(255, 109, 26, 0.16);
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.72) var(--slider-value), transparent 0), repeating-linear-gradient( 90deg, rgba(255, 109, 26, 0.08) 0, rgba(255, 109, 26, 0.08) 1px, transparent 1px, transparent 10px ), rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 12px rgba(255, 109, 26, 0.045);
}
.sys-menu-slider input[type="range"]::-webkit-slider-thumb {
  width: 0.78rem;
  height: 1.05rem;
  margin-top: -0.36rem;
  border: 1px solid rgba(255, 190, 120, 0.72);
  background: #160b04;
  box-shadow: 0 0 0 2px rgba(255, 109, 26, 0.08), 0 0 16px rgba(255, 109, 26, 0.28);
  appearance: none;
  -webkit-appearance: none;
}
.sys-menu-slider input[type="range"]::-moz-range-thumb {
  width: 0.78rem;
  height: 1.05rem;
  border: 1px solid rgba(255, 190, 120, 0.72);
  border-radius: 0;
  background: #160b04;
  box-shadow: 0 0 0 2px rgba(255, 109, 26, 0.08), 0 0 16px rgba(255, 109, 26, 0.28);
}
.sys-menu-slider input[type="range"]:focus-visible {
  outline: none;
}
.sys-menu-slider:focus-within {
  border-color: rgba(255, 109, 26, 0.3);
  border-left-color: rgba(255, 109, 26, 0.55);
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.09), transparent 74%), rgba(255, 109, 26, 0.036);
}
.sys-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 0.9rem;
  gap: 0.75rem;
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.055), transparent 70%), rgba(255, 109, 26, 0.022);
  border: 1px solid rgba(255, 109, 26, 0.12);
  border-left: 2px solid rgba(255, 109, 26, 0.26);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  color: var(--color-muted-2);
  text-align: left;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.sys-menu-item:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.11), transparent 72%), rgba(255, 109, 26, 0.045);
  border-color: rgba(255, 109, 26, 0.24);
  border-left-color: rgba(255, 109, 26, 0.5);
  color: var(--color-accent);
}
.sys-menu-item:active:not(:disabled) {
  background: rgba(255, 109, 26, 0.12);
}
.sys-menu-item--danger {
  color: rgba(220, 80, 55, 0.7);
  background: linear-gradient(90deg, rgba(232, 32, 32, 0.055), transparent 70%), rgba(232, 32, 32, 0.02);
  border-color: rgba(232, 32, 32, 0.12);
  border-left-color: rgba(232, 32, 32, 0.26);
}
.sys-menu-item--danger:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(232, 32, 32, 0.1), transparent 72%), rgba(200, 55, 35, 0.04);
  border-color: rgba(232, 32, 32, 0.24);
  border-left-color: rgba(232, 32, 32, 0.48);
  color: rgba(240, 95, 65, 1);
}
.sys-menu-item-icon {
  width: 1.35rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  color: inherit;
}
.sys-menu-item-label {
  flex: 1;
  letter-spacing: 0.14em;
}
.sys-menu-item-value {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
  color: var(--color-muted);
}
.sys-menu-item-arrow {
  opacity: 0.3;
  font-size: 0.65rem;
}
.sys-menu-log-debug {
  color: rgba(138, 104, 72, 0.8) !important;
  opacity: 1 !important;
}
.sys-menu-log-info {
  color: var(--color-accent) !important;
  opacity: 1 !important;
}
.sys-menu-log-warn {
  color: rgba(210, 165, 40, 0.9) !important;
  opacity: 1 !important;
}
.sys-menu-log-error {
  color: rgba(220, 70, 55, 0.9) !important;
  opacity: 1 !important;
}
:root[data-theme="light"] .sys-menu-panel {
  background: transparent;
}
:root[data-theme="light"] .sys-menu-sep {
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.12), rgba(45, 118, 128, 0.045));
}
:root[data-theme="light"] .sys-menu-item {
  color: rgba(42, 34, 27, 0.88);
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.055), transparent 70%), rgba(65, 54, 43, 0.03);
  border-color: rgba(143, 79, 55, 0.16);
}
:root[data-theme="light"] .sys-menu-slider {
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.055), transparent 74%), rgba(65, 54, 43, 0.03);
  border-color: rgba(143, 79, 55, 0.16);
}
:root[data-theme="light"] .sys-menu-slider input[type="range"]::-webkit-slider-runnable-track {
  border-color: rgba(143, 79, 55, 0.16);
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.52) var(--slider-value), transparent 0), repeating-linear-gradient( 90deg, rgba(143, 79, 55, 0.065) 0, rgba(143, 79, 55, 0.065) 1px, transparent 1px, transparent 10px ), rgba(239, 234, 224, 0.34);
}
:root[data-theme="light"] .sys-menu-slider input[type="range"]::-moz-range-track {
  border-color: rgba(143, 79, 55, 0.16);
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.52) var(--slider-value), transparent 0), repeating-linear-gradient( 90deg, rgba(143, 79, 55, 0.065) 0, rgba(143, 79, 55, 0.065) 1px, transparent 1px, transparent 10px ), rgba(239, 234, 224, 0.34);
}
:root[data-theme="light"] .sys-menu-slider input[type="range"]::-webkit-slider-thumb {
  border-color: rgba(143, 79, 55, 0.46);
  background: #d8d0c1;
  box-shadow: 0 0 0 2px rgba(143, 79, 55, 0.045), 0 0 10px rgba(143, 79, 55, 0.12);
}
:root[data-theme="light"] .sys-menu-slider input[type="range"]::-moz-range-thumb {
  border-color: rgba(143, 79, 55, 0.46);
  background: #d8d0c1;
  box-shadow: 0 0 0 2px rgba(143, 79, 55, 0.045), 0 0 10px rgba(143, 79, 55, 0.12);
}
:root[data-theme="light"] .sys-menu-item:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(143, 79, 55, 0.07), transparent 72%), rgba(143, 79, 55, 0.035);
  color: var(--color-accent);
}
:root[data-theme="light"] .sys-menu-item--danger {
  color: rgba(128, 60, 50, 0.74);
}
:root[data-theme="light"] .sys-menu-item--danger:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(145, 66, 55, 0.08), transparent 72%), rgba(145, 66, 55, 0.032);
  color: var(--color-danger);
}
.sys-menu-item--primary {
  min-height: 4.25rem;
  padding: 1rem 0.9rem;
  background: linear-gradient(135deg, rgba(255, 109, 26, 0.18) 0%, rgba(255, 109, 26, 0.07) 100%), rgba(255, 109, 26, 0.03);
  border-color: rgba(255, 109, 26, 0.22);
  border-left-color: rgba(255, 109, 26, 0.52);
  color: var(--color-accent);
  position: relative;
  overflow: hidden;
}
.sys-menu-item--primary::before {
  content: "";
  position: absolute;
  inset: 0 55% 0 0;
  background: linear-gradient(90deg, rgba(255, 109, 26, 0.06), transparent);
  pointer-events: none;
}
.sys-menu-item--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255, 109, 26, 0.28) 0%, rgba(255, 109, 26, 0.12) 100%), rgba(255, 109, 26, 0.044);
  border-color: rgba(255, 109, 26, 0.3);
  border-left-color: rgba(255, 109, 26, 0.72);
  box-shadow: 0 0 28px rgba(255, 109, 26, 0.07), inset 0 0 20px rgba(255, 109, 26, 0.04);
  color: #ff9a55;
}
.sys-menu-item--primary .sys-menu-item-icon {
  opacity: 0.82;
}
.sys-menu-item--primary .sys-menu-item-arrow {
  opacity: 0.5;
}
.sys-menu-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}
.sys-menu-item-meta {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  opacity: 0.4;
  color: inherit;
  line-height: 1;
}
.sys-menu-item--compact {
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
}
.sys-menu-danger-badge {
  font-family: var(--font-mono);
  font-size: 0.47rem;
  letter-spacing: 0.08em;
  color: rgba(220, 80, 55, 0.38);
  border: 1px solid rgba(220, 80, 55, 0.15);
  padding: 0.13rem 0.32rem;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}
.sys-restart-confirming {
  cursor: default;
  border-left-color: rgba(232, 32, 32, 0.48);
  background: linear-gradient(135deg, rgba(232, 32, 32, 0.12) 0%, rgba(232, 32, 32, 0.05) 100%), rgba(232, 32, 32, 0.028);
}
.mm-restart-confirming {
  cursor: default;
  border-left-color: rgba(232, 32, 32, 0.42);
  background: linear-gradient(135deg, rgba(232, 32, 32, 0.1) 0%, rgba(232, 32, 32, 0.04) 100%), rgba(232, 32, 32, 0.022);
}
.mm-restart-confirming:hover, .mm-restart-confirming:focus-visible {
  border-left-color: rgba(232, 32, 32, 0.42);
  background: linear-gradient(135deg, rgba(232, 32, 32, 0.1) 0%, rgba(232, 32, 32, 0.04) 100%), rgba(232, 32, 32, 0.022);
  box-shadow: none;
  color: #b07060;
}
.restart-confirm-btns {
  display: flex;
  gap: 0.28rem;
  flex-shrink: 0;
  align-items: center;
}
.restart-confirm-yes, .restart-confirm-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.restart-confirm-yes {
  color: rgba(220, 80, 55, 0.82);
  background: rgba(232, 32, 32, 0.07);
  border-color: rgba(220, 80, 55, 0.28);
}
.restart-confirm-yes:hover {
  background: rgba(232, 32, 32, 0.18);
  color: rgba(240, 95, 65, 1);
  border-color: rgba(220, 80, 55, 0.52);
}
.restart-confirm-no {
  color: var(--color-muted);
  background: transparent;
  border-color: rgba(255, 109, 26, 0.16);
}
.restart-confirm-no:hover {
  background: rgba(255, 109, 26, 0.07);
  color: var(--color-muted-2);
  border-color: rgba(255, 109, 26, 0.28);
}
.sys-menu-section-hdr {
  font-family: var(--font-mono);
  font-size: 0.51rem;
  letter-spacing: 0.3em;
  color: var(--color-muted);
  opacity: 0.36;
  text-transform: uppercase;
  padding: 0 0.1rem;
  margin-bottom: -0.1rem;
}
.sys-menu-utility-strip {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 109, 26, 0.09);
  border-left: 2px solid rgba(255, 109, 26, 0.14);
  background: rgba(255, 109, 26, 0.013);
}
.sys-menu-utility-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.52rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 109, 26, 0.06);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.sys-menu-utility-btn:last-child {
  border-bottom: none;
}
.sys-menu-utility-btn:hover {
  background: rgba(255, 109, 26, 0.04);
  color: var(--color-muted-2);
}
.sys-menu-utility-icon {
  width: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.42;
  color: inherit;
}
.sys-menu-utility-value {
  margin-left: auto;
  font-size: 0.59rem;
  opacity: 0.48;
}
:root[data-theme="light"] .sys-menu-item--primary {
  background: linear-gradient(135deg, rgba(143, 79, 55, 0.1) 0%, rgba(143, 79, 55, 0.04) 100%), rgba(143, 79, 55, 0.022);
  border-color: rgba(143, 79, 55, 0.2);
  border-left-color: rgba(143, 79, 55, 0.44);
}
:root[data-theme="light"] .sys-menu-item--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(143, 79, 55, 0.16) 0%, rgba(143, 79, 55, 0.07) 100%), rgba(143, 79, 55, 0.035);
  border-left-color: rgba(143, 79, 55, 0.62);
  box-shadow: 0 0 22px rgba(143, 79, 55, 0.06), inset 0 0 16px rgba(143, 79, 55, 0.03);
}
:root[data-theme="light"] .sys-menu-utility-strip {
  border-color: rgba(143, 79, 55, 0.08);
  border-left-color: rgba(143, 79, 55, 0.14);
  background: rgba(143, 79, 55, 0.012);
}
:root[data-theme="light"] .sys-menu-utility-btn {
  color: rgba(42, 34, 27, 0.58);
  border-bottom-color: rgba(143, 79, 55, 0.06);
}
:root[data-theme="light"] .sys-menu-utility-btn:hover {
  background: rgba(143, 79, 55, 0.035);
  color: rgba(42, 34, 27, 0.82);
}
:root[data-theme="light"] .sys-menu-danger-badge {
  color: rgba(128, 60, 50, 0.36);
  border-color: rgba(128, 60, 50, 0.13);
}
:root[data-theme="light"] .sys-menu-section-hdr {
  color: rgba(42, 34, 27, 0.5);
}
:root[data-theme="light"] .sys-restart-confirming, :root[data-theme="light"] .mm-restart-confirming {
  background: linear-gradient(135deg, rgba(145, 66, 55, 0.08) 0%, rgba(145, 66, 55, 0.03) 100%), rgba(145, 66, 55, 0.02);
  border-left-color: rgba(145, 66, 55, 0.42);
}
:root[data-theme="light"] .mm-restart-confirming:hover, :root[data-theme="light"] .mm-restart-confirming:focus-visible {
  background: linear-gradient(135deg, rgba(145, 66, 55, 0.08) 0%, rgba(145, 66, 55, 0.03) 100%), rgba(145, 66, 55, 0.02);
  box-shadow: none;
}
:root[data-theme="light"] .restart-confirm-yes {
  color: rgba(128, 60, 50, 0.85);
  background: rgba(145, 66, 55, 0.06);
  border-color: rgba(128, 60, 50, 0.24);
}
:root[data-theme="light"] .restart-confirm-yes:hover {
  background: rgba(145, 66, 55, 0.14);
  color: var(--color-danger);
  border-color: rgba(128, 60, 50, 0.42);
}
:root[data-theme="light"] .restart-confirm-no {
  color: rgba(42, 34, 27, 0.5);
  border-color: rgba(143, 79, 55, 0.14);
}
:root[data-theme="light"] .restart-confirm-no:hover {
  background: rgba(143, 79, 55, 0.05);
  color: rgba(42, 34, 27, 0.78);
}
.mm-slot-header-actions {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}
.mm-slot-destroy-zone {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
}
.mm-slot-destroy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
  border-radius: 1px;
}
.mm-slot-card:hover .mm-slot-destroy-btn, .mm-slot-card:focus-visible .mm-slot-destroy-btn {
  color: rgba(220, 80, 55, 0.28);
  border-color: rgba(220, 80, 55, 0.1);
}
.mm-slot-destroy-btn:hover {
  color: rgba(220, 80, 55, 0.82) !important;
  border-color: rgba(220, 80, 55, 0.32) !important;
  background: rgba(232, 32, 32, 0.06);
}
.mm-slot-destroy-confirm, .mm-slot-destroy-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border: 1px solid;
  background: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  border-radius: 1px;
}
.mm-slot-destroy-confirm {
  color: rgba(80, 170, 110, 0.72);
  border-color: rgba(80, 170, 110, 0.28);
}
.mm-slot-destroy-confirm:hover {
  background: rgba(80, 170, 110, 0.1);
  color: rgba(80, 185, 110, 1);
  border-color: rgba(80, 170, 110, 0.5);
}
.mm-slot-destroy-cancel {
  color: rgba(138, 104, 72, 0.52);
  border-color: rgba(138, 104, 72, 0.18);
}
.mm-slot-destroy-cancel:hover {
  background: rgba(138, 104, 72, 0.08);
  color: rgba(138, 104, 72, 0.82);
  border-color: rgba(138, 104, 72, 0.32);
}
.mm-root {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.mm-root--menu {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 2rem 3.5rem 4rem;
}
.mm-bg-image, .mm-bg-vignette, .mm-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@keyframes mm-bg-drift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.08) translate(1.2%, 0.6%);
  }
}
.mm-bg-image {
  background-size: cover;
  background-position: center center;
  opacity: 0;
  filter: saturate(0.78);
  transition: opacity 0.6s ease-out;
}
.mm-root:not(.mm-root--menu) .mm-bg-image {
  opacity: var(--mm-bg-image-opacity-slots);
}
.mm-root--menu .mm-bg-image {
  opacity: var(--mm-bg-image-opacity);
  animation: mm-bg-drift 55s ease-in-out infinite alternate both;
  will-change: transform;
}
:root[data-theme="light"] .mm-bg-image {
  filter: saturate(0.92) contrast(1.03);
}
.mm-bg-vignette {
  background: var(--mm-vignette);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.mm-root--menu .mm-bg-vignette {
  opacity: var(--mm-vignette-opacity);
}
.mm-bg-glow {
  background: var(--mm-glow);
  opacity: var(--mm-glow-opacity);
}
.mm-archive-header {
  gap: 0.5rem;
}
.mm-archive-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.42em;
  color: var(--color-accent);
  text-shadow: var(--mm-title-shadow);
  animation: fade-up 0.38s ease-out both;
  animation-delay: 0.05s;
}
.mm-archive-subtitle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--color-muted-2);
  opacity: 0.72;
  animation: fade-up 0.38s ease-out both;
  animation-delay: 0.1s;
}
@keyframes mm-slot-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mm-options-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 30rem;
  }
}
.mm-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.mm-footer-meta {
  position: absolute;
  right: 1.5rem;
  bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mm-footer-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--color-muted-2);
  opacity: 0.58;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.mm-footer-support-btn:hover, .mm-footer-support-btn:focus-visible {
  opacity: 0.9;
  outline: none;
}
.mm-footer-version {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
  opacity: 0.52;
  user-select: none;
}
.mm-support-link {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 0.35rem 0.75rem;
}
.mm-support-link:hover, .mm-support-link:focus-visible {
  opacity: 0.85;
  outline: none;
}
.mm-slot-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(155deg, rgba(16, 10, 5, 0.97), rgba(8, 5, 2, 0.97));
  border: 1px solid rgba(255, 109, 26, 0.12);
  cursor: pointer;
  animation: mm-slot-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.mm-slot-card:hover, .mm-slot-card:focus-visible {
  border-color: rgba(255, 109, 26, 0.38);
  box-shadow: 0 0 0 1px rgba(255, 109, 26, 0.08), 0 0 32px rgba(255, 109, 26, 0.08), var(--mm-card-shadow-hover);
  transform: translateY(-3px);
  outline: none;
}
.mm-slot-card:active {
  transform: translateY(-1px);
}
.mm-slot-card[data-occupied="true"] {
  border-color: rgba(255, 109, 26, 0.2);
  background: linear-gradient(155deg, rgba(20, 12, 5, 0.98), rgba(10, 6, 2, 0.98));
}
.mm-slot-card[data-occupied="true"]:hover, .mm-slot-card[data-occupied="true"]:focus-visible {
  border-color: rgba(255, 109, 26, 0.52);
  box-shadow: var(--mm-card-shadow-occupied-hover);
}
.mm-slot-card-inner {
  padding: 1.25rem 1.35rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 10rem;
}
.mm-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mm-slot-num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  text-shadow: var(--mm-slot-num-shadow);
  line-height: 1;
}
.mm-slot-badge {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  padding: 0.2rem 0.45rem;
  border: 1px solid;
  border-radius: 1px;
}
.mm-slot-badge--occupied {
  color: color-mix(in srgb, #ff6d1a 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-accent) 85%, transparent);
  }
  border-color: var(--mm-accent-ghost);
  background: var(--mm-accent-fill);
}
.mm-slot-badge--vacant {
  color: var(--mm-earth);
  border-color: var(--mm-earth);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--mm-earth) 30%, transparent);
  }
  border-style: dashed;
}
.mm-slot-rule {
  height: 1px;
  background: linear-gradient(to right, var(--mm-accent-ghost), transparent);
}
.mm-slot-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.mm-slot-field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mm-slot-field-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.mm-slot-field-value {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-slot-field-value--time {
  color: var(--mm-accent-soft);
}
.mm-slot-vacant-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.25rem 0;
}
.mm-slot-vacant-lines {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.mm-slot-vacant-line {
  height: 1px;
  background: var(--mm-earth-line);
  border-radius: 1px;
}
.mm-slot-vacant-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: var(--mm-earth-soft);
}
.mm-slot-select-hint {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--mm-accent-faint);
  text-align: right;
  transition: color 0.18s ease;
}
.mm-slot-card:hover .mm-slot-select-hint, .mm-slot-card:focus-visible .mm-slot-select-hint {
  color: var(--mm-select-hover);
}
.mm-back-btn {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.mm-back-btn:hover, .mm-back-btn:focus-visible {
  color: var(--color-muted-2);
  outline: none;
}
.mm-back-sep {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--mm-accent-whisper), transparent);
  min-width: 1rem;
}
.mm-back-slot-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  flex-shrink: 0;
}
.mm-back-time {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--mm-accent-soft);
  flex-shrink: 0;
}
.mm-slot-mini-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-left: 2px solid var(--mm-mini-border);
  background: var(--mm-accent-fill);
}
.mm-slot-mini-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  flex-shrink: 0;
}
.mm-slot-mini-value {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-menu-hint {
  display: block;
  font-size: 0.6rem;
  margin-top: 0.15rem;
  color: var(--mm-hint);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.mm-menu-hint--danger {
  color: var(--mm-hint-danger);
}
.mm-menu-item--dim {
  opacity: 0.68;
}
.mm-menu-item--dim:hover, .mm-menu-item--dim:focus-visible {
  opacity: 1;
}
.mm-menu-item--blocked {
  opacity: 0.28;
  pointer-events: none;
  cursor: not-allowed;
  transition: opacity 0.2s ease, border-left-color 0.15s ease, background 0.15s ease;
}
.mm-btn-loader {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  width: 38px;
  margin-left: auto;
  padding-left: 10px;
}
.mm-btn-loader-track {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 109, 26, 0.1);
  border-radius: 1px;
  overflow: hidden;
}
.mm-btn-loader-sweep {
  display: block;
  position: absolute;
  inset-block: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  border-radius: 1px;
  animation: bb-loader-sweep 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mm-menu-item--active {
  border-left-color: var(--mm-menu-active-border) !important;
  background: var(--mm-accent-fill-strong) !important;
}
.mm-options-panel {
  margin-left: 0.5rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--mm-accent-ghost);
  background: var(--mm-accent-fill);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  animation: mm-options-reveal 0.28s ease-out both;
  overflow: hidden;
}
.mm-options-sep {
  height: 1px;
  background: var(--mm-accent-whisper);
}
.mm-volume-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}
.mm-volume-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  width: 3.8rem;
  flex-shrink: 0;
}
.mm-volume-track-wrap {
  flex: 1;
}
.mm-volume-input {
  width: 100%;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient( to right, var(--mm-accent-mid) 0%, var(--mm-accent-mid) var(--slider-value, 50%), var(--mm-earth-track) var(--slider-value, 50%), var(--mm-earth-track) 100% );
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.mm-volume-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: var(--mm-volume-thumb-shadow);
  cursor: pointer;
}
.mm-volume-input::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: var(--mm-volume-thumb-shadow);
  border: none;
  cursor: pointer;
}
.mm-volume-value {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--mm-volume-value);
  min-width: 2.2rem;
  text-align: right;
  flex-shrink: 0;
}
.mm-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: opacity 0.15s ease;
}
.mm-theme-toggle:hover {
  opacity: 0.85;
}
.mm-theme-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  width: 3.8rem;
  flex-shrink: 0;
}
.mm-theme-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.mm-theme-arrow {
  font-size: 0.7rem;
  color: var(--mm-theme-arrow);
}
:root[data-theme="light"] .mm-slot-card {
  background: linear-gradient(155deg, rgba(210, 204, 193, 0.97), rgba(196, 189, 176, 0.97));
  border-color: rgba(143, 79, 55, 0.14);
}
:root[data-theme="light"] .mm-slot-card[data-occupied="true"] {
  border-color: rgba(143, 79, 55, 0.22);
  background: linear-gradient(155deg, rgba(218, 212, 200, 0.98), rgba(202, 195, 182, 0.98));
}
:root[data-theme="light"] .mm-slot-card:hover, :root[data-theme="light"] .mm-slot-card:focus-visible {
  border-color: rgba(143, 79, 55, 0.4);
  box-shadow: 0 0 0 1px rgba(143, 79, 55, 0.08), 0 0 24px rgba(143, 79, 55, 0.08), var(--mm-card-shadow-hover);
}
:root[data-theme="light"] .mm-slot-card[data-occupied="true"]:hover, :root[data-theme="light"] .mm-slot-card[data-occupied="true"]:focus-visible {
  border-color: rgba(143, 79, 55, 0.48);
  box-shadow: var(--mm-card-shadow-occupied-hover);
}
:root[data-theme="light"] .mm-slot-card:hover .mm-slot-destroy-btn, :root[data-theme="light"] .mm-slot-card:focus-visible .mm-slot-destroy-btn {
  color: rgba(128, 60, 50, 0.28);
  border-color: rgba(128, 60, 50, 0.1);
}
:root[data-theme="light"] .mm-slot-destroy-btn:hover {
  color: rgba(128, 60, 50, 0.82) !important;
  border-color: rgba(128, 60, 50, 0.32) !important;
  background: rgba(145, 66, 55, 0.06);
}
:root[data-theme="light"] .mm-slot-destroy-confirm {
  color: rgba(50, 130, 80, 0.72);
  border-color: rgba(50, 130, 80, 0.26);
}
:root[data-theme="light"] .mm-slot-destroy-confirm:hover {
  background: rgba(50, 130, 80, 0.08);
  color: rgba(50, 130, 80, 1);
  border-color: rgba(50, 130, 80, 0.45);
}
:root[data-theme="light"] .mm-slot-destroy-cancel {
  color: rgba(90, 78, 68, 0.52);
  border-color: rgba(90, 78, 68, 0.18);
}
:root[data-theme="light"] .mm-slot-destroy-cancel:hover {
  background: rgba(90, 78, 68, 0.06);
  color: rgba(90, 78, 68, 0.8);
}
:root[data-theme="light"] .mm-volume-input::-webkit-slider-thumb {
  background: var(--color-accent);
  box-shadow: var(--mm-volume-thumb-shadow);
}
:root[data-theme="light"] .mm-back-btn {
  color: #5a4e44;
}
:root[data-theme="light"] .mm-back-btn:hover, :root[data-theme="light"] .mm-back-btn:focus-visible {
  color: #2a2018;
}
:root[data-theme="light"] .mm-back-sep {
  background: linear-gradient(to right, rgba(143, 79, 55, 0.32), transparent);
}
:root[data-theme="light"] .mm-slot-mini-card {
  background: rgba(203, 197, 185, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-left-color: rgba(143, 79, 55, 0.4);
}
:root[data-theme="light"] .mm-options-panel {
  background: rgba(203, 197, 185, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-left-color: rgba(143, 79, 55, 0.32);
}
:root[data-theme="light"] .mm-options-sep {
  background: rgba(143, 79, 55, 0.18);
}
:root[data-theme="light"] .mm-root .mm-menu-item--active {
  background: rgba(195, 189, 178, 0.92) !important;
  border-left-color: rgba(143, 79, 55, 0.58) !important;
}
.mm-root .choice-item {
  background: rgba(7, 5, 3, 0.74);
  border-left-color: rgba(255, 109, 26, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mm-root .choice-item:hover, .mm-root .choice-item:focus-visible {
  background: rgba(22, 14, 6, 0.84);
  border-left-color: rgba(255, 109, 26, 0.58);
  box-shadow: inset 0 0 40px rgba(255, 109, 26, 0.05), inset -1px 0 0 rgba(255, 109, 26, 0.08);
}
.mm-root .choice-item:active {
  background: rgba(30, 18, 8, 0.9);
}
.mm-root .choice-item--danger {
  background: rgba(10, 5, 3, 0.74);
  border-left-color: rgba(220, 80, 55, 0.3);
}
.mm-root .choice-item--danger:hover, .mm-root .choice-item--danger:focus-visible {
  background: rgba(28, 8, 6, 0.84);
  border-left-color: rgba(220, 80, 55, 0.58);
}
:root[data-theme="light"] .mm-root .choice-item {
  background: rgba(203, 197, 185, 0.88);
  border-left-color: rgba(143, 79, 55, 0.36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #1e1813;
}
:root[data-theme="light"] .mm-root .choice-item:hover, :root[data-theme="light"] .mm-root .choice-item:focus-visible {
  background: rgba(216, 211, 200, 0.96);
  border-left-color: rgba(143, 79, 55, 0.62);
  color: #110d09;
  box-shadow: inset 0 0 40px rgba(65, 54, 43, 0.06);
}
:root[data-theme="light"] .mm-root .choice-item:active {
  background: rgba(224, 219, 209, 1);
}
:root[data-theme="light"] .mm-root .choice-item--danger {
  background: rgba(203, 193, 189, 0.88);
  border-left-color: rgba(145, 66, 55, 0.36);
  color: #4a2820;
}
:root[data-theme="light"] .mm-root .choice-item--danger:hover, :root[data-theme="light"] .mm-root .choice-item--danger:focus-visible {
  background: rgba(214, 205, 201, 0.96);
  border-left-color: rgba(145, 66, 55, 0.6);
  color: var(--color-danger);
}
@keyframes mm-headphones-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mm-headphones-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}
@keyframes mm-headphones-pulse {
  0%, 100% {
    opacity: 0.62;
    filter: drop-shadow(0 0 18px rgba(255, 109, 26, 0.35));
  }
  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 28px rgba(255, 109, 26, 0.55));
  }
}
.mm-headphones-notice {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 18rem;
  animation: mm-headphones-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mm-headphones-notice--out {
  animation: mm-headphones-out 0.52s ease-in both;
  pointer-events: none;
}
.mm-headphones-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 1.35rem 1.25rem 1.15rem;
  text-align: center;
  background: linear-gradient(155deg, rgba(16, 10, 5, 0.94), rgba(8, 5, 2, 0.96));
  border: 1px solid var(--mm-accent-faint);
  box-shadow: 0 0 0 1px rgba(255, 109, 26, 0.04), 0 12px 40px rgba(0, 0, 0, 0.45);
}
.mm-headphones-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--mm-hint);
  opacity: 0.72;
}
.mm-headphones-icon-wrap {
  color: var(--color-accent);
  margin: 0.15rem 0 0.1rem;
  animation: mm-headphones-pulse 2.4s ease-in-out infinite;
}
.mm-headphones-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 2.4vw, 0.95rem);
  letter-spacing: 0.34em;
  color: var(--color-accent);
  text-shadow: var(--mm-title-shadow);
}
.mm-headphones-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  line-height: 1.55;
  color: var(--color-muted-2);
  opacity: 0.78;
  max-width: 14rem;
}
:root[data-theme="light"] .mm-headphones-card {
  background: linear-gradient(155deg, rgba(203, 197, 185, 0.96), rgba(193, 187, 176, 0.94));
  border-color: var(--mm-accent-faint);
  box-shadow: 0 0 0 1px rgba(143, 79, 55, 0.06), 0 10px 32px rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .mm-headphones-icon-wrap {
  animation-name: mm-headphones-pulse-light;
}
@keyframes mm-headphones-pulse-light {
  0%, 100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 14px rgba(143, 79, 55, 0.22));
  }
  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 22px rgba(143, 79, 55, 0.38));
  }
}
.game-mobile-hud {
  display: none;
}
.gmh-main {
  display: flex;
  align-items: stretch;
  gap: 0.22rem;
  height: 2.75rem;
  padding: 0.28rem 0.5rem;
}
.gmh-location {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.gmh-loc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.gmh-loc-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.gmh-loc-mode {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
  opacity: 0.78;
}
.gmh-actions {
  display: flex;
  align-items: stretch;
  gap: 0.22rem;
  flex: 1;
}
.gmh-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: 1;
  border: 1px solid;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.gmh-btn-label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  line-height: 1;
}
.gmh-btn--inventory {
  color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-inventory) 68%, transparent);
  }
  border-color: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-inventory) 20%, transparent);
  }
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 5%, transparent);
  }
}
.gmh-btn--inventory:active {
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 13%, transparent);
  }
}
.gmh-btn--memory {
  color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-intel) 68%, transparent);
  }
  border-color: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-intel) 20%, transparent);
  }
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 5%, transparent);
  }
}
.gmh-btn--memory:active {
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 13%, transparent);
  }
}
.gmh-btn--journal {
  color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--panel-journal) 68%, transparent);
  }
  border-color: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--panel-journal) 20%, transparent);
  }
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 5%, transparent);
  }
}
.gmh-btn--journal:active {
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 13%, transparent);
  }
}
.gmh-btn--system {
  color: rgba(180, 145, 108, 0.68);
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
}
.gmh-btn--system:active {
  background: rgba(255, 109, 26, 0.08);
}
.gmh-badge {
  position: absolute;
  top: 0.22rem;
  right: 0.18rem;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  line-height: 1;
  min-width: 0.82rem;
  height: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  letter-spacing: 0;
}
.gmh-badge--inventory {
  color: var(--panel-inventory);
  background: var(--panel-inventory);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-inventory) 14%, transparent);
  }
}
.gmh-badge--memory {
  color: var(--panel-intel);
  background: var(--panel-intel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-intel) 14%, transparent);
  }
}
.gmh-badge--journal {
  color: var(--panel-journal);
  background: var(--panel-journal);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--panel-journal) 14%, transparent);
  }
}
.gmh-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 0.32rem;
}
.gmh-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  flex: 1;
  white-space: nowrap;
}
.gmh-stat-key {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 109, 26, 0.32);
}
.gmh-stat-val {
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: rgba(255, 109, 26, 0.82);
  line-height: 1;
}
.gmh-stat-pill--hp .gmh-stat-key {
  color: color-mix(in srgb, #ff4938 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--category-damage) 35%, transparent);
  }
}
.gmh-stat-pill--hp .gmh-stat-val {
  color: color-mix(in srgb, #ff4938 78%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--category-damage) 78%, transparent);
  }
}
.gmh-stat-pill--low .gmh-stat-val {
  animation: blink-slow 1.5s step-end infinite;
  color: var(--color-danger);
}
.app-hdr-mobile {
  display: none;
}
.app-hdr-desktop {
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .gmh-btn {
  color: rgba(80, 60, 40, 0.52);
}
:root[data-theme="light"] .gmh-stat-key {
  color: rgba(100, 70, 40, 0.45);
}
:root[data-theme="light"] .gmh-stat-val {
  color: rgba(120, 75, 35, 0.85);
}
@media (max-width: 640px) {
  .app-hdr-desktop {
    display: none;
  }
  .app-hdr-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
  }
  .location-bar {
    display: none;
  }
  .vitals-command-line {
    display: none;
  }
  .game-mobile-hud {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  .mm-slot-card-inner {
    min-height: 8rem;
    padding: 1rem;
  }
  .mm-slot-grid {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
    width: 100%;
  }
  .mm-root--menu {
    align-items: stretch;
    padding: 0 1.25rem max(2.5rem, env(safe-area-inset-bottom));
  }
  .sys-menu-panel {
    max-height: calc(88dvh - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .narrative-margin {
    padding-left: 0.85rem;
  }
  .choice-list-footer {
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .choice-list-footer--dense {
    padding-top: 0.45rem;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0.85rem));
  }
  .choice-list-shell--dense .response-rule {
    margin-bottom: 0.35rem;
  }
  .choice-list-shell--dense .choice-list-stack {
    gap: 0.1rem;
  }
  .choice-list-shell--dense .choice-item {
    gap: 0.45rem;
    padding: 0.34rem 0.55rem;
    font-size: 0.64rem;
    line-height: 1.38;
    letter-spacing: 0.045em;
  }
  .choice-list-shell--dense .choice-num {
    min-width: 1.65rem;
    font-size: 0.56rem;
  }
  .choice-list-shell--dense .choice-check-tag {
    display: inline;
    margin-top: 0;
    margin-left: 0.3rem;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    white-space: normal;
  }
  .choice-list-shell--dense .choice-lock-reason {
    margin-top: 0.15rem;
    font-size: 0.58rem;
    line-height: 1.35;
  }
}
@media (max-width: 480px) {
  .app-header-status-text {
    display: none;
  }
}
@media (hover: none) and (pointer: coarse) {
  .choice-item {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .choice-list-shell--dense .choice-item {
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
  }
  .mm-slot-card-inner {
    min-height: 9rem;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}