/* Spherography (components/spherography.py, sg_sphero.js): sg- classes only, everything under .sg-root (all /assets
   stylesheets load on every page). Tokens as the app: panels rgba(0,0,0,.6), text #e8e8e8, muted #9fb3c8, headings
   #cfefff, accent amber #f0a030, glow #4be9fa, gold #ffd46b. */

.sg-root { position: relative; width: 100%; flex: 1 1 auto; height: 100%; min-height: 520px; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); background: #02050b; color: #e8e8e8;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: .82rem; user-select: none;
  --sg-gold: #ffd46b; --sg-acc: #f0a030; --sg-glow: #4be9fa; --sg-muted: #9fb3c8; --sg-head: #cfefff; }
.sg-root *, .sg-root *::before, .sg-root *::after { box-sizing: border-box; }
.sg-root.sg-max { position: fixed; inset: 0; width: 100vw; height: 100vh; min-height: 0; z-index: 5000; border-radius: 0; border: 0; }
.sg-cv { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
.sg-root.hovering .sg-cv { cursor: pointer; }
.sg-root.grab .sg-cv { cursor: grabbing; }
.sg-root .sg-muted { color: var(--sg-muted); font-size: .76rem; }
.sg-root .center { text-align: center; justify-content: center; }
.sg-root .sg-gold { color: var(--sg-gold); font-weight: 700; }

/* loading veil */
.sg-veil { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: var(--sg-muted); background: radial-gradient(circle, rgba(6,10,18,.3), #02050b 70%); transition: opacity 1s ease; }
.sg-veil.gone { opacity: 0; pointer-events: none; }
.sg-veil-orb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--sg-gold) 35%, #8a5a10);
  box-shadow: 0 0 30px rgba(255,212,107,.7), 0 0 80px rgba(255,212,107,.3); animation: sg-breathe 1.6s ease-in-out infinite; }
@keyframes sg-breathe { 50% { transform: scale(1.12); box-shadow: 0 0 46px rgba(255,212,107,.9), 0 0 110px rgba(255,212,107,.4); } }

/* glass */
.sg-hud, .sg-panel, .sg-m-card, .sg-tip, .sg-toast { background: rgba(4,9,16,.72); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 34px rgba(0,0,0,.45); }
.sg-hud { position: absolute; z-index: 10; }

/* who you are + rank */
.sg-who { top: 12px; left: 12px; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; max-width: 360px; }
.sg-who-ic { flex: 0 0 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), var(--c) 45%, rgba(0,0,0,.6));
  box-shadow: 0 0 18px var(--c); }
