:root {
  --ink:#202738;
  --muted:#73798a;
  --paper:#f5f4f0;
  --line:#e4e4df;
  --blue:#3459e8;
  --green:#26785a;
  --red:#ae413c;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:default
}
[hidden] {
  display:none!important
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:30px;
  font-weight:650;
  letter-spacing:-1px
}
h2 {
  font-size:18px;
  font-weight:600
}
h3 {
  font-size:15px;
  font-weight:600
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:9px
}
.muted {
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}
.fine-print {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:18px
}
.app-shell {
  min-height:100dvh;
  display:grid;
  grid-template-columns:226px minmax(0,1fr)
}
.sidebar {
  background:#192130;
  color:#b6becd;
  position:fixed;
  inset:0 auto 0 0;
  width:226px;
  padding:33px 20px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:20px;
  letter-spacing:-.6px;
  font-weight:600;
  color:#fff
}
.brand small {
  display:block;
  font-size:7px;
  letter-spacing:1.3px;
  color:#9ca7bc;
  margin-top:5px
}
.brand-symbol {
  display:block;
  width:40px;
  height:40px;
  flex-shrink:0
}
.space-mark {
  margin:58px 16px 38px
}
.space-mark>span {
  font-size:9px;
  letter-spacing:2px;
  color:#8b97ad
}
.space-mark strong {
  display:block;
  font-size:62px;
  letter-spacing:-4px;
  font-weight:450;
  color:#fff;
  line-height:1.3
}
.space-mark i {
  font-size:30px;
  color:#51617e;
  font-style:normal;
  margin-left:6px
}
.space-mark small {
  font-size:12px;
  letter-spacing:2px
}
.sidebar nav {
  display:grid;
  gap:7px
}
.sidebar nav a {
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 14px;
  border-radius:9px;
  font-size:13px
}
.sidebar nav a:hover {
  background:#222d40
}
.sidebar nav a.active {
  background:#344c83;
  color:#fff
}
.sidebar nav a small {
  margin-left:auto;
  font-size:9px;
  opacity:.6
}
.nav-icon {
  font-size:19px;
  width:22px;
  text-align:center
}
.sidebar-bottom {
  margin-top:auto;
  padding:24px 13px 0;
  font-size:10px;
  border-top:1px solid #30394a;
  line-height:2
}
.sidebar-bottom p {
  color:#76849b;
  font-size:10px;
  margin-top:5px
}
.connection-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#75b69a;
  border-radius:50%;
  margin-right:7px
}
.main-shell {
  grid-column:2;
  min-width:0
}
.topbar {
  height:78px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px
}
.breadcrumb {
  display:flex;
  gap:16px;
  font-size:12px;
  color:var(--muted)
}
.breadcrumb span:first-child {
  font-weight:600;
  color:var(--ink)
}
.user-tools {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:12px
}
.text-button {
  border:0;
  background:transparent;
  padding:10px;
  color:var(--muted);
  font-size:12px
}
.text-button:hover {
  color:var(--blue)
}
#main-content {
  padding:29px 42px 0;
  max-width:1510px;
  margin:auto
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px
}
.date-stamp {
  font-size:11px;
  color:var(--muted)
}
.hero {
  position:relative;
  min-height:232px;
  background:#e9eddf;
  border:1px solid #dfe4d4;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:28px 32px
}
.hero-copy {
  position:relative;
  z-index:1
}
.hero-copy h2 {
  font-size:32px;
  line-height:1.45;
  font-weight:550;
  letter-spacing:-.7px
}
.hero-copy h2 span {
  color:var(--blue)
}
.hero-copy>p:not(.eyebrow) {
  font-size:12px;
  color:#73806d;
  margin-top:10px
}
.hero-link {
  display:flex;
  gap:25px;
  align-items:center;
  font-size:12px;
  margin-top:20px;
  color:#44563f
}
.hero-link span {
  font-size:18px
}
.hero-state {
  position:absolute;
  right:24px;
  top:21px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:10px;
  color:#687461
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:20px;
  background:#e1e3de;
  color:#6d7468;
  font-size:10px;
  white-space:nowrap
}
.badge:before {
  content:"";
  width:5px;
  height:5px;
  background:currentColor;
  border-radius:50%
}
.badge.online {
  color:#23744f;
  background:#d9e9d6
}
.room-art {
  position:absolute;
  right:3%;
  top:25px;
  width:45%;
  height:210px;
  overflow:hidden
}
.room-number {
  position:absolute;
  font-family:Georgia,serif;
  font-size:140px;
  letter-spacing:-12px;
  color:#c0cbb1;
  left:15%;
  top:8px
}
.orbit {
  position:absolute;
  border:1px solid #b9c6a9;
  width:92%;
  height:105px;
  border-radius:50%;
  left:0;
  top:64px;
  transform:rotate(-25deg)
}
.orbit-two {
  transform:rotate(25deg)
}
.node-dot {
  position:absolute;
  width:12px;
  height:12px;
  background:var(--blue);
  border:3px solid #e9eddf;
  border-radius:50%;
  top:50px;
  right:18%
}
.art-label {
  position:absolute;
  bottom:2px;
  left:14%;
  font-size:8px;
  letter-spacing:1.7px;
  color:#8b987b
}
.overview-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:22px 0;
  margin-bottom:1px
}
.overview-stats>div {
  padding:0 27px;
  border-right:1px solid var(--line)
}
.overview-stats>div:first-child {
  padding-left:3px
}
.overview-stats>div:last-child {
  border:0
}
.overview-stats span {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:8px
}
.overview-stats strong {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.5px
}
.overview-stats small {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  margin-left:8px
}
.overview-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.panel {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:13px;
  padding:20px 23px;
  min-width:0
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px;
  gap:12px
}
.section-heading a {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}
.target-card {
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 0;
  min-width:0
}
.target-card+.target-card {
  border-top:1px solid var(--line)
}
.device-icon {
  width:39px;
  height:41px;
  display:grid;
  place-items:center;
  background:#eef0e9;
  border:1px solid #e1e5d9;
  border-radius:10px;
  font-size:23px;
  color:#6e7e65;
  flex-shrink:0
}
.target-info {
  flex:1;
  min-width:0
}
.target-info a {
  display:block;
  overflow-wrap:anywhere
}
.target-info a:hover {
  color:var(--blue)
}
.mac {
  font:10px ui-monospace,Consolas,monospace;
  color:var(--muted);
  margin-top:7px;
  overflow-wrap:anywhere
}
.primary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:0;
  border-radius:8px;
  background:var(--blue);
  color:white;
  padding:13px 16px;
  width:100%;
  font-size:13px
}
.primary:hover:not(:disabled) {
  background:#2345c9
}
.compact,.wake-button {
  width:auto;
  white-space:nowrap;
  font-size:12px;
  padding:11px 14px
}
.wake-button {
  padding:10px 12px;
  font-size:11px
}
.secondary {
  border:1px solid var(--line);
  background:transparent;
  border-radius:7px;
  padding:10px 13px;
  color:var(--ink);
  font-size:12px
}
.secondary:hover {
  background:#eef0e9
}
.history-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px 10px;
  padding:13px 0;
  border-top:1px solid var(--line);
  align-items:center
}
.history-name {
  font-size:12px;
  overflow-wrap:anywhere
}
.history-detail {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
.history-time {
  font-size:10px;
  color:var(--muted);
  text-align:right;
  grid-column:2
}
.status {
  font-size:10px;
  justify-self:end
}
.status.sent {
  color:var(--green)
}
.status.failed,.error {
  color:var(--red)
}
.status.pending {
  color:var(--blue)
}
#recent-history .history-detail {
  display:none
}
#recent-history .history-name {
  grid-row:1/3
}
#recent-history .history-row {
  padding:10px 0
}
#recent-history .history-row:first-child {
  border:0
}
.empty {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  padding:20px 0
}
.section-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.node-strip {
  background:#e9eddf;
  border-radius:11px;
  padding:18px 22px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.node-strip strong {
  font-size:15px;
  margin-right:15px
}
.node-strip p,.node-strip div>span:last-child {
  font-size:11px;
  color:#6b7863
}
.target-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.target-grid .target-card {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px
}
.activity-labels {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  padding-bottom:15px
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:12px;
  font-size:12px;
  color:var(--muted)
}
.back-link {
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px
}
.detail-card {
  padding:30px;
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:14px;
  max-width:850px
}
.detail-heading {
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:28px
}
.detail-heading h2 {
  font-size:26px;
  overflow-wrap:anywhere
}
.detail-metrics {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  border-block:1px solid var(--line);
  padding:24px 0;
  margin-bottom:25px
}
.detail-metrics dt {
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px
}
.detail-metrics dd {
  margin:0;
  font-size:16px;
  overflow-wrap:anywhere
}
.detail-actions {
  display:flex;
  gap:15px;
  justify-content:space-between
}
.danger {
  color:var(--red)
}
.settings-layout {
  display:grid;
  grid-template-columns:190px minmax(0,560px);
  gap:34px
}
.settings-nav {
  display:flex;
  flex-direction:column;
  gap:7px
}
.settings-nav a {
  display:flex;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:8px;
  font-size:13px;
  color:var(--muted)
}
.settings-nav a.active {
  color:var(--blue);
  background:#e7ebf7
}
.settings-card {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 32px
}
.settings-card h2 {
  font-size:22px
}
.settings-card .primary {
  margin-top:18px
}
label {
  display:block;
  font-size:12px;
  margin:20px 0 9px
}
input {
  width:100%;
  background:#f8f8f3;
  border:1px solid #dfe2d8;
  border-radius:8px;
  padding:12px 13px;
  font-size:14px;
  color:var(--ink)
}
input::placeholder {
  color:#969e91
}
.checkbox-label {
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.7
}
.checkbox-label input {
  width:18px;
  height:18px;
  accent-color:var(--blue)
}
.secret-field {
  display:flex;
  align-items:center
}
.secret-field input {
  min-width:0
}
.secret-field button {
  flex-shrink:0
}
.error {
  font-size:12px;
  line-height:1.7;
  margin-top:12px
}
.notice {
  padding:12px 16px;
  background:#f8eae5;
  border:1px solid #ead1c8;
  border-radius:9px;
  margin-bottom:20px
}
footer {
  display:flex;
  justify-content:space-between;
  color:#969a9f;
  font-size:10px;
  padding:22px 0;
  gap:12px
}
footer b {
  font-weight:400;
  margin:0 8px
}
.auth-brand {
  color:var(--ink);
  padding:30px 7vw
}
.auth-brand small {
  display:inline;
  margin:0 0 0 15px
}
.login-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  max-width:1000px;
  margin:30px auto;
  padding:20px;
  align-items:center
}
.login-story {
  position:relative;
  min-height:460px;
  padding-top:30px
}
.login-story h1 {
  font-size:42px;
  line-height:1.5
}
.blue {
  color:var(--blue)
}
.intro {
  color:var(--muted);
  line-height:1.9;
  font-size:14px;
  margin-top:20px
}
.login-story .room-art {
  top:230px;
  width:100%;
  right:0
}
.login-card {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:16px;
  padding:34px
}
.small-index {
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
  display:block;
  margin-bottom:20px
}
.login-card h2 {
  font-size:26px;
  margin-bottom:10px
}
.login-card .primary {
  margin-top:20px
}
.auth-toggle {
  display:block;
  margin:12px auto 0;
  color:var(--blue)
}
.login-foot {
  color:var(--muted);
  font-size:11px;
  line-height:1.9;
  margin-top:20px
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}
.icon-button {
  border:0;
  border-radius:50%;
  background:#edf0e7;
  font-size:25px;
  width:32px;
  height:32px;
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  width:min(440px,calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  overflow:auto;
  color:var(--ink);
  background:#fffefa
}
dialog .primary {
  margin-top:20px
}
dialog::backdrop {
  background:#18213377;
  backdrop-filter:blur(5px)
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:#202b3b;
  color:#fff;
  padding:14px 20px;
  border-radius:10px;
  box-shadow:0 8px 30px #0002;
  font-size:12px;
  line-height:1.7;
  max-width:calc(100vw - 28px);
  z-index:30
}
@media(min-width:1500px) {
  #main-content {
    padding-top:40px
  }
  .hero {
    min-height:280px
  }
  .hero-copy h2 {
    font-size:39px
  }
  .room-art {
    top:36px;
    height:230px
  }
  .room-number {
    font-size:160px
  }
  .overview-stats {
    padding:28px 0
  }
  .panel {
    padding:25px
  }
  .overview-columns {
    gap:26px
  }
}
@media(max-width:1100px) {
  .app-shell {
    grid-template-columns:190px minmax(0,1fr)
  }
  .sidebar {
    width:190px;
    padding:28px 14px
  }
  .brand {
    font-size:18px
  }
  .brand small {
    font-size:6px
  }
  .topbar {
    padding-inline:28px
  }
  #main-content {
    padding-inline:28px
  }
  .overview-columns {
    gap:15px
  }
  .panel {
    padding:18px
  }
  .hero {
    padding:25px
  }
  .hero-copy h2 {
    font-size:29px
  }
  .room-number {
    font-size:115px
  }
  .room-art {
    top:48px;
    height:180px
  }
  .target-grid {
    grid-template-columns:1fr
  }
  .settings-layout {
    grid-template-columns:155px minmax(0,1fr);
    gap:20px
  }
  .target-card {
    gap:10px
  }
  .device-icon {
    width:33px
  }
  .wake-button {
    padding:10px
  }
  .overview-columns .mac {
    font-size:9px
  }
}
@media(max-width:760px) {
  .app-shell {
    display:block
  }
  .sidebar {
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:auto;
    height:68px;
    padding:0 12px;
    z-index:20;
    border-top:1px solid #354054
  }
  .sidebar>.brand,.space-mark,.sidebar-bottom {
    display:none
  }
  .sidebar nav {
    grid-template-columns:repeat(4,1fr);
    height:100%;
    gap:4px
  }
  .sidebar nav a {
    flex-direction:column;
    gap:3px;
    justify-content:center;
    border-radius:0;
    padding:8px 0;
    font-size:10px
  }
  .sidebar nav a.active {
    background:transparent;
    color:#c0ceff;
    box-shadow:inset 0 2px #8da8ff
  }
  .sidebar nav a small {
    display:none
  }
  .nav-icon {
    font-size:22px;
    line-height:24px
  }
  .main-shell {
    padding-bottom:68px
  }
  .topbar {
    height:59px;
    padding:0 20px
  }
  .breadcrumb {
    font-size:11px;
    gap:10px
  }
  .user-tools {
    gap:9px;
    font-size:10px
  }
  .text-button {
    font-size:11px;
    padding:8px
  }
  .user-tools a {
    max-width:130px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  #main-content {
    padding:20px 20px 0
  }
  .page-heading {
    margin-bottom:18px
  }
  .page-heading h1 {
    font-size:26px
  }
  .page-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
    margin-bottom:6px
  }
  .date-stamp {
    display:none
  }
  .hero {
    min-height:190px;
    padding:22px;
    border-radius:13px
  }
  .hero-copy .eyebrow {
    display:none
  }
  .hero-copy h2 {
    font-size:25px;
    line-height:1.45
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:10px;
    margin-top:9px
  }
  .hero-link {
    font-size:11px;
    margin-top:15px;
    gap:15px
  }
  .room-art {
    width:44%;
    right:-4%;
    top:46px;
    height:130px;
    opacity:.65
  }
  .room-number {
    font-size:76px;
    letter-spacing:-7px;
    top:13px;
    left:6%
  }
  .orbit {
    height:60px;
    top:40px;
    width:110%;
    left:-5%
  }
  .art-label {
    display:none
  }
  .node-dot {
    top:20px;
    right:15%;
    width:10px;
    height:10px
  }
  .hero-state {
    right:15px;
    top:13px;
    font-size:8px;
    gap:4px
  }
  .hero-state>span:last-child {
    display:none
  }
  .badge {
    font-size:9px;
    padding:4px 7px
  }
  .overview-stats {
    padding:18px 0
  }
  .overview-stats>div {
    padding:0 17px
  }
  .overview-stats span {
    font-size:10px;
    margin-bottom:7px
  }
  .overview-stats strong {
    font-size:18px
  }
  .overview-stats small {
    font-size:7px;
    margin-left:2px
  }
  .overview-columns {
    grid-template-columns:1fr;
    gap:13px
  }
  .panel {
    padding:15px 18px;
    border-radius:11px
  }
  .section-heading {
    margin-bottom:6px
  }
  .section-heading h2 {
    font-size:16px
  }
  .section-heading a {
    font-size:10px
  }
  .target-card {
    padding:12px 0;
    gap:12px
  }
  .target-card h3 {
    font-size:13px
  }
  .wake-button {
    font-size:11px;
    padding:10px 13px;
    min-height:38px
  }
  .mac {
    font-size:10px
  }
  .overview-columns .mac {
    font-size:10px
  }
  .device-icon {
    width:35px;
    height:38px
  }
  .history-row {
    padding:15px 0
  }
  #recent-history .history-row {
    padding:8px 0
  }
  .history-name {
    font-size:11px
  }
  .history-time,.status {
    font-size:9px
  }
  #recent-history .history-row:nth-child(3) {
    display:none
  }
  .section-intro {
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px
  }
  .section-intro .muted {
    font-size:12px
  }
  .compact {
    font-size:11px;
    padding:11px;
    flex-shrink:0
  }
  .node-strip {
    display:block;
    padding:17px
  }
  .node-strip p {
    margin-top:10px;
    line-height:1.7
  }
  .target-grid .target-card {
    padding:19px
  }
  .settings-layout {
    grid-template-columns:1fr;
    gap:18px
  }
  .settings-nav {
    flex-direction:row;
    gap:8px
  }
  .settings-nav a {
    gap:25px;
    font-size:12px;
    padding:11px 14px
  }
  .settings-card {
    padding:22px
  }
  .settings-card h2 {
    font-size:21px
  }
  input {
    font-size:16px
  }
  .fine-print {
    font-size:11px
  }
  .detail-card {
    padding:23px
  }
  .detail-heading h2 {
    font-size:23px
  }
  .detail-metrics {
    gap:24px 15px
  }
  .detail-metrics dd {
    font-size:13px
  }
  .detail-metrics dt {
    font-size:11px
  }
  .detail-actions {
    flex-wrap:wrap
  }
  .activity-panel {
    padding:18px
  }
  .activity-labels {
    font-size:10px
  }
  .pagination {
    gap:8px;
    font-size:10px
  }
  .pagination button {
    font-size:10px;
    padding:10px
  }
  .auth-brand {
    padding:24px
  }
  .login-layout {
    grid-template-columns:1fr;
    gap:24px;
    max-width:460px;
    margin:0 auto;
    padding:15px 24px 35px
  }
  .login-story {
    min-height:0;
    padding:0
  }
  .login-story h1 {
    font-size:29px
  }
  .login-story .room-art,.login-story .intro {
    display:none
  }
  .login-card {
    padding:25px
  }
  .login-story .eyebrow {
    font-size:8px
  }
  .login-foot {
    font-size:10px
  }
  footer {
    font-size:9px;
    padding:18px 0
  }
  .toast {
    bottom:82px;
    width:max-content
  }
  .back-link {
    margin-bottom:18px
  }
}
@media(prefers-reduced-motion:no-preference) {
  button,a {
    transition:background .15s,color .15s
  }
}
/* Keep the overview curated at everyday laptop and phone sizes. */
@media (min-width: 761px) and (max-height: 800px)  {
  .topbar  {
    height: 66px;
  }
  #main-content  {
    padding-top: 22px;
  }
  .page-heading  {
    margin-bottom: 18px;
  }
  .hero  {
    min-height: 200px;
    padding-block: 19px;
  }
  .hero-copy h2  {
    font-size: 29px;
  }
  .hero-link  {
    margin-top: 12px;
  }
  .hero .room-art  {
    top: 14px;
    height: 180px;
  }
  .hero .room-number  {
    font-size: 120px;
  }
  .overview-stats  {
    padding-block: 17px;
  }
  .overview-columns .panel  {
    padding-block: 16px;
  }
  .overview-columns .section-heading  {
    margin-bottom: 9px;
  }
}
@media (max-width: 760px)  {
  .hero  {
    min-height: 170px;
    padding-block: 16px;
  }
  .hero-link  {
    margin-top: 10px;
  }
  .hero .room-art  {
    top: 35px;
  }
  .page-heading  {
    margin-bottom: 14px;
  }
  .overview-stats  {
    padding-block: 14px;
  }
  .overview-columns  {
    gap: 11px;
  }
  .overview-columns .panel  {
    padding-block: 13px;
  }
}