.sg-launch { margin-left:8px; cursor:pointer; font:inherit; font-size:12px }
.sg-help-links { margin-top:12px }
.sg-panel,.sg-index,.sg-resume { font-family:Montserrat,sans-serif; color:#111524; box-sizing:border-box }
.sg-panel { display:flex; flex-direction:column; position:fixed; z-index:60002; inset:auto; margin:0; width:360px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 24px); overflow:hidden; background:#fff; border:1px solid #dfe5f4; border-radius:12px; box-shadow:0 10px 45px #0e123340; padding:18px; font-size:13px }
.sg-panel[hidden],.sg-spot[hidden],.sg-resume[hidden] { display:none!important }
.sg-panel::backdrop { background:transparent; pointer-events:none }
.sg-panel h2 { font-size:18px; line-height:1.35; margin:9px 0; outline:none }
.sg-panel p { margin:8px 0; line-height:1.55 }
.sg-top,.sg-buttons,.sg-bottom,.sg-index-head { display:flex; align-items:center; justify-content:space-between; gap:10px }
.sg-top { font-size:11px; color:#5a6072 }
.sg-top button,.sg-index-head>button { border:0; background:transparent; font-size:24px; color:#5a6072; padding:0 4px; cursor:pointer }
.sg-progress { height:4px; margin:12px 0; border-radius:3px; background:#eef2fe; overflow:hidden }
.sg-progress i { display:block; height:100%; background:#2A62FE }
.sg-lesson { font-size:11px; font-weight:600; color:#2A62FE }
.sg-status { background:#f2f5ff; border:1px solid #e1e7fb; border-radius:7px; padding:9px; color:#404a68; font-size:12px }
.sg-buttons { margin-top:16px }
.sg-buttons button { border:1px solid #2A62FE; color:#2A62FE; background:#fff; border-radius:7px; padding:9px 15px; font:inherit; font-weight:600; cursor:pointer }
.sg-buttons .sg-primary { background:#2A62FE; color:#fff }
.sg-buttons button:disabled { opacity:.45; cursor:default }
.sg-bottom { margin-top:12px; gap:7px }
.sg-bottom button { border:0; background:none; color:#536079; font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:3px; padding:5px 0; cursor:pointer }
.sg-spot { position:fixed; z-index:60000; border:2px solid #2A62FE; border-radius:8px; pointer-events:none; box-shadow:0 0 0 9999px #0e123329 }
.sg-resume { position:fixed; z-index:60001; right:20px; bottom:20px; max-width:calc(100vw - 40px); border:1px solid #2A62FE; border-radius:24px; background:#fff; color:#2A62FE; padding:12px 18px; box-shadow:0 5px 20px #0e123326; cursor:pointer; font-weight:600; font-size:12px }
.sg-index { width:720px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 40px); padding:24px; border:1px solid #dfe5f4; border-radius:12px; background:#fff; margin:auto; overflow:auto }
.sg-index::backdrop { background:#0e12335c }
.sg-index-head { align-items:flex-start; margin-bottom:18px }
.sg-index-head h2 { font-size:21px; margin:0 0 7px }
.sg-index-head p,.sg-index-foot { font-size:12px; color:#5a6072; line-height:1.55; margin:0 }
.sg-search { display:block; font-size:12px; font-weight:600; margin-bottom:18px }
.sg-search input { display:block; width:100%; margin-top:7px; padding:11px; border:1px solid #dfe5f4; border-radius:7px; font:inherit; box-sizing:border-box }
.sg-group { border:1px solid #e1e5f0; border-radius:8px; margin:10px 0; overflow:hidden }
.sg-group>summary { cursor:pointer; padding:14px; font-size:14px; font-weight:700; background:#f7f9ff }
.sg-group>summary span { font-size:11px; font-weight:400; color:#5a6072; margin-left:9px }
.sg-lesson-button { display:block; width:100%; text-align:left; border:0; border-top:1px solid #e8ecf5; background:#fff; padding:13px 16px; cursor:pointer; font:inherit }
.sg-lesson-button b { display:block; font-size:13px; color:#111524 }
.sg-lesson-button span { display:block; font-size:11px; color:#5a6072; margin-top:4px }
.sg-lesson-button:hover,.sg-step-button:hover { background:#f2f5ff }
.sg-index-foot { margin-top:18px }
.sg-step-button { width:100%; display:flex; gap:12px; align-items:center; text-align:left; padding:12px; border:0; border-bottom:1px solid #e8ecf5; background:#fff; cursor:pointer; font:inherit }
.sg-step-button>span { display:grid; place-items:center; border-radius:50%; background:#eef2ff; color:#2A62FE; min-width:28px; height:28px; font-size:12px }
.sg-step-button small { display:block; color:#5a6072; font-size:10px; margin-bottom:4px }
.sg-step-button b { font-size:13px }
.sg-step-button.active { background:#edf2ff }
.sg-panel button:focus-visible,.sg-index button:focus-visible,.sg-index input:focus-visible,.sg-resume:focus-visible,.sg-launch:focus-visible { outline:3px solid #2A62FE; outline-offset:3px }
@media(max-width:600px){.sg-panel{width:calc(100vw - 20px);max-height:48dvh;padding:14px}.sg-panel h2{font-size:16px}.sg-panel .sg-text{font-size:12px}.sg-index{padding:17px}.sg-top{font-size:10px}.sg-resume{right:10px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.sg-panel,.sg-spot{scroll-behavior:auto}}

.sg-content { overflow:auto; min-height:0; overscroll-behavior:contain }
.sg-top,.sg-progress,.sg-buttons,.sg-bottom { flex-shrink:0 }
/* Short landscape screens need room for the explanation as well as controls. */
@media(max-height:500px){.sg-panel{max-height:calc(100dvh - 20px);width:min(360px,calc(100vw - 20px));padding:12px}.sg-buttons{margin-top:10px}.sg-bottom{margin-top:8px}.sg-progress{margin:8px 0}}