/* Springle Help (getspringle.com/help). Built on styles.css: the same near-black and ivory, serif headlines with an
   italic turn. Pictures are real screenshots of Springle; numbered pins are quiet ivory
   hotspots that light up when you point at them or at their line below (help.js). Pages are written by scripts/build-help.mjs. */

.pg-help main { position: relative; z-index: 1; }
.pg-help .nav-links a[aria-current="page"] { color: var(--ink); }

/* Search button in the nav pill */
.hp-find { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 500 14px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.hp-find:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
.hp-find svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hp-find kbd { font-size: 11px; padding: 1px 6px; color: var(--ink-3); }
@media (max-width: 1060px) { .hp-find span, .hp-find kbd { display: none; } .hp-find { width: 40px; padding: 0; justify-content: center; } }
@media (max-width: 820px) { .pg-help .nav .hp-find { margin-left: auto; } .pg-help .nav .btn-sm { margin-left: 0; } }

kbd { font-variant-numeric: tabular-nums; }

/* ---------- Article layout: topics | article | on this page ---------- */
.hp-layout { display: grid; grid-template-columns: 220px minmax(0, 720px) 180px; justify-content: center; gap: clamp(28px, 4vw, 64px); max-width: 1280px; margin: 0 auto; padding: 128px clamp(16px, 4vw, 40px) 0; }

.hp-side { position: sticky; top: 104px; align-self: start; display: grid; gap: 6px; max-height: calc(100vh - 128px); overflow: auto; padding-right: 6px; scrollbar-width: thin; font-size: 14px; }
.hp-side svg, .hp-topic-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-side-home { margin-bottom: 10px; color: var(--ink-3); text-decoration: none; font-weight: 500; }
.hp-side-home:hover { color: var(--ink); }
.hp-side-link, .hp-side-group > p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.hp-side-link:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.hp-side-group > p { color: var(--ink); font-weight: 600; }
.hp-side-group ul { list-style: none; margin: 2px 0 10px; padding: 0 0 0 18px; border-left: 1px solid var(--line); margin-left: 17px; display: grid; gap: 1px; }
.hp-side-group a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-3); text-decoration: none; line-height: 1.35; }
.hp-side-group a:hover { color: var(--ink); }
.hp-side-group a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--ink); font-weight: 600; }

