/* export-guides.css - the export guides' rules, shared by the status page, the console and the public guide pages
   (web/export-guides.js draws the markup; design/export-guides-1103). Every color is a token the page sets on .xg:
   --xg-fg, --xg-dim, --xg-faint, --xg-gold, --xg-line, --xg-line2, --xg-glass, --xg-serif, --xg-sans - the console sets
   its own, the sign-up site its candle and cream. The motion is the console's (D-MOTION-1, design/console-motion-1101):
   a block fades in where it stands on the house cascade, a head rises 240 ms, the rail's thumb slides on the spring,
   a ring breathes three times then rests, and nothing moves a box. Reduce Motion cuts every animation here. */
.xg{--xg-fg:var(--ivory,#F1EBDD);--xg-dim:var(--dim,#98A1B4);--xg-faint:var(--faint,#7B8498);--xg-gold:var(--gold2,#E8CE93);--xg-gold-deep:var(--gold,#C8A45C);
  --xg-line:rgba(255,255,255,.07);--xg-line2:rgba(200,164,92,.38);--xg-glass:rgba(17,23,34,.92);--xg-pane:#0D1424;
  --xg-serif:var(--serif,ui-serif,"New York",Georgia,serif);--xg-sans:var(--sans,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif);
  --xg-ease:cubic-bezier(.2,.8,.2,1);--xg-spring:cubic-bezier(.34,1.4,.44,1);
  --xg-shot-bg:#FFFFFF;--xg-shot-fg:#1F2430;--xg-shot-dim:#6B7280;--xg-shot-line:#E5E7EB;--xg-shot-bar:#F3F4F6;--xg-shot-accent:#2563EB;--xg-shot-field:#FFFFFF;--xg-shot-soft:#EEF2FF;--xg-shot-edge:#D1D5DB;--xg-shot-on:#FFFFFF;
  color:var(--xg-fg);font-family:var(--xg-sans);text-wrap:pretty}
.xg *,.xg *::before,.xg *::after{box-sizing:border-box}
.xg button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
.xg button:focus-visible,.xg a:focus-visible,.xg textarea:focus-visible{outline:2px solid var(--xg-gold);outline-offset:2px}
.xg h2,.xg h3,.xg h4,.xg p{margin:0;font-weight:500}

/* ---- the rows: one line a system, how it comes as plain words at the row's end, never a button on a row ---- */
.xg-lead{color:var(--xg-dim);font-size:14.5px;line-height:1.65;margin:0 0 14px;max-width:64ch}
.xg-lead b{color:var(--xg-fg);font-weight:600}
.xg-groups{display:grid;gap:18px}
.xg-group h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.xg-group h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--xg-line2),transparent)}
.xg-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:0 32px}
.xg-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;padding:10px 2px;border-bottom:1px solid var(--xg-line);color:inherit}
@media(hover:hover){.xg-row:hover .xg-top b{color:var(--xg-gold)}.xg-row:hover .xg-way{color:var(--xg-fg)}}
.xg-row:active{opacity:.8}
.xg-mark{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-family:var(--xg-serif);font-size:11.5px;letter-spacing:.04em;color:var(--xg-gold);background:rgba(200,164,92,.1);border:1px solid var(--xg-line2);flex:none}
.xg-body{min-width:0;display:grid;gap:1px}
.xg-top{display:flex;align-items:baseline;gap:3px 9px;min-width:0;flex-wrap:wrap}
.xg-top b{font-size:14.5px;font-weight:600;color:var(--xg-fg);min-width:0;transition:color .15s}
.xg-yours{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600;white-space:nowrap}
.xg-body small{font-size:12.5px;color:var(--xg-dim);line-height:1.4;display:block}
.xg-way{font-size:13px;white-space:nowrap;color:var(--xg-dim);justify-self:end;transition:color .15s}
.xg-way.connect{color:var(--xg-gold);font-weight:600}
.xg-rows.compact{grid-template-columns:1fr;gap:0}
.xg-rows.compact .xg-row{padding:8px 0}
.xg-rows.compact .xg-body small,.xg-rows.compact .xg-yours{display:none}
.xg-more{margin-top:10px;font-size:13.5px;color:var(--xg-gold);text-decoration:underline;text-underline-offset:3px}

