:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #07111d; color: #eef6ff; }
button, select { font: inherit; }
button { cursor: pointer; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; color: #eef6ff; background: #13243a; }
button:hover { background: #1b3351; }
button.primary { background: linear-gradient(135deg,#346ab8,#7b4ab7); }
select { width: 100%; padding: 9px 10px; color:#eef6ff; background:#101f33; border:1px solid rgba(255,255,255,.16); border-radius:10px; }
code { color:#ffe9a7; }
.diag-body { min-height: 100vh; }
.diag-shell { max-width: 1260px; margin: 0 auto; padding: 24px; }
.diag-header, .forest-diag-header { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.diag-header h1, .forest-diag-header h1 { margin:0 0 6px; font-size:28px; }
.diag-header p, .forest-diag-header p { margin:0; color:#9db0c5; max-width:780px; }
.diag-link { color:#d7e8ff; text-decoration:none; border:1px solid rgba(255,255,255,.15); border-radius:11px; padding:9px 12px; white-space:nowrap; }
.diag-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; }
.diag-panel { border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(12,26,44,.88); box-shadow:0 24px 70px rgba(0,0,0,.25); }
.controls-panel { padding:16px; }
.controls-panel label, .forest-status-panel label { display:grid; gap:7px; color:#adc0d5; font-size:13px; }
.diag-status-list { display:grid; gap:8px; margin:16px 0; }
.diag-status-list div, .status-row { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; background:rgba(255,255,255,.04); border-radius:9px; font-size:12px; }
.diag-status-list span, .status-row span { color:#8da5bf; }
.button-stack { display:grid; gap:8px; }
.diag-note { color:#91a7bd; font-size:12px; line-height:1.5; }
.character-stage-panel { min-height:720px; padding:18px; overflow:hidden; }
.character-test-stage { position:relative; width:100%; height:680px; overflow:hidden; border-radius:16px; background:radial-gradient(circle at 50% 35%, #31567a 0%, #142943 42%, #07121f 100%); }
.character-ground { position:absolute; left:7%; right:7%; bottom:70px; height:34px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 72%); filter:blur(3px); }
.character-test-atlas { position:absolute; left:50%; bottom:80px; width:360px; height:540px; transform:translateX(-50%); background-repeat:no-repeat; background-size:400% 200%; background-position:0 0; transform-origin:50% 92%; will-change:transform, background-position; }
.character-sparkle { position:absolute; left:50%; top:90px; font-size:44px; opacity:0; pointer-events:none; }
.character-test-stage[data-action="idle"] .character-test-atlas { animation:diagIdle 2.4s ease-in-out infinite alternate; }
.character-test-stage[data-action="greet"][data-character="giraffe"] .character-test-atlas { animation:diagGiraffeGreet 1.2s ease-in-out 1; }
.character-test-stage[data-action="greet"][data-character="cat"] .character-test-atlas,
.character-test-stage[data-action="greet"][data-character="dog"] .character-test-atlas { animation:diagPawGreet 1s ease-in-out 1; }
.character-test-stage[data-action="greet"][data-character="duck"] .character-test-atlas { animation:diagDuckGreet .9s ease-in-out 1; }
.character-test-stage[data-action="greet"][data-character="horse"] .character-test-atlas,
.character-test-stage[data-action="greet"][data-character="unicorn"] .character-test-atlas { animation:diagBowGreet 1.15s ease-in-out 1; }
.character-test-stage[data-action="listen"] .character-test-atlas { transform:translateX(-50%) rotate(-4deg) scale(.99); transition:transform .35s ease; }
.character-test-stage[data-action="talk"] .character-test-atlas { animation:diagTalk .34s ease-in-out infinite alternate; }
.character-test-stage[data-action="celebrate"] .character-test-atlas { animation:diagCelebrate .62s cubic-bezier(.2,.8,.3,1) 2; }
.character-test-stage[data-action="celebrate"] .character-sparkle { animation:diagSparkle .8s ease-out 2; }
@keyframes diagIdle { from{transform:translateX(-50%) translateY(0) scale(1)} to{transform:translateX(-50%) translateY(-5px) scale(1.008)} }
@keyframes diagGiraffeGreet { 0%,100%{transform:translateX(-50%) rotate(0)} 42%{transform:translateX(-50%) translateY(24px) rotate(6deg) scale(.98)} 70%{transform:translateX(-50%) translateY(5px) rotate(-2deg)} }
@keyframes diagPawGreet { 0%,100%{transform:translateX(-50%) rotate(0)} 40%{transform:translateX(-50%) translateY(-13px) rotate(-7deg) scale(1.02)} 70%{transform:translateX(-50%) translateY(-5px) rotate(4deg)} }
@keyframes diagDuckGreet { 0%,100%{transform:translateX(-50%) rotate(0)} 35%{transform:translateX(-50%) translateY(-9px) rotate(-9deg) scale(1.02)} 68%{transform:translateX(-50%) rotate(8deg)} }
@keyframes diagBowGreet { 0%,100%{transform:translateX(-50%) rotate(0)} 45%{transform:translateX(-50%) translateY(20px) rotate(7deg) scale(.985)} 68%{transform:translateX(-50%) translateY(4px) rotate(-2deg)} }
@keyframes diagTalk { from{transform:translateX(-50%) translateY(0) scale(1)} to{transform:translateX(-50%) translateY(-9px) scale(1.015)} }
@keyframes diagCelebrate { 0%,100%{transform:translateX(-50%) translateY(0) scale(1)} 35%{transform:translateX(-50%) translateY(18px) scale(.97,1.03)} 58%{transform:translateX(-50%) translateY(-58px) scale(1.04,.98)} 78%{transform:translateX(-50%) translateY(-8px) scale(1.01)} }
@keyframes diagSparkle { 0%{opacity:0;transform:translate(-50%,30px) scale(.3) rotate(0)} 35%{opacity:1;transform:translate(-50%,0) scale(1.2) rotate(80deg)} 100%{opacity:0;transform:translate(-50%,-90px) scale(.5) rotate(180deg)} }
.travel-lane { position:absolute; inset:90px 25px 50px; border:1px dashed rgba(255,255,255,.2); border-radius:18px; background:linear-gradient(to bottom,rgba(91,137,95,.08),rgba(32,71,43,.18)); }
.travel-runner { position:absolute; left:0; bottom:35px; width:240px; height:240px; background-repeat:no-repeat; background-size:300% 200%; transform-origin:50% 85%; }
.travel-runner.is-running { animation:diagTravelAcross 4.2s linear 1; }
@keyframes diagTravelAcross { from{left:0; transform:translateY(0) scale(.8)} 25%{transform:translateY(-8px) scale(.84)} 50%{transform:translateY(0) scale(.88)} 75%{transform:translateY(-8px) scale(.84)} to{left:calc(100% - 240px); transform:translateY(0) scale(.8)} }

.forest-diag-body { overflow:hidden; }
.forest-diag-shell { min-height:100vh; display:flex; flex-direction:column; }
.forest-diag-header { padding:16px 18px 8px; margin:0; }
.forest-diag-layout { flex:1; min-height:0; display:grid; grid-template-columns:310px minmax(0,1fr); gap:12px; padding:0 14px 14px; }
.forest-status-panel { min-height:0; overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:#0c1a2c; }
.forest-controls { display:grid; gap:7px; margin:12px 0; }
.forest-status-panel hr { border:0; border-top:1px solid rgba(255,255,255,.1); margin:16px 0; }
.forest-canvas-panel { position:relative; min-width:0; min-height:0; border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; background:#07131d; }
.forest-diagnostic-canvas { position:absolute; inset:0; }
.forest-diagnostic-canvas canvas { width:100%; height:100%; display:block; }
.forest-overlay { position:absolute; left:16px; bottom:16px; padding:9px 12px; border-radius:10px; background:rgba(4,12,22,.74); color:#dbeaff; font-size:12px; pointer-events:none; }
.forest-debug { max-height:190px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:#07111d; border-radius:10px; padding:9px; color:#9fc4e5; font-size:10px; }
.ok { color:#74e5a1 !important; } .warn { color:#ffd56f !important; } .bad { color:#ff9090 !important; }
@media(max-width:850px){ .diag-grid,.forest-diag-layout{grid-template-columns:1fr}.forest-diag-body{overflow:auto}.forest-canvas-panel{min-height:650px}.character-stage-panel{min-height:600px}.character-test-stage{height:560px}.character-test-atlas{width:290px;height:435px}.diag-header,.forest-diag-header{flex-direction:column} }

/* -------------------------------------------------------------------------
   v13.5 Sparkle reference rig — explicit eye + mouth states
   ------------------------------------------------------------------------- */
.sparkle-rig {
  position:absolute;
  left:50%;
  bottom:64px;
  width:min(590px,64vw);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  transform-origin:50% 88%;
  will-change:transform;
}
.sparkle-rig[hidden]{display:none!important}
.sparkle-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}
.sparkle-face-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sparkle-eyelids{opacity:0;transition:opacity 95ms linear}
.sparkle-lid{fill:url(#sparkleSkin);stroke:none}
.sparkle-lash{fill:none;stroke:#42241f;stroke-width:14;stroke-linecap:round}
.sparkle-rig[data-eyes="half"] .sparkle-eyelids{opacity:.56}
.sparkle-rig[data-eyes="closed"] .sparkle-eyelids{opacity:1}
.sparkle-muzzle-patch{fill:url(#sparkleSkin);stroke:none}
.sparkle-smile-line{fill:none;stroke:#6a342d;stroke-width:10;stroke-linecap:round}
.sparkle-mouth-mid,.sparkle-mouth-open{opacity:0;transition:opacity 55ms linear}
.sparkle-mouth-mid ellipse:first-child,.sparkle-mouth-open ellipse:first-child{fill:#401719}
.sparkle-mouth-tongue{fill:#ed8199}
.sparkle-rig[data-mouth="mid"] .sparkle-smile-line,
.sparkle-rig[data-mouth="open"] .sparkle-smile-line{opacity:0}
.sparkle-rig[data-mouth="mid"] .sparkle-mouth-mid{opacity:1}
.sparkle-rig[data-mouth="open"] .sparkle-mouth-open{opacity:1}
.character-test-stage[data-action="idle"] .sparkle-rig{animation:sparkleRigIdle 3.4s ease-in-out infinite alternate}
.character-test-stage[data-action="greet"] .sparkle-rig{animation:sparkleRigBow 1.4s ease-in-out 1}
.character-test-stage[data-action="listen"] .sparkle-rig{transform:translateX(-50%) rotate(-7deg) translateY(3px) scale(.995)}
.character-test-stage[data-action="celebrate"] .sparkle-rig{animation:sparkleRigCelebrate .74s cubic-bezier(.2,.8,.3,1) 2}
.character-test-stage[data-action="talk"] .sparkle-rig{animation:sparkleRigTalkBody .52s ease-in-out infinite alternate}
@keyframes sparkleRigIdle{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-5px) scale(1.007)}}
@keyframes sparkleRigBow{0%,100%{transform:translateX(-50%) rotate(0) translateY(0)}20%{transform:translateX(-50%) rotate(2deg) translateY(4px)}50%{transform:translateX(-50%) rotate(11deg) translateY(33px) scale(.975)}72%{transform:translateX(-50%) rotate(-3deg) translateY(4px)}86%{transform:translateX(-50%) rotate(1deg) translateY(1px)}}
@keyframes sparkleRigCelebrate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}28%{transform:translateX(-50%) translateY(19px) scale(.975,1.025)}55%{transform:translateX(-50%) translateY(-68px) rotate(-3deg) scale(1.045,.975)}76%{transform:translateX(-50%) translateY(-8px) rotate(3deg)}}
@keyframes sparkleRigTalkBody{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-2px)}}


/* -------------------------------------------------------------------------
   v13.5 Sparkle full-state PNG renderer — no eyelid/mouth overlays.
   ------------------------------------------------------------------------- */
.sparkle-state-image{
  position:absolute;
  left:50%;
  bottom:64px;
  width:min(590px,64vw);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  transform-origin:50% 88%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  will-change:transform;
}
.sparkle-state-image[hidden]{display:none!important}
.character-test-stage[data-action="idle"] .sparkle-state-image{animation:sparkleStateIdle 3.4s ease-in-out infinite alternate}
.character-test-stage[data-action="listen"] .sparkle-state-image{transform:translateX(-50%) rotate(-6deg) translateY(2px) scale(.995);transition:transform .28s ease}
.character-test-stage[data-action="talk"] .sparkle-state-image{animation:sparkleStateTalkBody .55s ease-in-out infinite alternate}
.character-test-stage[data-action="greet-bow"] .sparkle-state-image{transform:translateX(-50%) rotate(9deg) translateY(28px) scale(.98);transition:transform .42s ease}
.character-test-stage[data-action="greet-rise"] .sparkle-state-image{transform:translateX(-50%) rotate(-2deg) translateY(4px);transition:transform .32s ease}
.character-test-stage[data-action="celebrate-up"] .sparkle-state-image{transform:translateX(-50%) translateY(-58px) rotate(-3deg) scale(1.04,.98);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.character-test-stage[data-action="celebrate-land"] .sparkle-state-image{transform:translateX(-50%) translateY(-5px) rotate(2deg);transition:transform .28s ease}
@keyframes sparkleStateIdle{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-4px) scale(1.006)}}
@keyframes sparkleStateTalkBody{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-2px)}}

/* v14.2 Forest Route Editor */
.route-editor-banner{padding:10px 12px;border-radius:11px;margin-bottom:10px;font-size:12px;font-weight:800;line-height:1.35}
.route-editor-banner.warn-banner{background:rgba(255,190,70,.12);border:1px solid rgba(255,211,105,.28);color:#ffd56f}
.route-editor-banner.ok-banner{background:rgba(70,220,130,.12);border:1px solid rgba(116,229,161,.28);color:#74e5a1}
.editor-heading{margin:8px 0 10px;font-size:14px;color:#e8f2ff}
.editor-readout{margin:8px 0 2px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.04);color:#98b6d3;font-size:11px;line-height:1.45}
.compact-controls{gap:5px;margin:8px 0}
.compact-controls button{padding:7px 9px;font-size:12px}
.route-editor-help{position:absolute;right:14px;bottom:14px;max-width:360px;padding:9px 11px;border-radius:10px;background:rgba(4,12,22,.78);color:#c9ddf2;font-size:11px;line-height:1.45;pointer-events:none;border:1px solid rgba(255,255,255,.12)}
.forest-status-panel details{margin:8px 0}
.forest-status-panel summary{cursor:pointer;color:#bfd2e7;font-size:12px;font-weight:700;margin:6px 0}
@media (min-width:851px){
  .forest-diag-layout{grid-template-columns:280px minmax(0,1fr)}
  .forest-status-panel{padding:11px}
  .forest-diag-header{padding:10px 14px 6px}
  .forest-diag-header h1{font-size:23px}
  .forest-diag-header p{font-size:12px}
  .status-row{padding:5px 7px}
}

/* v14.5 Marble safe-view calibration */
.cal-stop-checklist{margin-top:8px;border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.025)}
.cal-stop-row{display:grid;grid-template-columns:1.3fr .9fr .9fr .7fr;gap:6px;padding:6px 8px;border-top:1px solid rgba(255,255,255,.05);font-size:10px;color:#9fb9d2}
.cal-stop-row:first-child{border-top:0}
.cal-stop-row>span:first-child{text-transform:capitalize;color:#d9e9f7;font-weight:700}
.q-good{color:#74e5a1!important;font-weight:800}
.q-warn{color:#ffd56f!important;font-weight:800}