:root{--bg:#0A1628;--s1:#0F1F38;--s2:#13294A;--blue:#2F7BFF;--teal:#14B8A6;--gold:#C9A45C;--tx:#E6EDF7;--mu:#8A9BB5;--ln:rgba(255,255,255,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Vazirmatn',sans-serif;
background-image:linear-gradient(rgba(47,123,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,123,255,.05) 1px,transparent 1px),linear-gradient(rgba(47,123,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(47,123,255,.025) 1px,transparent 1px);
background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.mono{font-family:'JetBrains Mono',monospace;direction:ltr;unicode-bidi:isolate}
.card{position:relative;background:var(--s1);border:1px solid var(--ln);border-radius:12px;transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:rgba(47,123,255,.5);box-shadow:0 0 0 4px rgba(47,123,255,.06)}
.brk::before,.brk::after{content:'';position:absolute;width:14px;height:14px;border-color:var(--blue);opacity:.7}
.brk::before{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid;border-top-right-radius:12px}
.brk::after{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:12px}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.draw path,.draw line,.draw polyline{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.spin{animation:spin 30s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes spin{to{transform:rotate(360deg)}}
input,select,textarea{background:var(--bg);border:1px solid var(--ln);color:var(--tx);border-radius:8px;padding:.6rem .8rem;width:100%;font-family:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type=range]{padding:0;accent-color:var(--blue)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal)}
.btn{padding:.7rem 1.4rem;border-radius:8px;font-weight:600;transition:all .2s;border:1px solid var(--blue)}
.btnp{background:var(--blue);color:#fff}.btnp:hover{background:#4a8dff}
.btno{color:var(--tx)}.btno:hover{background:var(--blue)}
.gold{border-color:var(--gold)!important}
.navlink{position:relative;color:var(--mu);transition:color .2s}
.navlink.act,.navlink:hover{color:var(--tx)}
.navlink.act::after{content:'';position:absolute;bottom:-6px;right:0;left:0;height:1px;background:var(--blue)}
.tile{border:1px solid var(--ln);border-radius:10px;padding:.7rem;background:var(--bg);transition:all .2s;text-align:center;font-size:.85rem}
.tile.on{border-color:var(--blue);background:rgba(47,123,255,.1);color:#fff}
.bar{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--teal))}
.origin{opacity:0;transition:opacity .3s}.logo-wrap:hover .origin{opacity:1}
@media print{body{background:#fff}}