:root {
  color-scheme:light;
  --paper:#f7f7f2;
  --ink:#192d4b;
  --muted:#61748a;
  --line:#dce5eb;
  --blue:#dceef7;
  --blue-deep:#24547b;
  --orange:#f4823e;
  --shadow:0 12px 38px #2345650b;
  font-family:ui-rounded,"SF Pro Rounded","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  -webkit-font-smoothing:antialiased
}
* {
  box-sizing:border-box
}
html {
  min-width:280px;
  scroll-padding-top:135px
}
body {
  margin:0;
  background:radial-gradient(ellipse at 0 0,#e3eff5 0,transparent 50%),var(--paper)
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit;
  cursor:pointer;
  border:0;
  background:none
}
button:disabled {
  cursor:wait;
  opacity:.56
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:750
}
p {
  line-height:1.7
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #3382b7;
  outline-offset:4px
}
button,a {
  touch-action:manipulation
}
button:active:not(:disabled) {
  transform:translateY(1px)
}
.icon {
  width:23px;
  height:23px;
  flex:none;
  vertical-align:middle
}
.eyebrow {
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--muted);
  line-height:1.6
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:44px;
  padding:8px 0;
  font-size:12px;
  font-weight:650;
  color:var(--blue-deep);
  white-space:nowrap
}
.text-button .icon {
  width:16px;
  height:16px
}
.icon-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  background:#ffffffb8;
  border:1px solid #fff;
  box-shadow:0 4px 14px #1c395b06
}
.primary-button,.secondary-button,.danger-button {
  min-height:48px;
  padding:12px 18px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:650;
  font-size:14px
}
.primary-button {
  background:var(--ink);
  color:white;
  box-shadow:0 6px 14px #152d4c17
}
.primary-button .icon {
  width:19px
}
.secondary-button {
  background:#edf3f6;
  border:1px solid #d8e4eb;
  color:var(--ink)
}
.danger-button {
  background:#b03b34;
  color:white
}
.full-width {
  width:100%
}
.center {
  text-align:center
}
.chevron {
  color:#73879a;
  width:17px
}
.danger-text {
  color:#a53731!important
}
.app-shell {
  max-width:620px;
  margin:0 auto;
  min-height:100dvh
}
.app-header {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(28px + env(safe-area-inset-top)) 24px 18px;
  background:linear-gradient(180deg,#f1f6f7f2,#f7f7f2d9);
  backdrop-filter:blur(20px)
}
.header-kicker {
  display:block;
  color:#657c91;
  letter-spacing:1.8px;
  font-size:9px;
  margin-bottom:6px;
  font-weight:750
}
.app-header h1 {
  font-size:27px;
  letter-spacing:-.8px;
  line-height:1.25
}
.app-header p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px
}
.page-content {
  padding:3px 22px calc(112px + env(safe-area-inset-bottom));
  min-height:55vh
}
.desktop-brand {
  display:none
}
.bottom-nav {
  position:fixed;
  z-index:40;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:560px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:7px 6px;
  background:#fffd;
  border:1px solid #fff;
  border-radius:27px;
  box-shadow:0 8px 38px #1834561a,inset 0 0 1px white;
  backdrop-filter:blur(24px) saturate(1.3)
}
.bottom-nav button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 5px 6px;
  border-radius:20px;
  min-height:57px;
  color:#65758a;
  font-size:10px;
  font-weight:600
}
.bottom-nav button[aria-current=page] {
  background:#fff0e3;
  color:#9b4317
}
.bottom-nav button[aria-current=page] .icon {
  stroke-width:2
}
.explorer-hero {
  position:relative;
  isolation:isolate;
  min-height:286px;
  overflow:hidden;
  border-radius:29px;
  background:linear-gradient(130deg,#e5f1f8 4%,#dbeef8 55%,#c0dbea);
  border:1px solid #fff;
  box-shadow:var(--shadow)
}
.hero-copy {
  position:relative;
  z-index:3;
  padding:27px 23px;
  width:64%;
  pointer-events:none
}
.hero-copy .eyebrow {
  font-size:9px;
  letter-spacing:.8px;
  color:#426681
}
.hero-copy h2 {
  font-size:31px;
  line-height:1.22;
  letter-spacing:-1.5px;
  margin-top:14px
}
.hero-copy p {
  font-size:12px;
  color:#4e6880;
  line-height:1.7;
  margin-top:12px
}
.hero-signature {
  display:flex;
  align-items:center;
  gap:6px;
  color:#4f7189;
  font-size:8px;
  font-weight:750;
  letter-spacing:1px;
  margin-top:25px
}
.hero-signature .icon {
  width:20px;
  height:20px
}
.hero-mecha {
  position:absolute;
  z-index:2;
  width:63%;
  right:-9%;
  bottom:-28%;
  filter:drop-shadow(-7px 10px 12px #315b7a13);
  pointer-events:none
}
.hero-orbits {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1
}
.hero-orbits:before {
  content:"";
  position:absolute;
  width:235px;
  height:235px;
  right:-55px;
  top:25px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#e9f4f7 48%,#99bdd664);
  box-shadow:inset -15px -18px 35px #78a8c74a;
  opacity:.8
}
.hero-orbits i {
  position:absolute;
  width:400px;
  height:110px;
  right:-125px;
  top:95px;
  border:1px solid #ffffffb3;
  border-radius:50%;
  transform:rotate(-40deg)
}
.hero-orbits i:nth-child(2) {
  top:150px;
  right:-150px;
  width:450px
}
.hero-orbits>span {
  position:absolute;
  top:30px;
  right:25px;
  color:#fff;
  font-size:24px
}
.device-strip {
  display:flex;
  align-items:center;
  width:100%;
  gap:10px;
  position:relative;
  padding:16px 4px 11px;
  text-align:left
}
.device-mini {
  width:36px;
  height:40px;
  background:#e9eff2;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#466781
}
.device-mini .icon {
  width:22px
}
.device-strip-name {
  flex:1;
  min-width:0
}
.device-strip-name strong {
  display:block;
  font-size:13px
}
.device-strip-name small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.status-pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  font-size:10px;
  font-weight:600;
  color:#715e4f;
  background:#f1eae1;
  padding:6px 8px;
  border-radius:20px
}
.status-pill i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a88d70
}
.status-pill.reachable {
  color:#286c5c;
  background:#e3f1eb
}
.status-pill.reachable i {
  background:#3d9379
}
.device-readings {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:10px;
  color:var(--muted);
  padding:0 3px 17px;
  border-bottom:1px solid var(--line)
}
.device-readings span {
  display:flex;
  align-items:center;
  gap:4px
}
.device-readings .icon {
  width:14px;
  height:14px
}
.device-readings b {
  font-weight:650;
  color:#355571
}
.device-readings small {
  font-size:9px;
  margin-left:auto
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:25px 0 12px
}
.section-heading h2 {
  font-size:18px;
  letter-spacing:-.4px
}
.section-heading .eyebrow {
  font-size:8px;
  letter-spacing:1.5px;
  margin-bottom:4px
}
.discovery-card {
  position:relative;
  width:100%;
  padding:20px 20px 18px;
  border:1px solid #d4e5ed;
  border-radius:24px;
  text-align:left;
  background:#edf5f8;
  overflow:hidden;
  min-height:195px
}
.discovery-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:#4c748b;
  font-size:10px;
  font-weight:600
}
.discovery-label .icon {
  width:17px;
  height:17px
}
.discovery-card h3 {
  font-size:22px;
  line-height:1.5;
  letter-spacing:-.6px;
  margin-top:14px;
  padding-right:45px;
  position:relative;
  z-index:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.discovery-card p {
  font-size:10px;
  color:#617b8b;
  margin-top:12px
}
.discovery-open {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:#315b76;
  margin-top:20px
}
.discovery-open .icon {
  width:15px;
  height:15px
}
.discovery-planet {
  position:absolute;
  right:-20px;
  top:50px;
  color:#c3dbe7;
  transform:rotate(-15deg)
}
.discovery-planet .icon {
  width:110px;
  height:110px;
  stroke-width:.6
}
.mail-shortcut {
  position:relative;
  display:block;
  width:100%;
  min-height:157px;
  padding:22px 110px 20px 20px;
  border:1px solid #f4dcc6;
  border-radius:24px;
  background:#fff0df;
  text-align:left;
  overflow:hidden
}
.mail-shortcut>strong {
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.4px
}
.mail-shortcut p {
  font-size:11px;
  color:#826b57;
  margin:7px 0 16px;
  max-width:190px
}
.mail-cta {
  font-size:11px;
  display:flex;
  gap:7px;
  align-items:center;
  color:#8d481f;
  font-weight:650
}
.mail-cta .icon {
  width:16px;
  height:16px
}
.letter-art {
  position:absolute;
  right:15px;
  top:33px;
  width:87px;
  height:82px;
  transform:rotate(10deg)
}
.letter-art>span {
  position:absolute;
  top:-8px;
  left:13px;
  width:58px;
  height:55px;
  border-radius:9px;
  background:#fffdf7;
  box-shadow:0 5px 12px #c68a4333;
  display:grid;
  place-items:center;
  color:#e59b4f;
  transform:rotate(-17deg)
}
.letter-art>span .icon {
  width:21px;
  height:21px
}
.letter-art>.icon {
  width:87px;
  height:75px;
  color:#df9b65;
  position:relative;
  top:12px;
  stroke-width:1.2;
  fill:#ffdebb;
  filter:drop-shadow(0 6px 5px #d9a27f20)
}
.home-footer {
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:10px;
  color:#758694
}
.home-footer .icon {
  width:17px;
  height:17px
}
.record-filters {
  position:sticky;
  top:118px;
  z-index:18;
  display:flex;
  gap:6px;
  margin:0 22px 20px;
  padding:5px;
  border:1px solid #fff;
  border-radius:18px;
  background:#e8eff2dc;
  backdrop-filter:blur(20px)
}
.record-filters button {
  flex:1;
  min-height:44px;
  border-radius:13px;
  font-size:13px;
  font-weight:650;
  color:#647689;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px
}
.record-filters .icon {
  width:18px;
  height:18px
}
.record-filters button[aria-pressed=true] {
  color:var(--ink);
  background:#fff;
  box-shadow:0 3px 9px #25405c0b
}
.list-note {
  font-size:11px;
  color:var(--muted);
  margin:3px 0 16px;
  line-height:1.8
}
.record-list {
  border-radius:23px;
  background:#fff9;
  padding:0 16px;
  border:1px solid #fff
}
.record-row {
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
  min-height:92px;
  text-align:left;
  padding:18px 0;
  border-bottom:1px solid #e4ebef
}
.record-row:last-child {
  border-bottom:0
}
.record-row>span:nth-child(2) {
  min-width:0;
  flex:1
}
.record-row strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
  line-height:1.7;
  font-weight:600
}
.record-row small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:7px
}
.record-icon {
  width:38px;
  height:42px;
  border-radius:13px;
  background:#e8f1f5;
  display:grid;
  place-items:center;
  color:#54788f;
  flex:none
}
.record-icon .icon {
  width:21px;
  height:21px
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.photo-tile {
  display:block;
  padding:7px 7px 13px;
  text-align:left;
  border:1px solid #fff;
  border-radius:18px;
  background:white;
  box-shadow:var(--shadow);
  min-width:0
}
.photo-placeholder {
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  background:#e7f0f3;
  border-radius:12px;
  overflow:hidden;
  color:#65859b
}
.photo-placeholder img {
  width:100%;
  height:100%;
  object-fit:cover
}
.photo-tile>span:last-child {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin:10px 4px 0
}
.photo-original {
  display:block;
  width:100%;
  border-radius:18px
}
.page-footnote {
  font-size:10px;
  line-height:1.8;
  color:#6a7c8f;
  text-align:center;
  margin:22px 10px
}
.inline-error,.form-error {
  font-size:12px;
  color:#93461f;
  background:#fff0e3;
  border:1px solid #f1d7c2;
  border-radius:14px;
  padding:13px 15px;
  line-height:1.7;
  margin:12px 0
}
.inline-error small {
  display:block;
  font-size:10px;
  margin-top:5px;
  color:#835f49
}
.empty-state {
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:25px 18px;
  background:linear-gradient(150deg,#eef5f8,#fffdf7);
  border:1px solid #fff;
  border-radius:24px
}
.empty-orbit {
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#dbeaf3;
  margin:0 0 18px;
  box-shadow:0 0 0 10px #e8f1f6;
  color:#567e9c
}
.empty-orbit>.icon {
  width:40px;
  height:40px;
  stroke-width:1
}
.empty-state>strong {
  font-size:14px;
  line-height:1.7
}
.empty-state p {
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  max-width:260px
}
.message-context {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:22px;
  background:#fff0df;
  padding:17px 15px;
  border:1px solid #f2dfc9
}
.message-context>div {
  flex:1
}
.message-context strong {
  display:block;
  font-size:14px
}
.message-context small {
  display:block;
  font-size:10px;
  color:#82694f;
  margin-top:6px
}
.message-context .icon-button {
  background:#fffbf5;
  box-shadow:none
}
.row-icon {
  width:42px;
  height:44px;
  border-radius:14px;
  background:#e8f0f5;
  color:#406987;
  display:grid;
  place-items:center;
  flex:none
}
.row-icon.orange {
  background:#ffe4c7;
  color:#a8602e
}
.row-icon.teal {
  background:#e3eee7;
  color:#437963
}
.message-list {
  padding-top:8px
}
.message-list:empty {
  padding:0
}
.message-bubble {
  width:90%;
  margin:14px 0 20px;
  padding:17px 17px 13px;
  border:1px solid #fff;
  border-radius:22px 22px 22px 5px;
  background:#fff;
  box-shadow:0 6px 22px #25496805;
  overflow-wrap:anywhere
}
.message-bubble.parent {
  margin-left:auto;
  border-radius:22px 22px 5px 22px;
  background:#e5f0f6;
  border-color:#d4e6ee
}
.message-bubble>small {
  font-size:10px;
  color:#657d91
}
.message-bubble p {
  font-size:14px;
  line-height:1.9;
  margin:10px 0
}
.message-status {
  font-size:10px;
  color:#61798a
}
.message-bubble .text-button {
  display:flex;
  margin:2px 0 -6px;
  font-size:11px
}
.message-composer {
  margin-top:24px;
  padding:18px;
  border:1px solid #d9e4eb;
  border-radius:24px;
  background:#fffef9;
  box-shadow:var(--shadow)
}
.message-composer>label {
  font-size:13px;
  font-weight:650;
  margin:0 0 12px;
  display:block
}
.message-composer textarea {
  border:0;
  border-radius:0;
  border-bottom:1px solid #dce6eb;
  background:transparent;
  resize:vertical;
  padding:0 0 15px;
  min-height:105px;
  font-size:14px;
  line-height:1.8
}
.message-composer>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px
}
.message-composer small {
  font-size:9px;
  color:var(--muted);
  max-width:140px;
  line-height:1.7
}
.send-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  min-height:44px;
  padding:10px 13px;
  background:var(--ink);
  color:#fff;
  border-radius:14px;
  font-size:12px;
  white-space:nowrap;
  font-weight:600
}
.send-button .icon {
  width:17px;
  height:17px
}
.success-note {
  font-size:12px;
  color:#2b6859;
  border-radius:14px;
  padding:12px 14px;
  background:#e6f2eb;
  line-height:1.8;
  margin:12px 0
}
.new-message-jump {
  position:fixed;
  bottom:calc(103px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  min-height:44px;
  padding:10px 20px;
  z-index:30;
  border:1px solid #fff;
  border-radius:24px;
  color:var(--ink);
  background:#dbeef7;
  box-shadow:0 5px 20px #16345326;
  font-size:13px;
  font-weight:650
}
.new-message-jump:active {
  transform:translateX(-50%)
}
.manage-identity {
  display:flex;
  align-items:center;
  gap:16px;
  background:#e2eef4;
  border:1px solid white;
  border-radius:25px;
  padding:24px 18px;
  overflow:hidden
}
.manage-identity h2 {
  font-size:17px;
  letter-spacing:-.5px;
  line-height:1.5
}
.manage-identity p {
  font-size:10px;
  color:var(--muted);
  margin-top:6px
}
.manage-identity .eyebrow {
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:5px
}
.identity-avatar {
  width:73px;
  height:80px;
  position:relative;
  flex:none;
  background:#c5dce9;
  border-radius:24px;
  overflow:hidden;
  border:1px solid #f9ffff
}
.identity-avatar img {
  position:absolute;
  width:100px;
  top:-1px;
  left:-9px
}
.group-title {
  font-size:12px;
  letter-spacing:.3px;
  margin:27px 4px 11px;
  color:#5f778d;
  font-weight:600
}
.list-card {
  border:1px solid white;
  border-radius:22px;
  background:#fff9;
  padding:0 16px
}
.list-row {
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  min-height:81px;
  width:100%;
  border-bottom:1px solid #e3eaee;
  padding:15px 0
}
.list-row:last-child {
  border:0
}
.list-row>span:nth-child(2) {
  flex:1;
  min-width:0
}
.list-row strong {
  font-size:13px;
  display:block;
  line-height:1.6
}
.list-row small {
  font-size:10px;
  color:var(--muted);
  display:block;
  line-height:1.7;
  margin-top:3px
}
.external-link {
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:space-between;
  border:1px solid #d9e5eb;
  background:#eaf2f6;
  border-radius:21px;
  padding:19px 18px;
  min-height:75px
}
.external-link strong {
  display:block;
  font-size:13px
}
.external-link small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:6px
}
.external-link .icon {
  width:19px
}
.boundary-note {
  font-size:10px;
  line-height:1.85;
  color:#697d90;
  margin:12px 5px
}
.logout-button {
  display:block;
  width:100%;
  min-height:48px;
  text-align:center;
  margin-top:22px;
  border:1px solid #dfded5;
  background:#f5f3ec;
  border-radius:16px;
  color:#87694d;
  font-size:12px;
  font-weight:600
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.5px
}
.brand small {
  display:block;
  font-size:7px;
  letter-spacing:2px;
  font-weight:650;
  margin-top:5px
}
.brand-symbol {
  display:grid;
  place-items:center;
  width:40px;
  height:43px;
  border:1px solid white;
  border-radius:13px;
  background:#ffffff8c;
  color:#e77f39
}
.brand-symbol .icon {
  width:29px;
  height:29px;
  stroke-width:1.4
}
.login-shell {
  max-width:550px;
  margin:auto;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom)
}
.login-world {
  position:relative;
  overflow:hidden;
  min-height:305px;
  padding:calc(31px + env(safe-area-inset-top)) 27px 35px;
  background:linear-gradient(130deg,#eff6f8,#cee4f1)
}
.login-world .brand {
  position:relative;
  z-index:4
}
.login-story {
  position:relative;
  z-index:2;
  margin-top:30px
}
.login-story .eyebrow {
  font-size:9px;
  letter-spacing:1px
}
.login-story h1 {
  font-size:29px;
  line-height:1.3;
  letter-spacing:-1px;
  margin-top:12px
}
.login-story p {
  font-size:11px;
  color:#5f7c90;
  margin-top:13px;
  line-height:1.9
}
.login-mecha {
  position:absolute;
  width:50%;
  right:-2%;
  bottom:-26%;
  z-index:1
}
.login-planet {
  position:absolute;
  width:230px;
  height:230px;
  right:-90px;
  top:45px;
  border:1px solid #ffffffc2;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff8,#bbd5e420);
  box-shadow:0 0 0 30px #ffffff1c,0 0 0 60px #ffffff16
}
.world-caption {
  display:none
}
.login-panel {
  position:relative;
  z-index:3;
  border-radius:30px 30px 0 0;
  margin-top:-20px;
  padding:27px 26px;
  background:var(--paper)
}
.login-panel-heading {
  margin:0 0 24px
}
.login-panel-heading .eyebrow {
  font-size:9px;
  margin-bottom:7px;
  color:#a4653c
}
.login-panel-heading h2 {
  font-size:21px;
  letter-spacing:-.5px
}
.login-panel-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}
.auth-title {
  font-size:14px;
  margin-bottom:17px
}
.login-shell form .primary-button {
  width:100%;
  margin-top:6px
}
.login-shell form>label {
  font-size:12px
}
.login-boundary {
  font-size:10px;
  color:#6b7c8b;
  line-height:1.8;
  margin-top:20px
}
.login-signature {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #e0e6e8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  color:#6e8192
}
.login-signature .icon {
  width:19px;
  height:19px;
  color:#88a4b8
}
.login-progress {
  padding:25px 18px;
  border-radius:17px;
  background:#e6eff4;
  color:#4a6e87;
  font-size:13px;
  text-align:center
}
.login-progress:before {
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  border:2px solid #a5bfcd;
  border-top-color:#3c6787;
  border-radius:50%;
  margin-right:9px;
  vertical-align:middle;
  animation:orbit-spin 1s linear infinite
}
@keyframes orbit-spin {
  to {
    transform:rotate(360deg)
  }
}
label {
  display:block;
  font-size:13px;
  font-weight:650;
  margin:20px 0 9px
}
input:not([type=checkbox]):not([type=range]),select,textarea {
  width:100%;
  min-width:0;
  min-height:48px;
  padding:13px 14px;
  border:1px solid #d2dfe7;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font-size:16px
}
input::placeholder,textarea::placeholder {
  color:#778898
}
textarea {
  line-height:1.8;
  resize:vertical
}
select {
  padding-right:22px
}
.password-control {
  display:flex;
  align-items:stretch;
  border:1px solid #d2dfe7;
  background:#fff;
  border-radius:14px;
  overflow:hidden
}
.password-control input {
  border:0!important;
  border-radius:0!important;
  flex:1;
  width:0!important;
  background:transparent!important
}
.password-control button {
  padding:0 12px;
  font-size:11px;
  color:#4c6880;
  min-height:48px;
  white-space:nowrap
}
.input-hint {
  font-size:10px;
  line-height:1.8;
  color:#6a7f90;
  margin:9px 0 17px
}
.remember-choice {
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 22px;
  min-height:44px;
  font-size:12px;
  font-weight:500
}
.remember-choice input {
  width:19px;
  height:19px;
  accent-color:#2c5674;
  flex:none;
  margin:0
}
.remember-choice small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:5px
}
.auth-setup-note {
  margin:15px 2px
}
.auth-back {
  display:flex;
  width:100%
}
.sheet-dialog {
  width:calc(100% - 24px);
  max-width:520px;
  max-height:88dvh;
  margin:auto auto 0;
  padding:0;
  border:1px solid white;
  border-radius:28px 28px 0 0;
  background:#f8faf7;
  color:var(--ink);
  box-shadow:0 -10px 80px #12263f24;
  overflow:auto;
  padding-bottom:env(safe-area-inset-bottom)
}
.sheet-dialog::backdrop {
  background:#172e4b55;
  backdrop-filter:blur(7px)
}
.dialog-heading {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:18px 21px 15px;
  border-bottom:1px solid #e0e8ed;
  background:#f2f7f8;
  position:sticky;
  top:0;
  z-index:2
}
.dialog-heading h2 {
  font-size:18px;
  letter-spacing:-.5px
}
.dialog-heading .icon-button {
  background:#e5edf2;
  border-color:#e5edf2
}
.dialog-body {
  padding:18px 22px 28px
}
.dialog-intro {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin:2px 0 17px
}
.dialog-body form>.primary-button {
  margin-top:20px;
  width:100%
}
.dialog-body h3 {
  font-size:18px;
  margin:14px 0
}
.device-detail-icon {
  width:66px;
  height:66px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:#deedf5;
  color:#47718b;
  margin:7px auto 15px
}
.device-detail-icon .icon {
  width:34px;
  height:34px;
  stroke-width:1.5
}
.facts {
  margin:22px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.facts>div {
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:16px 2px
}
.facts dt {
  color:var(--muted)
}
.facts dd {
  text-align:right;
  margin:0;
  overflow-wrap:anywhere
}
.conversation-part {
  border-radius:17px;
  background:#fff;
  padding:16px;
  margin:12px 0;
  border:1px solid #e5ecef
}
.conversation-part small {
  color:var(--muted);
  font-size:10px
}
.conversation-part p {
  font-size:14px;
  line-height:1.9;
  margin-top:9px;
  overflow-wrap:anywhere
}
.info-callout {
  font-size:13px;
  line-height:1.8;
  padding:18px;
  border-radius:16px;
  background:#e5eff5;
  color:#42647f;
  margin:18px 0
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 21px
}
.setting-row strong {
  font-size:13px
}
.setting-row small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}
.switch {
  height:44px;
  width:56px;
  border-radius:22px;
  background:#d8e3e8;
  position:relative;
  flex:none;
  border:5px solid #f8faf7
}
.switch i {
  position:absolute;
  top:4px;
  left:4px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:white;
  box-shadow:0 2px 5px #2444631c;
  transition:transform .2s
}
.switch[aria-checked=true] {
  background:#38785f
}
.switch[aria-checked=true] i {
  transform:translateX(12px)
}
.memory-filters {
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:15px;
  background:#e7eff2
}
.memory-filters button {
  flex:1;
  min-height:44px;
  border-radius:11px;
  font-size:12px;
  color:#61778b
}
.memory-filters button[aria-pressed=true] {
  background:white;
  color:var(--ink);
  font-weight:650
}
.memory-item {
  padding:17px 2px;
  border-bottom:1px solid var(--line)
}
.memory-item p {
  font-size:14px;
  line-height:1.8;
  overflow-wrap:anywhere
}
.memory-item small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:8px
}
.memory-item details {
  margin-top:12px;
  font-size:11px;
  color:#617b8d
}
.memory-item details p {
  font-size:12px;
  margin-top:8px
}
.memory-item summary {
  min-height:44px;
  padding:12px 0;
  cursor:pointer
}
.memory-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
.memory-actions button {
  min-height:44px;
  padding:8px 13px;
  border:1px solid #d7e3e9;
  border-radius:12px;
  font-size:11px;
  color:#42647e;
  background:white
}
.dialog-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:20px
}
.dialog-actions>button {
  flex:1;
  font-size:12px
}
.confirm-fact {
  font-size:15px;
  line-height:1.8;
  background:#e8f0f5;
  border-radius:15px;
  padding:15px;
  margin-bottom:18px
}
input[type=range] {
  width:100%;
  accent-color:#e98140;
  min-height:44px
}
#volume-output {
  float:right;
  color:#a65725;
  font-size:19px
}
.fixture-banner {
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  padding:3px 8px!important;
  border-radius:0 0 7px 0;
  background:#f7e6b6;
  color:#5a4b21;
  font-size:9px!important;
  pointer-events:none
}
@media(min-width:760px) {
  html {
    scroll-padding-top:130px
  }
  body {
    background:radial-gradient(ellipse at top right,#dfeef4 0,transparent 55%),#f5f6f2
  }
  .app-shell {
    max-width:1180px;
    padding-left:220px;
    position:relative
  }
  .desktop-brand {
    display:block;
    position:fixed;
    top:0;
    bottom:0;
    width:200px;
    padding:48px 28px 30px;
    margin-left:-220px;
    border-right:1px solid #dee6ea;
    background:linear-gradient(180deg,#edf4f5aa,#f5f6f2)
  }
  .desktop-brand>.brand {
    font-size:23px
  }
  .desktop-brand>p {
    font-size:16px;
    line-height:1.8;
    color:#6a8296;
    margin-top:42px
  }
  .desktop-brand>small {
    position:absolute;
    bottom:32px;
    font-size:10px;
    color:#718698
  }
  .sidebar-orbit {
    position:absolute;
    bottom:90px;
    left:20px;
    color:#c0d3df;
    transform:rotate(-10deg)
  }
  .sidebar-orbit .icon {
    width:145px;
    height:145px;
    stroke-width:.6
  }
  .app-header {
    padding:38px 36px 24px;
    background:linear-gradient(180deg,#f2f6f4e8,#f5f6f2d9)
  }
  .app-header h1 {
    font-size:30px
  }
  .app-header p {
    font-size:13px
  }
  .page-content {
    padding:0 36px 55px
  }
  .bottom-nav {
    top:230px;
    bottom:auto;
    left:auto;
    transform:none;
    width:170px;
    margin-left:-205px;
    max-width:none;
    display:flex;
    flex-direction:column;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    border-radius:0;
    backdrop-filter:none;
    gap:8px
  }
  .bottom-nav button {
    flex-direction:row;
    justify-content:flex-start;
    gap:15px;
    padding:16px 22px;
    min-height:58px;
    border-radius:17px;
    font-size:13px
  }
  .bottom-nav button[aria-current=page] {
    background:#fff7eb;
    border:1px solid #ffe5c5;
    box-shadow:0 5px 14px #8b6c4005
  }
  .explorer-hero {
    height:350px;
    border-radius:30px
  }
  .hero-copy {
    padding:35px 34px;
    width:60%
  }
  .hero-copy .eyebrow {
    font-size:11px
  }
  .hero-copy h2 {
    font-size:43px;
    margin-top:18px
  }
  .hero-copy p {
    font-size:14px;
    margin-top:17px
  }
  .hero-signature {
    font-size:9px;
    margin-top:26px
  }
  .hero-mecha {
    width:44%;
    right:4%;
    bottom:-33%
  }
  .hero-orbits:before {
    width:330px;
    height:330px;
    right:10px;
    top:23px
  }
  .hero-orbits i {
    width:620px;
    height:145px;
    right:-120px;
    top:120px
  }
  .hero-orbits i:nth-child(2) {
    width:650px;
    top:180px
  }
  .hero-orbits>span {
    right:35px;
    font-size:30px
  }
  .device-strip {
    padding:21px 7px 10px;
    gap:13px
  }
  .device-strip-name strong {
    font-size:14px
  }
  .device-strip-name small {
    font-size:11px
  }
  .status-pill {
    font-size:11px;
    padding:8px 12px
  }
  .device-readings {
    font-size:12px;
    padding:0 9px 20px;
    gap:22px
  }
  .device-readings small {
    font-size:10px
  }
  .device-readings .icon {
    width:16px;
    height:16px
  }
  .home-grid {
    display:grid;
    grid-template-columns:1.17fr 1fr;
    gap:22px
  }
  .home-grid .section-heading {
    margin-top:28px;
    min-height:48px
  }
  .section-heading h2 {
    font-size:20px
  }
  .section-heading .eyebrow {
    font-size:9px
  }
  .discovery-card {
    min-height:245px;
    padding:23px
  }
  .discovery-card h3 {
    font-size:24px;
    max-width:360px;
    padding-right:25px
  }
  .discovery-open {
    margin-top:23px
  }
  .mail-shortcut {
    min-height:245px;
    padding:23px 24px
  }
  .mail-shortcut>strong {
    display:block;
    max-width:140px;
    font-size:23px;
    line-height:1.5
  }
  .mail-shortcut p {
    max-width:160px;
    font-size:12px;
    margin-top:12px
  }
  .letter-art {
    top:97px;
    right:15px;
    transform:rotate(12deg) scale(1.05)
  }
  .mail-cta {
    margin-top:23px;
    font-size:12px
  }
  .home-footer {
    font-size:11px;
    margin-top:35px
  }
  .record-filters {
    top:139px;
    max-width:340px;
    margin:0 36px 22px
  }
  .record-list {
    padding:0 22px
  }
  .record-row {
    min-height:100px;
    gap:17px
  }
  .record-row strong {
    font-size:15px
  }
  .record-row small {
    font-size:11px
  }
  .photo-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
  }
  .photo-tile>span:last-child {
    font-size:11px
  }
  .message-context {
    padding:19px 21px
  }
  .message-context strong {
    font-size:16px
  }
  .message-context small {
    font-size:11px
  }
  .message-bubble {
    max-width:80%;
    padding:19px 22px
  }
  .message-bubble p {
    font-size:15px
  }
  .message-composer {
    padding:22px
  }
  .message-composer small {
    font-size:11px;
    max-width:none
  }
  .new-message-jump {
    bottom:24px;
    left:calc(50% + 110px)
  }
  .manage-identity {
    padding:25px;
    gap:22px
  }
  .manage-identity h2 {
    font-size:23px
  }
  .manage-identity p {
    font-size:12px
  }
  .manage-identity .eyebrow {
    font-size:9px
  }
  .list-row {
    min-height:85px
  }
  .list-row strong {
    font-size:14px
  }
  .list-row small,.external-link small {
    font-size:11px
  }
  .group-title {
    font-size:13px
  }
  .sheet-dialog {
    margin:auto;
    border-radius:28px;
    max-height:85dvh
  }
  .dialog-body {
    padding:23px 28px 30px
  }
  .dialog-heading {
    padding:21px 24px 17px
  }
  .login-shell {
    max-width:1080px;
    min-height:calc(100dvh - 100px);
    display:grid;
    grid-template-columns:1.15fr 1fr;
    margin:50px auto;
    border:1px solid white;
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 18px 70px #2449690e
  }
  .login-world {
    padding:40px;
    min-height:670px;
    background:linear-gradient(150deg,#edf7fc,#bcd8ea)
  }
  .login-world .brand {
    font-size:26px
  }
  .login-story {
    margin-top:55px
  }
  .login-story h1 {
    font-size:41px;
    line-height:1.3
  }
  .login-story .eyebrow {
    font-size:10px
  }
  .login-story p {
    font-size:13px;
    line-height:1.9;
    margin-top:19px
  }
  .login-mecha {
    width:69%;
    right:-3%;
    bottom:-25%
  }
  .login-planet {
    width:410px;
    height:410px;
    right:-150px;
    top:190px
  }
  .world-caption {
    display:block;
    position:absolute;
    bottom:31px;
    left:39px;
    font-size:9px;
    letter-spacing:2.5px;
    color:#436985
  }
  .login-panel {
    margin:0;
    border-radius:0;
    padding:58px 42px 35px;
    align-self:center
  }
  .login-panel-heading {
    margin-bottom:35px
  }
  .login-panel-heading h2 {
    font-size:27px
  }
  .login-panel-heading p {
    font-size:12px
  }
  .login-panel-heading .eyebrow {
    font-size:10px
  }
  .login-signature {
    margin-top:38px
  }
  .auth-title {
    font-size:16px
  }
  .login-boundary {
    font-size:11px
  }
}
@media(min-width:1080px) {
  .hero-mecha {
    width:40%;
    right:8%;
    bottom:-36%
  }
  .hero-copy h2 {
    font-size:46px
  }
  .explorer-hero {
    height:360px
  }
  .home-grid {
    grid-template-columns:1.2fr 1fr;
    gap:24px
  }
  .mail-shortcut {
    padding-right:120px
  }
  .mail-shortcut>strong {
    max-width:none
  }
  .letter-art {
    top:80px;
    right:22px;
    transform:rotate(12deg) scale(1.1)
  }
}
@media(max-width:359px) {
  .app-header {
    padding-left:18px;
    padding-right:18px
  }
  .app-header h1 {
    font-size:25px
  }
  .page-content {
    padding-left:15px;
    padding-right:15px
  }
  .explorer-hero {
    min-height:268px;
    border-radius:25px
  }
  .hero-copy {
    padding:24px 18px;
    width:66%
  }
  .hero-copy h2 {
    font-size:28px
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:.3px
  }
  .hero-copy p {
    font-size:11px
  }
  .hero-signature {
    font-size:7px;
    margin-top:23px
  }
  .hero-mecha {
    width:67%;
    right:-14%;
    bottom:-21%
  }
  .device-strip {
    gap:7px
  }
  .device-strip-name strong {
    font-size:12px
  }
  .device-strip-name small {
    font-size:8px
  }
  .status-pill {
    font-size:9px;
    padding:6px
  }
  .device-strip>.chevron {
    width:12px
  }
  .device-readings {
    gap:9px
  }
  .device-readings small {
    width:100%;
    margin-left:0;
    font-size:8px
  }
  .section-heading h2 {
    font-size:17px
  }
  .section-heading .text-button {
    font-size:11px
  }
  .discovery-card h3 {
    font-size:20px
  }
  .mail-shortcut {
    padding-right:98px
  }
  .mail-shortcut>strong {
    font-size:16px
  }
  .letter-art {
    right:6px;
    transform:rotate(10deg) scale(.85)
  }
  .home-footer {
    font-size:9px
  }
  .record-filters {
    margin-left:15px;
    margin-right:15px
  }
  .manage-identity {
    gap:11px;
    padding:19px 14px
  }
  .manage-identity h2 {
    font-size:14px
  }
  .manage-identity .eyebrow {
    font-size:7px
  }
  .identity-avatar {
    width:60px;
    height:70px
  }
  .identity-avatar img {
    width:89px
  }
  .list-card {
    padding:0 13px
  }
  .list-row {
    gap:10px
  }
  .list-row strong {
    font-size:12px
  }
  .row-icon {
    width:36px;
    height:39px
  }
  .message-composer {
    padding:15px
  }
  .message-composer small {
    max-width:110px
  }
  .send-button {
    padding:10px 11px;
    font-size:11px
  }
  .message-context {
    gap:9px;
    padding:14px 12px
  }
  .message-context strong {
    font-size:12px
  }
  .message-context small {
    font-size:9px
  }
  .login-world {
    padding-left:22px;
    min-height:295px
  }
  .login-story h1 {
    font-size:27px
  }
  .login-story .eyebrow {
    font-size:8px
  }
  .login-story p {
    font-size:10px
  }
  .login-mecha {
    width:54%;
    right:-6%;
    bottom:-18%
  }
  .login-panel {
    padding:25px 21px
  }
  .login-panel-heading h2 {
    font-size:20px
  }
  .dialog-body {
    padding-left:18px;
    padding-right:18px
  }
  .dialog-heading h2 {
    font-size:17px
  }
  .dialog-actions {
    gap:6px
  }
  .dialog-actions>button {
    padding:11px 10px;
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  button:active {
    transform:none
  }
  .new-message-jump:active {
    transform:translateX(-50%)
  }
}
/* Keep the character's entire head in view at every container width. */
.hero-mecha {
  height:335px;
  width:auto;
  right:-39px;
  top:18px;
  bottom:auto
}
.hero-copy {
  width:62%
}
.login-mecha {
  height:330px;
  width:auto;
  right:-14px;
  top:45px;
  bottom:auto
}
@media(min-width:480px) and (max-width:759px) {
  .explorer-hero {
    height:310px
  }
  .hero-mecha {
    height:390px;
    right:0;
    top:17px
  }
  .hero-copy {
    padding:30px
  }
  .hero-copy h2 {
    font-size:36px
  }
  .login-mecha {
    height:360px;
    right:15px;
    top:38px
  }
}
@media(min-width:760px) {
  .hero-mecha {
    height:380px;
    width:auto;
    right:-18px;
    top:16px;
    bottom:auto
  }
  .hero-copy {
    width:62%;
    padding:32px 26px
  }
  .hero-copy h2 {
    font-size:36px
  }
  .login-mecha {
    height:500px;
    width:auto;
    right:-20px;
    top:260px;
    bottom:auto
  }
}
@media(min-width:1080px) {
  .hero-mecha {
    height:460px;
    right:4%;
    top:17px
  }
  .hero-copy {
    padding:35px 34px
  }
  .hero-copy h2 {
    font-size:46px
  }
}
@media(max-width:359px) {
  .hero-mecha {
    height:300px;
    width:auto;
    right:-45px;
    top:28px
  }
  .hero-copy {
    width:65%
  }
  .login-mecha {
    height:300px;
    width:auto;
    right:-20px;
    top:60px
  }
}
.brand {
  min-height:44px
}
.record-filters {
  top:calc(124px + env(safe-area-inset-top))
}
@media(min-width:760px) {
  .record-filters {
    top:144px
  }
}
.mail-help {
  font-size:10px;
  color:var(--muted);
  padding:6px 4px 0
}
.mail-help summary {
  cursor:pointer;
  min-height:44px;
  padding:15px 0;
  line-height:1.4
}
.mail-help p {
  line-height:1.9;
  padding:0 0 6px
}