/* Skill tree in the site palette: white panel, black type, light-orange accents. */
.st-host { --st-bg: #ffffff; --st-panel: #fffaf5; --st-line: #e6e0d8; --st-line-soft: #f6f2ed; --st-text: #111111; --st-muted: #7a726a; --st-accent: #c05621; --st-accent-soft: #fff4ea; --st-good: #1f8a4c; }
.st-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--st-line); border-radius: 12px; overflow: hidden; background: var(--st-bg); color: var(--st-text); }
.st-frame:has(.st-drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr) 340px; }
.st-stage { position: relative; background:
    radial-gradient(circle at 50% 100%, rgba(240, 164, 107, 0.14), transparent 55%),
    linear-gradient(var(--st-line-soft) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, var(--st-line-soft) 1px, transparent 1px) 0 0 / 40px 100%; }
.st-svg { display: block; width: 100%; height: auto; }
.st-layer-label { fill: #b3aaa0; font: 600 11px "Space Grotesk", Inter, sans-serif; letter-spacing: 0.14em; }
.st-edge { fill: none; stroke: var(--st-line); stroke-width: 2; }
.st-edge-branch, .st-edge-crown { stroke-width: 1.2; stroke-dasharray: 3 6; }
.st-edge.is-lit { stroke: var(--st-accent); stroke-dasharray: 10 8; animation: st-flow 2.4s linear infinite; }
.st-edge-trunk.is-lit { stroke-width: 2.5; }
@keyframes st-flow { to { stroke-dashoffset: -36; } }
.st-node { cursor: pointer; outline: none; transition: transform 0.2s ease; }
.st-node-base { fill: #ffffff; stroke: #d9d2c9; stroke-width: 2; }
.st-node.is-active .st-node-base { stroke: var(--st-accent); fill: #fffaf5; }
.st-node.is-open .st-node-base { stroke: #cfc6bb; }
.st-node.is-locked { opacity: 0.6; }
.st-node.is-locked .st-node-base { stroke-dasharray: 4 5; fill: #faf8f5; }
.st-node:hover .st-node-base, .st-node:focus-visible .st-node-base, .st-node.is-selected .st-node-base { stroke: #111111; stroke-width: 2.5; }
.st-mastery-track { fill: none; stroke: #f0ebe5; stroke-width: 5; }
.st-mastery-ring { fill: none; stroke: var(--st-good); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.st-target-ring { fill: none; stroke: var(--st-accent); stroke-width: 1.5; stroke-dasharray: 2 6; animation: st-spin 18s linear infinite; transform-origin: center; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-level { fill: var(--st-text); font: 700 22px "Space Grotesk", Inter, sans-serif; }
.st-lock { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; fill: var(--st-muted); }
.st-code { fill: var(--st-accent); font: 700 10px "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.st-label { fill: var(--st-text); font: 600 13px Inter, sans-serif; }
.st-meta { fill: var(--st-muted); font: 500 11px Inter, sans-serif; }
.st-advanced .st-node-base { stroke-width: 2.5; }
.st-drawer { position: relative; padding: 22px 20px; background: var(--st-panel); border-left: 1px solid var(--st-line); overflow-y: auto; max-height: 720px; }
.st-drawer-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--st-muted); font-size: 22px; cursor: pointer; }
.st-drawer-close:hover { color: var(--st-text); }
.st-drawer-eyebrow { margin: 0; color: var(--st-accent); font: 700 11px "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.st-drawer-title { margin: 4px 0 6px; font-size: 20px; color: var(--st-text); }
.st-drawer-copy { margin: 0 0 14px; color: #3d3d3d; font-size: 14px; line-height: 1.55; }
.st-drawer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-stat { padding: 10px; border: 1px solid var(--st-line); border-radius: 10px; background: #ffffff; display: grid; gap: 4px; }
.st-stat-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
.st-stat strong { font: 700 18px "Space Grotesk", Inter, sans-serif; color: var(--st-text); }
.st-stat small { color: var(--st-muted); font-size: 12px; }
.st-bar { height: 6px; border-radius: 999px; background: #f0ebe5; overflow: hidden; }
.st-bar span { display: block; height: 100%; background: var(--st-accent); border-radius: inherit; }
.st-bar.is-mastery span, .st-bar.is-thin span { background: var(--st-good); }
.st-bar.is-thin { height: 4px; }
.st-drawer-stage { margin: 12px 0 0; font-size: 13px; color: #3d3d3d; }
.st-drawer-lock { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--st-accent-soft); border: 1px solid #f5dfc8; color: #7a4a1d; font-size: 13px; }
.st-drawer-heading { margin: 18px 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
.st-subskills, .st-missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-subskill-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: var(--st-text); }
.st-subskill-value { color: var(--st-good); font-family: "SFMono-Regular", Menlo, monospace; }
.st-hidden-note { margin: 8px 0 0; font-size: 12px; color: var(--st-muted); }
.st-mission { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px; background: #ffffff; }
.st-mission-title { color: var(--st-text); font-size: 13px; font-weight: 600; text-decoration: none; }
a.st-mission-title:hover { color: var(--st-accent); }
.st-mission-meta { font-size: 11px; color: var(--st-muted); }
.st-mission.is-locked, .st-mission.is-premium { opacity: 0.65; }
.st-mission.is-completed .st-mission-title::after { content: " \2713"; color: var(--st-good); }
.st-drawer-cta { display: inline-block; margin-top: 16px; padding: 9px 14px; border-radius: 6px; background: #111111; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 14px; }
.st-drawer-cta:hover { background: var(--st-accent); }
@media (max-width: 899px) {
    .st-frame, .st-frame:has(.st-drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
    .st-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .st-svg { min-width: 720px; }
    .st-stage::after { content: "Swipe to explore, tap a node for details"; position: sticky; left: 0; display: block; padding: 6px 12px 10px; font-size: 12px; color: var(--st-muted); }
    .st-drawer { border-left: 0; border-top: 1px solid var(--st-line); max-height: none; }
    .st-label { font-size: 15px; }
    .st-meta { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .st-edge.is-lit, .st-target-ring { animation: none; }
}