:root {
  --bg: #130d18;
  --bg-2: #1b1221;
  --panel: rgba(40, 25, 46, .9);
  --panel-solid: #28192e;
  --line: rgba(225, 196, 220, .14);
  --line-strong: rgba(225, 196, 220, .25);
  --text: #f8f1f7;
  --muted: #c2aebd;
  --faint: #a68fa1;
  --blue: #b78ac8;
  --cyan: #cf8dad;
  --green: #91c4ae;
  --amber: #d6ae82;
  --violet: #a989bd;
  --danger: #d9899b;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .25);
  --force-gravity: #ffbe68;
  --force-friction: #ff7e8d;
  --vector-velocity: #5cdfaa;
  --field-electric: #b78ac8;
  --field-magnetic: #d184aa;
  --energy-kinetic: #cf8dad;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 77% -15%, rgba(159, 100, 151, .22), transparent 36%), radial-gradient(circle at 8% 52%, rgba(104, 72, 126, .14), transparent 32%), var(--bg); font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif; }
button, textarea, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }

.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; border-right: 1px solid var(--line); background: rgba(19, 12, 23, .94); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(103, 165, 255, .35); border-radius: 13px; color: #b9d4ff; background: linear-gradient(145deg, rgba(103, 165, 255, .18), rgba(89, 215, 220, .04)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(49, 117, 210, .18); }
.brand-mark span { font: 600 20px Georgia, serif; }
.brand-mark i { position: absolute; right: 6px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.brand strong { display: block; font-size: 18px; letter-spacing: .08em; }
.brand small { display: block; margin-top: 2px; color: #667891; font-size: 8px; letter-spacing: .15em; }
.nav-list { display: grid; gap: 6px; }
.nav-item { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 0 7px; width: 100%; padding: 11px 12px; border-radius: 12px; color: var(--muted); text-align: left; background: transparent; }
.nav-item > span { grid-row: 1 / 3; align-self: center; color: #657892; font-size: 17px; text-align: center; }
.nav-item b { color: inherit; font-size: 13px; font-weight: 600; }
.nav-item small { color: #5c6f88; font-size: 10px; }
.nav-item:hover { color: #dce8f7; background: rgba(103, 165, 255, .06); }
.nav-item.active { color: #eaf3ff; background: linear-gradient(90deg, rgba(73, 133, 215, .17), rgba(73, 133, 215, .06)); }
.nav-item.active::before { content: ""; position: absolute; left: -18px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.nav-item.active > span { color: var(--blue); }
.side-bottom { display: grid; gap: 12px; margin-top: auto; }
.quiet-toggle { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; color: var(--muted); background: transparent; }
.quiet-toggle i { width: 29px; height: 17px; padding: 2px; border-radius: 20px; background: #253349; }
.quiet-toggle i::after { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; background: #77879c; transition: .2s; }
.quiet-toggle[aria-pressed="true"] i { background: rgba(103, 165, 255, .4); }
.quiet-toggle[aria-pressed="true"] i::after { transform: translateX(12px); background: #b9d6ff; }
.system-card { display: flex; gap: 9px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.system-card > i, .api-state i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(92,223,170,.7); }
.system-card b, .system-card small { display: block; }
.system-card b { font-size: 11px; }
.system-card small { color: var(--faint); font-size: 9px; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(19, 12, 24, .78); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions, .breadcrumbs, .api-state { display: flex; align-items: center; }
.breadcrumbs { gap: 9px; color: var(--faint); font-size: 12px; }
.breadcrumbs i { font-style: normal; }
.breadcrumbs b { color: #c9d5e6; font-weight: 500; }
.topbar-actions { gap: 10px; }
.api-state { gap: 7px; padding: 6px 10px; border: 1px solid rgba(92, 223, 170, .14); border-radius: 20px; color: #91b7aa; font-size: 10px; background: rgba(92, 223, 170, .05); }
.api-state.offline { color: #c5a777; border-color: rgba(255,190,104,.16); background: rgba(255,190,104,.05); }
.api-state.offline i { background: var(--amber); box-shadow: 0 0 10px rgba(255,190,104,.55); }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.025); }
.menu-btn { display: none; margin-right: 12px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; margin-left: 4px; border-radius: 11px; color: #d9e9ff; background: linear-gradient(135deg, #396cae, #274b83); font-size: 11px; font-weight: 600; }

.workspace { width: min(1500px, 100%); margin: 0 auto; padding: 34px 38px 60px; }
.hero-row { min-height: 160px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 5px 14px 24px; }
.eyebrow { color: #6da6ee; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.hero-row h1 { max-width: 760px; margin: 10px 0 8px; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.18; letter-spacing: -.035em; }
.hero-row p { max-width: 700px; margin: 0; color: var(--muted); font-size: 14px; }
.hero-orbit { position: relative; width: 190px; height: 132px; margin-right: 18px; opacity: .24; }
.hero-orbit img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-orbit i { position: absolute; inset: 22px 0; border: 1px solid rgba(103,165,255,.35); border-radius: 50%; transform: rotate(-14deg); }
.hero-orbit i:nth-child(2) { transform: rotate(46deg); border-color: rgba(89,215,220,.28); }
.hero-orbit i:nth-child(3) { transform: rotate(106deg); border-color: rgba(156,134,255,.26); }
.hero-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: #d5e6ff; font: 500 24px Georgia, serif; text-shadow: 0 0 18px rgba(103,165,255,.8); }

.panel, .input-panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(46, 29, 52, .96), rgba(31, 20, 37, .96)); box-shadow: inset 0 1px rgba(255,255,255,.035), var(--shadow); }
.input-panel { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .75fr); overflow: hidden; }
.input-main { padding: 22px; }
.section-label { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.section-label > span { color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.section-label b, .section-label small { display: block; }
.section-label b { font-size: 14px; }
.section-label small { color: var(--faint); font-size: 10px; }
textarea { display: block; width: 100%; min-height: 105px; resize: vertical; padding: 15px 16px; border: 1px solid #d5bfd0; border-radius: 13px; color: #3b2738; background: #f8f2f7; box-shadow: inset 0 1px 3px rgba(68, 36, 60, .08); }
textarea::placeholder { color: #725f6e; opacity: 1; }
.input-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.upload-btn { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; font-size: 11px; }
.upload-btn span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--blue); }
.upload-btn input { display: none; }
.primary-btn { min-width: 134px; display: flex; justify-content: center; gap: 12px; padding: 11px 17px; border-radius: 11px; color: #fff9fd; background: linear-gradient(135deg, #805288, #8d4f72); box-shadow: 0 10px 25px rgba(93, 43, 81, .32); font-weight: 600; }
.primary-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary-btn:disabled { cursor: wait; opacity: .6; transform: none; }
.notice { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 10px; color: var(--faint); font-size: 10px; }
.notice i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.notice.success { color: #83c9ad; }
.notice.success i { background: var(--green); }
.notice.error { color: #e89aa3; }
.notice.error i { background: var(--danger); }
.demo-picker { padding: 20px; border-left: 1px solid var(--line); background: rgba(24, 14, 28, .34); }
.picker-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.picker-title b, .picker-title small { display: block; }
.picker-title b { font-size: 12px; }
.picker-title small { color: var(--faint); font-size: 9px; }
.picker-title > span { padding: 3px 7px; border-radius: 10px; color: #8fbaf2; background: rgba(103,165,255,.08); font-size: 9px; }
.demo-list { display: grid; gap: 7px; }
.demo-item { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); text-align: left; background: transparent; }
.demo-item > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #9bbde9; background: rgba(103,165,255,.08); font-size: 11px; }
.demo-item b, .demo-item small { display: block; }
.demo-item b { overflow: hidden; color: #c8d5e6; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.demo-item small { color: var(--faint); font-size: 8px; }
.demo-item em { color: #667a93; font-size: 11px; font-style: normal; }
.demo-item:hover, .demo-item.active { border-color: rgba(103,165,255,.2); background: rgba(103,165,255,.06); }
.demo-item.active em { color: var(--blue); }

.result-workspace { margin-top: 28px; }
.result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0 4px 17px; }
.result-meta { display: flex; gap: 9px; align-items: center; }
.result-meta span { color: var(--muted); font-size: 10px; }
.result-meta span:first-child { padding: 3px 8px; border-radius: 10px; color: #9fc7fa; background: rgba(103,165,255,.09); }
.result-heading h2 { margin: 8px 0 5px; font-size: 21px; }
.result-heading p { max-width: 850px; margin: 0; color: var(--muted); font-size: 12px; }
.heading-status { display: flex; align-items: center; gap: 9px; }
.status { padding: 6px 10px; border-radius: 18px; font-size: 10px; white-space: nowrap; }
.status.success { color: #7fe0b8; background: rgba(92,223,170,.09); }
.status.warning { color: #f0bf7c; background: rgba(255,190,104,.09); }
.status.info { color: #a99bfa; background: rgba(156,134,255,.09); }
.secondary-btn { padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 10px; }
.question-tabs { display: flex; gap: 7px; margin-bottom: 10px; overflow-x: auto; }
.question-tab { display: flex; gap: 7px; align-items: center; min-width: max-content; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(13,27,46,.8); font-size: 10px; }
.question-tab i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.question-tab[data-status="FULL"] i { background: var(--green); }
.question-tab[data-status="PARTIAL"] i { background: var(--amber); }
.question-tab[data-status="STRUCTURE_ONLY"] i { background: var(--violet); }
.question-tab.active { border-color: rgba(103,165,255,.4); color: #dbeaff; background: rgba(57,105,169,.18); }
.learning-grid { display: grid; grid-template-columns: minmax(210px, .78fr) minmax(500px, 2.2fr) minmax(240px, .9fr); gap: 12px; }
.panel { min-width: 0; overflow: hidden; }
.parameter-panel, .solution-panel { padding: 17px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.panel-head span { display: block; color: var(--faint); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.panel-head h3 { margin: 2px 0 0; font-size: 13px; }
.text-btn { padding: 4px; color: #74a7e8; background: transparent; font-size: 9px; }
.parameter-list { display: grid; gap: 2px; }
.parameter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.parameter-row label { color: var(--muted); font-size: 10px; }
.parameter-row small { display: block; color: #546780; font-size: 8px; }
.parameter-value { color: #dce9fa; font-size: 11px; font-weight: 600; white-space: nowrap; }
.parameter-value input { width: 66px; padding: 4px 5px; border: 1px solid var(--blue); border-radius: 6px; color: #163456; background: #eef6ff; text-align: right; }
.model-card { margin-top: 13px; padding: 11px; border: 1px solid rgba(103,165,255,.12); border-radius: 11px; background: rgba(103,165,255,.045); }
.model-card span, .model-card b, .model-card small { display: block; }
.model-card span { color: #69809c; font-size: 8px; }
.model-card b { margin: 3px 0; color: #a8c9f2; font-size: 10px; }
.model-card small { color: #536980; font-size: 8px; }
.advanced-info { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.advanced-mode .advanced-info { display: block; }
.advanced-only { display:none!important; }
.advanced-mode .advanced-only { display:block!important; }
.advanced-info > span { color: var(--faint); font-size: 8px; text-transform: uppercase; }
.advanced-info dl { margin: 6px 0 0; }
.advanced-info dl div { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0; font-size: 8px; }
.advanced-info dt { color: var(--faint); }
.advanced-info dd { margin: 0; color: #879ab2; font-family: ui-monospace, monospace; }

.visual-panel { display: flex; flex-direction: column; min-height: 480px; background: linear-gradient(155deg, rgba(43, 26, 49, .98), rgba(25, 16, 31, .98)); }
.visual-topline { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.view-switch, .camera-presets { display: flex; gap: 4px; }
.view-switch { padding: 3px; border-radius: 9px; background: rgba(3,11,22,.45); }
.view-switch button, .camera-presets button { padding: 5px 9px; border-radius: 7px; color: var(--faint); background: transparent; font-size: 9px; }
.view-switch button.active { color: #dbeaff; background: #244d7f; }
.camera-presets button.active { color: #9bc6ff; background: rgba(103,165,255,.1); }
.stage-tabs { display: flex; gap: 5px; padding: 7px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(3,11,22,.25); }
.stage-tabs button { min-width: max-content; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--faint); background: transparent; font-size: 8px; }
.stage-tabs button.active { color: #b7d5fb; border-color: rgba(103,165,255,.3); background: rgba(103,165,255,.08); }
.canvas-wrap { position: relative; flex: 1; min-height: 370px; background: radial-gradient(circle at 50% 48%, #321e38, #160f1d 68%); }
#sceneCanvas,#threeCanvas { display:block; width:100%; height:100%; min-height:370px; }
#threeCanvas { position:absolute; inset:0; }
.axis-widget { position: absolute; right: 16px; bottom: 17px; width: 50px; height: 45px; color: var(--faint); font-size: 8px; }
.axis-widget span { position: absolute; }
.axis-widget .x { right: 0; top: 25px; color: #e37c88; }
.axis-widget .y { left: 22px; top: 0; color: #68d6a8; }
.axis-widget .z { left: 0; bottom: 0; color: #6faaff; }
.scene-legend { position: absolute; top: 13px; left: 14px; display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(3,11,22,.58); backdrop-filter: blur(7px); font-size: 8px; }
.scene-legend span { display: flex; align-items: center; gap: 5px; }
.scene-legend i { width: 7px; height: 2px; }
.scene-legend .electric { background: var(--field-electric); }
.scene-legend .magnetic { background: var(--field-magnetic); }
.scene-legend .velocity { background: var(--vector-velocity); }
.scene-legend .force { background: var(--force-friction); }
.player { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-top: 1px solid var(--line); color: var(--faint); font-size: 9px; }
.play-btn { width: 29px; height: 29px; border-radius: 50%; color: #e9f3ff; background: #315f98; font-size: 10px; }
.player input { flex: 1; accent-color: var(--blue); }
.player select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(3,11,22,.55); font-size: 9px; }

.mini-status { padding: 4px 7px; border-radius: 10px; background: rgba(103,165,255,.08); }
.solution-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.solution-steps li { position: relative; padding: 0 0 16px 30px; color: var(--muted); font-size: 10px; counter-increment: step; }
.solution-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: #8fbaf1; font-size: 8px; background: #122640; }
.solution-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 21px; bottom: 0; width: 1px; background: var(--line); }
.answer-card { margin-top: 2px; padding: 12px; border: 1px solid rgba(89,215,220,.14); border-radius: 11px; background: rgba(89,215,220,.045); }
.answer-card span, .answer-card b { display: block; }
.answer-card span { color: #66859a; font-size: 8px; }
.answer-card b { margin-top: 4px; color: #a5e3e6; font: 600 13px Georgia, "Noto Sans SC", serif; }
.partial-hint { margin-top: 11px; padding: 11px; border: 1px solid rgba(255,190,104,.15); border-radius: 11px; background: rgba(255,190,104,.05); }
.partial-hint b { color: #e6b97b; font-size: 10px; }
.partial-hint p { margin: 5px 0 8px; color: #8d806e; font-size: 9px; }
.partial-hint button { padding: 5px 8px; border-radius: 6px; color: #d6ae78; background: rgba(255,190,104,.1); font-size: 8px; }
.hidden { display: none !important; }
.mobile-shade { display: none; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.5); }

@media (max-width: 1220px) {
  .learning-grid { grid-template-columns: 220px minmax(460px, 1fr); }
  .solution-panel { grid-column: 1 / -1; }
  .solution-panel .solution-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .solution-panel .solution-steps li { padding-bottom: 0; }
  .solution-panel .solution-steps li::after { display: none; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; width: 246px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .mobile-shade.show { display: block; }
  .menu-btn { display: block; }
  .workspace { padding: 24px 20px 50px; }
  .input-panel { grid-template-columns: 1fr; }
  .demo-picker { border-top: 1px solid var(--line); border-left: 0; }
  .demo-list { grid-template-columns: repeat(3, 1fr); }
  .demo-item { grid-template-columns: 28px 1fr; }
  .demo-item em { display: none; }
  .hero-orbit { display: none; }
}

@media (max-width: 700px) {
  .topbar { padding: 0 14px; }
  .api-state, .breadcrumbs span, .breadcrumbs i { display: none; }
  .hero-row { min-height: 140px; padding-inline: 2px; }
  .hero-row h1 { font-size: 29px; }
  .input-main, .demo-picker { padding: 16px; }
  .demo-list { grid-template-columns: 1fr; }
  .input-actions, .result-heading { align-items: stretch; flex-direction: column; }
  .primary-btn { width: 100%; }
  .learning-grid { grid-template-columns: 1fr; }
  .parameter-panel { order: 2; }
  .visual-panel { order: 1; min-height: 430px; }
  .solution-panel { order: 3; }
  .visual-topline { align-items: flex-start; flex-direction: column; }
  .camera-presets { width: 100%; overflow-x: auto; }
  .scene-legend { right: 12px; }
  .solution-panel .solution-steps { grid-template-columns: 1fr; }
  .player span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* 低饱和紫粉主题：大面积深梅紫，交互层使用灰紫与暗玫瑰。 */
.brand-mark {
  border-color: rgba(205, 157, 196, .38);
  color: #e2bed8;
  background: linear-gradient(145deg, rgba(167, 108, 157, .24), rgba(110, 82, 132, .10));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(103, 52, 91, .23);
}
.brand-mark i { background: #d69ab9; box-shadow: 0 0 10px rgba(214, 154, 185, .72); }
.brand small { color: #9b8496; }
.nav-item > span { color: #9a8195; }
.nav-item small { color: #887283; }
.nav-item:hover { color: #f2e5ef; background: rgba(190, 137, 178, .07); }
.nav-item.active { color: #fff4fb; background: linear-gradient(90deg, rgba(171, 107, 157, .22), rgba(115, 82, 135, .08)); }
.nav-item.active::before { background: #cf8dad; box-shadow: 0 0 12px rgba(207, 141, 173, .72); }
.nav-item.active > span { color: #d8a4c2; }
.quiet-toggle i { background: #3b293d; }
.quiet-toggle i::after { background: #9e8499; }
.quiet-toggle[aria-pressed="true"] i { background: rgba(183, 138, 200, .42); }
.quiet-toggle[aria-pressed="true"] i::after { background: #efd7e9; }
.system-card, .icon-btn { background: rgba(255, 245, 252, .035); }
.breadcrumbs b { color: #e1d0dd; }
.avatar { color: #fff4fb; background: linear-gradient(135deg, #8c648e, #9e5f82); }
.eyebrow, .section-label > span { color: #d19ab9; }
.hero-orbit i { border-color: rgba(203, 149, 190, .36); }
.hero-orbit i:nth-child(2) { border-color: rgba(173, 137, 200, .30); }
.hero-orbit i:nth-child(3) { border-color: rgba(216, 139, 172, .27); }
.hero-orbit b { color: #f0d8e9; text-shadow: 0 0 18px rgba(190, 119, 163, .72); }
.upload-btn span { color: #d2a0be; background: rgba(212, 152, 190, .06); }
.primary-btn:hover { filter: brightness(1.08) saturate(.94); }
.notice.success { color: #9ecdb8; }
.picker-title > span, .result-meta span:first-child { color: #deb0cb; background: rgba(205, 141, 177, .10); }
.demo-item > span { color: #d8aac6; background: rgba(190, 132, 174, .10); }
.demo-item b { color: #e7d7e3; }
.demo-item:hover, .demo-item.active { border-color: rgba(207, 141, 173, .25); background: rgba(172, 106, 151, .10); }
.demo-item.active em { color: #da9fbe; }
.secondary-btn { color: #cdb8c8; background: rgba(255, 246, 252, .035); }
.question-tab { background: rgba(32, 19, 37, .84); }
.question-tab.active { border-color: rgba(207, 141, 173, .43); color: #faeef7; background: rgba(155, 91, 137, .20); }
.text-btn { color: #d6a0c0; }
.parameter-value { color: #f4e7f1; }
.parameter-value input {
  border-color: #b98caa;
  color: #3c2637;
  background: #fbf6fa;
  box-shadow: 0 0 0 2px rgba(192, 137, 174, .12);
}
.parameter-value input:focus { border-color: #9f668f; box-shadow: 0 0 0 3px rgba(190, 128, 167, .25); }
.model-card { border-color: rgba(207, 141, 173, .18); background: linear-gradient(135deg, rgba(170, 105, 150, .10), rgba(121, 87, 143, .07)); }
.model-card b { color: #e1b5d0; }
.view-switch { background: rgba(18, 10, 22, .52); }
.view-switch button.active { color: #fff5fb; background: linear-gradient(135deg, #805a8c, #925777); }
.camera-presets button.active { color: #dfb5d0; background: rgba(192, 130, 168, .12); }
.stage-tabs { background: rgba(20, 11, 24, .32); }
.stage-tabs button.active { color: #e8c8dc; border-color: rgba(207,141,173,.34); background: rgba(177,106,151,.11); }
.scene-legend { background: rgba(24, 13, 28, .68); }
.play-btn { color: #fff7fc; background: linear-gradient(135deg, #875e92, #a05d82); }
.player select { color: #e2d1de; background: rgba(22, 12, 26, .68); }
.answer-card { border-color: rgba(211, 143, 178, .20); background: linear-gradient(135deg, rgba(188, 116, 161, .10), rgba(139, 97, 158, .07)); }
.answer-card b { color: #efc2dc; }
.partial-hint { border-color: rgba(214,174,130,.20); background: rgba(151, 105, 121, .10); }
.api-state { border-color: rgba(145,196,174,.18); background: rgba(145,196,174,.06); }

/* 所有可编辑控件都使用明确的前景/背景对比。 */
textarea:focus { border-color: #a76d97; box-shadow: 0 0 0 3px rgba(167, 109, 151, .22), inset 0 1px 3px rgba(68, 36, 60, .08); }
textarea::selection, .parameter-value input::selection { color: #fff; background: #8d5278; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline-color: #d09ab9; }

/* 接近白色的浅粉主题：保留原有组件配色，只调整主体底色和正文对比度。 */
:root {
  --bg:#fff8fb; --bg-2:#fff5f9; --panel:rgba(255,252,255,.95); --panel-solid:#fffaff;
  --line:rgba(79,53,77,.13); --line-strong:rgba(79,53,77,.24);
  --text:#2f2530; --muted:#5d4d60; --faint:#6d5b6f;
  --blue:#875f91; --cyan:#a95f84; --green:#4f806b; --amber:#90652f; --violet:#775688; --danger:#a84760;
  --shadow:0 20px 55px rgba(75,48,72,.10); --field-electric:#8d628e; --field-magnetic:#aa5f82; --energy-kinetic:#a95f84;
}
body { background:#fff8fb; }
.sidebar { background:linear-gradient(180deg,#24142f 0%,#31183e 52%,#201129 100%); border-right-color:rgba(255,255,255,.10); box-shadow:10px 0 34px rgba(46,23,57,.18); }
.topbar { background:rgba(249,244,249,.90); border-bottom-color:var(--line); box-shadow:0 8px 24px rgba(78,50,75,.04); }
.panel,.input-panel { background:linear-gradient(145deg,rgba(255,253,255,.98),rgba(248,241,248,.98)); border-color:var(--line); box-shadow:inset 0 1px rgba(255,255,255,.88),var(--shadow); }
.visual-panel { background:linear-gradient(155deg,#fffaff,#f6edf6); }
.demo-picker { background:rgba(235,222,236,.48); }
.demo-list { max-height:300px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(135,95,145,.35) transparent; }
.brand-mark { color:#704e72; border-color:rgba(117,76,109,.24); background:linear-gradient(145deg,#f7eaf3,#e9dcea); box-shadow:inset 0 1px #fff,0 9px 22px rgba(90,55,83,.10); }
.brand-mark i { background:#a75f83; box-shadow:0 0 9px rgba(167,95,131,.35); }
.brand-logo { width:54px; height:42px; flex:0 0 54px; object-fit:contain; border:1px solid rgba(255,255,255,.20); border-radius:11px; background:#eef0f4; box-shadow:0 10px 25px rgba(9,3,13,.28); }
.brand strong,.hero-row h1,.section-label b,.picker-title b,.result-heading h2,.panel-head h3 { color:#342735; }
.brand small,.section-label small,.picker-title small { color:#786477; }
.nav-item { color:#69586a; }
.nav-item>span,.nav-item small { color:#806d7f; }
.nav-item:hover { color:#3f3140; background:rgba(132,90,126,.07); }
.nav-item.active { color:#3a2b3b; background:linear-gradient(90deg,rgba(193,143,177,.23),rgba(177,155,199,.14)); }
.nav-item.active::before { background:#9f5c80; box-shadow:0 0 9px rgba(159,92,128,.28); }
.nav-item.active>span { color:#8f567b; }
.quiet-toggle,.breadcrumbs,.upload-btn { color:#655566; }
.quiet-toggle i { background:#d7c8d5; }
.quiet-toggle i::after { background:#806d7e; }
.system-card,.icon-btn,.secondary-btn { color:#5f4f61; border-color:var(--line); background:rgba(255,255,255,.52); }
.breadcrumbs b { color:#443546; }
.api-state { color:#476f5e; border-color:rgba(79,128,107,.18); background:rgba(79,128,107,.07); }
.avatar { color:#fff9fd; background:linear-gradient(135deg,#805b87,#985d7b); }
.eyebrow,.section-label>span { color:#8e587d; }
.hero-row p,.result-heading p { color:#675769; }
.hero-orbit b { color:#714c70; text-shadow:0 0 16px rgba(177,108,148,.22); }
textarea { color:#342535; background:#fffdfd; border-color:#c9b5c4; box-shadow:inset 0 1px 3px rgba(72,42,66,.07); }
textarea::placeholder { color:#725f6e; opacity:1; }
.upload-btn span { color:#865878; border-color:#c6afbf; background:#f8eef5; }
.notice,.demo-item,.result-meta span { color:#6b596c; }
.notice.success { color:#47735f; }
.demo-item>span { color:#7e5473; background:rgba(175,116,155,.11); }
.demo-item b { color:#49394a; }
.demo-item small,.demo-item em { color:#756477; }
.demo-item:hover,.demo-item.active { border-color:rgba(139,86,124,.22); background:rgba(188,139,172,.14); }
.result-meta span:first-child,.picker-title>span { color:#774d6e; background:rgba(178,116,155,.12); }
.question-tab { color:#68586a; border-color:var(--line); background:rgba(255,252,255,.74); }
.question-tab.active { color:#443346; border-color:rgba(143,82,118,.30); background:rgba(191,140,174,.17); }
.parameter-row { border-bottom-color:rgba(79,53,77,.11); }
.parameter-row label,.solution-steps li { color:#625164; }
.parameter-row small { color:#796779; }
.parameter-value { color:#3c2d3e; }
.parameter-value input { color:#352537; background:#fffdfd; border-color:#b391aa; }
.text-btn { color:#7f4e70; }
.model-card,.answer-card { border-color:rgba(143,82,118,.16); background:linear-gradient(135deg,rgba(225,194,214,.34),rgba(216,204,230,.30)); }
.model-card span,.model-card small,.answer-card span { color:#725f72; }
.model-card b,.answer-card b { color:#67435d; }
.advanced-info dt,.advanced-info>span { color:#725f73; }
.advanced-info dd { color:#59475b; }
.view-switch { background:#ede3ed; }
.view-switch button,.camera-presets button,.stage-tabs button { color:#6f5d70; }
.view-switch button.active { color:#fffafd; background:linear-gradient(135deg,#75527f,#8a5472); }
.camera-presets button.active,.stage-tabs button.active { color:#724767; background:rgba(174,112,151,.15); }
.stage-tabs { background:rgba(229,216,230,.40); }
.canvas-wrap { background:radial-gradient(circle at 50% 45%,#f8eef5,#e9deeb 72%); }
.scene-legend { color:#584759; border-color:rgba(79,53,77,.16); background:rgba(255,250,254,.84); }
.player { color:#6b596c; }
.player select { color:#4f3e51; background:#fffafd; border-color:var(--line-strong); }
.player span { flex:0 0 48px; min-width:48px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#timeNow { text-align:right; }
#timeEnd { text-align:left; }
.player input[type="range"] { min-width:0; }
.solution-steps li::before { color:#754c6c; border-color:#cbb5c5; background:#f2e5ef; }
.partial-hint { border-color:rgba(144,101,47,.18); background:rgba(223,198,167,.23); }
.partial-hint b,.partial-hint button { color:#714f28; }
.partial-hint p { color:#725e48; }
.mobile-shade { background:rgba(45,31,45,.32); }

/* 深紫侧边栏：局部提高文字与控件对比度，其余浅色主题保持不变。 */
.sidebar .brand strong { color:#fff8ff; }
.sidebar .brand small { color:#cbb8d1; }
.sidebar .nav-item { color:#e2d6e7; }
.sidebar .nav-item>span,.sidebar .nav-item small { color:#bdaac5; }
.sidebar .nav-item:hover { color:#fff; background:rgba(255,255,255,.08); }
.sidebar .nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(210,151,205,.25),rgba(255,255,255,.07)); }
.sidebar .nav-item.active::before { background:#efacd4; box-shadow:0 0 12px rgba(239,172,212,.60); }
.sidebar .nav-item.active>span { color:#f3bddc; }
.sidebar .quiet-toggle { color:#e6d9e9; }
.sidebar .quiet-toggle i { background:#584060; }
.sidebar .quiet-toggle i::after { background:#d7c3db; }
.sidebar .quiet-toggle[aria-pressed="true"] i { background:#a96693; }
.sidebar .system-card { color:#eee3f1; border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.07); }
.sidebar .system-card small { color:#bdaac5; }

/* Step5 产品化补丁：结构视图、可恢复提示和完整参数控件。 */
.notice { flex-wrap:wrap; }
.notice-action { margin-left:auto; padding:4px 8px; border:1px solid currentColor; border-radius:7px; color:inherit; background:transparent; font-size:9px; }
.parameter-actions { display:flex; align-items:center; gap:4px; }
.parameter-value { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.parameter-value input,.parameter-value select { width:92px; min-height:28px; padding:4px 6px; border:1px solid #b391aa; border-radius:7px; color:#352537; background:#fffdfd; font-size:10px; }
.parameter-value input[type="checkbox"] { width:18px; min-height:18px; accent-color:var(--blue); }
.parameter-row.invalid .parameter-value input,.parameter-row.invalid .parameter-value select { border-color:var(--danger); box-shadow:0 0 0 2px rgba(168,71,96,.12); }
.parameter-row .field-error { grid-column:1/-1; margin-top:4px; color:var(--danger); font-size:8px; text-align:right; }
.structure-panel { margin-bottom:12px; padding:18px; }
.structure-summary { padding:4px 8px; border-radius:10px; color:#76536f!important; background:rgba(169,101,144,.10); }
.structure-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.structure-grid h4 { margin:0 0 8px; color:#4d3b4e; font-size:11px; }
.structure-list { display:flex; flex-wrap:wrap; gap:7px; }
.structure-chip { min-width:120px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.62); }
.structure-chip b,.structure-chip span { display:block; }
.structure-chip b { color:#49384a; font-size:10px; }
.structure-chip span { margin-top:2px; color:#786779; font-size:8px; overflow-wrap:anywhere; }
.view-hint { position:absolute; right:14px; top:13px; padding:5px 8px; border-radius:8px; color:#766378; background:rgba(255,250,254,.82); font-size:8px; pointer-events:none; }
.render-badge { position:absolute; right:14px; bottom:14px; z-index:2; padding:5px 8px; border:1px solid rgba(79,53,77,.12); border-radius:8px; color:#725f73; background:rgba(255,250,254,.86); font-size:8px; pointer-events:none; }
#sceneCanvas { cursor:grab; touch-action:none; }
#sceneCanvas.dragging { cursor:grabbing; }
#threeCanvas { cursor:grab; touch-action:none; }
#threeCanvas:active { cursor:grabbing; }
.solution-steps li b,.solution-steps li code,.solution-steps li span { display:block; }
.solution-steps li code { margin-top:5px; padding:5px 7px; border-radius:6px; color:#67435d; background:rgba(143,82,118,.08); font:10px ui-monospace,SFMono-Regular,Consolas,monospace; white-space:normal; overflow-wrap:anywhere; }
.solution-steps li span { margin-top:4px; color:#796779; font-size:9px; }
.help-dialog { width:min(520px,calc(100vw - 32px)); padding:0; border:1px solid rgba(94,61,91,.18); border-radius:18px; color:var(--text); background:#fffaff; box-shadow:0 30px 90px rgba(42,22,42,.24); }
.help-dialog::backdrop { background:rgba(35,19,38,.42); backdrop-filter:blur(3px); }
.help-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px 14px; border-bottom:1px solid var(--line); }
.help-head span { color:#8e587d; font-size:8px; letter-spacing:.12em; }
.help-head h2 { margin:3px 0 0; font-size:20px; }
.help-dialog ol { display:grid; gap:10px; margin:0; padding:18px 22px 4px; list-style:none; counter-reset:help; }
.help-dialog li { position:relative; padding:10px 10px 10px 42px; border-radius:11px; background:#f6eef5; counter-increment:help; }
.help-dialog li::before { content:counter(help); position:absolute; left:12px; top:11px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#875f91; font-size:9px; }
.help-dialog li b,.help-dialog li span { display:block; }
.help-dialog li b { font-size:11px; }
.help-dialog li span { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.6; }
.help-dialog>p { margin:10px 22px 22px; color:var(--muted); font-size:10px; line-height:1.65; }

@media (max-width:700px) {
  .structure-grid { grid-template-columns:1fr; }
  .structure-chip { flex:1 1 130px; }
  .view-hint { display:none; }
}

/* 2026-08-26 清透白紫层级试稿：只调整视觉，不改变页面内容与布局。 */
:root {
  --bg:#fdfbff;
  --bg-2:#faf7fc;
  --panel:#fff;
  --panel-solid:#fff;
  --line:rgba(73,45,87,.105);
  --line-strong:rgba(73,45,87,.19);
  --text:#302538;
  --muted:#5f5667;
  --faint:#817786;
  --blue:#76508c;
  --cyan:#91647e;
  --violet:#76508c;
  --shadow:0 18px 48px rgba(63,36,75,.075),0 2px 8px rgba(63,36,75,.035);
}

html { background:#fdfbff; }
body {
  color:var(--text);
  background-color:#fdfbff;
  background-image:
    radial-gradient(circle at 86% 3%,rgba(147,98,164,.055),transparent 25%),
    radial-gradient(circle at 31% 44%,rgba(194,158,184,.035),transparent 29%),
    linear-gradient(rgba(95,65,108,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,65,108,.018) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;
}

.sidebar {
  background:linear-gradient(180deg,#211329 0%,#281531 55%,#1d1025 100%);
  border-right-color:rgba(255,255,255,.085);
  box-shadow:8px 0 34px rgba(34,17,43,.14);
}
.brand-logo {
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 7px 22px rgba(183,138,190,.16);
}
.sidebar .nav-item.active {
  color:#fff;
  background:rgba(255,255,255,.085);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);
}
.sidebar .nav-item.active::before {
  background:#c79ab8;
  box-shadow:0 0 8px rgba(199,154,184,.38);
}
.sidebar .nav-item.active>span { color:#e5c9dc; }
.sidebar .nav-item:hover { background:rgba(255,255,255,.055); }

.topbar {
  background:rgba(253,251,255,.88);
  border-bottom-color:rgba(73,45,87,.08);
  box-shadow:0 5px 20px rgba(63,36,75,.025);
}
.breadcrumbs,.breadcrumbs b { color:#766d7b; }
.api-state { background:#f8f6f9; border-color:#e8e3eb; }
.icon-btn,.secondary-btn { background:rgba(255,255,255,.88); }

.hero-row h1,.result-heading h2,.panel-head h3,.section-label b,.picker-title b { color:#2d2234; }
.hero-row p,.result-heading p { color:#5f5667; line-height:1.65; }
.eyebrow,.section-label>span { color:#76508c; }
.hero-orbit { opacity:.16; }

.panel,.input-panel {
  background:#fff;
  border-color:rgba(73,45,87,.105);
  box-shadow:var(--shadow);
}
.input-panel { box-shadow:0 22px 58px rgba(63,36,75,.08),0 3px 10px rgba(63,36,75,.035); }
.demo-picker {
  background:#faf8fc;
  border-left-color:#eee9f1;
}
.demo-item {
  margin-bottom:1px;
  color:#5e5363;
  background:#fff;
  border-color:#eee9f1;
  box-shadow:0 2px 6px rgba(63,36,75,.018);
}
.demo-item>span { color:#76508c; background:#f3eef6; }
.demo-item:hover,.demo-item.active {
  border-color:#cdbbd5;
  background:#fff;
  box-shadow:0 6px 16px rgba(78,47,91,.065);
  transform:translateX(2px);
}

textarea,.parameter-value input,.parameter-value select,.player select {
  color:#33273a;
  background:#fff;
  border-color:#ded5e2;
  box-shadow:inset 0 1px 2px rgba(63,36,75,.025);
}
textarea::placeholder { color:#918798; }
textarea:focus,.parameter-value input:focus,.parameter-value select:focus {
  border-color:#9472a5;
  box-shadow:0 0 0 3px rgba(118,80,140,.105);
}
.upload-btn span { color:#76508c; border-color:#d8cadf; background:#fbf9fc; }
.primary-btn {
  color:#fff;
  background:linear-gradient(135deg,#68457d 0%,#80566f 100%);
  box-shadow:0 10px 24px rgba(82,48,91,.20);
}
.primary-btn:hover {
  filter:brightness(1.06) saturate(1.04);
  box-shadow:0 12px 28px rgba(82,48,91,.25);
}

.model-card,.answer-card,.structure-chip {
  background:#fff;
  border-color:#e9e2ec;
  box-shadow:0 6px 20px rgba(63,36,75,.04);
}
.structure-panel { background:#fff; }
.structure-summary { color:#694d75!important; background:#f6f1f8; }
.question-tab { background:#fff; }
.question-tab.active { color:#5f416c; border-color:#cbb9d2; background:#f5f0f7; }
.stage-tabs { background:#f7f4f8; }
.stage-tabs button.active,.camera-presets button.active { color:#62446f; background:#eee6f1; }
.view-switch { background:#f2edf4; }
.view-switch button.active { background:linear-gradient(135deg,#664879,#79556f); }
.visual-panel { background:#fff; }
.canvas-wrap {
  background:
    radial-gradient(circle at 50% 46%,rgba(249,246,250,.98),rgba(244,239,246,.92) 72%),
    linear-gradient(rgba(92,62,104,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,62,104,.025) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px;
}
.scene-legend,.view-hint,.render-badge { background:rgba(255,255,255,.90); border-color:#e9e2ec; }
.solution-steps li::before { color:#684a73; border-color:#d8cadf; background:#f4eef6; }
.help-dialog { background:#fff; border-color:#e5dce9; box-shadow:0 30px 90px rgba(44,24,51,.18); }
.help-dialog li { background:#faf7fb; }

@media (max-width:700px) {
  .player span { display:none; }
}

/* Step6 developer identity (§18-§23) */
.dev-mode-btn { border: 1px solid rgba(103,165,255,.3); border-radius: 20px; color: #b9d6ff; font-size: 10px; padding: 6px 10px; background: rgba(103,165,255,.07); cursor: pointer; }
.dev-login-dialog label { display: grid; gap: 4px; margin: 10px 0; font-size: 11px; color: var(--muted); }
.dev-login-dialog input { width:100%; padding:9px 11px; border-radius:8px; border:1px solid #283449; background:#0d1524; color:#f7f5fb; caret-color:#f7f5fb; font-size:12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.22); }
.dev-login-dialog input::placeholder { color:#7f8798; opacity:1; }
.dev-login-dialog input:focus { border-color:#969be7; box-shadow:0 0 0 3px rgba(150,155,231,.18); }
.dev-login-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dev-login-error { color: #ff9d9d; font-size: 11px; }
.dev-raw { margin-top: 8px; }
.dev-raw summary { cursor: pointer; color: var(--faint); font-size: 9px; text-transform: uppercase; }
.dev-raw pre { margin: 6px 0 0; padding: 8px; max-height: 260px; overflow: auto; background: #0d1524; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; color: #879ab2; white-space: pre-wrap; word-break: break-all; }

/* Step6 pastel clarity theme — white content layers with blue/lilac/pink accents. */
:root {
  --blue:#777dcc;
  --cyan:#8da7de;
  --green:#4f9d86;
  --bg:#f8f8fd;
  --panel:#ffffff;
  --line:#e5e5f3;
  --text:#202033;
  --muted:#66677b;
  --faint:#9293a8;
  --shadow:0 18px 48px rgba(77,81,145,.10),0 2px 8px rgba(77,81,145,.045);
}
html,body { background:#f8f8fd; }
body {
  color:#202033;
  background:
    radial-gradient(circle at 76% 4%,rgba(150,155,231,.13),transparent 28rem),
    radial-gradient(circle at 34% 25%,rgba(254,193,221,.10),transparent 30rem),
    #f8f8fd;
}
.content::before {
  opacity:.34;
  background-image:linear-gradient(rgba(150,155,231,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,155,231,.06) 1px,transparent 1px);
}
.sidebar { background:linear-gradient(180deg,#22213f 0%,#292449 58%,#211f3d 100%); border-right-color:rgba(209,208,239,.16); }
.nav-item { color:#bbbcd4; }
.nav-item:hover { color:#f7f7ff; background:rgba(209,208,239,.08); }
.nav-item.active { color:#fff; border-color:rgba(209,208,239,.16); background:linear-gradient(110deg,rgba(150,155,231,.24),rgba(254,193,221,.10)); }
.nav-item.active::before { background:#c8caff; box-shadow:0 0 14px rgba(200,202,255,.48); }
.system-card { border-color:rgba(209,208,239,.15); background:rgba(255,255,255,.055); }
.topbar { background:rgba(252,251,255,.88); border-bottom-color:#e9e8f3; }
.status-pill { color:#526e68; background:#f7fbfa; border-color:#dfece9; }
.hero-row h1,.result-heading h2,.panel-head h3,.section-label b,.picker-title b { color:#202033; }
.eyebrow,.section-label>span { color:#7379c2; }
.hero-orbit { color:#969be7; opacity:.18; }
.panel,.input-panel,.model-card,.answer-card,.structure-chip { border-color:#e6e6f2; box-shadow:var(--shadow); background:#fff; }
.demo-picker { background:#f5f4fc; border-left-color:#e6e5f1; }
.demo-item { color:#56576c; border-color:#e8e7f3; }
.demo-item>span { color:#7379c2; background:#eeeeFA; }
.demo-item:hover,.demo-item.active { border-color:#bfc2eb; background:#fff; box-shadow:0 7px 18px rgba(93,97,167,.10); }
.primary-btn,.view-switch button.active {
  color:#fff;
  background:linear-gradient(135deg,#7078c8 0%,#8585d2 55%,#a17fb9 100%);
  box-shadow:0 10px 24px rgba(112,120,200,.24);
}
.primary-btn:hover { filter:brightness(1.045); box-shadow:0 13px 28px rgba(112,120,200,.30); }
textarea,.parameter-value input,.parameter-value select,.player select { color:#28283b; border-color:#dedfed; background:#fff; }
textarea:focus,.parameter-value input:focus,.parameter-value select:focus { border-color:#969be7; box-shadow:0 0 0 3px rgba(150,155,231,.16); }
.question-tab.active,.stage-tabs button.active,.camera-presets button.active { color:#6066ae; border-color:#c9cae9; background:#f1f1fb; }
.visual-panel { background:#fff; }
.canvas-wrap { background:radial-gradient(circle at 50% 42%,#fafaff,#f1f0f9 74%),linear-gradient(rgba(150,155,231,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(150,155,231,.04) 1px,transparent 1px); }
.scene-legend,.view-hint,.render-badge { border-color:#e5e5f0; background:rgba(255,255,255,.92); }

/* Opening experience */
body.splash-active { overflow:hidden; }
.splash-screen {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden;
  color:#25263c;
  background:
    radial-gradient(circle at 20% 18%,rgba(254,193,221,.58),transparent 27rem),
    radial-gradient(circle at 78% 23%,rgba(150,155,231,.62),transparent 32rem),
    radial-gradient(circle at 55% 88%,rgba(209,208,239,.72),transparent 34rem),
    linear-gradient(145deg,#fcf8fb 0%,#f3f3fc 48%,#f9f5fb 100%);
  opacity:1; transition:opacity .55s ease,transform .65s cubic-bezier(.22,.8,.3,1);
}
.splash-screen[hidden] { display:none!important; }
.splash-screen::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.splash-screen::after { content:""; position:absolute; width:64vw; height:64vw; min-width:620px; min-height:620px; border:1px solid rgba(255,255,255,.68); border-radius:50%; box-shadow:0 0 0 5vw rgba(255,255,255,.08),0 0 0 11vw rgba(255,255,255,.055); }
.splash-screen.leaving { opacity:0; transform:scale(1.025); pointer-events:none; }
.splash-brand { position:absolute; top:38px; left:46px; z-index:2; color:#63689d; font-size:11px; font-weight:700; letter-spacing:.28em; }
.splash-copy { position:relative; z-index:3; width:min(680px,calc(100vw - 36px)); padding-top:250px; text-align:center; opacity:0; transform:translateY(20px); transition:opacity .7s .28s ease,transform .7s .28s ease; }
.splash-screen.ready .splash-copy { opacity:1; transform:none; }
.splash-kicker { margin:0 0 12px; color:#7379b9; font-size:11px; font-weight:700; letter-spacing:.23em; }
.splash-copy h1 { margin:0; color:#25263c; font-size:clamp(50px,6.4vw,86px); line-height:1; letter-spacing:.08em; text-shadow:0 2px rgba(255,255,255,.8); }
.splash-copy>p:not(.splash-kicker) { margin:22px auto 0; max-width:610px; color:#56586f; font-size:clamp(15px,1.6vw,19px); line-height:1.8; }
.splash-features { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }
.splash-features span { padding:7px 12px; border:1px solid rgba(150,155,231,.25); border-radius:999px; color:#616489; background:rgba(255,255,255,.48); backdrop-filter:blur(12px); font-size:11px; }
.splash-enter { min-width:160px; padding:13px 22px; border:1px solid rgba(255,255,255,.72); border-radius:999px; color:#fff; background:linear-gradient(135deg,#6f77c7,#8c87d1 58%,#aa85ba); box-shadow:0 14px 34px rgba(105,109,187,.29),inset 0 1px rgba(255,255,255,.35); font-weight:700; letter-spacing:.08em; transition:transform .2s,box-shadow .2s; }
.splash-enter i { margin-left:14px; font-style:normal; }
.splash-enter:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(105,109,187,.36),inset 0 1px rgba(255,255,255,.4); }
.splash-orb { position:absolute; z-index:2; top:8%; width:240px; height:240px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.96),rgba(254,193,221,.62) 28%,rgba(150,155,231,.78) 62%,rgba(117,122,200,.26) 74%,transparent 75%); filter:drop-shadow(0 26px 38px rgba(107,111,189,.24)); animation:splashFloat 4.8s ease-in-out infinite; }
.splash-orb::before { content:""; position:absolute; inset:34px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#fff,rgba(209,208,239,.8) 34%,rgba(150,155,231,.5) 70%); box-shadow:inset -16px -18px 30px rgba(100,105,183,.18),inset 10px 10px 24px rgba(255,255,255,.8); }
.splash-orb>img { position:absolute; z-index:2; left:50%; top:50%; width:104px; height:114px; object-fit:contain; opacity:.72; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 10px rgba(78,82,151,.30)); }
.splash-halo { position:absolute; inset:-11px; border:1px solid rgba(255,255,255,.72); border-radius:48% 52% 50% 50%; animation:splashOrbit 8s linear infinite; }
.halo-b { inset:-25px 18px; border-color:rgba(150,155,231,.30); animation-duration:11s; animation-direction:reverse; }
.halo-c { inset:16px -24px; border-color:rgba(254,193,221,.46); animation-duration:7s; }
.orb-dot { position:absolute; z-index:3; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 14px rgba(255,255,255,.9); }
.dot-1{top:17px;left:58px}.dot-2{right:3px;top:106px;width:6px;height:6px}.dot-3{bottom:20px;right:49px}.dot-4{left:2px;top:128px;width:5px;height:5px}
.app-shell.app-entered { animation:appArrive .65s ease both; }
@keyframes splashFloat { 50%{transform:translateY(-10px) scale(1.018)} }
@keyframes splashOrbit { to{transform:rotate(360deg)} }
@keyframes appArrive { from{opacity:0;transform:translateY(10px)} }
@media (max-width:700px) {
  .splash-brand { top:24px; left:24px; font-size:9px; }
  .splash-orb { top:12%; width:190px; height:190px; }
  .splash-copy { padding-top:210px; }
  .splash-copy h1 { font-size:52px; }
  .splash-features { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .splash-orb,.splash-halo { animation:none!important; }
  .splash-screen,.splash-copy,.splash-enter { transition:none!important; }
}

/* Carry the opening palette into the complete workspace. */
.content {
  background:
    radial-gradient(circle at 12% 4%,rgba(254,193,221,.28),transparent 28rem),
    radial-gradient(circle at 84% 9%,rgba(150,155,231,.32),transparent 34rem),
    radial-gradient(circle at 58% 48%,rgba(209,208,239,.24),transparent 38rem),
    linear-gradient(145deg,#fcf8fb 0%,#f5f4fc 52%,#f8f7fd 100%);
}
.topbar {
  background:linear-gradient(105deg,rgba(252,248,251,.94),rgba(242,242,252,.94));
  box-shadow:0 8px 26px rgba(93,97,167,.055);
}
.sidebar {
  background:
    radial-gradient(circle at 18% 13%,rgba(254,193,221,.14),transparent 15rem),
    radial-gradient(circle at 96% 42%,rgba(150,155,231,.17),transparent 18rem),
    linear-gradient(180deg,#19182f 0%,#242242 54%,#17162c 100%);
  box-shadow:12px 0 34px rgba(31,30,66,.16);
}
.brand-logo { box-shadow:0 10px 28px rgba(191,194,235,.22); }
.nav-item.active {
  border-color:rgba(223,222,249,.20);
  background:linear-gradient(110deg,rgba(150,155,231,.27),rgba(254,193,221,.14));
  box-shadow:0 12px 30px rgba(5,5,23,.24);
}
.hero-row {
  position:relative;
  margin-bottom:18px;
  padding:30px 28px 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:
    radial-gradient(circle at 91% 34%,rgba(150,155,231,.20),transparent 17rem),
    radial-gradient(circle at 12% 0%,rgba(254,193,221,.20),transparent 20rem),
    rgba(255,255,255,.55);
  box-shadow:0 18px 44px rgba(91,95,164,.075);
  backdrop-filter:blur(18px);
}
.hero-row::after { content:""; position:absolute; right:12%; bottom:-45px; width:180px; height:90px; border-radius:50%; background:rgba(209,208,239,.28); filter:blur(30px); pointer-events:none; }
.input-panel {
  border-color:rgba(150,155,231,.22);
  background:linear-gradient(125deg,rgba(255,255,255,.98) 0%,rgba(252,248,251,.98) 62%,rgba(244,244,252,.98) 100%);
  box-shadow:0 24px 62px rgba(85,89,158,.14),0 3px 10px rgba(254,193,221,.10);
}
.demo-picker {
  border-left-color:rgba(150,155,231,.20);
  background:
    radial-gradient(circle at 84% 10%,rgba(254,193,221,.28),transparent 15rem),
    linear-gradient(180deg,#f0effb 0%,#f7f3fa 100%);
}
.demo-item { border-color:rgba(150,155,231,.17); background:rgba(255,255,255,.82); }
.demo-item:nth-of-type(even) { background:rgba(252,248,251,.88); }
.demo-item:hover,.demo-item.active {
  border-color:#aeb2e4;
  background:linear-gradient(110deg,#fff,rgba(231,231,250,.86));
  box-shadow:0 9px 22px rgba(112,118,194,.15);
}
.demo-item>span { color:#656cc0; background:linear-gradient(145deg,#eeeffc,#f8eaf2); }
.upload-btn span { color:#656bb4; border-color:#cfd1ed; background:linear-gradient(135deg,#fafaff,#fff6fa); }
.primary-btn,.view-switch button.active {
  background:linear-gradient(135deg,#6f77c7 0%,#8888d3 52%,#ae86ba 100%);
  box-shadow:0 12px 28px rgba(105,109,187,.30),0 4px 12px rgba(254,193,221,.20);
}
.result-section {
  margin-top:26px;
  padding:28px 22px 30px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:26px;
  background:
    radial-gradient(circle at 5% 12%,rgba(254,193,221,.18),transparent 24rem),
    radial-gradient(circle at 72% 2%,rgba(150,155,231,.17),transparent 30rem),
    rgba(255,255,255,.35);
  box-shadow:0 20px 55px rgba(91,95,164,.07);
}
.status-badge,.support-badge { background:#eef8f5; border-color:#d9ede7; }
.question-tab.active { color:#5f65ae; border-color:#bfc2e8; background:linear-gradient(135deg,#efeffb,#faedf4); }
.stage-tabs,.view-switch { background:linear-gradient(120deg,#efeffa,#f8edf4); }
.stage-tabs button.active,.camera-presets button.active { color:#565da9; background:linear-gradient(135deg,#fff,#e9e9f9); box-shadow:0 3px 10px rgba(103,108,182,.12); }
.canvas-wrap {
  background:
    radial-gradient(circle at 22% 16%,rgba(254,193,221,.25),transparent 23rem),
    radial-gradient(circle at 78% 10%,rgba(150,155,231,.22),transparent 27rem),
    linear-gradient(145deg,#fbf8fc 0%,#f0f0fa 100%);
}
.model-card,.answer-card,.structure-chip {
  border-color:rgba(150,155,231,.19);
  box-shadow:0 12px 34px rgba(86,90,157,.095);
}
.answer-card { background:linear-gradient(145deg,#fff,#faf7fc); }
.structure-summary { color:#5e64ab!important; background:linear-gradient(135deg,#eeeeFA,#fbecf4); }
.player { background:linear-gradient(90deg,#fff,#f7f6fc); }
.player input[type="range"] { accent-color:#7d82ce; }
.help-dialog { border-color:#d7d8ee; box-shadow:0 34px 90px rgba(73,76,137,.22); }

.player-field { display:flex; align-items:center; flex:0 0 auto; gap:4px; min-height:29px; padding:2px 4px 2px 7px; border:1px solid #dedfed; border-radius:9px; color:#77788d; background:#fff; white-space:nowrap; }
.player-field>span { min-width:auto; flex:0 0 auto; font-size:9px; }
.player-field select { padding:3px 4px; border:0; box-shadow:none; background:transparent; }
.seek-field input[type="number"] { width:54px; min-width:54px; flex:0 0 54px; padding:4px 3px; border:0; outline:0; color:#292a3d; background:transparent; font-size:9px; text-align:right; font-variant-numeric:tabular-nums; }
.seek-field i { color:#77788d; font-style:normal; }
.seek-field button { padding:5px 7px; border-radius:6px; color:#fff; background:linear-gradient(135deg,#737ac8,#9b83c1); font-size:9px; }
@media (max-width:1100px) {
  .player { flex-wrap:wrap; }
  .player input[type="range"] { flex-basis:55%; }
}
@media (max-width:700px) {
  .player-field>span { display:inline; }
  .precision-field { margin-left:auto; }
  .seek-field { order:3; margin-left:38px; }
}
/* Keep the source image visible without distorting its aspect ratio. */
.image-preview { margin: 16px 0 0; padding: 12px; border: 1px solid #ded9ed; border-radius: 14px; background: #faf9ff; }
.image-preview[hidden] { display: none; }
.image-preview img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; background: white; border-radius: 8px; }
.image-preview figcaption { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; }
.image-preview figcaption span { min-width: 0; overflow-wrap: anywhere; }
.image-preview button { flex-shrink: 0; }