*{box-sizing:border-box}
:root{--ink:#222;--muted:#6B6B6B;--line:#BDBDBD;--paper:#FFFFFF;--desk:#F0F0F0;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--sans)}
a{color:var(--ink)}
a:focus-visible{outline:2px solid #4A90E2;outline-offset:2px}

/* top bar */
.bar{position:sticky;top:0;z-index:5;min-height:52px;display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap;overflow-x:auto}
.bar a{color:var(--ink)}
.bar .home{font-weight:600;text-decoration:none}
.bar .rolename,.bar .count{color:var(--muted)}
.bar .title{font-weight:600}
.bar .pn{margin-left:auto;display:flex;gap:8px}
.bar .pn a,.bar .pn .off{padding:6px 12px;border:1px solid var(--line);border-radius:4px;text-decoration:none;background:#fff}
.bar .pn .off{opacity:.4}
.bar .pn a:hover{background:#F5F5F5}

/* stage and frame */
.stage{overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:24px}
.frame{flex-shrink:0;background:var(--paper);overflow:hidden;transform-origin:top center;border:1px solid #9E9E9E}
.phone .frame{border-radius:28px;box-shadow:0 0 0 8px #DADADA}
.desk .frame{border-radius:4px}
.frame,.frame *{font-family:var(--sans) !important}
.frame a{color:inherit}
.frame input,.frame textarea{border:1px solid #9E9E9E !important;background:#fff !important;border-radius:4px !important}
/* image and media placeholders: grey box with an X */
.frame [style*="dashed"]{border:1px solid #BDBDBD !important;color:var(--muted) !important;font-weight:500;
 background:linear-gradient(to top right,transparent calc(50% - .5px),#C4C4C4 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#C4C4C4 50%,transparent calc(50% + .5px)),#EEEEEE !important}

/* index and coverage */
.index .wrap{max-width:1180px;margin:0 auto;padding:48px 24px 80px}
.index h1{font-size:30px;margin:0 0 10px}
.lede{max-width:760px;line-height:1.55;margin:0 0 24px;color:#444}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:24px}
.role{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column}
.role h2{font-size:18px;margin:0 0 2px}
.role .n{margin:0 0 12px;color:var(--muted);font-size:13px}
.role ol{margin:0 0 16px;padding-left:22px;font-size:14px;line-height:1.8;flex-grow:1}
.role ol a{color:var(--ink)}
.start{display:inline-block;align-self:flex-start;background:#333;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:9px 16px;border-radius:4px}
.foot{color:var(--muted);font-size:13px;margin-top:32px}
.cov{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin:0 0 18px}
.cov h2{font-size:16px;margin:0 0 10px}
.cov table{width:100%;border-collapse:collapse;font-size:13px}
.cov th{text-align:left;border-bottom:1px solid #9E9E9E;padding:6px 8px}
.cov td{border-bottom:1px solid #E6E6E6;padding:8px;vertical-align:top}
.cov td:first-child{width:42%}
.sc{display:inline-block;margin:2px 6px 2px 0;padding:2px 8px;border:1px solid var(--line);border-radius:4px;color:var(--ink);text-decoration:none;background:#F7F7F7}
.sc:hover{background:#EEEEEE}
.tag{color:var(--muted);font-style:italic}
@media (max-width:520px){.bar .rolename,.bar .count{display:none}.stage{padding:0}.phone .frame{border-radius:0;border-width:0;box-shadow:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}