.home-tips { margin-block-start:1.6rem; }
/* Guidance uses a smaller shared transition, including the feed canvas inset. */
.page-landing-authenticated main > [data-home-section="intro"]:has([data-home-tips]):has(+ [data-social-feed]) { --home-transition-space:var(--home-guidance-space); }
.page-landing-authenticated .home-tips-header .home-subsection-title { margin:0; }
.home-tips-header { display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; }
.home-tips-header form,.home-tips-header h3 { margin:0; }
.home-tips-public { margin-block-start:0; scroll-margin-top:110px; }
.home-tips:has(> [data-home-tips-panel]:not([hidden])) > .home-tips-header { margin-block-end:var(--home-heading-space,1rem); }
/* Keep the viewport's focus-ring allowance from collapsing into section gaps. */
.home-tips > [data-home-tips-panel] { display:flow-root; }
.home-tips-public .home-tips-header h2 { margin:0; }
.home-tips-toggle { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:44px; min-width:44px; padding:.5rem; border:0; border-radius:4px; background:none; color:var(--text); font:inherit; font-weight:700; text-align:start; }
.home-tips-toggle svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:rotate(180deg); }
.home-tips-toggle[aria-expanded=false] svg { transform:none; }
.home-tips-toggle:disabled { opacity:.7; }
.home-tips-next { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px; max-width:100%; padding:.45rem .7rem; border:1px solid var(--border); border-radius:var(--control-radius,10px); color:var(--accent); background:var(--card-soft); font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.home-tips-next:hover:not(:disabled) { border-color:var(--border-control); background:var(--accent-soft); }
.home-tips-next:disabled { opacity:.65; cursor:wait; }
.home-tips-next svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.home-tips-cards-viewport { padding:6px; margin:-6px; overflow:hidden; }
.tips-grid-home.is-leaving { animation:tips-cards-leave 160ms cubic-bezier(.4,0,1,1) both; }
.tips-grid-home.is-entering { animation:tips-cards-enter 240ms cubic-bezier(.16,1,.3,1) both; }
@keyframes tips-cards-leave { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-20px); } }
@keyframes tips-cards-enter { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.home-tips-intro,.tips-page-header p { color:var(--muted); line-height:1.65; }
.home-tips-intro { margin:0 0 .85rem; font-size:.8rem; }
.tips-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.tips-card { position:relative; display:flex; flex-direction:column; min-width:0; gap:.65rem; padding:2.1rem 1.1rem 1rem; border:1px solid var(--border); border-radius:10px 24px 12px 12px; background:var(--card); color:var(--text); text-decoration:none; overflow-wrap:anywhere; box-shadow:0 3px 10px rgb(15 23 42 / 5%); }
.tips-card::before { content:""; position:absolute; inset-inline-start:1.1rem; top:.65rem; width:10px; height:10px; border:1px solid var(--border-control); border-radius:50%; background:var(--bg); box-shadow:inset 0 1px 2px rgb(15 23 42 / 12%); pointer-events:none; }
.tips-card::after { content:""; position:absolute; inset-inline-start:2.15rem; inset-inline-end:1.2rem; top:.95rem; height:1px; background:var(--border); pointer-events:none; }
.tips-card:hover { border-color:var(--accent); color:var(--text); background:var(--card-soft); }
.tips-card :is(h2,h3,h4) { margin:0; font-size:.98rem; font-weight:750; line-height:1.45; }
.tips-card p { margin:0; color:var(--muted); font-size:.81rem; line-height:1.65; }
.tips-card-read { display:flex; align-items:center; gap:.5rem; margin-block-start:auto; color:var(--accent); font-size:.78rem; font-weight:650; }
.tips-grid-home .tips-card { padding:2rem 1rem .85rem; }
.tips-grid-home .tips-card p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.tips-grid-home .tips-card-visual { --tip-flow-accent:var(--accent); --tip-card-tint:8%; gap:.65rem; padding:.85rem; border-radius:12px; border-color:color-mix(in srgb,var(--tip-flow-accent) 24%,var(--border)); background:color-mix(in srgb,var(--tip-flow-accent) var(--tip-card-tint),var(--card)); box-shadow:none; }
.tips-grid-home .tips-card-visual:is(:hover,:focus-visible) { --tip-card-tint:12%; border-color:var(--tip-flow-accent); }
.theme-dark .tips-grid-home .tips-card-visual { --tip-card-tint:12%; }
.theme-dark .tips-grid-home .tips-card-visual:is(:hover,:focus-visible) { --tip-card-tint:16%; }
.tips-card-visual::before,.tips-card-visual::after { content:none; }
.tips-card-visual :is(h2,h3,h4) { font-size:.95rem; line-height:1.4; }
.tips-card-flow { margin:0; padding:.3rem .35rem .45rem; }
.tips-grid-home .tips-card-visual[data-tip-tone=violet] { --tip-flow-accent:#7953b5; }
.tips-grid-home .tips-card-visual[data-tip-tone=teal] { --tip-flow-accent:#23776f; }
.tips-grid-home .tips-card-visual[data-tip-tone=amber] { --tip-flow-accent:#98621f; }
.tips-grid-home .tips-card-visual[data-tip-tone=slate] { --tip-flow-accent:#526c86; }
.theme-dark .tips-card-visual[data-tip-tone=violet] { --tip-flow-accent:#bea4f1; }
.theme-dark .tips-card-visual[data-tip-tone=teal] { --tip-flow-accent:#72c9bc; }
.theme-dark .tips-card-visual[data-tip-tone=amber] { --tip-flow-accent:#edc181; }
.theme-dark .tips-card-visual[data-tip-tone=slate] { --tip-flow-accent:#a6bed7; }
.tips-flow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0; padding:0; list-style:none; }
.tips-flow-step { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; gap:.4rem; text-align:center; }
.tips-flow-scene { width:56px; height:49px; max-width:100%; overflow:visible; color:var(--tip-flow-accent); }
.tips-flow-window { fill:var(--card); stroke:color-mix(in srgb,var(--tip-flow-accent) 45%,var(--border)); stroke-width:1.3; }
.tips-flow-window-bar { fill:none; stroke:color-mix(in srgb,var(--tip-flow-accent) 35%,var(--border)); }
.tips-flow-window-dot { fill:var(--tip-flow-accent); }
.tips-flow-icon { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tips-flow-connector { position:absolute; top:21px; inset-inline-start:calc(50% + 26px); width:calc(100% - 46px); height:12px; fill:none; stroke:var(--tip-flow-accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tips-card-flow:dir(rtl) .tips-flow-connector { transform:scaleX(-1); }
.tips-flow-label { color:var(--text); font-size:.75rem; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.tips-flow-number { color:var(--muted); font-variant-numeric:tabular-nums; }
@media(max-width:359.98px) {
    .tips-flow-steps { gap:.35rem; }
}
@media(forced-colors:active) {
    .tips-flow-window,.tips-flow-window-bar,.tips-flow-icon,.tips-flow-connector { stroke:CanvasText; }
    .tips-flow-window { fill:Canvas; }
    .tips-flow-window-dot { fill:CanvasText; }
}
.tips-empty { margin:0; color:var(--muted); font-size:.85rem; }
.tips-status { margin:.65rem 0 0; font-size:.8rem; line-height:1.6; }
.tips-status:empty { display:none; }
.tips-status.is-error { color:var(--danger-text,var(--bs-danger)); }
.tips-page-header { margin-block-end:1.4rem; }
.tips-page-header h1 { font-size:clamp(1.65rem,3vw,2.1rem); font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
.tips-page-header p { margin:0; font-size:.9rem; }
.tips-detail-container { max-width:880px; }
.tips-article { padding:clamp(1rem,3vw,2rem); border:1px solid var(--border); border-radius:14px; background:var(--card); }
.tips-body p { margin:0 0 1rem; white-space:pre-line; color:var(--text); line-height:1.8; overflow-wrap:anywhere; }
.tips-body p:last-child { margin-block-end:0; }
.tips-action { margin-block-start:1.5rem; }
.tips-inactive { display:inline-block; margin-block-start:.5rem; color:var(--muted); font-size:.76rem; }
.tips-editor { margin-block-start:1.2rem; border:1px solid var(--border); border-radius:12px; background:var(--card-soft); }
.tips-editor > summary { min-height:44px; padding:.85rem 1rem; color:var(--text); font-weight:700; cursor:pointer; }
.tips-editor-content { padding:0 1rem 1rem; }
.tips-editor-content .form-text { color:var(--muted); }
.tips-editor-language { margin-block-end:1.2rem; }
.tips-editor-language > div { display:flex; align-items:center; gap:.6rem; }
.tips-editor-language select { min-width:0; flex:1; }
.tips-editor-language button { flex:none; }
.tips-editor-form { display:grid; gap:1rem; }
.tips-editor-form > div { min-width:0; }
.tips-editor-form textarea { resize:vertical; }
.tips-active-control { display:flex; align-items:center; gap:.5rem; padding-inline-start:0; }
.tips-active-control .form-check-input { float:none; margin:0; flex:none; }
:is(.home-tips,.tips-page) :is(a,button,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
:is(.home-tips,.tips-page) [hidden] { display:none !important; }
@media(max-width:767.98px) { .tips-grid { grid-template-columns:minmax(0,1fr); } .tips-editor-language > div { flex-wrap:wrap; } .tips-editor-language button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .tips-grid-home.is-leaving,.tips-grid-home.is-entering { animation:none; } }
@media(forced-colors:active) { .tips-card,.tips-article,.tips-editor { border-color:CanvasText; } }

.tips-reader { width:min(820px,calc(100vw - 32px)); max-width:calc(100vw - 16px); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border-control); border-radius:16px; background:var(--card); color:var(--text); box-shadow:var(--shadow-lg); overflow:hidden; }
.tips-reader[open] { display:flex; flex-direction:column; }
dialog.tips-reader.op-movable-dialog { overflow:hidden; }
.tips-reader::backdrop { background:rgb(15 23 42 / 48%); }
.tips-reader-header { display:flex; align-items:center; gap:1rem; flex:none; padding:1rem 1.25rem; border-block-end:1px solid var(--border); background:var(--card-soft); }
.tips-reader-header h2 { margin:0; min-width:0; flex:1; font-size:1.15rem; line-height:1.45; overflow-wrap:anywhere; }
.tips-reader-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text); font-size:1.8rem; line-height:1; }
.tips-reader-close:hover { background:var(--accent-soft); }
.tips-reader-scroll { overflow:auto; min-height:0; padding:1.2rem 1.5rem 1.7rem; overscroll-behavior:contain; }
.tips-reader-summary { color:var(--muted); line-height:1.7; }
.tips-reader-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-block-start:1.3rem; }
.tips-reader-actions .btn { min-height:44px; white-space:normal; }
.tips-reader :is(a,button,[tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.tips-reader [hidden] { display:none !important; }
.tips-diagram { margin:1.2rem 0 1.6rem; padding:1rem; border:1px solid var(--border); border-radius:12px; background:var(--card-soft); }
.tips-diagram figcaption { margin-block-end:1rem; color:var(--muted); font-size:.8rem; font-weight:700; }
.tips-diagram-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:0; padding:0; list-style:none; counter-reset:tip-step; }
.tips-diagram-steps li { position:relative; display:flex; flex-direction:column; align-items:center; gap:.65rem; text-align:center; min-width:0; counter-increment:tip-step; }
.tips-diagram-steps li:not(:last-child)::after { content:""; position:absolute; top:27px; inset-inline-start:calc(50% + 31px); width:calc(100% - 52px); border-block-start:1px dashed var(--border-control); }
.tips-diagram-symbol { display:grid; place-items:center; width:54px; height:54px; flex:none; border:1px solid var(--border-control); border-radius:14px; background:var(--card); color:var(--accent); }
.tips-diagram-symbol svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.tips-diagram-label { font-size:.82rem; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.tips-diagram-label::before { content:counter(tip-step) ". "; color:var(--muted); }
@media(max-width:575.98px) {
    .tips-reader { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
    .tips-reader-header { padding:.65rem .75rem; gap:.4rem; }
    .tips-reader-header h2 { font-size:1rem; }
    .tips-reader-scroll { padding:.9rem .85rem 1.5rem; }
    .tips-diagram { padding:.85rem .6rem; }
    .tips-diagram-steps { gap:.5rem; }
    .tips-diagram-symbol { width:46px; height:46px; border-radius:12px; }
    .tips-diagram-symbol svg { width:24px; height:24px; }
    .tips-diagram-steps li:not(:last-child)::after { top:23px; inset-inline-start:calc(50% + 27px); width:calc(100% - 46px); }
    .tips-diagram-label { font-size:.74rem; }
}
@media(forced-colors:active) {
    .tips-reader,.tips-diagram,.tips-diagram-symbol,.tips-card::before { border-color:CanvasText; }
    .tips-reader :focus-visible { outline-color:Highlight; }
}

/* One illustrated feature, with its controls aligned to the same narrow area. */
.home-tips { width:100%; max-width:880px; margin-inline:auto; }
.home-tips-header { align-items:center; gap:.65rem 1rem; }
.home-tips-header :is(h2,h3) { font-size:1.1rem; line-height:1.4; }
.home-tips-toggle { padding-inline:0 .4rem; gap:.55rem; font-size:1.1rem; }
.home-tips-controls { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-inline-start:auto; }
.home-tips-pause { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; max-width:100%; padding:.45rem .65rem; border:1px solid transparent; border-radius:var(--control-radius,10px); color:var(--muted); background:transparent; font-size:.78rem; line-height:1.4; overflow-wrap:anywhere; }
.home-tips-pause:hover { background:var(--card-soft); color:var(--text); }
.home-tips-pause svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.home-tips-pause .tips-resume-symbol,.home-tips-pause[data-paused=true] .tips-pause-symbol { display:none; }
.home-tips-pause[data-paused=true] .tips-resume-symbol { display:block; }
.home-tips-next { font-size:.78rem; background:transparent; }
.home-tips-next:dir(rtl) svg { transform:scaleX(-1); }
.tips-grid-home { display:block; }
.tips-feature {
    --scene-accent:#3459b8; --scene-glow:#bdd2f8; --scene-outline:#a4bae9;
    --visual-surface:var(--card); --visual-soft:color-mix(in srgb,var(--scene-accent) 9%,var(--card));
    --visual-ink:var(--text); --visual-muted:var(--muted);
    position:relative; isolation:isolate; min-width:0; color:var(--text); border:0; border-radius:0; background:none; box-shadow:none;
}
.tips-feature[data-tip-tone=teal] { --scene-accent:#23776f; --scene-glow:#b5d9cc; --scene-outline:#a1c6b9; }
.tips-feature[data-tip-tone=violet] { --scene-accent:#7953b5; --scene-glow:#d1c3ef; --scene-outline:#b8a9dc; }
.tips-feature[data-tip-tone=amber] { --scene-accent:#98621f; --scene-glow:#e9cf9e; --scene-outline:#d5bc93; }
.tips-feature[data-tip-tone=slate] { --scene-accent:#526c86; --scene-glow:#c0cfdd; --scene-outline:#a6bacb; }
.theme-dark .tips-feature { --scene-accent:#a6c4ff; --scene-glow:#335fa6; --scene-outline:#3a5278; --visual-soft:color-mix(in srgb,var(--scene-accent) 12%,var(--card)); }
.theme-dark .tips-feature[data-tip-tone=teal] { --scene-accent:#84d8d1; --scene-glow:#1a6866; --scene-outline:#315762; }
.theme-dark .tips-feature[data-tip-tone=violet] { --scene-accent:#c8b0fa; --scene-glow:#674791; --scene-outline:#54466a; }
.theme-dark .tips-feature[data-tip-tone=amber] { --scene-accent:#ebcb91; --scene-glow:#7d6231; --scene-outline:#64543e; }
.theme-dark .tips-feature[data-tip-tone=slate] { --scene-accent:#a6bed7; --scene-glow:#385168; --scene-outline:#476079; }
.tips-feature-backdrop { position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 75% 45%,color-mix(in srgb,var(--scene-glow) 42%,transparent),transparent 66%); -webkit-mask-image:radial-gradient(ellipse 69% 70% at 56% 49%,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse 69% 70% at 56% 49%,#000 25%,transparent 75%); }
.tips-feature-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:24px; min-height:300px; padding-block:14px 0; }
.tips-feature-copy { min-width:0; padding-block:12px; }
.tips-feature-title { margin:0; font-size:clamp(1.35rem,2.3vw,1.85rem); font-weight:700; letter-spacing:-.025em; line-height:1.25; overflow-wrap:anywhere; text-wrap:balance; }
.tips-feature-summary { margin:1rem 0 1.2rem; color:var(--muted); font-size:.86rem; line-height:1.75; overflow-wrap:anywhere; }
.tips-feature-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.tips-feature-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:.6rem .9rem; font-size:.82rem; white-space:normal; overflow-wrap:anywhere; }
.tips-feature-read { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:44px; max-width:100%; padding:.6rem .9rem; color:var(--scene-accent); border:1px solid color-mix(in srgb,var(--scene-accent) 35%,var(--border)); border-radius:var(--control-radius,10px); background:color-mix(in srgb,var(--scene-accent) 8%,var(--card)); font-size:.82rem; font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
.tips-feature-read:hover { color:var(--scene-accent); border-color:var(--scene-accent); background:color-mix(in srgb,var(--scene-accent) 14%,var(--card)); }
.tips-feature-read svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tips-feature-read:dir(rtl) svg { transform:scaleX(-1); }
.tips-feature-visual { min-width:0; width:100%; margin:0; }
.tips-feature-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; margin:0; padding:.6rem 0 1rem; }
.tips-feature-steps .tips-flow-step { flex-direction:row; align-items:flex-start; gap:.65rem; text-align:start; }
.tips-feature-step-number { display:grid; place-items:center; flex:none; width:25px; height:25px; border:0; border-radius:50%; background:color-mix(in srgb,var(--scene-accent) 10%,transparent); font-size:.7rem; color:var(--scene-accent); font-variant-numeric:tabular-nums; }
.tips-feature-steps .tips-flow-label { padding-block-start:3px; font-size:.75rem; font-weight:500; line-height:1.55; }
.tips-feature-visual:dir(rtl) .scene-art { transform:scaleX(-1); }
.tips-feature-visual:dir(rtl) .scene-symbol { transform:scaleX(-1); }
@media(max-width:767.98px) {
    .tips-feature-main { grid-template-columns:minmax(0,1fr); gap:0; padding-block-start:8px; }
    .tips-feature-copy { padding-block:12px 2px; }
    .tips-feature-title { font-size:1.5rem; }
    .tips-feature-summary { margin-block:.75rem 1rem; }
    .tips-feature-visual { max-width:450px; justify-self:center; }
    .tips-feature-steps { gap:.65rem; }
    .tips-feature-steps .tips-flow-step { gap:.4rem; }
    .tips-feature-step-number { width:22px; height:22px; }
    .tips-feature-steps .tips-flow-label { font-size:.72rem; padding-block-start:1px; }
}
@media(max-width:479.98px) {
    .home-tips-header { align-items:flex-start; }
    .home-tips-controls { gap:.15rem; }
    .home-tips-next,.home-tips-pause { width:44px; padding:0; }
    .home-tips-next > span,.home-tips-pause > span { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .tips-feature-steps { grid-template-columns:minmax(0,1fr); gap:.65rem; }
    .tips-feature-steps .tips-flow-step { gap:.65rem; align-items:center; }
    .tips-feature-steps .tips-flow-label { font-size:.77rem; padding:0; }
    .tips-feature-backdrop { background:radial-gradient(ellipse at 70% 62%,color-mix(in srgb,var(--scene-glow) 38%,transparent),transparent 68%); }
}
@media(forced-colors:active) {
    .tips-feature-backdrop { display:none; }
    .tips-feature-read,.tips-feature-step-number { border-color:ButtonText; color:ButtonText; }
}