/* The Leap -- Keepsake.
   Soft cards on warm paper. No hard rules, no sharp display type.
   Every card is a door: it shows enough to decide, and opens into the whole thing. */

:root{
  --ground:#F2E7E6; --surface:#FFFCFC; --sunk:#F8EFEF;
  --ink:#2A1D24; --ink-2:#4C3A43; --muted:#9A838D; --rule:#EEDFE2;
  --accent:#8A3F60; --accent-soft:#F7E9EE; --accent-ink:#FFFCFC;
  --gold:#9A6A2C; --gold-soft:#FAF0E2;
  --sage:#4F7355; --sage-soft:#E9F1E9;
  --alert:#A6403A; --alert-soft:#FBE7E4;
  --r-card:18px; --r-tile:12px; --r-pill:999px;
  --lift:0 2px 5px rgba(42,29,36,.05), 0 12px 30px -14px rgba(42,29,36,.18);
  --lift-sm:0 1px 3px rgba(42,29,36,.06);
  --dockh:132px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#171015; --surface:#221820; --sunk:#1D141A;
    --ink:#F3E9EC; --ink-2:#CBB7C0; --muted:#907985; --rule:#33242C;
    --accent:#E49CB9; --accent-soft:#33222B; --accent-ink:#171015;
    --gold:#DCAC66; --gold-soft:#302315;
    --sage:#93C29D; --sage-soft:#1F2C20;
    --alert:#E69186; --alert-soft:#38211E;
    --lift:0 2px 6px rgba(0,0,0,.34), 0 14px 34px -16px rgba(0,0,0,.6);
    --lift-sm:0 1px 3px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#171015; --surface:#221820; --sunk:#1D141A;
  --ink:#F3E9EC; --ink-2:#CBB7C0; --muted:#907985; --rule:#33242C;
  --accent:#E49CB9; --accent-soft:#33222B; --accent-ink:#171015;
  --gold:#DCAC66; --gold-soft:#302315;
  --sage:#93C29D; --sage-soft:#1F2C20;
  --alert:#E69186; --alert-soft:#38211E;
  --lift:0 2px 6px rgba(0,0,0,.34), 0 14px 34px -16px rgba(0,0,0,.6);
  --lift-sm:0 1px 3px rgba(0,0,0,.3);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Karla,"Helvetica Neue",system-ui,sans-serif;
  font-size:15.5px; line-height:1.58; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--dockh) + 24px);
  overscroll-behavior-y:contain;
}
h1,h2,h3{font-family:"Bodoni Moda",Didot,Georgia,serif; font-weight:400; margin:0; line-height:1.18; text-wrap:balance}
#app{max-width:520px; margin:0 auto; padding:0 18px}

.eyebrow{display:block; font-family:"DM Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.tiny{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:"DM Mono",monospace}
.muted{color:var(--muted)} .small{font-size:13.5px}
.hide{display:none !important}

/* ---- header ---- */
header.top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:26px 6px 14px}
header.top .wk{font-family:"Bodoni Moda",Didot,serif; font-size:33px; line-height:1}
header.top .meta{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:right; line-height:1.5}

/* ---- the card: every section is one ---- */
.sec{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift);
  padding:20px 20px 18px; margin-bottom:14px}
.sec.flat{background:none; box-shadow:none; padding:4px 6px 10px; margin-bottom:6px}
.sec > h2{font-size:21px; margin-bottom:6px}
.sec > p.lede{color:var(--ink-2); margin:8px 0 0; font-size:14.5px; text-wrap:pretty}
.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:10px; align-items:center}
.row > .btn{flex:0 0 auto; white-space:nowrap}
.row-wrap{display:flex; gap:8px; flex-wrap:wrap}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}

/* a card you can open */
.door{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.door:active{transform:scale(.985)}

/* ---- his note ---- */
.note-card{position:relative; overflow:hidden}
.note-card::before{content:""; position:absolute; top:0; bottom:0; left:0; width:4px;
  background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent) 45%, var(--surface)))}
