:root {
    --bg: #050505; --panel: #111; --txt: #ffffff;
    --accent: #bb86fc; --fwd: #00e5ff; --bwd: #ff0055; --upd: #00ff9d; --brd: #333;
    --font-main: 'Segoe UI', 'Meiryo', sans-serif;
    --font-mono: 'Consolas', monospace;
}
body { font-family: var(--font-main); background: var(--bg); color: var(--txt); margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

#toolbar { 
    background: var(--panel); padding: 5px 20px; border-bottom: 1px solid var(--brd); 
    display: flex; gap: 20px; align-items: center; z-index: 100; font-size: 14px; height: 40px; flex-shrink: 0; 
}

#canvas-container { 
    flex-grow: 1; position: relative; display: flex; flex-direction: column; 
    background: radial-gradient(circle at center, #111 0%, #000 100%);
}

/* 上段解説 */
#explanation-box { 
    position: absolute; top: 15px; left: 0; right: 0;
    text-align: center; z-index: 50; pointer-events: none;
}
#phase-title { 
    color: var(--accent); font-weight: 900; font-size: 1.6em; 
    margin-bottom: 5px; text-shadow: 0 0 10px rgba(187, 134, 252, 0.5); letter-spacing: 2px;
}
#phase-desc { 
    color: #ccc; font-size: 1.1em; 
    line-height: 1.5; max-width: 900px; margin: 0 auto;
    text-shadow: 0 1px 2px #000;
}
.math-meaning { display: block; color: #888; font-size: 0.9em; margin-top: 4px; }

/* 下段ポップアップ */
#math-popup { 
    position: absolute; pointer-events: none; background: rgba(5,5,5,0.95); 
    border: 1px solid #444; padding: 12px 18px; border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,1); display: none; z-index: 200;
    min-width: 300px; max-width: 550px;
    transform: translate(-50%, 0);
}
.math-row { margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.math-symbol { font-family: var(--font-main); font-weight: bold; font-size: 1.1em; color: var(--accent); white-space: nowrap; }
.math-numeric { font-family: var(--font-mono); color: #bbb; font-size: 1.0em; white-space: pre-wrap; word-break: break-all; }
.math-result { font-weight: bold; font-size: 1.5em; color: var(--fwd); border-top: 1px solid #333; margin-top: 8px; padding-top: 8px; font-family: var(--font-mono); }

/* SVG */
svg { flex-grow: 1; width: 100%; height: 100%; }

.neuron { transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); stroke-width: 2px; stroke: #555; }
.neuron.active { stroke-width: 4px; stroke: #fff; filter: drop-shadow(0 0 12px #fff); }

.link { stroke-width: 2.5px; stroke: #333; opacity: 0.5; transition: 0.2s; }
.link.active-fwd { stroke: var(--fwd); opacity: 1; stroke-width: 4px; filter: drop-shadow(0 0 4px var(--fwd)); }
.link.active-bwd { stroke: var(--bwd); opacity: 1; stroke-width: 4px; stroke-dasharray: 8; animation: dash 1s linear infinite; filter: drop-shadow(0 0 4px var(--bwd)); }
.link.active-upd { stroke: var(--upd); opacity: 1; stroke-width: 5px; filter: drop-shadow(0 0 6px var(--upd)); }
@keyframes dash { to { stroke-dashoffset: -16; } }

.w-bg { fill: #000; opacity: 0.85; }
.w-text, .w-sym { pointer-events: none; transition: 0.2s; }
.w-text { font-size: 15px; font-weight: bold; fill: #777; font-family: var(--font-mono); }
.w-sym { font-size: 12px; fill: #444; font-family: var(--font-main); }
.w-sym.active-fwd, .w-text.active-fwd { fill: var(--fwd); }
.w-sym.active-bwd, .w-text.active-bwd { fill: var(--bwd); }
.w-sym.active-upd, .w-text.active-upd { fill: var(--upd); }

.n-sym { font-size: 18px; font-weight: 900; fill: #666; font-family: var(--font-main); pointer-events: none; }
.n-val { font-size: 14px; font-weight: bold; fill: #fff; font-family: var(--font-mono); pointer-events: none; }
.n-delta { font-size: 12px; font-weight: bold; fill: var(--bwd); font-family: var(--font-mono); pointer-events: none; opacity: 0; }
.n-delta.visible { opacity: 1; }

input { background: #222; border: 1px solid #555; color: #fff; padding: 4px; width: 50px; text-align: center; font-weight: bold; }
button { background: #333; color: #fff; border: 1px solid #666; padding: 4px 12px; cursor: pointer; border-radius: 4px; }
kbd { background: #333; padding: 2px 6px; border: 1px solid #555; border-radius: 3px; font-size: 0.9em; }


input[type="range"] {
    width: 120px;  /* デフォルトは100pxくらいだから、120~150pxでちょっと広めに。もっと広げたいなら200pxとか */
    margin-right: 5px;  /* スライダーと値表示の隙間調整 */
    vertical-align: middle;  /* 隣のspanと揃える */
}

#toolbar span {
    min-width: 30px;  /* 値表示の幅確保（例: 1.0） */
    text-align: left;
    color: #ccc;  /* 見やすく */
}