@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--bg-primary: #0a0a12;--bg-secondary: #12121e;--bg-tertiary: #1a1a2e;--bg-card: #16213e;--accent-cyan: #00d4aa;--accent-cyan-dim: #00a88a;--accent-magenta: #ff006e;--accent-orange: #ffa502;--accent-red: #ff4757;--accent-green: #2ed573;--accent-blue: #3b82f6;--accent-purple: #9b59b6;--text-primary: #e8e8f0;--text-secondary: #a0a0b8;--text-dim: #6a6a82;--border-color: #2a2a3e;--border-glow: rgba(0, 212, 170, .3);--font-mono: "JetBrains Mono", "Consolas", monospace;--font-sans: "Space Grotesk", -apple-system, sans-serif;--shadow-glow: 0 0 20px rgba(0, 212, 170, .15);--shadow-card: 0 4px 24px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(0,212,170,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(255,0,110,.06) 0%,transparent 50%),repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(0,212,170,.02) 50px,rgba(0,212,170,.02) 51px),repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(0,212,170,.02) 50px,rgba(0,212,170,.02) 51px);pointer-events:none;z-index:-1}#app{padding:1rem 2rem;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding-bottom:1rem;border-bottom:1px solid var(--border-color);flex-shrink:0}.header h1{font-family:var(--font-mono);font-size:1.75rem;font-weight:700;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem;text-shadow:0 0 30px rgba(0,212,170,.4)}.header .subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:400}.canvas{flex:1;position:relative;margin-top:1rem;min-height:700px;overflow:visible}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}.draggable-card{position:absolute;z-index:1;transition:box-shadow .2s ease,border-color .2s ease}.draggable-card:hover{border-color:var(--accent-cyan-dim)}.draggable-card.dragging{z-index:1000;border-color:var(--accent-cyan);box-shadow:var(--shadow-card),0 0 30px #00d4aa66;cursor:grabbing}.card-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);cursor:grab;-webkit-user-select:none;user-select:none}.card-header:active{cursor:grabbing}.card-header h2{font-family:var(--font-mono);font-size:.85rem;font-weight:600;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.08em}.drag-icon{color:var(--text-dim);font-size:1rem;letter-spacing:2px;opacity:.5;transition:opacity .2s ease,color .2s ease}.card-header:hover .drag-icon{opacity:1;color:var(--accent-cyan)}.card-content{padding:1rem}#card-control{width:320px}#card-plot{width:680px}.plot-card-content{position:relative;padding:.5rem}#plot{width:100%;height:500px;cursor:move!important;-webkit-user-select:none;user-select:none}#plot.dragging{cursor:grabbing!important}.plot-hint{position:absolute;bottom:.75rem;right:1rem;font-family:var(--font-mono);font-size:.7rem;color:var(--accent-cyan);background:var(--bg-secondary);padding:.3rem .6rem;border-radius:6px;border:1px solid var(--border-color);pointer-events:none;z-index:10}#card-plot.plot-active{border-color:var(--accent-cyan);box-shadow:var(--shadow-card),0 0 20px #00d4aa4d}#card-plot.plot-active .plot-hint{background:var(--accent-cyan);color:var(--bg-primary);border-color:var(--accent-cyan)}#card-values{width:240px}.computed-values{background:var(--bg-secondary);border-radius:8px;padding:.75rem}.value-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-color)}.value-row:last-child{border-bottom:none}.value-row .label{font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary)}.value-row .value{font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--accent-cyan)}.value-row .value.region-cutoff{color:var(--accent-red)}.value-row .value.region-triode{color:var(--accent-orange)}.value-row .value.region-saturation{color:var(--accent-green)}.region-indicator{margin-top:1rem}.region-bar{display:flex;border-radius:6px;overflow:hidden;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}.region-section{flex:1;padding:.5rem .25rem;text-align:center;background:var(--bg-secondary);color:var(--text-dim);transition:all .2s ease;border:1px solid var(--border-color)}.region-section:first-child{border-radius:6px 0 0 6px}.region-section:last-child{border-radius:0 6px 6px 0}.region-section.active{font-weight:600}.region-section.active[data-region=cutoff]{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}.region-section.active[data-region=triode]{background:var(--accent-orange);color:var(--bg-primary);border-color:var(--accent-orange)}.region-section.active[data-region=saturation]{background:var(--accent-green);color:var(--bg-primary);border-color:var(--accent-green)}.input-section{margin-bottom:1.25rem}.input-section h3{font-size:.7rem;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}.toggle-group{display:flex;gap:.5rem}.toggle-btn{flex:1;padding:.5rem;font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease}.toggle-btn:hover{border-color:var(--accent-cyan-dim);color:var(--text-primary)}.toggle-btn.active{background:var(--accent-cyan);border-color:var(--accent-cyan);color:var(--bg-primary);font-weight:600}.toggle-btn.active:hover{background:var(--accent-cyan-dim);border-color:var(--accent-cyan-dim)}.toggle-btn[data-value=pmos].active{background:#e74c3c;border-color:#e74c3c}.toggle-btn[data-value=pmos].active:hover{background:#c0392b;border-color:#c0392b}.toggle-btn[data-value=depletion].active{background:var(--accent-purple);border-color:var(--accent-purple)}.toggle-btn[data-value=depletion].active:hover{background:#8e44ad;border-color:#8e44ad}.input-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}.input-group label{font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--text-secondary);min-width:45px}.has-tooltip{position:relative;cursor:help;border-bottom:1px dotted var(--text-dim)}.has-tooltip:hover{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan)}.tooltip{position:absolute;left:0;bottom:calc(100% + 10px);width:220px;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--accent-cyan);border-radius:8px;font-family:var(--font-sans);font-size:.75rem;font-weight:400;line-height:1.5;color:var(--text-primary);box-shadow:0 4px 20px #00000080,0 0 15px #00d4aa33;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:1000;pointer-events:none}.tooltip-wide{width:280px}.has-tooltip:hover .tooltip{opacity:1;visibility:visible;transform:translateY(0)}.tooltip:after{content:"";position:absolute;left:20px;bottom:-6px;width:10px;height:10px;background:var(--bg-tertiary);border-right:1px solid var(--accent-cyan);border-bottom:1px solid var(--accent-cyan);transform:rotate(45deg)}.tooltip strong{color:var(--accent-cyan);font-weight:600}.tooltip em{color:var(--accent-orange);font-style:normal}.tooltip code{font-family:var(--font-mono);background:var(--bg-secondary);padding:.1rem .3rem;border-radius:3px;font-size:.7rem;color:var(--accent-orange)}.computed-values .has-tooltip .tooltip{left:auto;right:0}.computed-values .has-tooltip .tooltip:after{left:auto;right:20px}.input-wrap{flex:1;display:grid;grid-template-columns:1fr auto;gap:.25rem;align-items:center}.input-group input[type=number]{width:100%;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:.5rem .6rem;font-family:var(--font-mono);font-size:.9rem;color:var(--text-primary);outline:none;transition:all .2s ease}.input-group input[type=number]:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px var(--border-glow)}.input-group input[type=number]:hover:not(:focus){border-color:var(--accent-cyan-dim)}.spin-btns{display:grid;grid-template-rows:repeat(2,1fr);gap:2px}.spin-btns .spin{width:28px;height:20px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-family:var(--font-mono);font-size:.65rem;border-radius:4px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.spin-btns .spin:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.spin-btns .spin:active{background:var(--bg-tertiary)}.input-group .unit{font-family:var(--font-mono);font-size:.8rem;color:var(--text-dim);min-width:20px}.info-panel{margin-top:1rem;background:var(--bg-secondary);border-radius:8px;padding:.75rem;font-size:.8rem;color:var(--text-secondary);line-height:1.6}.info-panel h4{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.info-panel p{font-size:.75rem}.info-panel ul{list-style:none;padding-left:0;font-size:.75rem}.info-panel li{position:relative;padding-left:1rem;margin-bottom:.25rem}.info-panel li:before{content:"›";position:absolute;left:0;color:var(--accent-cyan);font-weight:700}.info-panel code{font-family:var(--font-mono);background:var(--bg-tertiary);padding:.1rem .3rem;border-radius:4px;font-size:.7rem;color:var(--accent-orange)}.footer{text-align:center;padding:1rem 0;border-top:1px solid var(--border-color);font-size:.75rem;color:var(--text-dim);flex-shrink:0}@media(max-width:1200px){.canvas{min-height:1400px}#card-control{left:20px!important;top:20px!important}#card-plot{left:20px!important;top:520px!important;width:calc(100% - 280px);max-width:700px}#card-values{left:auto!important;right:20px;top:20px!important}}@media(max-width:900px){.canvas{min-height:1600px}.draggable-card{position:relative!important;left:0!important;top:0!important;right:auto!important;width:100%!important;max-width:none!important;margin-bottom:1rem}#plot{height:400px}}@media(max-width:500px){#app{padding:.75rem}.header h1{font-size:1.3rem}#plot{height:350px}.card-content{padding:.75rem}}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.draggable-card img{pointer-events:none}