@charset "UTF-8";
:root{
 --ground:#edf2f4;--white:#fff;--ink:#18364d;--muted:#536b7d;--accent:#1959cf;--accent-deep:#1047ac;
 --stage:#dae9f2;--stage-soft:#c5dce9;--control:#e8eef1;--formula:#dfead7;--formula-soft:#d1dfc7;--x:#1b60b0;--y:#a24c35;
 --font:"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;--math:"STIX Two Text",Georgia,serif;
 --small:13px;--body:16px;--lead:20px;--heading:28px;--display:clamp(44px,4.3vw,68px);--radius:24px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--ground);color:var(--ink);font:var(--body)/1.6 var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:0}
a{color:inherit;text-decoration:none}button,a,select{-webkit-tap-highlight-color:transparent}
button{transition:transform 150ms var(--ease),background-color 180ms ease}
button:active:not(:disabled){transform:scale(.96)}button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}::selection{color:var(--white);background:var(--accent)}
[hidden]{display:none!important}
.icon-library,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
h2{font-size:var(--heading);line-height:1.35;font-weight:600;letter-spacing:-.035em}
h3{font-size:var(--body);font-weight:500}
.skip-link{position:fixed;top:-100px;left:20px;z-index:20;padding:12px 20px;background:var(--white)}.skip-link:focus{top:12px}
.site-header{display:flex;align-items:center;gap:36px;max-width:1640px;height:96px;padding:0 32px;margin:auto}
.brand{display:flex;align-items:center;gap:10px}.brand svg{width:38px;height:38px;stroke-width:1.8}
.brand-point{fill:var(--ink);stroke:var(--ground)}.brand strong{font-size:30px;letter-spacing:-1.5px;font-weight:650}
.header-nav{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-nav a{padding:10px 23px;border-radius:100px;color:var(--muted)}.header-nav .nav-current{color:var(--ink);background:var(--white)}
.help-button{min-height:44px;padding:8px 0 8px 14px;background:transparent}.help-button span{margin-left:6px}
main{max-width:1640px;margin:auto;padding:0 24px}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(340px,1fr);align-items:start;gap:24px}
.animation-panel{min-width:0;position:sticky;top:20px;background:var(--stage);border-radius:var(--radius);padding:36px 36px 28px}
.stage-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand-heading{font-size:inherit;font-weight:inherit;line-height:1}.stage-summary{max-width:34em;font-size:var(--lead);line-height:1.55}
.n-badge{flex:0 0 auto;font-family:var(--math);font-size:var(--lead);font-style:italic;padding-top:8px}
.stage-reading{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.stage-error{font-size:var(--small);color:var(--muted);font-variant-numeric:tabular-nums}
.animation-surface{position:relative;height:clamp(380px,40vw,600px);margin:0 -16px}
canvas{display:block;width:100%;height:100%}
.stage-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--small)}
.canvas-legend{display:flex;flex-wrap:wrap;gap:16px}.canvas-legend>span{display:inline-flex;align-items:center;gap:6px}
.canvas-legend i{width:7px;height:7px;border-radius:50%}.axis-x{background:var(--x)}.axis-y{background:var(--y)}.trace{background:var(--ink)}
#coordinateReadout{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:14px;flex-direction:column;text-align:center;padding:20px}
.empty-overlay strong{font-size:var(--heading);font-weight:500}.empty-overlay span{color:var(--muted)}.empty-overlay a{margin-top:8px;background:var(--white)}
.playback{display:flex;align-items:center;gap:12px;margin-top:28px}
.play-button{min-height:52px;padding:0 22px;border-radius:100px;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;gap:8px}
.play-button svg{width:20px;height:20px}
.icon-button{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;background:transparent;border-radius:100px}
.clear-button{font-size:var(--small);padding:0 12px;background:var(--control)}.clear-button svg{width:17px;height:17px}
.timeline{flex:1;min-width:40px;padding:0 8px}.timeline-label{font-size:var(--small);display:flex;justify-content:space-between;gap:4px}
.speed-control select{min-height:44px;border:0;background:transparent;padding:8px 5px;border-radius:100px;font-size:var(--small)}
input[type="range"]{display:block;appearance:none;width:100%;height:24px;margin:4px 0 0;background:transparent;cursor:pointer;accent-color:var(--accent)}
input[type="range"]::-webkit-slider-runnable-track{height:4px;background:var(--stage-soft);border-radius:100px}
input[type="range"]::-moz-range-track{height:4px;background:var(--stage-soft);border-radius:100px}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-7px;border:4px solid var(--white);background:var(--accent);border-radius:50%}
input[type="range"]::-moz-range-thumb{width:11px;height:11px;border:4px solid var(--white);background:var(--accent);border-radius:50%}
.mobile-draw-link,.mobile-result-link{display:none}.control-panel{min-width:0}
.drawing-panel,.parameter-panel{padding:28px;background:var(--white)}
.drawing-panel{border-radius:var(--radius) var(--radius) 0 0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawing-instruction{margin-top:6px;color:var(--muted)}
.draw-surface{position:relative;height:258px;margin:20px 0 12px;background:var(--ground);border-radius:18px;overflow:hidden}
#drawCanvas{touch-action:none;cursor:crosshair}
.draw-prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.draw-prompt>svg{width:30px;height:30px;margin-bottom:6px}.draw-prompt strong{font-size:var(--lead);font-weight:500}.draw-prompt span{font-size:var(--small);color:var(--muted)}
.canvas-note{position:absolute;bottom:12px;left:16px;font-size:var(--small);color:var(--muted);pointer-events:none}
.draw-corner{position:absolute;bottom:12px;right:16px;color:var(--muted);pointer-events:none}.draw-corner svg{width:16px;height:16px}
.drop-hint{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(218,233,242,.94);border:2px dashed var(--accent);border-radius:18px;color:var(--accent-deep);pointer-events:none}
.drop-hint svg{width:30px;height:30px}.drop-hint strong{font-size:var(--lead);font-weight:500}.draw-surface.dragging .drop-hint{display:flex}
.image-button{width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;min-height:56px;margin-bottom:14px;padding:10px 18px;border-radius:18px;background:var(--stage);color:var(--ink);text-align:left}
.image-button svg{grid-row:1/3;color:var(--accent-deep)}.image-button span{font-weight:500;line-height:1.35}.image-button small{font-size:var(--small);color:var(--muted);line-height:1.35}
.image-controls{margin:-4px 0 16px;padding:14px 16px 16px;background:var(--ground);border-radius:18px}
.mode-row{display:flex;gap:4px;padding:4px;background:var(--white);border-radius:100px}
.mode-row button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:100px;background:transparent;font-size:var(--small)}
.mode-row button.active{background:var(--ink);color:var(--white)}
.badge{padding:1px 7px;border-radius:100px;background:var(--stage);color:var(--accent-deep);font-size:11px;line-height:1.6}.mode-row .active .badge{background:rgba(255,255,255,.18);color:var(--white)}
.threshold-line{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:var(--small);color:var(--muted)}
.threshold-line output{color:var(--ink);font-variant-numeric:tabular-nums}
.image-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.image-options .checkbox-line{margin-top:0}
.link-button{min-height:44px;padding:0 4px;background:transparent;color:var(--accent-deep);font-size:var(--small);text-decoration:underline;text-underline-offset:3px}
.image-controls .hint{margin-top:6px}
.example-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.example{display:flex;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:44px;padding:7px 6px;background:transparent;border-radius:100px;white-space:nowrap}
.example svg{width:20px;height:20px}.example.active{background:var(--stage);color:var(--accent-deep)}
.checkbox-line{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:var(--small);min-height:28px;cursor:pointer}.option-list{margin-top:18px}.option-list .checkbox-line{margin-top:4px}
input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}.info-dot{color:var(--muted);margin-left:auto;font-size:var(--small)}
.parameter-panel{padding-top:6px;border-radius:0 0 var(--radius) var(--radius)}
.n-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.n-heading label{display:block;font-size:var(--small);color:var(--muted);margin-top:4px}
.n-heading i{font:italic var(--lead) var(--math)}
.n-input-wrap{display:flex;align-items:baseline;padding:4px 12px 4px 4px;gap:0;background:var(--ground);border-radius:16px}
#nInput{width:98px;border:0;font-size:44px;letter-spacing:-.05em;line-height:1.2;background:transparent;padding:0 0 0 10px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
#nInput::-webkit-inner-spin-button,#nInput::-webkit-outer-spin-button{appearance:none}.n-input-wrap>span{font-size:var(--small);color:var(--muted)}
#nSlider{margin-top:20px}.range-labels{display:flex;justify-content:space-between;font-size:var(--small);color:var(--muted)}
.preset-row{display:flex;gap:8px;margin-top:12px}.preset-row button{min-height:44px;flex:1;padding:8px;border-radius:100px;background:var(--ground)}.preset-row button.active{background:var(--ink);color:var(--white)}
.hint{font-size:var(--small);color:var(--muted);margin-top:14px;line-height:1.65}.display-settings{margin-top:18px}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
.display-settings summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:var(--small)}
.display-settings summary>span{font-size:var(--lead);transition:transform 180ms ease}.display-settings[open] summary>span{transform:rotate(45deg)}
.switch-line{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:var(--small);cursor:pointer}
input[role="switch"]{appearance:none;width:36px;height:22px;border-radius:100px;background:var(--stage-soft);padding:3px;flex-shrink:0}
input[role="switch"]::before{content:"";display:block;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform 180ms ease}
input[role="switch"]:checked{background:var(--accent)}input[role="switch"]:checked::before{transform:translateX(14px)}
.results-panel{padding:28px;margin-top:20px;background:var(--stage);border-radius:var(--radius)}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.metric-top h2{font-size:var(--lead)}.metric-top p{font-size:var(--small);color:var(--muted);margin-top:4px}
.error-value{font-size:clamp(32px,3.1vw,48px);letter-spacing:-.05em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}.error-value>span+span{font-size:var(--lead);margin-left:2px}
.chart-heading{display:flex;justify-content:space-between;gap:12px;margin-top:24px;align-items:center}.chart-heading h3,.chart-heading>span{font-size:var(--small)}
#errorChart{height:144px;margin-top:8px;cursor:pointer}.chart-note{font-size:var(--small);color:var(--muted);margin-top:8px}
.privacy-note{font-size:var(--small);color:var(--muted);padding:20px 12px 0}
.formula-panel{background:var(--formula);margin-top:48px;padding:48px;border-radius:var(--radius);scroll-margin-top:16px}
.formula-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.formula-top h2{font-size:clamp(28px,2.8vw,40px)}.formula-top p{margin-top:12px}
.formula-actions{display:flex;gap:8px;flex-wrap:wrap}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;background:var(--formula-soft);border-radius:100px}
.text-button svg{width:18px;height:18px}.primary-action{background:var(--ink);color:var(--white)}
.equations{margin-top:40px;display:flex;flex-direction:column;gap:24px}.equations>div{display:flex;align-items:center;gap:24px;min-width:0}
.axis-badge{font-size:var(--small);font-weight:600;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--formula-soft)}
.axis-badge.x{color:var(--x)}.axis-badge.y{color:var(--y)}
.equation{font-family:var(--math);font-style:italic;font-size:clamp(20px,2.5vw,34px);line-height:1.6;overflow-wrap:anywhere;min-width:0}
.domain{font:italic var(--lead) var(--math);text-align:right}
#coefficientDetails{margin-top:28px}#coefficientDetails summary{display:flex;align-items:center;gap:20px;min-height:64px}
#coefficientCount{margin-left:auto;font-size:var(--small);color:var(--muted)}.details-plus{font-size:var(--lead);transition:transform 180ms ease}#coefficientDetails[open] .details-plus{transform:rotate(45deg)}
.coefficient-note{margin:12px 0 24px;max-width:65ch;font-size:var(--small)}
.table-scroll{max-height:420px;overflow:auto;padding-bottom:8px}table{width:100%;border-collapse:collapse;text-align:right;font-variant-numeric:tabular-nums;font-size:var(--small)}
th,td{padding:14px 16px;white-space:nowrap}th{position:sticky;top:0;background:var(--formula-soft);font-weight:500}tbody tr:nth-child(even){background:var(--formula-soft)}
footer{padding:44px 12px;display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-brand{font-size:36px;font-weight:600;letter-spacing:-2px}
footer>a:last-child{font-size:var(--small)}
.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translateX(-50%);padding:14px 22px;max-width:calc(100vw - 32px);border-radius:100px;background:var(--ink);color:var(--white);font-size:var(--small);text-align:center}
dialog{padding:36px;width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 48px);border:0;border-radius:var(--radius);color:var(--ink);background:var(--white)}
dialog::backdrop{background:#18364d66}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-heading h2{font-size:var(--heading)}
.dialog-heading button{flex-shrink:0;background:var(--ground);font-size:28px}dialog p,dialog li{line-height:1.8}dialog p+p{margin-top:16px}dialog ol{padding-left:22px}dialog li+li{margin-top:10px}
.help-math{background:var(--stage);padding:16px;margin:20px 0;border-radius:12px;font-size:var(--small)}.noscript-note{padding:20px;background:var(--white)}
@media(hover:hover){
 .header-nav a:hover,.icon-button:hover,.example:hover,.image-button:hover,.mode-row button:not(.active):hover,.preset-row button:not(.active):hover{background:var(--stage-soft)}
 .play-button:hover{background:var(--accent-deep)}.text-button:hover{transform:translateY(-2px)}.help-button:hover,footer a:hover{color:var(--accent)}
}
@media(prefers-reduced-motion:no-preference){
 .stage-heading{animation:enter-title 750ms var(--ease) both}
 .animation-surface{animation:enter-stage 1000ms var(--ease) both}.stage-meta,.playback{animation:enter-title 750ms 180ms var(--ease) both}
 .drawing-panel .section-heading,.drawing-instruction{animation:enter-title 650ms 80ms var(--ease) both}.draw-surface{animation:enter-stage 900ms 100ms var(--ease) both}
 .example-row{animation:enter-title 700ms 180ms var(--ease) both}dialog[open]{animation:enter-stage 250ms var(--ease)}
 @keyframes enter-title{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
 @keyframes enter-stage{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}
@media(max-width:1150px){
 .site-header{height:84px;padding-inline:24px}main{padding-inline:16px}.studio-grid{gap:16px;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}
 .animation-panel{padding:28px 24px}.stage-summary{font-size:var(--body)}.animation-surface{height:440px}.stage-meta{display:block}
 #coordinateReadout{display:block;margin-top:10px}.drawing-panel,.parameter-panel,.results-panel{padding:24px}.parameter-panel{padding-top:6px}.draw-surface{height:240px}
 .playback{gap:6px}.play-button{padding-inline:15px}.formula-panel{padding:36px}
}
@media(max-width:820px){
 .studio-grid{display:flex;flex-direction:column}.animation-panel{position:static;width:100%;padding:32px}
 .animation-surface{height:480px}.stage-meta{display:flex}#coordinateReadout{margin:0}
 .control-panel{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:16px}.drawing-panel,.parameter-panel{border-radius:var(--radius)}.parameter-panel{padding-top:24px}
 .drawing-panel h2,.parameter-panel h2{font-size:24px}.drawing-instruction{font-size:var(--small)}.draw-surface{height:220px}
 .n-input-wrap{padding-right:8px}#nInput{width:76px;font-size:36px}.results-panel{grid-column:1/-1;margin-top:0}.metric-top{justify-content:flex-start;gap:32px}
 .error-value{font-size:48px}#errorChart{height:160px}.privacy-note{grid-column:1/-1;padding-top:0}.formula-panel{margin-top:32px}.formula-top{flex-direction:column}footer{flex-wrap:wrap}
 .mobile-result-link{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-top:16px;padding:8px 16px;background:var(--stage);border-radius:100px;font-size:var(--small)}
}
@media(max-width:560px){
 :root{--radius:20px}.site-header{height:76px;gap:12px;padding-inline:20px}.brand{gap:6px}.brand strong{font-size:26px}.brand svg{width:30px;height:30px}
 .header-nav{display:none}.help-button{font-size:var(--small);margin-left:auto;padding:8px 0}main{padding:0 12px}.studio-grid{gap:12px}
 .animation-panel{padding:24px 20px}.n-badge{font-size:18px}
 .stage-summary{font-size:var(--small)}.animation-surface{height:340px;margin-inline:-14px}
 .stage-meta{display:block}.canvas-legend{gap:12px;font-size:var(--small)}#coordinateReadout{display:none}.playback{margin-top:20px;gap:4px}
 .play-button{min-width:44px;min-height:44px;padding:0}.play-button span{display:none}.playback .icon-button{min-width:36px}.timeline{padding:0 5px}.speed-control select{max-width:65px}
 .mobile-draw-link{display:flex;align-items:center;justify-content:space-between;margin-top:22px;min-height:44px;font-size:var(--small);padding:8px 16px;background:var(--stage-soft);border-radius:100px}
 .control-panel{display:block}.drawing-panel{border-radius:var(--radius) var(--radius) 0 0;padding:24px;scroll-margin-top:12px}.parameter-panel{border-radius:0 0 var(--radius) var(--radius);padding:8px 24px 24px}
 .drawing-panel h2,.parameter-panel h2{font-size:28px}.draw-surface{height:270px}.example{flex-direction:column;gap:2px;min-height:56px;padding:6px 2px;border-radius:16px}.n-input-wrap{padding-right:12px}#nInput{width:94px;font-size:44px}
 .results-panel{padding:24px;margin-top:12px}.metric-top{justify-content:space-between;gap:12px}.metric-top h2{font-size:20px}.error-value{font-size:40px}.privacy-note{padding:20px 12px 0}
 .formula-panel{padding:28px 24px;margin-top:28px}.formula-top h2{font-size:28px}.formula-top p{font-size:var(--body)}.formula-actions{width:100%;gap:8px}
 .text-button{padding:10px 14px;font-size:var(--small)}.formula-actions button{flex:1}.equations{margin-top:32px;gap:22px}.equations>div{gap:10px;align-items:flex-start}
 .axis-badge{width:26px;height:26px;margin-top:3px}.equation{font-size:21px}.domain{font-size:18px}
 #coefficientDetails summary{display:grid;grid-template-columns:1fr 20px;gap:6px;padding:8px 0}#coefficientCount{grid-column:1;margin:0}.details-plus{grid-column:2;grid-row:1/3}
 th,td{padding:12px}footer{gap:12px;padding:32px 12px}.footer-brand{font-size:32px}dialog{padding:24px}.dialog-heading h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}