:root{color-scheme:dark;--bg: #0b0f14;--panel: #0f1620;--text: #e6edf3;--muted: #9aa4b2;--accent: #4cff7a;--maxw: 980px;--pad: 24px;--radius: 16px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad)}h1{font-size:44px;line-height:1.1;margin:0 0 16px;letter-spacing:-.02em}p{margin:0 0 12px;color:var(--muted)}.card{background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px}.ratrak-btn{position:fixed;right:12px;top:32%;transform:translateY(-50%);width:48px;height:48px;border:none;box-shadow:none;padding:0;background:transparent;cursor:pointer;z-index:50;transition:right .22s ease}.ratrak-sprite{width:48px;height:48px;border-radius:10px;border:none;display:grid;place-items:center;user-select:none;overflow:hidden}.ratrak-sprite img{width:48px;height:48px;image-rendering:pixelated;image-rendering:crisp-edges;display:block}.ratrak-drawer{position:fixed;inset:0 0 0 auto;width:min(360px,calc(100vw - 72px));height:100vh;background:color-mix(in srgb,var(--panel) 92%,transparent);border-left:1px solid rgba(255,255,255,.08);transform:translate(100%);transition:transform .22s ease;z-index:60;padding:18px 16px;backdrop-filter:blur(10px)}.ratrak-drawer[data-open=true]{transform:translate(0)}.ratrak-backdrop{position:fixed;inset:0;background:#00000059;opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:55}.ratrak-backdrop[data-open=true]{opacity:1;pointer-events:auto}.drawer-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.drawer-title strong{color:var(--text)}.drawer-title small{color:var(--muted)}.drawer-nav{display:grid;gap:10px;margin-top:14px}.drawer-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff08}.drawer-link:hover{background:#ffffff0f;text-decoration:none}.kbd-hint{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.1);padding:2px 6px;border-radius:8px}.ratrak-bubble{position:fixed;right:72px;top:32%;transform:translateY(-50%);max-width:min(280px,calc(100vw - 96px));padding:10px 12px;border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text);z-index:65;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.ratrak-bubble[data-show=true]{opacity:1;transform:translateY(-50%) translate(0)}.ratrak-bubble:after{content:"";position:absolute;right:-8px;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);background:#ffffff0f;border-right:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}.ratrak-bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:13px;color:var(--text);background:transparent}.ratrak-btn[data-shift=true]{right:calc(12px + min(360px,calc(100vw - 72px)))}.ratrak-sprite{transition:transform .18s ease,filter .18s ease}.ratrak-btn[data-active=true] .ratrak-sprite{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(76,255,122,.45)) drop-shadow(0 0 14px rgba(76,255,122,.25))}.ratrak-btn[data-state=move] .ratrak-sprite{transform:translate(-1px) scale(1.03)}.ratrak-btn[data-state=blink] .ratrak-sprite{filter:drop-shadow(0 0 6px rgba(76,255,122,.35)) drop-shadow(0 0 12px rgba(76,255,122,.18))}.ratrak-btn[data-state=work] .ratrak-sprite{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(76,255,122,.45)) drop-shadow(0 0 14px rgba(76,255,122,.25))}@media(max-width:640px){.ratrak-btn{right:10px;top:auto;bottom:12px;transform:none}.ratrak-btn[data-active=true] .ratrak-sprite{transform:scale(.92)}.ratrak-bubble{display:none}.ratrak-drawer{width:calc(100vw - 20px);inset:auto 10px 10px;border-left:none;border-radius:18px;height:auto;padding:16px;transform:translateY(110%)}.ratrak-drawer[data-open=true]{transform:translateY(0)}}.hero{padding-top:12px}.hero .lead{margin-top:10px;font-size:18px;color:var(--muted)}.stack{margin-top:24px}.section{margin-top:44px}.section h2{margin:0 0 10px;font-size:20px;letter-spacing:-.01em;color:var(--text)}.section p{margin:0}.card{margin-top:24px}.muted{color:var(--muted)}.grid{display:grid;gap:14px}@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}}.item{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}.item:hover{background:#ffffff0d}.item-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}.item-title strong{color:var(--text)}.pill{font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:2px 8px}.item p{margin:0;color:var(--muted)}.item .meta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}.meta a{text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.18)}.meta a:hover{border-bottom-color:#ffffff59}.ratrak-btn:hover .ratrak-sprite{filter:drop-shadow(0 0 6px rgba(76,255,122,.25)) drop-shadow(0 0 14px rgba(76,255,122,.12))}.ratrak-btn:active .ratrak-sprite{transform:scale(.95)}@media(prefers-reduced-motion:reduce){.ratrak-btn{animation:none!important}}.ratrak-btn[data-bob=true]{animation:ratrak-bob 1.2s ease-in-out infinite}@keyframes ratrak-bob{0%,to{transform:translateY(0)}20%{transform:translateY(-6px)}40%{transform:translateY(0)}60%{transform:translateY(-4px)}80%{transform:translateY(0)}}.ratrak-btn[data-bob=true] .ratrak-float{animation:ratrak-bob 1.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.ratrak-btn[data-bob=true] .ratrak-float{animation:none!important}}.ratrak-btn[data-mode=game]{cursor:grab}.ratrak-btn[data-mode=game]:active{cursor:grabbing}.ratrak-btn[data-dir=right] img{transform:scaleX(-1)}.ratrak-btn[data-dir=left] img{transform:scaleX(1)}
