:root{--ink:#10192d;--ink2:#293550;--muted:#69748a;--paper:#f7f8fb;--white:#fff;--line:#dfe3eb;--blue:#335cff;--blue-soft:#e9edff;--yellow:#ffd75a;--yellow-soft:#fff6d6;--mint:#56c9a5;--serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;--sans:'Avenir Next',Avenir,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:0 0 8px 8px;z-index:100}.skip:focus{top:0}.shell{width:min(1120px,calc(100% - 36px));margin:auto}.top{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.04em}.brand span:last-child{color:var(--blue)}.mark{width:34px;height:34px;border-radius:11px;background:url('./favicon.svg?v=rolebyrole-1') center/cover no-repeat;flex:none}.top nav{display:flex;gap:18px;align-items:center}.top nav a{text-decoration:none;font-size:11px;font-weight:800}.top .cta{background:var(--ink);color:white;padding:10px 13px;border-radius:10px}.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.65fr);gap:40px;padding:78px 0 55px;align-items:end}.eyebrow{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--blue)}h1{font:600 clamp(48px,8vw,92px)/.88 var(--serif);letter-spacing:-.065em;margin:14px 0 21px}.hero-copy>p{max-width:690px;font-size:16px;line-height:1.7;color:var(--muted)}.hero-ticket{background:var(--yellow-soft);border:1px solid #eed77e;border-radius:20px;padding:26px;transform:rotate(1.5deg)}.hero-ticket small{font:500 9px var(--mono);color:#8a6610;text-transform:uppercase;letter-spacing:.1em}.hero-ticket strong{display:block;font:600 34px/1 var(--serif);margin:25px 0 10px}.hero-ticket p{font-size:11px;line-height:1.6;color:var(--muted)}.section{padding:48px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:21px}.section-head h2{font:600 clamp(32px,4vw,50px)/.96 var(--serif);letter-spacing:-.045em;margin:0}.section-head p{max-width:470px;color:var(--muted);font-size:12px;line-height:1.7;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px;min-height:240px;display:flex;flex-direction:column;text-decoration:none;transition:.2s ease}.card:hover{transform:translateY(-3px);border-color:#bdc6d8;box-shadow:0 20px 45px rgba(20,32,57,.08)}.status{width:max-content;padding:6px 8px;border-radius:7px;background:var(--blue-soft);color:var(--blue);font:500 8px var(--mono);letter-spacing:.1em;text-transform:uppercase}.status.soon{background:var(--yellow-soft);color:#8a6610}.card h3{font:600 27px/1 var(--serif);margin:25px 0 9px}.card p{color:var(--muted);font-size:11px;line-height:1.65}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:18px}.tags span{border:1px solid var(--line);border-radius:7px;padding:6px;font:500 8px var(--mono)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}.step{background:var(--white);padding:24px;min-height:190px}.step b{display:block;color:var(--blue);font:500 10px var(--mono);margin-bottom:35px}.step h3{font:600 21px/1 var(--serif);margin:0 0 9px}.step p{font-size:10px;line-height:1.6;color:var(--muted)}.role-hero{padding:65px 0 35px}.role-hero h1{max-width:920px}.role-meta{display:flex;gap:8px;flex-wrap:wrap}.role-meta span{font:500 9px var(--mono);background:var(--white);border:1px solid var(--line);padding:8px 10px;border-radius:8px}.prose{display:grid;grid-template-columns:240px minmax(0,1fr);gap:55px;padding:25px 0 65px}.toc{position:sticky;top:25px;height:max-content;border-left:3px solid var(--blue);padding-left:16px}.toc a{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin:10px 0;text-decoration:none}.article section{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(23px,4vw,38px);margin-bottom:16px}.article h2{font:600 34px/1 var(--serif);letter-spacing:-.035em;margin:0 0 13px}.article h3{font-size:14px;margin:25px 0 8px}.article p,.article li{font-size:13px;line-height:1.75;color:var(--muted)}.article a{color:var(--blue)}.note{background:var(--blue-soft)!important;border-color:#ccd5ff!important}.button{display:inline-block;background:var(--blue);color:white!important;text-decoration:none;padding:12px 16px;border-radius:10px;font-weight:800;font-size:12px;margin-top:10px}footer{border-top:1px solid var(--line);padding:28px 0 50px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}footer a{color:var(--ink2);font-weight:700;text-decoration:none}@media(max-width:760px){.top nav a:not(.cta){display:none}.hero{grid-template-columns:1fr;padding-top:52px}.hero-ticket{transform:none}.section-head{display:block}.section-head p{margin-top:12px}.grid,.steps{grid-template-columns:1fr}.prose{grid-template-columns:1fr;gap:20px}.toc{position:static}.role-hero{padding-top:48px}footer{flex-direction:column}}
.article p,.article li{font-size:clamp(14px,1.4vw,15px);line-height:1.72}
:root{color-scheme:light}html[data-theme="dark"]{color-scheme:dark;--ink:#eef3ff;--ink2:#cbd4e7;--muted:#9ba8bf;--paper:#090f1d;--white:#111a2b;--line:#2a3650;--blue:#8aa2ff;--blue-soft:#1b2a55;--yellow:#ffd75a;--yellow-soft:#332b16;--mint:#72d8b7}.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font:700 17px/1 var(--sans);cursor:pointer}.theme-toggle:hover{border-color:var(--blue)}.theme-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}html[data-theme="dark"] .top .cta{background:#eef3ff;color:#10192d}html[data-theme="dark"] .hero-ticket{border-color:#69591f}html[data-theme="dark"] .hero-ticket small,html[data-theme="dark"] .status.soon{color:#f0d474}html[data-theme="dark"] .card:hover{border-color:#485774;box-shadow:none}html[data-theme="dark"] .button{color:#0b1220!important}html[data-theme="dark"] .skip{background:#eef3ff;color:#10192d}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--white)}.comparison-table th,.comparison-table td{padding:15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6}.comparison-table th{background:var(--blue-soft);color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.comparison-table td{color:var(--muted)}.comparison-table tr:last-child td{border-bottom:0}.comparison-table a{color:var(--blue);font-weight:800}.source-note{margin-top:16px;color:var(--muted);font-size:12px;line-height:1.7}.source-note a{color:var(--blue);font-weight:800}@media(max-width:650px){.comparison-table{display:block;overflow-x:auto}.comparison-table th,.comparison-table td{min-width:145px}}