@font-face{font-family:"Marcellus";src:url(fonts/marcellus-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mentor Digits";src:url(fonts/newsreader-variable.woff2) format("woff2");font-weight:200 800;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-variable.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Layout: one-column phone app. Sticky header, a view per tab, a bottom tab bar; Swipe opens full screen over everything. Desktop centres a 520px column. */
:root{
  --bg:#F0EDE6; --surface:#FBF9F4; --ink:#2A2224; --muted:#6E6461; --line:#D9D2C7;
  --accent:#8C363F; --fill:#8C363F; --on-accent:#F6F1E7; --soft:#E8E1D6; --edge:#8F857D; --scrim:rgba(42,34,36,.45);
  --good:#4E7D59; --bad:#A4473F; --warm:#85621A;
  --f-display:'Mentor Digits', 'Marcellus', Georgia, serif;
  --f-body:'Newsreader', Georgia, serif;
  --f-ui:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
    --accent:#E09A9F; --fill:#8C363F; --on-accent:#F6F1E7; --soft:#302829; --edge:#7D716D; --scrim:rgba(0,0,0,.6);
    --good:#6FA77C; --bad:#D07467; --warm:#C99F42; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
  --accent:#E09A9F; --fill:#8C363F; --on-accent:#F6F1E7; --soft:#302829; --edge:#7D716D; --scrim:rgba(0,0,0,.6);
  --good:#6FA77C; --bad:#D07467; --warm:#C99F42; color-scheme:dark;
}
body[data-bt="sail"]{
  --bg:#F0EDE6; --surface:#FBF9F4; --ink:#2A2224; --muted:#6E6461; --line:#D9D2C7;
  --accent:#8C363F; --fill:#8C363F; --on-accent:#F6F1E7; --soft:#E8E1D6; --edge:#8F857D; --scrim:rgba(42,34,36,.45);
  --good:#4E7D59; --bad:#A4473F; --warm:#85621A; color-scheme:light;
}
body[data-bt="dark"]{
  --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
  --accent:#E09A9F; --fill:#8C363F; --on-accent:#F6F1E7; --soft:#302829; --edge:#7D716D; --scrim:rgba(0,0,0,.6);
  --good:#6FA77C; --bad:#D07467; --warm:#C99F42; color-scheme:dark;
}
body[data-bt="canopus"]{
  --bg:#000; --surface:#0E0D0C; --ink:#F0EDE6; --muted:#A8A196; --line:#2A2825;
  --accent:#F0EDE6; --fill:#F0EDE6; --on-accent:#000; --soft:#171614; --edge:#6B655D; --scrim:rgba(0,0,0,.7);
  --good:#7DB38C; --bad:#D9877B; --warm:#D2AE5E; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:17px; line-height:1.5;
  font-variant-numeric:lining-nums tabular-nums; -webkit-tap-highlight-color:transparent}
input,select,textarea,button{font:inherit; font-variant-numeric:lining-nums tabular-nums; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
#sky{position:fixed; inset:0; z-index:0; pointer-events:none}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}

.shell{position:relative; z-index:1; max-width:560px; margin:0 auto; min-height:100%;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:0 calc(88px + env(safe-area-inset-bottom,0px))}
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg);
  display:flex; align-items:center; justify-content:space-between; padding-block:14px 10px; border-bottom:1px solid var(--line)}
.mark{display:flex; flex-direction:column; line-height:1}
.mark b{font-family:var(--f-display); font-weight:400; font-size:22px; letter-spacing:.14em; color:var(--accent)}
.mark small{font-family:var(--f-display); font-size:9px; letter-spacing:.32em; color:var(--muted); margin-top:4px}
.brand{display:flex; align-items:center; gap:10px}
.owl{width:40px; height:40px; border-radius:10px; flex:none}
.sync{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:12px; font-weight:600}
.sync svg{width:16px; height:16px; color:var(--good)}
.sync.off svg{color:var(--warm)}
.devices{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.device{border:1px solid var(--line); border-radius:12px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:13px; background:var(--bg)}
.device svg{width:26px; height:26px; color:var(--accent)}
.device small{color:var(--muted); font-size:11px}
.device.here{border-color:var(--accent)}
.toggle{display:flex; align-items:flex-start; gap:12px; padding:10px 0}
.toggle input{width:22px; height:22px; accent-color:var(--accent); flex:none; margin-top:2px}
.toggle small{display:block; color:var(--muted); font-size:13px}
.menu{display:flex; flex-direction:column}
.menu button{display:flex; align-items:center; gap:12px; min-height:52px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; padding:0 4px}
.menu button:last-child{border-bottom:0}
.menu svg{width:20px; height:20px; color:var(--muted); flex:none}
.menu .chev{margin-left:auto}
.notice{font-size:12px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:8px 12px}
.iconbtn{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.iconbtn svg{width:20px; height:20px}

h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0}
h1{font-size:28px; line-height:1.15}
h2{font-size:21px; line-height:1.2}
h3{font-size:17px}
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.muted{color:var(--muted)}
.view{display:flex; flex-direction:column; gap:16px; padding-top:20px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px}
.btn{min-height:48px; padding:0 20px; border-radius:24px; border:1px solid var(--fill); background:var(--fill); color:var(--on-accent); font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn.ghost{background:transparent; color:var(--accent)}
.btn svg{width:18px; height:18px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row.split{justify-content:space-between}

/* Today */
.hero{display:flex; flex-direction:column; gap:6px}
.hero p{margin:0; font-family:var(--f-body); font-size:18px; color:var(--muted)}
.swipecta{position:relative; overflow:hidden; background:var(--fill); color:var(--on-accent); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:14px; border:0; text-align:left}
.swipecta .stack{position:absolute; right:16px; top:16px; width:72px; height:96px}
.swipecta h2,.swipecta p{max-width:calc(100% - 96px)}
@media (min-width:700px){ .swipecta .stack{width:96px; height:128px; right:24px; top:20px} .swipecta h2,.swipecta p{max-width:calc(100% - 140px)} }
.swipecta .stack i{position:absolute; inset:0; border:1.5px solid currentColor; border-radius:9px; opacity:.35}
.swipecta .stack i:nth-child(2){transform:translate(-6px,6px); opacity:.6}
.swipecta .stack i:nth-child(3){transform:translate(-12px,12px); opacity:1; background:var(--surface); color:var(--ink); border-color:var(--surface); display:flex; align-items:center; padding:8px; font-family:var(--f-body); font-size:10px; line-height:1.3; font-style:normal}
.swipecta h2{font-size:24px; max-width:70%}
.swipecta p{margin:0; opacity:.85; max-width:75%}
.swipecta .go{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end; height:70px}
.week div{display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end}
.week span{display:block; width:100%; max-width:26px; border-radius:6px 6px 3px 3px; background:var(--fill); min-height:4px}
.week span.zero{background:var(--line)}
.week span.rest{background:transparent; border:1.5px dashed var(--line)}
.week em{font-style:normal; font-size:11px; color:var(--muted)}
.week .today em{color:var(--ink); font-weight:700}
.next{display:flex; gap:14px; align-items:center; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; width:100%}
.next .num{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--accent); color:var(--accent); font-family:var(--f-display); font-size:16px}
.next .txt{min-width:0; flex:1}
.next .txt b{display:block; font-weight:600}
.next .txt small{color:var(--muted)}
.next svg{flex:none; width:20px; height:20px; color:var(--muted)}

.track{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.seg{height:10px; border-radius:3px; border:0; padding:0; background:var(--line); cursor:pointer}
.seg.on{background:var(--accent)}
.seg.next{background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn,.opt,.next,.swipecta,.choice,.mod,.iconbtn{transition:transform .12s ease}
.btn:active,.opt:active:not(:disabled),.next:active,.swipecta:active,.choice:active,.iconbtn:active{transform:scale(.98)}
@media (prefers-reduced-motion: reduce){ .btn,.opt,.next,.swipecta,.choice,.mod,.iconbtn{transition:none} }
.tin{width:100%; min-height:52px; padding:0 14px; border-radius:10px; border:1px solid var(--edge); background:var(--bg)}
.ifthen{display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center}
.ifthen b{font-family:var(--f-display); font-weight:400; font-size:17px; color:var(--accent)}
.ifthen input{min-height:48px; padding:0 12px; border-radius:10px; border:1px solid var(--edge); background:var(--bg); width:100%}
.cues{display:flex; flex-wrap:wrap; gap:8px}
.cue{min-height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--edge); background:var(--bg); font-size:14px}
.cue[aria-pressed="true"]{background:var(--fill); color:var(--on-accent); border-color:var(--fill)}
.why{font-family:var(--f-body); font-size:18px; margin:0}
.speed{min-height:48px; min-width:64px; border-radius:24px; border:1px solid var(--edge); background:var(--surface); font-weight:700}
/* Evidence meter */
.ev{display:flex; flex-direction:column; gap:10px}
.evrow{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start}
.meter{display:flex; gap:3px; padding-top:5px}
.meter i{width:14px; height:8px; border-radius:2px; background:var(--line)}
.meter i.on{background:var(--accent)}
.meter i.half{background:linear-gradient(90deg,var(--accent) 50%,var(--line) 50%)}
.evrow b{font-weight:600; font-size:15px}
.evrow small{grid-column:2; color:var(--muted); font-size:13px}
.evlabel{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* Lesson */
.lessonhead{display:flex; flex-direction:column; gap:8px}
.meta{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--surface)}
.read{font-family:var(--f-body); font-size:19px; line-height:1.6; max-width:65ch}
.read p{margin:0 0 1em}
.read p.speaking{background:var(--soft); border-radius:6px; box-shadow:0 0 0 6px var(--soft)}
.back{display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--muted); padding:8px 0; min-height:44px; font-weight:600}
.back svg{width:18px; height:18px}
.q{display:flex; flex-direction:column; gap:10px}
.q p{margin:0; font-family:var(--f-body); font-size:19px}
.opt{min-height:52px; text-align:left; padding:12px 16px; border-radius:12px; border:1.5px solid var(--edge); background:var(--surface); display:flex; align-items:center; gap:10px}
.opt.right{border-color:var(--good); border-width:2px; background:color-mix(in srgb, var(--good) 14%, var(--surface))}
.opt .mk{margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; flex:none}
.opt .mk svg{width:18px; height:18px}
.opt.right .mk{color:var(--good)}
.opt.wrong{border-color:var(--muted); border-style:dashed; background:var(--surface)}
.opt.wrong .mk{color:var(--muted)}
.opt:disabled{cursor:default; color:inherit}
.explain{margin:0; font-size:15px; color:var(--ink); padding:10px 14px; border-left:3px solid var(--accent); background:var(--soft); border-radius:0 8px 8px 0}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.steps label{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); cursor:pointer}
.steps input{width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:none}
textarea{width:100%; min-height:110px; padding:12px; border-radius:10px; border:1px solid var(--edge); background:var(--bg); resize:vertical}
.sources{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px}
.sources a{color:var(--accent)}
.sources small{color:var(--muted)}

/* Course map */
.level{display:flex; flex-direction:column; gap:10px}
.level header{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.mods{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mod{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface)}
.mod .code{flex:none; font-family:var(--f-display); color:var(--accent); width:28px}
.mod .t{flex:1; min-width:0}
.mod .t small{display:block; color:var(--muted); font-size:13px}
.mod.locked{background:transparent}
.mod.locked .code{color:var(--muted)}
.mod svg{width:16px; height:16px; color:var(--muted); flex:none}
.lessons{list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); margin-left:26px; display:flex; flex-direction:column; gap:4px}
.lessons button{width:100%; text-align:left; display:flex; gap:10px; align-items:center; border:0; background:none; padding:10px 6px; min-height:44px; border-radius:8px}
.lessons button:hover{background:var(--soft)}
.dot{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center}
.dot.done{background:var(--fill); border-color:var(--fill); color:var(--on-accent)}
.dot svg{width:12px; height:12px}
.prog{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.prog i{display:block; height:100%; background:var(--accent)}

/* Settings */
.choices{display:flex; flex-direction:column; gap:6px}
.choice{display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); text-align:left; width:100%}
.choice svg{width:20px; height:20px; flex:none}
.choice .tick{margin-left:auto; color:var(--accent); visibility:hidden}
.choice[aria-checked="true"]{border-color:var(--accent)}
.choice[aria-checked="true"] .tick{visibility:visible}
.choice small{display:block; color:var(--muted); font-size:13px}
.field{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px}
.field input,.field select{min-height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--edge); background:var(--bg)}

/* Tabs */
nav.tabs{position:fixed; left:0; right:0; bottom:0; z-index:6; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px)}
nav.tabs div{max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr)}
nav.tabs button{border:0; background:none; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:12px; font-weight:600}
nav.tabs button svg{width:22px; height:22px}
nav.tabs button[aria-current="page"]{color:var(--accent)}

