:root { --bg:#f6f6f4; --card:#ffffff; --line:#e4e4e0; --txt:#1c1c22; --dim:#6d6d78; --accent:#5b8a00; --en:#0b6bcb; }
* { margin:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--txt); font:15px/1.55 -apple-system, "SF Pro", "Segoe UI", Roboto, sans-serif; padding:28px 16px 80px; }
.wrap { max-width:980px; margin:0 auto; }
.backlink { display:inline-block; margin-bottom:12px; font-size:13px; color:var(--en); text-decoration:none; font-weight:600; }
.backlink:hover { text-decoration:underline; }
.tag { display:inline-block; background:#efefea; border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:12.5px; color:var(--dim); margin:0 6px 6px 0; }
.tag b { color:var(--accent); font-weight:600; }
.tag.v { background:#eef6da; border-color:#cfe3a0; color:#4a6f00; }
.tag.win { background:#d9f2c2; border-color:#9ed06a; color:#3f6200; font-weight:700; }
.tag.win b { color:#2f4d00; }
h1 { font-size:28px; letter-spacing:-.02em; margin:12px 0 4px; }
h2 { font-size:18px; margin:30px 0 10px; }
.sub { color:var(--dim); margin-bottom:16px; font-size:14px; }

.tl-outer { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 18px 10px; overflow-x:auto; }
.lane { display:flex; align-items:stretch; margin-bottom:10px; }
.lane-label { flex:0 0 130px; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); padding-top:8px; }
.lane-label small { display:block; text-transform:none; letter-spacing:0; color:#a3a3ad; margin-top:2px; }
.blocks { display:flex; flex:1; }
.ruler { display:flex; flex:1; border-bottom:1px solid var(--line); margin-bottom:12px; }
.ruler .sec { flex:0 0 100px; font-size:11px; color:#a3a3ad; border-left:1px dashed #d9d9d3; padding:0 0 4px 4px; }
.ruler .sec:first-child { border-left:none; }
.vblock { border:1px solid var(--line); border-radius:10px; background:#fbfbfa; margin-right:8px; padding:8px; display:flex; flex-direction:column; }
.vblock:last-child { margin-right:0; }
.vblock .t { font-size:11.5px; font-weight:700; color:var(--accent); margin-bottom:2px; }
.vblock .name { font-size:12.5px; font-weight:600; margin-bottom:6px; }
.vblock pre { font:9.5px/1.25 ui-monospace, Menlo, monospace; color:#3a3a44; background:#f2f2ee; border:1px solid var(--line); border-radius:8px; padding:8px; overflow:hidden; flex:1; }
.vblock img.frame { width:100%; flex:1; min-height:280px; max-height:340px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#f2f2ee; display:block; }
.vblock .note { font-size:11.5px; color:var(--dim); margin-top:6px; }
.vblock.reveal { border:2px dashed #b03030; background:#fffafa; }
.vblock.pip { border:1px solid #b9d6f2; background:#f7fbff; }
.badge { display:inline-block; border-radius:6px; padding:1px 7px; font-size:10.5px; font-weight:700; margin-left:6px; vertical-align:1px; white-space:nowrap; }
.badge.cut { background:#fdeaea; border:1px solid #f2c1c1; color:#b03030; }
.badge.pip { background:#e3f0fb; border:1px solid #b9d6f2; color:#0b6bcb; }
.badge.rehook { background:#efe6fb; border:1px solid #d5c2f2; color:#6a3fb5; }
.badge.loop { background:#efefea; border:1px solid #d9d9d3; color:#6d6d78; }
.cblock { flex:1; margin-right:8px; background:#eef6da; border:1px solid #cfe3a0; border-radius:8px; padding:6px 10px; font-size:12px; color:#4a6f00; align-self:center; }
.ablock { margin-right:8px; border-radius:8px; padding:6px 10px; font-size:11.5px; align-self:center; }
.vo  { background:#e3f0fb; border:1px solid #b9d6f2; color:#0b6bcb; }
.sfx { background:#fdeaea; border:1px solid #f2c1c1; color:#b03030; }
.sil { background:#f2f2ee; border:1px dashed #c8c8c0; color:#6d6d78; }
.mus { background:#efe6fb; border:1px solid #d5c2f2; color:#6a3fb5; }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--dim); margin:4px 0 0 148px; padding-bottom:8px; }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.legend .l-vo::before { background:#e3f0fb; border:1px solid #b9d6f2; }
.legend .l-sfx::before { background:#fdeaea; border:1px solid #f2c1c1; }
.legend .l-sil::before { background:#f2f2ee; border:1px dashed #c8c8c0; }
.legend .l-cap::before { background:#eef6da; border:1px solid #cfe3a0; }
.legend .l-mus::before { background:#efe6fb; border:1px solid #d5c2f2; }

/* trial index cards */
.cards { display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:block; text-decoration:none; color:var(--txt); }
.card:hover { border-color:#cfe3a0; }
.card .skill { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); }
.card .name { font-size:18px; font-weight:700; margin:4px 0 6px; }
.card .hook { font-size:13.5px; color:var(--en); background:#e3f0fb; border:1px solid #b9d6f2; border-radius:8px; padding:6px 10px; display:inline-block; }
.card .meta { font-size:12px; color:var(--dim); margin-top:8px; }
.card .go { font-size:12.5px; color:var(--accent); font-weight:600; margin-top:6px; }