:root{
  --bg:#fafaf5;
  --card:#ffffff;
  --text:#1d1d1f;
  --dim:#86868b;
  --faint:#c7c7cc;
  --line:rgba(0,0,0,.08);
  --fill:#f0f0eb;
  --blue:#13bbe8;
  --blue-ink:#0b93bb;
  --blue-soft:rgba(19,187,232,.12);
  --green-ink:#248a3d;
  --green-soft:rgba(52,199,89,.13);
  --orange:#ff9500;
  --orange-ink:#c93400;
  --orange-soft:rgba(255,149,0,.14);
  --red:#ff3b30;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;
  min-height:100vh;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--blue-ink)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.wrap.wide{max-width:1120px}

header.top{padding:calc(28px + env(safe-area-inset-top,0px)) 0 20px;display:flex;align-items:flex-end;gap:16px}
header.top .ht{flex:1;min-width:0}
.eyebrow{font-size:13px;font-weight:600;color:var(--blue-ink);letter-spacing:.02em}
h1{font-size:34px;font-weight:700;letter-spacing:-.022em;line-height:1.12;margin-top:4px;text-wrap:balance}
.lede{color:var(--dim);font-size:15px;margin-top:6px}
@media (max-width:400px){h1{font-size:30px}.wrap{padding:0 14px}.card{padding:14px}.day{width:40px;height:40px;font-size:16px}}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--fill);border-radius:10px;padding:2px;margin-bottom:22px}
.seg button{padding:7px 8px;border-radius:8px;font-size:14px;font-weight:600;transition:background .2s,box-shadow .2s}
.seg button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg .count{color:var(--blue-ink);margin-left:4px}

.step{display:flex;align-items:baseline;gap:8px;margin:0 4px 10px}
.step-n{font-size:13px;font-weight:700;color:var(--blue-ink)}
.step-t{font-size:20px;font-weight:700;letter-spacing:-.01em}
.step-hint{margin-left:auto;font-size:14px;color:var(--dim);text-align:right}
.panel-title{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0 4px 12px}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin-bottom:26px}

/* calendario */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month{font-size:17px;font-weight:600;text-transform:capitalize}
.cal-nav{display:flex;gap:4px}
.cal-nav button{width:34px;height:34px;border-radius:50%;color:var(--blue-ink);display:grid;place-items:center}
.cal-nav button:disabled{color:var(--faint);cursor:default}
.cal-nav button:not(:disabled):active{background:var(--blue-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;text-align:center}
.cal-wd{font-size:12px;font-weight:600;color:var(--dim);padding-bottom:6px}
.cal-wd.we{color:var(--faint)}
.day{position:relative;justify-self:center;width:42px;height:42px;border-radius:50%;font-size:17px;font-variant-numeric:tabular-nums;display:grid;place-items:center;transition:background .15s,color .15s}
.day:disabled{color:var(--faint);cursor:default}
.day.today{color:var(--blue-ink);font-weight:600}
.day.avail{font-weight:600}
.day:not(:disabled):not(.sel):hover{background:var(--fill)}
.day.sel{background:var(--blue);color:#fff;font-weight:600}
.day .mk{position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--blue)}
.day .mk.bk{background:var(--orange)}
.day.sel .mk{background:#fff}
.cal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)}
.link{color:var(--blue-ink);font-size:14px;font-weight:500;white-space:nowrap}

/* orari */
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{padding:6px 14px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:500}
.pill:active{background:var(--blue-soft)}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.time{padding:11px 0;border-radius:12px;background:var(--fill);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,transform .1s}
.time:active{transform:scale(.96)}
.time.sel{background:var(--blue);color:#fff}
.time.mixed{background:var(--blue-soft);color:var(--blue-ink);box-shadow:inset 0 0 0 1.5px var(--blue)}
.time.booked{background:var(--orange-soft);color:var(--orange-ink);cursor:default}
.time:disabled:not(.booked){background:transparent;color:var(--faint);cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.time.taken{text-decoration:line-through}
.time.busy:disabled{background:transparent;color:var(--faint);box-shadow:none;border:1.5px dashed var(--faint);cursor:default}
.chip.busy{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--faint)}
.hint{color:var(--dim);font-size:15px;text-align:center;padding:18px 0}

.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--dim);margin:0 4px 6px}
.field input,.field textarea{width:100%;background:var(--fill);border:none;border-radius:12px;padding:13px 14px;font:inherit;font-size:17px;color:var(--text);outline:none;-webkit-appearance:none}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 2px var(--blue)}
.field textarea{resize:none;height:84px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--dim);margin:4px 4px 16px}
.check input{width:20px;height:20px;accent-color:var(--blue);flex-shrink:0;margin-top:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;border-radius:14px;padding:14px 22px;font-size:17px;font-weight:600;text-decoration:none;transition:opacity .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:default}
.btn.full{width:100%}
.btn.small{padding:9px 16px;font-size:15px;border-radius:12px}
.btn.ghost{background:var(--fill);color:var(--text)}
.btn.soft{background:var(--blue-soft);color:var(--blue-ink)}