/* ---- the sheet: the rail of systems and the guide ---- */
.xg-sh{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}
/* the rail pins while the guide scrolls and keeps no flat fill of its own: the pane shows through (a pinned band's rule on the console, tests/e2e/admin-05-sheets-security) */
.xg-rail{border-right:1px solid var(--xg-line);padding:14px 10px;position:relative;align-self:start;position:sticky;top:0;max-height:100%;overflow:auto;scrollbar-width:thin}
.xg-rh{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600;padding:12px 10px 6px}
.xg-rh:first-of-type{padding-top:2px}
.xg-rail-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:9px;color:var(--xg-dim);font-size:13px;position:relative;z-index:1;transition:color .15s}
.xg-rail-row.on{color:var(--xg-gold)}
@media(hover:hover){.xg-rail-row:hover{color:var(--xg-fg)}}
.xg-rail-name{min-width:0;line-height:1.3}
.xg-m{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--xg-serif);font-size:10.5px;color:var(--xg-gold);background:rgba(200,164,92,.1);border:1px solid var(--xg-line2);flex:none}
.xg-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
.xg-dot.connect{background:var(--xg-gold-deep)}.xg-dot.link{background:#9FB6D8}
.xg-thumb{position:absolute;left:10px;right:10px;border-radius:9px;background:rgba(200,164,92,.13);z-index:0;pointer-events:none;top:0;height:0}
.xg-gbody{min-width:0;padding:26px 30px 36px}
.xg-head{display:grid;gap:9px;margin-bottom:18px;padding-right:36px}
.xg-eb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600}
.xg-way-words{color:var(--xg-dim)}.xg-way-words.connect{color:var(--xg-gold)}
.xg-title{font-family:var(--xg-serif);font-size:28px;line-height:1.15;text-wrap:balance}
.xg-lead{color:var(--xg-dim);font-size:15px;line-height:1.6;max-width:62ch}
.xg-claude-open{color:var(--xg-gold);font-size:14px;font-weight:600;padding:2px 0;justify-self:start}
.xg-claude-open[aria-expanded="true"]{color:var(--xg-fg)}
.xg-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--xg-line);border:1px solid var(--xg-line);border-radius:14px;overflow:hidden;margin:0 0 20px}
.xg-glance div{background:var(--xg-pane);padding:12px 14px}
.xg-glance small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600;margin-bottom:5px}
.xg-glance span{font-size:13px;color:var(--xg-fg);line-height:1.5;display:block}
.xg-all{font-size:14.5px;line-height:1.6;color:var(--xg-fg);margin:0 0 20px;padding:11px 16px;border-left:2px solid var(--xg-gold-deep);background:rgba(200,164,92,.05);border-radius:0 10px 10px 0}
.xg-cnx{border:1px solid var(--xg-line2);border-radius:16px;padding:16px 18px;margin:0 0 22px;background:linear-gradient(160deg,rgba(200,164,92,.1),rgba(200,164,92,.03));display:grid;gap:10px}
.xg-cnx.quiet{border-style:dashed;background:rgba(255,255,255,.02)}
.xg-cnx.quiet p{color:var(--xg-dim);font-size:14px;line-height:1.6}
.xg-cnx.quiet p b{color:var(--xg-fg);font-weight:600}
.xg-ct{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.xg-ct>div{flex:1;min-width:240px}
.xg-ct b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.xg-ct p{color:var(--xg-dim);font-size:14px;line-height:1.6}
.xg-cnote{font-size:12.5px;color:var(--xg-faint);line-height:1.55}
.xg-btn{padding:9px 15px;border-radius:11px;font-size:14.5px;line-height:22px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.15s;flex:none}
.xg-btn.gold{background:linear-gradient(140deg,#E3C57F,#AE8A44);color:#161005}
.xg-btn.ghost{border:1px solid var(--xg-line2);color:var(--xg-gold)}
.xg-btn.dim{border:1px solid rgba(255,255,255,.12);color:var(--xg-dim)}
.xg-btn:active{transform:scale(.97)}
.xg-or{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--xg-faint);margin:0 0 16px}
.xg-or::before,.xg-or::after{content:"";flex:1;height:1px;background:var(--xg-line)}
.xg-steps{display:grid;gap:20px;margin:0 0 24px}
.xg-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px}
.xg-sn{width:30px;height:30px;border-radius:50%;border:1px solid var(--xg-line2);display:grid;place-items:center;font-family:var(--xg-serif);font-size:14px;color:var(--xg-gold);background:rgba(200,164,92,.08);margin-top:1px}
.xg-say{font-size:15px;line-height:1.55;color:var(--xg-fg)}
.xg-say b{font-weight:600;color:var(--xg-gold)}
.xg-note{font-size:13px;color:var(--xg-dim);line-height:1.55;margin-top:4px}
.xg-shot-wrap{margin-top:12px}
.xg-trouble{border-top:1px solid var(--xg-line);padding-top:16px;margin:0 0 22px;display:grid;gap:10px}
.xg-trouble h3,.xg-lands h3,.xg-addhere h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--xg-gold-deep);font-weight:600}
.xg-trouble div{font-size:14px;line-height:1.55;color:var(--xg-dim)}
.xg-trouble div b{color:var(--xg-fg);font-weight:600}
.xg-addhere{display:grid;gap:10px;margin:0 0 22px}
.xg-drop{border:1.5px dashed var(--xg-line2);border-radius:12px;padding:18px;text-align:center;background:rgba(200,164,92,.04)}
.xg-drop b{display:block;font-family:var(--xg-serif);font-size:19px;font-weight:500}
.xg-drop small{display:block;color:var(--xg-dim);font-size:13px;margin-top:4px;line-height:1.5}
.xg-acts{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;align-items:center}
.xg-acts.left{justify-content:flex-start;margin-top:10px}
.xg-lands{display:grid;gap:8px;margin:0 0 22px}
.xg-lands p{font-size:14px;color:var(--xg-dim);line-height:1.6}
.xg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--xg-line);padding-top:14px;flex-wrap:wrap}
.xg-foot button{display:inline-flex;align-items:center;gap:8px;color:var(--xg-gold);font-size:14px;font-weight:600;padding:6px 2px}
.xg-foot button small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--xg-faint);font-weight:600}
.xg-foot button .r{text-align:right}
.xg-addr{color:var(--xg-faint);font-size:12.5px;overflow-wrap:anywhere}
.xg-addr b{color:var(--xg-dim);font-weight:500}

