/* ruosenzhao base components -- everything is driven by the tokens in tokens.css */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font:var(--fs-md)/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:calc(var(--pad) * 1.25) var(--pad) calc(var(--pad) * 2)}
.topbar{display:flex; align-items:center; gap:var(--gap); min-height:56px; padding:0 var(--pad);
  border-bottom:1px solid var(--divider); position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(140%) blur(10px)}
.topbar .spacer{flex:1}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 16px; border-radius:var(--r-md);
  border:1px solid var(--edge); background:var(--raised); color:var(--fg);
  font:inherit; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn-icon{width:var(--tap); padding:0; font-size:var(--fs-lg)}

.grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
@media (max-width:600px){ .grid{grid-template-columns:1fr} }

.card{display:block; padding:18px; border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--divider); box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
a.card:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--edge)}
.card h3{margin:0 0 6px; font-size:var(--fs-lg)}
.card p{margin:0; color:var(--muted); font-size:var(--fs-sm)}

.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); background:var(--surface-2); color:var(--muted); border:1px solid var(--divider)}
.chip-accent{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.h1{font-size:var(--fs-3xl); font-weight:700; letter-spacing:-.02em; margin:0 0 6px}
.sub{color:var(--muted); margin:0 0 22px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }