:root{--nv-bg:#03130f;--nv-panel:rgba(7,24,19,.88);--nv-line:rgba(28,216,151,.17);--nv-neon:#16e5a5;--nv-text:#e9fff6;--nv-muted:#9abbb0}main{position:relative;z-index:1}body{background-color:var(--nv-bg)!important;background-image:linear-gradient(rgba(27,155,110,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,155,110,.06) 1px,transparent 1px),radial-gradient(ellipse at 50% -10%,#0b3528 0,transparent 52rem)!important;background-size:30px 30px,30px 30px,auto!important;color:var(--nv-text)!important}.nv-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.panel,.hero,.card,.table{background:linear-gradient(145deg,rgba(9,34,26,.94),rgba(4,17,13,.92))!important;border-color:var(--nv-line)!important;border-radius:13px;box-shadow:0 12px 35px rgba(0,0,0,.24),inset 0 1px rgba(113,255,199,.035)}.card:hover{border-color:var(--nv-neon)!important;box-shadow:0 0 24px rgba(22,229,165,.13),0 12px 35px rgba(0,0,0,.25)!important}.mark{border-color:var(--nv-neon)!important;color:var(--nv-neon)!important;border-radius:50%;box-shadow:0 0 18px rgba(22,229,165,.28)}.brand small,.eyebrow,.arrow,.back{color:var(--nv-neon)!important}.button,.copy,.filebtn,.filter,.lang,.rustops-lang{border-color:rgba(22,229,165,.25)!important;background:rgba(5,32,23,.9)!important;border-radius:8px!important}.button:hover,.copy:hover,.filter.active,.filter:hover{border-color:var(--nv-neon)!important;box-shadow:0 0 12px rgba(22,229,165,.15)}.search,.editor,.drop textarea,.tools input,.fields input,.field input,.hex,.copy-row{background:rgba(1,12,9,.88)!important;border-color:rgba(22,229,165,.16)!important;color:var(--nv-text)!important;border-radius:8px!important}.preview,.canvas{border-color:rgba(22,229,165,.32)!important}.tag{color:#032017!important;background:var(--nv-neon)!important;border-color:var(--nv-neon)!important;border-radius:99px!important;font-weight:800}.hero h1,.hero h1 b,h1 b{color:var(--nv-text)!important;text-shadow:0 0 20px rgba(22,229,165,.12)}.number{color:var(--nv-neon)!important}.picker{border-color:var(--nv-neon)!important}.hue{filter:saturate(1.15)}

.button.primary{background:var(--nv-neon)!important;border-color:var(--nv-neon)!important;color:#032017!important;font-weight:800}.button.primary:hover{background:#66f3c7!important}

.back{display:inline-flex!important;align-items:center!important;min-height:32px!important;margin:20px 0 16px!important;padding:0 12px!important;border:1px solid rgba(22,229,165,.28)!important;border-radius:6px!important;background:rgba(5,32,23,.86)!important;color:var(--nv-neon)!important;font:700 12px/1 Consolas,monospace!important;letter-spacing:.03em!important;text-decoration:none!important;transition:border-color .15s,box-shadow .15s,background .15s}.back:hover{border-color:var(--nv-neon)!important;background:rgba(8,48,34,.94)!important;box-shadow:0 0 13px rgba(22,229,165,.16)!important}

/* Shared Vault scrollbar styling for page and overflow containers. */
*{scrollbar-width:thin;scrollbar-color:#16e5a5 #061b13}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#061b13;border:1px solid rgba(22,229,165,.12);border-radius:99px}*::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#0c7a58,#16e5a5);border:2px solid #061b13;border-radius:99px}*::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#16e5a5,#7affd0)}*::-webkit-scrollbar-corner{background:#061b13}

/* Global visual refresh: heavier type, centred focus and subtle depth. */
html{scroll-behavior:smooth}body{font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif!important;font-weight:500;letter-spacing:.005em;overflow-x:hidden}body:before,body:after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(1px);opacity:.55}body:before{width:42rem;height:42rem;top:-26rem;left:-18rem;background:radial-gradient(circle,rgba(22,229,165,.13),transparent 68%);animation:nv-drift-a 16s ease-in-out infinite alternate}body:after{width:34rem;height:34rem;right:-18rem;bottom:-20rem;background:radial-gradient(circle,rgba(41,135,255,.08),transparent 70%);animation:nv-drift-b 19s ease-in-out infinite alternate}main{width:min(1280px,calc(100% - 40px));margin-inline:auto;animation:nv-page-in .55s cubic-bezier(.2,.8,.2,1) both}.hero{position:relative;overflow:hidden;isolation:isolate}.hero:after{content:"";position:absolute;z-index:-1;inset:auto -12% -85% 25%;height:180px;background:radial-gradient(ellipse,rgba(22,229,165,.15),transparent 70%);filter:blur(12px)}.hero h1,h1{font-weight:850!important;letter-spacing:-.045em!important;line-height:1.02}.hero h2,h2{font-weight:780!important;letter-spacing:-.025em}.hero h3,h3{font-weight:750!important}.hero p,p{font-weight:500}.card,.panel,.hero,.table{backdrop-filter:blur(10px);transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease}.card{position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 20%,rgba(159,255,218,.075) 48%,transparent 72%);transform:translateX(-120%);transition:transform .65s ease}.card:hover{transform:translateY(-5px) scale(1.008)!important;box-shadow:0 0 0 1px rgba(22,229,165,.17),0 22px 46px rgba(0,0,0,.34),0 0 34px rgba(22,229,165,.11)!important}.card:hover:before{transform:translateX(120%)}.button,.copy,.filebtn,.filter,.lang,.rustops-lang,.left>nav button,.output>nav button{font-weight:750!important;letter-spacing:.01em;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}.button:hover,.copy:hover,.filebtn:hover,.filter:hover{transform:translateY(-2px)}input,textarea,select{font-family:inherit!important;font-weight:600!important;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}input:focus,textarea:focus,select:focus{outline:0!important;border-color:var(--nv-neon)!important;box-shadow:0 0 0 3px rgba(22,229,165,.1),0 0 18px rgba(22,229,165,.08)!important}.role-groups,.tool-category{animation:nv-rise .52s cubic-bezier(.2,.8,.2,1) both}.role-group,.tool-category{animation:nv-rise .55s cubic-bezier(.2,.8,.2,1) both}.role-group:nth-child(2){animation-delay:.07s}.role-group:nth-child(3){animation-delay:.14s}@keyframes nv-page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes nv-rise{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}@keyframes nv-drift-a{to{transform:translate(13vw,8vh) scale(1.08)}}@keyframes nv-drift-b{to{transform:translate(-10vw,-7vh) scale(1.13)}}@media(min-width:760px){body:has(.role-groups) .hero{max-width:980px;margin-inline:auto;text-align:center}body:has(.role-groups) .hero p{margin-inline:auto}body:has(.role-groups) .top{max-width:1180px;margin-inline:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.card:hover{transform:none!important}}

/* Centred animated role landing. */
body:has(.role-landing) main{display:flex;flex-direction:column;min-height:100vh;width:min(1360px,calc(100% - 48px))!important}body:has(.role-landing) .top{width:100%;max-width:1240px;margin:0 auto}body:has(.role-landing) .hero{max-width:1020px;margin:clamp(48px,9vh,110px) auto clamp(28px,5vh,56px)!important;padding:clamp(28px,5vw,62px)!important;text-align:center!important;background:radial-gradient(ellipse at center,rgba(10,55,40,.48),rgba(3,19,14,.12) 68%)!important;border-color:rgba(22,229,165,.16)!important}body:has(.role-landing) .hero h1{font-size:clamp(42px,6.1vw,78px)!important;max-width:920px;margin-inline:auto!important;background:linear-gradient(110deg,#effff8 12%,#87f7cb 55%,#eafff4 88%);-webkit-background-clip:text;background-clip:text;color:transparent!important;background-size:210% 100%;animation:nv-title-shimmer 7s linear infinite}body:has(.role-landing) .hero p{max-width:700px;margin:18px auto 0!important;font-size:clamp(15px,1.35vw,18px)}body:has(.role-landing) .role-landing{width:100%;max-width:1240px;margin:0 auto auto!important;padding:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}body:has(.role-landing) .role-tile{min-height:330px!important;padding:30px!important;border:1px solid rgba(22,229,165,.3)!important;background:linear-gradient(150deg,rgba(12,58,43,.88),rgba(2,19,14,.96))!important;animation:nv-role-float 5.4s ease-in-out infinite alternate;isolation:isolate}body:has(.role-landing) .role-tile:nth-child(2){animation-delay:-1.8s;background:linear-gradient(150deg,rgba(10,47,42,.9),rgba(3,15,18,.96))!important}body:has(.role-landing) .role-tile:nth-child(3){animation-delay:-3.2s;background:linear-gradient(150deg,rgba(22,55,34,.88),rgba(4,19,12,.96))!important}body:has(.role-landing) .role-tile:after{content:"";position:absolute;z-index:-1;width:210px;height:210px;right:-85px;bottom:-100px;border:1px solid rgba(102,243,199,.26);border-radius:50%;box-shadow:0 0 0 22px rgba(22,229,165,.025),0 0 0 45px rgba(22,229,165,.018);animation:nv-orbit 9s linear infinite}body:has(.role-landing) .role-tile:hover{transform:translateY(-12px) scale(1.025)!important;box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 45px rgba(22,229,165,.2)!important}body:has(.role-landing) .role-tile h2{font-size:clamp(29px,2.7vw,40px)!important;transition:transform .24s ease}body:has(.role-landing) .role-tile:hover h2{transform:translateX(6px)}body:has(.role-landing) .role-no{display:inline-flex;width:max-content;padding:7px 10px;border:1px solid rgba(22,229,165,.32);border-radius:99px;background:rgba(2,25,18,.55);box-shadow:0 0 18px rgba(22,229,165,.1)}body:has(.role-landing) .role-arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(22,229,165,.35);border-radius:50%;background:rgba(4,37,27,.75);transition:transform .22s ease,background .22s ease}body:has(.role-landing) .role-tile:hover .role-arrow{transform:translateX(10px) rotate(-8deg);background:var(--nv-neon);color:#032017}@keyframes nv-role-float{to{transform:translateY(-8px)}}@keyframes nv-orbit{to{transform:rotate(360deg)}}@keyframes nv-title-shimmer{to{background-position:210% 0}}@media(max-width:840px){body:has(.role-landing) main{width:min(100% - 24px,1360px)!important}body:has(.role-landing) .role-landing{grid-template-columns:1fr!important;max-width:620px}body:has(.role-landing) .role-tile{min-height:235px!important}body:has(.role-landing) .hero{margin-top:38px!important}}

body:has(.role-landing) .role-tile{display:grid!important;grid-template-rows:auto auto minmax(54px,1fr) auto!important;justify-content:initial!important}body:has(.role-landing) .role-no{margin:0 0 46px!important}body:has(.role-landing) .role-tile h2{margin:0 0 10px!important;align-self:start}body:has(.role-landing) .role-tile p{min-height:54px;margin:0!important}body:has(.role-landing) .role-arrow{margin-top:24px!important}

/* Keep the titles aligned without making the cards feel mechanically rigid. */
body:has(.role-landing) .role-tile{display:flex!important;justify-content:flex-start!important}body:has(.role-landing) .role-no{margin:0 0 44px!important}body:has(.role-landing) .role-tile h2{min-height:48px;margin:0 0 10px!important}body:has(.role-landing) .role-tile p{min-height:54px;margin:0!important}body:has(.role-landing) .role-arrow{margin-top:auto!important}body:has(.role-landing) .role-tile:before{z-index:0!important;inset:-35%!important;background:linear-gradient(112deg,transparent 36%,rgba(146,255,212,.18) 48%,rgba(22,229,165,.07) 53%,transparent 64%)!important;transform:translateX(-62%) rotate(5deg)!important;animation:nv-role-sweep 7.5s ease-in-out infinite!important;pointer-events:none}body:has(.role-landing) .role-tile>*{z-index:1}@keyframes nv-role-sweep{0%,24%{transform:translateX(-62%) rotate(5deg)}56%,100%{transform:translateX(62%) rotate(5deg)}}

/* Compact vault-inspired landing: controlled panels instead of oversized cards. */
body:has(.role-landing) main{width:min(1020px,calc(100% - 32px))!important;min-height:100vh!important;padding-top:26px!important}body:has(.role-landing) .top{max-width:100%!important}body:has(.role-landing) .hero{max-width:100%!important;margin:42px auto 16px!important;padding:28px 32px!important;text-align:left!important;border:1px solid rgba(22,229,165,.18)!important;border-radius:13px!important;background:linear-gradient(118deg,rgba(8,38,28,.86),rgba(3,18,13,.82))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}body:has(.role-landing) .hero:after{inset:auto -5% -120% 38%!important;opacity:.55}body:has(.role-landing) .hero h1{max-width:none!important;margin:8px 0 7px!important;font-size:clamp(34px,4.6vw,54px)!important;text-align:left!important;background:none!important;-webkit-text-fill-color:var(--nv-text)!important;color:var(--nv-text)!important;animation:none!important}body:has(.role-landing) .hero p{max-width:720px!important;margin:0!important;font-size:14px!important;text-align:left!important}.role-landing{max-width:100%!important;gap:14px!important;padding:22px!important;border:1px solid rgba(22,229,165,.13);border-radius:13px;background:rgba(3,14,11,.76);box-shadow:0 14px 34px rgba(0,0,0,.18)}body:has(.role-landing) .role-tile{min-height:230px!important;padding:22px!important;border-color:rgba(22,229,165,.18)!important;border-radius:11px!important;background:linear-gradient(145deg,rgba(5,23,17,.98),rgba(3,15,12,.98))!important;animation:none!important;transform:none!important;box-shadow:none!important}body:has(.role-landing) .role-tile:nth-child(2),body:has(.role-landing) .role-tile:nth-child(3){background:linear-gradient(145deg,rgba(5,23,17,.98),rgba(3,15,12,.98))!important}body:has(.role-landing) .role-tile:after{display:none!important}body:has(.role-landing) .role-tile:before{inset:0!important;z-index:0!important;opacity:.78;background:linear-gradient(112deg,transparent 34%,rgba(66,255,188,.14) 48%,transparent 62%)!important;transform:translateX(-120%)!important;animation:nv-role-sweep-compact 8s ease-in-out infinite!important}body:has(.role-landing) .role-tile:nth-child(2):before{animation-delay:-2.6s!important}body:has(.role-landing) .role-tile:nth-child(3):before{animation-delay:-5.2s!important}body:has(.role-landing) .role-tile:hover{transform:translateY(-4px)!important;border-color:rgba(22,229,165,.55)!important;box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 22px rgba(22,229,165,.09)!important}body:has(.role-landing) .role-no{margin:0 0 34px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font-size:10px!important}body:has(.role-landing) .role-tile h2{min-height:42px!important;margin:0 0 8px!important;font-size:29px!important;line-height:1.08!important}body:has(.role-landing) .role-tile p{min-height:46px!important;font-size:14px!important;line-height:1.45!important}body:has(.role-landing) .role-arrow{display:inline!important;width:auto!important;height:auto!important;margin-top:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:24px!important}body:has(.role-landing) .role-tile:hover .role-arrow{transform:translateX(6px)!important;background:transparent!important;color:var(--nv-neon)!important}@keyframes nv-role-sweep-compact{0%,35%{transform:translateX(-120%)}62%,100%{transform:translateX(120%)}}@media(max-width:840px){body:has(.role-landing) main{width:min(100% - 20px,1020px)!important}body:has(.role-landing) .hero{margin-top:26px!important;padding:23px!important}.role-landing{padding:14px!important}}

/* Two-level layout inspired by the compact NV tools hierarchy. */
body:has(.role-landing) .hero{margin:36px auto 14px!important;padding:26px 28px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important}body:has(.role-landing) .hero .eyebrow{display:inline-flex;padding:8px 11px;border:1px solid rgba(22,229,165,.22);border-radius:8px;background:rgba(8,47,34,.55);font-size:10px!important}body:has(.role-landing) .hero h1{margin:18px 0 7px!important;font-size:clamp(28px,3.3vw,39px)!important;letter-spacing:-.025em!important}body:has(.role-landing) .hero p{font-size:13px!important}.role-landing{position:relative!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;margin-top:0!important;padding:160px 38px 36px!important;overflow:hidden;border-color:rgba(22,229,165,.18)!important;background:linear-gradient(160deg,rgba(3,13,10,.98),rgba(2,11,9,.96))!important}.role-landing:before{content:'RUSTOPS TOOLS';position:absolute;top:48px;left:0;right:0;color:var(--nv-neon);font:850 clamp(36px,5vw,58px)/1 "Segoe UI Variable",Arial,sans-serif;letter-spacing:-.055em;text-align:center;text-shadow:0 0 28px rgba(22,229,165,.2);animation:nv-tools-glow 4.5s ease-in-out infinite alternate}.role-landing:after{content:'Choose your area and open the tools built for your work.';position:absolute;top:112px;left:0;right:0;color:var(--nv-muted);font-size:14px;text-align:center}.role-landing .role-tile{min-height:238px!important;padding:26px!important;background:linear-gradient(145deg,rgba(5,19,15,.98),rgba(2,11,9,.98))!important}.role-landing .role-tile h2{font-size:26px!important}.role-landing .role-no{display:grid!important;place-items:center;width:48px;height:48px;margin:0 0 28px!important;border:1px solid rgba(22,229,165,.22)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(11,69,49,.85),rgba(4,33,24,.92))!important;font-size:9px!important}.role-landing .role-tile:hover .role-no{box-shadow:0 0 22px rgba(22,229,165,.2)}@keyframes nv-tools-glow{to{text-shadow:0 0 40px rgba(22,229,165,.42)}}@media(max-width:840px){.role-landing{grid-template-columns:1fr!important;padding:130px 16px 16px!important}.role-landing:before{top:38px;font-size:38px}.role-landing:after{top:86px;padding:0 20px;font-size:12px}}

@media(min-width:841px){.role-landing:has(.role-tile:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))!important}.role-landing:has(.role-tile:nth-child(4)) .role-tile{min-height:210px!important}}

/* Four compact role cards – no decorative title behind the content. */
.role-landing,.role-landing:has(.role-tile:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))!important;padding:18px!important}.role-landing:before,.role-landing:after{display:none!important}.role-landing .role-tile,.role-landing:has(.role-tile:nth-child(4)) .role-tile{min-height:178px!important;padding:20px!important}.role-landing .role-no{width:38px!important;height:38px!important;margin:0 0 20px!important;font-size:8px!important}.role-landing .role-tile h2{min-height:34px!important;margin:0 0 6px!important;font-size:22px!important}.role-landing .role-tile p{min-height:40px!important;font-size:12px!important}.role-landing .role-arrow{font-size:20px!important}@media(max-width:920px){.role-landing,.role-landing:has(.role-tile:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:540px){.role-landing,.role-landing:has(.role-tile:nth-child(4)){grid-template-columns:1fr!important}.role-landing .role-tile{min-height:165px!important}}

body:has(.role-landing) .role-landing .role-tile:before{opacity:1!important;animation-duration:var(--role-sweep-duration,10s)!important;animation-delay:var(--role-sweep-delay,0s)!important}

body:has(.role-landing) .role-landing .role-tile:before{animation:none!important;opacity:0!important}body:has(.role-landing) .role-landing .role-tile>.random-sweep{position:absolute!important;z-index:0!important;inset:-35%!important;display:block!important;pointer-events:none;background:linear-gradient(112deg,transparent 40%,rgba(133,255,206,.34) 48%,rgba(22,229,165,.12) 53%,transparent 61%);transform:translateX(-120%) rotate(5deg);filter:blur(.2px)}@keyframes rustops-random-sweep{0%{transform:translateX(-120%) rotate(5deg)}100%{transform:translateX(120%) rotate(5deg)}}

/* Tool cards use only the independently scheduled overlay below. The old :before
   sweep was fixed at 8s with child delays, so it made the developer view look
   deterministic even while the random scheduler was running. */
body.role-tools-page .tool:before{animation:none!important;opacity:0!important}
body.role-tools-page .tool>.random-sweep{position:absolute!important;z-index:0!important;inset:-35%!important;display:block!important;pointer-events:none;background:linear-gradient(112deg,transparent 40%,rgba(133,255,206,.33) 48%,rgba(22,229,165,.13) 53%,transparent 61%);transform:translateX(-120%) rotate(5deg);filter:blur(.2px)}

/* Matching compact layout for the selected role and its tools. */
body.role-tools-page main{width:min(1020px,calc(100% - 32px))!important;padding-top:26px!important}body.role-tools-page .top{padding-bottom:18px;border-bottom:1px solid rgba(22,229,165,.14)}body.role-tools-page .back{margin:22px 0 14px!important}body.role-tools-page .hero{margin:0 0 14px!important;padding:25px 28px!important;text-align:left!important;border:1px solid rgba(22,229,165,.18)!important;border-radius:13px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}body.role-tools-page .hero .eyebrow{display:inline-flex;padding:8px 11px;border:1px solid rgba(22,229,165,.22);border-radius:8px;background:rgba(8,47,34,.55);font-size:10px!important}body.role-tools-page .hero h1{margin:17px 0 7px!important;font-size:clamp(28px,3.3vw,39px)!important;letter-spacing:-.025em!important;text-align:left!important}body.role-tools-page .hero p{max-width:720px!important;margin:0!important;font-size:13px!important;text-align:left!important}body.role-tools-page .tools{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:14px!important;margin-top:0!important;padding:18px!important;border:1px solid rgba(22,229,165,.13);border-radius:13px;background:rgba(3,14,11,.76)}body.role-tools-page .tool{position:relative;min-height:190px!important;padding:21px!important;overflow:hidden;border-color:rgba(22,229,165,.18)!important;border-radius:11px!important;background:linear-gradient(145deg,rgba(5,19,15,.98),rgba(2,11,9,.98))!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}body.role-tools-page .tool:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(112deg,transparent 34%,rgba(66,255,188,.13) 48%,transparent 62%);transform:translateX(-120%);animation:nv-role-sweep-compact 8s ease-in-out infinite}body.role-tools-page .tool:nth-child(2):before{animation-delay:-2.5s}body.role-tools-page .tool:nth-child(3):before{animation-delay:-5s}body.role-tools-page .tool>*{position:relative;z-index:1}body.role-tools-page .tool:hover{transform:translateY(-4px)!important;border-color:rgba(22,229,165,.55)!important;box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 22px rgba(22,229,165,.09)!important}body.role-tools-page .tool h2{margin:16px 0 7px!important;font-size:22px!important;line-height:1.1!important}body.role-tools-page .tool p{font-size:12px!important;line-height:1.45!important}body.role-tools-page .tool .arrow{font-size:20px!important}@media(max-width:620px){body.role-tools-page main{width:min(100% - 20px,1020px)!important}body.role-tools-page .hero{padding:22px!important}body.role-tools-page .tools{grid-template-columns:1fr!important;padding:14px!important}}

