/* Phone layout, from the Figma "Web App" > Mobile frames (890 x 410, landscape only). mobile.js puts
   .mobile on <html> when the short side of the screen is 500px or less and the phone lies sideways,
   and .portrait when it is held upright (then only the "rotate your phone" message shows).
   The balloon panel, the unit panel and the unit page column follow the mockups approved with the
   client, as Figma has no phone design for them. */

/* Parts that exist only on phones (and the phone-only bits of shared parts). */
.rail, .mhead, .mshade, .filters-open, .amen-pick, .rotate, .unit-status, .unit-fns .fn-inst, .unit-fns.only-inst { display: none; }

/* ---------- Upright phone ---------- */
html.portrait .rotate {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; background: var(--bg); color: rgba(255, 255, 255, 0.8); font-size: 15px; text-align: center;
}
html.portrait .rotate p { margin: 0; }

html.mobile {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --rail-x: calc(20px + var(--sl));          /* the rail's left edge */
  --col-x: calc(var(--rail-x) + 60px);       /* the column's left edge, next to the rail */
  --col-w: 200px;
  --sheet: linear-gradient(135deg, rgba(60, 58, 48, 0.94), rgba(40, 40, 36, 0.94));
}

/* ---------- Rail (replaces the top menu) ---------- */
html.mobile .topbar { display: none; }
html.mobile .rail {
  position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 55px; box-sizing: border-box; padding: 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
html.mobile .rail-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
html.mobile .rail-btn img { display: block; }
html.mobile .rail-back:disabled { opacity: 0.3; cursor: default; }
html.mobile .rail-tabs {
  position: relative; flex: 0 1 auto; min-height: 0; margin: auto 0; width: 55px; box-sizing: border-box;
  display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--glass-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.26), 0 4px 0 1px rgba(0, 0, 0, 0.34);
}
html.mobile .rail-tab {
  position: relative; flex: 0 1 60px; min-height: 36px; display: grid; place-items: center; cursor: pointer; opacity: 0.5;
}
html.mobile .rail-tab img { display: block; }
html.mobile .rail-tab:disabled { opacity: 0.2; cursor: default; }
html.mobile .rail-tab.active { opacity: 1; cursor: default; }
html.mobile .rail-tab.active::after {
  content: ""; position: absolute; right: 3px; top: 50%; width: 4px; height: 17px; margin-top: -8.5px;
  border-radius: 6px; background: var(--accent);
}

/* The page's title next to the rail, and under it the space's name on a thumbnail page. */
html.mobile .mhead {
  display: block; position: absolute; left: calc(var(--col-x) + 18px); top: 24px; width: calc(var(--col-w) - 32px);
  pointer-events: none;
}
html.mobile .mtitle {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
html.mobile .msub {
  margin: 6px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px; font-weight: 600; line-height: 20px; color: rgba(255, 255, 255, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.mobile .msub:empty { display: none; }

/* Dark fade behind the rail where there is no column (orbit pages, or the column closed). */
html.mobile .mshade {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--col-x) + 190px); pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0.78) calc(var(--col-x) + 10px), rgba(10, 10, 10, 0));
  opacity: 0; transition: opacity 0.3s;
}
html.mobile body:not(.has-col) .mshade, html.mobile body.col-closed .mshade { opacity: 1; }

/* ---------- The column next to the rail (thumbnail page, sales cards, unit page) ---------- */
html.mobile .amen-side, html.mobile .units, html.mobile .unit-side {
  left: 0; right: auto; top: 0; bottom: 0; width: calc(var(--col-x) + var(--col-w) + 20px); box-sizing: border-box;
  background: linear-gradient(90deg, #0e0e0e, #0e0e0e 80%, rgba(14, 14, 14, 0));
  transition: opacity 0.3s, transform 0.4s var(--ease-quick), visibility 0s;
}
html.mobile body.col-closed .amen-side, html.mobile body.col-closed .units, html.mobile body.col-closed .unit-side {
  opacity: 0; visibility: hidden; transform: translateX(-30px); pointer-events: none;
  transition: opacity 0.25s, transform 0.4s var(--ease-quick), visibility 0s 0.4s;
}
html.mobile .amen-side-bg { display: none; }
html.mobile .amen-side-scroll {
  left: var(--col-x); right: 20px; bottom: 0; padding: 0 14px 28px 18px;
  -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 40px), transparent);
}

