:root { --active-color:#8fa9ff; --level-color:#8fa9ff; }
.app-shell { background: radial-gradient(circle at 51% 52%,rgba(91,92,170,.16),transparent 36%),#030711; }
.brand-mark { color:#a9bcff; border-color:rgba(150,175,255,.42); background:rgba(105,128,216,.10); }
.level-heading { align-self:center; }
.level-heading h1 { line-height:1.14; }
.model-stage { background:radial-gradient(circle at 48% 46%,rgba(51,70,122,.19),transparent 62%); border:1px solid rgba(131,154,222,.08); }
#canvas-container canvas { width:100%; height:100%; touch-action:none; }
.scene-topline { position:absolute; inset:16px 18px auto; display:flex; justify-content:space-between; gap:12px; color:#7d92b9; font-size:9px; letter-spacing:.15em; pointer-events:none; }
.scene-topline span:last-child { color:#aec4e6; letter-spacing:.03em; text-align:right; }
.step-controls { position:absolute; bottom:17px; left:50%; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:5px; padding:6px; border:1px solid rgba(159,181,255,.17); border-radius:15px; background:rgba(5,10,23,.82); backdrop-filter:blur(14px); box-shadow:0 10px 40px #01040a; }
.step-controls button { width:34px; height:34px; border:0; border-radius:9px; background:rgba(135,158,236,.1); color:#d9e4ff; font-size:21px; line-height:1; cursor:pointer; }
.step-controls button:hover:not(:disabled) { background:rgba(135,158,236,.27); color:white; }
.step-controls button:disabled { opacity:.32; cursor:default; }
.step-controls #play-btn { width:42px; background:rgba(126,152,239,.27); font-size:15px; }
.step-counter { min-width:53px; padding:0 7px; color:#9eadd1; font-size:11px; font-weight:700; text-align:center; }
.detail-panel { scrollbar-color:rgba(255,255,255,.16) transparent; }
.description p { font-size:11px; line-height:1.7; }
.detail-text { padding:11px 12px; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:rgba(255,255,255,.018); }
.detail-text p { margin:0; color:#b9c8e5; font-size:11px; line-height:1.72; }
.use-cases { display:grid; gap:7px; margin:9px 0 0; padding:0; list-style:none; counter-reset:use-case; }
.use-cases li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; align-items:start; padding:8px 10px; border:1px solid rgba(255,255,255,.065); border-radius:9px; background:rgba(255,255,255,.023); color:#b9c8e5; font-size:11px; line-height:1.5; counter-increment:use-case; }
.use-cases li::before { content:counter(use-case,decimal-leading-zero); color:var(--level-color); font-weight:800; }
.visual-note p { font-size:11px; line-height:1.6; color:#b9c8e5; }
.algorithm-steps { display:grid; gap:6px; max-height:290px; margin:9px 0 0; padding:0 4px 0 0; overflow-y:auto; overscroll-behavior:contain; list-style:none; scrollbar-color:rgba(255,255,255,.2) transparent; scrollbar-width:thin; }
.step-item { display:grid; grid-template-columns:25px minmax(0,1fr); align-items:start; gap:8px; width:100%; padding:9px 10px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); color:#9eafcd; font:inherit; text-align:left; cursor:pointer; }
.step-item:hover { border-color:color-mix(in srgb,var(--level-color) 45%,transparent); background:rgba(255,255,255,.055); color:#e9f0ff; }
.step-item:focus-visible { outline:2px solid var(--level-color); outline-offset:2px; }
.step-item.active { border-color:color-mix(in srgb,var(--level-color) 60%,transparent); background:color-mix(in srgb,var(--level-color) 13%,rgba(8,14,27,.9)); color:#f0f5ff; }
.step-item-number { color:var(--level-color); font-size:11px; font-weight:800; line-height:1.5; }
.step-item-copy { font-size:11px; line-height:1.5; }
.kind-group { display:flex; flex-direction:column; gap:4px; }
.kind-card { grid-template-columns:38px minmax(0,1fr) 14px; }
.kind-card .level-card-copy strong { font-size:12px; white-space:normal; line-height:1.25; }
.kind-caret { color:#6f7f9c; font-size:17px; line-height:1; text-align:center; transition:transform .18s ease, color .18s ease; }
.kind-group.open .kind-caret { transform:rotate(90deg); color:var(--level-color); }
.kind-items { display:none; flex-direction:column; gap:4px; margin:0 0 6px 18px; padding:2px 0 2px 9px; border-left:1px solid color-mix(in srgb,var(--level-color) 32%,transparent); }
.kind-group.open .kind-items { display:flex; }
.algo-card { grid-template-columns:minmax(0,1fr); min-height:44px; padding:8px 12px; border-left:2px solid transparent; }
.algo-card.active { border-left-color:var(--level-color); }
.algo-card .level-card-copy strong { font-size:11px; }
@media(max-width:820px) { .model-stage { height:50svh; min-height:315px; } .scene-topline { top:11px; left:12px; right:12px; } .step-controls { bottom:11px; } }
@media(max-width:390px) { .topbar-actions { gap:5px; } .ghost-btn { padding:8px 10px; } .level-heading { padding-top:12px; } .model-stage { min-height:290px; } }
@media(max-width:820px) { .level-list { scrollbar-width:none; } .level-list::-webkit-scrollbar { display:none; } }
@media(max-width:820px) {
  .level-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:6px; overflow:visible; padding:0; }
  .kind-group { display:flex; min-width:0; }
  .kind-card { flex:0 0 auto; grid-template-columns:28px minmax(0,1fr) 14px; gap:7px; min-height:42px; padding:6px 8px; }
  .kind-card .level-chip { width:28px; height:28px; border-radius:8px; font-size:11px; }
  .kind-card .level-card-copy strong { font-size:10px; }
  .kind-items { margin:3px 0 5px 9px; }
  .kind-group.open .kind-items { display:flex; flex-direction:column; }
  .algo-card { flex:0 0 auto; min-width:0; }
}
@media(max-width:620px) { .level-list { grid-template-columns:minmax(0,1fr); } .kind-card .level-card-copy strong { font-size:12px; } }