/* Shared treatment for the real tool workspaces. */

/* Final sweep layer: this must follow the compact card rules above. */
body.role-tools-page .tool:before{animation:none!important;opacity:0!important}
body.role-tools-page .tool>.random-sweep{z-index:2!important;opacity:1!important;mix-blend-mode:screen}
body.role-tools-page .tool>*:not(.random-sweep){position:relative!important;z-index:3!important}

/* Automatic light sweeps removed by request. */
.random-sweep{display:none!important;animation:none!important}

/* Number fields stay part of the RustOps UI instead of exposing browser-native
   spinner buttons, which differ between Chrome, Firefox and operating systems. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Legacy quantity controls use the same quiet vertical arrow treatment. */
body:has(#target) .target{grid-template-columns:minmax(0,1fr) 20px!important;grid-template-rows:22px 22px!important;gap:0!important}body:has(#target) .target>#target{grid-column:1;grid-row:1/3}body:has(#target) .target .step,body:has(#explosives) .quantity button,.stepper button[data-step]{display:grid!important;place-items:center!important;width:18px!important;height:18px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--nv-neon)!important;font:900 10px/1 Arial!important;text-shadow:0 0 7px rgba(22,229,165,.45)!important;box-shadow:none!important;cursor:pointer!important}body:has(#target) .target .step:hover,body:has(#explosives) .quantity button:hover,.stepper button[data-step]:hover{color:#a8ffe0!important;transform:scale(1.16)!important}body:has(#target) .target .step[data-step^="-"]{grid-column:2;grid-row:2}body:has(#target) .target .step:not([data-step^="-"]){grid-column:2;grid-row:1}body:has(#explosives) .quantity{grid-template-columns:minmax(0,1fr) 20px!important;grid-template-rows:20px 20px!important;gap:0!important}body:has(#explosives) .quantity input{grid-column:1;grid-row:1/3}.quantity button[data-step^="-"]{grid-column:2;grid-row:2}.quantity button:not([data-step^="-"]){grid-column:2;grid-row:1}.stepper{display:grid!important;grid-template-columns:minmax(0,1fr) 20px!important;grid-template-rows:20px 20px!important;gap:0!important}.stepper output{grid-column:1;grid-row:1/3}.stepper button[data-step^="-"]{grid-column:2;grid-row:2}.stepper button:not([data-step^="-"]){grid-column:2;grid-row:1}

/* Selects share the exact same deep field surface as text and number inputs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,select{background-color:rgba(1,12,9,.88)!important;color:#effff8!important}select{-webkit-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m2 1 5 5 5-5' fill='none' stroke='%23dfffee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:12px 7px!important;padding-right:38px!important}select option,select optgroup{background-color:rgba(1,12,9,.88)!important;color:#effff8!important}

/* Keep every legacy arrow pair inside its field, matching native-style steppers. */
body:has(#target) .target,body:has(#explosives) .quantity{position:relative!important;display:block!important;grid-template:none!important}body:has(#target) .target>#target,body:has(#explosives) .quantity input{display:block!important;width:100%!important;min-height:40px!important;padding-right:31px!important}.target .step,body:has(#explosives) .quantity button{position:absolute!important;right:7px!important;z-index:3;height:14px!important}.target .step:not([data-step^="-"]),body:has(#explosives) .quantity button:not([data-step^="-"]){top:6px!important}.target .step[data-step^="-"],body:has(#explosives) .quantity button[data-step^="-"]{bottom:6px!important}.stepper{position:relative!important;display:block!important;min-width:72px!important}.stepper output{display:block!important;min-height:40px!important;padding:11px 31px 11px 10px!important;border:1px solid rgba(22,229,165,.25)!important;border-radius:7px!important;background:rgba(1,12,9,.88)!important}.stepper button[data-step]{position:absolute!important;right:7px!important;z-index:3;height:14px!important}.stepper button[data-step]:not([data-step^="-"]){top:6px!important}.stepper button[data-step^="-"]{bottom:6px!important}

/* Raid planner: reserve a compact, always-visible action column beside the inputs. */
body:has(#structure) .add{grid-template-columns:minmax(180px,300px) 82px 86px!important;justify-content:start!important}body:has(#structure) .add>.rustops-number{min-width:0!important;width:82px!important}body:has(#structure) .add>.rustops-number>input{width:100%!important;min-width:0!important;max-width:100%!important}body:has(#structure) .add #add{display:grid!important;place-items:center!important;min-width:86px!important;padding:11px 10px!important;background:var(--nv-neon)!important;color:#032017!important;border-color:var(--nv-neon)!important;white-space:nowrap!important}@media(max-width:780px){body:has(#structure) .add{grid-template-columns:minmax(0,1fr) 70px!important}body:has(#structure) .add #add{grid-column:1/-1;min-width:0!important}}

/* Genetics target profile: keep the six-gene controls compact and tool-like. */
body:has(#targetGrid) .target-grid{grid-template-columns:repeat(3,minmax(92px,120px))!important;justify-content:start!important;gap:8px!important}body:has(#targetGrid) .target-control{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}body:has(#targetGrid) .target-control label{padding-left:2px!important;font-size:10px!important}body:has(#targetGrid) .stepper{min-width:0!important;margin-top:4px!important}body:has(#targetGrid) .stepper output{min-height:32px!important;padding:7px 25px 7px 9px!important;font-size:16px!important}body:has(#targetGrid) .stepper button[data-step]{height:11px!important;font-size:8px!important}body:has(#targetGrid) .stepper button[data-step]:not([data-step^="-"]){top:4px!important}body:has(#targetGrid) .stepper button[data-step^="-"]{bottom:4px!important}body:has(#targetGrid) .preset-row{padding-top:8px!important}body:has(#targetGrid) .target-check{margin:10px 0!important;padding:8px 10px!important}body:has(#targetGrid) .solver{min-height:40px!important;margin-top:8px!important;padding:9px 13px!important;box-shadow:0 7px 18px rgba(22,229,165,.13)!important}

/* Route results can reveal the actual Large Planter placement without bloating the list. */
body:has(#routes) .route-planter{margin-top:10px;border:1px solid rgba(22,229,165,.18);border-radius:8px;background:rgba(1,12,9,.32);overflow:hidden}body:has(#routes) .route-planter summary{padding:8px 10px;color:var(--nv-neon);font:800 10px Consolas,monospace;letter-spacing:.08em;cursor:pointer;list-style:none}body:has(#routes) .route-planter summary:after{content:'▾';float:right;font-size:12px}body:has(#routes) .route-planter:not([open]) summary:after{content:'▸'}body:has(#routes) .route-planter-grid{position:relative;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:min(330px,100%);aspect-ratio:1;margin:0 auto 11px;padding:31px;border-radius:9px;overflow:hidden;background:#041a12}body:has(#routes) .route-planter-grid>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58}body:has(#routes) .route-planter-cell{z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:54px;min-height:39px;margin:auto;padding:4px;border:1px solid rgba(22,229,165,.42);border-radius:6px;background:rgba(2,18,12,.88);font:700 9px Consolas,monospace;text-align:center}body:has(#routes) .route-planter-cell small{color:#a6c7ba;font-size:8px}body:has(#routes) .route-planter-cell b{color:#dfffee;font-size:8px}body:has(#routes) .route-planter-cell span{font-size:9px;white-space:nowrap}body:has(#routes) .route-planter-cell.top{grid-area:1/2}body:has(#routes) .route-planter-cell.left{grid-area:2/1}body:has(#routes) .route-planter-cell.center{grid-area:2/2;border-color:var(--nv-neon);box-shadow:0 0 12px rgba(22,229,165,.18)}body:has(#routes) .route-planter-cell.right{grid-area:2/3}body:has(#routes) .route-planter-cell.bottom{grid-area:3/2}
body:has(#routes) .steps:not(.gen1-steps){align-items:stretch!important}body:has(#routes) .steps:not(.gen1-steps)>.step{display:flex;flex-direction:column}body:has(#routes) .steps:not(.gen1-steps)>.step>.route-planter{margin-top:auto}body:has(#routes) .gen1-steps{grid-template-columns:1fr!important;gap:10px!important}body:has(#routes) .gen1-main{display:block!important}body:has(#routes) .gen1-placement{max-width:760px;margin:3px 0 9px;color:var(--nv-muted);font-size:11px;line-height:1.48}
body:has(#routes) .route-planter-spot{z-index:1;position:relative;display:grid;place-items:center;min-width:54px;min-height:39px}body:has(#routes) .route-planter-growth{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}body:has(#routes) .route-planter-plant{position:absolute;width:78px;height:78px;object-fit:contain;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7));pointer-events:none}body:has(#routes) .stage-seedling .route-planter-plant.seedling,body:has(#routes) .stage-growing .route-planter-plant.growing,body:has(#routes) .stage-mature .route-planter-plant.mature{opacity:.48}body:has(#routes) .route-planter-spot .route-planter-cell{position:relative;z-index:1;background:rgba(2,18,12,.42)}body:has(#routes) .route-planter-spot.top{grid-area:1/2}body:has(#routes) .route-planter-spot.left{grid-area:2/1}body:has(#routes) .route-planter-spot.center{grid-area:2/2}body:has(#routes) .route-planter-spot.center .route-planter-cell{border-color:var(--nv-neon);box-shadow:0 0 12px rgba(22,229,165,.18)}body:has(#routes) .route-planter-spot.right{grid-area:2/3}body:has(#routes) .route-planter-spot.bottom{grid-area:3/2}
body:has(#routes) .route-planter-spot{z-index:1;position:relative;display:grid;place-items:center;min-width:54px;min-height:39px}body:has(#routes) .route-planter-growth{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}body:has(#routes) .route-planter-plant{position:absolute;width:78px;height:78px;object-fit:contain;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7));pointer-events:none}body:has(#routes) .stage-seedling .route-planter-plant.seedling,body:has(#routes) .stage-growing .route-planter-plant.growing,body:has(#routes) .stage-mature .route-planter-plant.mature{opacity:.48}body:has(#routes) .route-planter-spot .route-planter-cell{position:relative;z-index:1;background:rgba(2,18,12,.42)}body:has(#routes) .route-planter-spot.top{grid-area:1/2}body:has(#routes) .route-planter-spot.left{grid-area:2/1}body:has(#routes) .route-planter-spot.center{grid-area:2/2}body:has(#routes) .route-planter-spot.center .route-planter-cell{border-color:var(--nv-neon);box-shadow:0 0 12px rgba(22,229,165,.18)}body:has(#routes) .route-planter-spot.right{grid-area:2/3}body:has(#routes) .route-planter-spot.bottom{grid-area:3/2}
body:has(#routes) .route-planter-plant.seedling{width:58px;height:58px}body:has(#routes) .route-planter-plant.growing{width:71px;height:71px}body:has(#routes) .route-planter-plant.mature{width:84px;height:84px}body:has(#routes) .route-planter-zoom{position:absolute;z-index:3;right:8px;bottom:8px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid rgba(22,229,165,.45);border-radius:5px;background:rgba(1,15,10,.9);color:var(--nv-neon);font:800 15px/1 Arial;cursor:zoom-in}body.planter-modal-open{overflow:hidden}.route-planter-modal{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:28px;background:rgba(0,8,5,.86);backdrop-filter:blur(6px);cursor:zoom-out}.route-planter-modal .route-planter-grid{width:min(760px,90vw);max-height:82vh;margin:0!important;padding:70px;border:1px solid rgba(22,229,165,.45);border-radius:14px;box-shadow:0 18px 70px rgba(0,0,0,.62);cursor:default}.route-planter-modal .route-planter-grid>img{opacity:.72}.route-planter-modal .route-planter-plant.seedling{width:134px;height:134px}.route-planter-modal .route-planter-plant.growing{width:162px;height:162px}.route-planter-modal .route-planter-plant.mature{width:190px;height:190px}.route-planter-modal .route-planter-growth .route-planter-plant{opacity:0;animation-duration:6s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.route-planter-modal .route-planter-plant.seedling{animation-name:rustops-planter-seedling}.route-planter-modal .route-planter-plant.growing{animation-name:rustops-planter-growing}.route-planter-modal .route-planter-plant.mature{animation-name:rustops-planter-mature}.route-planter-modal .route-planter-cell{min-width:104px;min-height:72px;padding:8px;font-size:16px;border-radius:9px}.route-planter-modal .route-planter-cell small{font-size:12px}.route-planter-modal .route-planter-cell b{font-size:12px}.route-planter-modal .route-planter-cell span{font-size:15px}.route-planter-modal-close{position:absolute;top:18px;right:22px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(22,229,165,.5);border-radius:7px;background:#03160f;color:var(--nv-neon);font:400 28px/1 Arial;cursor:pointer}@keyframes rustops-planter-seedling{0%{opacity:0;transform:scale(.25)}16%{opacity:.54;transform:scale(.88)}31%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-planter-growing{0%,27%{opacity:0;transform:scale(.5)}45%{opacity:.54;transform:scale(.95)}62%,100%{opacity:0;transform:scale(1.04)}}@keyframes rustops-planter-mature{0%,58%{opacity:0;transform:scale(.62)}78%,100%{opacity:.56;transform:scale(1)}}
body:has(#routes) .route-planter-plant.seedling{width:58px;height:58px}body:has(#routes) .route-planter-plant.growing{width:71px;height:71px}body:has(#routes) .route-planter-plant.mature{width:84px;height:84px}body:has(#routes) .route-planter-zoom{position:absolute;z-index:3;right:8px;bottom:8px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid rgba(22,229,165,.45);border-radius:5px;background:rgba(1,15,10,.9);color:var(--nv-neon);font:800 15px/1 Arial;cursor:zoom-in}body.planter-modal-open{overflow:hidden}.route-planter-modal{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:28px;background:rgba(0,8,5,.86);backdrop-filter:blur(6px);cursor:zoom-out}.route-planter-modal .route-planter-grid{width:min(760px,90vw);max-height:82vh;margin:0!important;padding:70px;border:1px solid rgba(22,229,165,.45);border-radius:14px;box-shadow:0 18px 70px rgba(0,0,0,.62);cursor:default}.route-planter-modal .route-planter-grid>img{opacity:.72}.route-planter-modal .route-planter-plant.seedling{width:134px;height:134px}.route-planter-modal .route-planter-plant.growing{width:162px;height:162px}.route-planter-modal .route-planter-plant.mature{width:190px;height:190px}.route-planter-modal .route-planter-growth .route-planter-plant{opacity:0;animation-duration:6s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.route-planter-modal .route-planter-plant.seedling{animation-name:rustops-planter-seedling}.route-planter-modal .route-planter-plant.growing{animation-name:rustops-planter-growing}.route-planter-modal .route-planter-plant.mature{animation-name:rustops-planter-mature}.route-planter-modal .route-planter-cell{min-width:104px;min-height:72px;padding:8px;font-size:16px;border-radius:9px}.route-planter-modal .route-planter-cell small{font-size:12px}.route-planter-modal .route-planter-cell b{font-size:12px}.route-planter-modal .route-planter-cell span{font-size:15px}.route-planter-modal-close{position:absolute;top:18px;right:22px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(22,229,165,.5);border-radius:7px;background:#03160f;color:var(--nv-neon);font:400 28px/1 Arial;cursor:pointer}@keyframes rustops-planter-seedling{0%{opacity:0;transform:scale(.25)}16%{opacity:.54;transform:scale(.88)}31%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-planter-growing{0%,27%{opacity:0;transform:scale(.5)}45%{opacity:.54;transform:scale(.95)}62%,100%{opacity:0;transform:scale(1.04)}}@keyframes rustops-planter-mature{0%,58%{opacity:0;transform:scale(.62)}78%,100%{opacity:.56;transform:scale(1)}}
body:has(#routes) .stage-sprout .route-planter-plant.sprout,body:has(#routes) .stage-juvenile .route-planter-plant.juvenile,body:has(#routes) .stage-lush .route-planter-plant.lush{opacity:.48}body:has(#routes) .route-planter-plant.sprout{width:40px;height:40px}body:has(#routes) .route-planter-plant.juvenile{width:65px;height:65px}body:has(#routes) .route-planter-plant.lush{width:92px;height:92px}body:has(#routes) .route-planter-spot.top{justify-self:center!important;align-self:center!important;transform:translateX(4px)}body:has(#routes) .route-planter-modal .route-planter-grid{width:min(920px,94vw)!important;max-height:88vh!important;padding:78px!important}.route-planter-modal .route-planter-plant.sprout{width:84px!important;height:84px!important}.route-planter-modal .route-planter-plant.seedling{width:118px!important;height:118px!important}.route-planter-modal .route-planter-plant.juvenile{width:145px!important;height:145px!important}.route-planter-modal .route-planter-plant.growing{width:172px!important;height:172px!important}.route-planter-modal .route-planter-plant.mature{width:200px!important;height:200px!important}.route-planter-modal .route-planter-plant.lush{width:225px!important;height:225px!important}.route-planter-modal .route-planter-growth .route-planter-plant{animation-duration:9s!important}.route-planter-modal .route-planter-plant.sprout{animation-name:rustops-grow-1!important}.route-planter-modal .route-planter-plant.seedling{animation-name:rustops-grow-2!important}.route-planter-modal .route-planter-plant.juvenile{animation-name:rustops-grow-3!important}.route-planter-modal .route-planter-plant.growing{animation-name:rustops-grow-4!important}.route-planter-modal .route-planter-plant.mature{animation-name:rustops-grow-5!important}.route-planter-modal .route-planter-plant.lush{animation-name:rustops-grow-6!important}@keyframes rustops-grow-1{0%{opacity:0;transform:scale(.2)}10%{opacity:.55;transform:scale(.9)}18%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-grow-2{0%,14%{opacity:0;transform:scale(.42)}25%{opacity:.54;transform:scale(.92)}33%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-grow-3{0%,29%{opacity:0;transform:scale(.55)}40%{opacity:.54;transform:scale(.94)}48%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-grow-4{0%,44%{opacity:0;transform:scale(.66)}55%{opacity:.55;transform:scale(.96)}63%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-grow-5{0%,59%{opacity:0;transform:scale(.76)}70%{opacity:.55;transform:scale(.98)}78%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-grow-6{0%,74%{opacity:0;transform:scale(.84)}88%,100%{opacity:.58;transform:scale(1)}}
body:has(#routes) .route-planter-modal .route-planter-cell{min-width:136px!important;min-height:94px!important;padding:11px!important;border-width:2px!important;border-radius:11px!important;font-size:18px!important;gap:5px!important}body:has(#routes) .route-planter-modal .route-planter-cell small{font-size:13px!important;letter-spacing:.08em!important}body:has(#routes) .route-planter-modal .route-planter-cell b{font-size:15px!important}body:has(#routes) .route-planter-modal .route-planter-cell span{font-size:19px!important;letter-spacing:.04em!important}body:has(#routes) .route-planter-modal .route-planter-spot.center .route-planter-cell{box-shadow:0 0 24px rgba(22,229,165,.32)!important}
body:has(#routes) .route-planter-plant-frame{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%) scale(1.2);transform-origin:center}body:has(#routes) .route-planter-plant-frame .route-planter-plant{position:relative;display:block;inset:auto!important;margin:0!important;translate:none!important}body:has(#routes) .route-planter-spot.top{transform:none!important}body:has(#routes) .route-planter-modal .route-planter-growth .route-planter-plant{animation-iteration-count:infinite!important}
body:has(#routes) .stage-growth-1 .route-planter-plant.growth-1,body:has(#routes) .stage-growth-2 .route-planter-plant.growth-2,body:has(#routes) .stage-growth-3 .route-planter-plant.growth-3,body:has(#routes) .stage-growth-4 .route-planter-plant.growth-4,body:has(#routes) .stage-growth-5 .route-planter-plant.growth-5{opacity:.5}body:has(#routes) .route-planter-plant.growth-1{width:46px;height:46px}body:has(#routes) .route-planter-plant.growth-2{width:58px;height:58px}body:has(#routes) .route-planter-plant.growth-3{width:72px;height:72px}body:has(#routes) .route-planter-plant.growth-4{width:88px;height:88px}body:has(#routes) .route-planter-plant.growth-5{width:108px;height:108px}body:has(#routes) .route-planter-modal .route-planter-growth .route-planter-plant{animation-duration:16s!important}.route-planter-modal .route-planter-plant.sprout{animation-name:rustops-stage-1!important}.route-planter-modal .route-planter-plant.seedling{animation-name:rustops-stage-2!important}.route-planter-modal .route-planter-plant.juvenile{animation-name:rustops-stage-3!important}.route-planter-modal .route-planter-plant.growing{animation-name:rustops-stage-4!important}.route-planter-modal .route-planter-plant.mature{animation-name:rustops-stage-5!important}.route-planter-modal .route-planter-plant.lush{animation-name:rustops-stage-6!important}.route-planter-modal .route-planter-plant.growth-1{width:95px!important;height:95px!important;animation-name:rustops-stage-7!important}.route-planter-modal .route-planter-plant.growth-2{width:125px!important;height:125px!important;animation-name:rustops-stage-8!important}.route-planter-modal .route-planter-plant.growth-3{width:160px!important;height:160px!important;animation-name:rustops-stage-9!important}.route-planter-modal .route-planter-plant.growth-4{width:215px!important;height:215px!important;animation-name:rustops-stage-10!important}.route-planter-modal .route-planter-plant.growth-5{width:285px!important;height:285px!important;animation-name:rustops-stage-11!important}@keyframes rustops-stage-1{0%{opacity:0;transform:scale(.2)}6%{opacity:.55;transform:scale(.9)}10%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-2{0%,8%{opacity:0;transform:scale(.4)}15%{opacity:.54;transform:scale(.94)}19%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-3{0%,17%{opacity:0;transform:scale(.55)}24%{opacity:.54;transform:scale(.95)}28%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-4{0%,26%{opacity:0;transform:scale(.65)}33%{opacity:.54;transform:scale(.96)}37%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-5{0%,35%{opacity:0;transform:scale(.74)}42%{opacity:.55;transform:scale(.97)}46%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-6{0%,44%{opacity:0;transform:scale(.8)}51%{opacity:.55;transform:scale(.98)}55%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-7{0%,53%{opacity:0;transform:scale(.4)}60%{opacity:.56;transform:scale(.96)}64%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-8{0%,62%{opacity:0;transform:scale(.55)}69%{opacity:.56;transform:scale(.97)}73%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-9{0%,71%{opacity:0;transform:scale(.66)}78%{opacity:.57;transform:scale(.98)}82%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-10{0%,80%{opacity:0;transform:scale(.76)}87%{opacity:.58;transform:scale(.99)}91%,100%{opacity:0;transform:scale(1)}}@keyframes rustops-stage-11{0%,89%{opacity:0;transform:scale(.82)}97%,100%{opacity:.6;transform:scale(1)}}
/* One strictly ascending growth sequence: never return to a seedling after a mature plant. */
.route-planter-modal .route-planter-plant.growth-1{width:70px!important;height:70px!important;animation-name:rustops-stage-1!important}.route-planter-modal .route-planter-plant.sprout{width:88px!important;height:88px!important;animation-name:rustops-stage-2!important}.route-planter-modal .route-planter-plant.seedling{width:108px!important;height:108px!important;animation-name:rustops-stage-3!important}.route-planter-modal .route-planter-plant.growth-2{width:128px!important;height:128px!important;animation-name:rustops-stage-4!important}.route-planter-modal .route-planter-plant.juvenile{width:150px!important;height:150px!important;animation-name:rustops-stage-5!important}.route-planter-modal .route-planter-plant.growing{width:172px!important;height:172px!important;animation-name:rustops-stage-6!important}.route-planter-modal .route-planter-plant.growth-3{width:196px!important;height:196px!important;animation-name:rustops-stage-7!important}.route-planter-modal .route-planter-plant.mature{width:220px!important;height:220px!important;animation-name:rustops-stage-8!important}.route-planter-modal .route-planter-plant.growth-4{width:246px!important;height:246px!important;animation-name:rustops-stage-9!important}.route-planter-modal .route-planter-plant.lush{width:272px!important;height:272px!important;animation-name:rustops-stage-10!important}.route-planter-modal .route-planter-plant.growth-5{width:310px!important;height:310px!important;animation-name:rustops-stage-11!important}
/* The same full growth cycle also runs in the compact planter view. */
body:has(#routes) .route-planter-growth .route-planter-plant{opacity:0;animation-duration:16s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}body:has(#routes) .route-planter-plant.growth-1{width:28px;height:28px;animation-name:rustops-stage-1}body:has(#routes) .route-planter-plant.sprout{width:34px;height:34px;animation-name:rustops-stage-2}body:has(#routes) .route-planter-plant.seedling{width:40px;height:40px;animation-name:rustops-stage-3}body:has(#routes) .route-planter-plant.growth-2{width:46px;height:46px;animation-name:rustops-stage-4}body:has(#routes) .route-planter-plant.juvenile{width:52px;height:52px;animation-name:rustops-stage-5}body:has(#routes) .route-planter-plant.growing{width:60px;height:60px;animation-name:rustops-stage-6}body:has(#routes) .route-planter-plant.growth-3{width:67px;height:67px;animation-name:rustops-stage-7}body:has(#routes) .route-planter-plant.mature{width:74px;height:74px;animation-name:rustops-stage-8}body:has(#routes) .route-planter-plant.growth-4{width:82px;height:82px;animation-name:rustops-stage-9}body:has(#routes) .route-planter-plant.lush{width:90px;height:90px;animation-name:rustops-stage-10}body:has(#routes) .route-planter-plant.growth-5{width:100px;height:100px;animation-name:rustops-stage-11}

/* Rebuilt steppers: consistent RustOps controls in place of native browser arrows. */
.rustops-number{position:relative;display:block;width:100%}.rustops-number>input[type="number"]{padding-right:31px!important}.rustops-number-controls{position:absolute;z-index:2;right:7px;top:50%;display:flex;flex-direction:column;gap:0;transform:translateY(-50%)}.rustops-number-controls button{display:grid;place-items:center;width:17px;height:14px;padding:0;border:0;background:transparent;color:var(--nv-neon);font:900 10px/1 Arial;cursor:pointer;text-shadow:0 0 7px rgba(22,229,165,.45);transition:color .15s,transform .15s}.rustops-number-controls button:hover{color:#a8ffe0;transform:scale(1.16)}.rustops-number-controls button:active{transform:scale(.9)}.rustops-number-controls button:disabled{opacity:.35;cursor:not-allowed}

/* The enlarged planter uses complete, equally sized grid cells.  That keeps
   the card and its animated plant locked to the exact same cell centre. */
body:has(#routes) .route-planter-modal .route-planter-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;place-items:stretch!important}
body:has(#routes) .route-planter-modal .route-planter-spot{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;justify-self:stretch!important;align-self:stretch!important;display:grid!important;place-items:center!important;transform:none!important}
body:has(#routes) .route-planter-modal .route-planter-spot.top{grid-area:1/2!important}
body:has(#routes) .route-planter-modal .route-planter-spot.left{grid-area:2/1!important}
body:has(#routes) .route-planter-modal .route-planter-spot.center{grid-area:2/2!important}
body:has(#routes) .route-planter-modal .route-planter-spot.right{grid-area:2/3!important}
body:has(#routes) .route-planter-modal .route-planter-spot.bottom{grid-area:3/2!important}
body:has(#routes) .route-planter-modal .route-planter-growth{inset:0!important;place-self:stretch!important}
body:has(#routes) .route-planter-modal .route-planter-cell{margin:auto!important}
/* Never let max-height squash the square planter image: the placement grid and
   the rendered planter must always have the same aspect ratio. */
body:has(#routes) .route-planter-modal .route-planter-grid{width:min(920px,94vw,88vh)!important;height:auto!important;max-height:none!important;aspect-ratio:1!important}
/* Pin both layers to one coordinate inside each modal cell.  The broad .top
   utility used by older calculator pages can no longer influence this view. */
body:has(#routes) .route-planter-modal .route-planter-spot .route-planter-cell{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform:translate(-50%,-50%)!important}
body:has(#routes) .route-planter-modal .route-planter-plant-frame{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}

/* Give the enlarged planter its intended visual weight without changing any
   placement coordinates or the compact preview. */
body:has(#routes) .route-planter-modal .route-planter-plant-frame{transform:translate(-50%,-50%) scale(1.2)!important;transform-origin:center}

/* Genetics navigation: a compact drawn chevron reads cleanly at every zoom
   level and rotates with the native details state. */
.genetics-nav details>summary{gap:8px!important}.genetics-nav details>summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s ease;opacity:.78}.genetics-nav details[open]>summary::after{margin-top:3px;transform:rotate(225deg)}

/* Inline guide links belong to the same living neon system as the tool UI,
   rather than the browser's default blue. */
.article a{color:var(--nv-neon)!important;font-weight:700;text-decoration-color:rgba(22,229,165,.58)!important;text-underline-offset:3px;text-decoration-thickness:1px;animation:rustops-link-glow 2.8s ease-in-out infinite}.article a:hover{color:#d8fff0!important;text-decoration-color:currentColor!important;animation:none;text-shadow:0 0 12px rgba(22,229,165,.72)}@keyframes rustops-link-glow{0%,100%{text-shadow:0 0 3px rgba(22,229,165,.18)}50%{text-shadow:0 0 10px rgba(22,229,165,.52)}}

/* A brighter, but still readable, energy treatment for knowledge-base links. */
.article a{position:relative;color:#75ffd0!important;background:linear-gradient(105deg,#35eeb0 0%,#d5ffec 46%,#18dca0 82%,#72ffd2 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none!important;animation:rustops-link-energy 2.6s ease-in-out infinite}.article a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;border-radius:99px;background:linear-gradient(90deg,transparent,#16e5a5 20%,#d7ffef 50%,#16e5a5 80%,transparent);background-size:200% 100%;box-shadow:0 0 8px rgba(22,229,165,.68);animation:rustops-link-line 2.6s ease-in-out infinite}.article a:hover{filter:brightness(1.25);text-shadow:0 0 15px rgba(22,229,165,.9);animation-duration:1.1s}.article a:hover::after{height:2px;box-shadow:0 0 13px rgba(22,229,165,.95)}@keyframes rustops-link-energy{0%,100%{background-position:100% 0;text-shadow:0 0 5px rgba(22,229,165,.32)}50%{background-position:0 0;text-shadow:0 0 14px rgba(22,229,165,.78)}}@keyframes rustops-link-line{0%,100%{background-position:100% 0;opacity:.62}50%{background-position:0 0;opacity:1}}

/* Interactive article checklists use the same energy language as links. */
.article .contains-task-list{display:grid;gap:8px;margin:17px 0;padding:0;list-style:none}.article .task-list-item{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid rgba(22,229,165,.16);border-radius:8px;background:rgba(2,18,12,.34);color:var(--nv-muted);line-height:1.5;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.article .task-list-item:hover{border-color:rgba(22,229,165,.45);background:rgba(8,48,35,.38)}.article .task-list-item input[type="checkbox"]{appearance:none!important;flex:0 0 17px;width:17px;height:17px;margin:2px 0 0!important;border:1px solid rgba(92,255,198,.58)!important;border-radius:4px!important;background:rgba(1,15,10,.9)!important;box-shadow:inset 0 0 0 1px rgba(22,229,165,.06);cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.article .task-list-item input[type="checkbox"]:checked{border-color:#baffdf!important;background:var(--nv-neon)!important;box-shadow:0 0 13px rgba(22,229,165,.85),inset 0 0 0 4px #063222}.article .task-list-item input[type="checkbox"]:checked::after{content:"✓";display:grid;place-items:center;color:#ddfff1;font:900 13px/15px Arial}.article .task-list-item.is-complete{border-color:rgba(22,229,165,.47);background:linear-gradient(100deg,rgba(9,62,43,.44),rgba(2,18,12,.32));box-shadow:0 0 16px rgba(22,229,165,.09);animation:rustops-task-energy 2.6s ease-in-out infinite}.article .task-list-item.is-complete>*:not(input){color:#c9f8e5}.article .task-list-item.is-complete input[type="checkbox"]{animation:rustops-task-check .42s cubic-bezier(.2,.9,.2,1)}@keyframes rustops-task-energy{0%,100%{box-shadow:0 0 7px rgba(22,229,165,.07)}50%{box-shadow:0 0 18px rgba(22,229,165,.22)}}@keyframes rustops-task-check{0%{transform:scale(.72)}70%{transform:scale(1.22)}100%{transform:scale(1)}}
/* Replaced controls cannot render pseudo-elements reliably, so the check mark
   lives in the control's own SVG background. */
.article .task-list-item input[type="checkbox"]:checked{background-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.2 3 3L13 4.8' fill='none' stroke='%23baffdf' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:13px!important;box-shadow:0 0 13px rgba(22,229,165,.85)!important}
.article .task-list-item input[type="checkbox"]:checked::after{content:none!important;display:none!important}

/* Related-reading cards carry the same energy as inline links, but their
   border already provides structure, so they deliberately have no underline. */
.related a{position:relative;color:#75ffd0!important;background-image:linear-gradient(105deg,#35eeb0 0%,#d5ffec 46%,#18dca0 82%,#72ffd2 100%)!important;background-size:220% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-decoration:none!important;animation:rustops-link-energy 2.6s ease-in-out infinite}.related a::after{display:none!important}.related a:hover{filter:brightness(1.25);text-shadow:0 0 15px rgba(22,229,165,.9);animation-duration:1.1s}

/* FAQ prompts are interactive affordances, so they receive the same quiet
   energy pulse as navigation links without adding an underline. */
.article .faq summary{color:#75ffd0!important;background:linear-gradient(105deg,#35eeb0 0%,#d5ffec 46%,#18dca0 82%,#72ffd2 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rustops-link-energy 2.6s ease-in-out infinite}.article .faq summary:hover{filter:brightness(1.25);text-shadow:0 0 15px rgba(22,229,165,.9);animation-duration:1.1s}.article .faq details[open] summary{filter:brightness(1.2);text-shadow:0 0 13px rgba(22,229,165,.75)}

/* Keep the calculator FAQ and its next-step CTA as two distinct sections. */
body:has(#routes) .extra-section+.final-cta{margin-top:22px}

/* The Genetics calculator has its own FAQ panel outside article pages. */
body:has(#routes) .extra-section .faq summary{color:#75ffd0!important;background:linear-gradient(105deg,#35eeb0 0%,#d5ffec 46%,#18dca0 82%,#72ffd2 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rustops-link-energy 2.6s ease-in-out infinite}body:has(#routes) .extra-section .faq summary:hover{filter:brightness(1.25);text-shadow:0 0 15px rgba(22,229,165,.9);animation-duration:1.1s}body:has(#routes) .extra-section .faq details[open] summary{filter:brightness(1.2);text-shadow:0 0 13px rgba(22,229,165,.75)}

/* Toolkit identity: small, continuous motion so the header carries the same
   energy as the newer Genetics surface without competing with the tools. */
body.role-tools-page .brand{position:relative}body.role-tools-page .brand .mark{position:relative;isolation:isolate;border-color:#36f0b8!important;background:radial-gradient(circle at 34% 27%,rgba(90,255,202,.18),rgba(2,29,20,.46) 65%);box-shadow:0 0 0 1px rgba(146,255,213,.12),0 0 18px rgba(22,229,165,.35),inset 0 0 13px rgba(22,229,165,.12);animation:rustops-brand-breathe 3.4s ease-in-out infinite}body.role-tools-page .brand .mark::before{content:"";position:absolute;z-index:-1;inset:-7px;border:1px solid rgba(22,229,165,.38);border-radius:50%;opacity:.25;animation:rustops-brand-scan 3.4s ease-out infinite}body.role-tools-page .brand b{display:block;background:linear-gradient(105deg,#d5ffed 0%,#72ffd0 45%,#f1fffa 63%,#54f5bf 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rustops-brand-shimmer 5.4s linear infinite}body.role-tools-page .brand small{color:#2df0b0!important;text-shadow:0 0 9px rgba(22,229,165,.52);font-weight:800!important}@keyframes rustops-brand-breathe{0%,100%{box-shadow:0 0 0 1px rgba(146,255,213,.12),0 0 14px rgba(22,229,165,.25),inset 0 0 9px rgba(22,229,165,.08);transform:translateY(0)}50%{box-shadow:0 0 0 1px rgba(146,255,213,.24),0 0 25px rgba(22,229,165,.54),inset 0 0 16px rgba(22,229,165,.17);transform:translateY(-1px)}}@keyframes rustops-brand-scan{0%,62%{transform:scale(.82);opacity:.42}100%{transform:scale(1.42);opacity:0}}@keyframes rustops-brand-shimmer{to{background-position:220% 0}}

/* Wide visual anchor for the Toolkit landing hero. */
body.role-tools-page .hero{min-height:286px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background-image:linear-gradient(90deg,rgba(3,18,13,.96) 0%,rgba(3,18,13,.82) 40%,rgba(3,18,13,.28) 73%,rgba(3,18,13,.12) 100%),url("rustops-toolkit-workshop-banner.png")!important;background-position:center!important;background-size:cover!important;border-color:rgba(22,229,165,.28)!important;box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px rgba(171,255,221,.08)!important}body.role-tools-page .hero h1,body.role-tools-page .hero p,body.role-tools-page .hero .eyebrow{position:relative;z-index:1;max-width:590px!important}@media(max-width:620px){body.role-tools-page .hero{min-height:240px!important;background-position:62% center!important}}

/* Area selection is the actual RustOps front door: use the workshop banner
   here as well, not only inside a chosen toolkit area. */
body:has(.role-landing) .hero{max-width:100%!important;min-height:286px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;margin:36px auto 14px!important;padding:32px 38px!important;text-align:left!important;background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.86) 42%,rgba(3,18,13,.34) 73%,rgba(3,18,13,.12) 100%),url("rustops-toolkit-workshop-banner.png")!important;background-position:center!important;background-size:cover!important;border-color:rgba(22,229,165,.3)!important;box-shadow:0 18px 48px rgba(0,0,0,.38),inset 0 1px rgba(171,255,221,.08)!important}body:has(.role-landing) .hero h1,body:has(.role-landing) .hero p{max-width:590px!important;margin-left:0!important;margin-right:0!important;text-align:left!important}body:has(.role-landing) .hero .eyebrow{width:max-content!important}@media(max-width:620px){body:has(.role-landing) .hero{min-height:245px!important;padding:25px!important;background-position:64% center!important}}

/* Replace the generic letter-in-a-circle with the dedicated RustOps emblem. */
body:has(.role-landing) .brand .mark,body.role-tools-page .brand .mark{width:58px!important;height:58px!important;border:0!important;border-radius:0!important;background:transparent url("rustops-logo-emblem-energy.png") center/contain no-repeat!important;filter:drop-shadow(0 0 8px rgba(22,229,165,.42));box-shadow:none!important;color:transparent!important;font-size:0!important;animation:rustops-emblem-float 3.8s ease-in-out infinite!important}body:has(.role-landing) .brand .mark::before,body.role-tools-page .brand .mark::before{display:none!important}@keyframes rustops-emblem-float{0%,100%{filter:drop-shadow(0 0 6px rgba(22,229,165,.32));transform:translateY(0)}50%{filter:drop-shadow(0 0 13px rgba(22,229,165,.68));transform:translateY(-2px)}}

/* Global RustOps brand mark: all calculator, guide and toolkit headers share
   the same logo rather than falling back to a plain letter circle. */
.top .mark,.brand .mark{width:58px!important;height:58px!important;border:0!important;border-radius:0!important;background:transparent url("rustops-logo-emblem-energy.png") center/contain no-repeat!important;box-shadow:none!important;color:transparent!important;font-size:0!important;filter:drop-shadow(0 0 8px rgba(22,229,165,.42));animation:rustops-emblem-float 3.8s ease-in-out infinite!important}.top .mark::before,.brand .mark::before{display:none!important}

/* Shared surface for standalone-tool introductions created by the normalizer. */
.back+.hero{margin-bottom:20px!important}.rustops-normalized-hero{margin:0 0 20px!important;padding:24px!important;border:1px solid rgba(22,229,165,.22)!important;border-radius:13px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}.rustops-back-actions{display:flex;align-items:center;gap:8px;margin:20px 0 16px}.rustops-back-actions .back{margin:0!important}.rustops-back-actions .home-link{border-color:rgba(22,229,165,.24)!important;background:rgba(3,23,16,.5)!important;color:var(--nv-muted)!important}.rustops-back-actions .home-link:hover{color:var(--nv-neon)!important;border-color:var(--nv-neon)!important}

/* Two legacy tools keep their intro as three direct siblings.  Give that
   sequence the exact same visual surface without altering their fragile HTML. */
.rustops-back-actions+.eyebrow,.back+.eyebrow{display:block!important;margin:0!important;padding:24px 24px 0!important;border:1px solid rgba(22,229,165,.22)!important;border-bottom:0!important;border-radius:13px 13px 0 0!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}.rustops-back-actions+.eyebrow+h1,.back+.eyebrow+h1{margin:0!important;padding:8px 24px 7px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important}.rustops-back-actions+.eyebrow+h1+p,.back+.eyebrow+h1+p{margin:0 0 20px!important;padding:0 24px 24px!important;border:1px solid rgba(22,229,165,.22)!important;border-top:0!important;border-radius:0 0 13px 13px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}

/* One shared tool-hero surface everywhere: same as the Rust Database intro. */
main>.hero{margin:0 0 20px!important;padding:24px!important;border:1px solid rgba(22,229,165,.22)!important;border-radius:13px!important;background:linear-gradient(105deg,rgba(7,31,23,.92),rgba(3,13,10,.9))!important;box-shadow:0 14px 34px rgba(0,0,0,.2)!important}main>.hero .eyebrow{margin-top:0!important}

/* Complete the vertical edge through the middle title strip on legacy heroes. */
.rustops-back-actions+.eyebrow+h1,.back+.eyebrow+h1{border-left:1px solid rgba(22,229,165,.22)!important;border-right:1px solid rgba(22,229,165,.22)!important}

/* Each tool receives its own image-led hero while the title stays real HTML
   and remains readable at every viewport size. */
main>.hero.rustops-themed-hero{min-height:218px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),var(--rustops-hero-image)!important;background-position:center!important;background-size:cover!important;border-color:rgba(22,229,165,.3)!important;box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px rgba(171,255,221,.08)!important}main>.hero.rustops-themed-hero>*{position:relative;z-index:1;max-width:620px!important}main>.hero.rustops-themed-hero h1{margin-top:6px!important}main>.hero.rustops-themed-hero p{margin-bottom:0!important}@media(max-width:620px){main>.hero.rustops-themed-hero{min-height:195px!important;padding:24px!important;background-position:64% center!important}}

/* Two standalone admin pages intentionally have no shared runtime, but their
   existing heroes use the very same image treatment. */
body:has(#configtabs) .hero,body:has(#plain) .hero{min-height:218px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background-position:center!important;background-size:cover!important;border-color:rgba(22,229,165,.3)!important;box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px rgba(171,255,221,.08)!important}body:has(#configtabs) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-server.png")!important}body:has(#plain) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-description.png")!important}

/* The two entry surfaces do not use the shared runtime, so their dedicated
   artwork is bound through their stable content anchors. */
body:has(#cards) .hero,body:has(#tools) .hero{min-height:218px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background-position:center!important;background-size:cover!important;border-color:rgba(22,229,165,.3)!important;box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px rgba(171,255,221,.08)!important}body:has(#cards) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-home-v2.png")!important}body[data-rustops-role="owner"]:has(#tools) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-server-owners.png")!important}body[data-rustops-role="dev"]:has(#tools) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-developers.png")!important}body[data-rustops-role="mapper"]:has(#tools) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-mappers.png")!important}body[data-rustops-role="player"]:has(#tools) .hero{background-image:linear-gradient(90deg,rgba(3,18,13,.97) 0%,rgba(3,18,13,.91) 37%,rgba(3,18,13,.57) 60%,rgba(3,18,13,.18) 100%),url("rustops-hero-players.png")!important}