/* 梯度下降专用：与优化器实验台保持视觉一致，独立加载，不影响其他页面。 */
body[data-page="dl/gradient-descent"] {--paper:#f4f6f5;--ink:#172d32;--ink2:#4b6268;--mute:#647a80;--line:#e0e8e6;--line2:#ccd8d5;--blue:#207269;--blueink:#155b53;--bluebg:#e7f2ee;--nav:208px;--step:#b97418;--stepbg:#f9f3e7}
.nav {background:#fcfdfc;padding:28px 14px;scrollbar-width:thin;scrollbar-color:#d7e1dd transparent}
.brand {padding:0 12px 22px;margin-bottom:20px}.brand b {font-size:21px;letter-spacing:.04em}.brand span {font-size:11px;letter-spacing:.02em}
.nav .sec {margin-top:22px;letter-spacing:.09em;font-size:11px}.sec em {color:#7d908c}
.nav .item {font-size:13px;padding:8px 10px 8px 13px;border-radius:7px;line-height:1.4}
.nav a.item.on {background:#e7f1ed;color:#155b53}.nav a.item.on::before {background:#207269;top:10px;bottom:10px}.nav a.item:hover {background:#edf3f0}
main {max-width:1570px;margin:auto;padding:19px 34px 28px}
.page-meta {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}
.breadcrumb {font-size:12px;color:var(--ink2);letter-spacing:.025em}.breadcrumb span {padding:0 12px;color:#95a5a2}
.pn {gap:16px;padding:0}.pn a {font-size:12px;padding:0;border:0;background:none;color:var(--ink2)}.pn a:hover {color:var(--blue)}
.ph {align-items:center;margin-bottom:23px;gap:20px}.ph h1 {font-size:38px;font-weight:700;letter-spacing:.025em;line-height:1.2}.title-mark {color:var(--blue);margin-left:3px}
.ph .one {color:var(--ink);font-size:15px;margin-top:9px;line-height:1.75}.ph .one span {color:var(--ink2);margin-left:4px}
.lab-badge {display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12px;letter-spacing:.06em;color:var(--blueink);background:#e8f1ec;border:1px solid #d2e4da;border-radius:100px;padding:7px 13px}
.lab-badge i,.cap b i {display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.terrain-picker {display:flex;align-items:center;gap:23px;margin-bottom:16px;padding:8px 13px;background:#fff;border:1px solid var(--line);border-radius:13px}
.picker-label {font-size:12px;white-space:nowrap;color:var(--ink2);padding-left:3px}
.terrain-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;min-width:0;max-width:610px}
.terrain-options button {display:flex;align-items:center;gap:14px;text-align:left;padding:8px 17px;min-width:0;border:1px solid transparent;background:transparent;color:var(--ink2);border-radius:8px}
.terrain-options button:hover {background:#f4f7f5}.terrain-options button[aria-pressed="true"] {background:#edf5f0;border-color:#b8d2c4;color:#185e52;box-shadow:0 1px 2px #173b2910}
.terrain-options svg {width:40px;height:31px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.terrain-options b {display:block;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.5}.terrain-options small {display:block;font-size:11px;font-weight:400;color:var(--ink2);margin-top:2px;white-space:nowrap}
.picker-tip {margin-left:auto;padding-right:8px;font-size:11px;color:var(--ink2)}
.stage {grid-template-columns:minmax(0,1fr) 286px;gap:18px;align-items:stretch}.workspace {display:flex;flex-direction:column;gap:16px;min-width:0}
.fig {padding:0;border-radius:14px;overflow:hidden;box-shadow:0 3px 15px #273e2f04}
.figure-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px 0;min-height:42px}.figure-heading>div {display:flex;align-items:center;gap:9px;min-width:0}
.figure-heading h2 {font-size:14px;line-height:1.4;margin:0;font-weight:600;white-space:nowrap}.section-dot {width:5px;height:13px;border-radius:2px;background:#508b78;flex-shrink:0}
.figure-sub {font-size:11px;color:var(--ink2);border-left:1px solid var(--line2);padding-left:10px;white-space:nowrap}.figure-caption {font-size:11px;color:var(--ink2);white-space:nowrap}.fig>.figure-heading {padding-right:78px}
.terrain-viewport {position:relative;isolation:isolate}.fig canvas {border-radius:0;background:#fff;cursor:grab}.fig canvas:active {cursor:grabbing}
.scene-labels {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ball-tag {position:absolute;left:0;top:0;padding:4px 8px;border-radius:5px;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;background:#fffdf8f0;border:1px solid #e8d8b7;box-shadow:0 2px 7px #42331813;color:#925b16;will-change:transform}
.ball-tag::before {content:"";display:inline-block;width:5px;height:5px;background:var(--step);border-radius:50%;margin-right:5px;vertical-align:1px}
.terrain-scale {position:absolute;left:21px;top:36%;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--ink2);pointer-events:none}
.terrain-scale i {width:5px;height:66px;border-radius:4px;background:linear-gradient(#ebd6b1,#d6dfc6,#91bfba)}
.view-legend {display:flex;align-items:center;gap:16px;padding:8px 19px 12px;font-size:11px;color:var(--ink2);flex-wrap:wrap}.view-legend>span {display:flex;align-items:center;gap:6px;white-space:nowrap}
.ball-key {width:8px;height:8px;display:inline-block;background:#c48226;border-radius:50%}.path-key {width:13px;height:0;border-top:2px solid var(--step);transform:rotate(-25deg)}
.view-legend .gesture-hint {font-size:10px;margin-left:auto;color:var(--ink2)}
#view {order:4;border:0;background:#f1f5f2;border-radius:5px;font-size:10px;color:var(--ink2);padding:4px 7px;line-height:1.4;white-space:nowrap}
.cap {margin:0;border-radius:0;min-height:74px;background:#f0f6f2;border-top:1px solid #e0eae3;padding:13px 19px;gap:15px;font-size:12px;line-height:1.85}
.cap b {display:flex;align-items:center;gap:6px;border:0;border-radius:0;padding:0;font-size:11px;line-height:1.85;letter-spacing:.02em;margin:0;color:var(--blueink)}
.fstools {top:12px;right:15px}.fstools button {border-radius:5px;border:1px solid var(--line);color:var(--ink2);font-size:11px;padding:4px 9px;background:#fff}
.chart-card {position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-height:209px}
.chart-card .figure-heading {padding:14px 20px 4px;min-height:35px}.chart-card canvas {display:block;width:100%;touch-action:pan-y}
.chart-empty {position:absolute;inset:51% 15px auto 50px;font-size:12px;text-align:center;pointer-events:none;color:var(--ink2)}.chart-empty[hidden] {display:none}
.panel {gap:17px;border-radius:14px;padding:20px;align-items:stretch;flex-direction:column;flex-wrap:nowrap;box-shadow:0 3px 15px #273e2f04}
.panel-heading {display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2 {font-size:14px;line-height:1.5;margin:0}
.run-state {font-size:10px;color:var(--ink2);background:#f0f4f1;padding:3px 7px;border-radius:4px;line-height:1.6;white-space:nowrap}.run-state[data-playing="true"] {color:var(--blueink);background:#e5f3ec}.run-state[data-out="true"] {color:#a34b2d;background:#faede6}
.panel .ctl {min-width:0;flex:none}.ctl .lab {font-size:12px;align-items:center;color:var(--ink)}.greek {font-family:Georgia,serif;font-style:italic;color:var(--ink2);margin-left:3px}
.ctl .lab .val {font-family:"Avenir Next","Helvetica Neue",sans-serif;font-size:34px;line-height:1.2;font-weight:500;color:var(--blueink);font-variant-numeric:tabular-nums}
.ctl input[type="range"] {appearance:none;-webkit-appearance:none;height:5px;border-radius:8px;margin:12px 0 8px;background:linear-gradient(to right,var(--blue) 0 var(--fill,18%),#e3ebe6 var(--fill,18%) 100%);cursor:pointer;accent-color:var(--blue)}
.ctl input[type="range"]::-webkit-slider-thumb {appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 1px 4px #16432c33}.ctl input[type="range"]::-moz-range-thumb {width:9px;height:9px;border-radius:50%;background:white;border:4px solid var(--blue)}
.range-labels {display:flex;justify-content:space-between;font-size:10px;color:var(--ink2)}
.rate-presets {display:flex;gap:6px;align-items:center;margin-top:9px}.rate-presets>span {font-size:10px;color:var(--ink2);margin-right:auto}.rate-presets button {font-family:"Avenir Next","Helvetica Neue",sans-serif;font-size:11px;border:1px solid var(--line);border-radius:5px;padding:3px 10px;color:var(--ink2)}.rate-presets button[aria-pressed="true"] {background:var(--bluebg);border-color:#b9d4c9;color:var(--blueink)}
.momentum-control {position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f7f4;border:1px solid #e4ebe4;border-radius:8px;padding:10px 12px;cursor:pointer}
.momentum-control b {display:block;font-size:12px;font-weight:600}.momentum-control b span {font-size:10px;font-weight:400;margin-left:7px;color:var(--ink2)}.momentum-control small {display:block;font-size:10px;color:var(--ink2);margin-top:3px}
.momentum-control input {position:absolute;right:12px;width:35px;height:21px;opacity:0;margin:0;cursor:pointer}
.switch-track {pointer-events:none;display:block;flex-shrink:0;width:35px;height:21px;border-radius:20px;background:#cedbd3;transition:background .18s}.switch-track::after {content:"";display:block;width:15px;height:15px;background:#fff;border-radius:50%;margin:3px;box-shadow:0 1px 2px #274e3226;transition:transform .18s}.momentum-control input:checked+.switch-track {background:var(--blue)}.momentum-control input:checked+.switch-track::after {transform:translateX(14px)}.momentum-control input:focus-visible+.switch-track {outline:2px solid var(--blue);outline-offset:3px}
.run-buttons {display:grid;grid-template-columns:1.1fr 1fr;gap:8px}.run-buttons button {padding:11px 6px;font-size:13px;border-radius:7px;border-color:#d4dfd8;color:var(--ink);font-weight:500}.run-buttons .primary {border-color:var(--blue);color:white;box-shadow:0 3px 7px #216b5720}
#step::before {content:"↗";margin-right:8px}#play::before {content:"";display:inline-block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;margin-right:7px}#play[data-playing="true"]::before {width:6px;height:8px;border:0;border-left:2px solid;border-right:2px solid}
.start-controls {display:flex;align-items:center;gap:9px}.start-controls>span {font-size:10px;color:var(--ink2);white-space:nowrap}.segments {display:flex;flex:1;gap:2px;padding:3px;background:#f0f4f1;border:1px solid #eaf0eb;border-radius:7px}
.segments button {flex:1;border:1px solid transparent;background:none;color:var(--ink2);border-radius:5px;padding:4px 3px;font-size:10px;white-space:nowrap}.segments button:hover {background:#e6eee8}.segments button[aria-pressed="true"] {background:#fff;box-shadow:0 1px 3px #18372413;border-color:#dfe8e2;color:var(--blueink);font-weight:600}
.restart-hint {font-size:10px;color:var(--ink2);line-height:1.6;margin:-9px 0 0}
.loss-readout {padding:17px 15px 14px;background:#f9f5ed;border:1px solid #ece3d2;border-radius:9px;color:#704b20}
.readout-label {display:flex;justify-content:space-between;gap:7px;align-items:baseline;font-size:11px}.readout-label span:last-child {font-size:9px;color:#786447}
.loss-readout output {display:block;font-family:"Avenir Next","Helvetica Neue",sans-serif;font-size:43px;font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:8px 0 7px;font-variant-numeric:tabular-nums}
.loss-change {font-size:10px;color:#786447;line-height:1.5;font-variant-numeric:tabular-nums}.loss-change[data-direction="down"] {color:#266455}.loss-change[data-direction="up"] {color:#a44d28}
.stats {display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:0;border:0;width:auto}.stat {display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:10px;line-height:1.5}.stat .v {font-family:"Avenir Next","Helvetica Neue",sans-serif;font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.3}.stat:first-child {border-right:1px solid var(--line)}
.position-readout {display:flex;justify-content:space-between;gap:6px;font-size:10px;color:var(--ink2);border-top:1px solid var(--line);padding-top:13px}.position-readout b {font-weight:500;color:var(--ink);margin-left:3px;font-variant-numeric:tabular-nums}
.restart-button {font-size:11px;border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--ink2);background:white}
.panel-foot {margin:auto 0 0;font-size:10px;color:var(--ink2);text-align:center;line-height:1.6}.panel-foot>span {padding:0 3px}kbd {font:inherit;padding:1px 4px;border:1px solid #d7e2db;border-bottom-width:2px;border-radius:3px;background:#fafcf9}
.notes {gap:20px;margin-top:24px}.note {border-radius:13px;padding:23px 25px}.note h2 {font-size:17px;color:var(--ink);letter-spacing:.02em;font-weight:600;margin-bottom:15px}.note h2::before {display:none}.note li {font-size:13px;padding:13px 0;line-height:1.85}.note li b {display:block;font-size:13px;margin-bottom:4px;line-height:1.7}.note ol li::before {background:#e6efe9;color:var(--blueink);margin-top:2px}
.note.warn {background:#fcfbf6;border-color:#e8e5d6}.note.warn li {border-color:#e8e5d6}.note.warn li::before {width:5px;height:5px;margin-top:9px;background:#b59459}
.quote {border:0;padding:24px 28px;background:#e6eee7;border-radius:12px;font-size:20px;line-height:1.8;margin-top:22px;color:#23483d}
footer {display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:26px;font-size:11px;color:var(--ink2)}
button:focus-visible,a:focus-visible,input:focus-visible {outline:2px solid #207269;outline-offset:3px}
.fig.fs {padding:0;display:flex;flex-direction:column;background:white;overflow:hidden;border-radius:0}.fig.fs .terrain-viewport {flex:1;min-height:0}.fig.fs .ball-tag {font-size:15px;padding:5px 10px}.fig.fs .figure-heading {padding-top:18px;padding-right:300px;min-height:48px;flex-shrink:0}.fig.fs .view-legend,.fig.fs .cap {flex-shrink:0}.fig.fs .cap {font-size:15px;min-height:65px}.fig.fs .fstools {top:14px;right:20px}
@media(min-width:1650px){.stage {grid-template-columns:minmax(0,1fr) 304px}.view-legend,.figure-caption,.figure-sub {font-size:12px}}
@media(max-width:1250px){body[data-page="dl/gradient-descent"] {--nav:188px}main {padding:24px}.stage {grid-template-columns:minmax(0,1fr) 266px;gap:14px}.panel {padding:17px;gap:15px}.ph h1 {font-size:34px}.ph .one {font-size:13px}.picker-tip {display:none}.view-legend .gesture-hint {order:5;width:100%;justify-content:center}.view-legend #view {margin-left:auto}.figure-sub {display:none}.terrain-options {max-width:none}.notes {gap:16px}}
@media(max-width:1050px){.page-meta {gap:10px}.breadcrumb {font-size:11px}.pn a {font-size:10px}.ph .one span {display:block;margin:2px 0 0}.ph h1 {font-size:32px}.lab-badge {font-size:10px;padding:5px 9px}.figure-caption {font-size:10px}.notes {grid-template-columns:1fr}.chart-card .figure-heading {padding-left:15px;padding-right:15px}.readout-label span:last-child {font-size:8px}.rate-presets button {padding:3px 8px}.chart-empty {font-size:11px}}
@media(max-width:900px) and (min-width:821px){body[data-page="dl/gradient-descent"] {--nav:170px}main {padding:20px 16px}.stage {grid-template-columns:minmax(0,1fr) 240px}.figure-caption {display:none}.terrain-picker {gap:12px}.terrain-options button {padding:8px;gap:9px}.terrain-options small {font-size:9px}.terrain-options svg {width:30px}.ph h1 {font-size:29px}}
@media(max-width:820px){.nav {position:fixed}.topbar {background:#fcfdfc}main {padding:22px 18px}.page-meta {margin-bottom:22px}.pn {gap:12px}.ph {flex-direction:row;align-items:flex-start;gap:12px;margin-bottom:22px}.ph h1 {font-size:32px}.ph .one {font-size:13px;margin-top:10px}.lab-badge {margin-top:4px}.terrain-picker {padding:8px;margin-bottom:14px;gap:12px}.picker-label {display:none}.terrain-options button {padding:9px 13px;gap:12px}.terrain-options small {font-size:10px}.stage {grid-template-columns:minmax(0,1fr) 254px;gap:13px}.figure-caption {display:none}.view-legend {gap:12px;padding:8px 14px 12px}.view-legend .gesture-hint {font-size:9px}.panel {padding:15px;gap:15px}.panel-heading h2 {font-size:13px}.readout-label span:last-child {font-size:8px}.chart-empty {font-size:10px;inset-inline:45px 8px}.quote {font-size:18px;padding:22px}.loss-readout {padding:15px 12px}.loss-readout output {font-size:38px}}
@media(max-width:650px){main {padding:18px 13px}.page-meta {margin-bottom:20px;flex-wrap:wrap;row-gap:8px}.breadcrumb {font-size:10px}.pn a {font-size:9px}.pn {gap:10px}.ph {position:relative;display:block}.ph h1 {font-size:29px;padding-right:0}.ph .lab-badge {display:none}.ph .one {font-size:12px}.terrain-options {gap:5px}.terrain-options button {padding:8px;gap:8px}.terrain-options b {font-size:12px}.terrain-options small {font-size:9px;white-space:normal}.terrain-options svg {width:30px}.stage {display:flex;flex-direction:column;gap:16px}.workspace {display:contents}.fig {order:0}.chart-card {order:2}.panel {order:1}.figure-heading {padding-left:15px;padding-right:15px}.figure-caption {display:inline;font-size:10px}.terrain-scale {left:13px}.view-legend {padding:9px 13px;gap:12px}.view-legend .gesture-hint {font-size:10px}.cap {padding:13px;gap:10px;font-size:12px}.chart-empty {font-size:11px}.panel {display:grid;grid-template-columns:1fr 1fr;padding:17px;gap:17px 16px}.panel-heading,.learning-rate,.run-buttons,.start-controls,.restart-hint,.position-readout,.restart-button,.panel-foot,.momentum-control {grid-column:1/-1}.learning-rate .lab .val {font-size:33px}.momentum-control {padding:11px 13px}.momentum-control small {font-size:11px}.start-controls>span,.segments button {font-size:11px}.segments button {padding:5px 4px}.loss-readout {padding:15px 13px}.readout-label {display:block;font-size:11px}.readout-label span:last-child {display:none}.loss-readout output {font-size:35px}.stats {display:flex;flex-direction:column;justify-content:center;gap:12px}.stat {font-size:10px}.stat:first-child {border:0}.stat .v {font-size:25px}.position-readout {font-size:11px}.run-buttons button {padding:12px 6px}.notes {margin-top:24px;gap:15px}.note {padding:21px}footer {font-size:10px}.fig.fs .figure-heading {padding-right:195px}.fig.fs .figure-caption {display:none}.fig.fs .cap {max-height:135px;overflow:auto}.fig.fs .fstools button {font-size:10px;padding:4px 7px}.fig.fs .fstools button.zoom {min-width:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after {animation:none!important;transition:none!important}}