/* Colours come from the logo and the program's title bar; the fonts are those of its Ardoise theme */
:root{--bg:#fbfafb;--fg:#231e27;--muted:#655d6e;--line:#dcd6e0;--accent:#8a2f63;--code:#f0ecf2;--plum:#5a1d42;--dark:#15101a;--on-dark:#efe9f2;--on-dark-2:#b5abbd;--gut:clamp(16px,4vw,64px);--read:72ch;--serif:"DM Serif Display",Georgia,"Times New Roman",serif}
@media (prefers-color-scheme:dark){:root{--bg:#1b1620;--fg:#efe9f2;--muted:#ada3b6;--line:#3c3444;--accent:#e08ab8;--code:#2c2532}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 "Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:break-word}
a{color:var(--accent)}
img{max-width:100%;display:block;height:auto}
figure{margin:0}
figure img{width:100%}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,4vw,72px);margin-top:14px}
.split p,.split h3{margin:0 0 12px}
.split h3{margin-bottom:4px}
.tbl-col .tbl{margin-bottom:0}
@media (min-width:1000px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}.split.three{grid-template-columns:5fr 4fr 4fr}}
.wrap{width:100%;padding-inline:var(--gut)}
h1,h2{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:clamp(38px,5.2vw,104px);line-height:1.02}
h2{font-size:clamp(30px,3vw,56px);line-height:1.1;margin-bottom:14px}
h3{font-size:19px;margin:32px 0 4px}
.read{max-width:var(--read)}
.muted{color:var(--muted);font-size:15px}