.hp-toc { position: sticky; top: 104px; align-self: start; display: grid; gap: 2px; font-size: 13.5px; }
.hp-toc p { margin: 0 0 10px; font: 600 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hp-toc a { padding: 6px 0 6px 12px; border-left: 1px solid var(--line-2); color: var(--ink-3); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.hp-toc a:hover { color: var(--ink-2); }
.hp-toc a.on { color: var(--ink); border-left-color: var(--listen); }

/* ---------- The article ---------- */
.hp-doc { min-width: 0; }
.hp-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; font-size: 14px; color: var(--ink-3); }
.hp-crumb a { color: var(--ink-3); text-decoration: none; }
.hp-crumb a:hover { color: var(--ink); }
.hp-doc h1 { max-width: none; margin: 0; font: 400 clamp(44px, 5.4vw, 70px)/.98 var(--serif); letter-spacing: -.015em; text-align: left; text-wrap: balance; }
.hp-doc h1 em { color: var(--ink-2); }
.hp-gist { margin: 20px 0 0; max-width: 60ch; font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.hp-body { margin-top: 40px; }
.hp-body > * + * { margin-top: 20px; }
.hp-body h2 { max-width: none; margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--line); font: 400 clamp(30px, 3.2vw, 40px)/1.08 var(--serif); letter-spacing: -.01em; text-align: left; scroll-margin-top: 100px; }
.hp-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hp-body h3 { margin: 32px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: 100px; }
.hp-body h2 + *, .hp-body h3 + * { margin-top: 14px; }
.hp-body p, .hp-body li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.hp-body p { margin-bottom: 0; }
.hp-body strong { font-weight: 600; color: var(--ink); }
.hp-body em { color: var(--ink); }
.hp-body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(243, 240, 234, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.hp-body a:hover { text-decoration-color: var(--ink); }
.hp-body code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); font: 500 .86em/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.hp-body ul { margin-bottom: 0; padding-left: 22px; }
.hp-body ul li { margin-top: 8px; padding-left: 4px; }
.hp-body ul li::marker { color: var(--ink-3); }

/* Numbered steps */
.hp-body ol.steps { margin-bottom: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.hp-body ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.hp-body ol.steps > li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-body ol.steps > li > span { padding-top: 3px; }

/* Keys: big keycaps for the shortcut an article is about */
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 22px 24px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.keys .caps { display: flex; align-items: center; gap: 10px; }
.cap { display: inline-grid; place-items: center; align-content: center; min-width: 64px; height: 64px; padding: 0 14px; border-radius: 14px; background: linear-gradient(#27272c, #19191d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 #050506, 0 0 0 1px rgba(255, 255, 255, .08); font: 500 12.5px/1.1 var(--font); color: var(--ink-2); text-align: center; }
.cap big { display: block; margin-bottom: 3px; font-size: 22px; font-weight: 500; color: var(--ink); }
.keys .plus { color: var(--ink-3); font-size: 18px; }
.hp-body .keys p { flex: 1 1 220px; margin: 0; font-size: 15.5px; }
.hp-body .keys strong { color: var(--listen); }

/* Try saying */
.say { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.say > span { margin-right: 4px; font: 600 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.say q { padding: 9px 16px; border-radius: 999px; background: rgba(60, 227, 164, .07); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .22); font: italic 400 19px/1.15 var(--serif); color: var(--ink); quotes: '“' '”'; }

/* Callouts */
.callout { padding: 16px 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.callout > * + * { margin-top: 10px; }
.hp-body .callout p, .hp-body .callout li { font-size: 15.5px; }
.callout.tip { background: rgba(60, 227, 164, .055); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .18); }
.callout.warn { background: rgba(255, 179, 64, .06); box-shadow: inset 0 0 0 1px rgba(255, 179, 64, .22); }
.callout.tip strong { color: var(--listen); }
.callout.warn strong { color: var(--caution); }

/* Tables */
.tbl { border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.tbl table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.tbl th, .tbl td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { font: 600 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: rgba(255, 255, 255, .02); }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.tbl kbd { margin: 1px 0; }

/* ---------- Screenshots: the real island, hanging from a drawn menu bar ---------- */
.shot { margin: 28px 0 0; display: grid; gap: 14px; }
.shot-stage { position: relative; overflow: hidden; border-radius: 20px; padding: 0 16px 34px; box-shadow: inset 0 0 0 1px var(--line-2);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(138, 108, 255, .38), transparent 60%),
    radial-gradient(90% 80% at 100% 30%, rgba(143, 180, 255, .22), transparent 60%),
    radial-gradient(80% 70% at 40% 120%, rgba(240, 140, 255, .16), transparent 60%),
    linear-gradient(170deg, #1d1a2e, #12131b 60%, #0e0f14); }
.shot-bar { display: flex; justify-content: space-between; align-items: center; height: 26px; margin: 0 -16px; padding: 0 14px; background: rgba(10, 10, 14, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 12px/1 var(--mac); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.shot-bar span:first-child { display: flex; gap: 16px; }
.shot-bar b { font-weight: 700; }
.shot-bar i { font-style: normal; opacity: .85; }
.shot-pic { position: relative; width: min(var(--w), 100%); margin: -26px auto 0; }
.shot-pic img { display: block; width: 100%; height: auto; }
.shot-window .shot-stage { padding: 34px 16px; }
.shot-window .shot-pic { margin-top: 0; }
.shot-window .shot-pic img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -20px rgba(0, 0, 0, .8); }
@media (max-width: 640px) { .shot-bar i.x { display: none; } }

/* Pins: quiet hotspots until you look. Point at one (or at its line below) and the picture dims around it, the
   pin opens to its number and the label floats beside it. "Walk through" steps through them in order. */
.shot { position: relative; }
.shot-stage::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent 0 var(--sr, 34px), rgba(6, 6, 10, .66) calc(var(--sr, 34px) + 30px)); }
.shot.lit .shot-stage::after { opacity: 1; }
.pin { position: absolute; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform: translate(calc(-50% - 5px), -50%); -webkit-tap-highlight-color: transparent; }
.pin span { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: rgba(243, 240, 234, .92); color: transparent; font: 700 0/1 var(--font); box-shadow: 0 0 0 3px rgba(243, 240, 234, .22), 0 2px 8px rgba(0, 0, 0, .55); transition: width .28s var(--spring, ease), height .28s var(--spring, ease), font-size .2s, color .2s, box-shadow .3s, opacity .3s; }
.pin::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(243, 240, 234, .7); opacity: 0; pointer-events: none; }
.shot.seen .pin::before { animation: pin-ping 1.4s ease-out calc(var(--n, 0) * 140ms) 2 both; }
@keyframes pin-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.shot-stage:hover .pin span { box-shadow: 0 0 0 4px rgba(243, 240, 234, .3), 0 2px 8px rgba(0, 0, 0, .55); }
.shot.lit .pin:not(.on) span { opacity: .35; }
.pin.on span, .pin:hover span, .pin:focus-visible span { width: 24px; height: 24px; color: #0a0a0b; font-size: 12px; opacity: 1; box-shadow: 0 0 0 4px rgba(243, 240, 234, .2), 0 8px 20px rgba(0, 0, 0, .6); }
.pin:focus-visible { outline: none; }
.pin:focus-visible span { box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 4px var(--ink); }

.shot-tip { position: absolute; z-index: 4; left: 0; top: 0; max-width: min(300px, calc(100% - 16px)); padding: 9px 13px; border-radius: 12px; background: rgba(22, 21, 28, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px -12px rgba(0, 0, 0, .8); color: var(--ink); font-size: 14px; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(4px) scale(.98); transition: opacity .2s, transform .25s var(--spring, ease); }
.shot-tip.show { opacity: 1; transform: none; }
.shot-tip b { margin-right: 6px; color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.shot-tip a { color: inherit; }

.shot-tour { position: absolute; z-index: 3; right: 12px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--ink-2); font: 600 12px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.shot-tour:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }
.shot-tour svg { width: 12px; height: 12px; fill: currentColor; }
.shot-tour[aria-pressed="true"] { color: var(--ink); background: rgba(255, 255, 255, .14); }
.shot-tour .i-stop, .shot-tour[aria-pressed="true"] .i-play { display: none; }
.shot-tour[aria-pressed="true"] .i-stop { display: inline; }

.pins { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hp-body .pins li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); cursor: default; transition: background .2s, color .2s, opacity .2s; }
.hp-body .pins li.on { background: rgba(255, 255, 255, .05); color: var(--ink); }
.shot.lit .pins li:not(.on) { opacity: .55; }
.pins b { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--ink-2); font: 700 11.5px/1 var(--font); transition: background .2s, color .2s, box-shadow .2s; }
.pins li.on b { background: var(--ink); color: #0a0a0b; box-shadow: none; }
.shot figcaption { padding: 0 4px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- Did this help? ---------- */
.hp-helpful { display: grid; gap: 14px; margin-top: 64px; padding: 22px 24px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.hp-helpful-q { margin: 0; font: 400 26px/1.1 var(--serif); }
.hp-helpful-a { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-helpful-a button, .hp-skip { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px/1 var(--font); color: var(--ink); cursor: pointer; transition: background .2s; }
.hp-helpful-a button:hover, .hp-skip:hover { background: rgba(255, 255, 255, .12); }
.hp-helpful-a button[aria-pressed="true"] { background: var(--ink); color: #0a0a0b; }
.hp-helpful-more { display: grid; gap: 10px; }
.hp-helpful-more label { font-size: 15px; color: var(--ink); }
.hp-helpful-more label span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.hp-helpful-more textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 15px/1.5 var(--font); color: var(--ink); resize: vertical; }
.hp-helpful-more textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink-2); }
.hp-helpful-more > div { display: flex; gap: 10px; }
.hp-skip { background: none; box-shadow: none; color: var(--ink-2); }
.hp-helpful-thanks { margin: 0; color: var(--listen); font-size: 15px; }

/* Related and next */
.hp-related { margin-top: 40px; }
.hp-related > p { margin: 0 0 12px; font: 600 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hp-related > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.hp-related a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: background .2s, box-shadow .2s; }
.hp-related a:hover { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line-2); }
.hp-related b { font-size: 15px; font-weight: 600; }
.hp-related span { font-size: 13px; color: var(--ink-3); }
.hp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hp-pager a { display: grid; gap: 3px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .025); text-decoration: none; color: var(--ink); }
.hp-pager a:hover { background: rgba(255, 255, 255, .05); }
.hp-pager .next { text-align: right; }
.hp-pager span { font-size: 12.5px; color: var(--ink-3); }
.hp-pager b { font-size: 15px; font-weight: 600; }

/* Still stuck: on every page */
.hp-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; max-width: 1120px; margin: clamp(80px, 9vw, 120px) auto 0; padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: radial-gradient(70% 140% at 0% 0%, rgba(255, 246, 232, .07), transparent 60%), var(--card); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 1200px) { .hp-contact { margin-left: clamp(16px, 4vw, 40px); margin-right: clamp(16px, 4vw, 40px); } }
.hp-contact > div:first-child { flex: 1 1 380px; }
.hp-contact h2 { max-width: none; margin: 0; font: 400 clamp(32px, 3.6vw, 46px)/1.04 var(--serif); text-align: left; }
.hp-contact h2 em { color: var(--ink-2); }
.hp-contact p { margin: 12px 0 0; max-width: 52ch; color: var(--ink-2); }
.hp-contact p a { color: var(--ink); }
.hp-mail { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-mail .btn { height: 48px; }
.btn-ghost { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Search ---------- */
.hp-search { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(4, 4, 6, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hp-search[hidden] { display: none; }
.hp-search-box { width: min(640px, 100%); max-height: 76vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 22px; background: #111114; box-shadow: 0 0 0 1px var(--line-2), 0 40px 120px -20px #000; overflow: hidden; }
.hp-search-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px 0 20px; color: var(--ink-3); }
.hp-search-box .hp-search-field { border-bottom: 1px solid var(--line); }
.hp-search-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hp-search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 400 17px/1 var(--font); color: var(--ink); }
.hp-search-field input:focus { outline: none; }
.hp-search-field input::placeholder { color: var(--ink-3); }
.hp-search-field input::-webkit-search-cancel-button { display: none; }
.hp-search-field kbd { font-size: 11px; color: var(--ink-3); }
.hp-results { margin: 0; padding: 8px; list-style: none; overflow: auto; }
.hp-results:empty { display: none; }
.hp-results a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.hp-results a b { font-size: 15.5px; font-weight: 600; }
.hp-results a b mark { background: none; color: var(--listen); }
.hp-results a span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.hp-results a small { font-size: 12px; color: var(--ink-3); }
.hp-results [aria-selected="true"] a, .hp-results a:hover { background: rgba(255, 255, 255, .06); }
.hp-results .hp-none { padding: 18px 14px; color: var(--ink-2); font-size: 15px; }
.hp-results .hp-none a { display: inline; padding: 0; color: var(--ink); text-decoration: underline; }

/* ---------- Help home ---------- */
.hp-hero { display: grid; justify-items: center; gap: 20px; max-width: 1120px; margin: 0 auto; padding: clamp(140px, 16vw, 190px) clamp(16px, 4vw, 40px) 0; text-align: center; }
.hp-hero h1 { margin: 0; font: 400 clamp(52px, 8.2vw, 112px)/.92 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.hp-hero h1 em { color: var(--ink-2); }
.hp-home-search { position: relative; width: min(620px, 100%); margin-top: 12px; text-align: left; }
.hp-search-field.is-hero { height: 62px; border-radius: 999px; background: #111114; box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px -24px rgba(0, 0, 0, .9); }
.hp-search-field.is-hero:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3), 0 24px 60px -24px rgba(0, 0, 0, .9); }
.hp-results.is-inline { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5; max-height: 60vh; border-radius: 20px; background: #111114; box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -20px #000; }
.hp-asks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink-3); }
.hp-asks span { margin-right: 4px; }
.hp-asks a { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); text-decoration: none; transition: color .2s, background .2s; }
.hp-asks a:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }

.hp-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1120px; margin: 64px auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.hp-start-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.hp-start-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2); }
.hp-start-pic { position: relative; display: grid; justify-items: center; align-items: start; height: 190px; overflow: hidden; padding: 0 18px;
  background: radial-gradient(120% 90% at 10% 0%, rgba(138, 108, 255, .35), transparent 60%), radial-gradient(90% 90% at 100% 40%, rgba(143, 180, 255, .2), transparent 60%), linear-gradient(170deg, #1d1a2e, #111219); }
.hp-start-pic::before { content: ''; position: absolute; inset: 0 0 auto; height: 18px; background: rgba(10, 10, 14, .45); }
.hp-start-pic img { position: relative; width: 100%; max-width: 360px; height: auto; }
.hp-start-pic.is-window { align-items: center; padding: 18px; }
.hp-start-pic.is-window::before { display: none; }
.hp-start-pic.is-window img { width: auto; max-width: none; height: 230px; margin-top: 70px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.hp-start-t { display: grid; gap: 5px; align-content: start; padding: 18px 20px 22px; }
.hp-start-t b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hp-start-t span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.hp-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; max-width: 1040px; margin: 18px auto 0; padding: 16px 22px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); text-decoration: none; font-size: 14px; transition: background .2s; }
@media (max-width: 1120px) { .hp-colours { margin-left: clamp(16px, 4vw, 40px); margin-right: clamp(16px, 4vw, 40px); } }
.hp-colours:hover { background: rgba(255, 255, 255, .025); }
.hp-colours-t { margin-right: auto; font-weight: 600; color: var(--ink); }
.hc { display: inline-flex; align-items: center; gap: 8px; }
.hc i { width: 9px; height: 9px; border-radius: 50%; }
.hc.g i { background: var(--listen); box-shadow: 0 0 10px var(--listen); }
.hc.v i { background: var(--doing); box-shadow: 0 0 10px var(--doing); }
.hc.a i { background: var(--caution); box-shadow: 0 0 10px var(--caution); }
.hc.r i { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.hp-colours-go { color: var(--ink-3); }

.hp-topics { max-width: 1120px; margin: clamp(90px, 10vw, 130px) auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.hp-topics-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.hp-topics-head h2 { max-width: none; margin: 0; font: 400 clamp(36px, 4.4vw, 56px)/1 var(--serif); text-align: left; }
.hp-topics-head h2 em { color: var(--ink-2); }
.hp-topics-head span { font-size: 14px; color: var(--ink-3); }
.hp-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hp-topic { padding: 22px 22px 20px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 100px; }
.hp-topic:target { box-shadow: inset 0 0 0 1px var(--ink-3); }
.hp-topic header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.hp-topic-ic { width: 38px !important; height: 38px !important; padding: 9px; border-radius: 11px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.hp-topic h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hp-topic header p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-3); }
.hp-topic ul { margin: 0; padding: 0; list-style: none; display: grid; }
.hp-topic li + li { border-top: 1px solid var(--line); }
.hp-topic a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; transition: color .2s; }
.hp-topic a::after { content: '→'; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.hp-topic a:hover { color: var(--ink); }
.hp-topic a:hover::after { opacity: 1; transform: none; }

.hp-fix { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px 48px; max-width: 1120px; margin: 28px auto 0; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: rgba(255, 179, 64, .045); box-shadow: inset 0 0 0 1px rgba(255, 179, 64, .2); scroll-margin-top: 100px; }
@media (max-width: 1200px) { .hp-fix { margin-left: clamp(16px, 4vw, 40px); margin-right: clamp(16px, 4vw, 40px); } }
.hp-fix-dot { width: 10px; height: 10px; margin: 0 0 18px; border-radius: 50%; background: var(--caution); box-shadow: 0 0 12px var(--caution); }
.hp-fix h2 { max-width: none; margin: 0; font: 400 clamp(32px, 3.4vw, 44px)/1.04 var(--serif); text-align: left; }
.hp-fix > div p { margin: 12px 0 0; color: var(--ink-2); }
.hp-fix ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-fix a { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.hp-fix a:hover { background: rgba(0, 0, 0, .4); }
.hp-fix a b { font-size: 15px; font-weight: 600; }
.hp-fix a span { font-size: 13px; line-height: 1.45; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1180px) {
  .hp-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .hp-toc { display: none; }
}
@media (max-width: 900px) {
  .hp-layout { grid-template-columns: minmax(0, 1fr); padding-top: 112px; }
  .hp-side { display: none; }
  .hp-start { grid-template-columns: 1fr; }
  .hp-start-card { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: none; }
  .hp-start-pic { height: auto; min-height: 130px; }
  .hp-fix { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hp-start-card { grid-template-columns: 1fr; }
  .hp-start-pic { height: 160px; }
  .hp-fix ul { grid-template-columns: 1fr; }
  .hp-colours-t { flex-basis: 100%; }
  .hp-colours-go { display: none; }
  .keys { padding: 18px; }
  .cap { min-width: 56px; height: 56px; }
  .hp-pager { grid-template-columns: 1fr; }
  .hp-pager .next { text-align: left; }
  .tbl { overflow: visible; background: none; box-shadow: none; }
  .tbl table { min-width: 0; }
  .tbl thead { display: none; }
  .tbl table, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl tr { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .tbl th, .tbl td { padding: 0; border: 0; }
  .tbl td { margin-top: 8px; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .shot-stage { padding: 0 8px 22px; border-radius: 16px; }
  .shot-bar { margin: 0 -8px; }
  .shot-tour { right: 8px; bottom: 3px; height: 18px; padding: 0 6px; }
  .shot-tour span { display: none; }
  .hp-search { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-start-card, .hp-topic a::after { transition: none; }
  .hp-start-card:hover { transform: none; }
  .shot.seen .pin::before { animation: none; }
  .pin span, .shot-tip, .shot-stage::after { transition: none; }
}
@media print {
  .nav, .glow-top, .hp-side, .hp-toc, .hp-helpful, .hp-pager, .hp-contact, .foot img { display: none !important; }
  body, html { background: #fff; color: #000; }
}