/* ------------------------------------------------------------------
   The three animated tiles in 02's bento (bento.js draws them).

   "Block time" is the app's Schedule tool (planner/schedule/schedule_page.dart
   and its widgets/schedule_time_grid.dart, schedule_wbs_panel.dart): a task
   held in the Work breakdown panel and dropped on the week. "Cost estimate"
   is the Pricing Calculator on a phone (tools/video_pricing_calculator.dart on
   the device kit, tools/pricing_device/ and tools/shared/device/): a rate,
   a day, two pieces of kit and an edit, each counted into the total. "Internal
   invoice" is the client link's Pricing tab (hosting/x/render.js
   `optionPricing`, hosting/x/x.css) scrolled to its Invoices & payments card,
   and the PDF its "Download invoice (PDF)" button opens, laid out as
   InvoiceExporter (tools/invoicing/services/invoice_exporter.dart) lays it out.

   Each is drawn as a fixed scene and scaled to its tile by --bs (and centred
   by --bx), so the words keep their proportion to the picture at every width,
   the way a screenshot would: the two wide tiles at 700 x 332.5, their own
   1600:760, scaled to the width; the tall one at 450 x 562.5, 4:5, scaled to
   cover a tile that runs from 4:5 to about 3:4, so a taller tile loses a
   sliver of the ground at each side and never any of the phone's top.

   The surfaces inside keep their own looks whatever the page's scheme, as the
   01 demo does: the app in its dark theme (AppPalette.dark*), and the client
   link in its default dark (x.css :root, deliberately not
   prefers-color-scheme), with the PDF on white paper. Only the ground around
   them follows the page.

   Without script none of this applies: the tile keeps its <img>.
   ------------------------------------------------------------------ */

/* The client link's own face, self-hosted beside the page's Montserrat. */
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

/* The img stays in the DOM, out of layout and out of the way: the stage
   carries the figure's meaning (role="img", the img's own alt). display:none
   also keeps a lazy placeholder from being fetched for nothing. */
.tile[data-anim].bn-on > img { display: none; }
.tile[data-anim].bn-on .cap { z-index: 2; }

