/* First-run tour (src/onboarding.js). Full screen on phones; a phone-sized card over the dimmed app on desktop. */
.onboarding { --ob-font:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; background:#0f1114; color:#f1f3f5; font-family:var(--ob-font); }
.onboarding[hidden] { display:none!important; }
body.onboarding-open { overflow:hidden; }
.onboarding .ob-frame { position:relative; width:100%; height:100%; overflow:hidden; background:#0f1114; }
@media (min-width:900px) {
  .onboarding { background:#08090bd9; backdrop-filter:blur(6px); }
  .onboarding .ob-frame { width:420px; height:min(860px,calc(100dvh - 48px)); border-radius:36px; box-shadow:0 30px 90px #000a,0 0 0 1px #ffffff1a; }
}
.onboarding .ob-bars { position:absolute; z-index:5; top:calc(14px + env(safe-area-inset-top,0px)); left:20px; right:76px; display:flex; gap:5px; }
.onboarding .ob-bars i { flex:1; height:3px; border-radius:2px; background:#ffffff33; overflow:hidden; }
.onboarding .ob-bars b { display:block; height:100%; width:0; background:#fff; transition:width .45s; }
.onboarding .ob-skip { position:absolute; z-index:6; top:calc(2px + env(safe-area-inset-top,0px)); right:8px; min-width:56px; height:40px; border:0; background:none; color:#ffffffcc; font:600 15px/1 var(--ob-font); cursor:pointer; }
.onboarding.ob-edge :is(.ob-bars,.ob-skip) { visibility:hidden; }
.onboarding .ob-slide { position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.onboarding .ob-slide.on { opacity:1; pointer-events:auto; }
.onboarding .ob-kicker { margin:0 0 12px; font:600 12px/1 var(--ob-font); letter-spacing:.14em; text-transform:uppercase; color:#e5c86d; }
.onboarding h1 { margin:0 0 14px; font:800 clamp(38px,11vw,46px)/1.02 var(--ob-font); letter-spacing:-.03em; }
.onboarding h2 { margin:0 0 10px; font:800 clamp(24px,7vw,28px)/1.1 var(--ob-font); letter-spacing:-.02em; }
.onboarding .ob-body { margin:0; font:400 16px/1.5 var(--ob-font); color:#d6dbe0; }
.onboarding .ob-body b { color:#fff; font-weight:600; }
.onboarding .ob-cta { display:flex; align-items:center; justify-content:center; width:100%; height:56px; margin-top:24px; border:0; border-radius:18px; background:#3b82f6; color:#fff; font:700 17px/1 var(--ob-font); cursor:pointer; box-shadow:0 10px 30px #3b82f655; }
.onboarding .ob-ghost { height:44px; margin-top:6px; background:transparent; box-shadow:none; color:#ffffffb3; font-weight:600; font-size:15px; }
/* First and last step: the mountain picture behind big type. */
.onboarding .ob-hero-bg { position:absolute; inset:0; background:#1a1d22 center top/cover no-repeat; }
.onboarding .ob-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0f111400 28%,#0f1114cc 60%,#0f1114 80%); }
.onboarding .ob-hero .ob-copy { position:relative; z-index:2; margin-top:auto; padding:0 28px calc(32px + env(safe-area-inset-bottom,0px)); }
.onboarding .ob-logo { width:96px; height:39px; margin-bottom:18px; filter:drop-shadow(0 6px 16px #0009); }
.onboarding .ob-note { margin:14px 0 0; font:500 12px/1.4 var(--ob-font); color:#7d8791; text-align:center; }
/* Feature steps: a screenshot on top, the words under it. */
.onboarding .ob-shot { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.onboarding .ob-shot::before { content:''; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 40%,#3b82f633,transparent 70%); }
.onboarding .ob-shot::after { content:''; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(#0f111400,#0f1114); }
.onboarding .ob-shot img { position:absolute; left:50%; top:calc(44px + env(safe-area-inset-top,0px)); width:min(72%,300px); translate:-50% 0; border-radius:26px; background:#1a1d22; box-shadow:0 20px 50px #000a,0 0 0 1px #ffffff1a; transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s; }
.onboarding .ob-pair img { left:36%; width:min(58%,240px); rotate:-4deg; }
.onboarding .ob-pair img.ob-second { left:70%; top:calc(96px + env(safe-area-inset-top,0px)); width:min(54%,224px); rotate:6deg; }
.onboarding .ob-slide:not(.on) .ob-shot img { transform:translateY(30px) scale(.96); opacity:.3; }
.onboarding .ob-slide:not(.ob-hero) .ob-copy { position:relative; z-index:2; flex:none; display:flex; flex-direction:column; padding:0 24px calc(20px + env(safe-area-inset-bottom,0px)); }
.onboarding .ob-copy > * { transition:transform .6s .12s,opacity .6s .12s; }
.onboarding .ob-slide:not(.on) .ob-copy > * { transform:translateY(14px); opacity:0; }
.onboarding .ob-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.onboarding .ob-chips span { padding:6px 11px; border-radius:999px; background:#2a2e35; font:600 13px/1.2 var(--ob-font); color:#e7ebef; }
.onboarding .ob-modes { display:flex; gap:3px; padding:3px; margin-top:14px; border-radius:14px; background:#1e2126; }
.onboarding .ob-modes span { flex:1; padding:10px 4px; border-radius:11px; text-align:center; font:600 13px/1 var(--ob-font); color:#c4cad1; white-space:nowrap; }
.onboarding .ob-modes span:first-child { background:#3b82f6; color:#fff; }
.onboarding .ob-tips { display:grid; gap:5px; margin:12px 0 0; padding:0; list-style:none; }
.onboarding .ob-tips li { display:flex; gap:9px; font:500 14px/1.4 var(--ob-font); color:#c4cad1; }
.onboarding .ob-tips li::before { content:''; flex:none; width:6px; height:6px; margin-top:7px; border-radius:50%; background:#e5c86d; }
.onboarding .ob-nav { display:flex; gap:12px; margin-top:18px; }
.onboarding .ob-nav .ob-cta { flex:1; margin:0; }
.onboarding .ob-back { flex:none; width:56px; height:56px; border:0; border-radius:18px; background:#2a2e35; color:#fff; font:600 24px/1 var(--ob-font); cursor:pointer; }
/* Short phones (iPhone SE): smaller words so the screenshot keeps room. */
@media (max-height:700px) {
  .onboarding h2 { font-size:22px; }
  .onboarding .ob-body { font-size:15px; line-height:1.4; }
  .onboarding .ob-tips li { font-size:13px; }
  .onboarding .ob-chips span { padding:5px 10px; font-size:12px; }
  .onboarding .ob-cta,.onboarding .ob-back { height:50px; }
  .onboarding .ob-back { width:50px; }
  .onboarding .ob-nav { margin-top:14px; }
  .onboarding .ob-shot img { top:calc(36px + env(safe-area-inset-top,0px)); }
}
@media (prefers-reduced-motion:reduce) {
  .onboarding .ob-slide,.onboarding .ob-shot img,.onboarding .ob-copy > *,.onboarding .ob-bars b { transition:none; }
}
/* Settings › Help & tips: the tour again. */
.settings-help span { display:block; margin-top:2px; font-size:12px; font-weight:400; opacity:.7; }