main#main { max-width:var(--container); padding:var(--space-36) var(--web-gutter) var(--space-48); }
.wk { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-36) var(--space-48); }
.wk-main { flex:999 1 560px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:var(--space-16); }
.wk-side { flex:1 1 300px; min-width:0; max-width:380px; display:flex; flex-direction:column; gap:var(--space-20); }
.wk-eyebrow, .wk-meta, .wk-k, .wk-lbl, .wk-count { font:600 13px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.wk-eyebrow, .wk-k { margin:0; color:var(--dim); }
.wk h1 { margin:0; font:800 clamp(48px, 7vw, 72px)/.86 var(--font-display); text-transform:uppercase; }
.wk-lede { margin:0; max-width:620px; font-size:17px; line-height:1.5; color:var(--dim); }
.wk-play { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10) var(--space-16); }
.wk-play[hidden], .wk-caught[hidden], .wk-note[hidden] { display:none; }
.wk-play .oa-btn { text-transform:uppercase; }
.wk-meta { margin:0; color:var(--chalk); }
.wk-length { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10) var(--space-16); padding:var(--space-4) 0 var(--space-6); }
.wk-seg { display:inline-flex; flex-wrap:wrap; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--rule); border-radius:var(--radius-10); }
.wk-seg a, .wk-seg > span { display:inline-flex; align-items:center; gap:var(--space-6); min-height:44px; padding:0 var(--space-14); border-radius:var(--radius-6); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--chalk); box-sizing:border-box; }
.wk-seg a:hover { color:var(--signal); }
.wk-seg a[aria-current="page"] { background:var(--signal); color:var(--night); }
.wk-seg .wk-locked { color:var(--dim); }
.wk-seg .oa-icon { font-size:16px; }
.wk-help { font-size:13px; line-height:1.4; color:var(--dim); }
.wk-lbl { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4) var(--space-16); margin:var(--space-8) 0 0; color:var(--chalk); }
.wk-lbl span + span { color:var(--dim); }
.wk-queue, .wk-more { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule); }
.wk-item { border-top:1px solid var(--rule); }
.wk-item > .sg-split { border-top:0; }
.wk .take { background:transparent; border:0; border-radius:0; padding:var(--space-16) 0; }
.wk .take.playing { box-shadow:none; }
.wk .takes { gap:0; }
.wk .take.played { opacity:.6; }
.wk-played-tag { color:var(--chalk); }
.wk-end { display:flex; align-items:center; gap:var(--space-14); padding:var(--space-16) 0; border-top:1px solid var(--rule); }
.wk-end p { margin:0; color:var(--dim); font-size:13px; line-height:1.4; }
.wk-end strong { display:block; color:var(--chalk); font:700 17px/1.2 var(--font-display); text-transform:uppercase; }
.wk-tile { display:inline-flex; flex:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--rule); border-radius:var(--radius-full); background:var(--raised); color:var(--signal); }
.wk-tile.lg { width:64px; height:64px; }
.wk-tile.lg .oa-icon { font-size:30px; }
.wk-caught { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-20); padding:var(--space-20); border:1px solid var(--rule); border-radius:var(--radius-16); background:var(--panel); }
.wk-caught > div { flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:var(--space-10); }
.wk-caught h2 { margin:0; font:800 32px/1 var(--font-display); text-transform:uppercase; }
.wk-caught p { margin:0; font-size:15px; line-height:1.45; color:var(--chalk); }
.wk-count { color:var(--dim); }
.wk-actions { display:flex; flex-wrap:wrap; gap:var(--space-10); }
.wk-actions .oa-btn { text-transform:uppercase; }
.wk-also { display:flex; flex-direction:column; gap:var(--space-12); margin-top:var(--space-12); }
.wk-also > p { margin:0; font-size:13px; line-height:1.4; color:var(--dim); }
.wk-card { display:flex; flex-direction:column; gap:var(--space-10); padding:var(--space-16); border:1px solid var(--rule); border-radius:var(--radius-14); background:var(--panel); min-width:0; }
.wk-card p { margin:0; font-size:13px; line-height:1.45; color:var(--dim); }
.wk-card h2 { margin:0; font:800 26px/1 var(--font-display); text-transform:uppercase; }
.wk-card ul { list-style:none; margin:0; padding:0; }
.wk-cov { display:flex; justify-content:space-between; gap:var(--space-12); align-items:center; min-height:44px; border-top:1px solid var(--rule); font:500 13px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); text-decoration:none; }
.wk-cov b { display:block; color:var(--chalk); font:700 17px/1.2 var(--font-display); }
a.wk-cov:hover b { color:var(--signal); }
.wk-card details summary { display:flex; justify-content:space-between; align-items:center; gap:var(--space-8); min-height:44px; cursor:pointer; font:600 13px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); }
.wk-card details .oa-icon { font-size:18px; }
.wk-rules li { display:flex; gap:var(--space-8); padding:var(--space-4) 0; color:var(--dim); font-size:13px; line-height:1.45; }
.wk-rules .oa-icon { flex:none; font-size:18px; }
.wk-card .oa-btn { align-self:flex-start; text-transform:uppercase; }
.wk-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:640px) {
  .wk-seg { width:100%; }
  .wk-seg a, .wk-seg > span { flex:1 1 auto; justify-content:center; }
  .wk-play .oa-btn { width:100%; }
}
.pc-x { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; padding:0 var(--space-8); border:1px solid var(--signal); border-radius:var(--radius-full); font:700 13px/1 var(--font-mono); letter-spacing:.04em; color:var(--signal); background:transparent; white-space:nowrap; }
span.pc-x { min-height:24px; }
button.pc-x { min-width:44px; min-height:44px; cursor:pointer; }
button.pc-x:hover, button.pc-x:focus-visible { background:var(--signal); color:var(--night); }
.wk-cov-n { display:inline-flex; align-items:center; gap:var(--space-8); flex:none; }
button.wk-cov { width:100%; margin:0; padding:0; border:0; border-top:1px solid var(--rule); background:transparent; text-align:left; cursor:pointer; }
button.wk-cov:hover b { color:var(--signal); }
dialog.pc { box-sizing:border-box; width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; padding:var(--space-20); border:1px solid var(--rule); border-radius:var(--radius-14); background:var(--panel); color:var(--chalk); }
dialog.pc::backdrop { background:var(--scrim); }
.pc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-12); }
.pc h2 { margin:0; font:800 28px/1 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
.pc p { margin:var(--space-10) 0 0; font-size:13px; line-height:1.45; color:var(--dim); }
.pc .pc-sum { font:600 13px/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--chalk); }
.pc ul { list-style:none; margin:var(--space-10) 0 0; padding:0; }
.pc li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4) var(--space-12); padding:var(--space-10) 0; border-top:1px solid var(--rule); font:500 13px/1.4 var(--font-mono); color:var(--dim); }
.pc li b { flex:1 1 100%; color:var(--chalk); font:700 15px/1.3 var(--font-display); overflow-wrap:anywhere; }
.pc-k { margin-top:var(--space-16); font:600 13px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); }
.pc-actions { display:flex; flex-wrap:wrap; gap:var(--space-10); margin-top:var(--space-16); }
.pc button, .pc a.pc-link { min-height:44px; }
.pc-close { flex:none; min-width:44px; padding:0 var(--space-10); border:1px solid var(--rule); border-radius:var(--radius-6); background:transparent; color:var(--chalk); font:600 13px/1 var(--font-mono); text-transform:uppercase; cursor:pointer; }
.pc-forget { padding:0; border:0; background:transparent; color:var(--dim); font-size:13px; text-decoration:underline; cursor:pointer; }

.save-note { margin:0 0 var(--space-16); padding:var(--space-12) var(--space-16); background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-12); color:var(--chalk); font-size:15px; line-height:1.45; }
.save-note a { color:var(--signal); }