/* barra azione */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(250,250,245,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bar.show{transform:none}
.bar-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:14px}
.bar-sum{flex:1;font-size:14px;color:var(--dim);line-height:1.3;min-width:0}
.bar-sum b{display:block;color:var(--text);font-size:16px}

/* elenchi */
.day-title{font-size:13px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:0 4px 8px}
.list{background:var(--card);border-radius:18px;box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:13px 16px}
.row+.row{border-top:1px solid var(--line)}
.row-time{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;min-width:50px}
.row-body{flex:1;min-width:0}
.row-main{font-size:16px;font-weight:500}
.row-sub{font-size:14px;color:var(--dim);overflow-wrap:anywhere}
.row-sub a{text-decoration:none}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag.free{background:var(--green-soft);color:var(--green-ink)}
.tag.booked{background:var(--orange-soft);color:var(--orange-ink)}
.tag.wait{background:var(--fill);color:var(--dim)}
.x{color:var(--red);font-size:14px;font-weight:500;padding:6px 0 6px 6px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}
.chip{padding:5px 11px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.chip.booked{background:var(--orange-soft);color:var(--orange-ink)}
.chip button{margin-left:4px;color:var(--dim)}
.empty{text-align:center;padding:40px 20px;color:var(--dim)}
.empty-t{font-size:19px;font-weight:600;color:var(--text);margin:10px 0 4px}
.empty svg{width:44px;height:44px;color:var(--faint)}
.banner{display:flex;gap:12px;align-items:center;background:var(--blue-soft);color:var(--text);border-radius:16px;padding:14px 16px;margin-bottom:22px;font-size:15px}
.banner b{display:block}
.banner .ic{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex-shrink:0}

/* sheet */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.28);display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex;animation:fade .2s}
.sheet{background:var(--bg);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:92vh;overflow:auto;animation:up .32s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.overlay{align-items:center}.sheet{border-radius:22px;padding-bottom:24px}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.grab{width:36px;height:5px;border-radius:3px;background:var(--faint);margin:6px auto 18px}
.sheet h2{font-size:24px;font-weight:700;letter-spacing:-.015em}
.sheet .when{font-size:15px;color:var(--dim);margin:4px 0 20px}
.cancel{display:block;width:100%;text-align:center;color:var(--blue-ink);font-size:17px;padding:14px 0 0}

.done{text-align:center;padding:40px 12px}
.done-ic{width:72px;height:72px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin:0 auto 18px}
.done h2{font-size:28px;font-weight:700;letter-spacing:-.02em}
.done p{color:var(--dim);margin-top:6px}
.done .when-big{font-size:19px;font-weight:600;color:var(--text);margin-top:16px}

.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translate(-50%,-160%);z-index:300;background:rgba(29,29,31,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500;transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toast.show{transform:translate(-50%,0)}
.loading{color:var(--dim);text-align:center;padding:60px 0}

/* foto immobile */
.hero{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px;background:var(--fill);aspect-ratio:16/10}
.hero img{width:100%;height:100%;object-fit:cover;display:block;animation:kb 22s ease-in-out infinite alternate;transform-origin:60% 40%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.hero-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff}
.hero-cap .rif{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px}
.hero-cap .t{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-top:6px;line-height:1.2;text-wrap:balance}
.hero-cap a{color:#fff;font-size:14px;font-weight:600;display:inline-block;margin-top:4px}
.hero.small{aspect-ratio:21/9}
.hero.noimg{aspect-ratio:auto;background:linear-gradient(135deg,#13bbe8,#0b93bb)}
.hero.noimg img,.hero.noimg::after{display:none}
.hero.noimg .hero-cap{position:relative;left:auto;right:auto;bottom:auto;padding:18px 16px 16px}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}

/* ingresso e micro-animazioni */
.intro>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.intro>*:nth-child(2){animation-delay:.07s}.intro>*:nth-child(3){animation-delay:.14s}.intro>*:nth-child(4){animation-delay:.21s}
.intro>*:nth-child(5){animation-delay:.28s}.intro>*:nth-child(6){animation-delay:.35s}.intro>*:nth-child(n+7){animation-delay:.42s}
header.top{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pop{animation:pop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.82)}100%{transform:scale(1)}}
.done-ic{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:fall var(--d,2.4s) cubic-bezier(.25,.6,.45,1) forwards}
@keyframes fall{to{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,540deg))}}

/* caricatura */
@media (max-width:699px){body.has-buddy{padding-bottom:calc(240px + env(safe-area-inset-bottom,0px))}}
.step{scroll-margin-top:14px}
.buddy{--bw:124px;position:fixed;left:0;bottom:var(--lift,0px);z-index:40;width:var(--bw);height:calc(var(--bw)*1.1);transform:translate3d(var(--bx,-160px),0,0);transition:transform var(--bt,0ms) linear,bottom .3s ease;pointer-events:none;will-change:transform}
@media (min-width:700px){.buddy{--bw:150px}}
.bd-in{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.buddy.peek .bd-in{transform:translateY(47%)}
.bd-svg{width:100%;height:100%;overflow:visible;display:block}
.bd-fig,.bd-head{transform-box:view-box}
.bd-fig{transform-origin:95px 200px}
.bd-head{transform-origin:99.4px 124.8px;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.bd-prop{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.4) translateY(10px);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.buddy.has-key .bd-key,.buddy.has-cal .bd-cal{opacity:1;transform:none}
.buddy.walk .bd-fig{animation:bdWaddle .46s ease-in-out infinite}
@keyframes bdWaddle{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-6px)}}
.buddy.wave .bd-fig{animation:bdHello 1.3s ease-in-out}
.buddy.wave .bd-head{animation:bdTilt 1.3s ease-in-out}
@keyframes bdHello{18%{transform:translateY(-14px) rotate(-3deg)}36%{transform:translateY(0) rotate(0)}54%{transform:translateY(-8px) rotate(3deg)}72%{transform:none}}
@keyframes bdTilt{25%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}85%{transform:rotate(-2deg)}}
.buddy.jump .bd-fig{animation:bdJump .7s cubic-bezier(.3,.7,.4,1)}
@keyframes bdJump{15%{transform:translateY(2px)}45%{transform:translateY(-24px)}75%{transform:translateY(0)}100%{transform:none}}
.buddy.cheer .bd-fig{animation:bdJump .7s cubic-bezier(.3,.7,.4,1) 2}
.buddy.cheer .bd-head{transform:rotate(-6deg)}
.buddy.point.side-l .bd-fig{transform:rotate(4deg)}
.buddy.point.side-l .bd-head{transform:rotate(9deg)}
.buddy.point.side-r .bd-fig{transform:rotate(-4deg)}
.buddy.point.side-r .bd-head{transform:rotate(-9deg)}
.buddy.think .bd-head{transform:rotate(-11deg)}
.buddy.look .bd-head{animation:bdLook 1.6s ease-in-out}
@keyframes bdLook{30%{transform:rotate(10deg)}70%{transform:rotate(-10deg)}}
.buddy.talk .bd-head{animation:bdTalk .9s ease-in-out infinite}
@keyframes bdTalk{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-3deg) translateY(-1px)}75%{transform:rotate(3deg) translateY(-1px)}}
.bd-bubble{position:absolute;bottom:calc(100% - 4px);left:calc(var(--bw)*.55);width:max-content;max-width:min(250px,calc(100vw - 48px));background:var(--card);color:var(--text);font-size:15px;line-height:1.35;font-weight:500;padding:10px 14px;border-radius:18px 18px 18px 6px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.12);opacity:0;transform:translateY(8px) scale(.94);transform-origin:0 100%;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.buddy.side-r .bd-bubble{left:auto;right:calc(var(--bw)*.55);border-radius:18px 18px 6px 18px;transform-origin:100% 100%}
.bd-bubble.show{opacity:1;transform:none}