/* Small chip buttons ("View All Photos", the unit page's buttons, More Info). */
html.mobile .amen-all {
  height: 26px; margin: 0; padding: 0 10px 0 8px; gap: 5px; border-radius: 13px; filter: none;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px; font-weight: 600; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.mobile .amen-all::before { display: none; }
html.mobile .amen-all img { width: 14px; height: 14px; }

/* ---------- Thumbnail page ---------- */
html.mobile .amen-side-scroll { top: 100px; }
html.mobile .amen-title { display: none; }   /* the space's name is under the page title */
html.mobile .amen-side-content { margin: 0; padding: 6px 0 0; gap: 12px; }
html.mobile .amen-gallery { gap: 8px; }
html.mobile .amen-grid { grid-template-rows: 40px 40px; margin: -3px; }
html.mobile .amen-cell { padding: 3px; }
html.mobile .amen-card, html.mobile .amen-card::after { border-radius: 12px; }
html.mobile .amen-more .amen-card { font-size: 10px; padding: 6px; }
html.mobile .amen-html { padding: 0; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, 0.75); }
html.mobile .amen-html h1 { font-size: 20px; }
html.mobile .amen-html h2 { font-size: 17px; }
html.mobile .amen-html h3 { font-size: 15px; }
html.mobile .amen-html hr { margin: 16px 0; }

