/* The guide page (guide.html): header, search, left menu, topics, and the four .ga-* animations. Tokens come from site.css. */
section.ggroup{padding:0}
.gh1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* for search engines and readers: the search box is the head */

/* search: a button atop the menu (a slim bar on narrow screens) opens a dialog */
.gfind{display:flex;align-items:center;gap:9px;width:100%;height:40px;margin:0 0 16px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--dim);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.gfind:hover{color:var(--muted);border-color:var(--blue)}
.gfind svg{width:16px;height:16px;flex:none}
.gfind .vi,.gfind .en{flex:1}
.gfind .gk{position:static;transform:none}
.gside .gfind{position:sticky;top:0;z-index:1;box-shadow:0 0 0 8px var(--bg)}   /* stays in reach while the menu scrolls */
.gmob{display:none}
.gdlg{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.gdlg[hidden]{display:none}
.gdlg-back{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gdlg-box{position:relative;width:min(640px,100%);max-height:76vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.gsearch{position:relative;flex:none;border-bottom:1px solid var(--line)}
.gsearch>svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--dim);pointer-events:none}
.gsearch input{width:100%;height:54px;border:0;background:transparent;color:var(--text);padding:0 44px 0 42px;font:inherit;font-size:15.5px;-webkit-appearance:none;appearance:none}
.gsearch input::placeholder{color:var(--dim)}
.gsearch input:focus{outline:none}
.gsearch input::-webkit-search-cancel-button{display:none}
.gk{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 12px "JetBrains Mono",monospace;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:1px 7px;background:var(--bg2);pointer-events:none}
.gres{flex:1;min-height:0;overflow:auto;list-style:none;padding:6px}
.gres:empty{display:none}
.gres li{border-radius:10px}
.gres a{display:block;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:14px;line-height:1.5}
.gres li[aria-selected="true"] a,.gres a:hover{background:rgba(91,140,255,.14);color:var(--text)}
.gres b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.gres small{display:block;color:var(--dim);font-size:12px;margin-bottom:2px}
.gres .none{padding:14px;color:var(--muted);font-size:14px}
mark{background:rgba(255,163,26,.3);color:var(--text);border-radius:3px;padding:0 1px}

/* layout */
.glayout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
/* the menu is the screen's height and never moves; the footer lives in the content column so nothing pushes the menu up */
.gside{position:sticky;top:64px;height:calc(100vh - 65px);height:calc(100dvh - 65px);overflow:auto;overscroll-behavior:contain;padding:24px 6px 24px 0;scrollbar-width:thin}
.gs-top{display:none}
.gs-group{margin-bottom:18px}
.gs-group h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 6px 10px}
.gs-group ul{list-style:none}
.gs-group a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;line-height:1.35}
.gs-group a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.gs-group a.on{color:var(--text);background:rgba(91,140,255,.14);box-shadow:inset 3px 0 0 var(--blue)}
.gs-group .gi{width:22px;text-align:center;flex:none}
.gback{display:none}