/* Santino con le gambe (Regia): si arrampica di casella in casella, la posa la muove climber.js */
body.has-climber{position:relative}
.cl-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:40}
.cp-open .cl-layer{display:none}
.climber{--bw:80px;position:absolute;left:0;top:0;width:var(--bw);height:calc(var(--bw)*346/159);pointer-events:none;will-change:transform;transform:translate3d(-400px,0,0)}
.climber.fix{position:fixed}
@media (min-width:700px){.climber{--bw:100px}}
.climber .bd-hit{pointer-events:all;cursor:pointer}
.climber.c-wave .bd-head{animation:bdTilt 1.3s ease-in-out}
.climber.c-talk .bd-head{animation:bdTalk .9s ease-in-out infinite}
.climber.c-think .bd-head{transform:rotate(-11deg)}
.climber.c-cheer .bd-head{transform:rotate(-6deg)}
.climber.c-point.side-l .bd-head{transform:rotate(9deg)}
.climber.c-point.side-r .bd-head{transform:rotate(-9deg)}
.climber .bd-bubble{bottom:calc(100% - 4px - var(--hd,0px))}
.climber.bl .bd-bubble{left:auto;right:calc(var(--bw)*.55);border-radius:18px 18px 6px 18px;transform-origin:100% 100%}