.affirm{font-family:"Bodoni Moda",Didot,serif; font-size:22px; line-height:1.42; color:var(--ink); text-wrap:pretty}
.affirm cite{display:block; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-style:normal; margin-top:14px}

/* ---- song row ---- */
.songrow{display:flex; align-items:center; gap:11px; margin-top:18px; padding-top:15px; border-top:1px solid var(--rule)}
.songrow .art{flex:0 0 auto; width:32px; height:32px; border-radius:var(--r-pill);
  background:linear-gradient(140deg,var(--art-a,#8A3F60),var(--art-b,#4F7355))}
.songrow .t{flex:1; min-width:0; line-height:1.3}
.songrow .t b{display:block; font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.songrow .t span{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.songrow .go{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-pill); background:var(--accent);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:11px;
  padding-left:2px; text-decoration:none}
.st-new{color:var(--gold)} .st-both{color:var(--sage)} .st-theirs{color:var(--accent)} .st-mine{color:var(--muted)}

/* ---- controls ---- */
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
.btn{appearance:none; border:none; background:var(--sunk); color:var(--ink);
  padding:11px 18px; border-radius:var(--r-pill); cursor:pointer; font-size:14px; font-weight:500;
  transition:filter .14s, background .14s}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.sm{padding:8px 14px; font-size:13px}
.btn[disabled]{opacity:.45}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.icon-btn{appearance:none; border:none; background:var(--accent); color:var(--accent-ink);
  width:42px; height:42px; border-radius:var(--r-pill); flex:0 0 auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:15px}
input[type=text],input[type=date],input[type=number],input[type=email],textarea,select{
  background:var(--sunk); border:none; border-radius:var(--r-pill); padding:12px 17px; width:100%}
textarea{border-radius:var(--r-tile); resize:vertical; min-height:110px; line-height:1.6}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:-2px}
input::placeholder,textarea::placeholder{color:var(--muted)}
label.fld{display:flex; flex-direction:column; gap:7px}
label.fld > span{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-left:4px}

.chip{appearance:none; cursor:pointer; border:1px solid var(--rule); background:transparent;
  color:var(--ink-2); padding:7px 15px; border-radius:var(--r-pill); font-size:13.5px; transition:all .14s}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:500}
.lnk{appearance:none; background:none; border:none; padding:0; cursor:pointer; color:var(--accent);
  font:inherit; text-decoration:underline; text-underline-offset:2px}

/* ---- back bar ---- */
.backbar{display:flex; align-items:center; gap:12px; padding:24px 6px 12px}
.backbar .chev{appearance:none; border:none; background:none; padding:4px; cursor:pointer; color:var(--accent);
  display:flex; align-items:center}
.backbar .chev svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.backbar h2{font-size:23px}

/* ---- lists ---- */
ul.plain{list-style:none; margin:0; padding:0}
ul.plain > li{display:flex; gap:12px; align-items:baseline; justify-content:space-between;
  padding:11px 0; border-top:1px solid var(--rule)}
ul.plain > li:first-child{border-top:none; padding-top:2px}
.entry-time{font-family:"DM Mono",monospace; font-size:10.5px; color:var(--muted); letter-spacing:.08em; white-space:nowrap}
.entry-time.full{color:var(--sage)}
.x{appearance:none; border:none; background:none; color:var(--muted); cursor:pointer; font-size:19px; line-height:1; padding:0 2px}
.x:hover{color:var(--alert)}
.empty{color:var(--muted); font-size:14px; font-style:italic; padding:10px 0}
.got{text-decoration:line-through; text-decoration-color:var(--sage); color:var(--muted)}

/* ---- schedule badges ---- */
.kind{display:inline-block; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); margin-right:8px;
  background:var(--sunk); color:var(--muted)}
.kind.k-scan{background:var(--accent-soft); color:var(--accent)}
.kind.k-test{background:var(--gold-soft); color:var(--gold)}
.kind.k-mark{background:var(--sage-soft); color:var(--sage)}
.kind.k-own{background:var(--sunk); color:var(--ink-2)}

/* ---- numbers ---- */
.big{font-family:"Bodoni Moda",Didot,serif; font-size:44px; line-height:.98}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tile{background:var(--surface); border-radius:var(--r-tile); box-shadow:var(--lift-sm); padding:14px 16px}
.tile b{display:block; font-family:"Bodoni Moda",Didot,serif; font-weight:400; font-size:24px; line-height:1.1; margin-top:4px}

/* ---- tables, softened ---- */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px}
table{border-collapse:collapse; width:100%; font-size:14px}
th{font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-align:left; font-weight:400; padding:0 12px 9px 0; white-space:nowrap}
td{padding:10px 12px 10px 0; border-top:1px solid var(--rule); vertical-align:top}
td.num{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
td.num.hit{color:var(--accent); font-weight:500}
th.hit{color:var(--accent)}
td.v-never{color:var(--alert); font-weight:500} td.v-fine{color:var(--sage)}
.target{display:grid; grid-template-columns:1fr auto; gap:3px 14px; padding:12px 0; border-top:1px solid var(--rule)}
.target:first-of-type{border-top:none}
.target b{font-weight:500}
.target .amt{font-family:"DM Mono",monospace; font-size:13px; color:var(--gold); white-space:nowrap; text-align:right}
.target .src{grid-column:1/-1; color:var(--muted); font-size:13.5px}
.facts{display:grid; grid-template-columns:auto 1fr; gap:11px 16px; align-items:baseline; margin:0}
.facts dt{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap}
.facts dd{margin:0; font-size:14.5px; color:var(--ink-2)}
.facts dd.catch{color:var(--alert)}

/* ---- callouts ---- */
.note{background:var(--sunk); border-radius:var(--r-tile); padding:14px 16px; font-size:14px; color:var(--ink-2)}
.warn{background:var(--alert-soft); border-radius:var(--r-tile); padding:14px 16px; font-size:14px}
.warn b{color:var(--alert)}
.ok{background:var(--sage-soft); border-radius:var(--r-tile); padding:14px 16px; font-size:14px; color:var(--ink-2)}
details summary{cursor:pointer; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:6px 0; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ "; color:var(--accent)}
details[open] summary::before{content:"\2212 "}
details summary:hover{color:var(--accent)}

/* ---- name deck ---- */
.card{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift); padding:22px 20px 16px}
.card .nm{font-family:"Bodoni Moda",Didot,serif; font-size:32px; line-height:1.1; display:block}
.card .pron{font-family:"DM Mono",monospace; font-size:12px; color:var(--gold); display:block; margin-top:3px}
.card .mean{color:var(--ink-2); font-size:14.5px; display:block; margin-top:10px; text-wrap:pretty}
.card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.card .tags span{font-size:11.5px; color:var(--muted); background:var(--sunk); padding:4px 11px; border-radius:var(--r-pill)}
.card .acts{display:flex; gap:9px; margin-top:16px}
.card .acts .btn{flex:1; justify-content:center; text-align:center}
.saved-name{font-family:"Bodoni Moda",Didot,serif; font-size:19px}

/* ---- water ---- */
.counter{display:flex; align-items:center; gap:14px}
.counter .val{font-family:"Bodoni Moda",Didot,serif; font-size:34px; min-width:46px}

/* ---- calendar ---- */
.cal{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift); overflow:hidden}
.cal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 8px}
.cal-head b{font-family:"Bodoni Moda",Didot,serif; font-weight:400; font-size:19px}
.cal-head button{appearance:none; border:none; background:var(--sunk); color:var(--ink); width:32px; height:32px;
  border-radius:var(--r-pill); cursor:pointer; font-size:15px; line-height:1}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); padding:2px 8px}
