@import"https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@500;600;700&family=Noto+Naskh+Arabic:wght@500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg: #0a0e1c;--bg-deep: #0f172a;--bg-card: rgba(255,255,255,.05);--bg-hover: rgba(255,255,255,.09);--border: rgba(255,255,255,.08);--border-strong: rgba(255,255,255,.18);--text: #f2f4fb;--text-muted: #8f98b2;--primary: #7c3aed;--secondary: #6366f1;--accent: #22d3ee;--accent-dim: #0891b2;--grad: linear-gradient(135deg, #7c3aed, #0891b2);--grad-soft: linear-gradient(135deg, rgba(124,58,237,.22), rgba(8,145,178,.18));--success: #34d399;--danger: #f87171;--warning: #fbbf24;--radius-sm: 10px;--radius: 16px;--radius-lg: 24px;--shadow: 0 4px 24px rgba(0,0,0,.45);--shadow-lg: 0 18px 60px rgba(0,0,0,.55);--font-head: "Noto Kufi Arabic", "Noto Naskh Arabic", system-ui, sans-serif;--font-body: "Noto Sans Arabic", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}.glow{position:fixed;inset:-30% -20% auto -20%;height:75vh;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 70% 0%,rgba(124,58,237,.3),transparent 58%),radial-gradient(ellipse at 25% 8%,rgba(34,211,238,.16),transparent 55%)}h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.01em;line-height:1.35}p{color:var(--text)}a{color:var(--accent)}code,.mono{font-family:var(--font-mono)}.section{max-width:1180px;margin:0 auto;padding:4rem 1.5rem;position:relative;z-index:1}.section-head{margin-bottom:2.25rem}.section-head .eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:#22d3ee1a;border:1px solid rgba(34,211,238,.25);border-radius:999px;padding:.25rem .8rem;margin-bottom:.9rem}.section-head h2{font-size:clamp(1.5rem,3.4vw,2.25rem);margin-bottom:.6rem}.section-head p{color:var(--text-muted);max-width:680px;font-size:1.02rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.grid{display:grid;gap:1.1rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:999px;font-family:var(--font-body);font-size:.92rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px #7c3aed59}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 42px #7c3aed80}.btn-ghost{border:1.5px solid var(--border-strong);color:var(--text);background:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);transform:translateY(-2px)}.btn-sm{padding:.45rem 1rem;font-size:.82rem}.btn-icon{padding:.55rem;width:40px;height:40px;border-radius:50%}.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;padding:.2rem .65rem;border-radius:999px;background:#7c3aed2e;color:#c4b5fd;border:1px solid rgba(124,58,237,.32)}.badge.cyan{background:#22d3ee1f;color:var(--accent);border-color:#22d3ee4d}.badge.green{background:#34d3991f;color:var(--success);border-color:#34d3994d}.badge.amber{background:#fbbf241f;color:var(--warning);border-color:#fbbf244d}.badge.gray{background:#ffffff0f;color:var(--text-muted);border-color:var(--border)}.tabs{display:inline-flex;gap:.3rem;background:#ffffff0a;border:1px solid var(--border);border-radius:999px;padding:.3rem;flex-wrap:wrap}.tab{padding:.5rem 1.15rem;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer;color:var(--text-muted);background:transparent;border:none;font-family:var(--font-body);transition:all .2s ease}.tab:hover{color:var(--text);background:var(--bg-hover)}.tab.active{background:var(--grad);color:#fff}.navbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.75rem;height:64px;background:#0a0e1cd1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.05rem}.nav-brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;box-shadow:0 6px 20px #7c3aed66}.nav-brand small{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:400;color:var(--text-muted);letter-spacing:.06em}.nav-links{display:flex;gap:.35rem}.nav-link{color:var(--text-muted);font-size:.88rem;font-weight:500;cursor:pointer;background:none;border:none;font-family:var(--font-body);padding:.4rem .8rem;border-radius:999px;transition:color .2s,background .2s}.nav-link:hover,.nav-link.active{color:var(--text);background:var(--bg-hover)}.nav-cta{display:flex;align-items:center;gap:.6rem}.hero{position:relative;z-index:1;padding:4.5rem 1.5rem 2rem;text-align:center}.hero-inner{max-width:860px;margin:0 auto}.hero h1{font-size:clamp(1.85rem,5.2vw,3.2rem);font-weight:700;line-height:1.28;margin-bottom:1.1rem}.hero h1 .grad-text{background:linear-gradient(120deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p.lead{color:var(--text-muted);font-size:clamp(1rem,2vw,1.15rem);max-width:660px;margin:0 auto 1.9rem}.hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.hero-stats{display:flex;gap:2.25rem;justify-content:center;flex-wrap:wrap;margin-top:2.75rem}.hero-stats .stat{text-align:center}.hero-stats .stat b{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--text)}.hero-stats .stat span{font-size:.78rem;color:var(--text-muted);letter-spacing:.04em}.sim{background:linear-gradient(180deg,#ffffff0e,#ffffff05);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg);overflow:hidden}.sim-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.35rem;border-bottom:1px solid var(--border);background:#0000002e}.sim-title{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.02rem}.sim-title .dot-live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 #22d3ee99;animation:pulse 2s infinite}.sim-controls{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.sim-stage{position:relative;width:100%;aspect-ratio:1000 / 430;background:radial-gradient(ellipse at 50% 50%,rgba(124,58,237,.1),transparent 70%);overflow:hidden}.stage-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px}.topo-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.link{stroke:#ffffff29;stroke-width:2.5;stroke-linecap:round;transition:stroke .35s ease,stroke-width .35s ease}.link.active{stroke:url(#linkGrad);stroke-width:4;filter:drop-shadow(0 0 8px rgba(34,211,238,.6))}.link.dim{stroke:#ffffff12}.node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:74px;height:74px;border-radius:20px;cursor:pointer;background:#0f172aeb;border:1.5px solid var(--border-strong);color:var(--text-muted);transition:all .3s ease}.node:hover{transform:translate(-50%,-50%) translateY(-4px);color:var(--text);border-color:var(--accent)}.node.active{color:#fff;border-color:var(--accent);background:linear-gradient(140deg,#7c3aed8c,#0891b273);box-shadow:0 0 0 6px #22d3ee1a,0 16px 44px #22d3ee47;transform:translate(-50%,-50%) scale(1.06)}.node-meta{position:absolute;top:100%;margin-top:.55rem;text-align:center;white-space:nowrap;transform:translate(0)}.node-meta b{display:block;font-size:.8rem;font-weight:600;color:var(--text)}.node-meta span{font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted);direction:ltr;display:block}.packet{position:absolute;transform:translate(-50%,-50%);z-index:5;display:grid;place-items:center;min-width:54px;padding:.28rem .55rem;border-radius:999px;font-size:.68rem;font-weight:700;font-family:var(--font-mono);background:var(--grad);color:#fff;box-shadow:0 8px 26px #7c3aed99;transition:left .85s cubic-bezier(.45,.05,.35,1),top .85s cubic-bezier(.45,.05,.35,1),opacity .3s;direction:ltr}.packet.cyan{background:linear-gradient(135deg,#0891b2,#22d3ee);box-shadow:0 8px 26px #22d3ee8c}.packet.amber{background:linear-gradient(135deg,#b45309,#fbbf24);box-shadow:0 8px 26px #fbbf2480}.packet.ghost{opacity:0}.step-rail{display:flex;gap:.4rem;padding:.85rem 1.35rem;overflow-x:auto;border-bottom:1px solid var(--border);background:#0000001f}.step-chip{flex:0 0 auto;display:flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:999px;font-size:.76rem;font-weight:600;font-family:var(--font-body);white-space:nowrap;cursor:pointer;background:#ffffff0d;border:1px solid var(--border);color:var(--text-muted);transition:all .2s ease}.step-chip:hover{color:var(--text);background:var(--bg-hover)}.step-chip.done{color:var(--success);border-color:#34d39959;background:#34d39914}.step-chip.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 20px #7c3aed66}.step-chip i{font-family:var(--font-mono);font-style:normal;font-size:.7rem;opacity:.8}.sim-body{display:grid;grid-template-columns:1.15fr .85fr}.sim-narr{padding:1.35rem;border-inline-end:1px solid var(--border)}.narr-step{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;flex-wrap:wrap}.narr-step .num{font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:#fff;background:var(--grad);border-radius:8px;padding:.12rem .45rem}.sim-narr h3{font-size:1.15rem;margin-bottom:.55rem}.sim-narr p{color:var(--text-muted);font-size:.95rem}.narr-tip{margin-top:1rem;padding:.8rem 1rem;border-radius:var(--radius-sm);background:#22d3ee12;border:1px solid rgba(34,211,238,.22);font-size:.87rem;color:#b8e8f5}.narr-tip b{color:var(--accent)}.sim-capture{padding:1.1rem 1.35rem;background:#0003}.sim-capture h4{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.7rem}.cap-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.72rem;direction:ltr}.cap-table th{text-align:left;color:var(--text-muted);font-weight:600;padding:.3rem .4rem;border-bottom:1px solid var(--border);font-size:.68rem;letter-spacing:.05em}.cap-table td{padding:.38rem .4rem;border-bottom:1px solid rgba(255,255,255,.045);color:#cfd6e8;vertical-align:top}.cap-table tr.new td{animation:rowIn .45s ease}.cap-table tr:hover td{background:#ffffff0a}.cap-empty{font-size:.82rem;color:var(--text-muted);font-family:var(--font-body);padding:.8rem 0}.proto-tag{padding:.05rem .35rem;border-radius:5px;font-size:.66rem;font-weight:700;background:#7c3aed33;color:#c4b5fd}.proto-tag.dns{background:#fbbf2429;color:var(--warning)}.proto-tag.tcp{background:#22d3ee24;color:var(--accent)}.proto-tag.arp{background:#94a3b82e;color:#cbd5e1}.proto-tag.http{background:#34d39929;color:var(--success)}.lesson-wrap{display:grid;grid-template-columns:260px 1fr;gap:1.25rem;align-items:start}.lesson-nav{display:flex;flex-direction:column;gap:.4rem}.lesson-nav button{display:flex;align-items:center;gap:.6rem;text-align:start;padding:.65rem .85rem;border-radius:var(--radius-sm);cursor:pointer;background:transparent;border:1px solid transparent;color:var(--text-muted);font-family:var(--font-body);font-size:.88rem;font-weight:500;transition:all .2s ease}.lesson-nav button:hover{background:var(--bg-hover);color:var(--text)}.lesson-nav button.active{background:var(--grad-soft);border-color:#7c3aed4d;color:var(--text);font-weight:600}.lesson-body{padding:1.6rem}.lesson-body h3{font-size:1.3rem;margin-bottom:.15rem}.lesson-body .lesson-sub{color:var(--text-muted);font-size:.85rem;margin-bottom:1.1rem}.lesson-body p+p{margin-top:.85rem}.lesson-body p{font-size:.96rem;color:#dfe3ee}.lesson-body h4{margin:1.3rem 0 .5rem;font-size:1rem;color:var(--accent)}.kv-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.6rem}.kv-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:#dfe3ee}.kv-list li svg{flex:0 0 auto;margin-top:.38rem;color:var(--accent)}.analogy{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:var(--radius-sm);background:#7c3aed1a;border:1px solid rgba(124,58,237,.28);font-size:.92rem}.analogy b{color:#c4b5fd}.layers{display:flex;flex-direction:column;gap:.6rem}.layer-row{display:grid;grid-template-columns:46px 1fr auto;gap:1rem;align-items:center;padding:.9rem 1.1rem;border-radius:var(--radius);cursor:pointer;text-align:start;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);transition:all .22s ease}.layer-row:hover{transform:translate(-4px);border-color:var(--border-strong);background:var(--bg-hover)}.layer-row.open{border-color:#22d3ee66;background:var(--grad-soft)}.layer-row .idx{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#ffffff0d;font-family:var(--font-mono);font-weight:700;color:var(--accent)}.layer-row .lay-main b{display:block;font-family:var(--font-head);font-size:1rem}.layer-row .lay-main span{font-size:.8rem;color:var(--text-muted)}.layer-detail{padding:0 1.1rem 1.1rem;font-size:.92rem;color:#dfe3ee}.layer-detail .chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}.subnet-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.25rem;align-items:start}.field-row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:end}label.lbl{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--text-muted);letter-spacing:.04em}input.inp,select.inp{width:100%;padding:.7rem .9rem;border-radius:var(--radius-sm);background:#ffffff0f;border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s;direction:ltr}input.inp:focus,select.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed38}input.inp.err{border-color:var(--danger)}.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}.chip{padding:.3rem .7rem;border-radius:999px;font-family:var(--font-mono);font-size:.76rem;background:#ffffff0f;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .2s}.chip:hover{color:var(--accent);border-color:#22d3ee66}.err-msg{color:var(--danger);font-size:.82rem;margin-top:.5rem}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}.result-cell{padding:.7rem .85rem;border-radius:var(--radius-sm);background:#ffffff0b;border:1px solid var(--border)}.result-cell span{display:block;font-size:.72rem;color:var(--text-muted);margin-bottom:.15rem}.result-cell b{font-family:var(--font-mono);font-size:.92rem;color:var(--accent);direction:ltr;display:block;word-break:break-all}.bin-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;direction:ltr}.bin-octet{font-family:var(--font-mono);font-size:.8rem;padding:.45rem .6rem;border-radius:8px;background:#0000004d;border:1px solid var(--border)}.bin-octet .net{color:#a78bfa;font-weight:700}.bin-octet .host{color:var(--accent);font-weight:700}.legend{display:flex;gap:1rem;margin-top:.6rem;font-size:.78rem;color:var(--text-muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:.35rem}.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}.quiz-progress{flex:1;height:6px;border-radius:999px;background:#ffffff14;overflow:hidden;min-width:140px}.quiz-progress i{display:block;height:100%;background:var(--grad);transition:width .4s ease}.q-opt{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;padding:.8rem 1rem;margin-top:.55rem;border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0a;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:.94rem;transition:all .18s ease}.q-opt:hover:not(:disabled){border-color:var(--primary);background:var(--bg-hover);transform:translateY(-2px)}.q-opt:disabled{cursor:default}.q-opt .key{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#ffffff12;font-family:var(--font-mono);font-size:.78rem;flex:0 0 auto}.q-opt.correct{border-color:#34d39999;background:#34d3991a}.q-opt.wrong{border-color:#f871718c;background:#f8717117}.q-feedback{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;animation:fadeUp .3s ease}.q-feedback.ok{background:#34d3991a;border:1px solid rgba(52,211,153,.3)}.q-feedback.no{background:#f8717117;border:1px solid rgba(248,113,113,.3)}.score-ring{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;margin:0 auto 1rem;font-family:var(--font-head);font-size:1.7rem;background:var(--grad);color:#fff}.road-item{display:flex;gap:1rem;align-items:flex-start}.road-num{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:var(--grad);color:#fff;font-family:var(--font-mono);font-weight:700}.road-item b{display:block;font-family:var(--font-head);font-size:.98rem;margin-bottom:.2rem}.road-item p{font-size:.88rem;color:var(--text-muted)}.footer{border-top:1px solid var(--border);margin-top:3rem;padding:2.25rem 1.5rem 2.75rem;position:relative;z-index:1;background:#00000038}.footer-inner{max-width:1180px;margin:0 auto;display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;align-items:center}.footer p{color:var(--text-muted);font-size:.84rem}.footer .warn{font-size:.8rem;color:var(--warning);max-width:560px}.toast-wrap{position:fixed;bottom:1.25rem;inset-inline-start:1.5rem;z-index:100;display:flex;flex-direction:column;gap:.5rem}.toast{padding:.7rem 1.15rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lg);animation:fadeUp .3s ease}.toast.success{background:#34d39929;border:1px solid rgba(52,211,153,.35);color:var(--success)}.toast.error{background:#f8717129;border:1px solid rgba(248,113,113,.35);color:var(--danger)}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes rowIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:none}}@keyframes pulse{0%{box-shadow:0 0 #22d3ee8c}70%{box-shadow:0 0 0 12px #22d3ee00}to{box-shadow:0 0 #22d3ee00}}@keyframes dash{to{stroke-dashoffset:-60}}.fade-up{animation:fadeUp .55s ease both}.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}@media (max-width: 980px){.sim-body{grid-template-columns:1fr}.sim-narr{border-inline-end:none;border-bottom:1px solid var(--border)}.lesson-wrap{grid-template-columns:1fr}.lesson-nav{flex-direction:row;overflow-x:auto;padding-bottom:.3rem}.lesson-nav button{white-space:nowrap}.subnet-grid{grid-template-columns:1fr}}@media (max-width: 700px){.nav-links{display:none}.navbar{padding:0 1rem}.section{padding:2.75rem 1rem}.node{width:56px;height:56px;border-radius:16px}.node-meta b{font-size:.68rem}.node-meta span{font-size:.58rem}.packet{min-width:44px;font-size:.6rem;padding:.2rem .4rem}.hero{padding:3rem 1rem 1.5rem}.hero-stats{gap:1.25rem}.sim-head{padding:.85rem 1rem}.step-rail,.sim-narr,.sim-capture{padding-inline:1rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.node.tone-amber:not(.active){color:var(--warning)}.node.tone-green:not(.active){color:var(--success)}.node.tone-cyan:not(.active){color:var(--accent)}.node.tone-violet:not(.active){color:#a78bfa}.mobile-menu{position:absolute;top:64px;inset-inline:0;z-index:40;display:flex;flex-direction:column;gap:.2rem;padding:.6rem;background:#0a0e1cf7;border-bottom:1px solid var(--border);animation:fadeUp .22s ease}.mobile-menu .nav-link{text-align:start;padding:.6rem .8rem}@media (min-width: 701px){.mobile-menu{display:none}}@media (max-width: 700px){.nav-cta .btn-icon{display:inline-flex}}@media (min-width: 701px){.nav-cta .btn-icon{display:none}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#22d3ee);border:none;padding:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 10px #00000080}button.result-cell{border:1px solid var(--border);font-family:var(--font-body);color:var(--text);transition:all .18s ease}button.result-cell:hover{transform:translateY(-2px);border-color:var(--accent);background:#22d3ee12}