/* Mini guida con Santino (guida.js): la pagina si scurisce, si illumina un punto e la sua mano mostra dove toccare */
.gd{position:fixed;inset:0;z-index:250;display:none}
.gd.open{display:block}
.gd-on .buddy,.gd-on .cl-layer,.gd-on .climber{opacity:0;transition:opacity .2s}
.gd-hole{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:18px;box-shadow:0 0 0 200vmax rgba(18,24,32,.62);pointer-events:none}
.gd.has-target .gd-hole{animation:gdRing 2s ease-in-out infinite}
@keyframes gdRing{0%,100%{box-shadow:0 0 0 3px var(--blue),0 0 0 200vmax rgba(18,24,32,.62)}50%{box-shadow:0 0 0 7px rgba(19,187,232,.45),0 0 0 200vmax rgba(18,24,32,.62)}}
.gd.move .gd-hole,.gd.move .gd-hand{transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.gd-hand{position:fixed;left:0;top:0;width:58px;height:127px;transform-origin:24.5px 3.6px;pointer-events:none;opacity:0;transition:opacity .25s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.gd.tapping .gd-hand{opacity:1}
.gd-hand svg{display:block}
.gd-hand-in{transform-origin:24.5px 3.6px;animation:gdTap 1.8s ease-in-out infinite}
@keyframes gdTap{0%,100%{transform:translateY(16px)}38%{transform:translateY(0)}46%{transform:translateY(3px) scale(.95)}56%{transform:translateY(0)}}
.gd-ripple{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid var(--blue);box-shadow:0 0 0 2px rgba(255,255,255,.85);opacity:0;pointer-events:none}
.gd.tapping .gd-ripple{animation:gdRip 1.8s ease-out infinite}
@keyframes gdRip{0%,40%{transform:scale(.3);opacity:0}46%{opacity:.95}85%,100%{transform:scale(1.5);opacity:0}}
.gd-card{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);overflow-y:auto;background:var(--card);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.3);padding:14px 16px}
.gd-card.top{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
.gd-card.mid{bottom:auto;top:50%;transform:translate(-50%,-50%)}
.gd-card.gd-in{animation:gdIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes gdIn{from{opacity:0;translate:0 10px}}
.gd-who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gd-av{width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;background:var(--blue-soft)}
.gd-av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform-origin:50% 90%}
.gd-card.mid .gd-av{width:68px;height:68px}
.gd-card.gd-in .gd-av img{animation:gdNod 1.1s ease-in-out .15s}
@keyframes gdNod{30%{transform:rotate(-8deg) translateY(-2px)}62%{transform:rotate(5deg)}}
.gd-name{flex:1;line-height:1.2}
.gd-name b{display:block;font-size:15px}
.gd-name small{font-size:12px;color:var(--dim)}
.gd-skip{font-size:14px;color:var(--dim);padding:6px 0 6px 10px}
.gd-t{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.gd-x{font-size:15px;line-height:1.45;margin-top:5px}
.gd-x b{font-weight:600}
.gd-ic{display:inline-block;width:20px;height:20px;vertical-align:-4px;color:var(--blue-ink)}
.gd-app{display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;margin:12px auto 2px;font-size:12px;color:var(--dim)}
.gd-app img{width:58px;height:58px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.gd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.gd-dots{display:flex;gap:5px}
.gd-dots i{width:6px;height:6px;border-radius:3px;background:var(--faint);transition:width .25s}
.gd-dots i.on{width:16px;background:var(--blue)}
.gd-btns{display:flex;gap:8px;align-items:center}
.gd-back{width:36px;height:36px;border-radius:50%;background:var(--fill);font-size:22px;line-height:1;color:var(--text)}
.howto{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:600;color:var(--blue-ink)}
.howto i{width:20px;height:20px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}