/* ORBILACTIC — resident page */
.rhero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; padding-top: 40px; }
.main { min-width: 0; }
.intro { display: flex; align-items: center; gap: 36px; margin-top: 18px; }
.crumbs { font: 500 12px var(--mono); color: var(--mut); } .crumbs a:hover { color: var(--ink); }
.world { position: relative; flex: none; width: 300px; aspect-ratio: 1; }
.world::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 38%, transparent) 0%, transparent 62%); filter: blur(18px); }
.world .orb { position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); animation: spin 60s linear infinite; }
.world .orb.o2 { inset: 10%; border-style: solid; border-color: rgba(255,255,255,.06); animation-duration: 90s; animation-direction: reverse; }
#big { position: absolute; inset: 9%; width: 82%; height: 82%; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
#moons { position: absolute; inset: 1%; animation: spin 40s linear infinite; }
.moon { position: absolute; width: 17%; aspect-ratio: 1; transition: transform .2s; }
.moon svg { width: 100%; height: 100%; animation: spin 40s linear infinite reverse; }
.moon:hover { transform: scale(1.15); }
.moon.m0 { left: 41.5%; top: -8%; } .moon.m1 { right: -8%; top: 52%; } .moon.m2 { left: -4%; top: 62%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-1.5deg); } }

.who-l { display: flex; flex-direction: column; }
#cat { margin-top: 0; font: 500 12px var(--mono); letter-spacing: .22em; color: var(--c); }
#name { margin-top: 10px; font: 800 clamp(56px, 8vw, 112px)/.92 var(--disp); letter-spacing: -.045em; background: linear-gradient(180deg, var(--cl), var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#line { margin-top: 14px; font: 600 22px/1.3 var(--sans); }
#about { margin-top: 40px; max-width: 560px; font: 400 16px/1.6 var(--sans); color: var(--dim); }
.sk { display: inline-flex; margin-top: 18px; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); font: 500 12px var(--mono); color: var(--cl); width: fit-content; }
#stats { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 30px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
#stats div { padding: 16px 16px 14px; border-left: 1px solid var(--line); } #stats div:first-child { border-left: 0; }
#stats b { display: block; font: 700 18px var(--mono); } #stats span { display: block; margin-top: 6px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--mut); }