/* topics */
.gmain{min-width:0;min-height:calc(100vh - 65px);min-height:calc(100dvh - 65px);display:flex;flex-direction:column;padding-top:24px}
.gmain>.gfoot{margin-top:auto}
.ggroup,.topic{display:none}
.ggroup.cur{display:block}
.gh{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:0 0 10px;color:var(--blue)}
.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-bottom:18px;gap:16px;min-width:0;container-type:inline-size}
.topic.cur{display:grid}
.topic>*{min-width:0}
.topic h3{font-size:clamp(20px,2.2vw,24px);font-weight:700;display:flex;gap:12px;align-items:center;line-height:1.3}
.topic h3 .gi{width:40px;height:40px;border-radius:12px;background:var(--card2);display:grid;place-items:center;font-size:20px;flex:none}
.topic p{color:var(--muted);font-size:15.5px}
.topic p b,.topic td b{color:var(--text)}
.topic a{color:var(--blue)} .topic a code{color:var(--blue);border-color:rgba(91,140,255,.35)} .topic a:hover code{text-decoration:underline}
.topic code{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.86em;color:var(--text);overflow-wrap:anywhere}
.topic .steps li div{color:var(--muted);font-size:15.5px}
.topic h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:-6px}
.gli{display:grid;gap:8px;padding-left:22px;color:var(--muted);font-size:15.5px}
.gli li::marker{color:var(--blue)}
.gli b{color:var(--text)}
.gnote,.gwarn{border-radius:12px;padding:11px 14px;font-size:14.5px !important;border:1px solid var(--line2);background:var(--bg2)}
.gwarn{border-color:rgba(255,163,26,.4);background:rgba(255,163,26,.07)}
.gtab .cmp{min-width:0;font-size:14.5px}
.gtab{overflow-x:auto}
.gtab .cmp th,.gtab .cmp td{padding:10px 14px}
.gtab .cmp td:first-child{color:var(--text);font-weight:600}
@container (max-width:460px){                                    /* a narrow topic: each row a block, file names unbroken */
  .gtab .cmp thead{display:none}
  .gtab .cmp tr,.gtab .cmp td{display:block}
  .gtab .cmp tr+tr{border-top:1px solid var(--line)}
  .gtab .cmp td{border:0;padding:3px 14px}
  .gtab .cmp td:first-child{padding-top:12px}
  .gtab .cmp td:last-child{padding-bottom:12px}
  .gtab code{white-space:nowrap}
}
.gver{color:var(--dim);font-size:13px;text-align:center;margin-top:10px}
.gpager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gpager a{display:grid;gap:2px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:600;font-size:15px;min-width:0}
.gpager a:hover{border-color:var(--blue)}
.gpager small{color:var(--dim);font-size:12px;font-weight:500}
.gpager .nx{text-align:right;grid-column:2}
.gfoot{padding:24px 0;border-top:1px solid var(--line)}
.gfoot>div{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.gend{text-align:center;color:var(--muted);padding:24px 0}
.gend a{color:var(--blue)}

/* animations: a stage drawn at 560x340 and scaled to fit (guide-anim.js sets --s) */
.ga{position:relative;display:grid;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:14px}
.ga-box{position:relative;aspect-ratio:560/340;overflow:hidden;border-radius:12px;background:#0b0f18;border:1px solid var(--line)}
.ga-stage{position:absolute;left:0;top:0;width:560px;height:340px;transform-origin:0 0;transform:scale(var(--s,.6));font-size:14px;line-height:1.35}
.ga .steps{gap:6px}
.ga .steps li{padding:6px 8px;border-radius:10px;cursor:pointer}
.ga .steps li div{padding-top:4px;font-size:14.5px}
.ga-replay{justify-self:start}
.gst-box{border-radius:12px;background:#0b0f18;border:1px solid var(--line);padding:12px 12px 6px}
.gst .sst{margin:0}
.gst .steps li{margin:0}
@container (min-width:600px){
  .ga{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;column-gap:16px}
  .ga-box,.gst-box{grid-row:1 / span 2}
  .ga .steps{align-self:start}
}
.ga-tvw{position:absolute;width:300px}
.ga-tvs{position:relative;width:300px;height:169px;border:5px solid #262d3d;border-radius:8px;background:#111726;overflow:hidden}
.ga-stand{display:block;width:80px;height:8px;background:#262d3d;margin:0 auto;border-radius:0 0 6px 6px}
.ga-ph{position:absolute;width:150px;height:300px;border:5px solid #262d3d;border-radius:26px;background:#111726;overflow:hidden}
.ga-ps{position:relative;width:100%;height:100%}
.ga-p{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;padding:10px;text-align:center}
.ga-p.on0{opacity:1}
.ga-h{font-weight:700;font-size:13px;color:var(--text)}
.ga-btn{padding:7px 10px;border-radius:9px;background:var(--blue2);color:#fff;font-weight:700;font-size:12px;width:100%}
.ga-fld{padding:7px 10px;border-radius:9px;border:1px solid var(--line2);background:var(--bg);color:var(--muted);font:500 12px "JetBrains Mono",monospace;width:100%;overflow:hidden;white-space:nowrap}
.ga-fld.sm{font-size:9px}
.ga-bxs{display:flex;gap:4px}
.ga-bx{width:19px;height:28px;border-radius:6px;border:1px solid var(--line2);background:var(--bg);display:grid;place-items:center;color:var(--text);font:700 15px "JetBrains Mono",monospace}
.ga-bx em{font-style:normal;opacity:0}
.ga-qr{width:84px;height:84px;border-radius:6px;background:#fff;background-image:linear-gradient(90deg,#000 50%,transparent 0),linear-gradient(#000 50%,transparent 0);background-size:14px 14px,10px 10px;box-shadow:inset 0 0 0 6px #fff}
.ga-tx{display:grid;gap:3px;font-size:13px;color:var(--text)}
.ga-tx code{font-size:11px;color:var(--muted)}
.ga-tvs .ga-p{flex-direction:row;gap:14px}
.ga-tvs .tp2,.ga-tvs .ga-opn{flex-direction:column}
.ga-big{font:700 30px "JetBrains Mono",monospace;letter-spacing:.06em;color:#fff}
.ga-tvs small{color:var(--muted);font-size:12px}
.ga-sto{position:absolute;left:50%;top:10px;transform:translateX(-50%);padding:6px 12px;border-radius:10px;background:var(--card2);border:1px solid var(--line2);font-weight:600;font-size:12px;white-space:nowrap;opacity:0;color:var(--text)}
.ga-ph .ga-sto{top:auto;bottom:12px}
.ga-mdp{width:82px;height:82px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);position:relative}
.ga-mdp b{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:var(--blue2)}
.ga-eye{font-size:44px}
.ga-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.ga-tiles i{aspect-ratio:1;border-radius:8px;background:var(--card2)}
.ga-tiles i:nth-child(2){background:#2a3a63}.ga-tiles i:nth-child(3){background:#3a2a4a}
.ga-dlg{width:88%;padding:12px;border-radius:10px;background:#1c2436;border:1px solid var(--line2);display:grid;gap:9px;text-align:left}
.ga-dlg b{font-size:13px;color:#fff}
.ga-row{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.ga-cb{width:15px;height:15px;border:1.5px solid var(--muted);border-radius:4px;display:grid;place-items:center;flex:none}
.ga-cb em{font-style:normal;font-size:12px;color:var(--green);opacity:0;line-height:1}
.ga-bt{display:flex;justify-content:flex-end;gap:14px;font-size:12px;color:var(--muted);font-weight:700}
.ga-okb{position:relative;color:#fff;padding:0 6px}
.ga-ring,.ga-fo{position:absolute;inset:-4px;border:2.5px solid #fff;border-radius:7px;opacity:0;pointer-events:none}
/* game pad */
.ga-gp{position:absolute;left:20px;top:112px;width:176px;height:112px;border-radius:56px 56px 40px 40px;background:#1d2434;border:2px solid #2f3850}
.ga-dp{position:absolute;left:20px;top:28px;width:56px;height:56px}
.ga-dp i{position:absolute;width:20px;height:20px;background:#3a4258;border-radius:4px}
.ga-dp .ku{left:18px;top:0}.ga-dp .kd{left:18px;top:36px}.ga-dp .kl{left:0;top:18px}.ga-dp .kr{left:36px;top:18px}
.ga-fb{position:absolute;right:16px;top:28px;width:64px;height:56px}
.ga-fb i{position:absolute;width:26px;height:26px;border-radius:50%;background:#3a4258;color:#fff;font:700 12px/26px system-ui;text-align:center;font-style:normal}
.ga-fb .ka{left:34px;top:28px;background:#2f8f5b}.ga-fb .kb{left:34px;top:0;background:#b23c3c}
.ga-tst{top:-40px;left:50%}
.ga-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;padding:6px 14px}
.ga-tl{position:relative;display:block;aspect-ratio:16/10;border-radius:7px;background:var(--card2)}
.ga-tl.t2{background:#2a3a63}.ga-tl.t3{background:#3a2a4a}.ga-tl.t5{background:#274a3d}
.ga-fo{inset:-3px}
.ga-opn{background:rgba(10,13,20,.9);gap:4px}
.ga-opn b{font-size:34px;color:#fff}
.ga-opn small{font-size:12px;color:var(--muted)}
/* home assistant */
.ga-row2{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:12px;color:var(--text);font-weight:600}
.ga-tg{position:relative;width:34px;height:18px;border-radius:9px;background:#3a4258;flex:none}
.ga-tg i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(calc(var(--k,0)*16px))}
.ga-card{width:100%;padding:8px;border-radius:9px;background:var(--card2);font-size:11.5px;font-weight:600;color:var(--text)}
.ga-app{font-size:20px;font-weight:700;color:#fff;background:#8a1c1c;border-radius:10px;padding:18px 30px}
.ga-hm{position:absolute;bottom:10px;left:0;right:0;margin:auto;width:max-content;font-weight:700;color:#fff;background:rgba(91,140,255,.35);padding:3px 12px;border-radius:999px;font-size:12px}
.ga-tvs .th2{justify-content:flex-start;padding-top:24px}
.ga .motion-go{top:50%;left:50%}

/* phones: menu becomes a drawer */
@media (max-width:980px){
  .glayout{grid-template-columns:minmax(0,1fr);gap:0}
  .gmain{padding-top:0}
  .gmob{display:flex;gap:10px;position:sticky;top:64px;z-index:40;margin:0 -24px 14px;padding:10px 24px;background:rgba(10,13,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .gmenu{display:inline-flex;align-items:center;gap:8px;flex:1;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--text);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
  .gfind-i{width:40px;flex:none;justify-content:center;margin:0;padding:0}
  .gside .gfind{display:none}
  .gside{position:fixed;z-index:70;left:0;top:0;bottom:0;width:min(86vw,320px);height:auto;background:var(--bg2);border-right:1px solid var(--line2);padding:14px 12px 28px;transform:translateX(-102%);transition:transform .22s;visibility:hidden;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  .gside.open{transform:none;visibility:visible}
  .gs-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px 10px}
  .gclose{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px;cursor:pointer}
  .gback{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55)}
  .gback:not([hidden]){display:block}
  .gs-group a{padding:10px;min-height:44px}
}
@media (max-width:620px){
  .gmob{margin:0 -16px 12px;padding:10px 16px}
  .gdlg{padding:8px}
  .gdlg-box{max-height:calc(100vh - 16px)}
  .gpager{grid-template-columns:1fr}
  .gpager .nx{grid-column:1}
  .topic{padding:18px 16px;border-radius:14px}
  .gk{display:none}
  .ga{padding:10px}
}
@media (prefers-reduced-motion:reduce){.gside{transition:none}html:not(.motion) .ga *{animation:none}}