/* Generated from interactive-model-system/theme.css. */
#principles {
  color-scheme: light;
  --im-paper: #f6f5f1;
  --im-ink: #28332e;
  --im-muted: #606c65;
  --im-line: #d6dcd5;
  --im-track: #a2aea6;
  --im-accent: #315c50;
  --im-accent-soft: #e6ede7;
  --im-attention: #c43d35;
  --im-sun: #edb934;
  --im-sun-label: #80581d;
  --im-earth: #287fc3;
  --im-land: #d7c687;
  --im-moon: #a3a19b;
  --im-rock: #b66639;
  --im-ice: #167e9a;
  --im-gas: #7375a0;
  --im-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  --im-serif: "Songti SC", "Noto Serif CJK SC", serif;
  font-family: var(--im-font);
  font-size: 15px;
}
#principles * { box-sizing: border-box; }
#principles { margin: 0; background: var(--im-paper); color: var(--im-ink); }
#principles button, #principles input { font: inherit; }
#principles button { cursor: pointer; color: inherit; }
#principles [hidden] { display: none !important; }
#principles :is(button, input, summary, a):focus-visible { outline: 2px solid var(--im-accent); outline-offset: 4px; }
#principles .im-frame { border: 1px solid var(--im-line); border-radius: 6px; overflow: hidden; background: var(--im-paper); }
#principles .im-workspace { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); }
#principles .im-scene { min-width: 0; }
#principles .im-narration { border-left: 1px solid var(--im-line); padding: 24px; }
#principles .im-player { padding: 16px 24px 14px; border-top: 1px solid var(--im-line); }
#principles .im-player-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; line-height: 1.6; }
#principles .im-player-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; margin: 8px 0; }
#principles .im-play { width: 44px; height: 44px; border: 1px solid var(--im-accent); border-radius: 50%; background: var(--im-accent); color: #fff; font-size: 16px; }
#principles .im-play:hover { filter: brightness(1.12); }
#principles .im-range { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
#principles .im-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--im-accent) var(--fill, 0%), var(--im-track) var(--fill, 0%)); }
#principles .im-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 3px solid var(--im-paper); border-radius: 50%; background: var(--im-accent); box-shadow: 0 0 0 1px var(--im-accent); }
#principles .im-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--im-accent) var(--fill, 0%), var(--im-track) var(--fill, 0%)); }
#principles .im-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--im-paper); border-radius: 50%; background: var(--im-accent); box-shadow: 0 0 0 1px var(--im-accent); }
#principles .im-back { min-height: 44px; padding: 0 10px 0 0; border: 0; background: transparent; color: var(--im-accent); }
#principles .im-scene-caption { position: absolute; pointer-events: none; z-index: 3; }
#principles .im-scene-caption h3 { white-space: pre-line; }
#principles .im-attention-pointer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--im-pointer-layer, 3); pointer-events: none; }
#principles .im-attention-pointer path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#principles .im-pointer-halo { stroke: var(--im-paper); stroke-width: 6; stroke-opacity: .94; }
#principles .im-pointer-arrow { stroke: var(--im-attention); stroke-width: 3; }
@media (max-width: 700px) {#principles .im-frame { display: flex; flex-direction: column; }
#principles .im-workspace { display: contents; }
#principles .im-scene { order: 0; }
#principles .im-player { order: 1; padding: 14px; }
#principles .im-narration { order: 2; border-left: 0; border-top: 1px solid var(--im-line); padding: 20px 16px; }
#principles .im-player-row { gap: 12px; }
#principles .im-player-meta { font-size: 13px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {#principles *, #principles *::before, #principles *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}