/* Thumbnails in a column on the right, the section picker above them. */
html.mobile .amen-bottom {
  left: auto; right: 0; top: 0; bottom: 0; width: calc(156px + var(--sr)); height: auto;
  padding: 76px calc(15px + var(--sr)) 14px 15px; gap: 0; align-items: stretch;
}
html.mobile .amen-bottom-bg::before {
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent);
}
html.mobile .amen-bottom-bg::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0)); }
html.mobile .amen-bottom-bg { left: -80px; }
html.mobile .amen-strip { flex-direction: column; gap: 0; align-items: stretch; }
html.mobile .amen-prev, html.mobile .amen-next { display: none; }
html.mobile .amen-cards {
  flex-direction: column; gap: 4px; width: auto; max-width: none; height: auto; max-height: 100%;
  overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
}
html.mobile .amen-thumb { flex: none; height: 65px; padding: 5px; border-radius: 22px; }
html.mobile .amen-thumb::before { border-radius: 22px; }
html.mobile .amen-thumb-card { padding: 0 6px; align-items: center; border-radius: 17px; }
html.mobile .amen-thumb-card::after { border-radius: 17px; }
html.mobile .amen-thumb-card::before { background: rgba(0, 0, 0, 0.35); }
html.mobile .amen-thumb-title { font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
html.mobile .amen-thumb-bar { bottom: 0; }

html.mobile .amen-pick:not([hidden]) {
  position: absolute; top: 12px; right: calc(12px + var(--sr)); display: flex; align-items: center; gap: 10px; cursor: pointer;
  max-width: calc(100% - 24px);
}
html.mobile .amen-pick-name {
  font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
html.mobile .amen-pick-btn {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--glass-line);
}
html.mobile .amen-pick-btn img { display: block; transition: transform 0.3s var(--ease-quick); }
html.mobile .amen.picking .amen-pick-btn img { transform: rotate(180deg); }
/* The section list, under the button. */
html.mobile .amen-switch {
  position: absolute; top: 66px; right: calc(12px + var(--sr)); z-index: 5; flex-direction: column; padding: 4px;
  min-width: 150px; max-height: calc(100% - 80px); overflow-y: auto; border-radius: 18px;
  background: rgba(36, 36, 36, 0.92); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--ease-quick), visibility 0s 0.25s;
}
html.mobile .amen.picking .amen-switch { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html.mobile .amen-switch-pill { display: none; }
html.mobile .amen-tab { height: 36px; padding: 0 14px; border-radius: 14px; font-size: 12px; text-align: left; }
html.mobile .amen-tab.active { background: #fff; }

/* ---------- Sales: cards in the column, filters as a sheet from the right ---------- */
html.mobile .units { padding-left: var(--col-x); }
html.mobile .units::before { display: none; }
html.mobile .units-head { padding: 62px 20px 8px 18px; }
html.mobile .units-title { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
html.mobile .units-toggle { display: none; }
html.mobile .units-collapsed .units { pointer-events: auto; }
html.mobile .units-collapsed .units-title, html.mobile .units-collapsed .units-list { transform: none; opacity: 1; visibility: visible; }
html.mobile .units-list { padding: 2px 20px 30px 18px; gap: 8px; }
html.mobile .unit-card { width: 100%; padding: 10px 12px 9px; border-radius: 20px; }
html.mobile .unit-card:hover:not(:disabled), html.mobile .unit-card.hover:not(:disabled) { transform: none; }
html.mobile .uc-code { font-size: 13px; }
html.mobile .uc-status { font-size: 0; gap: 0; }   /* the coloured dot only */
html.mobile .uc-tags { margin-top: 7px; gap: 3px; }
html.mobile .uc-tag { padding: 3px 6px; font-size: 8px; }
html.mobile .uc-price { margin-top: 6px; font-size: 12px; }

html.mobile .filters-shade, html.mobile .filters-summary { display: none; }
html.mobile .filters-open {
  display: grid; place-items: center; position: absolute; top: 12px; right: calc(12px + var(--sr)); width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--glass-line); cursor: pointer; pointer-events: auto;
}
html.mobile .filters-open img { display: block; }
html.mobile .no-filters .filters-open { display: none; }
html.mobile .filters {
  left: auto; right: 0; top: 0; bottom: 0; width: min(615px, calc(100% - var(--col-x) - 30px));
  padding: 22px calc(20px + var(--sr)) 14px 26px; border-radius: 40px 0 0 40px; z-index: 2;
  clip-path: none; transform: translateX(105%); visibility: hidden;
  transition: transform 0.4s var(--ease-quick), visibility 0s 0.4s;
}
html.mobile .sheet-open .filters { transform: none; visibility: visible; transition-delay: 0s; }
html.mobile .filters-collapsed .filters-title, html.mobile .filters-collapsed .filters-body { opacity: 1; pointer-events: auto; }
html.mobile .filters-close { position: absolute; top: 18px; right: calc(18px + var(--sr)); margin: 0; z-index: 1; }
html.mobile .filters-close img { transform: rotate(180deg); }
html.mobile .filters-title { margin: 4px 0 16px; font-size: 16px; }
html.mobile .filters-body {
  padding: 0 0 6px; columns: 3 140px; column-gap: 44px; column-rule: 1px solid rgba(255, 255, 255, 0.14);
}
html.mobile .filters-sep { display: none; }
html.mobile .f-sec { break-inside: avoid; padding: 0 0 18px; }
html.mobile .f-title { margin: 0 0 10px; }
html.mobile .compass { width: 116px; height: 116px; }

/* Unit panel: a sheet on the right, its buttons stacked on the left, the unit's details on the right. */
html.mobile .unit-panel {
  left: auto !important; top: 10px !important; right: calc(10px + var(--sr)); bottom: 10px; width: 360px; max-width: calc(100% - 20px);
  padding: 10px; border-radius: 34px; background: var(--sheet); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: grid; grid-template-columns: 66px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 10px;
  cursor: default; transform: translateX(24px);
}
html.mobile .unit-panel:has(.unit-fns[hidden]) { grid-template-columns: minmax(0, 1fr); }
html.mobile .unit-panel.open { transform: none; }
html.mobile .unit-close { top: 12px; right: 12px; width: 28px; height: 28px; background: rgba(255, 255, 255, 0.18); border: 0; backdrop-filter: none; }
html.mobile .unit-close img { width: 13px; height: 13px; }
html.mobile .unit-fns {
  grid-column: 1; grid-row: 1 / 3; flex-direction: column; gap: 6px; margin: 0; padding: 0; background: none; border-radius: 0;
}
html.mobile .unit-fns.only-inst:not([hidden]) { display: flex; }
html.mobile .unit-fns .fn-inst { display: flex; }
html.mobile .unit-fn {
  flex: 1 1 0; min-height: 0; justify-content: center; gap: 4px; padding: 4px 2px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 9.5px; font-weight: 600; line-height: 1.15;
}
html.mobile .unit-fn img { width: 18px; height: 18px; }
html.mobile .unit-fn + .unit-fn::before { display: none; }
html.mobile .unit-wide { display: none !important; }
html.mobile .unit-code {
  grid-column: -2; height: auto; padding: 8px 40px 0 10px; background: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: flex-start; place-items: initial; font-size: 30px; line-height: 36px;
}
html.mobile .unit-code span { padding: 0; max-width: 100%; }
html.mobile .unit-status:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 16px;
  font-weight: 600; letter-spacing: 0; color: #e3e0c3;
}
html.mobile .unit-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
html.mobile .unit-rows {
  grid-column: -2; margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.25);
  gap: 0 16px; align-content: space-evenly; font-size: 13.5px; overflow-y: auto;
}
html.mobile .unit-rows dd { font-weight: 600; }
html.mobile .unit-rows .row-status { display: none; }

