body.search { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
[hidden] { display:none !important; }
.wrap { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-36) var(--space-48); max-width:var(--container); margin:0 auto; padding:var(--space-36) var(--web-gutter) 64px; box-sizing:border-box; }
.col { flex:999 1 520px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:var(--space-16); }
.side { flex:1 1 320px; max-width:400px; min-width:0; display:flex; flex-direction:column; gap:var(--space-16); }
.kicker { margin:0; font:600 13px/1.2 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
h1 { margin:0; font:800 clamp(48px, 7vw, 72px)/0.86 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
h2, h3 { margin:0; }
p { margin:0; }
.lede { max-width:620px; font-size:17px; line-height:1.5; color:var(--dim); }
.box { display:flex; align-items:center; gap:var(--space-10); }
.ctl { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--space-10); min-height:var(--control-xl); padding:0 var(--space-16); background:var(--night); border:1px solid var(--rule); border-radius:var(--radius-14); color:var(--dim); }
.ctl:focus-within { border-color:var(--signal); }
.ctl .oa-icon { width:22px; height:22px; flex:none; }
.ctl input { flex:1; min-width:0; min-height:var(--control-xl); padding:0; border:0; outline:0; background:transparent; color:var(--chalk); font:500 18px/1 var(--font-sans); }
.ctl input::placeholder { color:var(--dim); }
.clear { flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--control-lg); height:var(--control-lg); padding:0; background:transparent; border:1px solid var(--rule); border-radius:var(--radius-14); color:var(--chalk); cursor:pointer; }
.clear:hover { border-color:var(--signal); }
.clear .oa-icon { width:22px; height:22px; }
.private { display:flex; align-items:center; gap:var(--space-8); font:600 13px/1.4 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--chalk); }
.private .oa-icon { width:16px; height:16px; flex:none; }
.status { min-height:1.4em; font:600 13px/1.4 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); }
.status:empty { display:none; }
.nojs { padding:var(--space-12) var(--space-14); border:1px solid var(--rule); border-radius:var(--radius-10); background:var(--panel); color:var(--chalk); font-size:14px; line-height:1.45; }
.sec { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); flex-wrap:wrap; padding-top:var(--space-10); font:600 13px/1.3 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk); }
.sec span { display:inline-flex; align-items:center; gap:var(--space-6); }
.sec .oa-icon { width:16px; height:16px; }
.sec .aside { color:var(--dim); }
.rows { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule); }
.listbox { display:flex; flex-direction:column; border-bottom:1px solid var(--rule); }
.row { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:var(--space-14); min-height:68px; padding:var(--space-10) var(--space-8); box-sizing:border-box; border-top:1px solid var(--rule); color:var(--chalk); text-decoration:none; }
.rows .row { grid-template-columns:28px minmax(0, 1fr) auto; min-height:64px; padding-left:0; padding-right:0; }
a.row:hover { color:var(--signal); }
.row[aria-selected="true"] { background:color-mix(in oklch, var(--signal) 12%, var(--panel)); box-shadow:inset 0 0 0 1px var(--signal); border-radius:var(--radius-10); }
.row:focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
.tile { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--raised); border:1px solid var(--rule); border-radius:var(--radius-12); font:700 17px/1 var(--font-display); text-transform:uppercase; color:var(--chalk); }
.rank { font:600 13px/1 var(--font-mono); color:var(--dim); }
.who { min-width:0; display:flex; flex-direction:column; gap:var(--space-6); }
.name { font:700 22px/1 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
.meta { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-12); font:500 13px/1.3 var(--font-mono); letter-spacing:0.04em; text-transform:uppercase; color:var(--dim); }
.meta .mine { display:inline-flex; align-items:center; gap:var(--space-4); font-weight:600; color:var(--signal); }
.meta .mine .oa-icon { width:14px; height:14px; }
.takes { font:600 13px/1 var(--font-mono); color:var(--chalk); white-space:nowrap; text-transform:uppercase; }
.panel { display:flex; flex-direction:column; gap:var(--space-12); padding:var(--space-20); background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-20); }
.panel h2 { font:600 13px/1.4 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk); overflow-wrap:anywhere; }
.panel p, .panel li { font-size:14px; line-height:1.45; color:var(--dim); }
.panel ul { margin:0; padding-left:var(--space-20); display:flex; flex-direction:column; gap:var(--space-6); }
.panel .head { font:800 27px/0.95 var(--font-display); text-transform:uppercase; color:var(--chalk); }
.panel .ex { font:500 13px/1.3 var(--font-mono); letter-spacing:0.04em; text-transform:uppercase; }
.panel .strong { font:600 13px/1.4 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--chalk); }
.panel .rows { margin-top:var(--space-4); }
@media (max-width:480px) { .row { gap:var(--space-10); } .name { font-size:20px; } .takes { font-size:13px; } }