:root { --help-navy:#0d3150; --help-blue:#176ea6; --help-ink:#14202b; --help-muted:#607080; --help-line:#dbe4e7; --help-paper:#fbfaf6; --help-mint:#e7f5ee; --help-gold:#d9a923; }
.shine-help-page { background:var(--help-paper); color:var(--help-ink); }
.shine-help-page .bible-site-header { background:rgba(251,250,246,.94); }
.help-main { max-width:1240px; margin:0 auto; padding:clamp(18px,4vw,56px) clamp(18px,4vw,52px) 90px; }
.help-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:clamp(28px,5vw,72px); align-items:end; padding:clamp(34px,6vw,76px); border-radius:28px; color:#fff; background:radial-gradient(circle at 85% 15%,rgba(54,190,154,.3),transparent 34%),linear-gradient(135deg,#0b2a46,#124d70); box-shadow:0 24px 70px rgba(13,49,80,.18); }
.help-hero .bible-kicker { color:#8fe0c0; }
.help-hero h1 { max-width:780px; margin:10px 0 18px; font-size:clamp(2.6rem,6vw,5.6rem); line-height:.94; letter-spacing:-.055em; }
.help-hero-copy>p:last-child { max-width:620px; margin:0; color:#d9e8ef; font-size:clamp(1.04rem,1.8vw,1.28rem); line-height:1.6; }
.help-search-panel { padding:18px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(4,23,38,.42); backdrop-filter:blur(12px); }
.help-search-panel label { display:flex; gap:10px; align-items:center; padding:13px 15px; border-radius:12px; background:#fff; color:var(--help-navy); }
.help-search-panel svg { width:19px; }
.help-search-panel input { width:100%; border:0; outline:0; color:var(--help-ink); font:inherit; background:transparent; }
.help-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.help-filters button { padding:8px 12px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:transparent; color:#e8f2f5; font:700 .82rem/1 inherit; cursor:pointer; }
.help-filters button.is-active { border-color:#8fe0c0; background:#8fe0c0; color:#0b2a46; }
.help-language-quick { display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center; margin-top:14px; padding:11px 13px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#fff; background:#07131c; text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.help-language-quick:hover { border-color:#8fe0c0; transform:translateY(-1px); }
.help-language-quick>svg { width:17px; height:17px; color:#8fe0c0; }
.help-language-quick>span { font-size:.78rem; font-weight:700; }
.help-language-quick>strong { font-size:.84rem; }
.help-quickstart { display:grid; grid-template-columns:auto minmax(220px,.7fr) 1.3fr; align-items:center; gap:18px 28px; margin:24px 0 54px; padding:22px 26px; border:1px solid #d8e7df; border-radius:20px; background:var(--help-mint); }
.help-quickstart>span { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; background:#16835d; }
.help-quickstart p { margin:0 0 4px; color:#16835d; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.help-quickstart h2 { margin:0; font-size:1.1rem; }
.help-quickstart ol { display:flex; margin:0; padding:0; list-style:none; counter-reset:quick; }
.help-quickstart li { position:relative; flex:1; padding:8px 12px 8px 33px; border-left:1px solid #bdd8ca; font-size:.82rem; font-weight:750; counter-increment:quick; }
.help-quickstart li::before { content:counter(quick); position:absolute; left:10px; color:#16835d; }
.help-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(34px,6vw,78px); }
.help-index { position:sticky; top:90px; align-self:start; }
.help-index>p { margin:0 0 16px; color:#445863; font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em; }
.help-index nav { display:flex; flex-direction:column; border-left:1px solid var(--help-line); }
.help-index a { display:grid; grid-template-columns:30px 1fr; gap:8px; padding:12px 15px; color:#344b5b; font-size:.95rem; font-weight:750; line-height:1.4; text-decoration:none; }
.help-index a span { color:#7d919d; font-weight:800; font-variant-numeric:tabular-nums; }
.help-index a:hover { color:#0d3b67; background:#f4f8f6; }
.help-index a.is-active { margin-left:-1px; border-left:3px solid var(--help-blue); color:var(--help-blue); background:#f0f7fb; }
.help-index a.is-active span { color:var(--help-blue); }
.help-topics { min-width:0; }
.help-topic { padding:0 0 clamp(54px,8vw,96px); scroll-margin-top:100px; }
.help-topic+.help-topic { padding-top:clamp(44px,6vw,74px); border-top:1px solid var(--help-line); }
.help-topic[hidden] { display:none; }
.help-topic-heading { display:grid; grid-template-columns:42px 48px 1fr; gap:14px; align-items:start; margin-bottom:28px; }
.help-topic-number { padding-top:13px; color:#9ca9b1; font:700 .78rem/1 ui-monospace,monospace; }
.help-topic-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:var(--help-blue); background:#e8f3f9; }
.help-topic-heading h2 { margin:0 0 8px; font-size:clamp(1.75rem,3vw,2.7rem); letter-spacing:-.035em; }
.help-topic-heading p { max-width:700px; margin:0; color:var(--help-muted); line-height:1.6; }
.help-wide-media,.help-media-pair figure { margin:0 0 24px; overflow:hidden; border:1px solid var(--help-line); border-radius:18px; background:#fff; }
.help-wide-media img,.help-media-pair img { display:block; width:100%; height:auto; }
.help-wide-media img,.help-media-pair img,.help-authentic-gallery img,.help-feature-row img,.help-live-sequence img { cursor:zoom-in; }
.help-wide-media img:focus-visible,.help-media-pair img:focus-visible,.help-authentic-gallery img:focus-visible,.help-feature-row img:focus-visible,.help-live-sequence img:focus-visible { outline:3px solid #37a6e9; outline-offset:-3px; }
.help-wide-media figcaption,.help-media-pair figcaption { padding:12px 16px; color:var(--help-muted); font-size:.8rem; line-height:1.5; }
.help-wide-media figcaption span { display:inline-grid; place-items:center; width:20px; height:20px; margin:0 5px 0 10px; border-radius:50%; background:var(--help-navy); color:#fff; font-size:.68rem; }
.help-media-pair { display:grid; grid-template-columns:.42fr 1.58fr; gap:16px; align-items:start; }
.help-media-pair figure { height:100%; }
.help-media-pair img { height:260px; object-fit:contain; padding:18px; background:#f4f7f6; }
.help-topic-body { padding:24px 0 4px 62px; border-top:1px solid var(--help-line); color:#344552; line-height:1.75; }
.help-topic-body ol,.help-topic-body ul { padding-left:22px; }
.help-topic-body li+li { margin-top:9px; }
.help-inline-download {
  display:inline-grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  width:min(100%, 340px);
  margin:3px 0 5px;
  padding:11px 13px;
  border:1px solid #a9d8c5;
  border-radius:12px;
  background:#f1fbf6;
  box-shadow:0 8px 20px rgba(13,49,80,.06);
  color:#0d3b67;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.help-inline-download:hover {
  border-color:#35a76f;
  box-shadow:0 10px 24px rgba(13,49,80,.1);
  transform:translateY(-1px);
}
.help-inline-download:focus-visible { outline:3px solid rgba(27,119,186,.26); outline-offset:2px; }
.help-inline-download > svg { width:18px; height:18px; color:#16835d; }
.help-inline-download > svg:last-child { width:16px; height:16px; color:#0d3b67; }
.help-inline-download > span { display:grid; gap:2px; min-width:0; }
.help-inline-download strong { color:#0d3b67; line-height:1.25; }
.help-inline-download small { color:#647872; font-size:.72rem; line-height:1.25; }
.help-definition-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; border:1px solid var(--help-line); border-radius:14px; background:var(--help-line); }
.help-definition-list>div { display:flex; flex-direction:column; gap:5px; padding:16px; background:#fff; }
.help-definition-list strong { color:var(--help-navy); }
.help-definition-list span { color:var(--help-muted); font-size:.9rem; line-height:1.55; }
.help-note { display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding:15px 17px; border-radius:12px; color:#17533d; background:var(--help-mint); }
.help-note svg { flex:none; width:20px; }
.help-registration-demo { display:grid; grid-template-columns:auto 44px minmax(360px,1fr); align-items:center; gap:18px; margin:0 0 28px; padding:26px; border:1px solid var(--help-line); border-radius:20px; background:#f4f7f5; }
.help-registration-demo.help-registration-after { margin:24px 0 0 62px; }
.help-center-trigger { display:flex; align-items:center; gap:12px; min-width:172px; padding:13px 18px; border:1px solid #d7dfdc; border-radius:17px; color:#65716e; background:#fff; box-shadow:0 3px 9px rgba(18,49,76,.08); }
.help-center-trigger>svg { width:25px; height:25px; }
.help-center-trigger span,.help-register-action span { display:grid; }
.help-center-trigger small,.help-register-head small { color:#75817d; font-size:.67rem; font-weight:800; letter-spacing:.16em; }
.help-center-trigger strong { font-size:.95rem; }
.help-flow-arrow { width:25px; color:#16835d; }
.help-register-panel { padding:20px; border-radius:18px; color:#1c2725; background:#fff; box-shadow:0 12px 34px rgba(18,49,76,.12); }
.help-register-head { display:flex; justify-content:space-between; align-items:start; }
.help-register-head>div { display:grid; gap:5px; }
.help-register-head strong { font-size:1.18rem; }
.help-register-head>span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #dae2df; border-radius:50%; color:#697572; font-size:1.3rem; }
.help-register-panel>p { margin:17px 0 12px; color:#687572; font-size:.86rem; }
.help-register-action { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px; border:1px solid #a9dfbd; border-radius:16px; background:#f0fbf4; }
.help-register-action strong { font-size:.94rem; }
.help-register-action small { margin-top:4px; color:#73807c; font-size:.76rem; }
.help-register-action b { flex:none; padding:12px 19px; border-radius:12px; color:#fff; background:#143e68; font-size:.82rem; }
.help-library-map img { background:#fff; }
.help-drag-demo { margin-top:28px; }
.help-drag-demo img { background:#fff; }
.help-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:2px 0 30px; }
.help-control-grid section { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; padding:18px 0; border-bottom:1px solid var(--help-line); }
.help-control-grid section>svg { width:22px; height:22px; padding:11px; box-sizing:content-box; border-radius:12px; color:#fff; background:#153c69; }
.help-control-grid section:first-child>svg,.help-control-grid section:nth-child(2)>svg { background:#13251f; }
.help-control-grid strong,.help-control-grid span { display:block; }
.help-control-grid strong { margin-bottom:4px; color:var(--help-navy); }
.help-control-grid span { color:var(--help-muted); font-size:.9rem; line-height:1.55; }
.help-subheading { margin:32px 0 12px; color:var(--help-navy); font-size:1.35rem; }
.help-feature-rows { display:grid; }
.help-feature-row { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,48px); align-items:center; padding:36px 0; border-bottom:1px solid var(--help-line); }
.help-feature-row:first-child { padding-top:4px; }
.help-feature-row>figure,.help-feature-media-pair figure,.help-control-shot { margin:0; overflow:hidden; border:1px solid var(--help-line); border-radius:15px; background:#fff; }
.help-feature-row>figure img { display:block; width:100%; max-height:360px; object-fit:contain; background:#f3f6f4; }
.help-feature-row figcaption { padding:10px 13px; color:var(--help-muted); font-size:.77rem; line-height:1.45; }
.help-feature-copy { display:grid; grid-template-columns:50px minmax(0,1fr); gap:16px; align-items:start; }
.help-feature-copy>svg { width:24px; height:24px; padding:13px; box-sizing:content-box; border-radius:13px; color:#fff; background:#153c69; }
.help-feature-copy h3 { margin:0 0 8px; color:var(--help-navy); font-size:1.3rem; line-height:1.25; }
.help-feature-copy p { margin:0; color:var(--help-muted); line-height:1.65; }
.help-feature-media-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.help-feature-media-pair img { display:block; width:100%; height:205px; object-fit:contain; background:#f3f6f4; }
.help-control-shot { width:max-content; max-width:100%; margin-top:16px; }
.help-control-shot img { display:block; max-width:100%; max-height:190px; object-fit:contain; background:#fff; }
.help-control-stack { display:grid; gap:14px; justify-items:start; }
.help-search-specimen { display:flex; align-items:center; gap:9px; width:min(100%,430px); padding:7px 8px 7px 13px; border:1px solid #dbe3df; border-radius:12px; color:#71807d; background:#fff; box-shadow:0 8px 24px rgba(13,49,80,.06); }
.help-search-specimen>svg { width:18px; }
.help-search-specimen span { flex:1; font-size:.88rem; }
.help-search-specimen b { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; color:#fff; background:#845b32; }
.help-search-specimen b svg { width:19px; }
.help-icon-specimen { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid #cfe0d7; border-radius:14px; color:#365449; background:#f6fbf8; font-weight:750; }
.help-icon-specimen>svg { width:22px; height:22px; padding:10px; box-sizing:content-box; border:1px solid #c9ddd4; border-radius:11px; background:#fff; }
.help-quick-bible-control { display:flex; align-items:center; gap:13px; width:max-content; max-width:100%; margin-top:18px; padding:10px 15px 10px 10px; border:1px solid #c9dce8; border-radius:15px; background:#f7fbfd; box-shadow:0 8px 22px rgba(13,49,80,.08); }
.help-quick-bible-control>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #3ca3df; border-radius:50%; color:#fff; background:#115b91; box-shadow:0 0 0 3px rgba(49,151,210,.16),inset 0 0 0 1px rgba(255,255,255,.16); }
.help-quick-bible-control>span svg { width:21px; height:21px; }
.help-quick-bible-control>div { display:grid; line-height:1.25; }
.help-quick-bible-control strong { color:var(--help-navy); font-size:.9rem; }
.help-quick-bible-control small { margin-top:3px; color:var(--help-muted); font-size:.72rem; }
.help-song-tab { display:flex; align-items:center; gap:9px; width:max-content; margin-top:18px; padding:10px 15px; border:1px solid #68a9d4; border-radius:11px; color:#fff; background:#154d7d; box-shadow:0 0 0 3px rgba(60,151,208,.12); }
.help-song-tab svg { width:19px; }
.help-song-tab strong { font-size:.88rem; }
.help-song-drag-section { padding:40px 0; border-bottom:1px solid var(--help-line); }
.help-song-drag-section>.help-feature-copy { max-width:760px; margin-bottom:24px; }
.help-song-drag-demo { position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:330px; overflow:hidden; border:1px solid #d7e0dd; border-radius:18px; color:#17231f; background:#f7f9f8; box-shadow:0 16px 42px rgba(13,49,80,.08); isolation:isolate; }
.help-song-library-pane,.help-song-source-pane { padding:22px; }
.help-song-library-pane { border-right:1px solid #d7e0dd; background:#fffdf9; }
.help-song-source-pane { background:#f8faff; }
.help-song-pane-title { display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--help-navy); font-weight:850; font-size:1.05rem; }
.help-song-pane-title svg { width:22px; }
.help-song-folder-target { display:flex; align-items:center; gap:12px; min-height:72px; padding:14px 16px; border:2px dashed #d4ad5a; border-radius:13px; background:#fff4d8; animation:help-folder-ready 4.8s ease-in-out infinite; }
.help-song-folder-target>svg { width:25px; padding:9px; box-sizing:content-box; border-radius:10px; color:#8e641c; background:#ffefc6; }
.help-song-folder-target div,.help-song-source-card,.help-song-drag-card div { display:grid; }
.help-song-folder-target span,.help-song-source-card span,.help-song-drag-card span { color:#6b7772; font-size:.75rem; }
.help-song-search { display:flex; align-items:center; gap:9px; margin-bottom:14px; padding:10px 12px; border:1px solid #d9e2df; border-radius:10px; color:#42534c; background:#fff; font-size:.86rem; }
.help-song-search svg { width:18px; color:#63736d; }
.help-song-source-card,.help-song-drag-card { padding:14px 16px; border:1px solid #cfe0d8; border-radius:12px; background:#effbf5; }
.help-song-source-card strong,.help-song-drag-card strong { font-size:.92rem; }
.help-song-source-card { opacity:.54; }
.help-song-drag-card { position:absolute; z-index:3; top:146px; left:calc(75% - 130px); width:260px; grid-template-columns:38px 1fr; gap:10px; align-items:center; box-sizing:border-box; border-color:#70c9a5; background:#e6faef; box-shadow:0 18px 38px rgba(19,72,54,.22); animation:help-song-drag 4.8s cubic-bezier(.55,.04,.2,1) infinite; }
.help-song-drag-card>svg { width:20px; padding:8px; box-sizing:content-box; border-radius:9px; color:#a66d09; background:#fff0bd; }
.help-song-drag-pointer { position:absolute; z-index:4; top:205px; left:74%; color:#0d3150; filter:drop-shadow(0 3px 2px rgba(255,255,255,.9)); animation:help-song-pointer 4.8s cubic-bezier(.55,.04,.2,1) infinite; }
.help-song-drag-pointer svg { width:30px; height:30px; fill:#fff; }
.help-live-flow-section { padding:38px 0; border-bottom:1px solid var(--help-line); }
.help-live-flow-section>.help-feature-copy { max-width:820px; margin-bottom:24px; }
.help-live-send-control { display:flex; align-items:center; gap:10px; width:max-content; margin-top:17px; padding:9px 13px 9px 9px; border-radius:12px; color:#fff; background:#11251f; font-size:.82rem; font-weight:800; box-shadow:0 8px 20px rgba(9,34,28,.18); }
.help-live-send-control svg { width:19px; height:19px; padding:8px; box-sizing:content-box; border-radius:9px; background:#173c69; }
.help-live-route-demo { min-width:min(100%,430px); padding:14px; border-radius:16px; color:#fff; background:#0b1210; box-shadow:0 14px 34px rgba(5,18,14,.18); }
.help-live-route-controls { display:grid; grid-template-columns:minmax(130px,.86fr) minmax(160px,1.14fr); gap:7px; padding:7px; border:1px solid #3d4944; border-radius:999px; background:#1b2421; }
.help-live-route-controls>span { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; padding:0 14px; border:1px solid #46524d; border-radius:999px; background:#202a27; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.help-live-route-controls strong { color:#fff; font-size:.82rem; letter-spacing:-.01em; }
.help-live-route-controls svg { flex:none; width:16px; color:#d9e1de; }
.help-live-route-demo>p { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 8px; margin:12px 0 0; color:#b8c5c0; font-size:.72rem; line-height:1.4; text-align:center; }
.help-live-route-demo>p b { color:#fff; }
.help-live-route-demo>p i { width:3px; height:3px; align-self:center; border-radius:50%; background:#71807a; }
.help-live-sequence { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.help-live-sequence figure,.help-live-standby-media figure { margin:0; overflow:hidden; border:1px solid var(--help-line); border-radius:14px; background:#fff; }
.help-live-sequence figure { display:grid; }
.help-live-sequence img { display:block; width:auto; max-width:100%; height:auto; margin:0 auto; object-fit:contain; background:#f3f6f4; }
.help-live-sequence figcaption { order:-1; display:grid; gap:3px; padding:14px 17px; border-bottom:1px solid var(--help-line); color:var(--help-muted); font-size:.82rem; line-height:1.45; }
.help-live-sequence figcaption strong { color:var(--help-navy); font-size:.94rem; }
.help-live-sequence .is-ready { border-color:#b9decf; }
.help-live-sequence .is-ready figcaption { border-bottom-color:#cde8dc; background:#f2fbf7; }
.help-live-sequence .is-live { border-color:#efb3c0; }
.help-live-sequence .is-live figcaption { border-bottom-color:#f2c4ce; background:#fff4f6; }
.help-live-standby-media figcaption { padding:10px 12px; color:var(--help-muted); font-size:.75rem; line-height:1.4; }
.help-live-controls { display:flex; flex-wrap:nowrap; gap:7px; width:max-content; padding:7px; border:1px solid #3e4945; border-radius:999px; background:#17201d; box-shadow:0 14px 30px rgba(5,18,14,.18); }
.help-live-controls>span { display:grid; place-items:center; width:46px; height:46px; border:1px solid #4b5954; border-radius:50%; color:#dce7e2; background:#202c28; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.help-live-controls>span>svg { width:22px; height:22px; }
.help-live-controls .is-theme { color:#acb8b3; }
.help-live-controls .is-bible { color:#fff; background:#145c91; border-color:#3aa2df; box-shadow:0 0 0 2px rgba(58,162,223,.16),inset 0 1px 0 rgba(255,255,255,.12); }
.help-live-controls .is-standby { color:#fff; background:#70393e; border-color:#aa626a; }
.help-live-controls .is-off { color:#d7bfc2; background:#3d292b; border-color:#745057; }
.help-feature-row>.help-live-size-shot { width:min(100%,345px); justify-self:center; background:#0c1418; }
.help-feature-row>.help-live-size-shot img { max-height:none; background:#0c1418; }
.help-feature-row>.help-settings-content-shot { width:min(100%,560px); justify-self:center; }
.help-feature-row>.help-settings-content-shot img { max-height:560px; background:#f8faf9; }
.help-live-standby-media { display:grid; grid-template-columns:1fr .72fr; gap:12px; align-items:start; }
.help-live-standby-media img { display:block; width:100%; max-height:410px; object-fit:contain; background:#f3f6f4; }
.help-live-power-control { display:flex; align-items:center; gap:12px; padding:13px 17px; border:1px solid #83535a; border-radius:14px; color:#f2dfe1; background:#3a282a; font-weight:800; }
.help-live-power-control svg { width:22px; height:22px; padding:9px; box-sizing:content-box; border:1px solid #765057; border-radius:50%; }
.help-mobile-app-guide .help-feature-row { grid-template-columns:minmax(280px,1fr) minmax(270px,.72fr); align-items:start; padding:44px 0; }
.help-mobile-app-guide .help-feature-copy p+p { margin-top:13px; }
.help-mobile-app-guide .help-feature-row>figure { width:min(100%,390px); justify-self:center; border-radius:22px; box-shadow:0 18px 46px rgba(13,49,80,.1); }
.help-mobile-app-guide .help-feature-row>figure img { width:100%; max-height:720px; object-fit:contain; object-position:top; background:#f5f8fa; }
.help-mobile-app-guide .help-feature-row figcaption { padding:12px 15px; }
.help-mobile-center-trigger { width:max-content; max-width:100%; margin-top:18px; }
.help-remote-readiness-demo { display:grid; gap:10px; width:min(100%,610px); }
.help-remote-setting { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 15px; border:1px solid #d8e2de; border-radius:14px; background:#fff; }
.help-remote-setting>svg { width:19px; height:19px; padding:8px; box-sizing:content-box; border-radius:10px; color:#174f7c; background:#edf4fb; }
.help-remote-setting>span { display:grid; gap:3px; }
.help-remote-setting strong { color:#17231f; font-size:.86rem; }
.help-remote-setting small { color:#71807a; font-size:.72rem; }
.help-remote-setting>b { position:relative; width:56px; height:32px; border-radius:999px; background:#164e7c; box-shadow:inset 0 1px 2px rgba(0,0,0,.14); }
.help-remote-setting>b::after { content:""; position:absolute; top:3px; right:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); }
.help-shine-center-online { display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; margin-top:6px; padding:9px 13px; border:1px solid #bfe7d1; border-radius:11px; color:#17814f; background:#eefaf4; box-shadow:0 7px 18px rgba(22,129,79,.08); }
.help-shine-center-online>svg { width:19px; height:19px; }
.help-shine-center-online>span { display:grid; line-height:1.15; }
.help-shine-center-online small { color:#56a77e; font-size:.56rem; font-weight:800; letter-spacing:.06em; }
.help-shine-center-online strong { margin-top:3px; color:#16804e; font-size:.77rem; }
.help-mobile-connected { display:grid; gap:3px; padding:13px 15px; border-left:3px solid #35a76f; color:#60706a; background:#f6fbf8; }
.help-mobile-connected>span { font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.help-mobile-connected strong { color:#173d31; font-size:.9rem; }
.help-mobile-connected small { color:#22815a; font-size:.72rem; }
.help-mobile-access-demo { display:grid; gap:12px; width:min(100%,520px); }
.help-app-store-tile,.help-mobile-access-demo>a { display:flex; align-items:center; gap:15px; padding:15px; border:1px solid #d7e1dd; border-radius:18px; color:inherit; background:#fff; text-decoration:none; box-shadow:0 12px 28px rgba(13,49,80,.07); }
.help-app-store-tile img { width:72px; height:72px; border-radius:18px; object-fit:cover; box-shadow:0 7px 18px rgba(7,53,125,.2); }
.help-app-store-tile span,.help-mobile-access-demo>a span { display:grid; gap:3px; min-width:0; }
.help-app-store-tile small,.help-mobile-access-demo>a small { color:#70807a; font-size:.62rem; font-weight:850; letter-spacing:.08em; }
.help-app-store-tile strong,.help-mobile-access-demo>a strong { color:var(--help-navy); font-size:1rem; }
.help-app-store-tile em,.help-mobile-access-demo>a em { color:var(--help-muted); font-size:.76rem; font-style:normal; }
.help-mobile-access-demo>a>svg { width:28px; height:28px; padding:14px; box-sizing:content-box; border-radius:15px; color:#fff; background:#153c69; }
.help-mobile-access-demo>a:hover { border-color:#8cbad5; transform:translateY(-1px); }
.help-support-end { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:30px; align-items:center; margin-top:34px; padding:30px 0 4px; border-top:1px solid var(--help-line); }
.help-support-end>div:first-child { display:grid; grid-template-columns:46px minmax(0,1fr); gap:16px; align-items:start; }
.help-support-end>div:first-child>svg { width:22px; height:22px; padding:12px; box-sizing:content-box; border-radius:13px; color:#fff; background:var(--help-navy); }
.help-support-end small { color:#6c7e77; font-size:.66rem; font-weight:850; letter-spacing:.09em; }
.help-support-end h3 { margin:5px 0 8px; color:var(--help-navy); font-size:1.18rem; }
.help-support-end p { margin:0; color:var(--help-muted); font-size:.88rem; line-height:1.7; }
.help-report-issue-control { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 18px; border:1px solid #d6dfdb; border-radius:10px; color:#0d3b67; background:#fff; box-shadow:0 10px 24px rgba(13,49,80,.06); }
.help-report-issue-control>svg { width:18px; height:18px; }
.help-report-issue-control strong { font-size:.84rem; }
@media (max-width:760px) { .help-support-end { grid-template-columns:1fr; gap:20px; } .help-report-issue-control { width:100%; box-sizing:border-box; } }
@keyframes help-song-drag { 0%,12% { opacity:0; transform:translate3d(0,0,0) scale(1); } 18%,48% { opacity:1; transform:translate3d(0,0,0) scale(1.02); } 68% { opacity:1; transform:translate3d(-152%,-58px,0) scale(.98); } 78%,100% { opacity:0; transform:translate3d(-152%,-58px,0) scale(.96); } }
@keyframes help-song-pointer { 0%,12% { opacity:0; transform:translate3d(0,0,0); } 18%,48% { opacity:1; transform:translate3d(0,0,0); } 68% { opacity:1; transform:translate3d(-410px,-58px,0); } 78%,100% { opacity:0; transform:translate3d(-410px,-58px,0); } }
@keyframes help-folder-ready { 0%,50%,82%,100% { border-color:#d4ad5a; box-shadow:none; } 62%,72% { border-color:#16835d; box-shadow:0 0 0 5px rgba(22,131,93,.12); } }
.help-feature-row-compact { grid-template-columns:minmax(250px,1fr) auto; }
.help-inline-note { margin-top:14px!important; padding-left:13px; border-left:3px solid #2d83bd; color:#31556f!important; font-size:.88rem; }
.help-tool-list { display:grid; gap:0; }
.help-tool-list section { display:grid; grid-template-columns:58px 1fr; gap:20px; align-items:start; padding:26px 0; border-bottom:1px solid var(--help-line); }
.help-tool-list section>svg { width:26px; height:26px; padding:15px; box-sizing:content-box; border-radius:14px; color:#fff; background:#153c69; box-shadow:0 8px 20px rgba(18,49,76,.12); }
.help-tool-list section:nth-child(2)>svg,.help-tool-list section:nth-child(3)>svg { background:#173d6b; }
.help-tool-list section:nth-child(4)>svg { color:#795226; background:#f5ead7; border:1px solid #d6b985; }
.help-tool-list section:nth-child(5)>svg { color:#63706d; background:#eef1ef; border:1px solid #d8dfdc; }
.help-tool-list section:nth-child(6)>svg { color:#175b43; background:#e6f3eb; border:1px solid #bddbc9; }
.help-tool-list h3 { margin:0 0 7px; color:var(--help-navy); font-size:1.28rem; }
.help-tool-list p { margin:5px 0; color:var(--help-muted); line-height:1.65; }
.help-authentic-gallery { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.help-authentic-gallery figure { margin:0; overflow:hidden; border:1px solid var(--help-line); border-radius:16px; background:#fff; }
.help-authentic-gallery img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#eef2ef; }
.help-authentic-gallery figcaption { display:flex; align-items:center; gap:8px; padding:12px 14px; color:var(--help-navy); font-size:.82rem; font-weight:750; }
.help-authentic-gallery figcaption svg { width:17px; }
.help-empty { padding:50px; text-align:center; color:var(--help-muted); }
.help-lightbox[hidden] { display:none; }
.help-lightbox { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:clamp(14px,3vw,38px); background:rgba(3,14,23,.92); backdrop-filter:blur(12px); animation:help-lightbox-in .18s ease-out both; }
.help-lightbox figure { display:grid; max-width:100%; max-height:100%; margin:0; place-items:center; }
.help-lightbox img { display:block; max-width:calc(100vw - clamp(28px,6vw,76px)); max-height:calc(100vh - 110px); object-fit:contain; border-radius:10px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.42); touch-action:pinch-zoom; animation:help-lightbox-image-in .22s ease-out both; }
.help-lightbox figcaption { max-width:min(900px,calc(100vw - 48px)); padding:14px 12px 0; color:#dce9ee; font-size:.88rem; line-height:1.5; text-align:center; }
.help-lightbox-close { position:fixed; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; background:rgba(7,29,45,.82); font:300 2rem/1 inherit; cursor:pointer; }
.help-lightbox-close:hover,.help-lightbox-close:focus-visible { background:#fff; color:var(--help-navy); outline:none; }
.help-lightbox-open { overflow:hidden; }
@keyframes help-lightbox-in { from { opacity:0; } }
@keyframes help-lightbox-image-in { from { opacity:0; transform:scale(.965); } }
@media (prefers-reduced-motion:no-preference) { .help-topic { animation:help-rise .45s both; } @keyframes help-rise { from { opacity:0; transform:translateY(12px); } } }
@media (prefers-reduced-motion:reduce) { .help-song-drag-card { opacity:1; transform:translate3d(-152%,-58px,0); animation:none; } .help-song-drag-pointer { display:none; } .help-song-folder-target { border-color:#16835d; animation:none; } }
@media (max-width:900px) { .help-hero { grid-template-columns:1fr; } .help-layout { grid-template-columns:1fr; } .help-index { position:static; overflow:auto; } .help-index nav { flex-direction:row; width:max-content; border:0; } .help-index a { min-width:170px; border-bottom:1px solid var(--help-line); } .help-index a:hover,.help-index a.is-active { margin:0; border-left:0; border-bottom:2px solid var(--help-blue); } .help-quickstart { grid-template-columns:auto 1fr; } .help-quickstart ol { grid-column:1/-1; } .help-feature-row,.help-feature-row-compact,.help-mobile-app-guide .help-feature-row { grid-template-columns:1fr; } .help-live-sequence { grid-template-columns:1fr; } .help-live-sequence figure:last-child { grid-column:auto; } }
@media (max-width:620px) { .help-main { padding-inline:14px; } .help-hero { padding:28px 20px; border-radius:20px; } .help-hero h1 { font-size:2.75rem; } .help-quickstart { margin-bottom:38px; padding:18px; } .help-quickstart ol { display:grid; grid-template-columns:1fr 1fr; } .help-quickstart li { border-left:0; border-top:1px solid #bdd8ca; } .help-topic-heading { grid-template-columns:34px 1fr; } .help-topic-icon { display:none; } .help-topic-body { padding-left:0; } .help-definition-list,.help-control-grid { grid-template-columns:1fr; } .help-media-pair,.help-authentic-gallery,.help-feature-media-pair,.help-live-sequence,.help-live-standby-media { grid-template-columns:1fr; } .help-live-sequence figure:last-child { grid-column:auto; } .help-live-sequence img { height:auto; max-height:260px; } .help-feature-row { padding:28px 0; } .help-feature-copy { grid-template-columns:42px minmax(0,1fr); gap:12px; } .help-feature-copy>svg { width:20px; height:20px; padding:10px; } .help-feature-media-pair img { height:auto; max-height:260px; } .help-song-drag-demo { min-height:390px; grid-template-columns:1fr; } .help-song-library-pane,.help-song-source-pane { min-height:150px; padding:16px; } .help-song-library-pane { border-right:0; border-bottom:1px solid #d7e0dd; } .help-song-pane-title { margin-bottom:10px; } .help-song-drag-card { top:286px; left:calc(50% - 120px); width:240px; animation-name:help-song-drag-mobile; } .help-song-drag-pointer { top:338px; left:58%; animation-name:help-song-pointer-mobile; } .help-phone-strip { grid-template-columns:repeat(2,1fr); } .help-registration-demo { grid-template-columns:1fr; padding:16px; } .help-registration-demo.help-registration-after { margin-left:0; } .help-flow-arrow { transform:rotate(90deg); justify-self:center; } .help-register-action { align-items:flex-end; } @keyframes help-song-drag-mobile { 0%,12% { opacity:0; transform:translate3d(0,0,0) scale(1); } 18%,48% { opacity:1; transform:translate3d(0,0,0) scale(1.02); } 68% { opacity:1; transform:translate3d(0,-220px,0) scale(.98); } 78%,100% { opacity:0; transform:translate3d(0,-220px,0) scale(.96); } } @keyframes help-song-pointer-mobile { 0%,12% { opacity:0; transform:translate3d(0,0,0); } 18%,48% { opacity:1; transform:translate3d(0,0,0); } 68% { opacity:1; transform:translate3d(-24px,-220px,0); } 78%,100% { opacity:0; transform:translate3d(-24px,-220px,0); } } }
@media (max-width:620px) and (prefers-reduced-motion:reduce) { .help-song-drag-card { opacity:1; transform:translate3d(0,-220px,0); animation:none; } }