/* ---- the Claude panel ---- */
.xg-claude{margin:0 0 20px}
.xg-claude[hidden]{display:none}
.xg-claude-in{border:1px solid var(--xg-line2);border-radius:14px;padding:16px 18px;display:grid;gap:12px;background:rgba(200,164,92,.04);animation:xgUnfold .24s var(--xg-ease)}
@keyframes xgUnfold{from{opacity:0;transform:translateY(-4px)}}
.xg-claude-lead{font-size:14px;line-height:1.6;color:var(--xg-dim)}
.xg-claude-lead b{color:var(--xg-fg);font-weight:600}
.xg-claude-sys{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 14px}
.xg-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--xg-fg);cursor:pointer;padding:3px 0}
.xg-check input{width:16px;height:16px;accent-color:#C8A45C;margin:0;flex:none}
.xg-prompt{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;color:var(--xg-fg);background:rgba(255,255,255,.04);border:1px solid var(--xg-line);border-radius:10px;padding:12px;resize:vertical;min-height:160px}
.xg-copied{font-size:13px;color:var(--xg-gold);display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .2s}
.xg-copied.on{opacity:1}
.xg-copied svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:xgTick .5s var(--xg-ease) forwards}
@keyframes xgTick{to{stroke-dashoffset:0}}

