/* Copied unchanged from Midas (Midas Agent/lens-src/Index.src.html) on 2026-10-27 by tools/vendor-midas.js. Edit the archive's own files, not this one. */
  /* Midas (the Lens project), v8. One file: no outside fonts, scripts, images or sounds (the logo is inside this file, the sounds are
     synthesised here), so nothing about the page or the data leaves Google and nothing outside can change what runs. */
  :root {
    --paper: #efeee9; --card: #ffffff; --ink: #121212; --ink2: #55585e; --ink3: #8d9097; --ink4: #c4c5c8; --line: #e4e2dc;
    --gold: #f5b800; --gold-ink: #946c00; --gold-soft: #fff4d1; --black: #141414; --red: #d6463a; --green: #2f9a62;
    --r: 22px; --shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(30, 30, 30, .16);
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    color-scheme: light;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* no page zoom: pinch and double-tap only scroll; the map has its own pinch (day / week / month / quarter) */
  html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper) radial-gradient(1200px 500px at 70% -10%, #fff 0%, rgba(255, 255, 255, 0) 70%) no-repeat; color: var(--ink); font: 15px/1.45 var(--sans); min-height: 100vh; overflow-x: hidden; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  h1, h2, h3, p { margin: 0; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }

  /* top bar */
  .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 0; background: linear-gradient(var(--paper) 70%, rgba(239, 238, 233, 0)); }
  .brand { display: flex; align-items: center; gap: 10px; }
  .logo { width: 34px; height: 34px; border-radius: 50%; background: #0b0b0b url(/logo.jpg) center / cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); flex: 0 0 auto; }
  .brand b { font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
  .brand span { color: var(--ink3); font-size: 13px; }
  .tools { margin-left: auto; display: flex; gap: 6px; }
  .ib { width: 38px; height: 38px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; }
  .ib svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ib.on { background: var(--black); } .ib.on svg { stroke: var(--gold); }
  .ib { position: relative; } .ib.mus::after { content: "♪"; position: absolute; right: -2px; top: -4px; font-size: 12px; color: var(--gold-ink); background: var(--gold); color: #000; width: 16px; height: 16px; border-radius: 50%; line-height: 16px; text-align: center; } .ib[hidden] { display: none; }

  .grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 980px) { .grid { grid-template-columns: 1.25fr 1fr; } .span { grid-column: 1 / -1; } }
  .card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; min-width: 0; border: 1px solid rgba(0, 0, 0, .035); }
  .card.dark { background: var(--black); color: #f4f2ec; border-color: #000; }
  .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .hd h2 { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
  .hd .sub { color: var(--ink3); font-size: 13px; }
  .hd .more { margin-left: auto; font-size: 13px; color: var(--ink2); white-space: nowrap; }
  .dark .hd .sub, .dark .hd .more { color: #a4a29c; }
  .kick { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }

  /* needs you */
  .need { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid #2a2a2a; width: 100%; text-align: left; }
  .need:first-of-type { border-top: 0; }
  .need .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
  .need .t { flex: 1; min-width: 0; } .need .t small { display: block; color: #a4a29c; font-size: 12px; }
  .need .sev { font: 600 10px/1 var(--mono); letter-spacing: .1em; padding: 4px 6px; border-radius: 6px; background: #2b2b2b; color: #d9d6cf; }
  .need .sev.hi { background: var(--gold); color: #000; }

  @keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  /* explore: the map */
  .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
  .crumbs button { font-size: 14px; color: var(--ink2); padding: 5px 2px; }
  .crumbs button.cur { color: var(--ink); font-weight: 650; }
  .crumbs .sep { color: var(--ink4); }
  .crumbs .backb { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; margin-right: 4px; }
  .ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
  .seg { display: inline-flex; background: var(--paper); border-radius: 999px; padding: 3px; }
  .seg button { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--ink2); }
  .seg button.on { background: var(--black); color: #fff; }
  .step { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
  .step button { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); font-size: 17px; }
  .step button:disabled { opacity: .3; }
  .step span { font-size: 14px; font-weight: 600; min-width: 132px; text-align: center; }
  .explore { display: grid; grid-template-columns: 1fr; gap: 6px; }
  @media (min-width: 980px) { .explore { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; } }
  .mapwrap { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  #map { width: 100%; max-width: 560px; display: block; margin: 0 auto; aspect-ratio: 1; overflow: visible; }
  #map .nd { transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s; cursor: pointer; }
  #map .nd circle.b { transition: r .55s cubic-bezier(.2, .8, .2, 1), fill .4s, stroke .4s; }
  #map .nd.out { opacity: 0; }
  #map text { font-family: var(--sans); pointer-events: none; }
  #map .lk { animation: fin .5s .35s both; }
  @keyframes fin { from { opacity: 0; } to { opacity: 1; } }
  .maphint { text-align: center; color: var(--ink3); font-size: 12px; margin-top: 2px; }

  .ins { display: flex; flex-direction: column; gap: 2px; }
  .in { display: flex; gap: 11px; padding: 11px 4px; border-top: 1px solid var(--line); text-align: left; width: 100%; }
  .in:first-child { border-top: 0; }
  .in .ic { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
  .in .ic.good { background: #e3f4ea; color: var(--green); } .in .ic.bad { background: #fbe6e3; color: var(--red); }
  .in .ic.info { background: var(--paper); color: var(--ink2); } .in .ic.warn { background: var(--gold-soft); color: var(--gold-ink); }
  .in .ic.quote { background: var(--black); color: var(--gold); }
  .in .tx { flex: 1; min-width: 0; } .in .tx small { display: block; color: var(--ink3); font-size: 12px; margin-top: 2px; }
  .in .go { color: var(--ink4); align-self: center; }
  .showmore { margin-top: 6px; font-size: 13px; color: var(--ink2); padding: 8px 4px; }

  /* charts */
  .minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 700px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mini { background: var(--paper); border-radius: 16px; padding: 12px 12px 6px; text-align: left; min-width: 0; }
  .mini .k { font-size: 12px; color: var(--ink2); display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
  .mini .k i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .mini .v { font-size: 18px; font-weight: 650; margin: 2px 0 2px; font-variant-numeric: tabular-nums; }
  .mini .v small { font-size: 12px; color: var(--ink3); font-weight: 500; }
  .mini svg, .big svg { width: 100%; display: block; overflow: visible; }
  .bar { cursor: pointer; }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
  .chip { padding: 6px 11px; border-radius: 999px; background: var(--paper); font-size: 12.5px; color: var(--ink2); }
  .chip.on { background: var(--black); color: #fff; }
  .note { font-size: 12px; color: var(--ink3); margin-top: 8px; }

  /* twins */
  .twin svg { width: 100%; display: block; }

  .how { font-size: 12.5px; color: var(--ink2); background: var(--paper); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }

  /* ahead, trips */
  .day { padding: 10px 0; border-top: 1px solid var(--line); }
  .day:first-child { border-top: 0; }
  .day h3 { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
  .it { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 2px 0; }
  .it i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; transform: translateY(-1px); }
  .it small { color: var(--ink3); margin-left: auto; white-space: nowrap; font-size: 12px; }
  .trip { padding: 12px 0; border-top: 1px solid var(--line); }
  .trip:first-child { border-top: 0; }

  .trip .nt { font-size: 12px; color: var(--ink3); margin-top: 4px; }

  /* progress */
  .prog { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }

  .badge { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); }
  .badge.no { background: var(--paper); color: var(--ink3); }

  footer { color: var(--ink3); font-size: 12.5px; line-height: 1.55; padding: 18px 4px 0; }
  footer b { color: var(--ink2); font-weight: 600; }
  footer details { margin-top: 8px; } footer summary { cursor: pointer; color: var(--ink2); }

  .brand #chap { color: var(--ink3); font-size: 13px; transition: opacity .3s, transform .3s; display: inline-block; }
  .brand #chap.swap { opacity: 0; transform: translateY(-6px); }
  .rv { opacity: 0; }
  .rv.seen { opacity: 1; transform: none; }

  /* overview: a sentence, then the days (or weeks, months) that make up the period */
  .headline { margin: 12px 2px 4px; font-size: 16px; line-height: 1.5; color: var(--ink2); }
  .headline b { color: var(--ink); font-weight: 650; }
  .headline .up { color: var(--green); font-weight: 600; } .headline .dn { color: var(--red); font-weight: 600; }
  .strip { display: flex; gap: 6px; margin: 10px 0 2px; }
  .sd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 6px; border-radius: 12px; background: var(--paper); }
  .sd .sl { font-size: 11px; color: var(--ink2); white-space: nowrap; }
  .sd .sb { width: 70%; max-width: 30px; height: 34px; border-radius: 6px; background: #e3e1da; position: relative; overflow: hidden; }
  .sd .sb i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--black); border-radius: 6px 6px 0 0; transition: height .5s; }
  .sd .sv { font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .sd.sel { background: var(--black); } .sd.sel .sl, .sd.sel .sv { color: #fff; } .sd.sel .sb { background: #3a3a3a; } .sd.sel .sb i { background: var(--gold); }
  .sd.today .sl { color: var(--gold-ink); font-weight: 700; } .sd.sel.today .sl { color: var(--gold); }
  .sd.fut { opacity: .45; } .sd.none .sv { color: var(--ink3); font-weight: 500; }

  .avs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 6px; margin-top: 12px; }
  .av { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
  .av .face { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wc, #ccc); position: relative; }
  .av .face.never { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #dcdad3; }
  .av .nm { font-size: 12px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .av .ag { font-size: 10.5px; color: var(--ink3); }
  .av.on .face { outline: 3px solid var(--gold); outline-offset: 5px; }
  .pcard { margin-top: 14px; background: var(--paper); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
  .pcard .face { width: 64px; height: 64px; font-size: 20px; }
  .pcard h3 { font-size: 18px; } .pcard p { font-size: 13px; color: var(--ink2); margin-top: 2px; }
  .lockg { margin-top: 10px; font-size: 13px; color: var(--ink2); background: var(--paper); border-radius: 12px; padding: 10px 12px; }
  .lockg button { font-weight: 650; color: var(--ink); text-decoration: underline; }

  .tag { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--black); color: #fff; font: 700 11px/26px var(--mono); text-align: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .25); transition: opacity .25s, background .2s; will-change: transform; }
  .tag.late { background: var(--red); } .tag.soon { background: var(--gold); color: #000; } .tag.none { background: #9a9da3; }
  .tag.on { background: var(--gold); color: #000; box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(245, 184, 0, .45); }
  .tag.back { opacity: .28; }
  .carhint { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; color: var(--ink3); pointer-events: none; }

  #toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; background: var(--black); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; transition: .35s; z-index: 40; pointer-events: none; max-width: 90vw; }
  #toast.on { transform: translate(-50%, 0); opacity: 1; }
  #loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); z-index: 50; transition: opacity .5s; }
  #loading .lhint { display: none; }
  /* v13: with the particles running, the opening is the galaxy itself: no curtain, just two quiet lines at the bottom */
  body.fxboot #loading { background: transparent; pointer-events: none; place-items: end center; padding-bottom: calc(9vh + env(safe-area-inset-bottom)); text-align: center; }
  body.fxboot #loading .logo { display: none; } body.fxboot #loading .lhint { display: block; font-size: 12px; color: var(--ink3); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
  body.fxboot #loadmsg { font-size: 14px; letter-spacing: .02em; color: var(--ink2, #3a3a3a); }
  body.booting .wrap, body.booting #tabs { opacity: 0; pointer-events: none; } .wrap, #tabs { transition: opacity .7s .35s; }
  #loading .logo { width: 72px; height: 72px; animation: breathe 2.2s ease-in-out infinite; }
  #loading p { text-align: center; color: var(--ink3); font-size: 13px; margin-top: 14px; }
  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  .fade-in { animation: fin .5s both; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ---- v5: larger type and fewer words; each domain opens on a stage where the particles take its shape ---- */
  body { font-size: 17px; transition: background-color 1.2s ease; }
  .top { background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); margin: 0 -16px; padding: 10px 16px; }
  .brand #chap { font-size: 15px; }
  .card { padding: 22px; border-radius: 26px; scroll-margin-top: 78px; }
  .hd { margin-bottom: 14px; flex-wrap: wrap; row-gap: 2px; }
  .hd h2 { font-size: 24px; } .hd .sub { font-size: 15px; } .hd .more { font-size: 15px; }
  .note { font-size: 14.5px; } .kick { font-size: 12px; } .how { font-size: 15px; }
  .need { padding: 14px 0; font-size: 17px; } .need .t small { font-size: 14px; } .need .sev { font-size: 11px; }

  .in { padding: 13px 4px; } .in .tx { font-size: 16.5px; } .in .tx small { font-size: 14px; } .in .ic { width: 30px; height: 30px; font-size: 14px; }

  .it { font-size: 16px; } .it small { font-size: 14px; } .day h3 { font-size: 15.5px; }
  .chip { font-size: 15px; padding: 9px 14px; } .chips { gap: 8px; }
  .seg button { font-size: 15px; padding: 9px 14px; } .crumbs button { font-size: 16px; } .step span { font-size: 16px; }
  .headline { font-size: 19px; } .sd .sl, .sd .sv { font-size: 13px; } .mini .k { font-size: 14px; } .mini .v { font-size: 22px; }

    .trip .nt { font-size: 14px; }
   .badge { font-size: 14px; padding: 6px 12px; }
  footer { font-size: 14px; } .pcard h3 { font-size: 21px; } .pcard p { font-size: 15px; } .lockg { font-size: 15px; } .carhint { font-size: 13px; }

  /* the stage behind everything, and a stage for each domain */
  #fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .wrap { position: relative; z-index: 1; }
  .stage { position: relative; min-height: 68vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 2px 12px; }
  .stage:first-child { min-height: 76vh; }
  .stage .no { font: 600 13px/1 var(--mono); letter-spacing: .16em; color: var(--gold-ink); }
  .stage h2 { font-size: clamp(50px, 14vw, 104px); font-weight: 760; letter-spacing: -.055em; line-height: .9; margin-top: 10px; }
  .stage h1 { font-size: clamp(34px, 9vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 10px; }
  .stage .lead, .stage #asof { font-size: 19px; color: var(--ink2); margin-top: 12px; max-width: 30ch; line-height: 1.4; }
  .stage .lead b { color: var(--ink); font-weight: 650; }
  .stage > * { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
  .stage.seen > * { opacity: 1; transform: none; }
  .stage.seen > :nth-child(2) { transition-delay: .1s; } .stage.seen > :nth-child(3) { transition-delay: .2s; }
  @media (min-width: 980px) { .stage { min-height: 74vh; } }
  body.nofx .stage { min-height: 0; padding-top: 40px; }
  .rv { transform: translateY(40px) scale(.97); transition: opacity .9s, transform 1s cubic-bezier(.2, .8, .2, 1); }
  .face { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wc, #ccc); flex: 0 0 auto; }

  /* home: the compound and its platforms */
  .hubwrap { margin: 0 -10px; }
  #hub { width: 100%; display: block; aspect-ratio: 1; max-width: 760px; margin: 0 auto; }
  #hub .hd2 { cursor: pointer; transition: opacity .45s; }
  #hub .hd2.lo { opacity: .25; }
  #hub .hb { transition: opacity .45s; } #hub .hb.lo { opacity: .5; }
  #hub .hloop { animation: dashmove 2.6s linear infinite; }
  #hub .hlink { animation: dashmove 1.1s linear infinite; }
  @keyframes dashmove { to { stroke-dashoffset: -32; } }
  #hub .hpulse { animation: hpu 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hpu { 50% { transform: scale(1.4); } }

  .hbig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hbig b { font-size: 58px; font-weight: 760; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; } .hbig span { font-size: 17px; color: var(--ink2); }
  .hline2 { font-size: 17px; margin-top: 12px; line-height: 1.5; color: var(--ink2); } .hline2 b { color: var(--ink); font-weight: 650; }
  .hchart { width: 100%; max-width: 520px; display: block; margin-top: 14px; overflow: visible; }
  .tanks { display: flex; gap: 14px; margin-top: 16px; }
  .tank { flex: 1; max-width: 110px; height: 136px; border-radius: 20px 20px 14px 14px; background: #2b2b2b; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 12px; color: #fff; }
  .tank i { position: absolute; left: 0; right: 0; bottom: 0; background: #3a7fcf; transition: height .8s; }
  .tank b, .tank span { position: relative; } .tank b { font-size: 26px; } .tank span { font-size: 13px; opacity: .8; }
  .hring { display: flex; gap: 18px; align-items: center; } .hring b { font-size: 21px; } .hring p { font-size: 16px; color: var(--ink2); margin-top: 4px; }

  .rrow { display: flex; gap: 14px; align-items: center; padding: 11px 0; width: 100%; text-align: left; border-top: 1px solid #2a2a2a; }
  .rrow:first-of-type { border-top: 0; }
  .rrow .face { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 2px #141414, 0 0 0 4px var(--wc, #ccc); }
  .rrow b { display: block; font-size: 17.5px; font-weight: 650; } .rrow small { display: block; font-size: 14.5px; color: #a4a29c; }

  /* ---- v6: an app. One domain on screen at a time, tabs at the bottom; the dashboard opens on MIDAS ---- */
  .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dom { display: none; }
  .dom.on { display: grid; grid-template-columns: 1fr; gap: 14px; animation: domin .55s cubic-bezier(.2, .8, .2, 1) both; }
  .dom.on.inl { animation-name: domil; }
  @keyframes domin { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes domil { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  @media (min-width: 980px) { .dom.on { grid-template-columns: 1fr 1fr; } .dom .span, .dom .stage { grid-column: 1 / -1; } }
  .dom .stage { min-height: 44vh; }
  .dom .stage > * { opacity: 1; transform: none; }
  #d-midas .stage { min-height: 62vh; color: #f4f1e8; padding: 0 22px 22px; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
  #d-midas .stage h1 { color: #fff; } #d-midas .stage #asof { color: #b9b4a8; }
  body.nofx #d-midas .stage { background: #0f0f10; border-radius: 0 0 28px 28px; min-height: 0; padding-top: 60px; }
  .touchhint { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: #8a7a4a; text-transform: uppercase; margin-top: 14px; display: block; }

  .rv { opacity: 1; transform: none; }

  /* the tab bar */
  .tabs { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; gap: 2px; padding: 6px; background: rgba(20, 20, 20, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 26px; box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .45); max-width: calc(100vw - 16px); }
  .tabs button { width: 52px; height: 54px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #a9a59b; transition: background .25s, color .25s; }
  .tabs svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabs span { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
  .tabs button.on { background: var(--gold); color: #141414; }
  @media (min-width: 700px) { .tabs button { width: 74px; } .tabs span { font-size: 11.5px; } }
  body.sheeton .tabs { opacity: 0; pointer-events: none; }

  /* the black-and-gold day card */
  .tcard { background: #141414; color: #f4f1e8; border-radius: 26px; padding: 18px 16px 12px; box-shadow: var(--shadow); }
  .tc-h { display: flex; align-items: flex-start; gap: 10px; }
  .tc-h > div { flex: 1; min-width: 0; } .tc-h small { color: #a4a29c; font-size: 13.5px; } .tc-h h3 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; margin-top: 3px; } .tc-h h3 b { color: var(--gold); }
  .tc-open { background: var(--gold); color: #141414; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 999px; flex: 0 0 auto; }
  .tc-wk { display: flex; align-items: stretch; gap: 3px; margin: 14px 0 8px; }
  .tc-nav { width: 22px; color: #8d8a82; font-size: 20px; flex: 0 0 auto; }
  .tc-d { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 16px; color: #cfcac0; }
  .tc-d span { font-size: 11px; color: #8d8a82; } .tc-d b { font-size: 18px; font-weight: 650; } .tc-d i { display: flex; gap: 3px; height: 15px; font-style: normal; }
  .tc-d em { font-style: normal; font-size: 10.5px; font-weight: 700; background: #2c2c2c; color: var(--gold); border-radius: 99px; padding: 1px 5px; } .tc-d u { text-decoration: none; font-size: 10.5px; color: #7fb069; }
  .tc-d.now span { color: var(--gold); } .tc-d.sel { background: var(--gold); color: #141414; } .tc-d.sel span { color: #4a3a00; } .tc-d.sel em { background: #141414; } .tc-d.sel u { color: #1d5c34; }
  .tc-list { border-top: 1px solid #2a2a2a; padding-top: 6px; }
  .tc-day { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8d8a82; margin: 8px 0 4px; }
  .ci { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #222; }
  .ci:first-of-type { border-top: 0; } .ci > i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .ci .ct { flex: 1; min-width: 0; font-size: 16px; } .ci .ct small { display: block; font-size: 13px; color: #8d8a82; }
  .ci .cd { color: var(--gold); font-weight: 700; } .ci.done .ct { color: #8d8a82; text-decoration: line-through; text-decoration-color: #555; } .ci.late .ct small { color: #f08a7e; }
  .card .ci { border-top-color: var(--line); } .sh-day .ci { border-top-color: var(--line); } .sh-day .ci .ct small { color: var(--ink3); }

  /* the sheet (full calendar, the phone) */
  .sheet { position: fixed; inset: 0; z-index: 45; background: rgba(10, 10, 10, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .sheet.on { opacity: 1; pointer-events: auto; }
  .sh-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 28px 28px 0 0; padding: 18px 16px calc(30px + env(safe-area-inset-bottom)); transform: translateY(40px); transition: transform .4s cubic-bezier(.2, .8, .2, 1); max-width: 980px; margin: 0 auto; }
  .sheet.on .sh-in { transform: none; }
  .sh-h { display: flex; align-items: center; margin-bottom: 8px; } .sh-h h2 { font-size: 26px; letter-spacing: -.03em; flex: 1; } .sh-x { width: 40px; height: 40px; border-radius: 50%; background: var(--card); font-size: 24px; box-shadow: var(--shadow); }
  .chip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
  .months { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 2px 6px; -webkit-overflow-scrolling: touch; }
  .month { flex: 0 0 min(88vw, 360px); scroll-snap-align: start; background: var(--card); border-radius: 22px; padding: 14px; box-shadow: var(--shadow); }
  .month h3 { font-size: 18px; margin-bottom: 8px; }
  .mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mg > span { font-size: 11px; color: var(--ink3); text-align: center; padding-bottom: 4px; }
  .mc { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 14px; }
  .mc.past { color: var(--ink3); } .mc.now b { color: var(--gold-ink); } .mc.sel { background: var(--black); color: #fff; } .mc i { display: flex; gap: 2px; height: 5px; } .mc em { width: 5px; height: 5px; border-radius: 50%; }
  .sh-day { background: var(--card); border-radius: 22px; padding: 14px 16px; margin-top: 12px; } .sh-day h3 { font-size: 17px; margin-bottom: 4px; } .sh-day .ci .ct { font-size: 16px; }

  .ph3, .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
  .ph3 div, .three div, .two div { background: var(--paper); border-radius: 14px; padding: 10px 12px; min-width: 0; } .ph3 small, .three small, .two small { display: block; font-size: 12.5px; color: var(--ink3); } .ph3 b, .three b, .two b { font-size: 19px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .three span, .two span { font-size: 12.5px; color: var(--ink2); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .two b { font-size: 24px; }

    .dim { color: var(--ink3); font-size: 20px; font-weight: 600; }

  /* lists and numbers in the domains */
  .trd { margin: 18px 0 6px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
  .trd > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; font-weight: 650; }
  .trd > summary::-webkit-details-marker { display: none; }
  .trd .trl { display: flex; align-items: center; gap: 9px; } .trd .trl svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .trd > summary i { width: 9px; height: 9px; border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3); transform: rotate(45deg); transition: transform .25s; margin-right: 4px; }
  .trd[open] > summary i { transform: rotate(-135deg); } .trd[open] > summary { border-bottom: 1px solid var(--line, #e6e6e3); }
  .trdb { padding: 6px 14px 14px; } .trdb .chips { margin: 8px 0; flex-wrap: wrap; gap: 6px; } .trdb .chip { padding: 6px 12px; font-size: 13px; min-height: 0; } .trdb .big svg { width: 100%; height: auto; }
  .tcal { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0 6px; }
  .tcm b { display: block; font-size: 13px; margin-bottom: 6px; } .tcg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .tcg u { text-decoration: none; font-size: 10px; color: var(--ink3); text-align: center; } .tcg i { font-style: normal; font-size: 10px; text-align: center; padding: 5px 0; border-radius: 7px; background: #eeeeec; color: var(--ink3); }
  .tcg i.y { color: #fff; font-weight: 650; } .tcg i.e { background: none; } .tcg i.f { background: none; color: #c8c8c4; } .tcg i.t { outline: 2px solid var(--gold); }
  .csettings { text-align: center; margin-top: 10px; } .csettings .lnk { background: none; border: 0; padding: 0; color: var(--ink3); text-decoration: underline; font: inherit; cursor: pointer; }
  .dcd .tc-d i small.dv { font-size: 10px; font-weight: 700; color: var(--ink2, #3a3a3a); font-style: normal; } .dcd .tc-d i small.dv.lo { color: #a3404c; }
  .dcd .tc-d i small.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } .dcd .tc-d.fut { opacity: .45; }
  .yn { font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: #ecebe7; color: var(--ink3); } .yn.y { background: #e3efe7; color: #0d5b3c; } .yn.n { background: #f1e6e7; color: #8b1c2b; }
  .meal { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eceae5; align-items: start; } .meal b { display: block; font-size: 14px; } .meal small { color: var(--ink3); font-size: 12px; } .meal p { margin: 0; font-size: 14px; line-height: 1.4; } .meal .kc { font-size: 12px; font-weight: 650; white-space: nowrap; }
  .verse { background: #141414; color: #f4efe2; border-radius: 18px; padding: 16px 18px; margin: 12px 0; } .verse small { color: #d9b44a; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .verse p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; font-family: Georgia, serif; } .verse.sm p { font-size: 14px; }
  .slices { margin-top: 10px; } .slc { border-bottom: 1px solid #eceae5; } .slc > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 2px; cursor: pointer; } .slc > summary::-webkit-details-marker { display: none; } .slc > summary i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .slc > summary b { flex: 1; font-size: 14px; } .slc > summary em { font-style: normal; font-size: 12px; color: var(--ink3); }
  .cdn { margin-left: auto; flex: none; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 650 12px/1 inherit; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .cdn:active { background: var(--gold); }
  .dnc { margin-top: 8px; border-top: 1px solid #eceae5; } .dnc > summary { list-style: none; cursor: pointer; padding: 11px 2px; font-size: 13px; font-weight: 650; color: var(--ink3); display: flex; align-items: center; gap: 8px; } .dnc > summary::-webkit-details-marker { display: none; } .dnc > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink4, #b9b9b4); border-bottom: 2px solid var(--ink4, #b9b9b4); transform: rotate(45deg); margin-left: 4px; } .dnc[open] > summary::after { transform: rotate(-135deg); }
  .dls { border-bottom: 1px solid #eceae5; } .dls > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 2px; cursor: pointer; } .dls > summary::-webkit-details-marker { display: none; } .dls > summary b { flex: 1; font-size: 15px; } .dls > summary em { font-style: normal; font-size: 12px; color: var(--ink3); } .dls[open] > summary b { color: var(--ink); }
  .dlq { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid #eceae5; } .dlq label { font-size: 14px; font-weight: 600; }
  .dlq input[type=number], .dlq input[type=time] { max-width: 180px; } .dlq input { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 12px; border: 1px solid #dcdad3; background: #fff; width: 100%; box-sizing: border-box; } .dlq .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dlq .dt { width: 50%; }
  .seg { display: flex; gap: 6px; } .seg.wrap { flex-wrap: wrap; } .seg button { border: 1px solid #dcdad3; background: #fff; border-radius: 999px; padding: 8px 14px; font: 600 13px/1 inherit; cursor: pointer; } .seg button.on { background: var(--black); color: #fff; border-color: var(--black); }
  .dlgo { display: flex; align-items: center; gap: 12px; padding: 14px 0; } .dlgo .fb { flex: none; }
  .wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; } .wst { background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; } .wst span { font-size: 12px; color: var(--ink3); } .wst b { font-size: 20px; letter-spacing: -.02em; } .wst small { font-size: 11px; color: var(--ink3); line-height: 1.3; }
  .kbig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kbig b { font-size: 46px; font-weight: 760; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; } .kbig span { font-size: 16px; color: var(--ink2); }
  .kline { font-size: 16px; color: var(--ink2); margin: 6px 0 10px; line-height: 1.5; }
  .bsvg { width: 100%; max-width: 560px; display: block; margin-top: 10px; overflow: visible; }
  .row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
  .row:first-of-type { border-top: 0; } .rt { flex: 1; min-width: 0; } .rt b { display: block; font-size: 16.5px; font-weight: 600; } .rt small { display: block; font-size: 14px; color: var(--ink2); }
  .lt { color: var(--red); font-weight: 600; }
  .pri { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #c4c5c8; } .p-critical { background: var(--red); } .p-high { background: var(--gold); } .p-medium { background: #7fa7d6; } .p-low { background: #c4c5c8; } .p-done { background: var(--green); }
  .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink2); flex: 0 0 auto; text-transform: uppercase; }

  .mis { border-top: 1px solid var(--line); padding: 10px 0; } .mis:first-of-type { border-top: 0; } .mis summary { cursor: pointer; list-style: none; } .mis summary b { display: block; font-size: 17px; } .mis summary small { color: var(--ink2); font-size: 14px; } .mis p { font-size: 15.5px; margin-top: 8px; line-height: 1.45; } .mis p small { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
   .sop { padding: 7px 0; border-top: 1px solid var(--line); } .sop summary { font-size: 16px; cursor: pointer; } .sop p { font-size: 14.5px; margin-top: 4px; }

    .vt { height: 10px; border-radius: 99px; background: var(--paper); overflow: hidden; } .vt b { display: block; height: 100%; background: var(--red); border-radius: 99px; }

  .sh3 { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 10px 0 2px; }
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl { display: flex; gap: 10px; padding: 4px 2px 8px; scroll-snap-type: x proximity; }
  .post { flex: 0 0 230px; scroll-snap-align: start; background: var(--paper); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .post small { color: var(--ink3); font-size: 12.5px; } .post b { font-size: 15.5px; font-weight: 600; line-height: 1.3; } .pm { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink2); } .post.hot { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold); } .pm .lead { color: var(--gold-ink); font-weight: 700; }
  .units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .unit { background: var(--paper); border-radius: 14px; padding: 12px; } .unit b { font-size: 20px; display: block; } .unit span { font-size: 13px; color: var(--ink2); }

  /* the car, from his photos */
  .cphoto { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #d9d6cf; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .cv { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: opacity, transform; }
  .ctg { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 20; } .ctg.on { opacity: 1; pointer-events: auto; }
  .ctg .tag { position: absolute; transform: none; margin: -13px 0 0 -13px; }
  .cdots { position: absolute; left: 12px; bottom: 12px; z-index: 21; display: flex; gap: 6px; align-items: center; } .cdots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); } .cdots button.on { background: #fff; width: 22px; border-radius: 99px; } .cdots span { color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); margin-left: 6px; }
  .cphoto .carhint { left: auto; right: 12px; top: 12px; bottom: auto; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); z-index: 21; }
  .pitw { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
  .pitg { width: 84px; height: 110px; border-radius: 14px 14px 40px 40px; background: #ece7dc; position: relative; overflow: hidden; flex: 0 0 auto; border: 2px solid #a8977f; }
  .pitg i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#8a6a4f, #5e4630); }
  .pitg b { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: 20px; color: #141414; text-shadow: 0 0 6px #fff; }

  .hello2 h1 { font-size: clamp(32px, 8.5vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
  .hello2 #asof { font-size: 16px; margin-top: 8px; }
  #d-midas .stage .no { color: var(--gold); }

  /* ---- v7: light and clean (soft greys, white pills, black for what is chosen, yellow for what matters); each domain a numbered list of parts ---- */
  :root { --paper: #e6e7eb; --card: #f4f5f7; --ink: #17181b; --ink2: #5b5e66; --ink3: #9a9da5; --ink4: #c9ccd3; --line: #e1e3e8; --black: #17181b;
    --shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 22px 44px -30px rgba(22, 26, 44, .38), 0 2px 6px -3px rgba(22, 26, 44, .1); --r: 28px; }
  body { background: linear-gradient(180deg, #eceef1 0%, #e2e4e9 100%) fixed; }
  .card, .tile6, .month, .sh-day, .phl, .panel, .subnav { background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow); }
  .card.dark { background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%); color: var(--ink); }
  .top { background: rgba(236, 238, 241, .72); }
  .ib { background: #f7f8fa; box-shadow: 0 1px 0 #fff inset, 0 4px 12px -6px rgba(22, 26, 44, .25); }
  .ib.on { background: var(--black); } .ib.on svg { stroke: var(--gold); }

  /* MIDAS on a light stage: graphite letters that turn gold */
  #d-midas .stage { color: var(--ink); } #d-midas .stage h1 { color: var(--ink); } #d-midas .stage #asof { color: var(--ink2); } .touchhint { color: #a88a2a; }
  body.nofx #d-midas .stage { background: none; }
  .dom .stage { min-height: 30vh; }
  #d-midas .stage { min-height: 54vh; }
  /* the tab bar: a light pill, the chosen domain in black */
  .tabs { background: rgba(244, 245, 247, .92); border: 1px solid #fff; box-shadow: 0 18px 40px -18px rgba(22, 26, 44, .4), 0 1px 0 #fff inset; }
  .tabs button { color: var(--ink2); } .tabs button.on { background: var(--black); color: #fff; } .tabs button.on svg { stroke: var(--gold); }
  /* the day card, light, with black and yellow where it counts */
  .tcard { background: linear-gradient(180deg, #f7f8fa, #eef0f3); color: var(--ink); border: 1px solid #fff; }
  .tc-h small { color: var(--ink3); } .tc-h h3 b { color: var(--ink); background: var(--gold); border-radius: 10px; padding: 0 8px; }
  .tc-open { background: var(--black); color: #fff; }
  .tc-nav { color: var(--ink3); } .tc-d { color: var(--ink); } .tc-d span { color: var(--ink3); } .tc-d em { background: var(--gold); color: #17181b; } .tc-d u { color: #2f9a62; }
  .tc-d.now span { color: var(--gold-ink); } .tc-d.sel { background: var(--black); color: #fff; } .tc-d.sel span { color: #b9bcc4; } .tc-d.sel em { background: var(--gold); color: #000; } .tc-d.sel u { color: #8fd3a8; }
  .tc-list { border-top-color: var(--line); } .tc-day { color: var(--ink3); } .ci { border-top-color: var(--line); } .ci .ct small { color: var(--ink3); } .ci .cd { color: var(--gold-ink); } .ci.done .ct { color: var(--ink3); text-decoration-color: var(--ink4); }

  /* the numbered parts of a domain */
  .subnav { display: flex; gap: 6px; overflow-x: auto; padding: 6px; border-radius: 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subnav::-webkit-scrollbar { display: none; }
  .sb { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; color: var(--ink2); white-space: nowrap; font-size: 15px; transition: background .2s, color .2s; }
  .sb b { font: 700 11px/1 var(--mono); color: var(--ink3); letter-spacing: .06em; }
  .sb:hover { background: rgba(255, 255, 255, .8); }
  .sb.on { background: var(--black); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); } .sb.on b { color: var(--gold); }
  .panel { border-radius: var(--r); padding: 22px 20px; min-width: 0; }
  .ph { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
  .pn { font: 700 13px/1 var(--mono); background: var(--gold); color: #17181b; border-radius: 10px; padding: 7px 8px; flex: 0 0 auto; margin-top: 3px; }
  .ph h2 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } .ph p { font-size: 15px; color: var(--ink2); margin-top: 3px; }
  @media (min-width: 980px) {
    .dom.on { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
    .dom .stage, #home.card, #car.card { grid-column: 1 / -1; }
    .subnav { flex-direction: column; overflow: visible; position: sticky; top: 84px; padding: 10px; }
    .sb { padding: 12px 14px; font-size: 16px; }
    .panel { grid-column: 2; }
    #d-midas.dom.on { grid-template-columns: 1fr 1fr; }
  }
  /* the pie: tap a slice or a row */
  .dn { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 700px) { .dn { grid-template-columns: 260px 1fr; align-items: center; } .dn .dpick { grid-column: 1 / -1; } }
  .dn svg { width: 100%; max-width: 270px; margin: 0 auto; display: block; overflow: visible; }
  .sl { cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s; stroke: #f4f5f7; stroke-width: 1.5; }
  .sl.on { transform: translate(var(--dx), var(--dy)); } .sl.dim { opacity: .28; }
  .dc1 { font-size: 22px; font-weight: 760; fill: var(--ink); letter-spacing: -.02em; } .dc2 { font-size: 11.5px; fill: var(--ink3); }
  .dleg { display: flex; flex-direction: column; gap: 2px; }
  .dleg button { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; text-align: left; font-size: 15px; }
  .dleg button i { width: 12px; height: 12px; border-radius: 4px; } .dleg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dleg button b { font-weight: 650; font-variant-numeric: tabular-nums; } .dleg button em { font-style: normal; color: var(--ink3); font-size: 13px; text-align: right; }
  .dleg button:hover { background: rgba(255, 255, 255, .7); } .dleg button.on { background: var(--black); color: #fff; } .dleg button.on em { color: var(--gold); }
  .dsel { background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: 0 10px 30px -22px rgba(22, 26, 44, .5); }
  .dsel h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .dsel h3 i { width: 12px; height: 12px; border-radius: 4px; } .dsel h3 small { font-size: 13px; color: var(--ink3); font-weight: 500; }
  .dl { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
  .dl:first-of-type { border-top: 0; } .dl > span { min-width: 0; } .dl small { display: block; color: var(--ink3); font-size: 13px; margin-top: 2px; } .dl b { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--ink4); color: var(--ink); } .pill.y { background: var(--gold); }
  .chipsr { display: flex; flex-wrap: wrap; gap: 6px; } .chipsr span { background: var(--paper); border-radius: 99px; padding: 5px 10px; font-size: 13px; }
  .gauge { display: flex; justify-content: center; margin: 4px 0 10px; }
  .tyres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; } .ty { background: #fff; border-radius: 16px; padding: 12px 8px; text-align: center; } .ty b { display: block; font-size: 26px; } .ty span { font-size: 12.5px; color: var(--ink3); } .ty.low { background: #fde7e4; } .ty.low b { color: var(--red); }
  .mcards { display: flex; flex-direction: column; gap: 10px; }
  .mcard { background: #fff; border-radius: 20px; padding: 12px 14px; } .mcard summary { display: flex; gap: 14px; align-items: center; cursor: pointer; list-style: none; } .mcard summary::-webkit-details-marker { display: none; }
  .mring { width: 64px; height: 64px; border-radius: 50%; border: 5px solid var(--ink4); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; } .mcard.act .mring { border-color: var(--gold); } .mring b { font-size: 19px; line-height: 1; } .mring small { font-size: 9.5px; color: var(--ink3); }
  .mt b { display: block; font-size: 16.5px; } .mt small { color: var(--ink2); font-size: 13.5px; } .mcard p { font-size: 15px; margin-top: 10px; line-height: 1.45; } .mcard p small { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
  .slot > .card { box-shadow: none; border: 0; background: none; padding: 0; margin-top: 8px; }
  #stash { display: none; }
  /* the car on a studio floor */
  .cphoto { background: #eceef1; } .cdots button { background: rgba(23, 24, 27, .25); } .cdots button.on { background: var(--black); } .cdots span, .cphoto .carhint { color: var(--ink2); text-shadow: none; }
  #car.card { padding: 10px; }
  .dom .stage { min-height: 40vh; } .dom .stage h2 { font-size: clamp(38px, 10.5vw, 84px); }
  .panel .tcard { background: none; box-shadow: none; border: 0; padding: 0; }
  .slot > .card .hd { display: none; }

  /* ---- v8: the home screen is Mission Control; people as avatars; social signal by month ---- */
  #d-midas .stage { min-height: 46vh; }
  .face { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #2b2c30; color: #fff; font-weight: 650; font-size: 16px; box-shadow: 0 0 0 3px #f4f5f7, 0 0 0 6px var(--wc, #ccc); flex: 0 0 auto; }
  .face.big { width: 72px; height: 72px; font-size: 23px; }
  .avs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 6px; margin-top: 10px; }
  .av { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; padding: 8px 2px; border-radius: 16px; }
  .av:hover { background: #fff; } .av .nm { font-size: 13.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .av .ag { font-size: 11.5px; color: var(--ink3); }
  .pcard { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 20px; padding: 14px 16px; margin-bottom: 10px; } .pcard b { display: block; font-size: 18px; } .pcard span { font-size: 14px; color: var(--ink2); }
  .dlb { width: 100%; text-align: left; cursor: pointer; border-radius: 12px; } .dlb:hover { background: #fff; } .dlb > span::after { content: ""; }
  .ci[data-ci] { cursor: pointer; } .ci[data-ci]:hover .ct { text-decoration: underline; text-decoration-color: var(--ink4); }
  .smonths { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; }
  .smonth { flex: 0 0 100%; max-width: 380px; scroll-snap-align: start; background: #fff; border-radius: 22px; padding: 14px; }
  .smonth h3 { font-size: 18px; } .smonth p { font-size: 13.5px; color: var(--ink2); margin: 2px 0 10px; } .smonth p b { color: var(--gold-ink); }
  .scd { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--ink3); cursor: default; }
  .scd b { font-weight: 500; } .scd.on { color: var(--ink); cursor: pointer; } .scd i { display: block; border-radius: 50%; background: var(--black); } .scd.hot i { background: var(--gold); box-shadow: 0 0 0 1.5px var(--black); } .scd.sel { background: var(--black); color: #fff; } .scd.sel i { background: var(--gold); }

  /* ---- v9: Ask Midas, and New / Copy forms that reach Midas as a message (Midas proposes, Victor approves) ---- */
  #askb { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--black); color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
  #askb i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } #askb.busy i { animation: beat 1s infinite; }
  @media (max-width: 380px) { .brand #chap { display: none; } }
  .chat { display: flex; flex-direction: column; height: min(72vh, 720px); }
  #chlog { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 12px; }
  .cm { max-width: 86%; padding: 10px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
  .cm.me { align-self: flex-end; background: var(--black); color: #fff; border-bottom-right-radius: 6px; }
  .cm.mi { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 8px 22px -18px rgba(22, 26, 44, .6); }
  .cq { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; } .cq::-webkit-scrollbar { display: none; }
  .cq button { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 14px -12px rgba(22, 26, 44, .6); }
  .cmic { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); flex: 0 0 auto; display: grid; place-items: center; }
  .cmic svg, .csp svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; }
  .cmic.on { background: var(--gold); animation: beat 1s infinite; } .csp { margin-right: 8px; } .csp.on { background: var(--black); } .csp.on svg { stroke: var(--gold); }
  .cmeta { display: block; font-size: 11px; opacity: .55; margin-top: 4px; }
  .cm.sys { align-self: center; color: var(--ink2); font-size: 13.5px; text-align: center; max-width: 92%; }
  .cm.wk { color: var(--ink2); } .cm.wk i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 3px; animation: beat 1s infinite; } .cm.wk i:nth-child(2) { animation-delay: .2s; } .cm.wk i:nth-child(3) { animation-delay: .4s; margin-right: 8px; }
  .cbt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cbt button { padding: 8px 14px; border-radius: 999px; background: var(--paper); font-weight: 650; font-size: 14px; } .cbt button:first-child { background: var(--black); color: #fff; }
  .cin { display: flex; gap: 8px; align-items: flex-end; background: #fff; border-radius: 24px; padding: 6px 6px 6px 14px; box-shadow: var(--shadow); }
  .cin textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px; background: none; padding: 8px 0; max-height: 120px; color: var(--ink); }
  .csend { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: #fff; font-size: 19px; flex: 0 0 auto; }
  .phx, .cact { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; } .cact { margin: 14px 0 0; }
  .fb { padding: 9px 15px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 650; box-shadow: 0 6px 16px -12px rgba(22, 26, 44, .6); } .fb.on { background: var(--black); color: #fff; }
  .fm { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .fl { display: flex; flex-direction: column; gap: 5px; background: #fff; border-radius: 16px; padding: 10px 12px; }
  .fl span { font-size: 13px; font-weight: 650; color: var(--ink2); } .fl em { font-style: normal; background: var(--gold); color: #17181b; border-radius: 99px; padding: 1px 7px; font-size: 11px; margin-left: 4px; } .fl small { font-weight: 500; color: var(--ink3); margin-left: 4px; }
  .fl select { border: 0; outline: 0; font: inherit; font-size: 16px; background: none; padding: 2px 0; color: var(--ink); width: 100%; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
  .fl input, .fl textarea { border: 0; outline: 0; font: inherit; font-size: 16px; background: none; padding: 2px 0; color: var(--ink); resize: vertical; width: 100%; }
  .fl.miss { box-shadow: 0 0 0 2px #d6463a inset; }
  /* ---- v10: each domain opens on a cover (the model, lit like a piece in a gallery, the title below it); scrolling turns
     the page to its parts. Glass tabs at the bottom with the real logo for Midas ---- */
  #fx { background:
      radial-gradient(circle var(--sr, 300px) at 50% var(--sy, 40%), rgb(255 255 255 / calc(var(--sa, 1) * .8)), rgb(255 255 255 / 0)),
      radial-gradient(ellipse calc(var(--sr, 300px) * .8) calc(var(--sr, 300px) * .09) at 50% calc(var(--sy, 40%) + var(--sr, 300px) * .86), rgb(22 24 34 / calc(var(--sa, 1) * .14)), rgb(22 24 34 / 0)); }
  .dom .stage, #d-midas .stage { min-height: calc(100svh - 70px - env(safe-area-inset-top)); justify-content: flex-end; padding: 0 4px calc(106px + env(safe-area-inset-bottom)); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
  #d-midas .stage { cursor: crosshair; }
  .dom .stage .no { font: 600 12px/1 var(--mono); letter-spacing: .28em; color: var(--ink3); display: flex; align-items: center; gap: 12px; }
  .dom .stage .no::after { content: ""; height: 1px; width: 56px; background: var(--ink4); }
  .dom .stage h2 { font-size: clamp(46px, 12.5vw, 112px); line-height: .92; letter-spacing: -.055em; margin-top: 14px; }
  .hello2 h1 { font-size: clamp(40px, 11vw, 92px); letter-spacing: -.05em; line-height: .98; }
  .dom .stage .lead { font-size: 18px; max-width: 34ch; }
  .touchhint { color: var(--ink3); margin-top: 16px; }
  .scue { position: absolute; right: 6px; bottom: calc(108px + env(safe-area-inset-bottom)); font: 600 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink3); writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px; }
  .scue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--ink3), transparent); animation: scue 2.4s ease-in-out infinite; }
  @keyframes scue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
  @media (min-width: 980px) { .dom .stage .lead { font-size: 20px; } .scue { right: 0; } }
  .tabs { background: rgb(255 255 255 / .26); -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06); backdrop-filter: blur(22px) saturate(1.9) brightness(1.06); border: 1px solid rgb(255 255 255 / .65);
    box-shadow: 0 1px 0 rgb(255 255 255 / .95) inset, 0 -1px 0 rgb(255 255 255 / .3) inset, 0 0 0 .5px rgb(22 24 34 / .06), 0 22px 44px -20px rgb(22 26 44 / .45); border-radius: 30px; padding: 5px; gap: 0; overflow: hidden; }
  .tabs::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 46%, rgb(255 255 255 / .12)); pointer-events: none; }
  .tabs button { position: relative; z-index: 1; width: 48px; height: 56px; border-radius: 24px; color: var(--ink2); background: none !important; transition: color .3s; }
  .tabs button.on { color: var(--ink); } .tabs button.on svg { stroke: var(--ink); } .tabs button.on span:last-child { font-weight: 750; }
  .tabs span { font-size: 9.5px; }
  .tlens { position: absolute; left: 0; top: 5px; height: 56px; border-radius: 24px; opacity: 0; z-index: 0; background: rgb(255 255 255 / .62); box-shadow: 0 1px 0 #fff inset, 0 -1px 2px rgb(22 26 44 / .06) inset, 0 6px 16px -8px rgb(22 26 44 / .35);
    transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), width .4s, opacity .3s; }
  .tlogo { width: 23px; height: 23px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9), 0 2px 6px rgb(0 0 0 / .25); }
  @media (min-width: 700px) { .tabs button { width: 74px; } .tabs span { font-size: 11px; } }
  .dlx { background: #fff; border-radius: 20px; padding: 4px 16px; margin-top: 14px; }
  .dlx > summary, .dwk > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .dlx > summary { font-weight: 700; font-size: 15.5px; padding: 12px 0; } .dlx > summary::after { content: "+"; font-size: 20px; color: var(--ink3); } .dlx[open] > summary::after { content: "–"; }
  .dlx > summary::-webkit-details-marker, .dwk > summary::-webkit-details-marker { display: none; }
  .dwk { border-top: 1px solid var(--line); } .dwk > summary { padding: 10px 0; font-size: 14.5px; color: var(--ink2); } .dwk > summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .dwk .dl { padding-left: 10px; font-size: 14.5px; }
  .rp { display: inline-block; padding: 3px 10px; border-radius: 99px; color: #fff; font-size: 12.5px; font-weight: 650; }
  .rkey { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink2); } .rkey i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
  .okd { color: #0d5b3c; font-weight: 700; } .dn2 { text-decoration-color: var(--ink4); color: var(--ink2); }
  /* v11: each cover title rises into place as the domain arrives */
  .dom.on .stage h2, .dom.on .stage .hello2 h1 { animation: trise 1.1s cubic-bezier(.2, .8, .2, 1) .12s both; }
  @keyframes trise { from { clip-path: inset(0 0 100% 0); transform: translateY(36px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
  .hubwrap { position: relative; }
  .hubback { position: absolute; left: 10px; top: 10px; padding: 9px 15px; border-radius: 999px; background: var(--black); color: #fff; font-size: 14px; font-weight: 650; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
  .tank { height: 172px; max-width: 120px; } .tank span { text-align: center; padding: 0 6px; line-height: 1.2; } .tank span small { display: block; font-size: 11px; opacity: .8; margin-top: 3px; }
  .fsend { margin-top: 6px; padding: 14px; border-radius: 999px; background: var(--black); color: #fff; font-size: 16px; font-weight: 700; }

  /* ================= the platform's own pages (home, sign-in, invitations, privacy, dashboard), in the Midas look:
     the gold particle stage behind, glass cards, chimes on touch. Built with midas.css into /_s/shell.css. ================= */
  body.shell { min-height: 100vh; }
  .shell .wrap { position: relative; z-index: 1; }
  .shell .top { position: sticky; top: 0; z-index: 5; }
  .shell .brand { text-decoration: none; color: inherit; }
  .shell .acct { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #fff, 0 8px 20px -14px rgba(22, 26, 44, .5); font: 600 13px/1 var(--sans); color: var(--ink); text-decoration: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .shell .acct i { width: 28px; height: 28px; border-radius: 50%; background: var(--black); color: var(--gold); display: grid; place-items: center; font: 700 12px/1 var(--sans); font-style: normal; }
  .shell .acct:hover i { background: var(--gold); color: var(--black); }
  .smain { max-width: 1080px; margin: 0 auto; padding: 0 18px 90px; }
  .shell .stage.seen > * { opacity: 1; transform: none; }
  /* the trees: glass tiles, each with its own small canopy of light; the last tile starts a new one */
  .tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 330px)); justify-content: center; gap: 18px; margin-top: 14px; }
  .tile { position: relative; display: flex; flex-direction: column; min-height: 248px; padding: 16px 18px 18px; border-radius: 30px; text-decoration: none; color: var(--ink); overflow: hidden; cursor: pointer; border: 0; font: inherit; text-align: left;
    background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, 0 26px 50px -34px rgba(22, 26, 44, .55);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
    animation: tin .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  @keyframes tin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; } }
  .tile:hover { --ty: -4px; box-shadow: inset 0 0 0 1px #fff, inset 0 1px 0 #fff, 0 34px 60px -30px rgba(22, 26, 44, .6); }
  .tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .tile .tno { position: relative; font: 600 11px/1 var(--mono); letter-spacing: .16em; color: var(--gold-ink); }
  .tile .trole { position: absolute; right: 16px; top: 13px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 99px; background: var(--black); color: var(--gold); }
  .tile .tbody { position: relative; margin-top: auto; padding-right: 50px; }   /* clear of the arrow */
  .tile b { display: block; font: 720 21px/1.12 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
  .tile small { display: block; margin-top: 7px; font: 500 13px/1.3 var(--sans); color: var(--ink2); }
  .tile .tgo { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--black); display: grid; place-items: center; transition: transform .3s; }
  .tile .tgo svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .tile:hover .tgo { transform: translateX(3px); background: var(--gold); } .tile:hover .tgo svg { stroke: var(--black); }
  .tile.new { background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1.5px rgba(184, 187, 195, .6); align-items: center; justify-content: center; text-align: center; }
  .tile.new .plus { width: 64px; height: 64px; border-radius: 50%; border: 1.6px dashed #b8bbc3; display: grid; place-items: center; transition: border-color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
  .tile.new .plus svg { width: 22px; height: 22px; stroke: #8d9097; stroke-width: 2.4; stroke-linecap: round; fill: none; }
  .tile.new:hover .plus { border-color: var(--gold); transform: rotate(90deg); } .tile.new:hover .plus svg { stroke: var(--gold-ink); }
  .tile.new b { margin-top: 14px; font-size: 18px; } .tile.new small { max-width: 24ch; }
  .tile.new form { display: none; width: 100%; } .tile.new.open .plus, .tile.new.open b, .tile.new.open small { display: none; }
  .tile.new.open form { display: flex; flex-direction: column; gap: 10px; }
  .tile.new.open { cursor: default; }
  .sin { width: 100%; box-sizing: border-box; font: 500 17px/1.2 var(--sans); padding: 15px 16px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); outline: none; }
  .sin:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border: 0; border-radius: 99px; background: var(--black); color: #fff; font: 650 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .25s, background .25s, color .25s; }
  .sbtn:hover { color: var(--gold); transform: translateY(-1px); }
  .sbtn.light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 12px 26px -18px rgba(22, 26, 44, .5); }
  .sbtn.light:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 14px 30px -18px rgba(22, 26, 44, .55); color: var(--ink); }
  .sbtn svg { width: 20px; height: 20px; }
  .shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 2px 4px; }
  .shead h3 { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); margin: 0; }
  .shead span { font: 500 13px/1 var(--sans); color: var(--ink3); }
  /* a page with one message or form: the sphere of light above, a glass card under it */
  .solo { max-width: 520px; margin: 0 auto; padding: 48vh 18px 80px; }
  .card2 { padding: 26px 24px; border-radius: 30px; background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: inset 0 0 0 1px #fff, inset 0 1px 0 #fff, 0 30px 60px -36px rgba(22, 26, 44, .6); animation: tin .9s cubic-bezier(.2, .8, .2, 1) both; }
  .card2 h1 { font: 740 clamp(28px, 7vw, 38px)/1.05 var(--sans); letter-spacing: -.04em; margin: 0 0 10px; }
  .card2 h2 { font: 650 17px/1.2 var(--sans); margin: 22px 0 8px; }
  .card2 p { color: var(--ink2); line-height: 1.5; margin: 0 0 12px; }
  .card2 .sbtn { width: 100%; margin-top: 8px; }
  .card2 label { display: block; font: 600 13px/1 var(--sans); margin: 14px 0 7px; }
  .card2 a:not(.sbtn) { color: var(--ink); }
  .snote { font: 500 12.5px/1.45 var(--sans); color: var(--ink3); margin-top: 14px; }
  .snote a { color: var(--ink2); }
  .wide .solo { max-width: 760px; padding-top: 34vh; }
  /* the privacy notice: a long read, so it starts higher, with room between its parts */
  .wide .solo:has(.priv) { padding-top: 18vh; }
  .priv .lead { font-size: 17px; color: var(--ink); } .priv .pdate { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
  .priv h2 { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(22, 26, 44, .08); }
  .priv ul { margin: 0 0 12px; padding: 0; list-style: none; } .priv li { position: relative; padding-left: 20px; margin: 0 0 8px; color: var(--ink2); line-height: 1.45; }
  .priv li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
  .test { margin-top: 18px; padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px dashed rgba(184, 187, 195, .7); }
  .test b { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
  .sfoot { position: relative; z-index: 1; text-align: center; font: 500 12px/1 var(--sans); color: var(--ink3); padding: 0 0 28px; }
  .sfoot a { color: var(--ink2); }
  .dash td { padding: 6px 4px; font-size: 14px; } .dash td:not(:first-child) { text-align: right; font-weight: 650; }
  /* older blocks inside a card (the dashboard, messages) */
  .card2 .card { margin: 10px 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
  .card2 .note { font-size: 12.5px; color: var(--ink3); }
  .card2 .btn, .card2 button:not(.sbtn):not([type=button]) { display: inline-flex; padding: 13px 20px; border: 0; border-radius: 99px; background: var(--black); color: #fff; font: 650 14px/1 var(--sans); text-decoration: none; cursor: pointer; }
  .card2 table { width: 100%; border-collapse: collapse; } .card2 td { padding: 6px 4px; font-size: 14px; border-bottom: 1px solid var(--line); } .card2 td:not(:first-child) { text-align: right; font-weight: 650; }
  /* menus: the account, an owner's tile */
  .shell .acct { border: 0; cursor: pointer; font: 600 13px/1 var(--sans); transition: transform .25s, box-shadow .25s; }
  .shell .acct:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #fff, 0 12px 24px -14px rgba(22, 26, 44, .55); }
  .shell .acct[aria-expanded="true"] i { background: var(--gold); color: var(--black); }
  .tile .tmore { position: absolute; right: 62px; top: 9px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s, background .25s; }
  .tile:hover .tmore, .tile .tmore[aria-expanded="true"], .tile .tmore:focus-visible { opacity: 1; transform: none; }
  @media (hover: none) { .tile .tmore { opacity: 1; transform: none; } }
  .tile .tmore svg { width: 16px; height: 16px; fill: var(--ink); } .tile .tmore:hover { background: var(--black); } .tile .tmore:hover svg { fill: var(--gold); }
  .tile.gone { opacity: 0 !important; transform: scale(.92) !important; transition: opacity .45s, transform .45s; }
  .spop { position: absolute; z-index: 60; min-width: 240px; max-width: 320px; padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 0 0 1px #fff, 0 30px 60px -28px rgba(22, 26, 44, .6); display: flex; flex-direction: column; gap: 2px; animation: popin .26s cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
  @keyframes popin { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
  .spop-h { padding: 10px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .spop-h b { display: block; font: 700 14.5px/1.25 var(--sans); } .spop-h small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--sans); color: var(--ink3); }
  .spop a, .spop button { display: block; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 14px; background: none; font: 600 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, padding .2s; }
  .spop a:hover, .spop button:hover { background: var(--black); color: #fff; padding-left: 16px; }
  .spop .danger { color: #b3261e; } .spop .danger:hover, .spop .danger.sure { background: #b3261e; color: #fff; }
  .spop .sin { margin: 4px 0 6px; font-size: 15px; padding: 12px 14px; }
  .spop.shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  /* the demo tile */
  .tile.demo .trole { background: var(--gold); color: var(--black); }
  .tile.demo .trole { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px rgba(148, 108, 0, .18); }
  /* the backend */
  .bk .bkh { padding: 14vh 2px 8px; } .bk .bkh h1 { font: 760 clamp(38px, 8vw, 72px)/.95 var(--sans); letter-spacing: -.05em; margin: 10px 0 12px; } .bk .bkh .lead { font-size: 17px; color: var(--ink2); max-width: 52ch; line-height: 1.45; } .bk .no { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
  .bkback { display: inline-flex; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .7); font: 600 13px/1 var(--sans); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px #fff; } .bkback::before { content: '‹ '; } .bkback:hover { background: var(--black); color: #fff; }
  .bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
  .bkt { padding: 18px; border-radius: 26px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px #fff, 0 20px 40px -30px rgba(22, 26, 44, .55); animation: tin .7s cubic-bezier(.2, .8, .2, 1) both; transition: transform .3s; }
  .bkt:hover { transform: translateY(-2px); } .bkt b { display: block; font: 780 36px/1 var(--sans); letter-spacing: -.04em; } .bkt span { display: block; margin-top: 6px; font: 600 13px/1.2 var(--sans); } .bkt small { display: block; margin-top: 6px; font: 500 12px/1.35 var(--sans); color: var(--ink3); }
  .bkt:first-child b { color: #1f8f53; }
  .bkcard { padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px #fff, 0 20px 40px -30px rgba(22, 26, 44, .55); }
  .bktab { width: 100%; border-collapse: collapse; } .bktab td { padding: 11px 12px; font: 500 14px/1.3 var(--sans); border-bottom: 1px solid rgba(23, 24, 27, .06); } .bktab td:not(:first-child) { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 90px; } .bktab tr:hover td { background: rgba(255, 255, 255, .7); }
  .bkcard .snote { padding: 4px 12px 8px; }
  .bkrow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; text-decoration: none; color: var(--ink); font: 500 14px/1.35 var(--sans); transition: background .2s, transform .2s; } .bkrow > div { flex: 1; min-width: 0; } .bkrow small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink3); } .bkrow em { font-style: normal; color: var(--ink3); }
  .bkrow:hover { background: rgba(255, 255, 255, .85); } .bkrow.lk:hover { transform: translateX(3px); } .bkrow.off { opacity: .5; }
  .bkgo { padding: 8px 12px; border-radius: 99px; background: var(--black); color: #fff; font: 600 12px/1 var(--sans); } .bkrow.lk:hover .bkgo { background: var(--gold); color: var(--black); }
  .sbtn.sm { padding: 9px 14px; font-size: 13px; }
  /* the opening: the sphere of light alone, then the canopy and the menu */
  body.opening .smain, body.opening .sfoot, body.opening .top .tools { opacity: 0; pointer-events: none; }
  .smain, .sfoot, .top .tools { transition: opacity .9s .15s; }
  body.opening::after { content: 'Touch it'; position: fixed; left: 0; right: 0; bottom: calc(9vh + env(safe-area-inset-bottom)); text-align: center; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); animation: lv 2.4s ease-in-out infinite; }
  .card2 .no { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
  /* water: a ripple from a touch, on every button */
  .ripple { position: absolute; z-index: 0; width: var(--rs, 120px); height: var(--rs, 120px); margin: calc(var(--rs, 120px) / -2) 0 0 calc(var(--rs, 120px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(245, 184, 0, .28), rgba(245, 184, 0, 0) 62%); transform: scale(0); opacity: 1; pointer-events: none; animation: rip .7s cubic-bezier(.2, .8, .2, 1) forwards; }
  @keyframes rip { to { transform: scale(1); opacity: 0; } }
  .ib, .sbtn, .acct, .tmore { transition: translate .25s cubic-bezier(.2, .8, .2, 1), transform .25s, background .25s, color .25s, box-shadow .25s; overflow: hidden; }
  .ib:hover { box-shadow: 0 10px 22px -14px rgba(22, 26, 44, .6), inset 0 0 0 1px #fff; }
  /* the light: a gold glow that rests on one tile and follows the pointer or finger to another, like light on water */
  .tgrid { position: relative; }
  .glowball { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 30px; pointer-events: none; opacity: 0;
    box-shadow: 0 0 60px 10px rgba(245, 184, 0, .32), 0 0 22px 2px rgba(245, 184, 0, .22);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), width .6s cubic-bezier(.2, .8, .2, 1), height .6s cubic-bezier(.2, .8, .2, 1), opacity .8s; animation: breathe 3.2s ease-in-out infinite; }
  .glowball.on { opacity: 1; } .tgrid .tile { z-index: 1; }
  @keyframes breathe { 50% { box-shadow: 0 0 76px 14px rgba(245, 184, 0, .24), 0 0 26px 3px rgba(245, 184, 0, .16); } }
  .tile.bounce { animation: tbounce .55s cubic-bezier(.3, 1.5, .5, 1); }
  @keyframes tbounce { 0% { translate: 0 0; } 35% { translate: 0 -6px; } 70% { translate: 0 1px; } 100% { translate: 0 0; } }
  .sbtn.glowing { box-shadow: inset 0 0 0 1px var(--line), 0 0 48px 8px rgba(245, 184, 0, .3); animation: breathe2 3.2s ease-in-out infinite; }
  @keyframes breathe2 { 50% { box-shadow: inset 0 0 0 1px var(--line), 0 0 64px 12px rgba(245, 184, 0, .2); } }
  /* the invitation: finding yourself */
  /* titles: lines that never touch (descenders clear the next line and the words below) */
  .shell .stage h2 { line-height: 1.04; padding-bottom: .08em; } .shell .stage .lead { margin-top: 16px; }
  @media (prefers-reduced-motion: reduce) { .glowball, .sbtn.glowing { animation: none; } }
  /* the backend's storage over time: one bar a day */
  .bkspark .bkbars { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding: 10px 12px 4px; } .bkspark .bkbars i { flex: 1; max-width: 22px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--gold), #e0a800); }
  /* ================= Midas OS's own parts, on top of midas.css and the Midas Family platform's shell (the approved
     look: the particle stage behind, glass, black for what is chosen, gold for what matters, ripples and chimes).
     Class names start with o- where the Midas styles already use the plain word. ================= */
  [hidden] { display: none !important; }
  .smain.o-main { max-width: 1240px; }
  .top .tools { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }

  /* search, in the top bar: a glass pill like the account */
  .o-find { position: relative; flex: 1 1 auto; min-width: 0; max-width: 380px; }
  .o-find input { width: 100%; height: 40px; box-sizing: border-box; border: 0; border-radius: 99px; padding: 0 14px 0 38px; font: 500 14.5px/1 var(--sans); color: var(--ink); outline: none;
    background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #fff, 0 8px 20px -14px rgba(22, 26, 44, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .o-find input:focus { box-shadow: inset 0 0 0 1.5px var(--gold), 0 8px 20px -14px rgba(22, 26, 44, .5); }
  .o-find svg { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; stroke: var(--ink3); fill: none; stroke-width: 1.8; stroke-linecap: round; }
  @media (max-width: 560px) { .top .brand b { display: none; } .acct .o-who { display: none; } .shell .acct { padding: 0 6px; } }

  /* the covers: shorter than the platform's, so the records come soon after the model */
  .stage.o-cover { min-height: 60vh; }
  .stage.o-cover.o-home { min-height: 84vh; }
  .stage.o-cover h2 { font-size: clamp(40px, 9vw, 84px); overflow-wrap: anywhere; }
  .stage.o-cover .lead { max-width: 46ch; font-size: 17px; }
  body.nofx .stage.o-cover { min-height: 0; padding-top: 36px; }

  /* the 36 tabs: the platform's tiles, smaller (36 of them, not a handful of trees) */
  .tgrid.o-tiles { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); justify-content: stretch; gap: 14px; }
  @media (max-width: 520px) { .tgrid.o-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } }
  .o-tiles .tile { min-height: 168px; padding: 14px 15px 15px; border-radius: 26px; }
  .o-tiles .tile b { font-size: 18px; }
  .o-tiles .tile small { font-size: 12.5px; }
  .o-tiles .tile .tgo { width: 34px; height: 34px; right: 13px; bottom: 13px; }
  .o-tiles .tile .tbody { padding-right: 40px; }
  @media (max-width: 520px) { .o-tiles .tile { min-height: 150px; padding: 12px 12px 13px; border-radius: 22px; } .o-tiles .tile b { font-size: 16px; } .o-tiles .tile .trole { right: 10px; top: 10px; padding: 5px 7px; font-size: 9.5px; } .o-tiles .tile .tbody { padding-right: 34px; } .o-tiles .tile .tgo { width: 30px; height: 30px; right: 10px; bottom: 10px; } }

  /* a tab: the bar, then the records in glass */
  .o-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
  .o-bar .sin { flex: 1 1 180px; max-width: 320px; padding: 11px 15px; font-size: 15px; border-radius: 99px; }
  .o-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #fff; margin-left: auto; }
  .o-seg button { border: 0; background: none; padding: 8px 13px; border-radius: 99px; font: 600 13px/1 var(--sans); color: var(--ink2); cursor: pointer; }
  .o-seg button.on { background: var(--black); color: #fff; }
  .o-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 4px 10px; font: 500 12.5px/1.3 var(--sans); color: var(--ink3); }
  .o-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: middle; }
  .o-card { position: relative; border-radius: 26px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px #fff, 0 24px 48px -34px rgba(22, 26, 44, .55); animation: tin .7s cubic-bezier(.2, .8, .2, 1) both; }
  .o-msg { padding: 18px 20px; color: var(--ink2); font: 500 15px/1.45 var(--sans); }
  .o-msg.err { color: var(--gold-ink); }
  .o-grid { overflow: auto; max-height: calc(100vh - 150px); border-radius: 26px; }
  .o-grid table { border-collapse: separate; border-spacing: 0; min-width: 100%; font: 500 13.5px/1.35 var(--sans); }
  .o-grid th, .o-grid td { padding: 10px 13px; text-align: left; vertical-align: top; max-width: 340px; border-bottom: 1px solid rgba(23, 24, 27, .06); }
  .o-grid th { position: sticky; top: 0; z-index: 2; background: rgba(250, 249, 246, .96); font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
  .o-grid th.calc { color: var(--gold-ink); }
  .o-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .o-grid td.calc { background: rgba(255, 244, 209, .45); }
  .o-grid th:first-child, .o-grid td:first-child { position: sticky; left: 0; z-index: 1; background: rgba(250, 249, 246, .96); font: 600 11px/1.6 var(--mono); color: var(--ink3); text-align: right; }
  .o-grid th:first-child { z-index: 3; }
  .o-grid tbody tr { cursor: pointer; transition: background .2s; }
  .o-grid tbody tr:hover td { background: rgba(255, 255, 255, .9); } .o-grid tbody tr:hover td.calc { background: rgba(255, 244, 209, .8); }
  .o-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
  .o-list { padding: 6px; display: grid; gap: 2px; }
  .o-row { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; border-radius: 18px; color: var(--ink); cursor: pointer; font: 500 14px/1.35 var(--sans); transition: background .2s, transform .2s; }
  .o-row:hover { background: rgba(255, 255, 255, .9); transform: translateX(3px); }
  .o-row small { display: block; font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; color: var(--gold-ink); text-transform: uppercase; }
  .o-row b { display: block; margin-top: 3px; font: 650 15.5px/1.3 var(--sans); overflow-wrap: anywhere; }
  .o-row span { display: block; margin-top: 2px; color: var(--ink2); font-size: 13.5px; overflow-wrap: anywhere; }
  .o-row mark { background: var(--gold-soft); color: inherit; border-radius: 4px; padding: 0 2px; }
  .o-row.o-split { display: flex; gap: 10px; align-items: center; cursor: default; } .o-row.o-split:hover { transform: none; }
  .o-row.o-split > div { flex: 1; min-width: 0; }

  /* one record: a glass sheet (a side panel on a laptop, from the bottom on a phone) */
  .o-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 22, 30, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ofade .3s both; }
  @keyframes ofade { from { opacity: 0; } }
  .o-rec { position: fixed; z-index: 41; right: 12px; top: 12px; bottom: 12px; width: min(540px, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: 30px; overflow: hidden;
    background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: inset 0 0 0 1px #fff, 0 40px 80px -30px rgba(22, 26, 44, .6); animation: orin .45s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes orin { from { opacity: 0; transform: translateX(30px); } }
  @media (max-width: 719px) { .o-rec { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 88vh; border-radius: 30px 30px 0 0; animation-name: orup; } }
  @keyframes orup { from { opacity: 0; transform: translateY(40px); } }
  .o-rh { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(23, 24, 27, .07); }
  .o-rh > div { flex: 1; min-width: 0; }
  .o-rh .no { font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
  .o-rh h3 { margin: 6px 0 0; font: 740 22px/1.1 var(--sans); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .o-rb { overflow: auto; padding: 4px 18px calc(22px + env(safe-area-inset-bottom)); flex: 1; }
  .o-f { padding: 12px 0; border-bottom: 1px solid rgba(23, 24, 27, .06); }
  .o-f .l { display: flex; gap: 8px; align-items: center; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
  .o-f .l em { font-style: normal; font-size: 9.5px; letter-spacing: .1em; padding: 4px 6px; border-radius: 99px; background: var(--black); color: var(--gold); }
  .o-f .v { margin-top: 5px; font: 500 16px/1.45 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
  .o-f .v.empty { color: var(--ink4); }
  .o-f .v a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .o-f .x, .o-f .hint { margin-top: 5px; font: 500 12.5px/1.4 var(--sans); color: var(--ink2); overflow-wrap: anywhere; }
  .o-f code { display: block; margin-top: 5px; font: 12px/1.4 var(--mono); color: var(--ink3); overflow-wrap: anywhere; }
  .o-in { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; border: 0; border-radius: 16px; padding: 12px 14px; min-height: 44px; font: 500 16px/1.3 var(--sans); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); outline: none; }
  textarea.o-in { min-height: 84px; resize: vertical; }
  .o-in:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .o-warn { margin: 14px 0 0; padding: 12px 15px; border-radius: 18px; background: var(--gold-soft); color: var(--gold-ink); font: 500 14px/1.4 var(--sans); }
  .o-rf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(23, 24, 27, .07); }
  .o-rf .sp { flex: 1; }
  .sbtn[disabled] { opacity: .5; cursor: default; transform: none; }
  .sbtn.o-danger { background: #fff; color: #b3261e; box-shadow: inset 0 0 0 1px rgba(179, 38, 30, .25); } .sbtn.o-danger:hover { background: #b3261e; color: #fff; }
  .sbtn.o-tiny { padding: 8px 13px; font-size: 13px; margin-top: 8px; }

  /* what is happening: the formulas being worked out, a save with its Undo */
  .o-busy { position: fixed; z-index: 59; right: 14px; top: calc(68px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px; font: 600 12px/1 var(--sans); color: var(--ink2);
    background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px #fff, 0 12px 26px -16px rgba(22, 26, 44, .55); }
  .o-busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: opulse 1s ease-in-out infinite; }
  @keyframes opulse { 50% { opacity: .25; } }
  .o-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
    padding: 10px 10px 10px 18px; border-radius: 99px; background: var(--black); color: #f4f2ec; font: 500 14px/1.3 var(--sans); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); animation: orup .35s cubic-bezier(.2, .8, .2, 1); }
  .o-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .o-toast button { flex: 0 0 auto; height: 32px; padding: 0 15px; border: 0; border-radius: 99px; background: #2b2b2b; color: var(--gold); font: 700 13px/1 var(--sans); cursor: pointer; }
  .o-toast button:hover { background: var(--gold); color: var(--black); }
  @media (prefers-reduced-motion: reduce) { .o-busy i, .o-rec, .o-card, .o-toast { animation: none; } }