*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#111827;color:#fff}canvas{cursor:crosshair;border-radius:.375rem;border:2px solid #374151}canvas:hover{border-color:#06b6d4}button:hover:not(:disabled){transform:translateY(-1px);transition:transform .2s ease-in-out}button:disabled{opacity:.5;cursor:not-allowed}.loading-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.transition-all{transition:all .3s ease-in-out}button:focus,input:focus,select:focus{outline:2px solid #06b6d4;outline-offset:2px}.grid-cols-responsive{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}@media (max-width: 768px){.mobile-stack{flex-direction:column}.mobile-full-width{width:100%}.mobile-text-sm{font-size:.875rem}}.training-progress{background:linear-gradient(90deg,#06b6d4,#0891b2);background-size:200% 100%;animation:gradient-shift 2s ease-in-out infinite}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.feature-map-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(50px,1fr))}.feature-map-item{aspect-ratio:1;border-radius:.25rem;overflow:hidden}.loss-graph-container{position:relative;background:#1f2937;border-radius:.5rem;padding:1rem}.prediction-bar{height:1rem;background:linear-gradient(to right,#ef4444,#f59e0b,#10b981);border-radius:.25rem;transition:width .3s ease}.layer-card{background:#374151;border:1px solid #4b5563;border-radius:.5rem;padding:1rem;transition:all .2s ease}.layer-card:hover{border-color:#06b6d4;transform:translateY(-2px);box-shadow:0 4px 12px #06b6d41a}.drawing-canvas-container{position:relative;display:inline-block}.drawing-instructions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#9ca3af;font-size:.875rem;text-align:center}.control-panel{background:#1f2937;border:1px solid #374151;border-radius:.75rem;padding:1.5rem}.metric-display{background:#111827;border:1px solid #374151;border-radius:.5rem;padding:1rem}.pipeline-stage{background:#1f2937;border:2px solid #374151;border-radius:.5rem;padding:1rem;position:relative}.pipeline-stage.active{border-color:#06b6d4;box-shadow:0 0 20px #06b6d433}.pipeline-arrow{color:#6b7280;font-size:1.5rem}.live-pulse{animation:live-pulse 2s ease-in-out infinite}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.live-indicator{animation:live-blink 1s ease-in-out infinite}@keyframes live-blink{0%,50%{opacity:1}51%,to{opacity:.3}}.live-pipeline-active{border-color:#dc2626!important;box-shadow:0 0 30px #dc26264d;animation:live-glow 2s ease-in-out infinite}@keyframes live-glow{0%,to{box-shadow:0 0 20px #dc262633}50%{box-shadow:0 0 40px #dc262666}}.live-toggle{position:relative;overflow:hidden}.live-toggle:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(220,38,38,.2),transparent);animation:live-sweep 3s ease-in-out infinite}@keyframes live-sweep{0%{left:-100%}to{left:100%}}.camera-live-border{border:3px solid #dc2626;animation:live-border-pulse 1.5s ease-in-out infinite}@keyframes live-border-pulse{0%,to{border-color:#dc2626;box-shadow:0 0 10px #dc26264d}50%{border-color:#ef4444;box-shadow:0 0 20px #dc262699}}.animate-fade-in{animation:fade-in .3s ease-out}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-control-panel{background:linear-gradient(135deg,#1f2937 0%,#374151 100%);border:1px solid #4b5563}.section-status-indicator{transition:all .3s ease;position:relative;overflow:hidden}.section-status-indicator:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.section-status-indicator:hover:before{left:100%}@media (min-width: 1280px){.xl-grid-optimize{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}@media (min-width: 1536px){.xxl-grid-optimize{grid-template-columns:1fr 1fr 1fr;gap:2rem}}.keyboard-hint{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#60a5fa;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.section-toggle-btn{transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.section-toggle-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.section-toggle-btn:active{transform:translateY(0)}.focus-visible{outline:2px solid #06b6d4;outline-offset:2px;border-radius:4px}.status-bar{background:linear-gradient(90deg,#111827 0%,#1f2937 50%,#111827 100%);border-top:1px solid #374151}.status-indicator{position:relative;overflow:hidden}.status-indicator.training:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);animation:status-pulse 2s ease-in-out infinite}@keyframes status-pulse{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}@media (min-width: 1920px){.ultra-wide-container{max-width:1800px;margin:0 auto}.ultra-wide-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:3rem}}.hover-lift{transition:transform .2s ease,box-shadow .2s ease}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.section-header{background:linear-gradient(135deg,#374151 0%,#4b5563 100%);border-bottom:1px solid #6b7280}.section-header:hover{background:linear-gradient(135deg,#4b5563 0%,#6b7280 100%)}.badge-pulse{animation:badge-pulse 2s ease-in-out infinite}@keyframes badge-pulse{0%,to{box-shadow:0 0 #06b6d466}50%{box-shadow:0 0 0 8px #06b6d400}}@media (max-width: 768px){.mobile-section-controls{flex-direction:column;gap:1rem}.mobile-section-badges{justify-content:center}.mobile-compact{padding:1rem}}.dark-glass{background:rgba(17,24,39,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(75,85,99,.3)}.dark-glass:hover{background:rgba(31,41,55,.9);border-color:#6b728080}