/* ---------- Unit page column (style of the Figma "Unit B453" frame) ---------- */
html.mobile .unit-side .amen-side-scroll, html.mobile body.mode-thumbs .unit-side .amen-side-scroll { top: 60px; bottom: 0; }
html.mobile .us-title { display: none; }   /* the unit's code is the page title */
html.mobile .us-content { margin: 0; padding: 6px 0 0; gap: 12px; }
html.mobile .us-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.mobile .us-fact { gap: 10px; }
html.mobile .us-icon { width: 36px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); }
html.mobile .us-icon img { width: 18px; height: 18px; }
html.mobile .us-text { gap: 2px; }
html.mobile .us-val, html.mobile .us-fact.long .us-val, html.mobile .us-fact.price .us-val, html.mobile .us-fact.status .us-val {
  font-size: 17px; font-weight: 600; line-height: 20px; letter-spacing: 0; opacity: 1; margin: 0; align-items: baseline;
}
html.mobile .us-fact.status .us-val { align-items: center; gap: 6px; }
html.mobile .us-val small { font-size: 10px; }
html.mobile .us-label { font-size: 10.5px; opacity: 0.55; }
html.mobile .us-desc { font-size: 12.5px; line-height: 18px; opacity: 0.75; }
html.mobile .us-plan-title { font-size: 12px; opacity: 0.6; }
html.mobile .us-plan-btn { width: 120px; height: 76px; border-radius: 14px; background: #f2f2ef; }
html.mobile .us-plan-btn img { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 14px; }
html.mobile .us-fns { gap: 6px; margin: 0; }
html.mobile .us-more { margin: -6px 0 0; }

/* ---------- Balloons and their panel ---------- */
/* Balloon sizes on phones: /shared/balloon.css. */
/* The panel is a sheet on the right like the unit panel: name and close button, picture, buttons, text. */
html.mobile .panel {
  left: auto !important; top: 10px !important; right: calc(10px + var(--sr)); bottom: 10px; width: 260px !important;
  max-height: none; padding: 12px; border-radius: 34px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--sheet);
  cursor: default; transform: translateX(24px);
}
html.mobile .panel.open { transform: none; }
html.mobile .panel-text { display: contents; }
html.mobile .panel-title { order: -1; flex: none; padding: 2px 40px 10px 6px; font-size: 20px; line-height: 28px; }
html.mobile .panel-close {
  top: 13px; right: 13px; padding: 0; width: 28px; height: 28px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18); border: 0; box-shadow: none; backdrop-filter: none;
}
html.mobile .panel-close img { width: 13px; height: 13px; }
html.mobile .panel-media { padding: 0; }
html.mobile .panel-image { width: 100% !important; height: 130px !important; border-radius: 18px; }
html.mobile .panel-actions, html.mobile .panel-media[hidden] + .panel-actions { padding: 0 0 0 2px; margin-top: 8px; gap: 6px; flex-wrap: wrap; }
html.mobile .panel-btn {
  flex: none; height: 26px; padding: 0 10px 0 8px; gap: 5px; border-radius: 13px; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18);
}
html.mobile .panel-btn span { padding: 0; }
html.mobile .panel-btn img { width: 14px; height: 14px; }
html.mobile .panel-desc {
  flex: 1 1 auto; min-height: 0; max-height: none; margin: 10px 6px 0; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, 0.8);
}

