:root { --bg:#f4f4f2; --paper:#fff; --ink:#272725; --muted:#727270; --line:#dededb; --blue:#2774c7; --blue-pale:#edf5ff; --orange:#d96b19; --green:#2b8a63; --code:#f8f8f7; }
* { box-sizing:border-box; } [hidden] { display:none!important; } html { scroll-behavior:smooth; scroll-padding-top:84px; } body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } button { font:inherit; }
.general-title { margin:0 0 16px; color:#3f3f3d; font:500 18px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.plain-tools { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-bottom:10px; }.plain-tools .run-all { margin:0; }.compact-layout { padding-top:24px; }.dataset-control { display:flex; align-items:center; gap:7px; color:#666; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }.dataset-control select { min-width:120px; padding:7px 28px 7px 8px; border:1px solid var(--line); border-radius:3px; background:#fff; color:#333; font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.notebook-bar { height:62px; padding:0 26px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; box-shadow:0 1px 5px rgba(0,0,0,.04); }.matlab-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; font:bold italic 18px Georgia,serif; background:linear-gradient(145deg,#1772a8 8%,#e66c24 62%,#f5b22a); border-radius:4px; transform:skew(-5deg); }.file-name strong { display:block; font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace; }.file-name span { display:block; color:var(--muted); font-size:10px; margin-top:2px; }.kernel { padding:7px 11px; border:1px solid var(--line); border-radius:4px; color:#555; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }.kernel i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#48a877; margin-right:6px; }.run-all { margin-left:auto; border:0; border-radius:3px; background:var(--blue); color:white; padding:8px 13px; font-size:11px; cursor:pointer; }
.notebook-layout { display:grid; grid-template-columns:210px minmax(0,860px); gap:38px; justify-content:center; padding:42px 28px 110px; }.contents { position:sticky; top:104px; align-self:start; }.contents>p { margin:0 0 14px 10px; color:#8a8a88; font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }.contents nav a { display:flex; gap:9px; align-items:center; color:#777; padding:8px 10px; border-left:2px solid transparent; font-size:11px; text-decoration:none; }.contents nav a span { color:#999; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }.contents nav a.current { color:var(--blue); border-left-color:var(--blue); background:var(--blue-pale); font-weight:600; }.contents nav a.done { color:var(--green); }.contents nav a.done span::after { content:'✓'; }.contents nav a.done span { font-size:0; }.contents nav a.done span::after { font-size:10px; }.progress-wrap { margin:22px 10px 12px; color:#777; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }.progress-wrap>span { display:block; margin-bottom:7px; }.progress-wrap>i { display:block; height:3px; background:#ddd; }.progress-wrap b { display:block; height:100%; width:0; background:var(--green); transition:width .3s; }.download { display:block; margin:13px 10px; color:var(--blue); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-decoration:none; }
.notebook { min-width:0; }.title-block { padding:40px 52px 36px; background:var(--paper); border:1px solid var(--line); }.title-block>div:first-child { display:flex; justify-content:space-between; }.file-type,.step-kicker { color:var(--orange); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }.precomputed { color:var(--green); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; }.title-block h1 { margin:18px 0 12px; max-width:680px; font:600 32px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.02em; }.title-block>p { max-width:620px; margin:0; color:#60605e; font-size:14px; line-height:1.6; }.meta { display:flex; gap:8px; margin-top:24px; }.meta span { padding:5px 8px; background:#f1f1ef; color:#666; border-radius:3px; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.notebook-step { margin-top:10px; scroll-margin-top:20px; box-shadow:0 2px 8px rgba(0,0,0,.025); transition:opacity .2s; }.notebook-step.locked { opacity:.48; }.cell-heading { display:flex; align-items:center; gap:7px; padding:9px 12px; background:#eeeeec; border:1px solid var(--line); border-bottom:0; color:#555; }.cell-heading span { color:#888; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }.cell-heading h2 { margin:0; font:500 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.code-cell { background:var(--paper); border:1px solid var(--line); }.input-row { display:grid; grid-template-columns:84px 1fr; background:var(--code); border-top:1px solid #ececea; }.prompt { padding:17px 10px; text-align:center; border-right:1px solid #e5e5e3; }.prompt button { width:29px; height:29px; border:1px solid #a9c7e8; border-radius:50%; color:var(--blue); background:#fff; cursor:pointer; font-size:10px; }.prompt button:hover:not(:disabled) { background:var(--blue-pale); }.prompt button:disabled { cursor:default; opacity:.45; }.prompt button.busy { animation:pulse .7s infinite alternate; }.prompt span { display:block; color:#858583; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:8px; }.input-row pre { margin:0; padding:18px 22px 22px; overflow:auto; }.input-row code { color:#30302f; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; }.output-row { display:grid; grid-template-columns:84px 1fr; border-top:1px solid #e5e5e3; background:#fff; animation:reveal .28s ease-out; }.output-row>span { padding:17px 12px; text-align:center; border-right:1px solid #ededeb; color:var(--green); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }.output-content { min-width:0; padding:18px 22px 23px; }.has-run .prompt button { color:#fff; border-color:var(--green); background:var(--green); }.continue { display:flex; justify-content:space-between; width:100%; border:0; border-bottom:1px solid #bdd5ee; background:#edf5ff; color:#205c9b; padding:13px 22px; cursor:pointer; font-size:11px; font-weight:600; }
.text-output { display:flex; align-items:center; justify-content:space-between; gap:25px; }.text-output>pre { margin:0; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }.matrix-output { display:flex; align-items:center; gap:15px; }.mini-matrix { width:104px; height:104px; display:grid; grid-template-columns:repeat(8,1fr); gap:1px; padding:3px; background:#f0f0ee; }.mini-matrix i { display:block; }.matrix-output strong,.matrix-output span,.matrix-output small { display:block; }.matrix-output strong { font:600 18px Georgia,serif; }.matrix-output span { margin:4px 0; color:#555; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }.matrix-output small { color:#999; font-size:9px; }
.figure-output,.mini-figure,.overlay { min-width:0; }.figure-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; }.figure-head b { font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace; }.figure-head span { color:#777; font-size:10px; }.chart-wrap { height:145px; position:relative; border-left:1px solid #cfcfcd; border-bottom:1px solid #cfcfcd; background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#eeeeec 36px); }.chart-zero { position:absolute; left:0; right:0; top:50%; border-top:1px dashed #b9b9b6; }.line-chart { position:absolute; inset:0 7px; display:flex; }.bar-slot { flex:1; position:relative; }.point { width:5px; height:5px; position:absolute; left:50%; border-radius:50%; transform:translate(-50%,50%); background:var(--orange); }.point.second { width:4px; height:4px; background:var(--blue); }.line-chart .bar-slot:not(:last-child)::after { content:''; position:absolute; height:1px; width:100%; left:50%; bottom:var(--line-y); }.axis-label { display:flex; justify-content:space-between; margin-top:5px; color:#888; font:8px ui-monospace,SFMono-Regular,Menlo,monospace; }.legend { display:flex; gap:18px; margin-top:10px; color:#666; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:7px; height:7px; border-radius:50%; background:var(--orange); }.legend span:nth-child(2) i { background:var(--blue); }
.split-output { display:grid; grid-template-columns:.65fr 1.35fr; align-items:center; gap:30px; }.stat-big strong,.stat-big span,.stat-big small { display:block; }.stat-big strong { font:600 36px Georgia,serif; color:var(--orange); }.stat-big span { font-size:12px; font-weight:600; }.stat-big small { margin-top:5px; color:#888; font-size:9px; }.console-note b,.console-note span,.console-note code { display:block; }.console-note b { font:600 28px Georgia,serif; }.console-note span { color:#666; font-size:10px; margin:6px 0 15px; }.console-note code { padding:10px; background:#f3f3f1; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }.one-line-output>span { color:var(--green); font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }.one-line-output>code { display:block; margin:7px 0 20px; font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace; }.comparison-output { display:grid; grid-template-columns:.65fr 1.35fr; gap:26px; align-items:center; }.agreement span,.agreement strong,.agreement small { display:block; }.agreement span { color:#777; font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }.agreement strong { color:var(--green); font:600 31px Georgia,serif; margin:6px 0; }.agreement small { color:#666; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.scatter-figure { position:relative; width:min(100%,252px); margin:0 auto; padding:5px 4px 22px 28px; }.scatter-plot { position:relative; width:100%; aspect-ratio:1; border-left:1px solid #aaa; border-bottom:1px solid #aaa; background:repeating-linear-gradient(to right,transparent 0,transparent 24.8%,#eeeeec 25%),repeating-linear-gradient(to top,transparent 0,transparent 24.8%,#eeeeec 25%); overflow:hidden; }.scatter-plot>i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:.58; transform:translate(-50%,50%); }.identity-line { position:absolute; left:0; bottom:0; width:142%; height:1px; background:var(--orange); transform:rotate(-45deg); transform-origin:left bottom; opacity:.75; }.scatter-x { position:absolute; bottom:1px; left:28px; right:4px; text-align:center; color:#666; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }.scatter-y { position:absolute; top:5px; bottom:22px; left:2px; display:grid; place-items:center; color:#666; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; writing-mode:vertical-rl; transform:rotate(180deg); }.scatter-count { display:block; margin-top:6px; text-align:right; color:#888; font:8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.matlab-console { margin:0 0 18px; padding:0; overflow:auto; color:#30302f; background:transparent; font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; }.plain-figure { margin-top:12px; }.plain-figure .point { background:var(--blue); }.plain-figure.green-points .point { background:var(--green); }.plain-figure .chart-wrap { height:180px; }.scatter-plot>i { width:4px; height:4px; opacity:.42; }
.matlab-comment { color:#228b22; }.matlab-keyword { color:#0000ff; }.matlab-string { color:#a020f0; }
.editable-code { min-height:22px; outline:none; cursor:text; }.editable-code:focus { background:#fff; box-shadow:0 0 0 1px #9cc4ec inset; }
.boolean-toggle { display:inline-block; min-width:34px; padding:0 2px; color:#0000ff; background:#fff; outline:1px solid #9cc4ec; cursor:text; }
.brain-figure { margin:10px 0 0; padding:0; background:#fff; }.brain-figure img { display:block; width:50%; height:auto; margin:0 auto; object-fit:contain; }
.regression-output { display:grid; grid-template-columns:1fr 1fr 1.15fr; align-items:center; gap:18px; }.regression-brain { margin:0; min-width:0; }.regression-brain figcaption { margin-bottom:7px; color:#666; text-align:center; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }.regression-brain img { display:block; width:100%; height:auto; object-fit:contain; }.regression-scatter { min-width:0; }.regression-scatter .scatter-figure { width:100%; }
.finish { padding:50px; margin-top:24px; text-align:center; background:#173f38; color:white; border-radius:2px; }.finish>span { color:#8cd7b9; font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }.finish h2 { margin:12px 0 22px; font:600 34px Georgia,serif; }.finish>code { display:block; padding:15px; color:#d7f6e9; background:rgba(0,0,0,.2); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.finish p { margin:20px auto; max-width:550px; color:#b9d0ca; font-size:12px; line-height:1.6; }.finish p code { color:white; }.finish button { border:1px solid rgba(255,255,255,.35); background:transparent; color:white; border-radius:3px; padding:8px 13px; cursor:pointer; font-size:10px; }.load-error { padding:30px; background:#fff0ed; border:1px solid #e7b5aa; }.load-error b,.load-error span { display:block; }.load-error span { margin-top:5px; color:#844; font-size:11px; }
@keyframes reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } } @keyframes pulse { to { opacity:.35; } }
@media(max-width:760px){.notebook-bar{padding:0 14px}.file-name span{display:none}.kernel{font-size:0}.kernel i{margin:0}.plain-tools{justify-content:flex-start;flex-wrap:wrap;align-items:stretch;gap:8px}.dataset-control{flex:1 1 165px;min-width:0}.dataset-control select{width:100%;min-width:0}.run-all{padding:8px;font-size:10px;white-space:nowrap}.plain-tools .run-all{margin-left:0}.notebook-layout{display:block;padding:20px 12px 70px}.contents{display:none}.title-block,.lesson-copy{padding-left:24px;padding-right:24px}.title-block{padding-top:32px}.title-block h1{font-size:38px}.input-row,.output-row{grid-template-columns:58px 1fr}.input-row pre{padding:15px 13px}.input-row code{font-size:10px}.output-content{padding:15px 13px}.prompt{padding-left:6px;padding-right:6px}.text-output,.split-output,.comparison-output,.regression-output{display:block}.regression-brain,.regression-scatter{margin-top:20px}.matrix-output,.mini-figure,.overlay{margin-top:20px}.chart-wrap{height:125px}.finish{padding:38px 20px}.meta{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}