#sm-guide { --guide-blue:#123da0; --guide-ink:#14233e; position:fixed; right:24px; bottom:24px; z-index:80; font-family:inherit; color:var(--guide-ink); }
#sm-guide[hidden], #sm-guide [hidden] { display:none !important; }
#sm-guide *, #sm-guide *::before, #sm-guide *::after { box-sizing:border-box; }
#sm-guide button, #sm-guide a, #sm-guide textarea, #sm-guide input { font:inherit; }
#sm-guide button { cursor:pointer; }
#sm-guide .guide-launcher { display:flex; align-items:center; gap:10px; min-height:52px; border:0; border-radius:28px; padding:13px 20px; background:var(--guide-blue); color:#fff; box-shadow:0 6px 24px #123da033; font-size:15px; font-weight:650; }
#sm-guide .guide-launcher svg { width:23px; height:23px; flex:none; }
#sm-guide .guide-panel { position:absolute; right:0; bottom:68px; display:flex; flex-direction:column; width:372px; max-width:calc(100vw - 32px); max-height:min(620px,calc(100dvh - 108px)); overflow:hidden; border:1px solid #dbe4f1; border-radius:22px; background:#fff; box-shadow:0 14px 64px #12213e33; }
#sm-guide .guide-head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; background:var(--guide-blue); color:#fff; padding:18px 20px; }
#sm-guide .guide-head h2 { margin:0; font-size:19px; line-height:1.3; letter-spacing:0; color:inherit; }
#sm-guide .guide-head p { margin:4px 0 0; font-size:14px; line-height:1.45; color:#e1ebff; }
#sm-guide .guide-close { display:grid; place-items:center; min-width:40px; min-height:40px; padding:0; border:1px solid #ffffff66; border-radius:50%; background:transparent; color:#fff; font-size:24px; line-height:1; }
#sm-guide .guide-content { padding:20px; min-height:0; overflow:auto; overscroll-behavior:contain; }
#sm-guide .guide-title { margin:0 0 12px; font-size:17px; line-height:1.45; color:var(--guide-ink); letter-spacing:0; }
#sm-guide .guide-example { margin:0 0 18px; padding:12px; border-left:3px solid #91b0e1; border-radius:0 9px 9px 0; background:#f5f8fd; color:#324c71; font-size:14px; line-height:1.6; }
#sm-guide .guide-search { width:100%; padding:12px; margin:0 0 14px; border:1px solid #bacce7; border-radius:10px; background:#fff; color:var(--guide-ink); font-size:16px; }
#sm-guide .guide-search-results { display:grid; gap:9px; }
#sm-guide .guide-search-results:empty { display:none; }
#sm-guide .guide-secondary { border:0; padding:8px 2px; min-height:36px; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
#sm-guide .guide-selected { margin:0 0 14px; padding:9px 12px; border-radius:10px; background:#edf3fd; color:#234b8b; font-size:14px; line-height:1.4; }
#sm-guide .guide-answer { margin:0 0 18px; font-size:16px; line-height:1.6; }
#sm-guide .guide-options { display:grid; gap:9px; }
#sm-guide .guide-option { display:block; width:100%; min-height:46px; padding:12px 14px; text-align:left; border:1px solid #cad7ed; border-radius:12px; background:#fff; color:#1b3a72; text-decoration:none; font-size:15px; font-weight:550; line-height:1.45; }
#sm-guide .guide-option:hover { background:#f0f5ff; border-color:#8aa8df; }
#sm-guide .guide-primary { text-align:center; background:var(--guide-blue); color:#fff; border-color:var(--guide-blue); }
#sm-guide .guide-primary:hover { background:#0d2e7b; color:#fff; }
#sm-guide .guide-note-label { display:block; margin:0 0 8px; font-size:15px; font-weight:600; }
#sm-guide .guide-note { resize:vertical; width:100%; min-height:100px; max-height:180px; margin:0 0 12px; padding:12px; border:1px solid #bacce7; border-radius:10px; background:#fff; color:var(--guide-ink); font-size:16px; line-height:1.5; }
#sm-guide .guide-hint { margin:0 0 16px; font-size:14px; line-height:1.5; color:#516176; }
#sm-guide .guide-footer { flex:none; padding:10px 20px 14px; border-top:1px solid #e8edf5; background:#f8faff; }
#sm-guide .guide-footer p { margin:8px 0 0; color:#52637a; font-size:12px; line-height:1.45; }
#sm-guide .guide-navigation { display:flex; justify-content:space-between; gap:14px; }
#sm-guide .guide-navigation:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
#sm-guide .guide-back, #sm-guide .guide-home { min-height:36px; padding:5px 0; border:0; background:transparent; color:#234b8b; text-decoration:underline; text-underline-offset:3px; font-size:14px; }
#sm-guide :is(button,a,textarea,input):focus-visible { outline:3px solid #e6b845; outline-offset:3px; }
@media(max-width:600px) { #sm-guide { right:16px; bottom:16px; } #sm-guide .guide-panel { bottom:65px; width:calc(100vw - 32px); max-height:calc(100dvh - 105px); } #sm-guide .guide-launcher { min-height:48px; padding:12px 17px; } #sm-guide .guide-head, #sm-guide .guide-content { padding:16px; } }
@media(prefers-reduced-motion:no-preference) { #sm-guide .guide-panel { animation:sm-guide-enter .16s ease-out; } @keyframes sm-guide-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } }
body > .footer:has(~ #sm-guide) { padding-bottom:104px; }