.skill-ignition {
    --ignition-duration: 10000ms;
    position: relative;
    overflow: hidden;
    margin: 12px 0 20px;
    padding: 22px;
    border: 1px solid #cce4f329;
    border-left: 4px solid #ffc400;
    border-radius: 0;
    color: #cce4f3;
    background: #0d1830;
    box-shadow: none;
}
.skill-ignition-heading, .skill-ignition-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.skill-ignition-kicker { color: #ffc400; font: 10px monospace; letter-spacing: .2em; }
.skill-ignition h3 { color: #ffffff; margin: 8px 0 0; font-size: clamp(16px, 2vw, 21px); }
.skill-ignition button { flex-shrink: 0; padding: 9px 12px; border: 1px solid #cce4f329; border-radius: 0; background: #1b2855; color: #ffffff; cursor: pointer; font-size: 12px; }
.skill-ignition button:focus-visible { outline: 2px solid #ffc400; outline-offset: 3px; }
.skill-ignition-graph { height: 265px; width: 100%; background-image: linear-gradient(#cce4f306 1px, transparent 1px), linear-gradient(90deg, #cce4f306 1px, transparent 1px); background-size: 22px 22px; }
/* Cytoscape stacks canvas layers; opaque global chart styles hide the graph. */
.skill-ignition-graph canvas { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.skill-ignition-footer p { margin: 8px 0; color: #cce4f3; font-size: 13px; max-width: 65ch; }
.skill-ignition-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: #ffc400; box-shadow: 0 0 15px #ffc400; transform-origin: left; animation: skill-ignition-fill var(--ignition-duration) linear both; }
.skill-ignition.is-settled .skill-ignition-progress { animation: none; opacity: .3; }
@keyframes skill-ignition-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) { .skill-ignition { padding: 16px; } .skill-ignition-heading, .skill-ignition-footer { align-items: flex-start; flex-direction: column; gap: 8px; } .skill-ignition-graph { height: 230px; } }
@media (prefers-reduced-motion: reduce) { .skill-ignition-progress { animation: none; } }

/* Training and session cards stay light; the embedded Quickstart uses the dark default. */
:is(#sessionView, #trainingView) .skill-ignition:not(:where(#quickstartStage *)) {
    --ignition-node: #71809c;
    --ignition-label: #5b6683;
    --ignition-edge: #a3aec2;
    --ignition-active: #9b7300;
    --ignition-active-label: #131739;
    background: #ffffff;
    color: #131739;
    border-color: #dfe3ec;
    border-left-color: #ffc400;
}
:is(#sessionView, #trainingView) .skill-ignition:not(:where(#quickstartStage *)) h3 { color: #131739; }
:is(#sessionView, #trainingView) .skill-ignition-kicker:not(:where(#quickstartStage *)) { color: #806000; }
:is(#sessionView, #trainingView) .skill-ignition-footer:not(:where(#quickstartStage *)) p { color: #5b6683; }
:is(#sessionView, #trainingView) .skill-ignition:not(:where(#quickstartStage *)) button { background: #f3f5fa; color: #34446c; border-color: #c8cedb; }
:is(#sessionView, #trainingView) .skill-ignition:not(:where(#quickstartStage *)) button:hover:enabled { background: #e7ebf3; border-color: #34446c; }
:is(#sessionView, #trainingView) .skill-ignition:not(:where(#quickstartStage *)) button:focus-visible { outline-color: #1c86c6; }
:is(#sessionView, #trainingView) .skill-ignition-graph:not(:where(#quickstartStage *)) {
    background-image: linear-gradient(#13173909 1px, transparent 1px), linear-gradient(90deg, #13173909 1px, transparent 1px);
}
:is(#sessionView, #trainingView) .skill-ignition-progress:not(:where(#quickstartStage *)) { background: #9b7300; box-shadow: none; }