/* Swipe */
#swipe{position:fixed; inset:0; z-index:20; background:var(--bg); display:flex; flex-direction:column}
#swipe .sbar{display:flex; align-items:center; gap:12px; padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:10px;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); max-width:560px; width:100%; margin:0 auto}
#swipe .count{font-size:13px; color:var(--muted); font-weight:600; min-width:52px; text-align:right}
.pips{flex:1; display:flex; gap:3px}
.pips i{flex:1; height:4px; border-radius:2px; background:var(--line)}
.pips i.on{background:var(--accent)}
#deck{flex:1; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; scrollbar-width:none}
#deck::-webkit-scrollbar{display:none}
.slide{height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center;
  padding-block:8px calc(20px + env(safe-area-inset-bottom,0px)); padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.card{width:100%; max-width:480px; height:100%; max-height:640px; border-radius:24px; background:var(--surface); border:1px solid var(--line);
  padding:26px 24px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden}
.card .kind{display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.card .kind svg{width:16px; height:16px}
.card .body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; min-height:0; overflow-y:auto}
.card h2{font-size:30px; line-height:1.15}
.card p.big{margin:0; font-family:var(--f-body); font-size:23px; line-height:1.45}
.card .src{font-size:12px; color:var(--muted)}
.card .hint{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; justify-content:center}
.card .hint svg{width:16px; height:16px; animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.card.myth .mythline{font-family:var(--f-display); font-size:26px; text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:2px; color:var(--muted)}
.card.example{background:var(--fill); color:var(--on-accent); border-color:var(--fill)}
.card.example .kind{color:var(--on-accent); opacity:.85}
.card.example .src{color:var(--on-accent); opacity:.75}
.card.try{border:2px dashed var(--accent)}
.card.recall .kind{color:var(--warm)}
.card .reveal{min-height:48px; border-radius:12px; border:1.5px dashed var(--line); background:var(--bg); font-weight:600; color:var(--accent)}
.card .lessonlink{align-self:flex-start; border:0; background:none; color:var(--muted); font-size:13px; font-weight:600; padding:6px 0; min-height:36px; text-decoration:underline; text-underline-offset:3px}
.endcard{text-align:center; align-items:center}
.endcard .body{align-items:center}
.ring{width:110px; height:110px}
@media (prefers-reduced-motion: reduce){ .card .hint svg{animation:none} #deck{scroll-behavior:auto} }
@media (min-width:700px){ .card{max-height:680px} }

/* Wide screens: tablet gets a wider column; desktop gets a side rail */
@media (min-width:700px){
  .shell{max-width:720px}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
}
@media (min-width:1000px){
  nav.tabs{top:0; bottom:0; right:auto; width:232px; border-top:0; border-right:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
  nav.tabs div{grid-template-columns:1fr; max-width:none; padding:96px 14px 0; gap:4px}
  nav.tabs button{flex-direction:row; justify-content:flex-start; gap:12px; min-height:48px; padding:0 14px; border-radius:12px; font-size:15px}
  nav.tabs button[aria-current="page"]{background:var(--soft)}
  .shell{max-width:none; margin:0 0 0 232px; padding-left:48px; padding-right:max(48px, env(safe-area-inset-right,0px)); padding-block:0 48px}
  .shell>main,.shell>header,.shell>footer{max-width:820px}
  .toast{bottom:32px}
  .kbd{display:inline-flex !important}
}
.kbd{display:none; gap:6px; align-items:center; font-size:12px; color:var(--muted)}
.kbd kbd{font-family:var(--f-ui); font-size:11px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; background:var(--surface)}
/* sheet */
.sheet{position:fixed; inset:0; z-index:30; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center}
.sheet>div{background:var(--surface); width:100%; max-width:560px; border-radius:20px 20px 0 0; padding:20px max(16px, env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:6px}
.toast{position:fixed; left:16px; right:16px; margin:0 auto; width:fit-content; max-width:min(520px, calc(100vw - 32px)); bottom:calc(80px + env(safe-area-inset-bottom,0px));
  z-index:40; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:14px; font-weight:600; font-size:14px}
footer.about{font-size:12px; color:var(--muted); text-align:center; padding:20px 0}
footer.about button{border:0; background:none; color:var(--muted); text-decoration:underline; padding:4px}
/* Real app additions */
.btn.danger{background:transparent; color:var(--ink); border:1.5px dashed var(--ink)}
.btn.danger svg{width:18px; height:18px}
.changes{max-height:min(80vh,640px); overflow-y:auto}
.chlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:15px}
.chtag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); margin-right:4px}
.toastbtn{border:0; background:none; color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; padding:4px 2px; margin-left:6px}
.updbar{position:fixed; left:16px; right:16px; margin:0 auto; width:fit-content; max-width:min(520px, calc(100vw - 32px)); bottom:calc(80px + env(safe-area-inset-bottom,0px)); z-index:45;
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--edge); border-radius:14px; padding:10px 12px 10px 16px; font-size:15px; box-shadow:0 6px 24px rgba(0,0,0,.12)}
.updbar .btn{min-height:40px; white-space:nowrap}
@media (min-width:1000px){ .updbar{bottom:32px} }
.iconbtn .ar-menuic{width:22px; height:22px}
@media (max-width:480px){ .sync .lbl{display:none} .sync{padding:0; width:44px; height:44px; justify-content:center; border-radius:50%} }
/* Marcellus has old-style figures: numbers shown on their own use the reading face with lining figures */
.next .num,.mod .code,.kpi b{font-family:var(--f-ui); font-weight:600; font-variant-numeric:lining-nums tabular-nums}