.sg-who-t { min-width: 0; }
.sg-rank { color: var(--sg-gold); font-weight: 750; font-size: .95rem; letter-spacing: .3px; font-family: Oxanium, "Segoe UI", sans-serif; }
.sg-rank span { color: var(--sg-muted); font-weight: 500; font-size: .74rem; font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.sg-arch { color: var(--sg-head); font-size: .8rem; margin: 1px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-xp { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sg-xp i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f0a030, #ffd46b); box-shadow: 0 0 8px rgba(255,212,107,.8); transition: width .8s ease; }
.sg-xp-l { color: var(--sg-muted); font-size: .7rem; margin-top: 4px; }
.sg-xp-l a { color: var(--sg-acc); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* the nine sphere counters */
.sg-gems { top: 12px; right: 12px; display: flex; align-items: center; gap: 4px; padding: 7px 9px; }
.sg-gem { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 30px; padding: 3px 2px; border: 0; border-radius: 9px;
  background: transparent; color: #e8e8e8; cursor: pointer; font: inherit; transition: background .15s; }
.sg-gem:hover { background: rgba(255,255,255,.06); }
.sg-gem-o { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--c); opacity: .55; }
.sg-gem-o.on { opacity: 1; border-color: rgba(255,255,255,.6); background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, rgba(0,0,0,.5)); box-shadow: 0 0 9px var(--c); }
.sg-gem b { font-size: .72rem; font-weight: 700; }
.sg-gem.pop .sg-gem-o { animation: sg-pop .55s ease-out; }
@keyframes sg-pop { 40% { transform: scale(1.8); box-shadow: 0 0 22px var(--c); } }
.sg-streak { margin-left: 6px; padding: 4px 8px; border-radius: 9px; background: rgba(255,255,255,.05); color: var(--sg-muted); font-weight: 700; font-size: .78rem; }
.sg-streak.hot { color: #ffb15c; text-shadow: 0 0 8px rgba(255,140,40,.8); }

/* action bar */
.sg-bar { left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 7px; }
.sg-sep { width: 1px; height: 22px; background: rgba(255,255,255,.1); margin: 0 2px; }
.sg-root .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e8e8e8; font: inherit; font-weight: 600; font-size: .8rem;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.sg-root .sg-btn:hover { background: rgba(255,255,255,.11); border-color: rgba(255,212,107,.5); }
.sg-root .sg-btn:active { transform: translateY(1px); }
.sg-root .sg-btn.acc { color: #1d1304; background: linear-gradient(180deg, #ffd46b, #f0a030); border-color: #f0a030; box-shadow: 0 4px 16px rgba(240,160,48,.3); }
.sg-root .sg-btn.acc:hover { filter: brightness(1.07); }
.sg-root .sg-btn.big { min-height: 44px; padding: 8px 20px; font-size: .9rem; }
.sg-root .sg-btn.sm { min-height: 28px; padding: 3px 10px; font-size: .74rem; }
.sg-root .sg-btn.sg-ico { width: 34px; padding: 0; }
.sg-root .sg-btn.sg-wide { width: 100%; margin-top: 14px; min-height: 42px; }
.sg-due { min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: .7rem; }
.sg-btn.has .sg-due { background: #f0a030; color: #1d1304; box-shadow: 0 0 10px rgba(240,160,48,.8); }
.sg-root .sg-link { margin-top: 12px; background: none; border: 0; color: var(--sg-muted); cursor: pointer; font: inherit; font-size: .76rem; }

/* legend */
.sg-root.sg-tunnel .sg-lg.crystal { display: none; }
.sg-legend { left: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; font-size: .68rem; color: var(--sg-muted); }
.sg-legend span { display: flex; align-items: center; gap: 7px; }
.sg-lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sg-lg.orb { background: radial-gradient(circle at 35% 30%, #fff, #4be9fa 45%, #0c3940); box-shadow: 0 0 6px #4be9fa; }
.sg-lg.ready { border: 2px solid #4be9fa; background: rgba(75,233,250,.15); }
.sg-lg.locked { border: 1px solid rgba(255,255,255,.2); background: #141a24; }
.sg-lg.gate { border-radius: 2px; transform: rotate(45deg) scale(.85); border: 2px solid #ffd46b; }
.sg-lg.crystal { border-radius: 2px; background: #ffd46b; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.sg-lg.app { border-radius: 3px; border: 1.5px solid #ffd46b; background: #0c101a; }
.sg-lg.cross { border-radius: 0; height: 0; width: 13px; border-top: 2px dotted #a77ef0; }
.sg-lg.lab { border-radius: 1px; transform: rotate(45deg) scale(.8); border: 1.5px solid #5cd0b3; }
.sg-lg.path { border: 1.5px dashed #ffd46b; }
.sg-lg.due { border: 2px solid #f0a030; border-left-color: transparent; }

/* tooltip */
.sg-tip { position: absolute; left: 0; top: 0; z-index: 30; max-width: 250px; padding: 8px 10px; pointer-events: none; opacity: 0;
  transition: opacity .12s; font-size: .76rem; line-height: 1.4; }
.sg-tip.on { opacity: 1; }
.sg-tip b { display: block; font-size: .82rem; margin-bottom: 1px; }
.sg-tip-gold { color: var(--sg-gold); }

/* toasts */
.sg-toasts { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 35; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.sg-toast { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: .8rem; opacity: 0; transform: translateY(-10px) scale(.96);
  transition: opacity .35s, transform .35s; }
.sg-toast.in { opacity: 1; transform: none; }
.sg-toast > i { color: var(--sg-glow); }
.sg-toast.gold { border-color: rgba(255,212,107,.55); box-shadow: 0 0 26px rgba(255,212,107,.25); }
.sg-toast.gold > i { color: var(--sg-gold); }
.sg-toast.c-found > i { color: #ffd46b; } .sg-toast.c-acct > i { color: #5fd47a; } .sg-toast.c-val > i { color: #f0a030; }
.sg-toast.c-port > i { color: #a77ef0; } .sg-toast.c-stat > i { color: #5b8def; } .sg-toast.c-ml > i { color: #4be9fa; }
.sg-toast.c-trade > i { color: #ff6b6b; } .sg-toast.c-deriv > i { color: #f07cc0; } .sg-toast.c-macro > i { color: #3fd0b0; }

/* the side panel: lesson, quiz, gate, reward */
.sg-panel { position: absolute; z-index: 20; top: 12px; right: 12px; bottom: 12px; width: min(960px, max(430px, 66%), calc(100% - 24px)); overflow: hidden;
  transform: translateX(calc(100% + 30px)); transition: transform .38s cubic-bezier(.2,.8,.2,1); user-select: text; scrollbar-width: thin; }
.sg-panel.on { transform: none; }
.sg-panel { container-type: inline-size; }
.sg-panel:not(.narrow) { background: rgba(5,10,18,.93); }
.sg-panel.narrow { top: 70px; bottom: 70px; width: min(430px, calc(100% - 24px)); overflow-y: auto; }
.sg-p-in { padding: 14px 20px 14px; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sg-panel.narrow .sg-p-in { display: block; height: auto; padding: 14px 18px 20px; }
/* tabs: the pages of a sphere */
.sg-tabs { margin-left: auto; display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.05); }
.sg-root .sg-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px; border: 0; background: transparent; color: var(--sg-muted);
  font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.sg-root .sg-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.sg-root .sg-tab.on { color: #1d1304; background: linear-gradient(180deg, #ffd46b, #f0a030); }
.sg-root .sg-tab[data-tab=lab].on { background: linear-gradient(180deg, #8fe6cf, #5cd0b3); color: #04221b; }
.sg-p-sp { flex: 1 1 auto; }
.sg-pgs { flex: 1 1 auto; min-height: 0; position: relative; }
.sg-pg { display: none; height: 100%; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.sg-pg.on { display: block; }
.sg-pg.lesson.on { display: flex; flex-direction: column; overflow: hidden; }
/* the lesson: everything to learn on one screen (sizes in em: fitLesson() lowers --fs when the text is long) */
.sg-les { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; font-size: calc(var(--fs, 1) * 1em); }
.sg-les .sg-hook { font-size: 1.1em; margin-bottom: .7em; }
.sg-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.sg-col { min-width: 0; }
.sg-les .sg-body p { font-size: 1.07em; line-height: 1.55; margin: 0 0 .65em; }
.sg-les .sg-formula { font-size: 1.22em; margin: 0 0 .7em; padding: .6em .8em; }
.sg-les .sg-box { font-size: 1.02em; margin: 0 0 .7em; padding: .6em .8em; line-height: 1.48; }
.sg-les .sg-box-t { font-size: .82em; }
.sg-les .sg-lock { font-size: 1.02em; }
.sg-viz { margin: 0 0 .7em; padding: 8px 10px 6px; border-radius: 12px; background: rgba(0,0,0,.34); border: 1px solid rgba(88,196,221,.3); box-shadow: inset 0 0 22px rgba(88,196,221,.06); }
.sg-viz-k { color: #58c4dd; font-size: .68rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
.sg-cta { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.sg-root .sg-btn.lab { color: #8fe6cf; border-color: rgba(92,208,179,.6); background: rgba(92,208,179,.08); }
.sg-root .sg-btn.lab:hover { background: rgba(92,208,179,.16); border-color: #5cd0b3; }
.sg-pg[data-pg=quiz] { max-width: 640px; margin: 0 auto; }
.sg-pg[data-pg=quiz] .sg-quiz { border-top: 0; margin-top: 4px; padding-top: 4px; }
.sg-pg[data-pg=links], .sg-pg[data-pg=lab] { max-width: 720px; }
@media (max-width: 1180px) { .sg-tab i { display: none; } }
@container (max-width: 620px) { .sg-cols { grid-template-columns: 1fr; } }
/* the practice of a sphere (Lab points) */
.sg-labpts { margin-left: 8px; padding: 1px 7px; border-radius: 9px; font-style: normal; font-size: .72rem; font-weight: 700; color: #8fe6cf;
  background: rgba(92,208,179,.1); border: 1px solid rgba(92,208,179,.4); font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.sg-lab { padding: 4px 2px; }
.sg-lab-k { color: #5cd0b3; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sg-lab-k b { color: #c9f5ea; }
.sg-lab-t { color: #fff; font-family: Oxanium, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 700; margin: 4px 0 6px; }
.sg-lab-s { color: #dfe7ee; font-size: .9rem; line-height: 1.55; }
.sg-lab-steps { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.sg-lab-steps span { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; border-radius: 10px; font-size: .84rem; line-height: 1.45; color: #dfe7ee;
  background: rgba(92,208,179,.05); border: 1px solid rgba(92,208,179,.2); }
.sg-lab-steps span > div b { color: #fff; }
.sg-lab-steps span > b.n { flex: 0 0 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .72rem;
  background: rgba(92,208,179,.2); color: #c9f5ea; }
.sg-lab-pts { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: .86rem; color: #ffe7a8;
  background: rgba(255,212,107,.06); border: 1px solid rgba(255,212,107,.3); }
.sg-lab-pts em { margin-left: auto; font-style: normal; color: #8fe6cf; font-weight: 700; font-size: .78rem; }
.sg-lab.done .sg-lab-pts { color: #b5f5c8; background: rgba(63,191,127,.1); border-color: rgba(63,191,127,.4); }
.sg-lab-track { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; }
.sg-lab-track .sg-req em { font-style: normal; color: #8fe6cf; font-size: .68rem; }
.sg-root .sg-lab-track .sg-req.cur { border-color: #5cd0b3; background: rgba(92,208,179,.1); }
/* reading: the wide panel is open, the map's own controls step back */
.sg-root.reading .sg-bar, .sg-root.reading .sg-depth, .sg-root.reading .sg-legend, .sg-root.reading .sg-focus, .sg-root.reading .sg-gems { opacity: 0; pointer-events: none; }
.sg-bar, .sg-depth, .sg-legend, .sg-gems { transition: opacity .25s; }
/* the tunnel's depth slider (above the bar) and the "zoom in" card */
.sg-depth { left: 50%; bottom: 66px; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 5px 12px; font-size: .7rem; color: var(--sg-muted); }
.sg-root.sg-tunnel .sg-depth { display: flex; }
.sg-depth input { width: min(360px, 34vw); height: 4px; accent-color: #ffd46b; cursor: pointer; }
.sg-depth b { min-width: 86px; color: var(--sg-head); font-weight: 650; }
.sg-focus { left: 50%; bottom: 104px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px 12px; max-width: min(560px, calc(100% - 24px)); text-align: center; }
.sg-focus.on { display: flex; animation: sg-rise .35s cubic-bezier(.2,.8,.2,1); }
.sg-focus-t { display: flex; align-items: center; gap: 8px; color: #fff; font-family: Oxanium, "Segoe UI", sans-serif; font-size: 1.05rem; font-weight: 700; }
.sg-focus-t i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px var(--c); }
.sg-focus .sg-q-acts { margin-top: 8px; }
.sg-focus .sg-muted b { color: #fff; }
.sg-root .sg-btn.on { border-color: rgba(255,212,107,.7); color: var(--sg-gold); }
.sg-rw-hero { position: relative; }
.sg-rw-lock { position: absolute; right: -9px; top: -9px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transform: rotate(-45deg); background: #0a0f18; border: 1.5px solid var(--sg-gold); }
.sg-rw-hero .sg-rw-lock i { transform: none; font-size: .8rem; color: var(--sg-gold); }
.sg-p-h { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sg-root .sg-x { order: 9; margin-left: auto; width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: var(--sg-head); cursor: pointer; font-size: 1rem; }
.sg-root .sg-x:hover { background: rgba(255,255,255,.08); }
.sg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 12px; font-size: .72rem; font-weight: 650;
  color: var(--c); background: rgba(255,255,255,.05); border: 1px solid var(--c); }
.sg-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sg-chip.gold { --c: #ffd46b; }
.sg-mins { color: var(--sg-muted); font-size: .72rem; }
.sg-badge { padding: 2px 8px; border-radius: 10px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sg-muted); background: rgba(255,255,255,.06); }
.sg-badge.on { color: #b5f5c8; background: rgba(63,191,127,.16); }
.sg-badge.ready { color: #1d1304; background: var(--sg-gold); }
.sg-p-t { color: #fff; font-size: 1.32rem; font-weight: 700; line-height: 1.25; margin: 2px 0 8px; font-family: Oxanium, "Segoe UI", sans-serif; letter-spacing: .2px; }
.sg-gate-ic { color: var(--sg-gold); margin-right: 4px; }
.sg-hook { color: var(--sg-gold); font-style: italic; font-size: .9rem; line-height: 1.45; margin-bottom: 10px; }
.sg-body p { margin: 0 0 9px; color: #dfe7ee; font-size: .87rem; line-height: 1.6; }
.sg-body b { color: #fff; }
.sg-formula { margin: 12px 0; padding: 11px 14px; border-radius: 10px; text-align: center; font-family: "Cambria Math", Cambria, "Times New Roman", serif;
  font-size: 1.08rem; color: #fff; background: rgba(75,233,250,.06); border: 1px solid rgba(75,233,250,.35); box-shadow: inset 0 0 18px rgba(75,233,250,.08), 0 0 14px rgba(75,233,250,.12); }
.sg-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: .83rem; line-height: 1.5; color: #dfe7ee; background: rgba(255,255,255,.04); border-left: 3px solid; }
.sg-box-t { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; }
.sg-box.ex { border-color: #5b8def; } .sg-box.ex .sg-box-t { color: #8db0ff; }
.sg-box.key { border-color: var(--sg-gold); background: rgba(255,212,107,.06); } .sg-box.key .sg-box-t { color: var(--sg-gold); }
.sg-box.app { border-color: var(--sg-acc); } .sg-box.app .sg-box-t { color: var(--sg-acc); }
.sg-sec { margin: 16px 0 6px; color: var(--sg-muted); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.sg-rws, .sg-papers { display: flex; flex-direction: column; gap: 5px; }
.sg-root .sg-rw, .sg-root .sg-paper { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: .8rem; color: #e8e8e8; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: border-color .15s, background .15s; }
.sg-root .sg-rw:hover, .sg-root .sg-paper:hover { border-color: rgba(255,212,107,.55); background: rgba(255,212,107,.06); }
.sg-rw > i, .sg-paper > i { color: var(--sg-gold); width: 18px; text-align: center; }
.sg-rw span, .sg-paper span { flex: 1; min-width: 0; }
.sg-rw em, .sg-paper em { color: var(--sg-muted); font-style: normal; font-size: .7rem; white-space: nowrap; }
.sg-rw.on { border-color: rgba(255,212,107,.45); }
.sg-rw.on em { color: var(--sg-gold); }
.sg-paper b { color: var(--sg-head); }
.sg-reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sg-root .sg-req { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 12px; cursor: pointer; font: inherit; font-size: .74rem;
  color: #dfe7ee; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.sg-root .sg-req:hover { border-color: var(--c); }
.sg-req i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c); }
.sg-req.on i { background: var(--c); box-shadow: 0 0 6px var(--c); }
.sg-lock { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 10px; font-size: .82rem; line-height: 1.5;
  background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.16); color: #cfdcea; }
.sg-lock > i { color: var(--sg-muted); font-size: 1.1rem; margin-top: 2px; }

/* quiz */
.sg-quiz { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sg-modal .sg-quiz { border-top: 0; margin-top: 6px; padding-top: 0; }
.sg-q-h { color: var(--sg-glow); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.sg-q { color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.45; margin-bottom: 10px; }
.sg-opts { display: flex; flex-direction: column; gap: 6px; }
.sg-root .sg-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 11px; text-align: left; cursor: pointer;
  font: inherit; font-size: .84rem; line-height: 1.4; color: #e8e8e8; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: border-color .15s, background .15s, transform .12s; }
.sg-root .sg-opt:not(:disabled):hover { border-color: rgba(75,233,250,.65); background: rgba(75,233,250,.07); transform: translateX(2px); }
.sg-opt b { flex: 0 0 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .72rem;
  background: rgba(255,255,255,.08); color: var(--sg-head); }
.sg-root .sg-opt:disabled { cursor: default; opacity: .55; }
.sg-root .sg-opt.right { opacity: 1; border-color: #3fbf7f; background: rgba(63,191,127,.14); box-shadow: 0 0 16px rgba(63,191,127,.25); }
.sg-opt.right b { background: #3fbf7f; color: #04140b; }
.sg-root .sg-opt.wrong { opacity: 1; border-color: #e66767; background: rgba(230,103,103,.12); animation: sg-shake .4s; }
.sg-opt.wrong b { background: #e66767; color: #1a0505; }
@keyframes sg-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sg-why-in { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: .83rem; line-height: 1.5; color: #dfe7ee; animation: sg-in .3s ease-out; }
.sg-why-in.ok { background: rgba(63,191,127,.1); border: 1px solid rgba(63,191,127,.4); } .sg-why-in.ok b { color: #8ff0b4; }
.sg-why-in.ko { background: rgba(230,103,103,.08); border: 1px solid rgba(230,103,103,.35); } .sg-why-in.ko b { color: #ffaaa3; }
@keyframes sg-in { from { opacity: 0; transform: translateY(6px); } }
.sg-q-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sg-gate-prog { color: var(--sg-muted); font-size: .74rem; margin-bottom: 8px; }
.sg-gate-res { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 12px; text-align: center; font-size: .85rem; }
.sg-gate-res i { font-size: 1.8rem; }
.sg-gate-res b { font-size: 1.5rem; font-family: Oxanium, "Segoe UI", sans-serif; }
.sg-gate-res.ok { background: rgba(255,212,107,.08); border: 1px solid rgba(255,212,107,.45); color: #ffe7a8; }
.sg-gate-res.ko { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #cfdcea; }

/* reward hero */
.sg-rw-hero { width: 92px; height: 92px; margin: 10px auto 8px; border-radius: 22px; transform: rotate(45deg); display: flex; align-items: center; justify-content: center;
  background: rgba(255,212,107,.06); border: 1.5px solid rgba(255,212,107,.4); }
.sg-rw-hero i { transform: rotate(-45deg); font-size: 2rem; color: rgba(255,212,107,.75); }
.sg-rw-hero.on { background: linear-gradient(135deg, #fff6d8, #ffd46b 45%, #b8741a); border-color: #fff3c4; box-shadow: 0 0 34px rgba(255,212,107,.6), 0 0 90px rgba(255,212,107,.25); }
.sg-rw-hero.on i { color: #3a2604; }
.sg-rw-hero.near { border-color: rgba(255,212,107,.8); animation: sg-glowp 2s ease-in-out infinite; }
@keyframes sg-glowp { 50% { box-shadow: 0 0 26px rgba(255,212,107,.4); } }
.sg-rw-hero.big { width: 120px; height: 120px; } .sg-rw-hero.big i { font-size: 2.6rem; }

/* modals */
.sg-modal { position: absolute; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; }
.sg-modal.on { display: flex; }
.sg-m-back { position: absolute; inset: 0; background: rgba(1,3,8,.62); animation: sg-fade .3s; }
@keyframes sg-fade { from { opacity: 0; } }
.sg-m-card { position: relative; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 24px 26px;
  animation: sg-rise .4s cubic-bezier(.2,.8,.2,1); scrollbar-width: thin; }
.sg-modal.wide .sg-m-card { width: min(980px, calc(100% - 32px)); }
@keyframes sg-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.sg-m-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sg-m-h > div:first-child { flex: 1; }
.sg-m-t { color: #fff; font-size: 1.25rem; font-weight: 700; font-family: Oxanium, "Segoe UI", sans-serif; margin-bottom: 3px; }
.sg-m-t i { color: var(--sg-gold); margin-right: 6px; }

/* welcome */
.sg-wel { text-align: center; }
.sg-wel-orbs { position: relative; height: 92px; margin: 0 auto 8px; width: 92px; }
.sg-wel-orbs i { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, rgba(0,0,0,.5)); box-shadow: 0 0 12px var(--c);
  transform: rotate(calc(var(--i) * 40deg)) translateX(38px); animation: sg-orbit 12s linear infinite; }
.sg-wel-orbs i:first-child { width: 30px; height: 30px; margin: -15px; transform: none; animation: sg-breathe 2s ease-in-out infinite; }
@keyframes sg-orbit { to { transform: rotate(calc(var(--i) * 40deg + 360deg)) translateX(38px); } }
.sg-wel-k { color: var(--sg-muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.sg-wel-t { font-family: Oxanium, "Segoe UI", sans-serif; font-size: 2.3rem; font-weight: 800; letter-spacing: 1px; line-height: 1.1; margin: 2px 0 8px;
  background: linear-gradient(90deg, #5fd47a, #f0a030, #a77ef0, #4be9fa, #ff6b6b, #f07cc0); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,212,107,.25)); }
.sg-wel-s { color: #dfe7ee; font-size: .9rem; line-height: 1.5; max-width: 440px; margin: 0 auto 14px; }
.sg-wel-pts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; margin-bottom: 6px; }
.sg-wel-pts > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.sg-wel-pts i { grid-row: span 2; color: var(--sg-gold); margin-top: 2px; }
.sg-wel-pts b { color: #fff; font-size: .82rem; }
.sg-wel-pts span { color: var(--sg-muted); font-size: .74rem; line-height: 1.4; }

/* profile quiz + result */
.sg-pq { text-align: center; }
.sg-pq-prog { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.sg-pq-prog i { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.sg-pq-prog i.done { background: var(--sg-acc); } .sg-pq-prog i.cur { background: var(--sg-gold); box-shadow: 0 0 8px rgba(255,212,107,.8); }
.sg-pq-ic { font-size: 1.7rem; color: var(--sg-gold); margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(255,212,107,.5)); }
.sg-pq-q { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; font-family: Oxanium, "Segoe UI", sans-serif; }
.sg-pq-opts { display: flex; flex-direction: column; gap: 8px; }
.sg-root .sg-pq-opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #e8e8e8; transition: border-color .15s, background .15s, transform .12s; }
.sg-root .sg-pq-opt:hover { border-color: rgba(255,212,107,.7); background: rgba(255,212,107,.07); transform: translateX(3px); }
.sg-pq-opt b { color: #fff; font-size: .92rem; } .sg-pq-opt span { color: var(--sg-muted); font-size: .76rem; }
.sg-modal .sg-pq .sg-quiz { text-align: left; }
.sg-pr { text-align: center; }
.sg-pr-ic { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), var(--c) 45%, rgba(0,0,0,.6)); box-shadow: 0 0 30px var(--c), 0 0 80px var(--c); }
.sg-pr-t { color: #fff; font-family: Oxanium, "Segoe UI", sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 2px 0 10px; }
.sg-pr-areas { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sg-pr-s { color: #dfe7ee; font-size: .86rem; line-height: 1.55; max-width: 460px; margin: 0 auto; }
.sg-pr-rws { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sg-pr-rws span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: .74rem; color: #ffe7a8;
  background: rgba(255,212,107,.07); border: 1px solid rgba(255,212,107,.35); }

/* celebration */
.sg-modal.cele .sg-m-card { text-align: center; border-color: rgba(255,212,107,.5); box-shadow: 0 0 60px rgba(255,212,107,.25), 0 10px 40px rgba(0,0,0,.5); overflow: hidden; }
.sg-cele { position: relative; }
.sg-cele-rays { position: absolute; left: 50%; top: 70px; width: 520px; height: 520px; margin: -260px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(rgba(255,212,107,.18) 0 8deg, transparent 8deg 22deg); animation: sg-spin 18s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 0, transparent 65%); mask: radial-gradient(circle, #000 0, transparent 65%); }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-cele-k { position: relative; color: var(--sg-gold); font-size: .74rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; margin-top: 8px; }
.sg-cele-t { position: relative; color: #fff; font-family: Oxanium, "Segoe UI", sans-serif; font-size: 1.7rem; font-weight: 800; margin: 2px 0 8px; }
.sg-cele-s { position: relative; color: #dfe7ee; font-size: .9rem; line-height: 1.5; max-width: 420px; margin: 0 auto; }

/* cabinet */
.sg-ranks { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 14px; }
.sg-ranks span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 12px; font-size: .72rem; color: var(--sg-muted);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.sg-ranks span em { font-style: normal; opacity: .6; }
.sg-ranks span.on { color: #ffe7a8; border-color: rgba(255,212,107,.45); background: rgba(255,212,107,.07); }
.sg-ranks span.on i { color: var(--sg-gold); }
.sg-cab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sg-cab-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08); }
.sg-cab-card.on { border-color: rgba(255,212,107,.5); background: linear-gradient(160deg, rgba(255,212,107,.10), rgba(255,255,255,.02)); box-shadow: 0 0 18px rgba(255,212,107,.12); }
.sg-cab-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  color: var(--c); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.sg-cab-card.on .sg-cab-ic { color: #3a2604; background: linear-gradient(135deg, #fff6d8, #ffd46b 50%, #c88a2a); border-color: #fff3c4; box-shadow: 0 0 14px rgba(255,212,107,.5); }
.sg-cab-t { color: #fff; font-weight: 700; font-size: .86rem; margin-top: 4px; }
.sg-cab-s { color: var(--sg-muted); font-size: .72rem; }
.sg-cab-card.on .sg-cab-s { color: var(--sg-gold); }
.sg-cab-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin: 4px 0 6px; }
.sg-cab-bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sg-cab-card.on .sg-cab-bar i { background: var(--sg-gold); }
.sg-cab-acts { display: flex; gap: 5px; margin-top: auto; }

/* library */
.sg-lib-list { display: flex; flex-direction: column; gap: 6px; }
.sg-lib-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.sg-lib-row.ready { border-color: rgba(255,212,107,.45); background: rgba(255,212,107,.05); }
.sg-lib-st { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
  color: var(--sg-muted); border: 1.5px solid rgba(255,255,255,.14); }
.sg-lib-row.ready .sg-lib-st { color: #3a2604; background: var(--sg-gold); border-color: #fff3c4; box-shadow: 0 0 12px rgba(255,212,107,.6); }
.sg-lib-t { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.4; color: #dfe7ee; }
.sg-lib-t > b { color: var(--sg-head); }
.sg-lib-ns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sg-lib-ns .sg-req { font-size: .68rem; padding: 2px 8px; }

/* the galaxy side of the link (inside lg_galaxy.js's paper panel, outside .sg-root) */
.sg-lk { margin: 10px 0 4px; padding: 9px 10px; border-radius: 10px; background: rgba(255,212,107,.05); border: 1px solid rgba(255,212,107,.3); }
.sg-lk.ready { border-color: rgba(255,212,107,.7); box-shadow: 0 0 14px rgba(255,212,107,.15); }
.sg-lk-h { font-size: .74rem; color: #cfdcea; margin-bottom: 6px; }
.sg-lk-h i { color: #ffd46b; margin-right: 3px; } .sg-lk-h b { color: #ffe7a8; }
.sg-lk-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; margin-top: 2px; border-radius: 7px; border: 0; background: transparent;
  color: #e8e8e8; font: inherit; font-size: .76rem; text-align: left; cursor: pointer; }
.sg-lk-row:hover { background: rgba(255,255,255,.06); }
.sg-lk-row span { flex: 1; min-width: 0; }
.sg-lk-row em { font-style: normal; color: #9fb3c8; font-size: .68rem; }
.sg-lk-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c); flex: 0 0 9px; }
.sg-lk-dot.on { background: var(--c); box-shadow: 0 0 6px var(--c); }

@media (max-width: 1100px) { .sg-legend { display: none; } .sg-who { max-width: 270px; } }
@media (prefers-reduced-motion: reduce) { .sg-root *, .sg-root *::before, .sg-root *::after { animation: none !important; transition: none !important; } }
.sg-root.reading .sg-toasts { left: 17%; }

/* ---- courses and Excel pages (2026-10-09): the course cards, the course's first screen, the syllabus, and the pieces of a
   lesson that carry a worksheet (the grid itself is sg_xl.css) */
.sg-toast.c-bond > i { color: #e9dfc9; } .sg-toast.xl > i { color: #7fe0a8; }
.sg-box.xl { border-color: #3cbe78; background: rgba(60,190,120,.06); } .sg-box.xl .sg-box-t { color: #7fe0a8; }
.sg-root .sg-btn.xl { color: #b5f5c8; border-color: rgba(60,190,120,.6); background: rgba(60,190,120,.08); }
.sg-root .sg-btn.xl:hover { background: rgba(60,190,120,.16); border-color: #3cbe78; }
.sg-root .sg-tab[data-tab=xl].on { background: linear-gradient(180deg, #7fe0a8, #2fa866); color: #04220f; }
.sg-pg[data-pg=xl] { max-width: 920px; }
.sg-xl-note { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 10px; color: #dfe7ee; font-size: .86rem; line-height: 1.5; }
.sg-xl-note > i { color: #7fe0a8; margin-top: 3px; }
.sg-formula sup { font-size: .68em; }
.sg-formula code.sgx-f { padding: 0; border: 0; background: transparent; color: #fff; font-size: .8em; }
.sg-hook code.sgx-f { font-style: normal; }
.sg-crs-list { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 4px; }
.sg-root .sg-crs { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: #e8e8e8;
  background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--c); transition: transform .12s, box-shadow .15s, background .15s; }
.sg-root .sg-crs:hover { transform: translateX(3px); box-shadow: 0 0 20px rgba(255,255,255,.12); background: linear-gradient(120deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); }
.sg-crs > i:first-child { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #10151d;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c) 60%); box-shadow: 0 0 14px var(--c); }
.sg-crs > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-crs b { color: #fff; font-size: .96rem; font-family: Oxanium, "Segoe UI", sans-serif; letter-spacing: .2px; }
.sg-crs em { font-style: normal; color: var(--sg-muted); font-size: .74rem; }
.sg-crs > i:last-child { color: var(--c); }
.sg-crs.on { border-color: var(--sg-gold); background: linear-gradient(120deg, rgba(255,212,107,.14), rgba(255,255,255,.02)); }
.sg-ci .sg-pr-s { max-width: 480px; }
.sg-ci .sg-pr-rws { margin-top: 10px; }
.sg-ci-note { max-width: 480px; margin: 10px auto 0; padding: 8px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.45; color: #c9f5da; background: rgba(60,190,120,.08); border: 1px solid rgba(60,190,120,.35); }
.sg-ci-mods { max-width: 480px; margin: 12px auto 4px; padding: 0; list-style: none; counter-reset: sgm; text-align: left; }
.sg-ci-mods li { counter-increment: sgm; display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .84rem; }
.sg-ci-mods li::before { content: counter(sgm); flex: 0 0 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.08); color: var(--sg-head); }
.sg-ci-mods b { flex: 1; font-weight: 600; color: #e8e8e8; }
.sg-ci-mods em { font-style: normal; color: var(--sg-muted); font-size: .74rem; }
.sg-root .sg-ci .sg-ci-how { margin-top: 8px; font-size: .76rem; color: var(--sg-muted); }
.sg-root a.sg-btn { text-decoration: none; }
.sg-syl-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sg-syl-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c), #ffd46b); transition: width .6s; }
.sg-syl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin: 4px 0 6px; }
.sg-syl-m { padding: 10px 10px 8px; border-radius: 13px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.sg-syl-m.done { border-color: rgba(255,212,107,.45); background: rgba(255,212,107,.05); }
.sg-syl-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sg-syl-h b { flex: 0 0 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .72rem; background: var(--c); color: #10151d; }
.sg-syl-h span { flex: 1; color: #fff; font-weight: 700; font-size: .86rem; line-height: 1.25; }
.sg-syl-h em { font-style: normal; color: var(--sg-muted); font-size: .72rem; white-space: nowrap; }
.sg-root .sg-syl-r { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: 0; border-radius: 8px; background: transparent; color: #cfdcea; font: inherit; font-size: .8rem;
  text-align: left; cursor: pointer; }
.sg-root .sg-syl-r:hover { background: rgba(255,255,255,.07); }
.sg-syl-r span { flex: 1; min-width: 0; }
.sg-syl-r em { font-style: normal; color: var(--sg-muted); font-size: .7rem; white-space: nowrap; }
.sg-syl-d { flex: 0 0 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); }
.sg-syl-d.gate { border-radius: 2px; transform: rotate(45deg) scale(.82); }
.sg-syl-r.ready .sg-syl-d { border-color: var(--c); box-shadow: 0 0 6px var(--c); }
.sg-syl-r.on .sg-syl-d, .sg-syl-r.dim .sg-syl-d { border-color: rgba(255,255,255,.6); background: radial-gradient(circle at 35% 30%, #fff, var(--c) 60%); }
.sg-syl-r.on span, .sg-syl-r.dim span, .sg-syl-r.ready span { color: #fff; }
.sg-syl-r.locked span { color: #8796a8; }
.sg-root .sg-syl-r.next { background: rgba(255,212,107,.1); box-shadow: inset 0 0 0 1px rgba(255,212,107,.5); }
.sg-syl-x { color: #5d6b7c; font-size: .78rem; } .sg-syl-x.on { color: #7fe0a8; }