.visual-guides[hidden], .in-app-guide[hidden], .guide-intro[hidden] {display:none}
.visual-guides {margin-block:1.7rem 2.5rem;scroll-margin-top:12px}
.guide-prompt, .guide-intro, .choice-copy small {color:var(--muted)}
.guide-prompt {margin-bottom:1rem}
.guide-options {display:grid;gap:.65rem}
.visual-guides button, .guide-dialog button, .guide-jump select {font:inherit;color:inherit}
.visual-guides button, .guide-dialog button {cursor:pointer}
.visual-guides :focus-visible, .guide-dialog :focus-visible {outline:3px solid var(--focus);outline-offset:3px}
.guide-choice {width:100%;display:flex;align-items:center;gap:1rem;padding:.75rem 1.2rem .75rem .85rem;border:1px solid var(--line);border-radius:16px;background:#fffef9;text-align:start}
.guide-choice:hover {border-color:#799680;background:#f1f4e9}
.choice-thumb {display:grid;place-items:center;flex:none;width:55px;height:62px;overflow:hidden;border-radius:12px;background:#e0e8d9}
.choice-thumb img {display:block;width:30px;max-height:55px;object-fit:contain;border-radius:5px}
.guide-choice[data-key=watch] .choice-thumb {background:#eadecf}
.guide-choice[data-key=watch] .choice-thumb img {width:37px;border-radius:7px}
.guide-choice[data-key=watchWidget] .choice-thumb {background:#e3eceb}
.choice-copy {display:grid;gap:.1rem}
.choice-copy strong {font-size:1.05rem;line-height:1.45}
.choice-copy small {font-size:.82rem}
.chevron {margin-inline-start:auto;width:9px;height:9px;flex:none;border-inline-end:2px solid;border-block-start:2px solid;transform:rotate(45deg)}
[dir=rtl] .chevron {transform:rotate(-45deg)}
.guide-top,.guide-controls,.zoom-bar {display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.guide-top {margin-bottom:.7rem}
.all-guides {border:0;background:transparent;text-decoration:underline;text-underline-offset:.2em;padding:.45rem 0;min-height:44px}
.guide-position {color:var(--muted);font-size:.88rem}
.guide-heading {margin-bottom:.3rem}
.guide-intro {margin:.45rem 0 0;font-size:.97rem;line-height:1.65}
.guide-step {display:grid;grid-template-columns:.95fr 1.05fr;gap:1rem;align-items:center;margin-block:1rem;padding:1.25rem;border:1px solid #d2d9ca;border-radius:18px;background:#fffefa}
.step-line {display:flex;gap:4px;max-width:10rem;margin:0 0 .8rem}
.step-line span {height:4px;flex:1;background:#dce3d5;border-radius:6px}
.step-line .filled {background:#52795b}
.guide-instruction h3 {font-size:1.4rem;line-height:1.32;margin:0 0 .5rem;text-wrap:pretty}
.guide-instruction p {font-size:.97rem;line-height:1.65}
button.guide-picture {display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;align-self:stretch;gap:.4rem;min-width:0;width:100%;padding:.7rem;background:#eaf0e2;border-radius:12px;border:0;cursor:zoom-in}
.guide-picture img {display:block;height:clamp(180px,26vw,258px);width:100%;object-fit:contain}
.image-hint {font-size:.75rem;line-height:1.45;color:#304b3d}
.guide-controls button,.guide-dialog button {border-radius:12px;min-height:44px;padding:.55rem 1.25rem;font-weight:600;border:1px solid #b9c9b7;background:#f9fbf5}
.guide-controls .next {background:#315744;color:white;border-color:#315744}
.guide-controls button:disabled {color:#68786d;background:#f1f3ed;opacity:.65;cursor:default}
.guide-jump {display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:.88rem;margin-top:1rem}
.guide-jump select {min-width:0;max-width:100%;text-overflow:ellipsis;min-height:44px;padding:.4rem .6rem;background:#fffef9;border:1px solid #c2cebe;border-radius:8px}
.questions-title {margin-bottom:.7rem}
.guide-dialog {width:min(94vw,860px);max-width:94vw;max-height:94dvh;padding:.8rem;border:0;border-radius:16px;background:var(--paper);color:var(--ink)}
.guide-dialog::backdrop {background:#10271edb}
.zoom-bar {padding:.2rem .3rem .7rem}
.zoom-bar strong {font-size:.92rem}
.guide-dialog button {font-size:.83rem;white-space:nowrap}
.zoom-scroll {overflow:auto;max-height:calc(90dvh - 67px);background:#e4ebdf;border-radius:10px;text-align:center}
.zoom-scroll img {display:block;width:auto;max-width:100%;height:auto;max-height:calc(87dvh - 67px);object-fit:contain;margin:auto}
@media (max-width:620px) {
  .guide-step {grid-template-columns:1fr;gap:.8rem;padding:.9rem}
  .guide-instruction h3 {font-size:1.2rem}
  .guide-picture img {height:clamp(180px,52vw,250px)}
  .guide-jump {display:grid;grid-template-columns:auto minmax(0,1fr)}
  .guide-dialog {width:96vw;max-width:96vw;padding:.55rem}
  .choice-copy strong {font-size:1rem}
  .guide-choice {padding:.65rem .8rem}
}
