/* Supracited v9.1 kit "ask" sheet v3 (SIGNATURE-HEROES-SPEC-V9, addendum v9.1): the deck on /how-it-works; copied by site/build_sig.py */
.sg--ask .sg-stage{container:ak/inline-size}
.ak-st{display:grid;grid-template-columns:minmax(0,1fr);row-gap:1rem}
.ak-side{display:grid;row-gap:.75rem;min-width:0;align-content:start}
.ak-f{margin:0;padding:0;border:0;min-width:0}
.ak-q{display:none;margin:0;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--sg-ink)}
.sg--ask[data-s="0"] .ak-q.q0,.sg--ask[data-s="1"] .ak-q.q1,.sg--ask[data-s="2"] .ak-q.q2,.sg--ask[data-s="3"] .ak-q.q3,.sg--ask[data-s="4"] .ak-q.q4{display:block}
.ak-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
.ak-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.ak-btn{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border:1.5px solid var(--sg-ring);border-radius:999px;background:#fff;
color:var(--sg-ink);font:inherit;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transition:border-color .2s,transform .16s,opacity .2s}
.ak-btn:active{transform:scale(.97)}
.ak-btn:disabled{opacity:.45;cursor:default;transform:none}
@media (hover:hover) and (pointer:fine){.ak-btn:not(:disabled):hover{border-color:var(--sg-teal)}}
.ak-n{margin:0;min-height:1.5em;font-size:15px;line-height:1.5;color:var(--sg-muted)}
@media (scripting:enabled){.ak-acts[hidden]{display:flex;visibility:hidden}.ak-n[hidden]{display:block;visibility:hidden}}
@media (min-width:45rem){.ak-n{min-width:7.5rem}}
@container ak (min-width:74rem){.ak-st{grid-template-columns:18rem minmax(0,1fr);column-gap:2rem;align-items:start}
.ak-side{row-gap:1rem}.ak-row{flex-direction:column;align-items:flex-start;gap:.75rem}}
@property --t{syntax:'*';inherits:false}@property --z{syntax:'*';inherits:false}
/* the table: places, piles and cards; card size from the table's width (container units), so no script sets a size */
.ak-tab{position:relative;min-width:0;container:akt/inline-size}
.ak-tab>*{--sc:4;--ch:3rem;--g:.4rem;--cw:calc((100cqw - (var(--sc) - 1) * var(--g)) / var(--sc))}
@container akt (max-width:20.99rem){.ak-tab>*{--sc:3}}
@container akt (min-width:30rem){.ak-tab>*{--sc:5;--ch:6.5rem}}
@container akt (min-width:40rem){.ak-tab>*{--sc:7}}
@container akt (min-width:54rem){.ak-tab>*{--sc:10}}
.ak-sp{display:grid;grid-template-columns:repeat(var(--sc),minmax(0,1fr));gap:var(--g);list-style:none;margin:0;padding:0}
.ak-s,.ak-pp{display:block;box-sizing:border-box;height:var(--ch);border:1.25px dashed var(--sg-ring);border-radius:10px}
.ak-pp{width:var(--cw)}
.ak-pl{display:none;list-style:none;margin:.75rem 0 0;padding:0;grid-template-columns:minmax(0,1fr);gap:.4rem;--ox:3;--oy:0;--fr:160}
.sg--ask[data-s="0"] .ak-pl.q0,.sg--ask[data-s="1"] .ak-pl.q1,.sg--ask[data-s="2"] .ak-pl.q2,.sg--ask[data-s="3"] .ak-pl.q3,.sg--ask[data-s="4"] .ak-pl.q4{display:grid}
.ak-p{position:relative;display:grid;grid-template-columns:calc(var(--cw) + 2.9rem) minmax(0,1fr) 4.75rem;align-items:center;column-gap:.6rem;min-width:0}
.ak-v{grid-area:1/3;height:2.9rem;text-align:right;white-space:nowrap}
.ak-pc{display:block;font-size:1.375rem;font-weight:700;line-height:1.2;color:var(--sg-ink)}
.ak-pk{display:block;font-size:15px;line-height:1.3;color:var(--sg-muted)}
.ak-bl{grid-area:1/2;font-size:15px;line-height:1.25;color:var(--sg-ink)}
.ak-p:not(.on) .ak-v,.ak-p:not(.on) .ak-bl{visibility:hidden}
.ak-hb{transform:none;width:100%;height:100%;border-radius:10px}
.sg.is-live .ak-p.on .ak-hb{display:block}
.ak-p:not(.on) .ak-hb{display:none}
@container akt (min-width:30rem){.ak-pl{grid-template-columns:repeat(auto-fill,minmax(calc(var(--cw) + 1.5rem),1fr));row-gap:1rem;--ox:.4;--oy:-2;--fr:208}
.ak-p{grid-template-columns:minmax(0,1fr);align-items:start}.ak-pp{margin-top:1.9rem}
.ak-v{grid-area:2/1;margin-top:.3rem;height:1.75rem;text-align:left}.ak-pc,.ak-pk{display:inline}.ak-pk{margin-left:.4rem}
.ak-bl{grid-area:3/1;height:2.5em}}
@container akt (min-width:54rem){.ak-pl{grid-template-columns:repeat(var(--np),minmax(0,calc(var(--cw) + 3rem)));column-gap:var(--g)}
.np7 .ak-v,.np8 .ak-v{height:2.9rem}.np7 .ak-pk,.np8 .ak-pk{display:block;margin-left:0}}
.np3{--np:3}.np4{--np:4}.np5{--np:5}.np6{--np:6}.np7{--np:7}.np8{--np:8}
.ak-cs{display:none;position:absolute;left:0;top:0;width:100%;height:0;z-index:3}
.sg--ask[data-s="0"] .ak-cs.q0,.sg--ask[data-s="1"] .ak-cs.q1,.sg--ask[data-s="2"] .ak-cs.q2,.sg--ask[data-s="3"] .ak-cs.q3,.sg--ask[data-s="4"] .ak-cs.q4{display:block}
.ak-c{position:absolute;left:0;top:0;z-index:var(--z,1);width:var(--cw);height:var(--ch);margin:0;padding:0;border:0;background:none;
color:var(--sg-ink);font:inherit;text-align:left;cursor:pointer;visibility:hidden;transform:var(--t,none);transform-origin:50% 100%;
will-change:transform;-webkit-tap-highlight-color:transparent}
.ak-c.fd{transform-style:preserve-3d}
.sg.is-live .ak-c{visibility:visible}
.ak-fr,.ak-bk{position:absolute;inset:0;box-sizing:border-box;border-radius:10px}
.ak-c.fd .ak-fr,.ak-c.fd .ak-bk{backface-visibility:hidden}
.ak-fr{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px;overflow:hidden;background:#fff;
border:1px solid var(--sg-hair);box-shadow:0 2px 0 var(--sg-ring);font-size:15px;line-height:1.12}
.ak-bk{display:none;transform:rotateY(180deg);background:var(--sg-teal);box-shadow:0 2px 0 #08443F}.ak-c.fd .ak-bk{display:block}
.ak-bk::after{content:"";position:absolute;inset:6px;border:1.5px solid rgba(255,255,255,.4);border-radius:6px}
.ak-1{padding:2px 5px;border-radius:6px;background:var(--sg-teal);color:#fff;font-weight:600}
.ak-o,.ak-x{padding:0 5px}
.ak-x{display:none;color:var(--sg-muted);white-space:nowrap}
.ak-c.up .ak-fr{border-color:var(--sg-gold-deep);box-shadow:0 0 0 1px var(--sg-gold-deep),0 14px 26px -12px rgba(12,23,21,.4)}
@container akt (max-width:29.99rem){.ak-1~.ak-o{display:none}.ak-x{display:block}}
/* the sentence: the running and the final one share a cell, so the swap never moves the page */
.sg--ask .sv{display:grid}.sg--ask .sv>span{grid-area:1/1}
.ak-done{visibility:hidden}.sg--ask.ak-full .ak-pre{visibility:hidden}.sg--ask.ak-full .ak-done{visibility:inherit}
@media (min-width:45rem) and (max-width:63.99rem){.ak-f .sg-l{line-height:2.75rem}}
@media (max-width:44.99rem){.ak-f .sg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--margin,20px));padding:2px var(--margin,20px)}
.ak-q{font-size:1.125rem}.ak-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@container ak (min-width:74rem){.ak-f .sg-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:44.99rem){.ak-f .sg-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (scripting:none){.sg--ask .sg-stage{display:none}.ak-pre{visibility:hidden}.ak-done{visibility:inherit}}