/* "How HUBBUB works" guide. Builds on home.css: a hero with a numbered map of the editor, then one tinted panel per area. */
.nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* hero */
.g-hero{padding-block:56px 24px;position:relative;overflow:hidden}
.g-hero::before{content:"";position:absolute;inset:-10% -10% auto;height:620px;z-index:-1;
  background:radial-gradient(40% 50% at 20% 30%,rgba(47,73,198,.12),transparent 70%),radial-gradient(34% 44% at 82% 26%,rgba(22,128,138,.12),transparent 70%),radial-gradient(30% 40% at 55% 75%,rgba(217,154,30,.10),transparent 70%)}
.g-hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.g-hero h1{font-size:clamp(46px,8vw,96px);font-weight:800;line-height:.95;letter-spacing:-.05em}
.g-lede{color:var(--muted);font-size:clamp(17px,1.8vw,20px);max-width:58ch;line-height:1.55}
.jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:1100px;margin-top:14px}
.jump a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 14px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--c);text-decoration:none;transition:transform .15s,box-shadow .15s}
.jump a:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px var(--c)}
.jp{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);font-weight:600;font-size:15px;white-space:nowrap}
.jump b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font:800 14px/1 var(--display)}
.jt{color:var(--muted);font-size:15.5px;line-height:1.45;text-wrap:balance}
@media (max-width:900px){ .jump{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .jump{grid-template-columns:1fr} .jp{white-space:normal} }
.j-blue{--c:var(--blue)} .j-green{--c:#2E7D4F} .j-pink{--c:#B5577A} .j-ochre{--c:#C2860F}

/* the map */
.map{margin:44px auto 0;max-width:1100px}
.map-in{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 2px 4px rgba(22,24,29,.04),0 30px 80px -20px rgba(22,24,29,.28)}
.zone{position:absolute;display:block;border:3px solid var(--c);border-radius:10px;background:color-mix(in srgb,var(--c) 7%,transparent);text-decoration:none;transition:background .15s}
.zone:hover{background:color-mix(in srgb,var(--c) 16%,transparent)}
.zb{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--c);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.zb b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--c);font:800 13px/1 var(--display)}
.z-blue{--c:var(--blue)} .z-green{--c:#2E7D4F} .z-pink{--c:#B5577A} .z-ochre{--c:#C2860F}
.z-blue .zb{left:calc(100% + 8px);top:46%}
.z-green .zb{right:calc(100% + 8px);top:46%}
.z-pink .zb{left:50%;bottom:calc(100% + 8px);transform:translateX(-50%)}
.z-ochre .zb{left:50%;top:calc(100% + 8px);transform:translateX(-50%)}

/* area panels */
.area{padding-block:14px}
.area-in{padding:48px;border-radius:calc(var(--radius) + 6px);background:var(--tint);display:grid;gap:30px}
.a-head{display:flex;align-items:center;gap:18px}
.a-head .num{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--tone);color:#fff;font:800 30px/1 var(--display);box-shadow:0 10px 24px -10px var(--tone)}
.a-head .eyebrow{color:var(--tone);margin-bottom:4px}
.t-ochre{--tint:#F9F0DD;--tone:#B07A0E}
.t-green{--tint:#E3F1E7;--tone:#2E7D4F}
.t-pink{--tint:#F8E8EE;--tone:#B5577A}

.ui{margin:0;background:var(--panel);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(22,24,29,.05),0 16px 40px -22px rgba(22,24,29,.35)}
.ui img{width:100%}
.strip{border:1px solid rgba(22,24,29,.06)}

/* left toolbar */
.left-grid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:36px;align-items:start}
.toolbar-shot{position:sticky;top:96px;width:76px;justify-self:center;padding:6px 0}
.toolbar-shot img{width:60px;margin:0 auto}
.tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool-card{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(22,24,29,.04)}
.ics{display:flex;gap:6px;flex:none}
.ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--tone)}
.ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool-card h4,.shot-card h4{margin:0 0 4px;font:600 17px/1.3 var(--body);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tool-card p,.shot-card p,.shot-card li{color:var(--muted);font-size:15.5px;line-height:1.55}
.sub-h{margin:30px 0 2px;font-weight:700;font-size:22px}
.sub-p{color:var(--muted);margin-bottom:14px}

/* cards with UI crops, laid out as a masonry */
.cards{list-style:none;margin:0;padding:0;columns:3 280px;column-gap:18px}
.shot-card{break-inside:avoid;margin:0 0 18px;background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(22,24,29,.04),0 14px 34px -24px rgba(22,24,29,.3);display:block}
.shot-card .ui{box-shadow:none;border-radius:0;background:#F6F7F9;padding:18px 18px 0;border-bottom:1px solid var(--line)}
.shot-card .ui img{border-radius:10px 10px 0 0;box-shadow:0 0 0 1px rgba(22,24,29,.06),0 10px 24px -14px rgba(22,24,29,.35)}
.sc-body{padding:18px 20px 20px;display:grid;gap:8px}
.shot-card.plain{background:var(--panel)}
.shot-card.plain .sc-body{border-left:4px solid var(--tone)}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ticks li{position:relative;padding-left:18px}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--tone)}
.ticks b,.shot-card p b{color:var(--ink)}

/* keys */
kbd{display:inline-block;min-width:24px;padding:2px 7px;border-radius:7px;background:var(--panel);border:1px solid #CDD2DB;border-bottom-width:3px;font:600 12.5px/1.5 var(--body);color:var(--ink);text-align:center;letter-spacing:0}
.keys{display:inline-flex;flex-wrap:wrap;gap:4px}
.tool-card h4 kbd{font-size:11.5px;padding:0 6px}
.keys-sec{padding-block:64px 24px}
.keys-sec .wrap{display:grid;gap:12px}
.shortcuts{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.shortcuts li{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15.5px}
.shortcuts .keys{flex:none;min-width:96px}

/* closer */
.g-close{padding-block:40px 72px}
.g-close-in{background:linear-gradient(135deg,#2F49C6,#4B2FA3);color:#fff;border-radius:calc(var(--radius) + 6px);padding:56px 32px;display:grid;justify-items:center;gap:22px;text-align:center}
.g-close h2{color:#fff}
.btn.ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.foot .copy-line a{color:inherit}

@media (max-width:900px){
  .area-in{padding:28px 20px}
  .left-grid{grid-template-columns:1fr}
  .toolbar-shot{display:none}
  .tools{grid-template-columns:1fr}
  .zb{font-size:12px;padding:3px 9px 3px 3px}
  .zb b{width:20px;height:20px;font-size:11px}
  .zone{border-width:2px;border-radius:6px}
  .z-blue .zb,.z-green .zb{top:auto;bottom:6px}
  .z-blue .zb{left:calc(100% + 4px)} .z-green .zb{right:calc(100% + 4px)}
}
@media (max-width:560px){ .zb{font-size:0;gap:0;padding:2px} .zb b{font-size:11px} }
@media (prefers-reduced-motion:reduce){ .jump a,.zone{transition:none} }
.shortcuts{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.shortcuts .keys{min-width:120px}
.howto .foot{padding-block:28px}
.shot-card .ui img.small{width:auto;max-width:100%;margin:0 auto}
@media (max-width:560px){ .tool-card{flex-direction:column;gap:10px} }
.q{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font:700 13px/1 var(--body);vertical-align:1px}
.a-intro{color:var(--muted);font-size:17px;max-width:66ch;margin-top:-10px}
.dot-ic{display:inline-block;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--accent);background:radial-gradient(var(--accent) 0 3px,#fff 3.5px);vertical-align:-2px}