.hire { position: sticky; top: 96px; padding: 22px; border-radius: 26px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.hire::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, transparent), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.hire h3 { font: 800 24px var(--disp); letter-spacing: -.02em; }
.hire .hsub { display: block; margin-top: 6px; font: 500 12px var(--mono); color: var(--dim); letter-spacing: 0; }
.hire label { display: block; margin-top: 18px; font: 500 11px var(--mono); letter-spacing: .16em; color: var(--mut); }
#ask { display: block; width: 100%; margin-top: 8px; min-height: 84px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3,2,16,.6); color: var(--ink); font: 500 14px/1.5 var(--sans); outline: none; }
#ask:focus { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
#pays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#pays button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); text-align: left; }
#pays button b { display: flex; align-items: center; gap: 6px; font: 700 12px var(--mono); } #pays button span { font: 500 11px var(--mono); color: var(--mut); }
#pays button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } #pays button.on span { color: var(--cl); }
#pays .fr { font: 500 13px var(--mono); color: var(--teal); }
#go { width: 100%; height: 52px; margin-top: 18px; border-radius: 16px; background: var(--amber); color: #1a1000; font: 700 15px var(--sans); box-shadow: 0 8px 30px rgba(255,178,30,.3); transition: opacity .2s, transform .15s; }
#go:hover { transform: translateY(-1px); } #go:disabled { opacity: .6; cursor: wait; transform: none; }
.hnote { margin-top: 10px; font: 500 11.5px/1.5 var(--mono); color: var(--mut); text-align: center; }
#trace { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 9px; }
#trace div { display: grid; grid-template-columns: 12px 76px 1fr auto; gap: 8px; align-items: center; font: 500 12px var(--mono); color: var(--mut); transition: color .3s; }
#trace i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mut); transition: all .3s; }
#trace div.on { color: var(--ink); } #trace div.on i { background: var(--sc); border-color: var(--sc); box-shadow: 0 0 12px var(--sc); }
#trace div.on b { color: var(--sc); }
#trace div.wait i { border-color: var(--amber); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 14px var(--amber); background: var(--amber); } }
#out { margin-top: 14px; }
.hired { display: grid; gap: 7px; margin-bottom: 12px; }
.hired div { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font: 500 12px var(--mono); color: var(--mut); transition: color .3s; }
.hired svg { width: 26px; height: 26px; opacity: .35; transition: opacity .3s; } .hired div.on { color: var(--ink); } .hired div.on svg { opacity: 1; } .hired em { font-style: normal; }
.ans { padding: 14px 16px; border-radius: 14px; background: rgba(63,214,194,.07); border: 1px solid rgba(63,214,194,.3); font: 500 12.5px/1.6 var(--mono); color: #e6fffa; white-space: pre-wrap; }
.ans .pa { display: block; width: 100%; border-radius: 10px; } .ans p { margin-top: 8px; color: var(--dim); }

.blk { margin-top: 70px; }
.blk h2 { margin-top: 12px; font: 800 clamp(26px, 3vw, 38px)/1.05 var(--disp); letter-spacing: -.03em; }
.blk h2 em { font-style: normal; color: var(--mut); }
.blk > p { margin-top: 10px; max-width: 640px; font: 400 16px/1.6 var(--sans); color: var(--dim); }
#ctabs { display: flex; gap: 6px; margin: 20px 0 12px; }
#ctabs button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: 600 12px var(--mono); color: var(--dim); }
#ctabs button.on { background: var(--ink); color: #0b0820; border-color: var(--ink); }
#takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 20px; }
.tk { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.tk b { display: flex; align-items: center; gap: 8px; font: 700 15px var(--mono); } .tk b .tkn { width: 24px; height: 24px; } .tk span { display: block; margin-top: 6px; font: 500 12px var(--mono); color: var(--dim); }
#card { margin-top: 20px; }
.recent { margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
.rr { display: grid; grid-template-columns: 80px 1fr 150px 70px 110px; gap: 10px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font: 500 12.5px var(--mono); color: var(--dim); }
.rr:first-child { border-top: 0; } .rr .who { display: flex; align-items: center; gap: 8px; color: var(--ink); } .rr svg { width: 24px; height: 24px; }
.rr .pt { display: inline-grid; place-items: center; width: 24px; height: 24px; color: #bfe2ff; font-size: 16px; }
.rr span:nth-child(3) { color: var(--amber); }
#nb { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 20px; }
#nb a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s, transform .2s; }
#nb a:hover { border-color: var(--nc); transform: translateY(-3px); }
#nb svg { width: 64px; height: 64px; } #nb b { font: 700 13px var(--disp); } #nb span { font: 500 10.5px var(--mono); color: var(--mut); }

@media (max-width: 1100px) { .rhero { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .main { display: contents; } .main > * { order: 0; } .hire { order: 1; margin-top: 28px; } .main > .blk { order: 2; } .hire { position: relative; top: 0; } #nb { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) {
  .rhero { padding-top: 22px; gap: 28px; } .intro { flex-direction: column; align-items: flex-start; gap: 10px; } .world { width: min(260px, 70vw); margin: 0 auto; }
  #stats { grid-template-columns: repeat(2, 1fr); } #stats div { border-left: 0; border-top: 1px solid var(--line); } #stats div:nth-child(-n+2) { border-top: 0; } #stats div:nth-child(even) { border-left: 1px solid var(--line); } #stats div:last-child { grid-column: span 2; border-left: 0; }
  .rr { grid-template-columns: 56px 1fr auto; } .rr span:nth-child(4), .rr span:nth-child(5) { display: none; }
  #line { font-size: 19px; } .hire { padding: 18px; }
}