.calc-page { --calc-coral:#ef6a4d; --calc-violet:#7657d6; --calc-cyan:#52c7c7; }
.calc-hero { background:linear-gradient(135deg,#fffaf1 0 72%,#dff3ef 72%); }
.calc-priority { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; border:3px solid var(--note-ink); background:var(--note-yellow); box-shadow:6px 6px 0 var(--note-ink); }
.calc-priority div { display:flex; gap:12px; align-items:center; padding:8px 11px; background:#fff; border:2px solid var(--note-ink); }
.calc-priority b { color:var(--note-red); white-space:nowrap; }
.calc-priority span { color:var(--note-muted); font-weight:700; }
.calc-section-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:18px; padding-bottom:10px; border-bottom:3px solid var(--note-ink); }
.calc-section-heading h2 { margin:6px 0 0; font:900 30px/1.2 var(--nb-font-serif); }
.calc-stars { color:#d6a500; font-size:18px; letter-spacing:2px; }
.calc-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:18px; align-items:stretch; }
.calc-controls h3 { margin-top:0; }
.calc-input-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calc-input-grid--single { grid-template-columns:1fr; }
.calc-input-grid label,.distribution-controls label { display:grid; gap:6px; color:var(--note-muted); font-weight:800; }
.calc-input-grid input,.distribution-controls input { width:100%; min-width:0; padding:11px 12px; border:2px solid var(--note-ink); background:#fff; color:var(--note-ink); box-shadow:3px 3px 0 var(--note-ink); }
.calc-reset,.network-toolbar button { border:2px solid var(--note-ink); background:#fff; color:var(--note-ink); box-shadow:3px 3px 0 var(--note-ink); font-weight:900; cursor:pointer; }
.calc-reset { margin-top:16px; padding:9px 12px; }
.calc-reset:hover,.network-toolbar button:hover,.network-toolbar button.is-active { background:#c8ff77; transform:translate(1px,1px); box-shadow:2px 2px 0 var(--note-ink); }
.calc-worked { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calc-worked--stack { grid-template-columns:1fr 1fr; }
.calc-step { display:flex; flex-direction:column; justify-content:center; min-height:104px; padding:16px; border:2px solid var(--note-ink); background:#fff; box-shadow:4px 4px 0 var(--note-ink); }
.calc-step b { margin-bottom:8px; color:var(--note-red); font:900 12px var(--nb-font-mono); }
.calc-step span { font:800 16px/1.6 var(--nb-font-mono); overflow-x:auto; }
.calc-step--answer { background:#c8ff77; }
.calc-flow { position:relative; display:flex; justify-content:center; align-items:center; gap:14px; margin:22px 0; padding:26px 26px 50px; border:2px dashed var(--note-ink); background:#fff; }
.calc-node { min-width:135px; padding:15px; border:3px solid var(--note-ink); background:var(--note-blue); text-align:center; box-shadow:4px 4px 0 var(--note-ink); }
.calc-node--loss { background:var(--note-peach); }
.calc-node small,.calc-node strong { display:block; }.calc-node small { margin-bottom:7px; color:var(--note-muted); font:800 10px var(--nb-font-mono); }.calc-node strong { font:900 19px var(--nb-font-mono); }
.calc-arrow { font:900 25px var(--nb-font-mono); }
.calc-return { position:absolute; left:25%; right:8%; bottom:14px; color:var(--note-red); text-align:center; font:900 15px var(--nb-font-mono); border-top:3px solid var(--note-red); }
.calc-network-card { border:3px solid var(--note-ink); background:#fff; box-shadow:7px 7px 0 var(--note-ink); overflow:hidden; }
.network-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:14px; border-bottom:3px solid var(--note-ink); background:var(--note-yellow); }
.network-toolbar button { padding:8px 10px; }
.network-svg { display:block; width:100%; height:auto; min-height:280px; background:linear-gradient(90deg,#edf5ff,#fff 50%,#fff0e9); }
.network-svg line { stroke:var(--note-ink); stroke-width:5; opacity:.2; transition:opacity .2s,stroke .2s; }
.network-svg circle,.network-svg rect { fill:#fff; stroke:var(--note-ink); stroke-width:4; transition:fill .2s,stroke .2s; }
.network-svg text { fill:var(--note-ink); text-anchor:middle; font:900 16px var(--nb-font-mono); pointer-events:none; }
.network-svg .net-dead { fill:#e3e6ea; }
.network-svg [data-stage].is-active line { opacity:1; stroke:var(--calc-coral); }
.network-svg [data-stage].is-active circle,.network-svg [data-stage].is-active rect { fill:#c8ff77; stroke:var(--calc-coral); }
.network-explanation { min-height:92px; padding:18px 22px; border-top:3px solid var(--note-ink); color:var(--note-muted); font-size:17px; line-height:1.7; }
.network-explanation strong { color:var(--note-red); }
.bayes-visual { display:grid; gap:14px; padding:22px; border:3px solid var(--note-ink); background:#fff; box-shadow:6px 6px 0 var(--note-ink); }
.bayes-branch { display:grid; grid-template-columns:54px 1fr 88px; gap:12px; align-items:center; }
.bayes-bag { display:grid; place-items:center; aspect-ratio:1; border:3px solid var(--note-ink); border-radius:50% 50% 42% 42%; background:var(--note-blue); font:900 18px var(--nb-font-mono); }
.bayes-bag--alt { background:var(--note-peach); }
.bayes-bar { height:26px; border:2px solid var(--note-ink); background:#eef0f2; overflow:hidden; }
.bayes-bar span { display:block; height:100%; width:0; background:var(--calc-cyan); transition:width .2s; }
.bayes-branch:nth-child(2) .bayes-bar span { background:var(--calc-coral); }
.bayes-branch strong { font:900 13px var(--nb-font-mono); }
.bayes-answer { padding:16px; border:3px solid var(--note-ink); background:#171717; color:#ffe76b; text-align:center; font:900 clamp(16px,2.5vw,23px)/1.6 var(--nb-font-mono); }
.distribution-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; margin-bottom:16px; }
.distribution-controls .calc-reset { margin:0; min-height:45px; }
.calc-error { min-height:22px; color:#b42318; font-weight:800; }
.distribution-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.distribution-panel { padding:20px; border:3px solid var(--note-ink); background:#fff; box-shadow:6px 6px 0 var(--note-ink); }
.distribution-panel h3 { margin:0 0 16px; font-size:22px; }
.distribution-panel p { color:var(--note-muted); line-height:1.65; }
.dist-chart { display:flex; align-items:end; justify-content:center; gap:12px; height:210px; padding:15px 12px 0; border-left:3px solid var(--note-ink); border-bottom:3px solid var(--note-ink); background:repeating-linear-gradient(to top,transparent 0 39px,#d9dde2 40px); }
.dist-column { display:flex; flex:1; max-width:68px; height:100%; flex-direction:column; justify-content:end; align-items:center; gap:5px; }
.dist-bar-wrap { display:flex; align-items:end; justify-content:center; gap:3px; width:100%; height:160px; }
.dist-bar { width:70%; min-height:2px; border:2px solid var(--note-ink); border-bottom:0; background:var(--calc-violet); transition:height .2s; }
.dist-bar--q { background:var(--calc-cyan); }
.dist-value,.dist-label { font:800 11px var(--nb-font-mono); }
.distribution-answer { margin-top:16px; padding:13px; background:#171717; color:#ffe76b; text-align:center; font:900 16px/1.6 var(--nb-font-mono); overflow-x:auto; }
.softmax-bars { display:flex; align-items:end; justify-content:center; gap:18px; min-height:235px; margin-top:20px; padding:24px 18px 14px; border:3px solid var(--note-ink); border-bottom-width:6px; background:#fff; box-shadow:6px 6px 0 var(--note-ink); overflow-x:auto; }
.softmax-bars>div { display:grid; grid-template-rows:180px auto auto; min-width:70px; align-items:end; justify-items:center; gap:5px; }
.softmax-bars span { display:block; width:48px; max-height:180px; border:3px solid var(--note-ink); border-bottom:0; background:var(--calc-violet); transition:height .2s; }
.softmax-bars b,.softmax-bars small { font-family:var(--nb-font-mono); }
.cnn-input-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.cnn-input-grid label { display:grid; gap:6px; color:var(--note-muted); font-weight:800; }
.cnn-input-grid input { width:100%; min-width:0; padding:11px 12px; border:2px solid var(--note-ink); background:#fff; color:var(--note-ink); box-shadow:3px 3px 0 var(--note-ink); }
.cnn-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; }
.cnn-result-grid article { min-width:0; padding:16px; border:3px solid var(--note-ink); background:#fff; box-shadow:5px 5px 0 var(--note-ink); overflow-x:auto; }
.cnn-result-grid small,.cnn-result-grid strong { display:block; }.cnn-result-grid small { margin-bottom:10px; color:var(--note-red); font:900 11px var(--nb-font-mono); }.cnn-result-grid strong { font:900 15px/1.6 var(--nb-font-mono); }
.huffman-board { display:grid; gap:10px; margin:8px 0 20px; }
.huffman-row { display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center; padding:13px; border:2px solid var(--note-ink); background:#fff; box-shadow:4px 4px 0 var(--note-ink); }
.huffman-row b { color:var(--note-red); font:900 12px var(--nb-font-mono); }
.huffman-nodes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.huffman-node { padding:8px 11px; border:2px solid var(--note-ink); background:var(--note-blue); font:900 13px var(--nb-font-mono); }
.huffman-node--merged { background:#c8ff77; box-shadow:3px 3px 0 var(--note-ink); }
.huffman-join { color:var(--note-red); font-weight:900; }
@media (max-width:760px) { .calc-priority,.calc-layout,.distribution-grid { grid-template-columns:1fr; }.calc-priority div { align-items:flex-start; }.distribution-controls { grid-template-columns:1fr; }.calc-flow { overflow-x:auto; justify-content:flex-start; }.calc-node { min-width:115px; }.network-svg { min-width:680px; }.calc-network-card { overflow-x:auto; }.network-toolbar,.network-explanation { position:sticky; left:0; width:100%; }.bayes-branch { grid-template-columns:48px 1fr 76px; }.cnn-input-grid{grid-template-columns:1fr 1fr 1fr}.cnn-result-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px) { .calc-input-grid,.calc-worked { grid-template-columns:1fr; }.calc-section-heading { align-items:flex-start; }.calc-stars { font-size:13px; }.calc-hero { background:var(--note-white); } }
[data-theme='dark'] .calc-hero { background:linear-gradient(135deg,#181818 0 72%,#172c24 72%); }
[data-theme='dark'] .calc-priority,[data-theme='dark'] .network-toolbar { color:#192232; }
[data-theme='dark'] .calc-priority div,[data-theme='dark'] .calc-step,[data-theme='dark'] .calc-flow,[data-theme='dark'] .calc-network-card,[data-theme='dark'] .bayes-visual,[data-theme='dark'] .distribution-panel,[data-theme='dark'] .huffman-row { background:#1a1a1a; }
[data-theme='dark'] .calc-step--answer { background:#344827; }
[data-theme='dark'] .softmax-bars,[data-theme='dark'] .cnn-result-grid article { background:#1a1a1a; }
[data-theme='dark'] .network-svg { background:linear-gradient(90deg,#172636,#1a1a1a 50%,#30201c); }
[data-theme='dark'] .network-svg circle,[data-theme='dark'] .network-svg rect { fill:#1a1a1a; }
[data-theme='dark'] .network-svg .net-dead { fill:#30343a; }
[data-theme='dark'] .calc-input-grid input,[data-theme='dark'] .distribution-controls input,[data-theme='dark'] .cnn-input-grid input,[data-theme='dark'] .calc-reset,[data-theme='dark'] .network-toolbar button { background:#222; color:var(--note-ink); }