*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#eaeaea;line-height:1.6}header{text-align:center;padding:2rem 1rem;background:#0003}header h1{font-size:2.5rem;font-weight:300;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.3);margin-bottom:.5rem}.subtitle{color:#a0a0a0;font-size:1.1rem}main{max-width:1200px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:2rem}section{background:#ffffff08;border-radius:16px;padding:1.5rem;border:1px solid rgba(255,255,255,.08)}section h2{font-size:1.3rem;font-weight:400;margin-bottom:1rem;color:#fff}.intro-panel p{color:#b0b0b0;margin-bottom:1rem;max-width:800px}.controls-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.controls-row label{color:#a0a0a0;font-size:.9rem}select,input[type=number]{background:#0000004d;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.5rem .75rem;border-radius:8px;font-size:.9rem}select:focus,input:focus{outline:none;border-color:#6366f1}.training-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-bottom:1rem}.control-group{display:flex;flex-direction:column;gap:.35rem}.control-group label{font-size:.8rem;color:#a0a0a0;text-transform:uppercase;letter-spacing:.5px}.control-group input[type=range]{width:100%}.training-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}button{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#eaeaea;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s ease}button:hover:not(:disabled){background:#ffffff26;border-color:#ffffff40}button.primary{background:#6366f1;border-color:#6366f1;color:#fff}button.primary:hover:not(:disabled){background:#4f46e5;border-color:#4f46e5}button:disabled{opacity:.5;cursor:not-allowed}.training-status{background:#0003;border-radius:12px;padding:1rem}#status-text{font-size:.9rem;color:#b0b0b0;margin-bottom:.75rem}.progress-bar{height:6px;background:#ffffff14;border-radius:3px;overflow:hidden;margin-bottom:.75rem}#progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .3s ease}.metrics{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:#a0a0a0}.metrics b{color:#fff;font-weight:500}#latent-viz-container{display:flex;flex-direction:column;align-items:center;gap:1rem}#latent-canvas{background:#00000040;border-radius:12px;border:1px solid rgba(255,255,255,.1);cursor:crosshair;max-width:100%;height:auto}.viz-controls{display:flex;gap:.75rem}.hint{text-align:center;color:#888;font-size:.85rem;margin-top:.5rem}.hidden{display:none}.latent-dim-badge{background:#6366f133;color:#818cf8;padding:.2rem .6rem;border-radius:12px;font-size:.75rem;margin-left:.5rem;vertical-align:middle}.manipulation-layout{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start}@media(max-width:768px){.manipulation-layout{grid-template-columns:1fr}}.reconstruction-display{display:flex;flex-direction:column;align-items:center;gap:1rem}#output-canvas{background:#00000040;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:100%;height:auto}.latent-sliders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;max-height:320px;overflow-y:auto;padding-right:.5rem}.slider-row{display:flex;flex-direction:column;gap:.25rem}.slider-row label{font-size:.75rem;color:#a0a0a0}.slider-row input[type=range]{width:100%}.morph-controls{display:grid;grid-template-columns:140px 1fr 140px;gap:1.5rem;align-items:start;justify-items:center}@media(max-width:768px){.morph-controls{grid-template-columns:1fr}}.morph-point{display:flex;flex-direction:column;align-items:center;gap:.5rem}.morph-point label{font-size:.85rem;color:#a0a0a0}.morph-point canvas{background:#00000040;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.morph-settings{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:220px}.morph-settings label{font-size:.8rem;color:#a0a0a0}.morph-output{display:flex;justify-content:center;margin-top:1rem}#morph-output-canvas{background:#00000040;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.recon-grid-controls{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}.recon-grid-controls label{font-size:.9rem;color:#a0a0a0}.reconstruction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.recon-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.recon-pair{display:flex;gap:.5rem}.recon-pair canvas{background:#00000040;border-radius:8px;border:1px solid rgba(255,255,255,.1);width:56px;height:56px;image-rendering:pixelated}.recon-label{font-size:.75rem;color:#888}.education-panel details{background:#00000026;border-radius:8px;margin-bottom:.75rem;border:1px solid rgba(255,255,255,.05)}.education-panel summary{padding:1rem;cursor:pointer;font-weight:500;color:#d0d0d0;-webkit-user-select:none;user-select:none}.education-panel details[open] summary{border-bottom:1px solid rgba(255,255,255,.05)}.education-panel p,.education-panel ol{padding:1rem;color:#b0b0b0}.education-panel ol{padding-left:2rem}.education-panel li{margin-bottom:.5rem}.education-panel code{display:block;background:#0000004d;padding:.75rem 1rem;border-radius:6px;font-family:SF Mono,Monaco,monospace;font-size:.85rem;color:#c4b5fd;margin:0 1rem 1rem}.simple-only.hidden{display:none}