@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-latin-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-latin-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-latin-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-neutral-300: #d4d4d7;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --font-heading: "Barlow Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "Barlow", "IBM Plex Sans", system-ui, sans-serif;
  --door-duration: 4s;
  --art-w: 1920px;
  --art-h: 1080px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
img { max-width: 100%; height: auto; object-fit: contain; }

.stage-wrap { width: 100vw; height: 100vh; overflow: hidden; background: var(--color-bg); }
.stage {
  width: var(--art-w);
  height: var(--art-h);
  transform-origin: 0 0;
  background: var(--color-bg);
  color: var(--color-text);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.en { font-size: 12px; text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-weight: 400; }
.num { font-family: var(--font-heading); font-weight: 600; font-variant-numeric: tabular-nums; }

header.tb { display: flex; align-items: stretch; height: 84px; border-bottom: 1px solid var(--color-divider); }
.tb-obj { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 14px 0 12px 56px; min-width: 0; }
.tb-kicker { display: flex; align-items: center; gap: 14px; }
.tb-obj h1 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cell { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 28px; border-left: 1px solid var(--color-divider); }
.tb-cell .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.tb-cell .val { font-size: 16px; font-variant-numeric: tabular-nums; }
.tb-live { display: flex; align-items: center; gap: 9px; padding: 0 28px; border-left: 1px solid var(--color-divider); }
.tb-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.tb-live .txt { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--color-accent-700); }
.tb-gear { display: flex; align-items: center; padding: 0 44px 0 24px; border-left: 1px solid var(--color-divider); }
.tb-back { padding: 0 48px 0 28px; }
.tb-back .btn-primary { font-size: 15px; letter-spacing: .04em; padding: 11px 22px; }
.tag { font-size: 10px; letter-spacing: .14em; padding: 2px 8px; border: 1px solid var(--color-divider); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-weight: 600; }
.btn-icon { width: 46px; height: 46px; color: var(--color-accent); }
.btn-icon:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); letter-spacing: .06em; text-transform: uppercase; }
.btn-primary:hover { background: var(--color-accent-600); }

#view-dash {
  height: 100%;
  display: grid;
  grid-template-rows: 84px minmax(0, 1fr) 190px;
  min-height: 0;
}

