:root {
    color-scheme: light;
    --text-muted: #6b7280;
    --edge: #d8d9e2;
    --fire: #b45309;
    --overlay: rgba(0, 0, 0, .3);
    --intern: #374151;
    --junior: #1e40af;
    --junior-plus: #3730a3;
    --middle-minus: #5b21b6;
    --middle: #7e22ce;
    --middle-plus: #9d174d;
    --senior: #92400e;
    --z-controls: 2;
    --z-header: 10;
    --z-popup: 30;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.header { z-index: var(--z-header); background: var(--bg); backdrop-filter: none; }
.header-inner, .container { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.roadmap { font-size: 14px; }
.breadcrumbs { padding-block: 16px 0; color: var(--text-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.breadcrumbs h1 { font-size: 14px; font-weight: 500; text-wrap: balance; }
.breadcrumbs a { color: var(--accent); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block: 17px 10px; }
.grade-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.grade-controls button { border: 0; background: none; color: var(--grade-color); padding: 6px 9px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 5px; }
.grade-controls button[aria-pressed="true"] { background: var(--accent-light); text-decoration: underline; text-underline-offset: 4px; }
.grade-controls button.above { opacity: .35; }
.grade-controls button:hover { background: var(--bg-secondary); }
.grade-caption { font-size: 12px; color: var(--text-secondary); margin-right: 6px; }
.search { margin-left: auto; width: 205px; min-width: 0; border: 1px solid var(--border); background: var(--bg); border-radius: 7px; padding: 7px 10px; font-size: 12px; }
.search::placeholder { color: var(--text-secondary); opacity: 1; }
.subtoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-block: 0 14px; color: var(--text-secondary); font-size: 12px; }
.subtoolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); }
.subtoolbar select { font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; max-width: 220px; }
.legend-fire { display: flex; align-items: center; gap: 5px; }
.text-button, #category-link { border: 0; background: none; color: var(--accent); padding: 4px 0; font-size: 12px; }
.stage { position: relative; height: calc(100dvh - 245px); min-height: 500px; max-height: 880px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
#graph { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#graph.dragging { cursor: grabbing; }
.edge { stroke: var(--edge); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; pointer-events: none; }
.edge.dep { opacity: .8; }
.edge.hub-link { stroke: var(--text-muted); opacity: .36; stroke-width: 1.2; }
.edge.lit { stroke: var(--accent); stroke-width: 1.6; opacity: .65; }
.edge.dim { opacity: .06; }
.node { cursor: pointer; }
.node text { font-family: var(--font); font-size: 16px; font-weight: 500; text-anchor: middle; dominant-baseline: central; fill: var(--grade-color, var(--text)); }
.node .badge { font-size: 16px; }
.node.hub text { font-size: 28px; font-weight: 700; fill: var(--text); letter-spacing: -.5px; }
.node .bubble { fill: color-mix(in srgb, var(--grade-color, var(--text)) 10%, var(--bg)); stroke: color-mix(in srgb, var(--grade-color, var(--text)) 23%, var(--bg)); stroke-width: 1; }
.node.hub .bubble { fill: var(--bg-secondary); stroke: var(--border); }
.node:hover .bubble, .node:focus-visible .bubble, .node.selected .bubble { stroke: var(--grade-color, var(--accent)); stroke-width: 2; }
.node.selected .bubble { fill: color-mix(in srgb, var(--grade-color, var(--accent)) 16%, var(--bg)); }
.node.selected .label { font-weight: 700; }
.node.dim { opacity: .12; }
.node.filtered { opacity: .17; }
.node, .edge { transition: opacity .15s ease-out; }
.zoom-controls { position: absolute; bottom: 16px; left: 16px; z-index: var(--z-controls); display: flex; gap: 4px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; box-shadow: var(--shadow-md); }
.zoom-btn { width: 32px; height: 32px; background: none; border: 0; font-size: 18px; font-weight: 700; color: var(--text-secondary); border-radius: 8px; }
.zoom-btn:hover, .fit-btn:hover { background: var(--bg-secondary); }
.zoom-level { min-width: 40px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fit-btn { border: 0; border-radius: 6px; background: none; color: var(--text-secondary); padding: 5px 9px; font-size: 12px; }
.graph-help { pointer-events: none; position: absolute; bottom: 24px; right: 18px; color: var(--text-muted); font-size: 11px; }
.graph-overview { position: absolute; right: 15px; top: 15px; width: 144px; height: 106px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); padding: 5px; }
#minimap { width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
#minimap circle { fill: var(--text-muted); }
#minimap rect { fill: var(--accent-light); fill-opacity: .65; stroke: var(--accent); vector-effect: non-scaling-stroke; stroke-width: 1; pointer-events: none; }
.map-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 11px; padding-block: 10px; }
#empty { position: absolute; top: 42%; left: 20px; right: 20px; text-align: center; color: var(--text-secondary); background: var(--bg); padding: 15px; pointer-events: none; }
.sk-popup { position: fixed; inset: auto; margin: 0; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lg); z-index: var(--z-popup); overflow-wrap: anywhere; }
.sk-popup::backdrop { background: transparent; }
.sk-popup-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; padding-right: 25px; text-wrap: balance; }
.popup-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--bg); color: var(--text-secondary); font-size: 19px; }
.popup-close:hover { background: var(--bg-secondary); }
.sk-popup-fire { font-size: 12px; color: var(--fire); margin-bottom: 6px; }
.sk-popup-grade { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 100px; margin-block: 4px 8px; background: color-mix(in srgb, var(--grade-color) 9%, var(--bg)); color: var(--grade-color); }
.sk-popup-section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 10px; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.sk-popup-section-text { font-size: 13px; color: var(--text-secondary); line-height: 1.55; white-space: pre-line; }
.sk-popup-res-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 10px; }
.sk-popup-res { list-style: none; padding: 0; margin: 4px 0 0; }
.sk-popup-res li { margin-bottom: 3px; }
.sk-popup-res a { font-size: 12px; color: var(--accent); text-decoration: none; display: inline; }
.sk-popup-res a:hover { text-decoration: underline; }
.res-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--bg-secondary); color: var(--text-muted); letter-spacing: .3px; margin-right: 4px; }
.sk-popup-deps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sk-popup-dep { font-size: 11px; padding: 3px 8px; border: 0; border-radius: 100px; background: var(--bg-secondary); color: var(--text-secondary); }
.sk-popup-dep:hover { color: var(--accent); }
.sk-popup-dep:disabled { cursor: default; }
#popup-category { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.footer { margin-top: 38px; padding-block: 24px; }
#topic-list { overflow: auto; max-height: 70dvh; padding-block: 8px; }
#topic-list table { width: 100%; border-collapse: collapse; font-size: 13px; overflow-wrap: anywhere; }
#topic-list th, #topic-list td { text-align: left; border-bottom: 1px solid var(--border); padding: 10px; vertical-align: top; }
#topic-list th { font-weight: 600; color: var(--text-secondary); }
#topic-list td:last-child { white-space: nowrap; }
#topic-list td button { color: var(--accent); border: 0; background: none; text-align: left; }
#list-empty { padding: 20px 10px; color: var(--text-secondary); }
@media (max-width: 768px) {
    .header-inner { gap: 8px; }
    .logo { display: flex; flex-shrink: 0; }
    .logo svg { height: 21px; }
    .header-nav .btn-cta { font-size: 11px; padding: 8px 12px; }
    .toolbar { gap: 8px; padding-block: 12px 8px; }
    .grade-controls { gap: 0; width: 100%; }
    .grade-controls button { font-size: 10px; padding: 6px 7px; }
    .grade-caption { width: 100%; font-size: 11px; margin-bottom: 2px; }
    .search { width: 100%; }
    .subtoolbar { gap: 9px 14px; }
    .subtoolbar select { max-width: calc(100vw - 34px); }
    .legend-fire { width: 100%; }
    .stage { height: 62dvh; min-height: 430px; }
    .graph-help { display: none; }
    .graph-overview { width: 100px; height: 74px; top: 10px; right: 10px; }
    .zoom-controls { left: 10px; bottom: 10px; gap: 0; }
    .sk-popup { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; max-width: none; max-height: 72dvh; border-radius: 12px 12px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .sk-popup::backdrop { background: var(--overlay); }
    .footer { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .node text { fill: CanvasText; }
    .node .bubble { fill: Canvas; stroke: CanvasText; }
    .node.selected .bubble, .node:focus-visible .bubble { stroke: Highlight; stroke-width: 3; }
    .edge { stroke: CanvasText; }
    .edge.lit { stroke: Highlight; }
}