@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#223b4c;font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0;background:#81adc9;min-height:100svh}button,input{font:inherit}button,a,label.upload{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,.upload:focus-within{outline:2px solid #215b7d;outline-offset:5px}#sky{position:fixed;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}#sky:active{cursor:grabbing}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:30px 44px;z-index:1}.brand{color:#f9fdff;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;letter-spacing:-1px;font-weight:700}.brand span{font-weight:400;margin-left:-7px}.brand svg{width:36px;height:28px;margin-right:2px}.header-note{font-size:12px;color:#f3f9fc;display:flex;align-items:center;gap:9px;letter-spacing:.1px}.live-dot{width:5px;height:5px;background:#e2f3e8;border-radius:50%}.glass-button{color:white;border:1px solid #ffffff55;border-radius:7px;background:#ffffff10;padding:10px 15px}.glass-button span{margin-left:16px}.glass-button:hover{background:#ffffff25}main{position:relative;min-height:calc(100svh - 153px);pointer-events:none}.intro{position:absolute;top:36px;left:5.2%;color:#fff}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:600;opacity:.8}h1{font-family:Manrope,sans-serif;font-size:clamp(38px,4.1vw,62px);line-height:1.12;letter-spacing:-3px;font-weight:500;margin:21px 0 18px}.intro p{font-size:13px;line-height:1.8;color:#eef6fc;opacity:.85}.panel{pointer-events:auto;position:relative;margin-left:auto;margin-right:44px;top:22px;width:318px;background:linear-gradient(135deg,#f8fcf9ef,#f5f9f5e8);border:1px solid #ffffffbb;border-radius:12px;box-shadow:0 15px 55px #24415a15;backdrop-filter:blur(24px);overflow:hidden}.panel-heading{padding:21px 22px 18px;display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600}.pill{font-size:7px;letter-spacing:1px;border:1px solid #96a99c55;padding:5px 6px;border-radius:4px;color:#65816e}.control-section{padding:18px 22px;border-top:1px solid #688ba520}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:1.4px;color:#70828b;margin-bottom:17px}.text-button{border:0;background:none;color:#536e7d;font-size:10px;padding:0;letter-spacing:0}.text-button:hover{color:#102d41}.upload{border:1px dashed #a9bec5;border-radius:7px;display:flex;align-items:center;flex-direction:column;padding:17px 6px 15px;cursor:pointer;background:#ffffff22;transition:.2s}.upload:hover,.upload.dragover{background:#dceaf1;border-color:#4681a1}.upload svg{color:#6d8999;margin-bottom:10px}.upload strong{font-size:12px;font-weight:500;margin-bottom:5px}.upload span{font-size:10px;color:#7c8e98}.upload small{font-size:9px;color:#99a6ac;margin-top:9px}.dataset{display:flex;gap:10px;align-items:center;margin-top:16px}.file-icon{font-size:23px;color:#73948a}.dataset div{min-width:0}.dataset strong{font-size:10px;display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:214px}.dataset small{font-size:9px;color:#8b9ba3;display:block;margin-top:4px}.loaded-dot{width:5px;height:5px;background:#76a389;border-radius:50%;margin-left:auto;flex-shrink:0}#message{font-size:10px;line-height:1.5;color:#647986;margin:10px 0 0}#message:empty{display:none}#message.error{color:#aa4935}.tiny{font-size:9px;letter-spacing:0;font-weight:400}.toggle-row{display:flex;align-items:center;cursor:pointer;position:relative;font-size:11px}.toggle-row small{display:block;color:#91a0a7;font-size:9px;margin-top:4px}.toggle-row input{position:absolute;right:0;opacity:0;width:31px;height:20px}.switch{margin-left:auto;width:29px;height:17px;border-radius:20px;background:#c1cbd0;padding:3px}.switch:after{content:'';display:block;width:11px;height:11px;border-radius:50%;background:white;transition:transform .2s}.toggle-row input:checked+.switch{background:#75938b}.toggle-row input:checked+.switch:after{transform:translateX(12px)}.toggle-row input:focus-visible+.switch{outline:2px solid #215b7d;outline-offset:4px}.variance-title{display:flex;justify-content:space-between;font-size:10px;margin:23px 0 10px;color:#788b96}.variance-title strong{color:#3d5968;font-weight:500}.variance-bar{height:5px;display:flex;gap:2px;background:#e0e7e7;border-radius:9px;overflow:hidden}.variance-bar i{height:100%;background:#658c92}.variance-bar i:nth-child(2){background:#9ab5bb}.variance-bar i:nth-child(3){background:#c4d4d6}.variance-legend{display:flex;justify-content:space-between;font-size:8px;color:#82959e;margin-top:10px}.variance-legend span{display:flex;align-items:center;gap:4px}.variance-legend i{width:4px;height:4px;border-radius:50%;background:#658c92}.variance-legend span:nth-child(2) i{background:#9ab5bb}.variance-legend span:nth-child(3) i{background:#c4d4d6}.variance-legend b{font-weight:400;color:#506d7b}.segmented{display:flex;background:#e4ebeb;border-radius:6px;padding:3px;margin-bottom:20px}.segmented button{width:50%;border:0;background:none;font-size:10px;color:#84969e;padding:8px;border-radius:4px}.segmented button.active{background:#fff;color:#385462;box-shadow:0 1px 4px #34526010}.slider-label{display:flex;justify-content:space-between;font-size:10px;margin:13px 0 6px}.slider-label output{color:#82969f;font-size:9px}input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(to right,#809e9c 65%,#d9e2e3 65%);border-radius:5px;cursor:pointer;margin:6px 0 9px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#f8fbfa;border:2px solid #88a3a0;border-radius:50%;box-shadow:0 0 0 3px #f6f9f7}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:white;border:2px solid #88a3a0;border-radius:50%}.motion-row{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:10px;color:#6c828e}.motion-row label{display:flex;align-items:center;gap:6px;cursor:pointer}.motion-row input{accent-color:#77958e;width:11px;height:11px;margin:0}.panel-footer{border-top:1px solid #688ba520;padding:13px;text-align:center;font-size:9px;color:#8fa0a6}.panel-footer span{margin-right:5px}.cloud-caption{position:absolute;top:76%;left:23%;display:flex;align-items:center;gap:10px;color:#f2f8fb;font-size:8px;letter-spacing:1.9px}.caption-line{width:26px;height:1px;background:#ffffff80}.view-tools{pointer-events:auto;position:absolute;bottom:51px;left:calc(50% - 200px);display:flex;align-items:center;gap:15px;border:1px solid #ffffff55;background:#ffffff15;backdrop-filter:blur(8px);padding:4px 6px;border-radius:7px;color:#fff}.view-tools button{border:0;background:none;color:#fff;width:26px;height:26px;font-size:19px}.view-tools span{font-size:10px;width:35px;text-align:center}.interaction-hint{position:absolute;bottom:25px;left:calc(50% - 221px);color:#f0f6f9b0;font-size:9px;letter-spacing:.3px}.interaction-hint span{margin-right:8px;font-size:14px}.interaction-hint i{margin:0 9px;font-style:normal}footer{position:relative;display:flex;align-items:center;justify-content:space-between;padding:25px 44px;color:#4e768b;font-size:9px}footer button{border:0;background:none;color:#4e768b;font-size:10px}footer button span{margin-left:8px}.coordinates{font-size:8px;letter-spacing:2px}dialog{border:1px solid white;border-radius:14px;background:#f3f8f6;color:#355365;max-width:480px;padding:36px;box-shadow:0 30px 100px #16354a55}dialog::backdrop{background:#173d5766;backdrop-filter:blur(8px)}dialog h2{font-family:Manrope,sans-serif;font-size:29px;letter-spacing:-1px;font-weight:500}dialog p{line-height:1.8;font-size:12px}dialog .dialog-note{font-size:10px;color:#81949d}#close-about{position:absolute;right:16px;top:12px;font-size:24px;border:0;background:none;color:#6e8590}@media(min-height:850px){.panel{top:46px}.intro{top:63px}.control-section{padding-top:22px;padding-bottom:22px}}@media(max-width:900px){header{padding:22px 25px}.header-note{display:none}.panel{margin-right:24px;width:290px}.intro{left:28px}h1{font-size:43px}.intro p{max-width:250px}.cloud-caption{left:10%;font-size:7px}.view-tools{left:25%}.interaction-hint{left:21%}}@media(max-width:640px){header{padding:20px}.brand{font-size:21px}.glass-button{font-size:11px}.intro{top:16px;left:24px}h1{font-size:40px;letter-spacing:-2px;margin-top:15px}.intro p{font-size:11px}.eyebrow{font-size:8px}.panel{top:0;margin:0 16px;width:calc(100% - 32px);position:relative;transform:none}main{padding-top:540px;min-height:0}.cloud-caption{top:448px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:6px}.view-tools{top:473px;bottom:auto;left:50%;transform:translateX(-50%)}.interaction-hint{display:none}footer{padding:24px 20px}.coordinates{display:none}.control-section{padding:19px 22px}.panel-heading{padding:20px 22px}#sky{position:fixed}.upload{padding:20px}.dataset strong{max-width:260px}}
.kaggle-import{margin-top:15px;font-size:10px;border-top:1px solid #688ba520;padding-top:13px}.kaggle-import summary{cursor:pointer;color:#536e7d}.kaggle-import summary span{float:right}.kaggle-import label{display:block;margin:13px 0 6px;color:#6c828e}.kaggle-import input,.kaggle-import select{width:100%;padding:9px;border:1px solid #b7c9ce;background:#fff9;border-radius:5px;font:inherit;color:#355365}.kaggle-actions{display:flex;gap:8px;margin-top:9px}.kaggle-import button{border:1px solid #b7c9ce;border-radius:5px;padding:8px;background:#e4edeb;color:#355365;font-size:10px}.kaggle-import button:disabled{opacity:.5;cursor:wait}#kaggle-load{margin-top:9px;width:100%}#kaggle-status{font-size:9px;line-height:1.6;color:#728892;margin-bottom:0}#kaggle-source{display:block;margin-top:10px;color:#456f81}#kaggle-source[hidden]{display:none}
.projection-label{display:block;font-size:10px;margin:12px 0 7px;color:#6c828e}.projection-select{width:100%;padding:9px;border:1px solid #b7c9ce;background:#fff9;border-radius:5px;font:inherit;font-size:11px;color:#355365}.projection-note{font-size:9px;line-height:1.6;color:#728892;margin:10px 0 15px}.projection-note:empty{display:none}#pca-options,#tsne-options{margin-bottom:18px}#pca-metrics.emphasize-reconstruction{display:flex;flex-direction:column}#pca-metrics.emphasize-reconstruction[hidden]{display:none}#pca-metrics.emphasize-reconstruction #reconstruction-metric{order:-1}#reconstruction-metric .variance-title{margin-bottom:0}#reconstruction-metric .projection-note{margin-bottom:0}@media(min-width:641px){.panel{max-height:calc(100svh - 150px);overflow-y:auto;scrollbar-width:thin}}
.learn-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:17px;padding:11px 13px;border:1px solid #b7c9ce;border-radius:6px;background:#e4edeb;color:#355365;font:inherit;font-size:11px}.learn-button:hover{background:#d5e6e3}.close-dialog{position:absolute;right:16px;top:12px;font-size:24px;border:0;background:none;color:#6e8590}#learn-drawer{position:fixed;z-index:5;right:38px;top:16px;bottom:16px;width:min(440px,48vw);overflow-y:auto;padding:30px 24px;background:#f3f8f6f5;border:1px solid #ffffffaa;border-radius:14px 0 0 14px;box-shadow:-12px 0 50px #16354a22;backdrop-filter:blur(20px);transform:translateX(calc(100% + 40px));visibility:hidden;transition:transform .25s ease,visibility .25s}#learn-drawer h2{margin:17px 0 9px}#learn-drawer .learn-subtitle{color:#637d88;font-size:11px;margin-bottom:25px}.learn-section{border-top:1px solid #cbdadd;padding:20px 0}.learn-section h3{font-family:Manrope,sans-serif;font-size:18px;font-weight:600;margin:0 0 10px}.learn-section p{margin:10px 0;line-height:1.7}.learn-section details{margin-top:14px;font-size:12px}.learn-section summary{cursor:pointer;color:#466f7c;font-weight:500}.learn-section .math-formula{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;line-height:1.9;background:#e7efed;padding:12px;border-radius:6px;overflow-wrap:anywhere}.learn-section .math-insight{background:#e2eeeb;border-left:3px solid #658c92;border-radius:3px;padding:12px 14px}.learn-section .chart-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10px;color:#647d87}.learn-section svg{display:block;width:100%;height:auto;background:#ffffff70;border-radius:7px}.learn-section svg text{font-family:'DM Sans',sans-serif;font-size:10px;fill:#536e7d}.chart-grid{stroke:#dce6e7;stroke-width:1}.chart-reference{stroke:#91a6a9;stroke-width:1;stroke-dasharray:4 4}.chart-bar{fill:#c4d4d6}.chart-bar.retained{fill:#658c92}.chart-cumulative{fill:none;stroke:#345d78;stroke-width:2}.chart-point{fill:#345d78}.lesson-axis{stroke:#658c92;stroke-width:2}.lesson-reconstructed{fill:#f3f8f6;stroke:#658c92;stroke-width:1.5}.lesson-toggle{display:flex;align-items:center;gap:8px;margin:10px 0 18px;font-size:12px}.lesson-toggle input{accent-color:#658c92}.loading-table{width:100%;border-collapse:collapse;font-size:11px}.loading-table caption{text-align:left;margin:8px 0 13px;color:#637d88}.loading-table th{text-align:left;font-weight:500;font-size:10px;padding:8px;border-bottom:1px solid #cbdadd}.loading-table td{padding:8px;border-bottom:1px solid #e0e9e9;overflow-wrap:anywhere}.loading-table td:first-child{width:48%}.loading-table .top-loading{background:#e5efec}.loading-track{display:inline-block;position:relative;width:58%;height:12px;margin-right:10px;vertical-align:middle;background:#dbe5e5;border-radius:2px}.loading-track:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#7a969a}.loading-track i{position:absolute;top:3px;height:6px;background:#658c92}#loading-chart{max-height:330px;overflow:auto}#lesson-calculation p{font-size:11px;overflow-wrap:anywhere}@media(max-width:640px){#learn-drawer{padding:32px 18px}#learn-drawer h2{font-size:24px}.learn-section h3{font-size:17px}.loading-track{width:42%}}

.workspace-tabs{position:fixed;z-index:6;right:0;top:35%;display:flex;flex-direction:column;gap:5px}.workspace-tab{writing-mode:vertical-rl;padding:16px 10px;border:1px solid #ffffffaa;border-radius:7px 0 0 7px;color:#456575;background:#e4edebe8;font-size:11px;letter-spacing:.6px}.workspace-tab.active{background:#f8fcf9;color:#203f50;box-shadow:-3px 0 12px #24415a15}.learning-open #learn-drawer{transform:translateX(0);visibility:visible}.learning-open .panel{visibility:hidden;pointer-events:none}.learning-open .intro,.learning-open .cloud-caption{display:none}.learning-open .view-tools{left:calc((100% - min(440px,48vw) - 42px)/2);transform:translateX(-50%)}.learning-open .interaction-hint{display:none}#learn-drawer h2{font-family:Manrope,sans-serif;font-size:26px;letter-spacing:-1px;font-weight:500}#learn-drawer p{font-size:12px;line-height:1.7}#learn-drawer .dialog-note{font-size:10px;color:#637d88}.learning-topics{display:flex;gap:3px;padding:4px;background:#e2ebea;border-radius:7px;margin:20px 0 12px}.learning-topics button{flex:1;padding:9px 3px;border:0;border-radius:5px;background:transparent;color:#617d88;font-size:11px}.learning-topics button[aria-selected=true]{background:white;color:#254c60;box-shadow:0 1px 4px #34526010}.learn-section[hidden]{display:none}.lesson-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:17px}.lesson-steps button,.step-navigation button{border:1px solid #bbced0;border-radius:5px;background:#ffffff77;color:#456575;padding:8px 5px;font-size:10px}.lesson-steps button[aria-current=step]{background:#365e70;color:white;border-color:#365e70}.step-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.step-navigation span{font-size:10px;color:#617d88}.step-navigation button:disabled{opacity:.4;cursor:default}#learning-scene-hint{border-left:3px solid #d1ac62;background:#edf0e3;padding:12px;border-radius:3px}select:focus-visible,summary:focus-visible{outline:2px solid #215b7d;outline-offset:3px}
@media(max-width:640px){#learn-drawer{top:50svh;bottom:0;right:0;width:100%;border-radius:14px 14px 0 0;padding:24px 20px;transform:translateX(100%);max-height:50svh}.workspace-tabs{top:160px}.learning-open .view-tools{top:calc(50svh - 50px);left:50%;bottom:auto}.learning-open footer{visibility:hidden}.learning-open main{padding-top:50svh}}
@media(prefers-reduced-motion:reduce){#learn-drawer{transition:none}}

/* Shared sky-and-glass styling for ordinary Jekyll pages and posts. */
.content-page{background:linear-gradient(155deg,#6395b8,#a5c9dc 65%,#dce7de);background-attachment:fixed}
.content-page .content-shell{min-height:calc(100svh - 153px);padding:36px 24px;pointer-events:auto}
.content-card{max-width:800px;margin:0 auto;padding:clamp(24px,5vw,56px);background:#f3f8f6ed;border:1px solid #ffffffbb;border-radius:14px;box-shadow:0 15px 55px #24415a15;line-height:1.8;font-size:15px;overflow-wrap:anywhere}
.content-card h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1.5px;margin-top:0}
.content-card a{color:#215b7d}.content-card img{max-width:100%;height:auto}.content-card pre{overflow-x:auto;padding:16px;background:#e7efed;border-radius:6px}.content-card blockquote{border-left:3px solid #658c92;margin-left:0;padding-left:20px}.content-card table{display:block;overflow-x:auto;border-collapse:collapse}.content-card th,.content-card td{padding:8px 12px;border-bottom:1px solid #cbdadd}.post-meta{color:#637d88;font-size:12px}
