/* Lokamo :: wspolne klocki stron przy stoliku (/zamowienia-przy-stoliku, /platnosci,
   /napiwki, /tlumaczenia). Korzysta z home.css (.phone, .gx*, .gm__*, .story, .faq,
   .cta) i szablon.css (.sub-hero, .crumbs, .sub-facts, .plans, .tp-card). Dodaje:
   .st-* (uklad i sekcje), .sx-* (arkusze w telefonie goscia), .sf* (telefon obslugi),
   .pw* (okno panelu wlasciciela). Wszystko w scenie liczone w em, skala z cqw. */

/* ---------- Hero: scena z kamera na telefonie ---------- */
.st-vis{position:relative;container-type:inline-size}
.st-frame{position:relative;aspect-ratio:1/.92}
.st-cam{position:absolute;left:0;top:0;width:42em;height:38.64em;font-size:calc(100cqw / 42);transform-origin:0 0;transition:transform 1.1s var(--ease-io),opacity .45s}
.st-cam.is-fade{opacity:0}
.st-vis .scn__pause{top:auto;bottom:12px;right:12px}
.js .st-vis{animation:subRise 1.2s var(--ease-out) .15s both}
.st-vis .tp-card{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2em 3.4em -1.6em rgba(0,0,0,.8)}
.st-vis .st-phone{box-shadow:0 2.6em 4.6em -1.6em rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
html:not(.js) .st-cam .tp-card,html:not(.js) .scn--st .tp-card{opacity:1;transform:none}

/* Telefon w scenie */
.st-phone{position:absolute;left:3.4em;top:2.6em;width:17.2em}
.st-phone--r{left:21.6em;top:4.2em;width:16.6em}
.st-phone .gx__url{z-index:30}
.st-phone .gx__tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.gx [data-t]{transition:opacity .19s,filter .19s}
.gx [data-t].is-out{opacity:0;filter:blur(.12em)}
.gx .gm__cart{z-index:15}

/* Karty obslugi obok telefonu (baza .tp-card z szablon.css) */
.st-card{left:23.2em;width:16em}
.st-card--top{top:5.2em}
.st-card--mid{top:11.4em}
.st-card--low{top:25.8em}
.tp-card .st-amt{display:flex;justify-content:space-between;align-items:baseline;margin-top:.7em;padding-top:.6em;border-top:1px solid #EFEFF2;font-size:.9em;color:var(--steel)}
.tp-card .st-amt b{color:var(--ink);font-weight:620}
.tp-card .st-meta{margin-top:.55em;font-size:.82em;line-height:1.4;color:var(--steel)}
.st-note{position:absolute;display:flex;flex-direction:column;gap:.25em;padding:.75em .95em;border-radius:.9em;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 1.2em 2.4em -1.2em rgba(0,0,0,.6);opacity:0;transform:translateY(.8em);transition:opacity .45s,transform .6s var(--ease-out)}
.st-note.is-show{opacity:1;transform:none}
.st-note b{display:flex;align-items:center;gap:.45em;font-size:.95em;font-weight:620}
.st-note b .ico{width:1.05em;height:1.05em;color:var(--cobalt)}
.st-note span{font-size:.8em;color:var(--steel)}
html:not(.js) .st-note{opacity:1;transform:none}

/* ---------- Palec na ekranie telefonu ---------- */
.sx-touch{position:absolute;z-index:70;left:50%;top:50%;width:2.5em;height:2.5em;margin:-1.25em 0 0 -1.25em;border-radius:50%;background:rgba(13,13,15,.2);box-shadow:0 0 0 .1em rgba(255,255,255,.75),0 .2em .7em rgba(13,13,15,.25);opacity:0;transform:scale(.7);transition:opacity .2s,transform .18s var(--ease-out);pointer-events:none}
.sx-touch.is-on{opacity:1;transform:scale(1)}
.sx-touch.is-press{transform:scale(.8);background:rgba(13,13,15,.3)}

/* ---------- Arkusze w karcie goscia ---------- */
.sx-dim{position:absolute;inset:0;z-index:16;background:rgba(13,13,15,.4);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.sx-dim.is-show{opacity:1;visibility:visible;transition:opacity .4s}
.sx-sheet{position:absolute;left:0;right:0;bottom:3.69em;z-index:17;display:flex;flex-direction:column;max-height:calc(100% - 6em);padding:1.45em 1.15em 1em;border-radius:1.5em 1.5em 0 0;background:#fff;font-size:.8em;line-height:1.3;box-shadow:0 -.8em 2em -1em rgba(13,13,15,.35);transform:translateY(calc(100% + 4em));transition:transform .6s var(--ease-out)}
.sx-sheet.is-show{transform:none}
.sx-sheet::before{content:"";position:absolute;top:.55em;left:50%;width:2.6em;height:.28em;margin-left:-1.3em;border-radius:99em;background:#D9D9DE}
.sx-body{flex:1;min-height:0;overflow:hidden}
.sx-in{transition:transform .9s var(--ease-io)}
.sx-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5em}
.sx-h b{font-size:1.28em;font-weight:680;letter-spacing:-.02em}
.sx-h small{flex:none;font-size:.82em;color:var(--steel)}
.sx-lines{list-style:none;margin-top:.45em}
.sx-lines li{display:flex;justify-content:space-between;gap:.6em;padding:.38em 0;border-bottom:1px solid #EFEFF2;font-size:.92em}
.sx-lines i{font-style:normal}
.sx-sub,.sx-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5em;font-weight:620}
.sx-tot{margin-top:.75em;padding-top:.55em;border-top:1px solid #E4E4E8;font-size:1.06em}
.sx-tot b{transition:color .3s}
.sx-tot b.is-flash{color:var(--cobalt)}
.sx-k{margin:.8em 0 .35em;font-size:.74em;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.sx-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2em;padding:.2em;border-radius:.75em;background:#F1F1F4}
.sx-seg--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-seg span{padding:.5em .15em;border-radius:.58em;text-align:center;font-size:.84em;font-weight:600;color:#55555B;white-space:nowrap;transition:background-color .25s,color .25s,box-shadow .25s}
.sx-seg span.is-on{background:#fff;color:var(--ink);box-shadow:0 .1em .35em rgba(13,13,15,.14)}
.sx-ppl{display:none;align-items:center;gap:.45em;margin-top:.55em;font-size:.9em}
.sx-ppl>span{color:var(--text2)}
.sx-ppl i{display:grid;place-items:center;width:1.85em;height:1.85em;border-radius:50%;border:1px solid #DCDCE1;font-style:normal;font-weight:600}
.sx-ppl>b{min-width:1.1em;text-align:center}
.sx-ppl em{margin-left:auto;font-style:normal;color:var(--steel);white-space:nowrap}
.sx-ppl em b{color:var(--ink);font-weight:620}
.sx-hint{display:none;margin-top:.55em;padding:.6em .7em;border-radius:.7em;background:#F4F5FF;color:#2A3799;font-size:.8em;line-height:1.4}
.sx-amts{display:none;margin-top:.5em}
.sx-amts p{display:flex;justify-content:space-between;align-items:center;padding:.3em 0;font-size:.9em}
.sx-amts p b{min-width:5.4em;padding:.35em .6em;border:1px solid #DCDCE1;border-radius:.5em;text-align:right;font-weight:560;transition:border-color .3s}
.sx-amts p b.is-edit{border-color:var(--cobalt);box-shadow:0 0 0 .12em rgba(46,75,255,.18)}
.sx-amts .sx-add{justify-content:flex-start;color:var(--cobalt);font-weight:600;font-size:.84em}
.sx-err{display:none;margin-top:.35em;font-size:.76em;line-height:1.35;color:#B42318}
.sx-err.is-show{display:block}
.sx-bill[data-mode="even"] .sx-ppl{display:flex}
.sx-bill[data-mode="items"] .sx-hint{display:block}
.sx-bill[data-mode="amount"] .sx-amts{display:block}
.sx-bill[data-scope="mine"] .sx-split{opacity:.45}
.sx-tip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3em}
.sx-tip span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.55em;padding:.25em .2em;border:1px solid #E1E1E6;border-radius:.65em;font-size:.84em;font-weight:620;text-align:center;line-height:1.15;transition:background-color .25s,color .25s,border-color .25s}
.sx-tip small{font-size:.8em;font-weight:500;color:var(--steel)}
.sx-tip span.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.sx-tip span.is-on small{color:rgba(255,255,255,.72)}
.sx-note{margin-top:.55em;font-size:.74em;line-height:1.4;color:var(--steel)}
.sx-row2{display:flex;justify-content:space-between;align-items:baseline;margin-top:.7em;font-size:.9em;color:var(--text2)}
.sx-row2 b{color:var(--ink);font-weight:600}
.sx-btn{display:block;flex:none;margin-top:.75em;padding:.82em;border-radius:.85em;background:var(--ink);color:#fff;text-align:center;font-weight:650;font-size:.95em;transition:background-color .15s,transform .15s}
.sx-btn.is-press,.sx-conf i.is-press,.gm__order.is-press{transform:scale(.96)}
.sx-small{display:block;margin-top:.45em;text-align:center;font-size:.76em;color:var(--steel)}
.sx-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3em;margin-top:.75em;font-size:.74em;color:var(--steel)}
.sx-steps li{padding-top:.5em;border-top:.22em solid #E4E4E8;transition:border-color .4s,color .4s}
.sx-steps li.is-on{border-top-color:var(--cobalt);color:var(--ink)}
.sx-steps li.is-done{border-top-color:var(--ok);color:var(--ink)}
.sx-order .sx-stat{display:none}
.sx-order.is-sent .sx-stat{display:block}
.sx-order.is-sent .sx-pre{display:none}
.sx-langs{list-style:none;margin-top:.4em}
.sx-langs li{display:flex;justify-content:space-between;align-items:center;padding:.5em .1em;border-bottom:1px solid #EFEFF2;font-size:.92em}
.sx-langs li small{font-size:.8em;color:var(--steel)}
.sx-langs li.is-on{color:var(--cobalt);font-weight:620}

/* Okno potwierdzenia na srodku */
.sx-conf{position:absolute;left:1.2em;right:1.2em;top:38%;z-index:19;padding:1.3em 1.15em 1em;border-radius:1.3em;background:#fff;font-size:.8em;line-height:1.35;text-align:center;box-shadow:0 1.4em 3em -1em rgba(13,13,15,.55);opacity:0;visibility:hidden;transform:scale(.94);transition:opacity .3s,transform .4s var(--ease-out),visibility 0s .3s}
.sx-conf.is-show{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease-out)}
.sx-conf b{display:block;font-size:1.08em;font-weight:680}
.sx-conf p{margin-top:.45em;font-size:.86em;color:var(--text2)}
.sx-conf span{display:grid;grid-template-columns:1fr 1fr;gap:.4em;margin-top:.9em}
.sx-conf i{padding:.7em;border-radius:.75em;background:#F1F1F4;font-style:normal;font-weight:620;font-size:.9em;transition:transform .15s}
.sx-conf i.is-pri{background:var(--ink);color:#fff}

/* Powiadomienie u gory ekranu, pasek jezyka i komunikat na dole */
.sx-toast{position:absolute;left:.65em;right:.65em;top:3.1em;z-index:25;display:flex;gap:.6em;align-items:center;padding:.65em .75em;border-radius:1.1em;background:rgba(255,255,255,.97);box-shadow:0 .8em 2em -.8em rgba(13,13,15,.45),0 0 0 1px rgba(13,13,15,.06);font-size:.74em;line-height:1.3;opacity:0;transform:translateY(-1.2em);transition:opacity .35s,transform .6s var(--ease-out)}
.sx-toast.is-show{opacity:1;transform:none}
.sx-toast>i{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--ok);color:#fff}
.sx-toast>i .ico{width:1.1em;height:1.1em}
.sx-toast b{display:block;font-size:.98em;font-weight:650}
.sx-toast small{display:block;margin-top:.1em;font-size:.86em;color:var(--steel)}
.sx-bar{position:absolute;left:1em;right:1em;bottom:9.7em;z-index:15;display:flex;align-items:center;gap:.45em;padding:.7em .85em;border-radius:1em;font-size:.68em;line-height:1.35;box-shadow:0 .8em 1.8em -.8em rgba(13,13,15,.5);opacity:0;transform:translateY(1em);transition:opacity .35s,transform .55s var(--ease-out)}
.sx-bar.is-show{opacity:1;transform:none}
.sx-det{background:var(--ink);color:#fff}
.sx-det u{text-underline-offset:.18em}
.sx-det i{margin-left:auto;font-style:normal;opacity:.6}
.sx-warn{background:#FFF4E5;color:#8A4B08;box-shadow:0 0 0 1px #F5D9B0,0 .8em 1.8em -.8em rgba(13,13,15,.4)}

/* ---------- Telefon obslugi (panel kelnera) ---------- */
.sf{position:absolute;inset:0;background:#F3F3F5;color:var(--ink);padding:3.1em .75em 0}
.sf__top{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin:.2em .15em .7em}
.sf__top b{display:block;font-size:1.2em;font-weight:680;letter-spacing:-.02em}
.sf__top small{display:block;font-size:.6em;color:var(--steel)}
.sf__pause{flex:none;padding:.5em .8em;border-radius:99em;border:1px solid #D6D6DB;background:#fff;font-size:.64em;font-weight:650;transition:background-color .3s,color .3s,border-color .3s}
.sf__pause.is-on{background:#C2410C;border-color:#C2410C;color:#fff}
.sf__banner{display:none;margin:0 0 .55em;padding:.6em .7em;border-radius:.8em;background:#FFF1E6;color:#9A3412;font-size:.6em;line-height:1.35}
.sf__banner.is-show{display:block}
.sf__list{list-style:none;display:flex;flex-direction:column;gap:.45em}
.sf__t{display:grid;grid-template-columns:2.1em minmax(0,1fr) auto;gap:.5em;align-items:center;padding:.55em;border-radius:.9em;background:#fff;box-shadow:0 0 0 1px #E6E6EA;transition:box-shadow .35s}
.sf__t>i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.6em;background:#F1F1F4;font-style:normal;font-weight:700;font-size:.78em}
.sf__t b{display:block;font-size:.68em;font-weight:650}
.sf__t small{display:block;margin-top:.15em;font-size:.56em;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf__t em{font-style:normal;font-size:.6em;white-space:nowrap}
.sf__t .sf__btn{padding:.55em .8em;border-radius:.6em;background:var(--ink);color:#fff;font-weight:650;transition:transform .15s,opacity .3s}
.sf__t .sf__btn.is-press{transform:scale(.94)}
.sf__t.is-new{box-shadow:0 0 0 .12em var(--cobalt)}
.sf__t.is-new>i{background:var(--cobalt);color:#fff}
.sf__t.is-call{box-shadow:0 0 0 .12em #C2410C}
.sf__t.is-call>i{background:#FFF1E6;color:#C2410C}

/* ---------- Okno panelu wlasciciela (Safari) ---------- */
.pw{position:absolute;left:1.5em;top:3em;width:39em;height:33.5em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(13,13,15,.08),0 2em 4em -1.6em rgba(13,13,15,.35);overflow:hidden}
.pw__bar{display:flex;align-items:center;gap:1em;height:2.5em;padding:0 1em;background:#F6F6F8;border-bottom:1px solid #E6E6EA}
.pw__dots{display:flex;gap:.42em}
.pw__dots i{width:.7em;height:.7em;border-radius:50%;background:#FF5F57}
.pw__dots i+i{background:#FEBC2E}
.pw__dots i+i+i{background:#28C840}
.pw__url{display:flex;align-items:center;justify-content:center;gap:.4em;width:17em;height:1.55em;margin:0 auto;border-radius:.5em;background:#EBEBEF;font-size:.68em;color:#3A3A40}
.pw__url .ico{width:.9em;height:.9em}
.pw__main{display:grid;grid-template-columns:8.6em minmax(0,1fr);height:calc(100% - 2.5em)}
.pw__nav{display:flex;flex-direction:column;gap:.15em;padding:1em .6em;border-right:1px solid #EFEFF2;background:#FAFAFB}
.pw__nav b{margin:0 .5em .7em;font-size:.8em;font-weight:700;letter-spacing:-.01em}
.pw__nav span{padding:.45em .55em;border-radius:.5em;font-size:.66em;color:#55555B}
.pw__nav span.is-on{background:#EDEDF1;color:var(--ink);font-weight:620}
.pw__c{position:relative;padding:1.1em 1.3em;overflow:hidden}
.pw__h{display:flex;align-items:flex-end;justify-content:space-between;gap:1em}
.pw__h b{display:block;font-size:1.2em;font-weight:680;letter-spacing:-.02em}
.pw__h small{display:block;margin-top:.2em;font-size:.66em;color:var(--steel)}
.pw__chip{flex:none;padding:.42em .7em;border-radius:.55em;box-shadow:0 0 0 1px #E3E3E8;font-size:.62em;font-weight:600}
.pw__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;margin-top:1em}
.pw__kpi{padding:.75em .8em;border-radius:.8em;box-shadow:0 0 0 1px #ECECF0;transition:box-shadow .4s}
.pw__kpi small{display:block;font-size:.62em;color:var(--steel)}
.pw__kpi b{display:block;margin-top:.25em;font-size:1.12em;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.pw__kpi p{margin-top:.2em;font-size:.58em;color:var(--steel)}
.pw__kpi.is-hl{box-shadow:0 0 0 .12em var(--cobalt)}
.pw__box{margin-top:.8em;padding:.8em .9em;border-radius:.8em;box-shadow:0 0 0 1px #ECECF0}
.pw__box>b{display:flex;justify-content:space-between;font-size:.72em;font-weight:650}
.pw__box>b small{font-weight:500;color:var(--steel)}
.pw__bars{list-style:none;margin-top:.5em}
.pw__bars li{display:grid;grid-template-columns:4.4em minmax(0,1fr) 5.4em;gap:.6em;align-items:center;padding:.28em 0;font-size:.64em;transition:background-color .4s}
.pw__bars li i{height:.62em;border-radius:99em;background:#EDEDF1;overflow:hidden}
.pw__bars li i::before{content:"";display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--ink);transition:width .9s var(--ease-out)}
.pw__bars li em{font-style:normal;text-align:right;white-space:nowrap}
.pw__bars li.is-hl i::before{background:var(--cobalt)}
.pw__bars li.is-hl{font-weight:650}
.pw__foot{margin-top:.55em;font-size:.58em;line-height:1.4;color:var(--steel)}
/* tlumaczenia w panelu */
.pw__langs{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.9em}
.pw__langs span{display:inline-flex;align-items:center;gap:.35em;padding:.38em .6em;border-radius:.5em;box-shadow:0 0 0 1px #E3E3E8;font-size:.6em;color:#55555B;transition:background-color .3s,color .3s,box-shadow .3s}
.pw__langs span::before{content:"";width:.85em;height:.85em;border-radius:.2em;box-shadow:0 0 0 1px #C9C9CF;background:#fff}
.pw__langs span.is-on{background:#EEF1FF;color:var(--ink);box-shadow:0 0 0 1px #C9D2FF}
.pw__langs span.is-on::before{background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;box-shadow:none}
.pw__act{display:flex;align-items:center;gap:.7em;margin-top:.9em}
.pw__btn{display:inline-flex;align-items:center;gap:.45em;padding:.6em .9em;border-radius:.6em;background:var(--ink);color:#fff;font-size:.66em;font-weight:650;white-space:nowrap;transition:transform .15s}
.pw__btn svg{width:1.2em;height:1.2em}
.pw__btn.is-press{transform:scale(.95)}
.pw__prog{flex:1;height:.4em;border-radius:99em;background:#EDEDF1;overflow:hidden;opacity:0;transition:opacity .3s}
.pw__prog.is-show{opacity:1}
.pw__prog i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--cobalt)}
.pw__msg{font-size:.62em;color:var(--steel);white-space:nowrap}
.pw__msg b{color:var(--ok)}
.pw__tbl{width:100%;margin-top:.8em;border-collapse:collapse;font-size:.62em;table-layout:fixed}
.pw__tbl th{padding:.45em .4em;border-bottom:1px solid #E6E6EA;text-align:left;font-weight:600;color:var(--steel)}
.pw__tbl td{padding:.55em .4em;border-bottom:1px solid #F0F0F3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw__tbl td:first-child{font-weight:600}
.pw__tbl td.is-empty{color:#B4B4BA}
.pw__tbl td.is-stale{color:#8A4B08;background:#FFF4E5}
.pw__tbl tr.is-edit td:first-child{box-shadow:inset .15em 0 0 var(--cobalt)}
.pw__todo{display:none;align-items:center;gap:.6em;margin-top:.7em;padding:.55em .7em;border-radius:.6em;background:#FFF4E5;color:#8A4B08;font-size:.62em}
.pw__todo.is-show{display:flex}
.pw__todo u{margin-left:auto;text-underline-offset:.15em}
.pw [data-t2]{transition:opacity .19s,filter .19s}
.pw [data-t2].is-out{opacity:0;filter:blur(.12em)}

/* Kursor macOS w oknie panelu */
.sx-cur{position:absolute;z-index:60;left:70%;top:85%;width:1.35em;height:1.35em;margin:-.2em 0 0 -.35em;transition:left .75s var(--ease-io),top .75s var(--ease-io);pointer-events:none}
.sx-cur svg{display:block;width:100%;height:100%;transform-origin:30% 15%;transition:transform .12s;filter:drop-shadow(0 .12em .2em rgba(0,0,0,.3))}
.sx-cur.is-press svg{transform:scale(.84)}
.scn--st .pw{font-size:1.1em;left:1.36em;top:2.6em;width:35.5em;height:36.4em}
.st-req{left:2.2em;top:31.8em;width:17em}
.scn--st .st-kel{left:22.8em;top:6.4em;width:17em}
.pw__new{display:inline-block;margin-left:.4em;padding:.1em .45em;border-radius:.4em;background:#EEF1FF;color:var(--cobalt);font-weight:600;opacity:0;transition:opacity .4s}
.pw__new.is-show{opacity:1}
.pw__tbl td[data-ename]{transition:box-shadow .3s}
.pw__tbl tr.is-edit td[data-ename]{box-shadow:inset 0 -.12em 0 var(--cobalt)}

/* Scena w opowiesci (story): rama jak w szablonie */
.scn--st{aspect-ratio:1/1.08}
.scn--st .st-phone{left:2.4em;top:3.4em;width:18.4em}
.scn--st .st-phone--r{left:22.2em;top:6.4em;width:17.2em}
.scn--st .st-card{left:22.6em;width:17em}

/* ---------- Sekcje tresci ---------- */
.st-quick{margin-top:40px;padding:22px 24px;border-left:3px solid var(--cobalt);background:#fff;border-radius:0 14px 14px 0;font-size:17px;line-height:1.6;color:var(--text2);max-width:880px}
.st-quick b{color:var(--ink);font-weight:600}
.st-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:56px}
.st-rule{padding:26px 24px 28px;border:1px solid var(--line);border-radius:18px;background:#fff}
.st-rule>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EEF1FF;color:var(--cobalt)}
.st-rule>span .ico{width:18px;height:18px}
.st-rule h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.st-rule p{margin-top:10px;font-size:15.5px;line-height:1.58;color:var(--text2)}
.st-tblw{margin-top:48px;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
.st-tblw:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.st-tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.st-tbl caption{padding:18px 22px 0;text-align:left;font-size:13px;color:var(--steel)}
.st-tbl th,.st-tbl td{padding:16px 22px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.st-tbl thead th{font-size:13px;font-weight:500;color:var(--steel);font-family:var(--mono)}
.st-tbl tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.st-tbl td{color:var(--text2)}
.st-tbl tr:last-child>*{border-bottom:0}
.st-aside{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--steel);max-width:760px}
.st-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;list-style:none}
.st-langs li{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15.5px}
.st-langs li b{display:grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:6px;background:#F1F1F4;font:500 12px/1 var(--mono);color:var(--text2)}
.st-langs li.is-ui b{background:var(--ink);color:#fff}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:14px;color:var(--steel)}
.st-legend span{display:inline-flex;align-items:center;gap:8px}
.st-legend i{width:14px;height:14px;border-radius:4px;background:#F1F1F4;box-shadow:inset 0 0 0 1px var(--line)}
.st-legend i.is-ui{background:var(--ink);box-shadow:none}
.st-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px;list-style:none}
.st-more a{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .3s var(--ease-out)}
.st-more a:hover{border-color:var(--ink);transform:translateY(-2px)}
.st-more a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.st-more b{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600;letter-spacing:-.012em}
.st-more b .ico{width:16px;height:16px}
.st-more span{font-size:15px;line-height:1.5;color:var(--text2)}
.st-sec{padding:120px 0}
.st-sec--tight{padding-top:0}

@media (max-width:999px){
  .st-vis{max-width:560px}
  .st-frame{overflow:hidden;border-radius:20px;background:#141417;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .st-rules{grid-template-columns:1fr}
  .st-more{grid-template-columns:1fr}
  .js .scn--st.scn>.scn__cam{width:42em;height:45.36em;font-size:min(calc(100cqw / 42),calc(100cqh / 45.36))}
}
@media (max-width:640px){
  .st-sec{padding:84px 0}
  .st-quick{font-size:16px;padding:18px 18px}
  .st-tbl{font-size:14.5px}
  .st-tbl th,.st-tbl td{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .js .st-vis{animation:none}
  .st-cam,.sx-in,.sx-sheet,.sx-toast,.sx-bar,.sx-conf,.st-note{transition:none}
}