.pdx{--glow:oklch(78% .12 var(--h) / .35);position:relative}
.sh-hero{padding-block:clamp(28px,6vw,72px) clamp(20px,4vw,40px);background:radial-gradient(900px 420px at 85% -10%,var(--glow),transparent 70%),radial-gradient(700px 360px at -5% 20%,var(--brand-tint),transparent 70%)}
.sh-hero .wrap{display:grid;gap:clamp(24px,5vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:880px){.sh-hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}}
.sh-hero h1{font-family:var(--f-serif);font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.04;margin:.35em 0 .3em;letter-spacing:-.02em}
.sh-hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-inline-size:34em;line-height:1.55}
.sh-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-block:22px 14px}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sh-chips li{font-size:.82rem;padding:5px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.sh-visual{position:relative;perspective:1200px}
.sh-visual .frame{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -20px oklch(22% .05 var(--h) / .35),var(--shadow);transform:rotateY(-6deg) rotateX(2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
[dir=rtl] .sh-visual .frame{transform:rotateY(6deg) rotateX(2deg)}
.sh-visual:hover .frame{transform:none}
.frame .bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:var(--bg-soft);border-block-end:1px solid var(--line)}
.frame .bar i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--line)}
.frame .bar span{margin-inline-start:8px;font-size:.74rem;color:var(--muted)}
.frame img{display:block;inline-size:100%;block-size:auto}
.sh-visual .float{position:absolute;inset-inline-start:-10px;inset-block-end:-18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 14px;box-shadow:var(--shadow);font-size:.84rem;max-inline-size:210px;animation:shfloat 5s ease-in-out infinite}
.sh-visual .float b{display:block;font-size:1.25rem;color:var(--brand);font-family:var(--f-serif)}
@keyframes shfloat{50%{transform:translateY(-6px)}}
.sh-nav{position:sticky;inset-block-start:0;z-index:5;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.sh-nav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.sh-nav a{white-space:nowrap;padding:13px 14px;font-size:.92rem;color:var(--muted);text-decoration:none;border-block-end:2px solid transparent}
.sh-nav a:hover,.sh-nav a.on{color:var(--ink);border-color:var(--brand-fill)}
.sh-sec{padding-block:clamp(32px,6vw,64px)}
.sh-sec h2{font-family:var(--f-serif);font-size:clamp(1.5rem,3.2vw,2.1rem);margin:.3em 0 .5em;letter-spacing:-.01em}
.sh-prose{max-inline-size:44em;font-size:1.06rem;line-height:1.72;color:var(--ink)}
.sh-prose p{margin:0 0 1.1em}
.sh-prose p:first-child::first-line{font-weight:600}
.sh-feats{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-block-start:28px}
.sh-feat{padding:20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);transition:transform .25s,box-shadow .25s}
.sh-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sh-feat svg{inline-size:28px;block-size:28px;color:var(--brand);margin-block-end:10px}
.sh-feat h3{margin:0 0 6px;font-size:1.05rem}.sh-feat p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.sh-gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.sh-gal button{all:unset;cursor:zoom-in;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--card);position:relative;display:block}
.sh-gal button:focus-visible{outline:3px solid var(--brand-fill);outline-offset:2px}
.sh-gal img{display:block;inline-size:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sh-gal button:hover img{transform:scale(1.05)}
.sh-gal figcaption,.sh-gal span{position:absolute;inset-inline:0;inset-block-end:0;padding:22px 10px 8px;font-size:.78rem;color:#fff;background:linear-gradient(transparent,#000a)}
.sh-split{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.sh-split{grid-template-columns:1fr 1fr}}
.sh-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sh-list li{display:flex;gap:10px;line-height:1.5}
.sh-list li::before{content:"";flex:none;inline-size:18px;block-size:18px;margin-block-start:3px;border-radius:50%;background:var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.sh-table{inline-size:100%;border-collapse:collapse;font-size:.95rem}
.sh-table th,.sh-table td{padding:10px 12px;text-align:start;border-block-end:1px solid var(--line)}
.sh-table th{color:var(--muted);font-weight:500;inline-size:42%}
.sh-cta{margin-block:8px 40px;padding:clamp(24px,5vw,44px);border-radius:var(--r-l);background:var(--ink);color:var(--on-cta);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.sh-cta h2{margin:0;color:inherit;font-size:clamp(1.3rem,3vw,1.8rem)}.sh-cta p{margin:6px 0 0;opacity:.75}
.sh-cta .btn{background:var(--on-cta);color:var(--ink)}
.snd-hint{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:99px;padding:5px 12px;cursor:pointer}
.snd-hint[hidden]{display:none}
.demo{border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.demo>.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-soft);border-block-end:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.demo>.bar i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--line)}.demo>.bar b{margin-inline-start:auto;font-weight:500;color:var(--brand)}
.demo .pane{padding:clamp(16px,3vw,28px)}
.demo-note{font-size:.8rem;color:var(--muted);margin:14px 0 0}
.demo button.opt,.demo .tabs button{font:inherit;cursor:pointer}
.tabs{display:flex;gap:6px;margin-block-end:18px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:7px 14px;border-radius:99px;transition:background .2s,transform .15s}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--on-cta);border-color:var(--ink)}
.tabs button:active{transform:scale(.96)}
.dq-top{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;color:var(--muted);margin-block-end:10px}
.dq-prog{block-size:6px;background:var(--bg-soft);border-radius:9px;overflow:hidden;margin-block-end:18px}
.dq-prog i{display:block;block-size:100%;inline-size:0;background:var(--brand-fill);transition:inline-size .5s cubic-bezier(.2,.7,.2,1)}
.dq-stem{font-size:1.06rem;line-height:1.6;margin:0 0 16px}
.dq-opts{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.opt{display:flex;gap:12px;align-items:flex-start;inline-size:100%;text-align:start;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--ink);transition:border-color .2s,background .2s,transform .15s}
.opt:hover:not(:disabled){border-color:var(--brand-fill);transform:translateX(3px)}
[dir=rtl] .opt:hover:not(:disabled){transform:translateX(-3px)}
.opt b{flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);font-size:.82rem}
.opt.sel{border-color:var(--brand-fill);background:var(--brand-tint)}
.opt.right{border-color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,var(--bg))}.opt.right b{background:var(--ok);color:var(--bg)}
.opt.wrong{border-color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,var(--bg));animation:shake .35s}.opt.wrong b{background:var(--warn);color:var(--bg)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.dq-why{margin-block-start:16px;padding:14px 16px;border-inline-start:3px solid var(--brand-fill);background:var(--brand-tint);border-radius:0 var(--r-m) var(--r-m) 0;line-height:1.6;animation:rise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.dq-bar{display:flex;gap:10px;justify-content:space-between;margin-block-start:18px;flex-wrap:wrap}
.ring{--p:0;inline-size:130px;block-size:130px;border-radius:50%;background:conic-gradient(var(--brand-fill) calc(var(--p)*1%),var(--bg-soft) 0);display:grid;place-items:center;margin:8px auto 14px;transition:--p 1s}
.ring span{inline-size:100px;block-size:100px;border-radius:50%;background:var(--card);display:grid;place-items:center;font:600 1.6rem var(--f-serif)}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.dq-end{text-align:center}
.dp-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.dp-grid{grid-template-columns:1fr 1fr}}
.fld{display:grid;gap:6px;margin-block-end:14px}.fld label{font-size:.88rem;display:flex;justify-content:space-between;color:var(--muted)}.fld label output{color:var(--ink);font-weight:600}
.fld input[type=range]{accent-color:var(--brand-fill);inline-size:100%}
.fld input[type=number]{font:inherit;padding:9px 11px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--ink);inline-size:100%}
.dp-out{display:grid;gap:12px}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi div{padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.kpi small{display:block;color:var(--muted);font-size:.76rem}.kpi b{font:600 1.35rem var(--f-serif)}
.stack{display:flex;block-size:22px;border-radius:99px;overflow:hidden;background:var(--bg-soft)}
.stack i{display:block;transition:inline-size .45s cubic-bezier(.2,.7,.2,1)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--muted)}.legend span::before{content:"";display:inline-block;inline-size:9px;block-size:9px;border-radius:50%;background:var(--c);margin-inline-end:5px}
.spark{inline-size:100%;block-size:96px}.spark path{fill:none;stroke:var(--brand-fill);stroke-width:2.5}.spark .a{fill:var(--brand-tint);stroke:none}
.neg{color:var(--warn)}
.ds-text{font:500 clamp(1.3rem,3vw,1.8rem)/1.5 var(--f-serif);margin:6px 0 18px;min-block-size:3.1em}
.ds-text span{padding:0 .12em;border-radius:6px;transition:background .15s,color .15s,opacity .3s}
.ds-text span.now{background:var(--brand-fill);color:var(--on-brand)}.ds-text span.done{color:var(--brand)}
.ds-text span.gap{color:transparent;background:var(--bg-soft);border-radius:6px;user-select:none}
.ds-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-end:14px}
.ds-row select,.ds-row input[type=range]{font:inherit;accent-color:var(--brand-fill)}
.ds-row select{padding:7px 10px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--ink)}
.meter{inline-size:100%;block-size:10px;background:var(--bg-soft);border-radius:9px;overflow:hidden}.meter i{display:block;block-size:100%;inline-size:0;background:var(--ok);transition:inline-size .08s}
.turn{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-m);background:var(--brand-tint);margin-block-end:12px;font-weight:600}
.turn.show{display:flex;animation:rise .3s}
.turn i{inline-size:14px;block-size:14px;border-radius:50%;background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.5}}
.da-stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-block:6px 18px}
.da-stat{padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.da-stat b{display:block;font:600 1.6rem var(--f-serif)}.da-stat small{color:var(--muted);font-size:.78rem}
.da-stat i{display:block;block-size:5px;border-radius:9px;background:var(--brand-fill);margin-block-start:8px;inline-size:0;transition:inline-size .8s cubic-bezier(.2,.7,.2,1)}
.da-find{display:flex;gap:10px;margin-block-end:10px}.da-find input{flex:1;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--ink)}
.da-list{display:grid;gap:6px;max-block-size:280px;overflow:auto;padding-inline-end:4px}
.da-row{display:grid;grid-template-columns:2.2em 1fr 3.4em;gap:10px;align-items:center;font-size:.92rem}
.da-row i{block-size:8px;border-radius:9px;background:var(--brand-fill);opacity:.8}
.da-row span:last-child{text-align:end;font-variant-numeric:tabular-nums;color:var(--muted)}
.dt{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:760px){.dt{grid-template-columns:240px 1fr}}
.phone{inline-size:230px;margin-inline:auto;border:9px solid var(--ink);border-radius:34px;overflow:hidden;background:var(--bg);aspect-ratio:9/19;position:relative;box-shadow:var(--shadow)}
.phone img,.phone iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s}
.phone img.on,.phone iframe{opacity:1}
.dt-steps{display:grid;gap:10px}.dt-steps button{all:unset;cursor:pointer;display:flex;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-m);transition:border-color .2s,background .2s}
.dt-steps button[aria-current=true]{border-color:var(--brand-fill);background:var(--brand-tint)}
.dt-steps b{display:block}.dt-steps span{color:var(--muted);font-size:.9rem}
dialog.sheet-dlg{inline-size:min(1180px,100vw);max-inline-size:100vw;block-size:min(94dvh,100dvh);max-block-size:100dvh;margin:auto;margin-block-end:0;padding:0;border:0;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--bg);color:var(--ink);overflow:hidden;box-shadow:0 -20px 80px #0008}
@media(min-width:900px){dialog.sheet-dlg{margin-block:3dvh;border-radius:var(--r-l);block-size:94dvh}}
dialog.sheet-dlg[open]{animation:dlgin .45s cubic-bezier(.2,.8,.2,1)}
dialog.sheet-dlg::backdrop{background:oklch(15% .03 260 / .6);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes dlgin{from{opacity:0;transform:translateY(7vh) scale(.985)}}
@keyframes fade{from{opacity:0}}
.dlg-scroll{block-size:100%;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.dlg-x{position:absolute;inset-block-start:12px;inset-inline-end:14px;z-index:9;inline-size:42px;block-size:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.3rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s}
.dlg-x:hover{transform:rotate(90deg)}
dialog.lb{inline-size:min(1100px,96vw);max-block-size:94dvh;padding:0;border:0;background:#000;border-radius:var(--r-m)}
dialog.lb::backdrop{background:#000c}
dialog.lb img{display:block;max-inline-size:100%;max-block-size:82dvh;margin:auto}
dialog.lb p{margin:0;padding:12px 16px;color:#ddd;background:#111;font-size:.9rem}
dialog.lb button{position:absolute;inset-block-start:calc(50% - 22px);inline-size:44px;block-size:44px;border-radius:50%;border:0;background:#fffc;font-size:1.3rem;cursor:pointer}
dialog.lb .pv{inset-inline-start:10px}dialog.lb .nx{inset-inline-end:10px}dialog.lb .xx{inset-block-start:10px;inset-inline-end:10px;inset-block-end:auto}
@media(prefers-reduced-motion:reduce){.pdx *,dialog.sheet-dlg,dialog.sheet-dlg::backdrop{animation:none!important;transition:none!important}.sh-visual .frame{transform:none}}
.st-w{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:760px){.st-w{grid-template-columns:minmax(0,260px) 1fr}}
.st-vid video{display:block;inline-size:100%;max-inline-size:260px;margin-inline:auto;aspect-ratio:9/16;background:#000;border-radius:var(--r-m);object-fit:cover}
.nw-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.nw-grid .opt{justify-content:center;text-align:center;padding:10px}
.nw-go{margin-block-start:14px;min-block-size:2.4em}
.sh-guides{display:grid;gap:10px;margin-block-start:26px;max-inline-size:44em}
.sh-guides a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-inline-start:4px solid var(--brand-fill);border-radius:var(--r-m);background:var(--card);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.sh-guides a:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.sh-guides a span{color:var(--brand);font-size:.9rem;white-space:nowrap}