:root{--bg-dark: #0a0a0f;--bg-card: rgba(255, 255, 255, .03);--bg-card-hover: rgba(255, 255, 255, .07);--bg-glass: rgba(10, 10, 15, .7);--primary: #00f2ff;--primary-glow: rgba(0, 242, 255, .3);--secondary: #7000ff;--secondary-glow: rgba(112, 0, 255, .3);--accent: #ff0055;--text-main: #ffffff;--text-muted: #a0a0b0;--text-dim: #606070;--border-light: rgba(255, 255, 255, .1);--border-glow: rgba(255, 255, 255, .2);--space-xs: .5rem;--space-sm: 1rem;--space-md: 2rem;--space-lg: 4rem;--space-xl: 8rem;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--transition-fast: .2s ease;--transition-smooth: .4s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-main);line-height:1.7;font-size:17px;overflow-x:hidden;background-image:radial-gradient(circle at 10% 20%,rgba(112,0,255,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(0,242,255,.1) 0%,transparent 40%);background-attachment:fixed}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;letter-spacing:-.02em}h1{font-size:3.5rem;background:linear-gradient(to right,#fff,#a0a0b0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}h2{font-size:2.5rem;margin-bottom:var(--space-sm)}h3{font-size:1.75rem;margin-bottom:var(--space-xs);color:var(--primary)}p{margin-bottom:var(--space-sm);color:var(--text-muted);max-width:70ch}a{color:var(--primary);text-decoration:none;transition:var(--transition-fast)}a:hover{text-shadow:0 0 10px var(--primary-glow)}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}h1{font-size:2.5rem}h2{font-size:2rem}}.app-shell{display:flex;min-height:100vh}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:99px;font-weight:600;cursor:pointer;transition:var(--transition-fast);border:none;font-size:1rem}.btn-primary{background:var(--primary);color:#000;box-shadow:0 0 20px var(--primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px var(--primary-glow)}.btn-glass{background:#ffffff1a;color:#fff;border:1px solid var(--border-light);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-glass:hover{background:#fff3;border-color:#fff}.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:var(--space-md);transition:var(--transition-smooth);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0;transition:var(--transition-fast)}.card:hover{background:var(--bg-card-hover);transform:translateY(-5px);border-color:var(--border-glow);box-shadow:0 10px 40px -10px #00000080}.card:hover:before{opacity:1}.panel-solid{background:#0a0a0fe6;border:1px solid rgba(255,255,255,.08)}.icon-box{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#ffffff0d;margin-bottom:var(--space-sm);color:var(--primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .6s ease-out forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.sidebar{background:#0a0a0f99;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--border-light);display:flex;flex-direction:column;transition:width var(--transition-smooth),transform var(--transition-smooth);height:100vh;position:fixed;left:0;top:0;z-index:50}.sidebar.open{width:280px;transform:translate(0)}.sidebar.closed{width:80px;transform:translate(-100%)}.sidebar-header{padding:var(--space-sm);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-light);height:70px}.nav-list{flex:1;overflow-y:auto;padding:var(--space-sm);list-style:none}.nav-item{display:flex;align-items:center;padding:12px;margin-bottom:4px;border-radius:12px;color:var(--text-muted);transition:var(--transition-fast);white-space:nowrap;overflow:hidden}.nav-item:hover{background:#ffffff0d;color:var(--text-main)}.nav-item.active{background:#00f2ff1a;color:var(--primary);box-shadow:0 0 15px #00f2ff1a}.nav-icon{min-width:24px;display:flex;justify-content:center}.nav-label{margin-left:12px;font-weight:500;opacity:1;transition:opacity var(--transition-fast)}.sidebar.closed .nav-label{opacity:0;width:0}.lang-toggle{margin:var(--space-sm);padding:12px;background:#ffffff0d;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;transition:var(--transition-fast);color:var(--text-muted)}.lang-toggle:hover{background:#ffffff1a;border-color:var(--border-light);color:var(--text-main)}.main-content{margin-left:280px;transition:margin-left var(--transition-smooth);min-height:100vh;padding:var(--space-md)}.sidebar.closed+.main-content{margin-left:80px}.sidebar-backdrop{position:fixed;inset:0;background:#0009;z-index:40;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--bg-card);border:1px solid var(--border-light);transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:3px;background-color:var(--text-muted);transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:var(--primary);border-color:var(--primary)}input:checked+.toggle-slider:before{transform:translate(22px);background-color:#000}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;margin-bottom:1rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.topbar-title{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.5px}.topbar-breadcrumb{display:flex;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.95rem}.topbar-actions{display:flex;align-items:center;gap:.75rem}.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-light);background:#ffffff0f;color:var(--text-main);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:rgba(0,242,255,.2);touch-action:manipulation}.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px #00f2ff26;outline:none}.icon-btn:active{transform:scale(.95);background:#ffffff1a}.pill{display:inline-flex;align-items:center;gap:.35rem;background:#ffffff14;border:1px solid var(--border-light);padding:.35rem .65rem;border-radius:999px;font-size:.85rem;color:var(--text-main)}.pill-accent{border-color:var(--accent);color:var(--accent)}.pill-success{border-color:#00ff9d;color:#00ff9d}.section{margin-bottom:3rem}.section-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border-light);padding-bottom:1rem}.section-title{display:flex;align-items:center;gap:.75rem}.section-subtitle{color:var(--text-muted);font-size:1.1rem}.list-clean{list-style:none;padding:0;margin:0}.cta-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;margin-top:.5rem}.checklist{display:flex;flex-direction:column;gap:.5rem}.checklist-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:#ffffff08;border:1px solid var(--border-light);border-radius:10px;cursor:pointer;transition:var(--transition-fast);text-align:left;width:100%}.checklist-item:hover,.checklist-item:focus-visible{border-color:var(--primary);background:#00f2ff0d}.checklist-item .circle{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;color:#000;background:transparent;margin-top:1px}.checklist-item.completed{border-color:#00ff9d80;background:#00ff9d14}.checklist-item.completed .circle{background:#00ff9d;border-color:#00ff9d}.badge-grid{display:flex;flex-wrap:wrap;gap:.5rem}.quiz-options{display:grid;gap:.6rem}.quiz-option{width:100%;text-align:left;padding:.75rem .9rem;background:#ffffff0a;border:1px solid var(--border-light);border-radius:12px;color:var(--text-main);cursor:pointer;transition:var(--transition-fast)}.quiz-option:hover,.quiz-option:focus-visible{border-color:var(--primary);outline:none}.quiz-option.correct{border-color:#00ff9d;background:#00ff9d14}.quiz-option.wrong{border-color:var(--accent);background:#ff005514}.alert{padding:var(--space-sm);border-radius:12px;border-left:4px solid;margin-bottom:var(--space-md);background:#ffffff0d;display:flex;gap:var(--space-sm)}.alert-info{border-color:var(--primary);background:#00f2ff0d}.alert-success{border-color:#00ff9d;background:#00ff9d0d}.alert-warning{border-color:#fc0;background:#ffcc000d}.alert-danger{border-color:var(--accent);background:#ff00550d}.alert-content h3{font-size:1.1rem;margin-bottom:.25rem;color:var(--text-main)}.alert-content p{margin-bottom:0;font-size:.95rem}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:var(--space-sm)}.sidebar.closed+.main-content{margin-left:0}.container{padding:0 var(--space-sm)}}@media(max-width:768px){.topbar{padding:.5rem .25rem;gap:.25rem}.topbar-title{font-size:.95rem;flex:1;min-width:0;overflow:hidden}.topbar-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{gap:.35rem;flex-shrink:0}.icon-btn{width:32px;height:32px;position:relative}.icon-btn:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}}.progress-bar-container{display:flex;align-items:center;gap:.75rem}.progress-bar{flex:1;height:8px;background:#ffffff1a;border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#00ff9d);border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px var(--primary-glow)}.progress-bar-label{font-size:.9rem;font-weight:600;color:var(--primary);min-width:3rem;text-align:right}.progress-card{margin-bottom:2rem}.progress-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.next-topic-card{border-left:4px solid #00ff9d}.nav-item.completed .nav-label{color:#00ff9d}.stack-card{text-align:center;transition:transform .2s ease,border-color .2s ease}.stack-card:hover{transform:translateY(-4px);border-color:var(--primary)!important}.stack-icon{width:56px;height:56px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#00f2ff1a;border-radius:12px}.recommended-badge{display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#00f2ff26,#00ff9d26);border:1px solid rgba(0,255,157,.4);color:#00ff9d;font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem}.recommended-badge:before{content:"✓";font-size:.75rem}.card-recommended{border-color:#00ff9d66!important;background:linear-gradient(135deg,#00f2ff08,#00ff9d08)!important}.viz-container{margin:1.5rem 0;overflow:hidden}.viz-title{color:var(--primary);margin-bottom:1rem;text-align:center;font-size:1.1rem}.viz-content{display:flex;justify-content:center;align-items:center;gap:.5rem;min-height:120px;position:relative}.viz-node{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-light);min-width:70px;text-align:center}.viz-node-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#00f2ff1a}.viz-node-label{font-size:.75rem;color:var(--text-muted);white-space:nowrap}.viz-connection{display:flex;align-items:center;position:relative;height:4px;min-width:40px;background:var(--border-light);border-radius:2px}.viz-connection.encrypted{background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 0 10px var(--primary-glow);height:8px;border-radius:4px}.viz-connection-xs{width:40px}.viz-connection-sm{width:60px}.viz-connection-md{width:80px}.viz-connection-lg{width:100px}.viz-packet{position:absolute;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;top:50%;transform:translateY(-50%)}.viz-packet.visible{background:var(--accent);color:#fff;box-shadow:0 0 8px #ff005580}.viz-packet.encrypted{background:var(--primary);color:var(--bg-dark);box-shadow:0 0 8px var(--primary-glow)}.viz-info-box{position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);background:#000c;padding:.25rem .5rem;border-radius:6px;font-size:.7rem;white-space:nowrap;border:1px solid var(--border-light)}.viz-isp-sees{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-top:.5rem}.viz-isp-sees-label{font-size:.65rem;color:var(--text-dim);display:flex;align-items:center;gap:.25rem}.viz-isp-sees-content{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center}.viz-site-tag{font-size:.6rem;padding:.15rem .4rem;border-radius:4px;background:#f053;color:var(--accent);font-family:monospace}.viz-encrypted-tag{font-size:.6rem;padding:.15rem .4rem;border-radius:4px;background:#00f2ff33;color:var(--primary);display:flex;align-items:center;gap:.2rem}.vpn-viz-wrapper{display:flex;flex-direction:column;gap:2rem;width:100%}.vpn-viz-row{display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;padding:1rem 0}.vpn-viz-label{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:6px;white-space:nowrap}.vpn-viz-label.no-vpn{background:#ff005526;color:var(--accent);border:1px solid rgba(255,0,85,.3)}.vpn-viz-label.with-vpn{background:#00f2ff26;color:var(--primary);border:1px solid rgba(0,242,255,.3)}.mfa-viz-wrapper{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%}.mfa-header{text-align:center;max-width:500px}.mfa-explanation{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.5}.mfa-factors-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;width:100%}.mfa-factor-card{flex:1;min-width:140px;max-width:180px;text-align:center;padding:1.25rem 1rem;border-radius:12px;background:var(--bg-card);border:2px solid var(--border-light);transition:var(--transition-smooth)}.mfa-factor-card.active{background:#ffffff0d}.mfa-factor-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;transition:var(--transition-fast)}.mfa-factor-title{font-size:.85rem;font-weight:600;color:var(--text-main);margin-bottom:.35rem}.mfa-factor-examples{font-size:.75rem;color:var(--text-dim);line-height:1.4}.mfa-result{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:8px;font-size:.85rem}.mfa-result strong{font-weight:700}.mfa-result.weak{background:#ff00551f;color:var(--accent);border:1px solid rgba(255,0,85,.25)}.mfa-result.strong{background:#00ff9d1f;color:#00ff9d;border:1px solid rgba(0,255,157,.25)}.e2e-viz-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.e2e-flow{display:flex;align-items:center;justify-content:center;gap:.5rem}.e2e-message{padding:.5rem .75rem;border-radius:12px;font-size:.8rem;max-width:120px;text-align:center}.e2e-message.readable{background:#00ff9d26;border:1px solid rgba(0,255,157,.3);color:#00ff9d}.e2e-message.encrypted{background:#7000ff26;border:1px solid rgba(112,0,255,.3);color:var(--secondary);font-family:monospace;letter-spacing:1px}.e2e-server-note{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text-dim);padding:.35rem .75rem;background:#0000004d;border-radius:6px}.tracker-viz-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.tracker-header{display:flex;justify-content:center}.tracker-status{display:flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600}.tracker-status.exposed{background:#ff005526;color:var(--accent);border:1px solid rgba(255,0,85,.3)}.tracker-status.protected{background:#00ff9d26;color:#00ff9d;border:1px solid rgba(0,255,157,.3)}.tracker-flow{display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center}.tracker-node{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-light);position:relative}.tracker-node.user{border-color:var(--primary)}.tracker-node-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#00f2ff1a}.tracker-node-label{font-size:.7rem;color:var(--text-muted);white-space:nowrap}.tracker-sites{display:flex;gap:.25rem}.tracker-site-wrapper{display:flex;align-items:center}.tracker-connection{width:24px;height:2px;background:var(--border-light);border-radius:1px}.tracker-eye,.tracker-blocked{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}.tracker-eye{background:#f053;border:1px solid var(--accent)}.tracker-blocked{background:#00ff9d33;border:1px solid #00ff9d}.tracker-profile{display:flex;flex-direction:column;gap:.4rem;padding:.6rem .8rem;border-radius:8px;background:#ff005514;border:1px solid rgba(255,0,85,.2);min-width:100px}.tracker-profile.blocked{background:#00ff9d14;border:1px solid rgba(0,255,157,.2)}.tracker-profile-header{display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:var(--accent)}.tracker-profile.blocked .tracker-profile-header{color:#00ff9d}.tracker-profile-data{display:flex;flex-direction:column;gap:.2rem}.tracker-data-item{font-size:.65rem;color:var(--text-dim);font-family:monospace}.tracker-explanation{font-size:.8rem;color:var(--text-muted);text-align:center;max-width:400px;margin:0;line-height:1.4}.tracker-explainer{background:#0000004d;border:1px solid var(--border-light);border-radius:8px;padding:.75rem;width:100%;max-width:400px}.tracker-explainer-header{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--accent);margin-bottom:.5rem}.tracker-explainer-content p{font-size:.75rem;color:var(--text-muted);margin:0 0 .5rem;line-height:1.5}.tracker-explainer-content.protected p{color:#00ff9d}.tracker-company-list{display:flex;flex-direction:column;gap:.35rem}.tracker-company-label{font-size:.65rem;color:var(--text-dim)}.tracker-company-tags{display:flex;flex-wrap:wrap;gap:.25rem}.tracker-company-tag{font-size:.6rem;padding:.15rem .35rem;background:#ff005526;border-radius:4px;color:var(--accent)}.tracker-profile-enhanced{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#ff005514,#ff005505);border:1px solid rgba(255,0,85,.2);border-radius:10px;min-width:180px;max-width:200px}.tracker-profile-categories{display:flex;flex-direction:column;gap:.5rem}.tracker-profile-category{padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.tracker-profile-category:last-child{border-bottom:none;padding-bottom:0}.tracker-category-source{font-size:.65rem;color:var(--text-muted);font-weight:600;display:block;margin-bottom:.25rem}.tracker-data-points{display:flex;flex-direction:column;gap:.2rem}.tracker-data-point{display:flex;align-items:center;gap:.25rem;font-size:.6rem;color:var(--text-dim)}.tracker-data-type{color:var(--text-muted)}.tracker-data-value{color:var(--accent);font-style:italic}.tracker-profile-summary{display:flex;align-items:center;gap:.35rem;padding-top:.4rem;margin-top:.25rem;border-top:1px dashed rgba(255,0,85,.3);font-size:.6rem;color:var(--accent)}.tracker-blocked-message{font-size:.7rem;color:#00ff9d;margin:0}.tracker-impact{width:100%;max-width:400px;padding:.75rem;background:#ff00550d;border:1px solid rgba(255,0,85,.15);border-radius:8px}.tracker-impact h5{font-size:.8rem;color:var(--text-main);margin:0 0 .5rem}.tracker-impact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem}.tracker-impact-list li{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--text-muted)}.tracker-impact-list li span{flex:1}.phishing-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.phishing-email{background:#0006;border:1px solid var(--border-light);border-radius:10px;overflow:hidden;font-size:.85rem}.phishing-email-header{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:#ffffff08;border-bottom:1px solid var(--border-light);font-size:.75rem;color:var(--text-dim)}.phishing-field{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem .8rem;border-bottom:1px solid rgba(255,255,255,.05);position:relative;border:1px solid transparent;margin:2px;border-radius:4px}.phishing-field-label{font-size:.75rem;color:var(--text-dim);min-width:50px}.phishing-field-value{color:var(--text-main);font-size:.8rem}.phishing-fake{color:var(--accent);font-family:monospace}.phishing-urgent{color:var(--accent);font-weight:600}.phishing-body{padding:.8rem}.phishing-greeting{margin-bottom:.5rem;color:var(--text-main);position:relative}.phishing-text{font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem;line-height:1.4}.phishing-link-wrapper{display:inline-flex;flex-direction:column;gap:.3rem;padding:4px 8px;border-radius:4px;border:1px solid transparent;margin-bottom:.75rem;position:relative}.phishing-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--primary);font-size:.8rem;text-decoration:underline}.phishing-url-reveal{display:flex;flex-direction:column;gap:.15rem;padding:.4rem .5rem;background:#ff00551a;border-radius:4px;border:1px solid rgba(255,0,85,.2)}.phishing-url-label{font-size:.65rem;color:var(--text-dim)}.phishing-url-fake{font-size:.7rem;color:var(--accent);font-family:monospace;word-break:break-all}.phishing-attachment{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;background:#ffffff08;border:1px solid transparent;border-radius:6px;font-size:.75rem;color:var(--text-muted);position:relative}.phishing-flag{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;background:#ff005526;border:1px solid rgba(255,0,85,.3);border-radius:4px;font-size:.7rem;color:var(--accent);white-space:nowrap;margin-left:.5rem}.phishing-flag.inline{margin-left:.75rem}.phishing-legend{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#0003;border-radius:8px}.phishing-legend-title{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--accent)}.phishing-legend-items{display:flex;flex-wrap:wrap;gap:.4rem}.phishing-legend-item{display:flex;align-items:center;gap:.3rem;padding:.25rem .5rem;background:#ffffff08;border:1px solid var(--border-light);border-radius:4px;font-size:.7rem;color:var(--text-muted);transition:var(--transition-fast)}.phishing-legend-item.active{background:#ff00551a;border-color:#ff00554d;color:var(--accent)}.phishing-legend-number{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:#f053;border-radius:50%;font-size:.65rem;font-weight:600}@media(prefers-reduced-motion:reduce){.viz-packet,.viz-node,.mfa-factor-card,.e2e-message,.tracker-node,.tracker-eye,.phishing-flag{animation:none!important;transition:opacity .2s ease!important}}@media(max-width:768px){.viz-content{flex-direction:column;min-height:auto;padding:1rem 0}.vpn-viz-row{flex-wrap:nowrap;padding-left:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.5rem;justify-content:flex-start}.vpn-viz-row::-webkit-scrollbar{display:none}.vpn-viz-label{position:static;transform:none;margin-bottom:.5rem;width:100%;text-align:center}.vpn-viz-wrapper{gap:1rem}.viz-connection,.viz-connection-xs{width:20px;min-width:20px}.viz-connection-sm{width:25px;min-width:25px}.viz-connection-md{width:35px;min-width:35px}.viz-connection-lg{width:45px;min-width:45px}.viz-node{min-width:60px;padding:.5rem}.viz-node-icon{width:32px;height:32px}.viz-node-label{font-size:.65rem}.mfa-factors-row{gap:.75rem}.mfa-factor-card{min-width:100px;max-width:none;padding:1rem .75rem}.mfa-factor-icon-wrapper{width:40px;height:40px}.mfa-factor-title{font-size:.8rem}.mfa-factor-examples{font-size:.7rem}.mfa-explanation{font-size:.85rem}.e2e-flow{flex-wrap:wrap}.tracker-flow{flex-wrap:wrap;gap:.75rem}.tracker-sites{flex-wrap:wrap;justify-content:center}.tracker-profile{min-width:auto}.phishing-field{flex-direction:column;align-items:flex-start}.phishing-flag{margin-left:0;margin-top:.3rem}.phishing-legend-items{flex-direction:column}}.dns-viz-wrapper{display:flex;flex-direction:column;gap:1.5rem;width:100%}.dns-flow{display:flex;align-items:center;justify-content:center;gap:.25rem;overflow-x:auto;padding:1rem 0}.dns-node{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border-light);min-width:70px;text-align:center;transition:var(--transition-fast)}.dns-node.active{transform:scale(1.05)}.dns-node-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#00f2ff1a}.dns-node-label{font-size:.7rem;color:var(--text-muted);white-space:nowrap}.dns-connection{display:flex;align-items:center;position:relative;height:3px;min-width:30px;background:var(--border-light);border-radius:2px}.dns-packet{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.55rem;font-weight:600;top:50%;transform:translateY(-50%)}.dns-packet.query{width:20px;height:20px;background:var(--primary);color:var(--bg-dark);box-shadow:0 0 8px var(--primary-glow)}.dns-packet.response{width:20px;height:20px;background:#00ff9d;color:var(--bg-dark);box-shadow:0 0 8px #00ff9d80}.dns-query-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:#0000004d;border-radius:8px}.dns-query-label{font-size:.75rem;color:var(--text-dim)}.dns-query-text{font-family:monospace;font-size:.85rem;color:var(--primary)}.dns-query-arrow{color:var(--text-dim)}.dns-query-result,.dns-response-text{font-family:monospace;font-size:.85rem;color:#00ff9d}.dns-response-text strong{color:#00ff9d}.dns-connection-line{position:absolute;left:0;right:0;height:2px;background:var(--border-light);top:50%;transform:translateY(-50%)}.dns-steps{display:flex;justify-content:center;gap:.5rem}.dns-step{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-light);font-size:.7rem;color:var(--text-dim);transition:var(--transition-fast)}.dns-step.active{border-color:var(--primary);color:var(--primary);background:#00f2ff1a}.dns-step.done{border-color:#00ff9d;color:var(--bg-dark);background:#00ff9d}.dns-explanation-panel{background:#00f2ff0d;border:1px solid rgba(0,242,255,.2);border-radius:10px;padding:1rem;text-align:center}.dns-step-header{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}.dns-step-number{font-size:.7rem;color:var(--primary);text-transform:uppercase;letter-spacing:1px}.dns-step-title{font-size:1rem;color:var(--text-main);margin:0}.dns-step-desc{font-size:.85rem;color:var(--text-muted);margin:0}.dns-step-detail{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-light)}.dns-step-detail p{font-size:.8rem;color:var(--text-dim);margin:0 0 .5rem;line-height:1.5}.dns-server-role{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;background:#7000ff1a;border-radius:6px;font-size:.75rem;color:var(--secondary);text-align:left}.dns-packet-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.25rem;top:50%;left:50%;transform:translate(-50%,-50%)}.dns-packet-label{font-size:.55rem;padding:.15rem .35rem;background:var(--bg-card);border:1px solid var(--primary);border-radius:4px;color:var(--primary);white-space:nowrap}.dns-technical{margin-top:.5rem;font-size:.75rem;color:var(--text-dim)}.dns-technical summary{cursor:pointer;color:var(--text-muted);padding:.25rem}.dns-technical[open] summary{margin-bottom:.5rem}.dns-technical p{margin:0;padding:.5rem;background:#0003;border-radius:4px;line-height:1.5}.osi-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.osi-stack{display:flex;flex-direction:column;gap:.35rem}.osi-layer{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border-radius:8px;background:var(--bg-card);border:1px solid var(--border-light);transition:var(--transition-fast)}.osi-layer.active{transform:translate(4px)}.osi-layer-num{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.8rem;font-weight:700;color:var(--bg-dark);flex-shrink:0}.osi-layer-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#ffffff0d;flex-shrink:0}.osi-layer-content{flex:1;min-width:0}.osi-layer-info{display:flex;align-items:baseline;gap:.5rem}.osi-layer-name{font-size:.85rem;font-weight:600;color:var(--text-main)}.osi-layer-example{font-size:.7rem;color:var(--text-dim)}.osi-packet{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#00f2ff26;border:1px solid var(--primary);border-radius:4px;font-size:.65rem;color:var(--primary);margin-left:auto;flex-shrink:0}.osi-legend{display:flex;justify-content:center;gap:1rem;padding-top:.5rem;flex-wrap:wrap}.osi-legend-item{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text-muted)}.ports-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%;align-items:center}.ports-building-header{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:#00f2ff1a;border:1px solid var(--primary);border-radius:8px;font-size:.8rem;color:var(--primary)}.ports-building-name{font-weight:600}.ports-ip{font-family:monospace;background:#0000004d;padding:.2rem .5rem;border-radius:4px}.ports-visitor{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#7000ff26;border:1px solid var(--secondary);border-radius:6px;font-size:.8rem;color:var(--secondary)}.ports-visitor-dest{font-family:monospace;font-weight:600;color:var(--primary)}.ports-building{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:400px}.ports-apartment{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--bg-card);border:2px solid var(--border-light);border-radius:8px;transition:var(--transition-fast)}.ports-apartment.active{transform:translate(4px)}.ports-apartment-num{font-size:.75rem;font-weight:700;font-family:monospace;padding:.25rem .5rem;border-radius:4px;color:var(--bg-dark)}.ports-apartment-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center}.ports-apartment-info{flex:1;display:flex;flex-direction:column}.ports-service{font-size:.8rem;font-weight:600;color:var(--text-main)}.ports-desc{font-size:.7rem;color:var(--text-dim)}.ports-resident{font-size:.65rem;padding:.2rem .5rem;background:#00ff9d26;border:1px solid #00ff9d;border-radius:4px;color:#00ff9d}.ports-legend{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.ports-legend-item{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text-muted)}.protocols-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.protocols-toggle{display:flex;justify-content:center;gap:.5rem}.protocols-toggle-btn{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:8px;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:var(--transition-fast)}.protocols-toggle-btn:hover{border-color:var(--primary)}.protocols-toggle-btn.active{background:#00f2ff1a;border-color:var(--primary);color:var(--primary)}.protocols-comparison{display:flex;flex-direction:column;gap:.75rem}.protocols-lane{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:10px}.protocols-lane-header{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600}.protocols-lane.http .protocols-lane-header{color:var(--accent)}.protocols-lane.https .protocols-lane-header,.protocols-lane.tcp .protocols-lane-header{color:#00ff9d}.protocols-lane.udp .protocols-lane-header{color:#ffa94d}.protocols-lane-track{display:flex;align-items:center;gap:.75rem;min-height:40px;position:relative;padding:.5rem;background:#0003;border-radius:6px}.protocols-packet{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.35rem .6rem;border-radius:6px;font-size:.75rem}.protocols-packet.plain{background:#ff005526;border:1px solid var(--accent);color:var(--accent)}.protocols-packet.encrypted{background:#00ff9d26;border:1px solid #00ff9d;color:#00ff9d}.protocols-packet.tcp-packet{width:28px;height:28px;background:#00ff9d26;border:1px solid #00ff9d;color:#00ff9d;font-weight:600}.protocols-packet.udp-packet{width:28px;height:28px;background:#ffa94d26;border:1px solid #ffa94d;color:#ffa94d;font-weight:600}.protocols-packet.udp-packet.lost{opacity:.4;border-style:dashed}.protocols-packets-row{display:flex;gap:.35rem}.protocols-watcher{display:flex;align-items:center;gap:.35rem;font-size:.7rem;margin-left:auto}.protocols-watcher.safe{color:#00ff9d}.protocols-trait{font-size:.7rem;color:var(--text-dim);margin-left:auto}.firewall-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.firewall-zones{display:flex;align-items:center;justify-content:center;gap:.5rem}.firewall-zone{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-light);min-width:80px}.firewall-zone span{font-size:.75rem;color:var(--text-muted)}.firewall-zone.external{border-color:var(--accent)}.firewall-zone.internal{border-color:#00ff9d}.firewall-wall{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(135deg,#7000ff26,#00f2ff26);border:2px solid var(--primary);border-radius:12px}.firewall-rules{display:flex;flex-direction:column;gap:.2rem}.firewall-rule{font-size:.65rem;font-family:monospace;padding:.15rem .4rem;border-radius:4px}.firewall-rule.allow{background:#00ff9d26;color:#00ff9d}.firewall-rule.deny{background:#ff005526;color:var(--accent)}.firewall-packets{display:flex;justify-content:center;align-items:center;min-height:50px;position:relative}.firewall-packet{display:flex;align-items:center;gap:.25rem;padding:.3rem .5rem;border-radius:6px;font-size:.75rem;position:absolute}.firewall-packet.allowed{background:#00ff9d26;border:1px solid #00ff9d;color:#00ff9d}.firewall-packet.blocked{background:#ff005526;border:1px solid var(--accent);color:var(--accent)}.firewall-packet-port{font-family:monospace;font-weight:600}.firewall-checking{font-size:.6rem;color:var(--text-dim);margin-left:.25rem}.firewall-legend{display:flex;justify-content:center;gap:1rem}.firewall-legend-item{display:flex;align-items:center;gap:.35rem;font-size:.75rem}.firewall-legend-item.allowed{color:#00ff9d}.firewall-legend-item.blocked{color:var(--accent)}.tls-viz-wrapper{display:flex;flex-direction:column;gap:1.25rem;width:100%}.tls-endpoints{display:flex;align-items:center;justify-content:center;gap:.5rem}.tls-endpoint{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem 1rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border-light);min-width:80px;transition:var(--transition-fast)}.tls-endpoint span{font-size:.75rem;color:var(--text-muted)}.tls-connection{flex:1;display:flex;align-items:center;justify-content:center;min-width:120px;max-width:200px;position:relative;min-height:50px}.tls-connection-line{position:absolute;left:0;right:0;height:2px;background:var(--border-light);top:50%;transform:translateY(-50%)}.tls-message{display:flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:6px;border:1px solid;font-size:.7rem;position:absolute;white-space:nowrap}.tls-secure-tunnel{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:#00ff9d26;border:1px solid #00ff9d;border-radius:8px;color:#00ff9d;font-size:.75rem;font-weight:600}.tls-steps{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.tls-step{display:flex;align-items:center;gap:.35rem;padding:.4rem .6rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;font-size:.7rem;color:var(--text-dim);transition:var(--transition-fast)}.tls-step.active{border-color:var(--primary);color:var(--primary);background:#00f2ff1a}.tls-step.done{border-color:#00ff9d;color:#00ff9d;background:#00ff9d1a}.tls-step-num{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1a;font-size:.65rem;font-weight:600}.tls-step.active .tls-step-num{background:var(--primary);color:var(--bg-dark)}.tls-step.done .tls-step-num{background:#00ff9d;color:var(--bg-dark)}.tls-step-label{white-space:nowrap}.tls-explanation-panel{background:#00f2ff0d;border:1px solid rgba(0,242,255,.2);border-radius:10px;padding:1rem;text-align:center}.tls-step-header{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}.tls-step-number{font-size:.7rem;color:var(--primary);text-transform:uppercase;letter-spacing:1px}.tls-step-title{font-size:1rem;color:var(--text-main);margin:0}.tls-step-desc{font-size:.85rem;color:var(--text-muted);margin:0}.tls-step-detail{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-light)}.tls-step-detail p{font-size:.8rem;color:var(--text-dim);margin:0 0 .5rem;line-height:1.5}.tls-whats-sent{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;margin-bottom:.5rem}.tls-sent-item{font-size:.65rem;padding:.2rem .4rem;background:#00f2ff1a;border:1px solid rgba(0,242,255,.2);border-radius:4px;color:var(--primary)}.tls-analogy{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem;background:#7000ff1a;border-radius:6px;font-size:.75rem;font-style:italic;color:var(--secondary)}.tls-why-matters{text-align:center;padding:.5rem .75rem;background:#00ff9d0d;border:1px solid rgba(0,255,157,.15);border-radius:6px}.tls-why-matters p{font-size:.75rem;color:var(--text-muted);margin:0;line-height:1.5}.ipv-viz-wrapper{display:flex;flex-direction:column;gap:1rem;width:100%}.ipv-comparison{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.ipv-version{flex:1;min-width:200px;max-width:280px;display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px}.ipv-version.v4{border-color:var(--accent)}.ipv-version.v6{border-color:#00ff9d}.ipv-header{display:flex;align-items:center;gap:.4rem}.ipv-label{font-size:.9rem;font-weight:600}.ipv-version.v4 .ipv-label{color:var(--accent)}.ipv-version.v6 .ipv-label{color:#00ff9d}.ipv-address{display:flex;align-items:center;padding:.5rem .75rem;background:#0000004d;border-radius:6px;font-family:monospace}.ipv-address-text{font-size:.85rem;color:var(--text-main)}.ipv-address-text.v6{font-size:.7rem}.ipv-cursor{color:var(--primary);margin-left:2px}.ipv-divider{display:flex;align-items:center;justify-content:center;padding:0 .5rem;color:var(--text-dim);font-size:.85rem;font-weight:600}.ipv-pool{display:flex;flex-direction:column;gap:.4rem}.ipv-pool-label{font-size:.7rem;color:var(--text-dim)}.ipv-pool-bar{position:relative;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.ipv-pool-fill{height:100%;border-radius:4px;transition:width .5s ease}.ipv-pool-fill.depleted{background:linear-gradient(90deg,var(--accent),#ff6b6b)}.ipv-pool-fill.unlimited{background:linear-gradient(90deg,#00ff9d,var(--primary))}.ipv-pool-infinite{position:absolute;right:4px;top:50%;transform:translateY(-50%)}.ipv-pool-status{display:flex;align-items:center;gap:.25rem;font-size:.7rem}.ipv-pool-status.depleted{color:var(--accent)}.ipv-pool-status.unlimited{color:#00ff9d}@media(max-width:768px){.dns-flow{flex-wrap:wrap;gap:.5rem}.dns-node{min-width:60px;padding:.5rem}.dns-node-icon{width:28px;height:28px}.dns-node-label{font-size:.6rem}.dns-connection{min-width:20px}.osi-layer{padding:.5rem}.osi-layer-num{width:24px;height:24px;font-size:.7rem}.osi-layer-icon{width:28px;height:28px}.osi-layer-name{font-size:.8rem}.osi-packet{display:none}.ports-building{min-width:auto;width:100%}.ports-floor{flex-wrap:wrap;justify-content:center}.ports-apartment{min-width:70px}.protocols-toggle-btn{padding:.4rem .75rem;font-size:.75rem}.protocols-lane{padding:.5rem}.firewall-zones{flex-wrap:wrap;gap:.75rem}.firewall-zone{min-width:70px}.firewall-wall{order:-1;width:100%}.firewall-rules{flex-direction:row;gap:.4rem}.tls-endpoints{flex-wrap:wrap;gap:.75rem}.tls-connection{order:3;width:100%;min-height:60px}.tls-steps{gap:.35rem}.tls-step{padding:.3rem .5rem;font-size:.65rem}.tls-step-label{display:none}.ipv-comparison{flex-direction:column;align-items:center}.ipv-version{max-width:100%;width:100%}.ipv-divider{display:none}.ipv-address-text{font-size:.75rem}.ipv-address-text.v6{font-size:.6rem}}@supports (-webkit-touch-callout: none){body{background-attachment:scroll}.sidebar,.topbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.card,.btn-glass{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.animation-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem;margin-top:1rem;background:#0003;border-radius:10px;border:1px solid var(--border-light)}.animation-controls.disabled{opacity:.5;pointer-events:none}.animation-control-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border-light);background:#ffffff0d;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast)}.animation-control-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:#00f2ff1a}.animation-control-btn:active:not(:disabled){transform:scale(.95)}.animation-control-btn:disabled{opacity:.4;cursor:not-allowed}.animation-control-btn.play-pause{width:36px;height:36px;border-radius:50%;margin-left:.5rem}.animation-control-btn.play-pause:hover:not(:disabled){background:#00f2ff26;box-shadow:0 0 10px var(--primary-glow)}.animation-step-dots{display:flex;align-items:center;gap:.4rem}.animation-step-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--border-light);background:transparent;cursor:pointer;transition:var(--transition-fast);padding:0}.animation-step-dot:hover:not(:disabled){border-color:var(--primary);transform:scale(1.2)}.animation-step-dot.active{border-color:var(--primary);background:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.animation-step-dot.done{border-color:#00ff9d;background:#00ff9d}.animation-step-dot:disabled{cursor:not-allowed}@media(max-width:768px){.animation-controls{gap:.5rem;padding:.5rem}.animation-control-btn{width:28px;height:28px}.animation-control-btn.play-pause{width:32px;height:32px}.animation-step-dot{width:8px;height:8px}}