:root{
  --bg:#F3F6FB; --surface:#FFFFFF; --ink:#141A2E; --mute:#5A6479; --line:#DCE3EF; --accent:#2456E0; --lagoon:#2DC4B8;
  --display:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0F1E; --surface:#111A2F; --ink:#E7ECF7; --mute:#97A2BB; --line:#223050; --accent:#5E85F0; color-scheme:dark }}
:root[data-theme="dark"]{ --bg:#0A0F1E; --surface:#111A2F; --ink:#E7ECF7; --mute:#97A2BB; --line:#223050; --accent:#5E85F0; color-scheme:dark }

*{box-sizing:border-box}
html, body{margin:0; height:100%; overflow:hidden}
body{background:#F3F6FB; color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}

/* ---------- scène plein écran ---------- */
.stage{--st-bg:#F3F6FB; --st-surface:#FFFFFF; --st-ink:#141A2E; --st-mute:#677089; --st-line:#D3DBEA; --st-glow:rgba(36,86,224,.11); --accent:#2456E0;
  position:fixed; inset:0; height:100vh; height:100dvh; overflow:hidden; overflow:clip; background:var(--st-bg); isolation:isolate; touch-action:none; user-select:none; -webkit-user-select:none; color:var(--st-ink); transition:background .6s}
.stage.dark{--st-bg:#0C1326; --st-surface:#141E38; --st-ink:#E8EDF8; --st-mute:#8F9BB7; --st-line:#2A3961; --st-glow:rgba(94,133,240,.2); --accent:#5E85F0}
.stage::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(55% 50% at 50% 50%, var(--st-glow), transparent 72%)}
.stage::after{content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none; background:radial-gradient(30% 30% at 30% 30%, rgba(58,166,240,.07), transparent 70%), radial-gradient(28% 28% at 72% 68%, rgba(45,196,184,.07), transparent 70%); animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%, -3%) rotate(6deg)}}
svg#map{position:absolute; inset:0; width:100%; height:100%; cursor:grab; display:block; transition:opacity .7s, filter .7s}
svg#map.dragging{cursor:grabbing}
svg#tether{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6}
svg#tether path{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:4 6; opacity:.7; animation:flow 1.4s linear infinite}

.node{transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .45s; cursor:pointer; outline:none}
.bob{animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.node .lab{font-family:var(--body); fill:var(--st-ink); paint-order:stroke; stroke:var(--st-bg); stroke-width:4px; stroke-linejoin:round; transition:opacity .35s}
.leaf .lab{font-size:13px; font-weight:600; opacity:0}
svg.near .leaf .lab, .leaf.lit .lab, .leaf.infocus .lab, .leaf:hover .lab, .leaf:focus-visible .lab, .leaf.sel .lab, .leaf.hl .lab, .leaf.onpath .lab{opacity:1}
.leaf .shape{fill:var(--c); stroke:var(--st-bg); stroke-width:3; transition:stroke .2s, stroke-width .2s}
.leaf:hover .shape, .leaf:focus-visible .shape, .leaf.hl .shape{stroke:var(--c); stroke-width:6}
.leaf .halo{fill:none; stroke:var(--c); stroke-width:2.2; opacity:0; transform-box:fill-box; transform-origin:center}
.leaf.lit .halo, .leaf.hl .halo{animation:pulse 1.8s ease-out infinite}
.leaf.playing .halo{stroke:var(--st-ink); animation:pulse 1.2s ease-out infinite}
.leaf.sel .shape{stroke:var(--st-ink); stroke-width:3}
@keyframes pulse{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(2.2); opacity:0}}

.branch .pill{fill:var(--c)}
.branch .lab{font-size:17px; font-weight:800; fill:#fff; stroke:none; letter-spacing:-.01em}
.branch .cnt{font-family:var(--mono); font-size:11px; fill:var(--st-mute); paint-order:stroke; stroke:var(--st-bg); stroke-width:3px}
.branch:hover .pill, .branch:focus-visible .pill{filter:brightness(1.08)}
.branch:focus-visible .pill{stroke:var(--st-ink); stroke-width:2}
.center .disc{fill:url(#gBrand)}
.center .ring{fill:none; stroke:#2456E0; stroke-opacity:.28; stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:breathe 4.5s ease-in-out infinite}
.center .lab{font-size:13px; font-weight:800; letter-spacing:.08em}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.14); opacity:.3}}

.edge{fill:none; stroke:var(--c); stroke-linecap:round; transition:opacity .45s}
.trunk{stroke-width:15; stroke-opacity:.88}
.twig{stroke-width:3.2; stroke-opacity:.55}
.spark{fill:none; stroke:#fff; stroke-linecap:round; opacity:0; transition:opacity .4s; pointer-events:none; stroke-dasharray:3 19}
.spark.lit{opacity:.95; animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-44}}
.drawin{transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1)}
svg.querying .edge:not(.lit){opacity:.12}
svg.querying .leaf:not(.lit), svg.querying .branch:not(.lit){opacity:.26}
svg.focusing .branch:not(.infocus), svg.focusing .leaf:not(.infocus){opacity:.3}
svg.focusing .edge:not(.infocus){opacity:.14}
svg.pathing .edge{opacity:.12}
svg.pathing .leaf:not(.onpath), svg.pathing .branch{opacity:.3}
.route{fill:none; stroke:var(--st-ink); stroke-width:2.5; stroke-dasharray:2 9; stroke-linecap:round; opacity:.55; animation:flow 1.6s linear infinite}
.stepno circle{fill:var(--st-ink)}
.stepno text{fill:var(--st-bg); font:800 11px var(--body); text-anchor:middle}
.stepno.cur circle{fill:var(--accent)}
.stepno.cur text{fill:#fff}

/* ---------- chrome ---------- */
.stage .glass{background:color-mix(in srgb, var(--st-surface) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--st-line)}
.crumbs{position:absolute; top:max(14px, env(safe-area-inset-top, 0px)); left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px)); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; pointer-events:none; z-index:7}
.crumbs > *{pointer-events:auto}
.lead{display:flex; gap:8px; align-items:center; min-width:0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:8px; border-radius:999px; padding:5px 13px 5px 6px; font-size:13px; font-weight:800; letter-spacing:-.01em; flex:none}
.brand svg{width:24px; height:24px; flex:none}
.trail{display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:13px; font-weight:600; border-radius:999px; padding:6px 13px; min-width:0}
.trail button{all:unset; cursor:pointer; color:var(--st-mute)}
.trail button:hover, .trail button:focus-visible{color:var(--accent); text-decoration:underline}
.trail .sep{color:var(--st-mute); opacity:.6}
.tools{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; position:relative}
.chip-btn{all:unset; cursor:pointer; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px; white-space:nowrap; color:var(--st-ink)}
.chip-btn:hover, .chip-btn:focus-visible{border-color:var(--accent)}
.chip-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.chip-btn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.chip-btn[hidden]{display:none}
.menu{position:absolute; top:calc(100% + 6px); right:0; width:280px; max-width:calc(100vw - 48px); border-radius:16px; padding:8px; display:flex; flex-direction:column; gap:4px; box-shadow:0 20px 50px -20px rgba(10,30,80,.4)}
.menu[hidden]{display:none}
.menu button{all:unset; cursor:pointer; padding:10px 12px; border-radius:10px; display:flex; flex-direction:column; gap:2px}
.menu button:hover, .menu button:focus-visible{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.menu b{font-size:14px} .menu span{font-size:12.5px; color:var(--st-mute)}
.zoomctl{position:absolute; left:16px; bottom:calc(16px + var(--askh, 0px)); display:flex; flex-direction:column; gap:6px; z-index:5; transition:bottom .6s cubic-bezier(.2,.8,.2,1)}
.zoomctl button{all:unset; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:17px; font-weight:700; color:var(--st-ink)}
.zoomctl button:focus-visible{outline:2px solid var(--accent)}

/* question */
.ask{position:absolute; z-index:8; left:50%; width:min(640px, calc(100% - 32px)); top:50%; transform:translate(-50%, -50%); transition:top .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; gap:10px}
.ask .box{border-radius:20px; padding:16px 18px 12px; box-shadow:0 18px 50px -20px rgba(20,40,90,.35)}
.ask h2{font-size:clamp(20px, 2.6vw, 28px); font-weight:800; letter-spacing:-.02em; margin-bottom:10px}
.ask .row{display:flex; gap:10px; align-items:flex-end}
.ask textarea{flex:1; min-width:0; resize:none; border:none; outline:none; background:transparent; color:var(--st-ink); font:500 17px/1.45 var(--body); height:52px; padding:4px 0; overflow:hidden}
.ask textarea::placeholder{color:var(--st-mute)}
.go{all:unset; cursor:pointer; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, #2456E0, #3AA6F0); color:#fff; flex:none}
.go:focus-visible{outline:2px solid var(--st-ink); outline-offset:2px}
.hint{font-size:13px; color:var(--st-mute); min-height:20px; font-weight:500}
.hint b{color:var(--accent)}
.sugg{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.sugg button{all:unset; cursor:pointer; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px}
.sugg button:hover, .sugg button:focus-visible{border-color:var(--accent); color:var(--accent)}
.stage.docked .ask{top:calc(100% - 16px - env(safe-area-inset-bottom, 0px)); transform:translate(-50%, -100%)}
.stage.docked .ask h2{display:none}
.stage.docked .ask .sugg{display:none}
.stage.docked .ask textarea{height:30px; font-size:16px}
.stage.docked .go{width:36px; height:36px}
.stage.asking svg#map{opacity:.42; filter:blur(1.6px)}
/* téléphone : la liste empilée reste floue derrière la question, comme la carte (première vue = la question seule) */
.stage.stacked.asking .stack{filter:blur(1.6px); opacity:.42; pointer-events:none}

/* résultats */
.results{position:absolute; z-index:6; left:16px; top:64px; width:260px; max-height:calc(100% - 64px - 16px - var(--askh, 0px)); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; transform:translateX(-120%); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.results.on{transform:none}
.results h4{margin:0; padding:12px 14px 6px; font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--st-mute)}
.results ol{list-style:none; margin:0; padding:0 6px 8px; overflow:auto}
.results button{all:unset; cursor:pointer; display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; align-items:center; padding:8px; border-radius:10px; width:100%; box-sizing:border-box}
.results button:hover, .results button:focus-visible{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.results b{font-size:13.5px; font-weight:700; display:block; line-height:1.3}
.results small{font-size:12px; color:var(--st-mute)}
.ico{width:12px; height:12px; display:block; background:var(--c); flex:none}
.ico.v{border-radius:50%} .ico.t{transform:rotate(45deg) scale(.85); border-radius:2px} .ico.g{border-radius:3px}

/* stepper parcours */
.stepper{position:absolute; z-index:7; top:62px; left:50%; transform:translate(-50%, -150%); opacity:0; pointer-events:none; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; border-radius:999px; padding:6px 6px 6px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; white-space:nowrap; max-width:calc(100% - 32px)}
.stepper.on{transform:translate(-50%, 0); opacity:1; pointer-events:auto}
.stepper .ttl{overflow:hidden; text-overflow:ellipsis; min-width:0}
.stepper .n{font-family:var(--mono); color:var(--accent)}
.stepper button{all:unset; cursor:pointer; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--st-ink); flex:none}
.stepper button:focus-visible{outline:2px solid var(--accent)}

/* écran vidéo (aperçu et lecteur) */
.screen{position:relative; aspect-ratio:16/9; max-width:100%; overflow:hidden; background:linear-gradient(135deg, var(--c, #2456E0), color-mix(in srgb, var(--c, #2456E0) 55%, #0B1430))}
.screen video{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:transparent}
.screen .vid-sound{all:unset; cursor:pointer; position:absolute; z-index:2; left:50%; top:12px; transform:translateX(-50%); padding:6px 14px; border-radius:999px; background:rgba(11,20,48,.78); color:#fff; font-weight:700; font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,.3)}
.screen .vid-sound:focus-visible{outline:2px solid #fff; outline-offset:2px}
.screen .vid-err{position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center; color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* aperçu au survol */
.preview{position:absolute; z-index:9; width:210px; border-radius:14px; overflow:hidden; pointer-events:none; opacity:0; transform:translateY(6px) scale(.97); transition:opacity .25s, transform .25s; box-shadow:0 18px 40px -18px rgba(10,30,80,.5)}
.preview.on{opacity:1; transform:none}
.preview .screen video{object-fit:cover}
.preview .cap{padding:8px 10px; font-size:12.5px; font-weight:700; background:var(--st-surface); color:var(--st-ink)}
.preview .cap span{display:block; line-height:1.3}
.preview .cap small{display:block; font-weight:500; color:var(--st-mute); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em}

/* lecteur incrusté */
.pip{position:absolute; z-index:10; width:420px; max-width:calc(100% - 32px); border-radius:16px; overflow:hidden; background:var(--st-surface); border:1px solid var(--st-line); box-shadow:0 30px 70px -26px rgba(10,30,80,.55); opacity:0; transform:scale(.9) translateY(20px); pointer-events:none; transition:opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), width .45s, left .45s, top .45s}
.pip.on{opacity:1; transform:none; pointer-events:auto}
.pip.dragging{transition:none}
.pip.big{left:16px !important; top:16px !important; width:calc(100% - 32px) !important; max-width:calc((100vh - 120px) * 16 / 9); max-width:calc((100dvh - 120px) * 16 / 9)}
.pip .bar{display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; cursor:move; touch-action:none}
.pip .bar b{flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pip .bar button, .card .x{all:unset; cursor:pointer; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--st-ink); flex:none}
.pip .bar button:hover, .card .x:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.pip button:focus-visible, .card button:focus-visible, .card a:focus-visible{outline:2px solid var(--accent)}
.pip .screen{background:#0B1430}
.pip .screen.failed{background:linear-gradient(135deg, var(--c, #2456E0), color-mix(in srgb, var(--c, #2456E0) 55%, #0B1430))}
.pip .ctl{display:flex; align-items:center; gap:10px; padding:8px 12px}
.pip .sub{flex:1; min-width:0; font-size:12.5px; color:var(--st-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pip .meta{font:500 11px var(--mono); color:var(--st-mute); white-space:nowrap; flex:none}

/* card (astuce, guide) */
.card{position:absolute; z-index:9; width:300px; max-width:calc(100% - 32px); border-radius:18px; background:var(--st-surface); border:1px solid var(--st-line); box-shadow:0 26px 60px -24px rgba(10,30,80,.5); padding:16px; display:flex; flex-direction:column; gap:10px; opacity:0; transform:scale(.92); transform-origin:left center; pointer-events:none; transition:opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1)}
.card.on{opacity:1; transform:none; pointer-events:auto}
.card .head{display:flex; gap:10px; align-items:flex-start}
.card .badge{font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--c)}
.card h3{font-size:17px; line-height:1.25}
.card p{margin:0; font-size:14px; color:var(--st-mute); user-select:text; -webkit-user-select:text}
.card .acts{display:flex; gap:8px; flex-wrap:wrap}
.btn{all:unset; cursor:pointer; padding:8px 12px; border-radius:10px; font-size:13px; font-weight:800}
.btn.pri{color:#fff; background:linear-gradient(135deg, #2456E0, #3AA6F0)}
.btn.sec{border:1px solid var(--st-line); color:var(--st-ink)}
.see{display:flex; flex-direction:column; gap:5px}
.see:empty{display:none}
.see h4{margin:2px 0 0; font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--st-mute)}
.see button{all:unset; cursor:pointer; display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; font-size:13px; font-weight:600}
.see button:hover, .see button:focus-visible{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.toast{position:absolute; z-index:12; left:50%; top:16px; transform:translate(-50%, calc(-100% - 40px)); transition:transform .4s cubic-bezier(.2,.8,.2,1); padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; background:var(--st-ink); color:var(--st-bg); max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.toast.on{transform:translate(-50%, 0)}

/* vue empilée (téléphone) */
.stack{position:absolute; inset:0; z-index:4; overflow:auto; padding:64px 14px calc(var(--askh, 0px) + 24px); display:none; flex-direction:column; gap:12px; touch-action:pan-y}
.stage.stacked .stack{display:flex}
.stage.stacked svg#map, .stage.stacked .zoomctl, .stage.stacked .results, .stage.stacked svg#tether{display:none}
.sbr{border-radius:16px; background:var(--st-surface); border:1px solid var(--st-line); overflow:hidden; flex:none}
.sbr > button{all:unset; cursor:pointer; display:flex; justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; padding:12px 14px; background:var(--c); color:#fff; font-weight:800; font-size:16px}
.sbr > button span{font:500 11px var(--mono); opacity:.85}
.sbr ul{list-style:none; margin:0; padding:4px 6px 6px}
.sbr li button{all:unset; cursor:pointer; display:flex; gap:10px; align-items:center; width:100%; box-sizing:border-box; padding:9px 8px; border-radius:10px; font-size:14px; font-weight:600}
.sbr li.lit button{background:color-mix(in srgb, var(--c) 14%, transparent)}
.sbr li.sel button{box-shadow:inset 0 0 0 2px var(--c)}
.sbr.closed ul{display:none}
.stack.querying .sbr li:not(.lit){opacity:.35}

/* entrée */
.entry{position:absolute; inset:0; z-index:13; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px 16px; overflow:auto; background:radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, #2456E0 14%, var(--st-bg)), var(--st-bg)); transition:opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1)}
.entry.gone{opacity:0; transform:scale(1.08); pointer-events:none; visibility:hidden; transition:opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s .8s}
.entry.pending{opacity:0; transition:none}
.entry-brand{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:-.01em}
.entry-brand svg{width:32px; height:32px}
.entry-brand b{font-weight:800; color:var(--accent)}
.entry h2{font-size:clamp(24px, 3.6vw, 40px); font-weight:800; letter-spacing:-.02em; text-align:center}
.entry p{margin:-10px 0 0; color:var(--st-mute); text-align:center}
.unis{display:grid; grid-template-columns:repeat(2, minmax(0, 260px)); gap:16px; width:100%; justify-content:center}
.uni{all:unset; cursor:pointer; border-radius:22px; padding:22px 20px; background:var(--st-surface); border:1px solid var(--st-line); display:flex; flex-direction:column; gap:10px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s}
.uni:hover, .uni:focus-visible{transform:translateY(-4px); border-color:#2456E0; box-shadow:0 22px 50px -22px rgba(36,86,224,.5)}
.uni .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center}
.uni b{font-family:var(--display); font-size:22px; font-weight:800}
.uni span{color:var(--st-mute); font-size:14px}
.load-err{color:#B4232F; font-weight:700; text-align:center}
.load-err[hidden]{display:none}

/* téléphone (≤ 640 px) */
.stage.phone .unis{grid-template-columns:1fr; max-width:420px}
.stage.phone .uni{padding:16px}
.stage.phone .brand{padding:5px 6px}
.stage.phone .brand span{display:none}
.stage.phone .trail{display:none}
.stage.phone .pip{left:10px !important; right:10px; top:58px !important; width:auto !important; max-width:none}
.stage.phone .pip.big{top:10px !important}
.stage.phone .card{left:10px !important; right:10px; top:auto !important; bottom:calc(10px + var(--askh, 0px)); width:auto; max-width:none; max-height:calc(100% - 140px); overflow:auto; transform-origin:center bottom}
.stage.phone .stepper{top:58px}
.stage.phone .stack{padding-bottom:calc(var(--askh, 0px) + 360px)}
.stage.phone.pipping .stack{padding-top:calc(78px + (100vw - 20px) * 9 / 16 + 80px)}
.stage.phone.pipping .stepper{top:calc(66px + (100vw - 20px) * 9 / 16 + 80px)}
.stage.phone .opt{display:none}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition-duration:.01s !important; transition-delay:0s !important; scroll-behavior:auto !important}
}
.stepper button:disabled{opacity:.35; cursor:default}