/* The bar copies the program's title bar */
.bar{background:var(--plum);color:#fbeef5}
.bar nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px;min-height:52px;padding-block:8px}
.bar a{color:inherit;text-decoration:none;font-size:16px}
.bar a:hover,.bar a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;margin-right:auto}
.brand img{width:28px;height:28px}
.bar .go{background:#fff;color:var(--plum);font-weight:600;border-radius:5px;padding:4px 14px}

/* The stage: the slides are shown large on a dark, flat background */
.scene{background:var(--dark);color:var(--on-dark);padding:clamp(28px,4vw,72px) 0 clamp(24px,3vw,48px)}
.scene a{color:inherit}
.scene-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 6vw;margin-bottom:clamp(24px,3vw,48px)}
.scene-head p{margin:0;font-size:clamp(18px,1.25vw,23px);max-width:58ch;color:var(--on-dark)}
.cta{margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--plum);text-decoration:none;font-weight:700;border-radius:5px;padding:12px 22px;font-size:18px}
.btn:hover{background:#f4e4ee}
.btn svg{width:21px;height:21px}
.scene a.btn{color:var(--plum)}
main .btn{background:var(--plum);color:#fff}
main .btn:hover{background:#6e2651}
.cta small{display:block;margin-top:10px;font-size:15px;color:var(--on-dark-2)}
.reel{display:flex;gap:clamp(12px,1.6vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 12px;scroll-padding-inline:var(--gut);scrollbar-color:#574c60 transparent}
.reel:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.reel figure{flex:0 0 min(86vw,110vh);scroll-snap-align:start}
.reel img{width:100%}
.reel figcaption{padding-top:10px;color:var(--on-dark-2);font-size:16px}
.reel figcaption b{color:var(--on-dark);margin-right:8px;font-weight:600}
.reel-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:10px}
.reel-foot p{margin:0;color:var(--on-dark-2);max-width:var(--read);font-size:16px}
.arrows{display:flex;gap:6px;flex:none}
.arrows[hidden]{display:none}
.arrows button{font:inherit;font-size:20px;line-height:1;background:none;color:var(--on-dark);border:1px solid #574c60;border-radius:5px;padding:7px 15px;cursor:pointer}
.arrows button:hover{border-color:var(--on-dark)}
.short{padding-bottom:clamp(24px,3vw,44px)}
.short .read{margin:14px 0 0;font-size:19px}
.jump{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px}
.jump a{color:var(--on-dark-2);text-underline-offset:3px}
.jump a:hover{color:#fff}

section{padding:clamp(44px,5vw,88px) 0 0}
.scene{padding-top:clamp(28px,4vw,72px)}
.big{border:1px solid var(--line)}
figcaption{padding-top:8px;font-size:15.5px;color:var(--muted)}
main figure img{border:1px solid var(--line)}
.big img{border:0!important}

/* What it does: a plain list on two or three columns */
dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,3vw,56px)}
dl>div{border-top:1px solid var(--line);padding:12px 0 14px;display:grid;gap:2px}
dt{font-weight:700}
dd{margin:0;color:var(--muted)}
.cols>p{margin:18px 0 0}

/* Screens of different sizes */
.mos{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2vw,36px)}
.m4{display:grid;gap:clamp(20px,2vw,36px);align-content:start}

.dl{border-bottom:1px solid var(--line);margin-top:18px}
.dl a{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:baseline;border-top:1px solid var(--line);padding:14px 12px;color:var(--fg);text-decoration:none}
.dl b{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15}
.dl span{color:var(--muted);font-size:16px}
.dl em{color:var(--accent);font-style:normal;font-weight:700}
.dl a:hover{background:var(--code)}
.dl a.mine{box-shadow:inset 4px 0 0 var(--accent);background:var(--code)}
.help{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,56px);margin-top:18px;align-items:start}
details{padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
summary{cursor:pointer;font-weight:700;font-size:18px}
details p{margin:8px 0 0;max-width:var(--read)}
details ol,details ul{padding-left:22px;margin:8px 0 0}
li{margin:6px 0}
code{background:var(--code);border-radius:3px;padding:1px 5px;font:15px ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
kbd{background:var(--code);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 5px;font:14px ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;color:var(--fg)}
pre{background:var(--code);padding:10px 12px;overflow-x:auto;margin:8px 0}
pre code{padding:0;background:none}

.row{display:grid;grid-template-columns:minmax(0,1fr);gap:22px clamp(28px,3.5vw,72px);align-items:center}
.row p{margin:0 0 8px;max-width:var(--read)}
.row ul{padding-left:20px;margin:8px 0 0;max-width:var(--read)}
.row.top{align-items:start;margin-top:20px}
ul.two{padding-left:20px;margin:18px 0 0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(36px,4vw,72px)}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);margin-top:18px}
.themes figcaption{color:var(--fg);font-weight:600}
.band{background:var(--dark);color:var(--on-dark);margin:clamp(44px,5vw,88px) calc(-1*var(--gut)) 0;padding:clamp(32px,4vw,64px) var(--gut)}
.band img{border-color:#3a3142!important}
.band kbd{background:#2c2532;border-color:#574c60;color:var(--on-dark)}
.end{margin:32px 0 0}
ol.plain{padding-left:24px;margin:0;font-size:18px;max-width:var(--read)}

.tbl{overflow-x:auto;border-top:2px solid var(--fg);margin:14px 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;vertical-align:top;padding:9px 18px 9px 0;border-bottom:1px solid var(--line)}
thead th{font-size:14px;color:var(--muted);font-weight:600}
.tbl table{min-width:600px}
.keys{display:grid;grid-template-columns:minmax(0,1fr);gap:26px clamp(24px,3vw,56px);align-items:start;margin-top:18px}
.keys caption{caption-side:top;text-align:left;font-weight:700;font-size:18px;padding-bottom:6px}
.keys td{font-size:16px;padding:7px 12px 7px 0}
.faq{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(32px,4vw,72px);align-items:start;margin-top:8px}
footer{margin-top:clamp(48px,5vw,88px);padding-block:22px 34px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}

@media (min-width:640px){.themes{grid-template-columns:repeat(4,minmax(0,1fr))}.dl a{grid-template-columns:9em minmax(0,1fr) auto}dl{grid-template-columns:repeat(2,minmax(0,1fr))}ul.two{grid-template-columns:repeat(2,minmax(0,1fr))}.keys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
.scene-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.mos{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.m8{grid-column:span 8}.m4{grid-column:span 4}.m5{grid-column:span 5}.m7{grid-column:span 7}
.row{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.row.wide-left{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.help{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq{grid-template-columns:repeat(2,minmax(0,1fr))}
dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.keys{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:2200px){.themes{grid-template-columns:repeat(8,minmax(0,1fr))}.faq{grid-template-columns:repeat(3,minmax(0,1fr))}}