.ex-main { padding-top:64px; padding-bottom:64px; }
.ex-main h1 { font:500 clamp(38px,6vw,76px)/1.04 var(--display); letter-spacing:-.04em; margin:24px 0; }
.ex-main h1 em { font-family:var(--serif); font-weight:400; }
.ex-lead { color:var(--ink-muted); max-width:640px; font-size:18px; line-height:1.6; }
.ex-tools { display:flex; flex-wrap:wrap; gap:8px; margin:36px 0; }
.ex-tools a { padding:10px 15px; color:var(--ink); border:1px solid var(--hairline-strong); border-radius:var(--r-full); text-decoration:none; font:14px/1.5 var(--sans); }
.ex-tools a[aria-current] { color:var(--paper); background:var(--ink); }
.ex-example { padding:32px 0; border-top:1px solid var(--hairline-strong); }
.ex-example[hidden] { display:none; }
.ex-head { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.ex-badge { font-size:12px; color:var(--ink-muted); }
.ex-example h2 { font:500 clamp(28px,4vw,46px)/1.1 var(--display); letter-spacing:-.03em; max-width:700px; margin:28px 0; }
.ex-story { display:grid; grid-template-columns:1fr 1.2fr; gap:56px; margin:36px 0; }
.ex-scenario { font:400 26px/1.4 var(--display); max-width:420px; }
.ex-label { color:var(--ink-muted); font-size:13px; line-height:1.5; }
.ex-output { padding:28px; background:var(--paper-inset); border:1px solid var(--hairline); border-radius:var(--r-lg); }
.ex-output h3 { font:500 26px/1.2 var(--display); margin:16px 0; }
.ex-output p { line-height:1.65; }
.ex-output ol { padding-left:20px; line-height:1.9; }
.ex-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.ex-actions > a { display:inline-flex; align-items:center; min-height:44px; }
.ex-actions p { width:100%; font-size:13px; color:var(--ink-muted); }
@media(max-width:700px) { .ex-main { padding-top:36px; } .ex-story { grid-template-columns:1fr; gap:20px; } .ex-output { padding:20px; } .ex-head { align-items:flex-start; } .ex-tools { gap:6px; } }

/* Start with a task before exposing the full tool vocabulary. */
.ex-main h1{max-width:850px}
.ex-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0 20px}
.ex-start a{display:flex;flex-direction:column;gap:12px;min-height:120px;padding:22px;border:1px solid var(--hairline-strong);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;background:var(--paper-inset)}
.ex-start a>span{font-size:12px;line-height:1.5;color:var(--ink-muted)}
.ex-start strong{font:500 22px/1.2 var(--display);letter-spacing:-.025em}
.ex-start a[aria-current]{border-color:var(--signal);outline:1px solid var(--signal);outline-offset:-1px}
.ex-start a:hover strong{text-decoration:underline;text-underline-offset:4px}
.ex-more{margin-bottom:24px}
.ex-more summary{cursor:pointer;padding:12px 0;min-height:44px;font-size:14px}
.ex-more .ex-tools{margin:12px 0 24px}
.ex-more summary:focus-visible,.ex-start a:focus-visible{outline:2px solid var(--signal);outline-offset:5px}
.ex-output h4{font-size:17px;margin:24px 0 12px}
.ex-output .ex-arithmetic{font-size:22px;font-variant-numeric:tabular-nums}
.ex-story>div>p:not(.c-kicker):not(.ex-scenario){line-height:1.65}
@media(max-width:700px){.ex-main{padding-top:28px}.ex-main h1{font-size:38px}.ex-lead{font-size:16px}.ex-start{grid-template-columns:1fr;gap:10px;margin-top:24px}.ex-start a{min-height:0;padding:16px;gap:6px}.ex-start strong{font-size:19px}.ex-example{scroll-margin-top:20px}.ex-story{margin-block:24px}.ex-scenario{font-size:23px}}

/* Keep every navigation destination available without a script or hidden menu. */
.campaign .ex-header .c-header-inner{flex-wrap:wrap;gap:12px 24px;padding-block:12px}
.campaign .ex-header .c-nav{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:4px 16px;background:transparent;max-width:100%}
.campaign .ex-header .c-nav a{min-height:44px;padding:8px 0;border:0;white-space:nowrap}
.campaign .ex-header .c-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.campaign .ex-header .c-nav a.ex-nav-trial{padding:10px 16px;border-radius:var(--r-full);background:var(--ink);color:var(--paper)}
.campaign .ex-header .c-nav a:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(max-width:760px){.campaign .ex-header .c-nav{flex-basis:100%;gap:4px 16px;padding-top:4px}.campaign .ex-header .c-nav a.ex-nav-trial{margin-left:auto}}