.guide-page { display: grid; gap: 28px; }
.guide-integrated:not(.guide-authenticated) .app-layout { display: block; }
.guide-integrated:not(.guide-authenticated) .sidebar,
.guide-integrated:not(.guide-authenticated) .bottom-nav,
.guide-integrated:not(.guide-authenticated) .mobile-sidebar-toggle,
.guide-integrated:not(.guide-authenticated) .sidebar-mobile-backdrop { display: none !important; }
.guide-integrated:not(.guide-authenticated) .app-main { padding-bottom: 40px; }
.guide-authenticated .guide-public-brand { display: none; }
.guide-integrated .guide-section { scroll-margin-top: 90px; }
.guide-example__copy .guide-example-tip, .guide-example-tip { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.guide-spacing { margin-top: 18px; }
.guide-reveal { margin-top: 22px; padding: 14px; border: 1px solid #6d9ea9; border-radius: 10px; }
.guide-reveal summary { cursor: pointer; font-weight: 700; }
.guide-reveal summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 700px) {
  .guide-integrated .app-topbar .topbar-actions { display: flex; }
  .guide-integrated .app-topbar { flex-wrap: wrap; }
  .guide-integrated:not(.guide-authenticated) .topbar-context { display: none; }
  .guide-public-brand { font-size: .9rem; }
  .guide-integrated .topbar-actions { gap: 6px; }
}
.guide-integrated [data-guide-guest] a { display: block; width: fit-content; margin-top: 10px; }
.guide-integrated .guide-page { gap: 28px; }
.guide-integrated .guide-section__head { align-items: start; flex-direction: column; gap: 10px; }
.guide-integrated .guide-section__head p { max-width: 780px; font-size: 1rem; }
.guide-integrated .guide-step p, .guide-integrated .guide-faq p { font-size: .95rem; line-height: 1.7; }
.guide-integrated .guide-step { min-height: 0; }
.guide-integrated .guide-preview p { margin: 16px 0 0; font-size: .95rem; }
.guide-integrated .guide-preview h2 { margin: 0; font-size: 1.35rem; line-height: 1.3; }
.guide-integrated .guide-preview a { text-decoration: underline; text-underline-offset: 3px; }
.guide-integrated .guide-preview .guide-caption { font-size: .85rem; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-integrated .guide-note { margin-top: 18px; }
.guide-integrated .guide-note p { font-size: .95rem; }
.guide-integrated .guide-note strong { color: inherit; }
.guide-integrated .guide-decision p { font-size: .95rem; color: #fff; }
.guide-integrated .guide-decision small { font-size: .85rem; color: #fff; }
.guide-integrated .guide-decision strong { color: inherit; }
.guide-integrated .guide-example { margin-top: 20px; }
.guide-ordered { list-style: none; padding: 0; margin: 0; }
.guide-index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.guide-index strong { margin-right: 4px; font-size: .9rem; }
.guide-index a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; }
.guide-index a:hover { background: var(--brand-100); }
.guide-explanation { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 30px); }
.guide-explanation p { max-width: 900px; margin: 0 0 14px; font-size: 1rem; line-height: 1.8; }
.guide-explanation p:last-child { margin-bottom: 0; }
.guide-explanation h3 { margin: 0 0 12px; }
.guide-steps + .guide-explanation { margin-top: 18px; }
.guide-example-list { margin: 0; padding-left: 20px; line-height: 1.75; }
.guide-example-list li + li { margin-top: 10px; }
.guide-start { margin-top: 18px; }
.guide-routine { background: var(--surface-muted); border-radius: 20px; padding: clamp(22px, 4vw, 38px); }
.guide-routine h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); }
.guide-routine p { max-width: 800px; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.guide-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px; border: 1px solid #b8d8de; border-radius: var(--r-lg); background: linear-gradient(135deg, #e8f6f8, #fdfefe); padding: clamp(25px, 4vw, 48px); }
.guide-hero::after { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; bottom: -200px; border: 1px solid rgba(35,105,122,.16); border-radius: 50%; box-shadow: 0 0 0 42px rgba(35,105,122,.04), 0 0 0 84px rgba(35,105,122,.025); pointer-events: none; }
.guide-hero__copy { position: relative; z-index: 1; }
.guide-hero h1 { max-width: 680px; margin: 8px 0 12px; color: var(--ink-950); font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08; }
.guide-hero p { max-width: 650px; margin: 0; color: var(--ink-600); font-size: 1rem; }
.guide-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.guide-preview { position: relative; z-index: 1; align-self: center; border: 1px solid #c5dce0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 16px; }
.guide-preview__top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-600); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.guide-preview__pill { border-radius: 999px; background: var(--brand-100); color: var(--brand-700); padding: 5px 8px; }
.guide-preview__question { margin: 18px 0 14px; color: var(--ink-950); font-size: .95rem; font-weight: 700; line-height: 1.45; }
.guide-preview__answer { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: 9px; color: #fff; text-align: center; font-size: .7rem; font-weight: 800; }
.guide-preview__answer span { display: grid; gap: 2px; min-height: 54px; place-content: center; padding: 5px; }
.guide-preview__answer small { font-size: .64rem; font-weight: 500; opacity: .86; }
.guide-preview__answer span:nth-child(1) { background: #b8473d; }.guide-preview__answer span:nth-child(2) { background: #6c5f73; }.guide-preview__answer span:nth-child(3) { background: #1a6e4e; }.guide-preview__answer span:nth-child(4) { background: #1d6b8a; }
.guide-section { scroll-margin-top: 92px; }
.guide-section__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.guide-section__head h2 { margin: 4px 0 0; color: var(--ink-950); font-size: clamp(1.45rem, 2.8vw, 2rem); }
.guide-section__head p { max-width: 610px; margin: 0; color: var(--ink-600); font-size: .92rem; }
.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-step { min-height: 205px; padding: 21px; box-shadow: none; }
.guide-step__number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: .78rem; font-weight: 850; }
.guide-step h3 { margin: 17px 0 7px; color: var(--ink-950); font-size: 1.02rem; }
.guide-step p { margin: 0; color: var(--ink-600); font-size: .86rem; line-height: 1.58; }
.guide-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.guide-flow__item { display: grid; place-items: center; gap: 6px; min-height: 100px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-800); padding: 14px 10px; text-align: center; font-size: .82rem; font-weight: 750; }
.guide-flow__item b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--surface-muted); color: var(--brand-700); font-size: .75rem; }
.guide-flow__arrow { align-self: center; color: var(--brand-500); font-size: 1.2rem; font-weight: 800; text-align: center; }
.guide-example { display: grid; grid-template-columns: minmax(0, .88fr) minmax(270px, 1.12fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.guide-example__card { background: linear-gradient(155deg, #103943, #174f5f); color: #fff; padding: clamp(24px, 4vw, 40px); }
.guide-example__card span { color: #b8e0e7; font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.guide-example__card p { margin: 16px 0 0; font-size: clamp(1.1rem, 2.2vw, 1.38rem); font-weight: 700; line-height: 1.45; }
.guide-example__card small { display: block; margin-top: 18px; color: rgba(255,255,255,.72); font-size: .8rem; }
.guide-example__copy { padding: clamp(24px, 4vw, 40px); }
.guide-example__copy h3 { margin: 0 0 10px; color: var(--ink-950); }
.guide-example__copy p { margin: 0; color: var(--ink-600); font-size: .9rem; }
.guide-choice-list { display: grid; gap: 8px; margin-top: 18px; }
.guide-choice { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.guide-choice b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: var(--surface-muted); color: var(--brand-700); font-size: .76rem; }
.guide-choice span { color: var(--ink-800); font-size: .83rem; }
.guide-choice em { display: block; margin-top: 2px; color: var(--ink-600); font-size: .75rem; font-style: normal; }
.guide-decision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.guide-decision { padding: 17px; border-radius: var(--r-md); color: #fff; }
.guide-decision h3 { margin: 0; color: inherit; font-size: .98rem; }.guide-decision p { margin: 7px 0 0; color: rgba(255,255,255,.86); font-size: .8rem; line-height: 1.5; }.guide-decision small { display: block; margin-top: 10px; color: rgba(255,255,255,.73); font-size: .73rem; }
.guide-decision--again { background: #b8473d; }.guide-decision--hard { background: #6c5f73; }.guide-decision--good { background: #1a6e4e; }.guide-decision--easy { background: #1d6b8a; }
.guide-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.guide-timeline__point { position: relative; min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }.guide-timeline__point::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 14px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }.guide-timeline__point strong { display: block; color: var(--ink-950); font-size: .85rem; }.guide-timeline__point span { display: block; margin-top: 4px; color: var(--ink-600); font-size: .75rem; line-height: 1.4; }
.guide-note { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #c5dce0; border-radius: var(--r-md); background: #eff8f9; padding: 16px; color: var(--ink-800); }.guide-note b { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--brand-700); color: #fff; }.guide-note p { margin: 1px 0 0; font-size: .86rem; line-height: 1.55; }
.guide-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.guide-faq article { padding: 19px; box-shadow: none; }.guide-faq h3 { margin: 0 0 7px; color: var(--ink-950); font-size: .98rem; }.guide-faq p { margin: 0; color: var(--ink-600); font-size: .84rem; line-height: 1.55; }
[data-theme="dark"] .guide-hero { background: linear-gradient(135deg, #10282e, var(--surface)); border-color: #28505a; }[data-theme="dark"] .guide-preview, [data-theme="dark"] .guide-flow__item, [data-theme="dark"] .guide-example, [data-theme="dark"] .guide-timeline__point { background: var(--surface); border-color: var(--line); }[data-theme="dark"] .guide-note { background: #11262c; border-color: #28505a; }
@media (max-width: 820px) { .guide-hero, .guide-example { grid-template-columns: 1fr; }.guide-steps, .guide-decision-grid { grid-template-columns: repeat(2, 1fr); }.guide-flow { grid-template-columns: repeat(5, minmax(104px, 1fr)); overflow-x: auto; padding-bottom: 4px; }.guide-flow__arrow { display: none; }.guide-timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .guide-hero { padding: 24px 18px; }.guide-hero h1 { font-size: 1.9rem; }.guide-hero__actions .button { width: 100%; }.guide-steps, .guide-decision-grid, .guide-faq, .guide-timeline { grid-template-columns: 1fr; }.guide-section__head { align-items: start; flex-direction: column; }.guide-preview__answer span { font-size: .64rem; } }