/* ---------- Rotation controls: small round buttons at the bottom right ---------- */
html.mobile .navigation {
  left: auto; right: calc(16px + var(--sr)); bottom: 14px; transform: none; width: auto; height: 46px;
  display: flex; align-items: center; gap: 10px;
}
html.mobile .cube-frame { position: static; order: 1; transform: none; width: 46px; height: 46px; }
html.mobile .cube { transform: scale(0.8); }
html.mobile .turn-btn { position: static; transform: none; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
html.mobile .turn-btn.right { order: 2; }
html.mobile .turn-btn:active { transform: scale(0.96); }
html.mobile .turn-label { display: none; }
html.mobile .clips-daynight { top: 14px; right: calc(16px + var(--sr)); height: 46px; min-width: 46px; padding: 0 12px; }
html.mobile .clips-daynight span { display: none; }
/* Sales menus on idle videos: the floors next to the right edge, up and down in the button row. */
html.mobile .clips-floors { right: calc(12px + var(--sr)); top: 72px; bottom: 72px; transform: none; max-height: none; justify-content: center; }
html.mobile .clips-floors button { height: 32px; font-size: 13px; }
html.mobile .clips-floors button.active { font-size: 15px; }
html.mobile .clips-floors button.active::after { width: 22px; }
html.mobile body.mode-sales .clips-daynight { right: calc(16px + var(--sr)); }
html.mobile body.has-floors .clips-daynight { right: calc(76px + var(--sr)); }
html.mobile .floor-btn { position: static; margin: 0; order: -1; }
html.mobile body.has-floors .navigation { bottom: 14px; }
html.mobile .block-pop { width: 220px; padding: 14px; }

/* ---------- Gallery: photo strip with up/down arrows on the left, the photo on the right ---------- */
html.mobile .gallery {
  padding: 18px calc(18px + var(--sr)) 18px calc(18px + var(--sl)); display: grid; grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: 0 22px;
}
html.mobile .gallery-main { grid-column: 2; grid-row: 1; position: relative; }
html.mobile .gallery-photo { border-radius: 24px; }
html.mobile .gallery-bar {
  grid-column: 2; grid-row: 1; z-index: 1; align-self: start; padding: 18px 16px 0 27px; pointer-events: none;
}
html.mobile .gallery-title { font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
html.mobile .gallery-close {
  pointer-events: auto; width: 44px; height: 44px; margin-top: -6px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(60, 60, 60, 0.6); border: 1px solid var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
html.mobile .gallery-thumbs {
  grid-column: 1; grid-row: 1; flex-direction: column; justify-content: safe center; height: auto; padding: 56px 0;
  overflow-x: hidden; overflow-y: auto; gap: 4px;
}
html.mobile .gallery-thumbs[hidden] { display: none; }
html.mobile .thumb { width: 84px; height: 54px; padding: 3px; }
html.mobile .gallery .round-btn { position: absolute; left: calc(18px + var(--sl) + 20px); transform: none; padding: 9px; }
html.mobile .gallery-prev { top: 18px; }
html.mobile .gallery-next { top: auto; right: auto; bottom: 18px; }
html.mobile .gallery .round-btn img { transform: rotate(90deg); }
html.mobile .gallery .round-btn:active { transform: scale(0.96); }
html.mobile .gallery-main { position: static; }

/* ---------- Modals ---------- */
html.mobile .pano-bar { padding: 10px calc(20px + var(--sr)) 10px calc(20px + var(--sl)); }
html.mobile .pano-title { font-size: 15px; }
html.mobile .plan-card { width: min(640px, 80vw); height: 92vh; padding: 16px 20px; border-radius: 24px; }
html.mobile .plan-code { font-size: 20px; }
html.mobile .plan-type { margin: 6px 0 8px; font-size: 13px; }
html.mobile .plan-zoom { right: 16px; bottom: 14px; }
html.mobile .modal-close { top: -10px; right: -10px; width: 34px; height: 34px; }
html.mobile .html-card { max-height: 90vh; padding: 18px 20px; border-radius: 24px; }
html.mobile .html-title { font-size: 16px; margin-bottom: 10px; }
html.mobile .html-body { font-size: 13px; }