/* ---- a drawing of the screen: a light window, the control ringed and numbered; a picture of Quorum's own page is dark ---- */
.xg-shot{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--xg-shot-bg);color:var(--xg-shot-fg);font-family:var(--xg-sans);font-size:11.5px;max-width:560px;position:relative;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.xg-shot.phone{max-width:300px}
.xg-shot.dark{--xg-shot-bg:#0D1424;--xg-shot-fg:#F1EBDD;--xg-shot-dim:#98A1B4;--xg-shot-line:rgba(255,255,255,.1);--xg-shot-bar:rgba(255,255,255,.07);--xg-shot-accent:#E8CE93;--xg-shot-field:rgba(255,255,255,.06);--xg-shot-soft:rgba(232,206,147,.14);--xg-shot-edge:rgba(255,255,255,.2);--xg-shot-on:#161005}
.xg-win{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--xg-shot-bar);border-bottom:1px solid var(--xg-shot-line)}
.xg-win i{width:9px;height:9px;border-radius:50%;background:#D1D5DB}
.xg-win span{margin-left:8px;flex:1;height:14px;border-radius:7px;background:var(--xg-shot-field);border:1px solid var(--xg-shot-line);font-size:9.5px;line-height:12px;padding:0 8px;color:var(--xg-shot-dim);overflow:hidden;white-space:nowrap}
.xg-app{display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--xg-shot-line);min-width:0}
.xg-app>b{font-size:12px;font-weight:700;color:var(--xg-shot-fg);white-space:nowrap}
.xg-tabs{display:flex;gap:12px;color:var(--xg-shot-dim);font-weight:500;flex-wrap:wrap;min-width:0}
.xg-tabs span{padding:4px 0;border-bottom:2px solid transparent;position:relative;white-space:nowrap}
.xg-tabs span.on{color:var(--xg-shot-accent);border-bottom-color:var(--xg-shot-accent)}
.xg-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.xg-sbody{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:140px}
.xg-sbody.noside{grid-template-columns:1fr}
.xg-side{width:112px;border-right:1px solid var(--xg-shot-line);padding:10px 8px;display:grid;gap:4px;align-content:start;background:var(--xg-shot-bar)}
.xg-side span{padding:5px 8px;border-radius:6px;color:var(--xg-shot-dim);font-weight:500;position:relative}
.xg-side span.on{background:var(--xg-shot-soft);color:var(--xg-shot-accent)}
.xg-main{padding:12px 14px;display:grid;gap:8px;align-content:start;position:relative;min-width:0}
.xg-hd{display:flex;align-items:center;gap:10px;min-width:0}
.xg-hd b{font-size:13px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.xg-srow{display:grid;grid-template-columns:minmax(0,1fr) 60px 60px;gap:10px;align-items:center}
.xg-srow i{display:block;height:8px;border-radius:4px;background:var(--xg-shot-bar)}
.xg-srow i.w{width:70%}
.xg-srow b{display:block;height:8px;border-radius:4px;background:var(--xg-shot-line)}
.xg-srow.head{font-weight:700;color:var(--xg-shot-dim)}
.xg-sbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;border:1px solid var(--xg-shot-edge);background:var(--xg-shot-field);color:var(--xg-shot-fg);font-weight:600;font-size:11px;position:relative;white-space:nowrap}
.xg-sbtn.pri{background:var(--xg-shot-accent);color:var(--xg-shot-on);border-color:var(--xg-shot-accent)}
.xg-sbtn.pick{border-color:var(--xg-shot-accent);background:var(--xg-shot-soft)}
.xg-form.wide .xg-sbtn{justify-content:flex-start}
.xg-slink{color:var(--xg-shot-accent);font-weight:600;text-decoration:underline;position:relative;white-space:nowrap}
.xg-menu{position:absolute;right:14px;top:44px;background:var(--xg-shot-bg);border:1px solid var(--xg-shot-line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:4px;display:grid;min-width:170px;z-index:2}
.xg-menu span{padding:6px 10px;border-radius:5px;color:var(--xg-shot-fg);position:relative}
.xg-menu span.pick{background:var(--xg-shot-soft);color:var(--xg-shot-accent);font-weight:600}
.xg-menu.dialog{right:auto;left:50%;top:40px;transform:translateX(-50%);min-width:240px;padding:12px;gap:8px}
.xg-menu.dialog>b{font-size:12px;padding:0}
.xg-menu.dialog .xg-sbtn{justify-self:end}
.xg-menu.static{position:static;box-shadow:none;margin-top:4px;max-width:220px;transform:none}
.xg-menu.static>b{padding:4px 10px;font-size:11px}
.xg-form{display:grid;gap:8px;max-width:300px}
.xg-form.wide{max-width:none}
.xg-form label{display:grid;gap:3px;font-size:10.5px;color:var(--xg-shot-dim);font-weight:600}
.xg-fld{height:24px;border:1px solid var(--xg-shot-edge);border-radius:5px;background:var(--xg-shot-field);padding:0 8px;line-height:22px;color:var(--xg-shot-fg);font-weight:500;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xg-opts{display:grid;gap:5px}
.xg-opts span{display:flex;align-items:center;gap:7px;color:var(--xg-shot-fg);position:relative;font-weight:500}
.xg-opts span::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid var(--xg-shot-edge);flex:none}
.xg-opts span.pick::before{border-color:var(--xg-shot-accent);box-shadow:inset 0 0 0 3px var(--xg-shot-bg);background:var(--xg-shot-accent)}
/* the ring: the setup guide's, around the control, three breaths then rest (D-MOTION-1 rule 3) */
.ring{position:relative;z-index:1}
.ring::after{content:"";position:absolute;inset:-6px;border-radius:9px;border:1.5px solid rgba(232,206,147,.95);box-shadow:0 0 0 5px rgba(200,164,92,.18),0 0 24px rgba(200,164,92,.45);pointer-events:none;animation:xgBreath 2.2s ease-in-out 3}
@keyframes xgBreath{50%{box-shadow:0 0 0 9px rgba(200,164,92,.08),0 0 30px rgba(200,164,92,.55)}}
.xg-n{position:absolute;right:-15px;top:-15px;width:20px;height:20px;border-radius:50%;background:#C8A45C;color:#161005;font-family:var(--xg-serif);font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:3}
.xg-cap{font-size:12px;color:var(--xg-faint);margin-top:8px;line-height:1.5}
.xg-cap b{color:var(--xg-dim);font-weight:600}
.xg-pic{position:relative;margin:0;max-width:560px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.xg-pic img{display:block;width:100%;height:auto}
.xg-ring-box{position:absolute;border-radius:9px;border:1.5px solid rgba(232,206,147,.95);box-shadow:0 0 0 5px rgba(200,164,92,.18),0 0 24px rgba(200,164,92,.45);animation:xgBreath 2.2s ease-in-out 3}

/* ---- motion: the console's arrive on a guide's first paint; a guide replaced fades down first ---- */
.xg-g.mo-in [data-mo-arrive]{animation:xgFade .54s var(--xg-ease) both}
@keyframes xgFade{from{opacity:0}}
.xg-g.mo-in .mo-head{animation:xgRise .24s var(--xg-ease) both}
@keyframes xgRise{from{opacity:0;transform:translateY(6px)}}
.xg-g.mo-out{animation:xgOut .22s var(--xg-ease) both}
@keyframes xgOut{to{opacity:0;transform:translateY(4px)}}
.xg-g.mo-in .xg-sn.pop{animation:xgPop .5s var(--xg-ease) both}
@keyframes xgPop{40%{box-shadow:0 0 0 3px rgba(200,164,92,.22);filter:brightness(1.3)}}

/* ---- the phone: the rail is a row of chips above the guide ---- */
@media(max-width:900px){
  .xg-sh{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .xg-rail{border-right:0;border-bottom:1px solid var(--xg-line);display:flex;gap:6px;overflow-x:auto;padding:12px 14px 10px;scrollbar-width:none;position:relative;max-height:none}
  .xg-rail::-webkit-scrollbar{display:none}
  .xg-rh{display:none}
  .xg-rail-row{flex:none;width:auto;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:12.5px}
  .xg-rail-row.on{border-color:var(--xg-line2);background:rgba(200,164,92,.13)}
  .xg-dot,.xg-thumb{display:none}
  .xg-gbody{padding:20px 16px 34px}
  .xg-head{padding-right:30px}
  .xg-title{font-size:24px}
  .xg-glance{grid-template-columns:1fr 1fr}
  .xg-step{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .xg-sn{width:26px;height:26px;font-size:13px}
  .xg-shot{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.xg *,.xg *::before,.xg *::after{animation:none!important;transition:none!important}}

/* ---- the console (web/admin-export-guides.js): the rail and the guide span the sheet's width, the console's tokens color
   the guides; the Setup page's box and its How to export lines ---- */
.xg-console{--xg-fg:var(--ivory);--xg-dim:var(--dim);--xg-faint:var(--faint);--xg-gold:var(--gold2);--xg-gold-deep:var(--gold);--xg-line:rgba(255,255,255,.07);--xg-line2:var(--line2);--xg-pane:#0D1424}
#sheet-body .xg-console .xg-sh{margin:0 -30px -34px;min-height:70vh}
#sheet-body .xg-console .xg-rail{top:-4px;max-height:calc(88vh - 90px)}
.su-guides .xg-more{display:block;margin:10px auto 0}
.su-guides .xg-row{padding:8px 0}
/* the box's rows arrive when the guides' scripts have loaded: the house fade (540 ms) */
.su-guides.late.in{animation:xgFade .54s both}
.su-guides .xg-fail{font-size:12.5px;color:var(--dim);margin:6px 0 0}
.su-how{display:block;font-size:12.5px;color:var(--gold2);margin-top:4px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;text-align:left}
.su-how:focus-visible{outline:1.5px solid var(--gold);outline-offset:2px}
@media(max-width:900px){#sheet-body .xg-console .xg-sh{margin:0 -16px -30px}}
@media(prefers-reduced-motion:reduce){.su-guides.late.in{animation:none}}