*{margin:0;padding:0;box-sizing:border-box}body{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:linear-gradient(135deg,#1a1a2e,#16213e);color:#e0e0e0;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#16213e}::-webkit-scrollbar-thumb{background:#0f4c75;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#3282b8}.container{max-width:1400px;margin:0 auto;padding:20px;position:relative}.header{text-align:center;padding:30px 0;background:linear-gradient(135deg,#0f4c75,#3282b8);border-radius:15px;margin-bottom:30px;box-shadow:0 10px 30px #0000004d}.header-branding{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;padding:8px 14px;border-radius:999px;border:1px solid rgba(187,225,250,.35);background:#0003}.header-logo{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.header-author{margin:0;text-align:left;font-size:.95rem;font-weight:700;color:#fff;letter-spacing:.03em}.header-studio{margin:2px 0 0;text-align:left;font-size:.78rem;color:#bbe1fa;opacity:.95;letter-spacing:.08em;text-transform:uppercase}.header h1{font-size:2.5rem;color:#bbe1fa;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.1rem;color:#e0e0e0;opacity:.9}.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.card{background:#16213ecc;border-radius:15px;padding:25px;box-shadow:0 8px 20px #0000004d;border:1px solid rgba(50,130,184,.3);transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #3282b866}.card h2{color:#bbe1fa;margin-bottom:20px;font-size:1.8rem;border-bottom:2px solid #0f4c75;padding-bottom:10px}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;color:#bbe1fa;font-weight:600;font-size:1rem}.input-group input,.input-group select{width:100%;padding:12px 15px;background:#0f4c7580;border:2px solid rgba(50,130,184,.5);border-radius:8px;color:#e0e0e0;font-size:1.1rem;transition:all .3s ease}.input-group input:focus,.input-group select:focus{outline:none;border-color:#3282b8;background:#0f4c75cc;box-shadow:0 0 15px #3282b84d}.binary-display{background:#0f4c754d;padding:20px;border-radius:10px;margin:15px 0;font-family:Courier New,monospace;border:1px solid rgba(50,130,184,.5)}.binary-row{display:flex;justify-content:space-between;margin:10px 0;align-items:center}.binary-label{color:#bbe1fa;font-weight:600;min-width:120px;font-size:.95rem}.binary-value{display:flex;gap:8px;font-size:1.1rem;flex:1;justify-content:flex-end}.octet{display:flex;gap:3px;background:#0000004d;padding:8px;border-radius:5px;border:1px solid rgba(50,130,184,.3)}.bit{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:700;transition:all .2s ease}.bit.network{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;box-shadow:0 2px 5px #2ecc7166}.bit.host{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;box-shadow:0 2px 5px #3498db66}.bit.zero{background:#ffffff1a;color:#999}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:20px}.info-item{background:#0f4c754d;padding:15px;border-radius:8px;border:1px solid rgba(50,130,184,.3);transition:all .3s ease}.info-item:hover{background:#0f4c7580;border-color:#3282b8}.info-label{color:#bbe1fa;font-size:.9rem;margin-bottom:5px;font-weight:600}.info-value{color:#fff;font-size:1.2rem;font-weight:700;font-family:Courier New,monospace}.explanation-box{background:linear-gradient(135deg,#2ecc711a,#27ae601a);border-left:4px solid #2ecc71;padding:20px;border-radius:8px;margin:20px 0}.explanation-box h3{color:#2ecc71;margin-bottom:10px;font-size:1.3rem}.explanation-box p{color:#e0e0e0;line-height:1.6;margin-bottom:10px}.explanation-box ul{margin-left:20px;color:#e0e0e0;line-height:1.8}.subnet-visualizer{margin-top:20px}.subnet-range{background:#3498db33;border:2px solid #3498db;border-radius:8px;padding:15px;margin:10px 0;transition:all .3s ease}.subnet-range:hover{background:#3498db4d;box-shadow:0 5px 15px #3498db4d}.subnet-header{color:#3498db;font-weight:700;font-size:1.1rem;margin-bottom:10px}.subnet-info{display:flex;justify-content:space-between;margin:5px 0;font-family:Courier New,monospace}.class-badge{display:inline-block;padding:8px 15px;border-radius:20px;font-weight:700;font-size:1.1rem;margin:10px 0}.class-a{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px 10px #e74c3c66}.class-b{background:linear-gradient(135deg,#f39c12,#d68910);color:#fff;box-shadow:0 4px 10px #f39c1266}.class-c{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;box-shadow:0 4px 10px #3498db66}.class-d{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff;box-shadow:0 4px 10px #9b59b666}.class-e{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff;box-shadow:0 4px 10px #95a5a666}.warning-box{background:#f39c121a;border-left:4px solid #f39c12;padding:15px;border-radius:8px;margin:15px 0}.warning-box p{color:#f39c12;font-weight:600}.error-box{background:#e74c3c1a;border-left:4px solid #e74c3c;padding:15px;border-radius:8px;margin:15px 0}.error-box p{color:#e74c3c;font-weight:600}@media (max-width: 1200px){.main-grid{grid-template-columns:1fr}}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid rgba(50,130,184,.3)}.tab{padding:12px 24px;background:transparent;border:none;color:#bbe1fa;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;border-bottom:3px solid transparent}.tab:hover{background:#3282b833;color:#fff}.tab.active{color:#3282b8;border-bottom-color:#3282b8}.brand-watermark{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:.14;z-index:5}.brand-watermark img{width:38px;height:38px;object-fit:contain}.brand-watermark span{font-size:.72rem;color:#dceeff;letter-spacing:.12em;font-weight:700;text-transform:uppercase;white-space:nowrap}.brand-footer{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:12px;border:1px solid rgba(50,130,184,.25);background:#0f4c7538}.brand-footer img{width:28px;height:28px;object-fit:contain}.brand-footer p{margin:0;font-size:.88rem;font-weight:600;color:#bbe1fa;letter-spacing:.03em}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse{animation:pulse 2s ease-in-out infinite}@media (max-width: 768px){.header-branding{width:100%;border-radius:14px;justify-content:center;padding:10px}.header-logo{width:44px;height:44px}.header-author,.header-studio{text-align:center}.brand-footer{flex-direction:column;text-align:center}.brand-watermark{right:10px;bottom:10px;opacity:.1}.brand-watermark span{display:none}}