.cal-dow span{text-align:center; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:4px 8px 10px}
.cal-cell{position:relative; aspect-ratio:1; appearance:none; background:none; border:none;
  border-radius:var(--r-tile); cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; color:var(--ink); padding:0; overflow:hidden}
.cal-cell.out{cursor:default}
.cal-cell:active:not(.out){transform:scale(.94)}
.cal-cell.tday{box-shadow:inset 0 0 0 1.5px var(--gold)}
.cal-cell.sel{background:var(--accent); color:var(--accent-ink)}
.cal-cell .dnum{font-family:"DM Mono",monospace; font-size:12.5px; font-variant-numeric:tabular-nums; line-height:1}
.cal-cell .dots{display:flex; gap:2px; height:5px}
.cal-cell .dots i{width:4px; height:4px; border-radius:var(--r-pill); display:block}
.cal-cell .wknum{position:absolute; top:2px; left:4px; font-family:"DM Mono",monospace; font-size:7.5px; color:var(--muted)}
.cal-cell.sel .wknum{color:var(--accent-ink); opacity:.8}
.cal-cell.haspic{background-size:cover; background-position:center}
.cal-cell.haspic::before{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%)}
.cal-cell.haspic .dnum,.cal-cell.haspic .wknum{position:relative; z-index:1; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cal-cell.haspic .dots{position:relative; z-index:1}
.cal-cell.sel.haspic{box-shadow:inset 0 0 0 3px var(--accent)}
i.d-j{background:var(--accent)} i.d-m{background:var(--gold)} i.d-e{background:var(--sage)}
.cal-cell.sel .dots i{background:var(--accent-ink)}
.cal-key{display:flex; gap:14px; flex-wrap:wrap; padding:10px 14px 13px; border-top:1px solid var(--rule)}
.cal-key span{display:flex; align-items:center; gap:5px; font-family:"DM Mono",monospace; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cal-key i{width:6px; height:6px; border-radius:var(--r-pill); display:block}

/* ---- more: menu ---- */
.menu{display:flex; flex-direction:column; gap:10px}
.menu-item{appearance:none; background:var(--surface); border:none; border-radius:var(--r-card);
  box-shadow:var(--lift-sm); cursor:pointer; display:grid; grid-template-columns:1fr auto;
  gap:3px 12px; padding:16px 18px; text-align:left; color:var(--ink)}
.menu-item:active{transform:scale(.99)}
.mi-t{grid-column:1; grid-row:1; font-family:"Bodoni Moda",Didot,serif; font-size:20px; line-height:1.2}
.mi-d{grid-column:1; grid-row:2; color:var(--muted); font-size:13.5px}
.mi-a{grid-column:2; grid-row:1/3; align-self:center; font-size:20px; color:var(--muted)}
.mi-t .dot{display:inline-block; width:7px; height:7px; border-radius:var(--r-pill); background:var(--accent); margin-left:8px; vertical-align:middle}

/* ---- photos ---- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.gal figure{margin:0; position:relative; aspect-ratio:1; border-radius:var(--r-tile); overflow:hidden;
  background:var(--sunk); cursor:pointer}
.gal img,.gal video{width:100%; height:100%; object-fit:cover; display:block}
.gal .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none}
.gal .del{position:absolute; top:5px; right:5px; background:rgba(0,0,0,.5); color:#fff; border:none;
  border-radius:var(--r-pill); width:22px; height:22px; cursor:pointer; font-size:13px; line-height:1; padding:0}
.review{list-style:none; margin:14px 0 0; padding:0}
.review > li{border-top:1px solid var(--rule)}
.rv{display:grid; grid-template-columns:auto 58px 1fr; gap:12px; align-items:center; padding:10px 0; cursor:pointer}
.rv input{width:20px; height:20px; accent-color:var(--accent)}
.rv-th{width:58px; height:58px; border-radius:var(--r-tile); overflow:hidden; background:var(--sunk); display:block}
.rv-th img,.rv-th video{width:100%; height:100%; object-fit:cover; display:block}
.rv-meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.rv-meta b{font-weight:500; font-size:14.5px}
.rv-group{margin-top:18px}
.rv-date{display:flex; align-items:baseline; gap:10px; font-family:"Bodoni Moda",Didot,serif; font-size:17px;
  padding-bottom:5px; border-bottom:1px solid var(--rule)}
.rv-date span{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.q{font-family:"DM Mono",monospace; font-size:10.5px}
.q-good{color:var(--sage)} .q-ok{color:var(--gold)} .q-bad{color:var(--alert)}

/* ---- the thread ---- */
.thread{display:flex; flex-direction:column; gap:11px}
.bub{position:relative; max-width:80%; padding:13px 16px; display:flex; flex-direction:column; gap:6px}
.bub.theirs{align-self:flex-start; background:var(--surface); box-shadow:var(--lift-sm);
  border-radius:18px 18px 18px 6px}
.bub.mine{align-self:flex-end; background:var(--accent); color:var(--accent-ink);
  border-radius:18px 18px 6px 18px}
.bub-t{font-size:15px; line-height:1.45}
.bub.day .bub-t{white-space:pre-line; font-size:14px}
.bub-re{font-size:12.5px; font-style:italic; opacity:.78; padding-left:9px;
  border-left:2px solid currentColor; line-height:1.35}
.bub-day{font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; padding-bottom:5px; border-bottom:1px solid currentColor}
.bub-m{font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.62}
.bub-shots{display:flex; gap:5px; flex-wrap:wrap}
.bub-shots img{width:60px; height:60px; object-fit:cover; border-radius:8px; cursor:pointer; display:block}
.bub-song{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:var(--r-tile);
  background:rgba(0,0,0,.05); text-decoration:none; color:inherit}
.bub.mine .bub-song{background:rgba(255,255,255,.16)}
.bub-song .a{width:28px; height:28px; border-radius:6px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--art-a,#8A3F60),var(--art-b,#4F7355))}
.bub-song .n{flex:1; min-width:0; line-height:1.25}
.bub-song .n b{display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bub-song .n span{font-size:11px; opacity:.72}
.bub-x{position:absolute; top:3px; right:5px; opacity:0; color:inherit}
.bub:hover .bub-x{opacity:.7}
.daymark{text-align:center; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:4px 0}

/* ---- dock: player + tabs, one block ---- */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:45; padding:0 10px 10px;
  max-width:540px; margin:0 auto}
.lane{display:flex; align-items:center; gap:11px; background:#241A1F; color:#F3E9EC;
  border-radius:16px 16px 6px 6px; padding:9px 14px; animation:lanein .22s ease-out}
.lane.hide{display:none !important}
@keyframes lanein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.lane-go{flex:1; min-width:0; display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.lane-art{flex:0 0 auto; width:34px; height:34px; border-radius:8px; display:flex; align-items:flex-end;
  justify-content:center; gap:2.5px; padding-bottom:8px;
  background:linear-gradient(140deg,var(--art-a,#8A3F60),var(--art-b,#4F7355))}
.lane-art i{width:3px; height:6px; background:rgba(255,255,255,.92); border-radius:1px; display:block;
  animation:eq .9s ease-in-out infinite}
.lane-art i:nth-child(2){animation-delay:.18s; height:12px}
.lane-art i:nth-child(3){animation-delay:.36s; height:8px}
@keyframes eq{0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1.7)}}
.lane-txt{display:flex; flex-direction:column; min-width:0; line-height:1.32}
.lane-txt b{font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lane-txt span{font-size:11.5px; color:#A8949C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lane-mark{flex:0 0 auto; color:var(--sage); font-size:14px; padding-left:4px}

nav.tabs{display:flex; justify-content:center; background:var(--surface);
  border-radius:6px 6px var(--r-card) var(--r-card); box-shadow:var(--lift-sm);
  padding:9px 0 calc(10px + env(safe-area-inset-bottom))}
nav.tabs button{position:relative; appearance:none; border:none; background:none; cursor:pointer;
  flex:1; max-width:100px; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
nav.tabs button[aria-current="true"]{color:var(--accent)}
nav.tabs svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.tab-dot{position:absolute; top:-2px; right:calc(50% - 15px); width:6px; height:6px;
  border-radius:var(--r-pill); background:var(--accent); display:block}

/* ---- capture ---- */
.fab{position:fixed; right:22px; bottom:calc(var(--dockh) + 12px); z-index:50;
  width:56px; height:56px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 5px 16px rgba(42,29,36,.26), 0 1px 3px rgba(42,29,36,.2);
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.fab svg{width:25px; height:25px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.fab:active{transform:scale(.92)}
.fab.busy{pointer-events:none} .fab.busy svg{opacity:.35}

/* ---- slideshow ---- */
#show{position:fixed; inset:0; z-index:100; background:#0D0A0C; display:flex; flex-direction:column}
#show.hide{display:none !important}
.show-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.show-stage img,.show-stage video{max-width:100%; max-height:100%; object-fit:contain; display:block}
.show-stage img.kb{animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1.02)} to{transform:scale(1.1)}}
.show-cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 18px 0;
  color:#E9DDE2; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.show-cap b{font-family:"Bodoni Moda",Didot,serif; font-size:17px; letter-spacing:0; text-transform:none; font-weight:400}
.show-bar{display:flex; justify-content:center; gap:10px; padding:14px 0 max(18px, env(safe-area-inset-bottom))}
.sb{appearance:none; background:rgba(255,255,255,.1); border:none; color:#F3EAEE;
  width:46px; height:42px; border-radius:var(--r-tile); cursor:pointer; font-size:16px}

/* ---- first run ---- */
#guide{position:fixed; inset:0; z-index:110; background:rgba(23,16,21,.72);
  backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; padding:20px}
#guide.hide{display:none !important}
.guide-card{background:var(--surface); border-radius:24px; box-shadow:var(--lift); padding:26px 24px 20px;
  max-width:420px; width:100%; animation:up .3s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
.guide-card h2{font-size:24px; margin-bottom:6px}
.guide-step{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--rule)}
.guide-step:first-of-type{border-top:none}
.guide-ico{flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-pill); background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center}
.guide-ico svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.guide-step b{display:block; font-weight:500; font-size:15px}
.guide-step span{color:var(--muted); font-size:13.5px}
.guide-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px}
.guide-foot label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); cursor:pointer}
.guide-foot input{width:18px; height:18px; accent-color:var(--accent)}
.guide-dots{display:flex; gap:6px; justify-content:center; margin-top:18px}
.guide-dots i{width:6px; height:6px; border-radius:var(--r-pill); background:var(--rule); transition:background .2s, width .2s}
.guide-dots i.on{background:var(--accent); width:18px}
.guide-nav{display:flex; gap:8px; align-items:center}
.guide-card .eyebrow{margin-bottom:8px}
.guide-act{margin-top:16px}
.guide-act .btn{width:100%; justify-content:center; text-align:center}
/* While it is walking her through, the screen behind the card is the point --
   so the backdrop lifts and the card clears the tab bar. */
body.touring #guide{background:rgba(23,16,21,.42); backdrop-filter:none;
  padding-bottom:calc(var(--dockh) + 12px)}
@media (prefers-color-scheme: dark){ body.touring #guide{background:rgba(0,0,0,.5)} }

/* ---- sign in ---- */
.gate{max-width:420px; margin:0 auto; padding:70px 22px}
.gate h1{font-size:40px; margin-bottom:8px}

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