.bn-stage {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
  background:
    radial-gradient(95% 130% at 100% 0%, color-mix(in srgb, var(--jc, #A6C82E) 34%, transparent), transparent 64%),
    radial-gradient(70% 100% at 0% 100%, color-mix(in srgb, var(--jc, #A6C82E) 16%, transparent), transparent 72%),
    var(--paper-soft, #f6f7f4);
}
.bn-scene {
  position: absolute; left: 0; top: 0; width: 700px; height: 332.5px;
  transform-origin: 0 0; transform: translateX(var(--bx, 0px)) scale(var(--bs, 1));
  text-align: left; letter-spacing: 0; line-height: 1.25;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.bn-scene *, .bn-scene *::before, .bn-scene *::after { box-sizing: border-box; }
.bn-scene :where(p, h1, h2, h3, h4, span, div) { margin: 0; padding: 0; }
.bn-scene svg { display: block; flex: 0 0 auto; fill: currentColor; }
.bn-abs { position: absolute; }
.bn-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The pointer, and the ring a long press draws under it. */
.bn-cursor {
  position: absolute; left: 0; top: 0; width: 14px; height: 20px; z-index: 30;
  opacity: 0; transform-origin: 1px 1px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45));
}
.bn-ring {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9); opacity: 0;
}

/* ================= Block time: the Schedule tool ================= */
.bs-win {
  --bg: #000000; --surface: #0D0D0D; --border: #3D3D3D;
  --text: #FFFFFF; --text2: #A3A3A3; --green: #54C43D;
  position: absolute; left: 14px; top: 14px; width: 672px; height: 340px;
  border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--text);
  font: 400 10px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
.bs-title {
  position: absolute; left: 0; top: 0; right: 0; height: 24px; display: flex; align-items: center;
  padding: 0 4px 0 9px; background: #000; border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 600;
}
.bs-title .bs-wt { flex: 1 1 auto; margin-left: 7px; }
.bs-wc { width: 24px; display: grid; place-items: center; color: var(--text2); }
.bs-r1 { position: absolute; left: 0; right: 0; top: 24px; height: 26px; display: flex; align-items: center; padding: 0 6px; gap: 2px; }
.bs-r1 .bs-ttl { flex: 1 1 auto; margin-left: 6px; font-size: 12.5px; font-weight: 600; }
.bs-r1 .bs-today { font-size: 10.5px; padding: 0 9px; }
.bs-r2 { position: absolute; left: 8px; right: 8px; top: 50px; height: 24px; display: flex; align-items: center; gap: 5px; }
.bs-chip {
  height: 18px; padding: 0 8px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font-size: 9.5px; color: var(--text);
}
.bs-chip.on { background: var(--text); border-color: var(--text); color: #000; }
.bs-dd { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 10px; }

.bs-rule { position: absolute; background: var(--border); }
.bs-hr { position: absolute; height: .5px; background: var(--border); }
.bs-hr.half { opacity: .45; }
.bs-off { position: absolute; background: rgba(163, 163, 163, .05); }
.bs-col { position: absolute; border-right: .5px solid var(--border); }
.bs-col.last { border-right: 0; }
.bs-hot { position: absolute; background: rgba(255, 255, 255, .06); opacity: 0; }
.bs-gl { position: absolute; width: 40px; text-align: right; font-size: 8px; color: var(--text2); white-space: nowrap; }
.bs-wd { position: absolute; text-align: center; font-size: 8px; letter-spacing: .6px; color: var(--text2); }
.bs-dn {
  position: absolute; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
}
.bs-dn.today { background: var(--text); color: #000; }
.bs-wbs {
  position: absolute; height: 14px; display: flex; align-items: center; gap: 3px;
  padding: 0 4px; border-radius: 4px; border: 1px solid; font-size: 8.5px; color: var(--text);
}
.bs-blk {
  position: absolute; overflow: hidden; border-radius: 5px; border-left: 3px solid;
  padding: 3px 4px 2px 5px;
}
.bs-blk .bs-bt { font-size: 9.5px; font-weight: 600; color: var(--text); }
.bs-blk .bs-bs { font-size: 8px; color: var(--text2); margin-top: 1px; }
.bs-blk.ext .bs-bt { font-weight: 500; font-style: italic; }
.bs-new { opacity: 0; transform-origin: 0 0; }
.bs-now { position: absolute; height: 1.5px; background: var(--green); }

/* The Work breakdown panel beside the grid. */
.bs-hd { position: absolute; font-size: 10.5px; font-weight: 600; }
.bs-hint { position: absolute; font-size: 8px; line-height: 10px; color: var(--text2); }
.bs-box { position: absolute; border: 1px solid var(--border); }
.bs-box.outer { background: var(--surface); border-radius: 10px; }
.bs-box.inner { background: var(--bg); border-radius: 7px; }
.bs-bh { position: absolute; display: flex; align-items: center; gap: 5px; color: var(--text2); }
.bs-bh .bs-bn { flex: 1 1 auto; min-width: 0; }
.bs-bh.prod .bs-bn { font-size: 9px; font-weight: 600; letter-spacing: .3px; }
.bs-bh.item .bs-bn { font-size: 9.5px; font-weight: 600; color: var(--text); }
.bs-cnt { font-size: 8.5px; color: var(--text2); }
.bs-line { position: absolute; height: 16px; display: flex; align-items: center; gap: 5px; color: var(--text2); }
.bs-line .bs-tag { width: 3px; height: 14px; flex: 0 0 auto; }
.bs-line .bs-ln { flex: 1 1 auto; min-width: 0; font-size: 9.5px; }
.bs-line .bs-lm { font-size: 7.5px; white-space: nowrap; }
.bs-card {
  position: absolute; height: 30px; display: flex; align-items: stretch; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.bs-card .bs-tag { width: 3px; flex: 0 0 auto; }
.bs-card .bs-ct { flex: 1 1 auto; min-width: 0; padding: 4px 0 0 7px; }
.bs-card .bs-cn { font-size: 10px; }
.bs-card .bs-cm { font-size: 8px; color: var(--text2); margin-top: 1px; }
.bs-card .bs-grip { display: grid; place-items: center; width: 16px; color: var(--border); }

/* The drag feedback: the app's pill (primaryText on primaryBackground), lifted. */
.bs-pill {
  position: absolute; left: 0; top: 0; z-index: 20; height: 19px;
  display: flex; align-items: center; gap: 7px; padding: 0 7px; border-radius: 5px;
  background: #ffffff; color: #000000; white-space: nowrap; opacity: 0;
  font: 400 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .65), 0 2px 5px rgba(0, 0, 0, .35);
  transform-origin: 0 50%;
}
.bs-pill b { font-weight: 700; }
.bs-pill b:empty { display: none; }

/* ================= Internal invoice: the client link ================= */
.bi-win {
  position: absolute; left: 14px; top: 14px; width: 672px; height: 318.5px;
  border-radius: 10px 10px 0 0; overflow: hidden; background: #000;
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
.bi-chrome {
  position: absolute; left: 0; top: 0; right: 0; height: 24px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: #1c1d1f; border-bottom: 1px solid #2c2e31;
  font: 400 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bi-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4c50; }
.bi-url {
  margin-left: 14px; height: 15px; width: 300px; display: flex; align-items: center; gap: 5px;
  padding: 0 8px; border-radius: 8px; background: #2b2d31; color: #c9cbcf;
}
.bi-url svg { color: #8f949b; }
.bi-vp { position: absolute; left: 0; top: 24px; right: 0; bottom: 0; overflow: hidden; }

/* The page itself: x.css at 0.6875 of its size (16px -> 11px), dark. */
.bi-page {
  --bg: #000000; --surface: #101010; --line: #22282f; --rule: #9c9c9c;
  --text: #ffffff; --muted: #95a1ac; --alt: #343b45; --approved: #268c45;
  position: absolute; left: 0; top: 0; width: 100%;
  background: var(--bg); color: var(--text);
  font: 400 11px/1.6 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bi-band { position: relative; overflow: hidden; height: 74px; }
.bi-band-bg {
  position: absolute; inset: -8px; filter: blur(7px); transform: scale(1.05);
  background:
    radial-gradient(40% 90% at 18% 40%, #5a4a2c, transparent 70%),
    radial-gradient(45% 110% at 70% 30%, #23435e, transparent 70%),
    radial-gradient(30% 80% at 92% 80%, #6b2f2a, transparent 70%),
    #121417;
}
.bi-band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.bi-band-in { position: relative; height: 100%; display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.bi-logo {
  width: 41px; height: 41px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 15px;
}
.bi-band-name { font-size: 17.5px; font-weight: 600; line-height: 1.2; color: #fff; }
.bi-band-role { font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .82); }
.bi-root { padding: 0 14px; }
.bi-header { padding: 18px 0 4px; }
.bi-header h1 { margin: 0 0 2px; font-size: 26px; font-weight: 600; line-height: 1.1; }
.bi-muted { color: var(--muted); font-size: 9.9px; }
.bi-updated { font-size: 9.35px; margin-top: 2px; }
.bi-tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px -14px 16px; padding: 0 14px; }
.bi-tab {
  padding: 10px 13px 8px; border-bottom: 2.75px solid transparent;
  color: var(--muted); font-size: 12.4px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.bi-tab.on { color: var(--text); border-bottom-color: var(--rule); }
.bi-section h2 { margin: 0 0 9px; font-size: 19.25px; font-weight: 600; line-height: 1.2; }
.bi-section h3 { margin: 13px 0 4px; font-size: 12.4px; font-weight: 600; line-height: 1.4; }
.bi-card { background: var(--bg); border: 2px solid var(--rule); border-radius: 8.25px; padding: 9px 12px 11px; margin: 9px 0; }
.bi-agreed { border-color: var(--approved); }
.bi-agreed-head {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.bi-agreed-head .bi-tick { color: var(--approved); }
.bi-tick { width: 12.4px; text-align: center; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.bi-opt {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 5.5px; margin-bottom: 4px;
}
.bi-opt.agreed .bi-tick { color: var(--approved); }
.bi-opt-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.bi-opt-text .bi-muted { font-size: 8.25px; }
.bi-price { font-weight: 600; font-size: 12.4px; white-space: nowrap; }
.bi-box {
  width: 12.4px; height: 12.4px; flex: 0 0 auto; border-radius: 2.5px;
  border: 1px solid #858585; background: #3b3b3b;
}
.bi-prose { margin: 2px 0 6px; line-height: 1.5; }
.bi-money { display: flex; gap: 5.5px; margin: 6px 0 8px; }
.bi-tile {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 5.5px; line-height: 1.3;
}
.bi-invoice { margin-bottom: 7px; }
.bi-button {
  display: inline-block; margin: 2px 0 0; padding: 7px 12px; border-radius: 5.5px;
  background: var(--surface); color: var(--text); border: 1px solid var(--alt);
  font-size: 10.45px; font-weight: 600; line-height: 1.2; transform-origin: 50% 50%;
}
.bi-button.down { border-color: var(--rule); background: #1c1c1c; }
.bi-tail { height: 120px; }
.bi-sum {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 14px;
  background: #000; border-top: 1px solid #22282f; color: #95a1ac;
  font: 400 12.4px/1.4 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The PDF, opened by the button: a viewer's grey, its file name, the page. */
.bi-viewer { position: absolute; inset: 0; background: #525659; opacity: 0; z-index: 5; }
.bi-vpane { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; overflow: hidden; z-index: 6; }
.bi-vbar {
  position: absolute; left: 0; right: 0; top: 0; height: 20px; z-index: 7; opacity: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
  background: #323639; color: #f1f1f1;
  font: 400 8.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.bi-sheet {
  position: absolute; left: 0; top: 0; width: 560px; height: 724.7px;
  transform-origin: 0 0; opacity: 0; background: #ffffff; color: #000000;
  padding: 36.6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  font: 400 9.15px/1.22 Helvetica, Arial, sans-serif;
}
/* InvoiceExporter's sizes at 560/612: title 20, heading 12, body 10, small 8.5. */
.bi-sheet .pv-grey { color: #666666; }
.bi-sheet .pv-s { font-size: 7.78px; }
.bi-sheet .pv-h { font-size: 11px; font-weight: 700; }
.bi-sheet .pv-b { font-weight: 700; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pv-head .pv-r { text-align: right; }
.pv-title { font-size: 18.3px; font-weight: 700; line-height: 1.1; margin-bottom: 3.7px; }
.pv-billto { margin-top: 18.3px; }
.pv-table { margin-top: 18.3px; }
.pv-tr { display: flex; }
/* TableBorder(horizontalInside): a rule between every two rows, none outside. */
.pv-tr + .pv-tr { border-top: .8px solid #dddddd; }
.pv-tr > :first-child { flex: 4 1 0; min-width: 0; }
.pv-tr > :last-child { flex: 1 1 0; text-align: right; }
.pv-th { font-size: 7.78px; font-weight: 700; padding-bottom: 5.5px; }
.pv-grp > :first-child { padding: 7.3px 0 1.8px; font-size: 7.78px; font-weight: 700; color: #666666; text-transform: uppercase; }
.pv-prd > :first-child { padding: 3.7px 0 1.8px 11px; font-size: 7.78px; font-weight: 700; }
.pv-ln > * { padding: 2.75px 0; }
.pv-ln > :first-child { padding-left: 11px; }
.pv-totals { width: 201px; margin: 11px 0 0 auto; }
.pv-row { display: flex; justify-content: space-between; padding: 1.8px 0; }
.pv-div { height: .8px; background: #dddddd; margin: 3px 0; }
.pv-bal { display: flex; justify-content: space-between; margin-top: 5.5px; padding: 7.3px 9.15px; background: #f5f5f5; font-weight: 700; }
.pv-sec { margin-top: 14px; }
.pv-sec .pv-h { margin-bottom: 2px; }

/* ================= Cost estimate: the Pricing Calculator ================= */
.bn-scene.be-scene { width: 450px; height: 562.5px; }

/* An iPhone in titanium, bleeding off the foot of the tile. */
.be-phone {
  position: absolute; border-radius: 50px;
  background: linear-gradient(150deg, #6a6d72 0%, #2b2d31 22%, #1a1b1e 55%, #3d4045 82%, #5c5f64 100%);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.be-phone::before { content: ""; position: absolute; inset: 3px; border-radius: 47px; background: #040404; }
.be-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2a2c30, #6a6d72); }
.be-screen { position: absolute; left: 9px; top: 9px; right: 9px; bottom: 0; border-radius: 41px 41px 0 0; overflow: hidden; background: #060708; }

/* The app, in its own points (390 wide), scaled to the glass by bento.js. */
.be-app {
  --ink: #D5D8DA; --ink-dim: #909599; --cap: #F2F3F4; --cap-dim: #83888C;
  --screen: #F4F5F6; --screen-dim: #8A9094; --ghost: rgba(255, 255, 255, .141);
  --live: 84, 196, 61; --amber: 255, 179, 71;
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0;
  background: linear-gradient(180deg, #131518 0%, #0C0E0F 55%, #060708 100%);
  color: var(--cap); font: 400 14px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
.be-app .be-a { position: absolute; }
.be-tab-nums { font-variant-numeric: tabular-nums; }

/* The status bar and the island. */
.be-island { position: absolute; left: 133px; top: 11px; width: 124px; height: 36px; border-radius: 18px; background: #000; }
.be-time { position: absolute; left: 30px; top: 15px; width: 64px; text-align: center; font: 600 16px/20px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: #fff; letter-spacing: -.2px; }
.be-sig { position: absolute; top: 20px; display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.be-sig i { display: block; width: 3px; border-radius: 1px; background: #fff; }
.be-batt { position: absolute; top: 19px; width: 25px; height: 12px; border-radius: 3.5px; border: 1px solid rgba(255, 255, 255, .38); padding: 1.5px; }
.be-batt i { display: block; height: 100%; width: 78%; border-radius: 2px; background: #fff; }
.be-batt::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .45); }

/* Silkscreen: the printing on the metal. */
.be-silk { font-weight: 600; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--ink); }
.be-silk.dim { color: var(--ink-dim); }

/* DeviceKey: a charcoal cap standing in its well, a lamp behind it, a bar
   under a selected one. The cap travels 2.5 points when it is pressed. */
.be-key { position: absolute; border-radius: 6px; background: rgba(0, 0, 0, .8); }
.be-cap {
  position: absolute; left: 1px; top: 1px; right: 1px; height: calc(100% - 6.5px); border-radius: 5px;
  background: linear-gradient(180deg, #25282B, #191B1D);
  box-shadow: 0 2.7px 6px rgba(0, 0, 0, .58), inset 0 0 0 1px #101112;
}
.be-cap::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}
.be-glow {
  position: absolute; inset: 0; border-radius: 5px; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--lamp), .05), rgba(var(--lamp), .22));
  box-shadow: 0 0 5px 1.5px rgba(var(--lamp), .22);
}
.be-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: .72px; line-height: 1; color: var(--cap); text-transform: uppercase;
}
.be-face svg { fill: currentColor; }
.be-bar { position: absolute; left: 5px; right: 5px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--cap); opacity: 0; }

/* The glass: a true-black pane behind a bezel, a sheen across it. */
.be-glass {
  position: absolute; border-radius: 7px; background: #0E0F10;
  border: 1px solid rgba(0, 0, 0, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
.be-pane { position: absolute; inset: 2px; border-radius: 5px; background: #000; overflow: hidden; }
.be-pane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(111deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .09) 37%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .05) 56%, rgba(255, 255, 255, 0) 63%);
}
.be-scr { font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--screen); }
.be-ind { display: flex; gap: 6px; transform-origin: 0 50%; }
.be-ind span { font-size: 8.5px; font-weight: 600; letter-spacing: .765px; line-height: 1; color: var(--ghost); }
.be-ind span.lit { color: var(--screen); text-shadow: 0 0 4px rgba(244, 245, 246, .55); }
.be-stars { display: flex; }
.be-stars span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--screen); }
.be-stars svg { filter: drop-shadow(0 0 2px rgba(244, 245, 246, .55)); }
.be-head { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; line-height: 1.1; color: var(--screen); text-transform: uppercase; }
.be-rule { height: 1px; background: var(--ghost); }
.be-sum { display: flex; align-items: flex-end; }
.be-sum .be-cur { font-size: 11px; font-weight: 500; color: var(--screen); padding: 0 4px 4px 0; line-height: 1.15; }
.be-sum svg { overflow: visible; }
.be-field { display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: .255px; line-height: 9.8px; }
.be-field b { font-weight: 500; color: var(--screen-dim); }
.be-chips { display: flex; gap: 4px; }
.be-chip {
  flex: 0 1 auto; min-width: 0; border-radius: 5px; background: #0E0F10; padding: 2px;
  border: 1px solid rgba(0, 0, 0, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
.be-chip > span {
  display: flex; gap: 3px; border-radius: 3px; background: #000; padding: 2px 4px;
  font-size: 8.5px; font-weight: 500; letter-spacing: .255px; line-height: 9.8px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.be-chip i { font-style: normal; color: var(--screen-dim); }
.be-chip b { font-weight: 500; color: var(--screen); }

/* The AI key, the title slot, SAVE. */
.be-ai { position: absolute; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .35); overflow: hidden;
  background: #000 url(/img/splash.jpg) 40% 50% / 340% auto no-repeat;
  box-shadow: 0 0 7px 1px rgba(155, 92, 246, .45), 0 0 5px rgba(45, 140, 255, .35); }
.be-ai::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.be-ai svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); fill: #f5f4f5; }
.be-slot { position: absolute; border-radius: 4px; background: #08090A; border: 1px solid rgba(255, 255, 255, .18); display: flex; align-items: center; padding: 0 7px; gap: 3px; overflow: hidden; }
.be-slot .v { font-size: 14px; color: var(--cap); font-variant-numeric: tabular-nums; white-space: nowrap; }
.be-slot .d { font-size: 14px; color: var(--cap-dim); white-space: nowrap; }
.be-slot .h { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.be-caret { width: 1.5px; height: 17px; background: rgb(var(--live)); opacity: 0; margin-left: -2px; }

/* CalcModule and CalcItemCard. */
.be-mod {
  position: absolute; left: 26px; width: 338px; border-radius: 6px;
  background: linear-gradient(180deg, #25282B, #191B1D);
  border: 1px solid #101112; box-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.be-meta { font-size: 9.5px; line-height: 1.3; color: var(--cap-dim); white-space: nowrap; }
.be-ttl { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-txt { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.be-amt { position: absolute; right: 40px; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
.be-amt .be-chip { flex: none; }
.be-amt em { font-style: normal; font-size: 7.5px; font-weight: 600; letter-spacing: .675px; line-height: 1; color: var(--ghost); }
.be-hold { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: rgb(var(--live)); }
.be-hold svg { fill: currentColor; }
.be-body { position: absolute; left: 0; top: 471px; width: 390px; height: 400px; overflow: hidden; }
.be-tab { position: absolute; left: 0; top: 0; width: 390px; height: 400px; }

/* The notice the save raises, top right, as AppNotices draws it on a phone. */
.be-note {
  position: absolute; right: 12px; top: 59px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: #0D0D0D; border-left: 3px solid rgb(var(--live));
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35); font-size: 13px; line-height: 1.3; color: #fff; white-space: nowrap; opacity: 0;
}
.be-note svg { fill: rgb(var(--live)); }

/* A finger, as a screen recording shows one. */
.be-touch {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, .26); border: 1.5px solid rgba(255, 255, 255, .7); opacity: 0; z-index: 9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}