main.dash { display: grid; grid-template-columns: minmax(0, 1fr) 880px; gap: 0 56px; padding: 26px 56px 0; min-height: 0; }
main.dash.no-door { grid-template-columns: minmax(0, 1fr); }
.hero-col { display: flex; flex-direction: column; min-height: 0; }
.hero-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.hero-rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }
.hero-num {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 330px;
  line-height: .86;
  letter-spacing: 0;
  margin-left: -.052em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats { display: flex; align-items: stretch; border-top: 1px solid var(--color-divider); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 36px 2px 0; }
.stat + .stat { border-left: 1px solid var(--color-divider); padding-left: 36px; }
.stat .lbl { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.stat .val { font-family: var(--font-heading); font-weight: 600; font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }

.blueprint { position: relative; border: 1px solid var(--color-divider); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.corner,
.corner.tl,
.corner.tr,
.corner.bl,
.corner.br { display: none !important; }

figure.door-plate { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.door-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  min-height: 0;
  padding: 20px 28px;
}
.door-stage {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  height: 470px;
  padding: 0;
}
.door {
  position: relative;
  flex: none;
  width: 420px;
  height: 470px;
  max-width: 420px;
  max-height: 470px;
  aspect-ratio: 1 / 1.12;
  object-fit: contain;
  overflow: hidden;
  background: #0a0a0a;
}
.shaft { position: absolute; z-index: 0; top: 10.5%; left: 6%; right: 6%; bottom: 3.6%; background: #0a0a0a; }
.frame, .leaf-photo {
  background-image: url("/static/door/product.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}
.frame {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), linear-gradient(#000,#000), linear-gradient(#000,#000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 10.5%, 100% 3.6%, 6% 100%, 6% 100%;
  -webkit-mask-position: top, bottom, left, right;
  mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), linear-gradient(#000,#000), linear-gradient(#000,#000);
  mask-repeat: no-repeat;
  mask-size: 100% 10.5%, 100% 3.6%, 6% 100%, 6% 100%;
  mask-position: top, bottom, left, right;
}
.leaf {
  position: absolute; z-index: 2; top: 10.5%; bottom: 3.6%; width: 44%; overflow: hidden;
  transition: transform var(--door-duration) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.leaf::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8%;
  bottom: 8%;
  left: 18%;
  width: 16%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
  opacity: 0.55;
}
.door.state-moving .leaf::before {
  animation: door-sheen var(--door-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes door-sheen {
  from { left: -12%; opacity: 0; }
  22% { opacity: 0.9; }
  to { left: 88%; opacity: 0.12; }
}
.door.state-moving .leaf {
  box-shadow: 10px 0 20px rgba(0,0,0,0.42);
}
.leaf-photo {
  display: block;
  position: absolute;
  z-index: 0;
  width: calc(100% * 100 / 44);
  height: calc(100% * 100 / 85.9);
  pointer-events: none;
}
.leaf-slow { left: 6%; z-index: 2; }
.leaf-slow .leaf-photo { left: calc(100% * -6 / 44); top: calc(100% * -10.5 / 85.9); }
.leaf-fast { left: 50%; z-index: 3; }
.leaf-fast .leaf-photo { left: calc(100% * -50 / 44); top: calc(100% * -10.5 / 85.9); }
.door.state-closed .leaf-slow, .door.state-closed .leaf-fast,
.door.state-moving.from-open .leaf-slow, .door.state-moving.from-open .leaf-fast { transform: translateX(0); }
.door.state-open .leaf-slow, .door.state-moving.from-closed .leaf-slow { transform: translateX(-12%); }
.door.state-open .leaf-fast, .door.state-moving.from-closed .leaf-fast { transform: translateX(-96%); }
.door.snap { --door-duration: .35s; }
.door.anim { --door-duration: 4s; }
.kiosk[data-state="NO_SIGNAL"] .door { opacity: .35; }
.kiosk[data-state="FAULT"] .leaf { outline: 2px solid #1d1f20; outline-offset: -2px; }

.state-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
  padding: 0;
}
.state-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.state-word { font-family: var(--font-heading); font-weight: 600; font-size: 92px; line-height: .95; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; }
.state-word.is-open { color: var(--color-accent); }
.state-word.is-moving { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.state-meta { display: flex; align-items: baseline; gap: 13px; margin-top: 6px; }
.state-time { font-family: var(--font-heading); font-weight: 600; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.state-in { display: inline; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.manual-wrap { width: 100%; margin-top: 22px; padding: 0; }
.manual-wrap .btn-primary { width: 100%; font-size: 21px; padding: 15px; }
figcaption.fig { display: none !important; }
figcaption.fig .id { font-weight: 600; color: var(--color-accent-700); }

.bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 520px; gap: 0 24px; padding: 8px 56px 12px; height: 190px; min-height: 190px; max-height: 190px; align-items: stretch; }
.bottom.single { grid-template-columns: minmax(0, 1fr); }
.charts { display: contents; }
.bottom .blueprint { height: 100%; min-height: 0; overflow: hidden; }
.plate-h { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--color-divider); padding: 9px 20px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); flex: none; }
.bars-24 {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 5px;
  align-items: end;
  flex: 1 1 auto;
  min-height: 84px;
  height: 84px;
  border-bottom: 1px solid var(--color-divider);
  margin: 14px 20px 0;
  padding-bottom: 1px;
}
.bars-24 > i { display: block; width: 100%; min-height: 8%; background: var(--color-accent-500); font-style: normal; align-self: end; transform: none; }
.bars-24 > i.zero { background: var(--color-neutral-300); }
.axis { display: flex; justify-content: space-between; margin: 6px 20px 10px; font-size: 11px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 55%, transparent); flex: none; }
.month-nums, .bars-6, .month-lbl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.month-nums { padding: 12px 20px 0; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; color: color-mix(in srgb, var(--color-text) 70%, transparent); flex: none; }
.bars-6 {
  align-items: end;
  flex: 1 1 auto;
  min-height: 58px;
  height: 58px;
  border-bottom: 1px solid var(--color-divider);
  margin: 6px 20px 0;
  padding-bottom: 1px;
  overflow: hidden;
  transform: none;
}
.bars-6 > i {
  display: block;
  width: 100%;
  min-height: 4%;
  background: var(--color-accent-500);
  background-image: none;
  font-style: normal;
  align-self: end;
  transform: none;
}
.month-lbl { margin: 6px 20px 10px; font-size: 11px; letter-spacing: .08em; text-align: center; color: color-mix(in srgb, var(--color-text) 55%, transparent); flex: none; }
.counter-row { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.counter-row:last-child { border-bottom: 0; }
.counter-row .lab { font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.counter-row .nr { font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--color-accent-700); }
.counter-row .val { font-family: var(--font-heading); font-weight: 600; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }

.settings { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
#view-settings { height: 100%; overflow: hidden; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 36px 48px; align-items: start; overflow-y: auto; min-height: 0; }
.set-col { display: flex; flex-direction: column; gap: 32px; }
.field { padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.field:last-child { border-bottom: 0; }
.field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-bottom: 7px; }
.input { width: 100%; min-height: 44px; padding: 8px 12px; font-size: 17px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.row:last-child { border-bottom: 0; }
.row .sv { font-size: 16px; }
.row .hint, .field .hint { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); max-width: 46ch; }
.field .hint { margin: 10px 0 0; max-width: none; }
.seg { display: inline-flex; border: 1px solid var(--color-divider); flex: none; }
.seg button { border: 0; background: transparent; padding: 8px 18px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.seg button + button { border-left: 1px solid var(--color-divider); }
.seg button.on { background: var(--color-accent); color: var(--color-bg); }
.seg-full { display: flex; width: 100%; }
.seg-full button { flex: 1; padding: 12px 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.hidden { display: none !important; }

/* 3a — portrait artboard 1080×1920 */
[data-orient="portrait"] .stage,
[data-fit="fill"] .stage,
[data-fit="stack"] .stage {
  --art-w: 100vw;
  --art-h: 100vh;
  width: 100vw;
  height: 100vh;
}

[data-orient="portrait"] #view-dash {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  gap: 12px;
  padding-bottom: 24px;
  min-height: 0;
  overflow: visible;
}

[data-orient="portrait"] header.tb { min-height: 88px; }
[data-orient="portrait"] .kicker {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
[data-orient="portrait"] .tb-obj { padding: 13px 0 11px 56px; }
[data-orient="portrait"] .tb-kicker { gap: 12px; }
[data-orient="portrait"] .tb-obj h1 { font-size: 30px; font-weight: 600; color: var(--color-text); }
[data-orient="portrait"] .tb-cell { padding: 0 22px; }
[data-orient="portrait"] .tb-cell .lbl { font-size: 12px; font-weight: 600; color: var(--color-text); }
[data-orient="portrait"] .tb-cell .val { font-size: 15px; }
[data-orient="portrait"] .tb-eval,
[data-orient="portrait"] .tb-runtime { display: none; }
[data-orient="portrait"] .tb-live { gap: 8px; padding: 0 20px; }
[data-orient="portrait"] .tb-live .txt { font-size: 15px; font-weight: 600; color: var(--color-text); }
[data-orient="portrait"] .tb-gear { padding: 0 56px 0 18px; }
[data-orient="portrait"] .en {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.72;
  color: var(--color-text);
}

[data-orient="portrait"] main.dash,
[data-orient="portrait"] .bottom,
[data-orient="portrait"] .charts {
  display: contents;
}

[data-orient="portrait"] .hero-col { padding: 4px 56px 0; }
[data-orient="portrait"] .hero-head {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
[data-orient="portrait"] .hero-num {
  flex: none;
  display: block;
  font-size: 300px;
  line-height: .86;
  letter-spacing: 0;
  padding-top: 8px;
  align-items: unset;
}
[data-orient="portrait"] .stats { margin-top: 8px; }
[data-orient="portrait"] .stat { flex: 1; padding: 8px 16px 0 0; }
[data-orient="portrait"] .stat + .stat { padding-left: 16px; }
[data-orient="portrait"] .stat .lbl { font-size: 11px; }
[data-orient="portrait"] .stat .val { font-size: 32px; }

[data-orient="portrait"] .door-plate {
  margin: 0 56px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
[data-orient="portrait"] .door-body {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 0 8px;
}
[data-orient="portrait"] .door-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: 100%;
  max-width: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}
[data-orient="portrait"] .door {
  width: 504px;
  height: 564px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1.12;
  object-fit: contain;
}
[data-orient="portrait"] .state-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 1 34%;
  min-width: 0;
  gap: 6px;
  border-top: 0;
  padding: 0;
}
[data-orient="portrait"] .state-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
[data-orient="portrait"] .state-word { font-size: 96px; line-height: .95; max-width: 100%; }
[data-orient="portrait"] .state-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
[data-orient="portrait"] .state-time { font-size: 46px; }
[data-orient="portrait"] .state-in {
  display: inline;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
[data-orient="portrait"] .manual-wrap { width: 100%; margin-top: 12px; padding: 0; }
[data-orient="portrait"] .manual-wrap .btn-primary { font-size: 21px; padding: 14px 16px; }

[data-orient="portrait"] .plate-h {
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
[data-orient="portrait"] #hourly-plate,
[data-orient="portrait"] #monthly-plate,
[data-orient="portrait"] #counters-plate {
  margin: 0 56px;
  height: auto;
  overflow: visible;
  flex: none;
}
[data-orient="portrait"] .bars-24 {
  height: 88px;
  min-height: 88px;
  margin: 8px 20px 0;
}
[data-orient="portrait"] .axis { margin: 4px 20px 8px; }
[data-orient="portrait"] .month-nums { padding: 6px 20px 0; font-size: 12px; gap: 12px; }
[data-orient="portrait"] .bars-6 {
  height: 56px;
  min-height: 56px;
  margin: 4px 20px 0;
  gap: 12px;
}
[data-orient="portrait"] .month-lbl { margin: 4px 20px 8px; gap: 12px; }

[data-orient="portrait"] #counters-plate {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
[data-orient="portrait"] #counters-plate .plate-h { grid-column: 1 / -1; }
[data-orient="portrait"] .counter-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 20px 10px;
  border-bottom: 0;
  border-left: 1px solid var(--color-divider);
}
[data-orient="portrait"] .plate-h + .counter-row { border-left: 0; }
[data-orient="portrait"] .counter-row .lab { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
[data-orient="portrait"] .counter-row .nr { display: none; }
[data-orient="portrait"] .counter-row .val { font-size: 40px; line-height: 1.05; }

[data-orient="portrait"] .set-grid { grid-template-columns: 1fr; gap: 32px; padding: 36px 48px; }
[data-orient="portrait"] .set-col { gap: 32px; }

[data-fit="rotate"] .stage { transform-origin: 0 0; }