:root {
  color-scheme: dark;
  --bg: #080f19;
  --panel: #101c29;
  --line: #2e3f4d;
  --ink: #ecf0eb;
  --muted: #a5b4ba;
  --glow: #62e5ed;
  --amber: #e9b874;
  --copper: #b87a50;
  --secondary: #f08eb5;
  --soft: #172733;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 35% 47%, #13304455, transparent 48%), var(--bg);
  color: var(--ink);
}
body[data-theme="field"] {
  --glow: #8ecbff;
  --amber: #cbd7e2;
  --copper: #8ba3b6;
}
body[data-theme="nevora"] {
  --glow: #b8d6a0;
  --amber: #e1c89b;
  --copper: #aa8960;
}
body.high-contrast {
  --muted: #d0dce0;
  --line: #657c8c;
  --glow: #9bfbff;
  --amber: #ffdaa3;
}
body.text-large {
  font-size: 17px;
}
body.text-small {
  font-size: 13px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button,
a,
input,
select,
textarea,
canvas {
  touch-action: manipulation;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button,
a,
input,
select,
textarea {
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}
a {
  color: var(--glow);
}
button {
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
button:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--ink);
}
button:active:not(:disabled) {
  filter: brightness(1.2);
}
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  padding: 14px;
  background: var(--panel);
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  vertical-align: middle;
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar {
  height: 90px;
  padding: 0 4.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: #080f19e8;
  z-index: 2;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 21px;
  letter-spacing: 0.15em;
  font-weight: 800;
  line-height: 1.1;
}
.brand strong {
  font-weight: 400;
  color: var(--amber);
}
.brand small {
  display: block;
  color: var(--muted);
  font:
    8px/1.5 "Courier New",
    monospace;
  letter-spacing: 0.25em;
  margin-top: 8px;
}
.brand svg {
  width: 42px;
  height: 42px;
  stroke: var(--amber);
  fill: none;
  stroke-width: 1.3;
}
.edition,
.micro,
.eyebrow,
.small-index,
.signal-tag,
.stage-annotation,
.serial,
.section-caption,
.window-number {
  font-family: "Courier New", monospace;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 10px;
}
.edition {
  color: var(--muted);
  display: flex;
  gap: 16px;
  align-items: center;
}
.edition i {
  height: 20px;
  border-left: 1px solid var(--line);
}
.top-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}
.micro {
  color: var(--muted);
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--glow);
  border-radius: 50%;
  box-shadow: 0 0 10px #62e5ed66;
  margin-right: 9px;
}
.top-button,
.button {
  border: 1px solid var(--amber);
  background: var(--amber);
  color: #111c24;
  padding: 14px 20px;
  font:
    700 11px "Courier New",
    monospace;
  letter-spacing: 0.08em;
  min-height: 44px;
}
.top-button {
  background: transparent;
  color: var(--amber);
}
.top-button span {
  margin-left: 16px;
}
.button:hover:not(:disabled) {
  background: #f5d6a9;
  color: #111c24;
}
.button.secondary {
  background: transparent;
  color: var(--glow);
  border-color: var(--glow);
}
.global-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: #0b141ef5;
  backdrop-filter: blur(12px);
  padding: 0 4.5%;
  min-height: 62px;
}
.global-nav button {
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  font:
    11px "Courier New",
    monospace;
  letter-spacing: 0.1em;
  padding: 15px 22px;
  position: relative;
  min-height: 48px;
}
.global-nav button.active:after {
  content: "";
  height: 2px;
  background: var(--glow);
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
}
.global-nav button.active {
  color: var(--glow);
  background: #62e5ed08;
}
.global-nav .nav-home {
  color: var(--amber);
  padding-left: 0;
  border-left: 0;
}
.nav-home span {
  font-size: 21px;
  margin-right: 10px;
}
.global-nav .nav-back {
  font-size: 20px;
  padding: 15px 18px;
}
.nav-destinations {
  display: flex;
  flex: 1;
}
.nav-destinations button {
  flex: 1;
  text-align: left;
}
.nav-destinations span {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.08em;
}
.global-nav .nav-settings {
  border-right: 1px solid var(--line);
  font-size: 21px;
  padding: 10px 20px;
}
.world-indicator {
  width: 5px;
  height: 5px;
  position: absolute;
  right: 20px;
  top: 25px;
  border: 1px solid var(--muted);
  border-radius: 50%;
}
.host-connected .world-indicator {
  background: var(--glow);
  border-color: var(--glow);
  box-shadow: 0 0 10px var(--glow);
}
.layout {
  max-width: 1520px;
  margin: 0 auto;
  padding: 38px 4.5% 34px;
  display: grid;
  grid-template-columns: minmax(450px, 1.35fr) minmax(340px, 1fr);
  column-gap: 6%;
  row-gap: 28px;
  position: relative;
}
.masthead {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}
.eyebrow {
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.17em;
  line-height: 1.5;
}
.rule {
  display: inline-block;
  width: 28px;
  border-top: 1px solid var(--amber);
  vertical-align: middle;
  margin-right: 12px;
}
.masthead h1 {
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.98;
  margin: 20px 0 10px;
}
.masthead h1 em {
  font-style: normal;
  color: var(--glow);
  font-weight: 800;
}
.masthead-note {
  width: 35%;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  padding: 0 0 0 24px;
  border-left: 1px solid var(--line);
}
.small-index {
  color: var(--amber);
}
.masthead-note p {
  margin: 12px 0;
}
.mode-motto {
  font-size: 0.78rem;
}
.mode-motto b {
  font:
    10px "Courier New",
    monospace;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.device {
  min-width: 0;
}
.device-top,
.device-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.device-top {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.device-top .eyebrow {
  font-size: 9px;
}
.signal-tag {
  color: var(--muted);
  font-size: 8px;
}
.device-stage {
  height: 548px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.stage-orbit {
  position: absolute;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #8db4c014;
  background: radial-gradient(ellipse, #71e1eb09, transparent 65%);
  z-index: -2;
}
.stage-orbit:before,
.stage-orbit:after {
  content: "";
  position: absolute;
  inset: -24px 24px;
  border-radius: 50%;
  border: 1px dashed #799baa12;
  transform: rotate(-26deg);
}
.stage-orbit:after {
  inset: 24px -18px;
  transform: rotate(26deg);
}
.stage-annotation {
  position: absolute;
  color: #849ba7;
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: 0.09em;
  z-index: -1;
}
.annotation-a {
  left: 0;
  top: 20%;
  border-left: 1px solid #718f9d;
  padding-left: 9px;
}
.annotation-b {
  right: 0;
  bottom: 11%;
  border-right: 1px solid #718f9d;
  padding-right: 9px;
  text-align: right;
}
.wrist-strap {
  position: absolute;
  width: 40%;
  height: 99%;
  border: 1px solid #414f59;
  border-radius: 14px;
  background: repeating-linear-gradient(
    0deg,
    #111e27 0 8px,
    #2b3840 9px,
    #182630 11px,
    #14212a 15px
  );
  transform: rotate(-22deg);
  z-index: -1;
  box-shadow:
    inset 10px 0 14px #03080c88,
    inset -10px 0 14px #03080c88,
    0 20px 30px #0006;
}
.wrist-strap:before {
  content: "";
  position: absolute;
  inset: 0 13px;
  border-left: 1px solid #778b8a55;
  border-right: 1px solid #778b8a55;
}
.wrist-strap span {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font:
    8px "Courier New",
    monospace;
  color: #7f8f95;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.wrist-shell {
  --case-size: 470px;
  position: relative;
  width: min(92%, var(--case-size));
  aspect-ratio: 1;
  border-radius: 46%;
  background: linear-gradient(
    130deg,
    #e5c99a 0%,
    #ab7d53 3%,
    #3e4344 8%,
    #1b2931 19%,
    #081019 43%,
    #33414a 65%,
    #a8754b 86%,
    #eed0a0 92%,
    #8e6547 97%
  );
  box-shadow:
    inset 0 0 0 2px #f1d7a65c,
    inset 0 0 0 8px #172431,
    inset 0 0 0 9px #99836966,
    0 26px 44px #000b,
    0 0 90px #6ed9e512;
  display: grid;
  place-items: center;
}
.case-edge {
  position: absolute;
  inset: 13px;
  border-radius: 45%;
  border: 1px solid #b1b8af50;
  background: linear-gradient(140deg, #77888020, #09131e30);
  box-shadow: inset 1px 1px 2px #e4c59266;
}
.case-ticks {
  position: absolute;
  inset: 21px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    #c3ac8233 0deg 1deg,
    transparent 1deg 6deg
  );
  mask-image: radial-gradient(
    circle,
    transparent 63%,
    #000 64%,
    #000 66%,
    transparent 67%
  );
  pointer-events: none;
}
.case-engraving,
.case-number {
  position: absolute;
  font:
    8px "Courier New",
    monospace;
  color: #e6c79b;
  letter-spacing: 0.32em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.case-engraving {
  top: 24px;
}
.case-number {
  bottom: 23px;
  font-size: 7px;
  letter-spacing: 0.15em;
  color: #a4b4b7;
}
.wrist-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 25% 25%, #d6c39f, #5a615f 50%, #101d29);
  border-radius: 50%;
  border: 1px solid #c0b39355;
}
.wrist-screw:after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 3px;
  border-top: 1px solid #0c1720;
  transform: rotate(45deg);
}
.screw-a {
  left: 17%;
  top: 8%;
}
.screw-b {
  right: 17%;
  top: 8%;
}
.screw-c {
  left: 17%;
  bottom: 8%;
}
.screw-d {
  right: 17%;
  bottom: 8%;
}
.crown {
  position: absolute;
  right: -16px;
  top: 43%;
  height: 66px;
  width: 24px;
  border: 1px solid #a39276;
  background: repeating-linear-gradient(0deg, #a4906e 0 2px, #3d494c 3px 6px);
  border-radius: 4px;
  box-shadow: 3px 3px 10px #0008;
  z-index: -1;
}
.case-leds {
  position: absolute;
  bottom: 42px;
  display: flex;
  gap: 5px;
}
.case-leds i {
  width: 9px;
  height: 2px;
  background: var(--glow);
  box-shadow: 0 0 6px #62e5ed88;
}
.case-leds i:nth-child(2) {
  opacity: 0.6;
}
.case-leds i:nth-child(3) {
  opacity: 0.3;
}
.screen-border {
  position: relative;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  padding: 6px;
  border: 1px solid #81a2a291;
  background: #07111a;
  box-shadow:
    inset 0 0 0 3px #1c303b,
    0 0 20px #62e5ed11;
}
.screen {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1px solid #355562;
  background: radial-gradient(circle at 50% 43%, #122c38, #071521 65%, #0c1b26);
  overflow: hidden;
  position: relative;
}
.screen:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    #6be4eb03 3px 4px
  );
  box-shadow: inset 0 0 45px #030a0f80;
}
.device-head {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font:
    8px "Courier New",
    monospace;
  color: var(--amber);
  letter-spacing: 0.16em;
}
.device-head small {
  display: block;
  color: var(--muted);
  font-size: 7px;
  margin-top: 6px;
  letter-spacing: 0.06em;
}
.glance {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 30px 24px;
}
.glance-mark {
  font:
    48px Georgia,
    serif;
  color: var(--glow);
  line-height: 1.1;
  text-shadow: 0 0 30px #62e5ed77;
}
.glance-title {
  font:
    12px "Courier New",
    monospace;
  letter-spacing: 0.14em;
  margin: 12px 0 2px;
  color: var(--ink);
}
.glance-sub {
  font:
    8px "Courier New",
    monospace;
  color: var(--muted);
  margin: 8px 0;
}
.meters {
  display: flex;
  gap: 12px;
  margin: 12px 0 16px;
}
.meter {
  text-align: center;
  border-left: 1px solid var(--line);
  padding: 0 12px;
}
.meter:first-child {
  border: 0;
}
.meter label {
  display: block;
  font:
    7px "Courier New",
    monospace;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.meter strong {
  font:
    22px "Courier New",
    monospace;
  font-weight: 400;
  color: var(--glow);
}
.glance .button {
  font-size: 9px;
  padding: 11px 14px;
}
.glance-foot {
  font:
    7px "Courier New",
    monospace;
  color: var(--muted);
  margin-top: 12px;
}
.field {
  height: 100%;
  position: relative;
}
.wheel {
  position: absolute;
  inset: 0;
  --orbit-outer: 154px;
  --orbit-middle: 117px;
  --orbit-inner: 78px;
}
.nested-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #66b1b526;
  border-radius: 50%;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  pointer-events: none;
}
.nested-ring:before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px dashed #b18d5518;
  border-radius: 50%;
}
.nested-ring.selected {
  border-color: #66cdd96b;
  box-shadow:
    0 0 24px #62e5ed0a,
    inset 0 0 18px #62e5ed05;
}
.nested-ring.outer {
  --radius: var(--orbit-outer);
}
.nested-ring.middle {
  --radius: var(--orbit-middle);
}
.nested-ring.inner {
  --radius: var(--orbit-inner);
}
.ring-ghost,
.orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle))
    translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));
}
.ring-ghost {
  width: 6px;
  height: 6px;
  background: #526a7480;
  border: 1px solid #9daca14d;
  border-radius: 50%;
  pointer-events: none;
}
.ring-ghost.outer,
.orbit-item.outer {
  --radius: var(--orbit-outer);
}
.ring-ghost.middle,
.orbit-item.middle {
  --radius: var(--orbit-middle);
}
.ring-ghost.inner,
.orbit-item.inner {
  --radius: var(--orbit-inner);
}
.orbit-item {
  width: 48px;
  height: 48px;
  border: 1px solid #719297;
  background: linear-gradient(140deg, #29424a, #0c212d);
  color: var(--glow);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px #0009;
  z-index: 3;
  font-family: "Courier New", monospace;
}
.orbit-item b {
  font-size: 16px;
  font-weight: 400;
}
.orbit-item small {
  font-size: 6px;
  max-width: 43px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.orbit-item.active {
  border-color: var(--amber);
  color: var(--amber);
  background: #513d2a;
  box-shadow: 0 0 24px #e9b87433;
}
.wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 77px;
  height: 77px;
  border-radius: 50%;
  border: 1px solid var(--amber);
  background: radial-gradient(circle, #29414a, #0b1b29);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 5px #dcb88308,
    0 0 35px #62e5ed12;
  pointer-events: none;
}
.wheel-center strong {
  font:
    15px "Courier New",
    monospace;
  color: var(--amber);
}
.wheel-center small {
  font:
    6px "Courier New",
    monospace;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 5px;
}
.screen-selection {
  position: absolute;
  left: 50%;
  bottom: 37px;
  transform: translateX(-50%);
  font:
    7px "Courier New",
    monospace;
  letter-spacing: 0.07em;
  color: var(--muted);
  max-width: 130px;
  text-align: center;
  pointer-events: none;
}
.ring-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  max-width: 470px;
}
.tab {
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #12212b;
  color: var(--muted);
  font:
    10px "Courier New",
    monospace;
  letter-spacing: 0.05em;
  flex: 1;
}
.tab b {
  color: var(--amber);
  margin-right: 10px;
  font-size: 17px;
  font-weight: 400;
}
.tab.active {
  background: #19323c;
  color: var(--glow);
  border-color: #5c8e92;
}
.tab.active b {
  color: var(--glow);
}
.device-bottom {
  padding: 20px 0 0;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 0.1em;
  color: var(--muted);
  gap: 8px;
}
.device-bottom .serial {
  font-size: 7px;
}
.disclosure {
  font-size: 0.67rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin: 12px 0;
}
.workspace {
  border-top: 1px solid var(--line);
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.workspace-header .eyebrow {
  font-size: 9px;
}
.window-number {
  color: var(--muted);
}
.workspace h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 22px 0;
}
.workspace-content {
  flex: 1;
  min-width: 0;
}
.section-caption {
  color: var(--glow);
  font-size: 10px;
  line-height: 1.6;
  margin: 22px 0 12px;
}
.work-description {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  margin: 12px 0;
}
.dim {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.75;
}
.text-button {
  background: transparent;
  border: 0;
  color: var(--amber);
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 0.05em;
  min-height: 44px;
  padding: 8px 0;
  text-align: left;
}
.chip,
.icon-button,
.item {
  background: #13232e;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 44px;
  padding: 12px 14px;
  font:
    10px "Courier New",
    monospace;
  letter-spacing: 0.03em;
}
.chip.active {
  color: var(--glow);
  border-color: var(--glow);
  background: #183640;
}
.chip.danger {
  color: #ffb0a1;
}
.icon-button {
  font-size: 18px;
  padding: 8px 12px;
  min-width: 44px;
}
.work-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.work-buttons > .button {
  flex: 1;
}
.work-grid {
  display: grid;
  gap: 9px;
}
.home-feature {
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 18px 0;
  width: 100%;
  text-align: left;
}
.home-feature:last-child {
  border-bottom: 1px solid var(--line);
}
.home-feature .feature-number {
  font:
    23px "Courier New",
    monospace;
  color: var(--amber);
  font-weight: 400;
}
.home-feature strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.home-feature small {
  font-size: 0.78rem;
  color: var(--muted);
}
.feature-arrow {
  color: var(--glow);
  font-size: 20px;
}
.home-note {
  border-left: 2px solid var(--amber);
  padding: 2px 0 2px 16px;
  margin-top: 25px;
}
.home-note p {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
}
.home-note strong {
  color: var(--ink);
  font-weight: 500;
}
.workspace-footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 30px;
  padding-top: 10px;
  font:
    8px "Courier New",
    monospace;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.workspace-footer .text-button {
  font-size: 8px;
}
.module-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.module-link {
  border: 1px solid var(--line);
  padding: 14px;
  background: #10212a;
  text-align: left;
  min-height: 85px;
}
.module-link b {
  font-size: 1rem;
  font-weight: 500;
  display: block;
}
.module-link small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.6;
  margin-top: 8px;
}
.module-link.active {
  border-color: var(--amber);
}
.status-pill {
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 0.06em;
  color: var(--amber);
  line-height: 1.7;
}
.status-pill.live {
  color: var(--glow);
}
.app-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.catalog-card {
  border: 1px solid var(--line);
  background: #0d1c26;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.catalog-card strong {
  font-size: 0.9rem;
  font-weight: 500;
}
.catalog-card small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.7;
  margin-top: 6px;
}
.catalog-card .chip {
  padding: 8px;
  min-width: 55px;
}
.catalog-card .status-pill {
  margin-right: 8px;
}
.catalog-card > div:first-child {
  flex: 1;
}
.search-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  align-items: center;
}
.search-row input {
  flex: 1;
  width: 0;
}
.search-row select {
  max-width: 150px;
}
input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
textarea,
select {
  background: #0c1c27;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 13px 12px;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  font-size: 0.9rem;
}
textarea {
  resize: vertical;
  min-height: 110px;
}
label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
label input,
label textarea,
label select {
  margin-top: 7px;
}
input[type="range"] {
  accent-color: var(--glow);
  width: 100%;
  min-height: 34px;
}
input[type="checkbox"] {
  accent-color: var(--glow);
  width: 18px;
  height: 18px;
}
input[type="color"] {
  background: transparent;
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  padding: 4px;
}
.world-card {
  border: 1px solid var(--line);
  background: #101e2a;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  min-height: 114px;
}
.world-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(150deg, #223e4b, #0d1d2d);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.world-art:before,
.world-art:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  transform: rotate(45deg);
  border: 1px solid #71dce94d;
}
.world-art:after {
  width: 54px;
  height: 54px;
  border-color: #dfb77977;
}
.world-art svg {
  width: 30px;
  height: 30px;
  stroke: var(--amber);
  fill: none;
  stroke-width: 1;
  z-index: 1;
}
.world-card[data-id="btm"] .world-art {
  background: linear-gradient(130deg, #443224, #142531);
}
.world-card[data-id="spark"] .world-art {
  background: linear-gradient(140deg, #243a50, #10212f);
}
.world-card[data-id="infinite-porch"] .world-art {
  background: linear-gradient(140deg, #2c3c2f, #11222e);
}
.world-info {
  padding: 14px 14px 10px;
  min-width: 0;
}
.world-info strong {
  font-size: 1rem;
  font-weight: 500;
}
.world-info small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
  margin-top: 5px;
}
.world-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.world-controls .icon-button {
  font-size: 16px;
  padding: 4px 10px;
}
.world-controls .fav {
  color: var(--amber);
}
.world-controls .chip {
  font-size: 9px;
  min-height: 36px;
  padding: 8px 12px;
}
.world-controls .icon-button {
  min-height: 36px;
  min-width: 36px;
}
.world-category {
  font:
    7px "Courier New",
    monospace;
  letter-spacing: 0.08em;
  color: var(--glow);
  margin-bottom: 6px;
}
.recent-world {
  font-size: 7px;
  color: var(--amber);
  margin-left: 8px;
}
.atlas-list {
  max-height: 566px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #46606f transparent;
}
.empty-state {
  border: 1px dashed var(--line);
  padding: 28px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
}
.host-picker {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.host-card {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  background: #10212a;
  padding: 16px;
  text-align: left;
  min-height: 74px;
}
.host-card .icon {
  width: 38px;
  height: 38px;
  border: 1px solid #6b8d9366;
  border-radius: 50%;
  color: var(--amber);
}
.host-card b {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}
.host-card small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 6px;
}
.host-card > span:last-child {
  margin-left: auto;
  color: var(--glow);
}
.world-surface {
  --host-accent: var(--glow);
  border: 1px solid var(--line);
  padding: 20px;
  background: #0b1a24;
  position: relative;
}
.world-surface:before {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  top: 0;
  background: var(--host-accent);
}
.host-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
}
.host-heading .icon {
  color: var(--host-accent);
}
.host-name {
  font-size: 0.9rem;
  font-weight: 500;
}
.host-kind {
  font:
    8px "Courier New",
    monospace;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}
.context-switcher {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.context-switcher .chip {
  font-size: 9px;
  padding: 11px;
}
.context-switcher .active {
  border-color: var(--host-accent);
  color: var(--host-accent);
}
.host-status {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0;
}
.host-stat {
  min-width: 0;
}
.host-stat small {
  display: block;
  font:
    9px "Courier New",
    monospace;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.host-stat strong {
  font:
    26px "Courier New",
    monospace;
  color: var(--host-accent);
  font-weight: 400;
}
.host-stat.text {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}
.host-stat.text strong {
  font:
    0.9rem "Trebuchet MS",
    sans-serif;
  line-height: 1.5;
  color: var(--ink);
  max-width: 72%;
  text-align: right;
  overflow-wrap: anywhere;
}
.host-stat progress {
  display: block;
  width: 100%;
  height: 4px;
  accent-color: var(--host-accent);
  margin-top: 8px;
}
.host-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.host-action {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border: 1px solid #47646d;
  background: #18303b;
  color: var(--host-accent);
  font:
    9px "Courier New",
    monospace;
  padding: 13px 8px;
  min-height: 48px;
}
.permissions {
  margin: 18px 0;
  border: 1px dashed var(--line);
  padding: 13px;
}
.permissions summary {
  cursor: pointer;
  font:
    10px "Courier New",
    monospace;
  color: var(--amber);
  min-height: 28px;
  line-height: 1.7;
}
.grant-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.grant-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  text-transform: uppercase;
  font:
    10px "Courier New",
    monospace;
}
.approved-view {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 18px;
}
.approved-view h4 {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--host-accent);
}
.approved-view p,
.approved-view li {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--muted);
}
.approved-view ol {
  padding-left: 18px;
}
.view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.view-grid span {
  border: 1px solid var(--line);
  padding: 20px 10px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  background: #132835;
}
.layout-studio .host-status {
  grid-template-columns: 1fr;
}
.layout-studio .host-stat.number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.layout-explorer .approved-view ol {
  list-style: none;
  padding: 0;
}
.layout-explorer .approved-view li {
  border-left: 1px solid var(--host-accent);
  padding: 0 0 16px 18px;
  margin-left: 5px;
}
.layout-inventory .view-grid span {
  min-height: 85px;
  display: grid;
  place-items: center;
  border-color: #79916b77;
}
.palette-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.palette-chips span {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  display: inline-grid;
  place-items: center;
  font-size: 8px;
}
.world-wrist {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 45px 38px;
  text-align: center;
}
.world-wrist .icon svg {
  width: 38px;
  height: 38px;
  color: var(--glow);
}
.world-wrist h3 {
  font-size: 20px;
  font-weight: 400;
  margin: 14px 0 3px;
}
.world-wrist p {
  font:
    8px "Courier New",
    monospace;
  color: var(--muted);
  line-height: 1.8;
}
.world-wrist .meters {
  margin: 10px 0;
}
.world-wrist .meter {
  padding: 0 8px;
}
.world-wrist .meter strong {
  font-size: 19px;
}
.world-wrist .chip {
  font-size: 8px;
  padding: 8px 12px;
}
.disconnect-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.disconnect-row .text-button {
  font-size: 8px;
}
.glyph-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  background-color: #081622;
  background-image:
    linear-gradient(#71bbd00a 1px, transparent 1px),
    linear-gradient(90deg, #71bbd00a 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid #4c6e79;
  touch-action: none;
  cursor: crosshair;
}
.drawing-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.drawing-toolbar .chip {
  min-width: 44px;
  padding: 9px;
}
.drawing-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}
.drawing-toolbar select {
  padding: 8px;
  width: auto;
}
.drawing-toolbar input[type="range"] {
  width: 70px;
}
.drawing-toolbar input {
  margin: 0;
}
.layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.layer-row select {
  flex: 1;
  width: auto;
}
.layer-row .chip {
  padding: 10px;
  font-size: 9px;
}
.project-row {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}
.project-row input {
  flex: 1;
  width: 0;
}
.project-row button {
  flex: none;
}
.saved-project {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 8px;
  align-items: center;
}
.saved-project .text-button {
  flex: 1;
}
.saved-project .chip {
  padding: 8px 10px;
  font-size: 8px;
}
.journal-form {
  display: grid;
  gap: 12px;
}
.journal-entry {
  border: 1px solid var(--line);
  padding: 18px;
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.journal-entry h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--amber);
}
.journal-entry p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted);
  white-space: pre-wrap;
}
.journal-entry small {
  font:
    9px "Courier New",
    monospace;
  color: var(--muted);
}
.journal-entry .text-button {
  min-height: 36px;
}
.storage-warning {
  font-size: 0.8rem;
  line-height: 1.7;
  padding: 12px;
  border: 1px solid var(--amber);
  color: var(--amber);
}
.file-import {
  display: none;
}
.geometry-preview {
  height: 200px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse, #183d4f, #0a1823);
  border: 1px solid var(--line);
  overflow: hidden;
}
.geometry-preview svg {
  width: 100%;
  height: 100%;
}
.geometry-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 15px 0;
}
.measurement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.measurement-grid div {
  background: #0b1c27;
  padding: 15px;
}
.measurement-grid strong {
  font:
    22px "Courier New",
    monospace;
  color: var(--glow);
  display: block;
  margin: 5px 0;
}
.measurement-grid small {
  font-size: 0.7rem;
  color: var(--muted);
}
.level-indicator {
  height: 34px;
  border: 1px solid var(--line);
  margin: 16px 0;
  position: relative;
  background: linear-gradient(
    90deg,
    transparent 48%,
    #e9b87433 48% 52%,
    transparent 52%
  );
}
.level-indicator span {
  position: absolute;
  left: var(--bubble);
  top: 6px;
  height: 20px;
  width: 30px;
  border: 1px solid var(--glow);
  border-radius: 50%;
  background: #62e5ed33;
  transform: translateX(-50%);
}
.tool-names {
  margin: 18px 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 2;
}
.rock-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  height: 260px;
  justify-content: flex-start;
  gap: 4px;
  padding: 25px 10px;
  background: radial-gradient(ellipse at 50% 90%, #203a43, #0a1823 80%);
  border: 1px solid var(--line);
}
.rock {
  height: 18px;
  border-radius: 60% 45% 35% 50%;
  background: linear-gradient(150deg, #c4d6cc, #5f8c92, #263b49);
  box-shadow: 0 3px 10px #0008;
}
.rock:nth-child(2n) {
  background: linear-gradient(150deg, #edc596, #977c63, #40424a);
}
.count {
  font:
    24px "Courier New",
    monospace;
  text-align: center;
  color: var(--amber);
}
.laughter-display {
  padding: 30px 24px;
  border: 1px solid var(--line);
  background: #122630;
  min-height: 180px;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.laughter-display:before {
  content: "“";
  display: block;
  font:
    50px/1 Georgia,
    serif;
  color: var(--amber);
}
.mote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 22px;
  background: #0b1925;
  border: 1px solid var(--line);
}
.mote {
  aspect-ratio: 1;
  border: 1px solid #2e4c58;
  background: radial-gradient(circle, #234c5d, #10212d);
  border-radius: 50%;
  position: relative;
  min-height: 60px;
}
.mote.on {
  background: radial-gradient(
    circle,
    #f4e7b2 0,
    #b8d6a0 15%,
    #407274 45%,
    #163846 70%
  );
  border-color: #b8d6a0;
  box-shadow: 0 0 25px #b8d6a022;
}
.mote:after {
  content: "·";
  color: var(--glow);
  font-size: 34px;
}
.mote.on:after {
  content: "✦";
  color: #f4edc9;
  font-size: 25px;
}
.architecture-strip {
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px 4.5% 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  position: relative;
}
.architecture-strip > div {
  display: flex;
  gap: 20px;
  align-items: center;
}
.architecture-strip b {
  font:
    44px "Courier New",
    monospace;
  color: var(--amber);
  font-weight: 400;
  letter-spacing: -0.08em;
}
.architecture-strip span {
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.architecture-strip small {
  display: block;
  margin-top: 8px;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted);
}
.architecture-strip p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 5px 0;
  border-left: 1px solid var(--line);
  padding-left: 25px;
}
.page-footer {
  padding: 22px 4.5%;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 0.08em;
  color: var(--muted);
  position: relative;
  background: #080f19;
}
.page-footer a {
  text-decoration: none;
  color: var(--amber);
}
.horizon {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.horizon-sun {
  position: absolute;
  right: -40px;
  top: 40%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    #9b715000 0 10px,
    #aa724414 10px 14px
  );
  opacity: 0.5;
}
.horizon-grid {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -20%;
  height: 55%;
  background:
    linear-gradient(#5d8eac0c 1px, transparent 1px),
    linear-gradient(90deg, #5d8eac0c 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(500px) rotateX(60deg);
  mask-image: linear-gradient(transparent, #000);
}
.notice {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  background: #18303f;
  border: 1px solid var(--glow);
  padding: 16px 20px;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.6;
  z-index: 60;
  display: none;
  box-shadow: 0 10px 40px #0009;
}
.notice.active {
  display: block;
}
dialog {
  background: #0c1c28;
  color: var(--ink);
  border: 1px solid #a48b65;
  max-width: min(620px, calc(100vw - 28px));
  max-height: 90vh;
  padding: 30px;
  box-shadow: 0 30px 90px #000b;
}
dialog::backdrop {
  background: #030911cc;
  backdrop-filter: blur(5px);
}
dialog h2 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 10px 0 22px;
}
dialog p {
  line-height: 1.8;
  color: var(--muted);
}
.dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 25px;
  flex-wrap: wrap;
}
.settings-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}
.settings-heading h2 {
  margin-bottom: 12px;
}
.settings-heading .icon-button {
  background: transparent;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
.settings-grid > label {
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 0.05em;
}
.settings-grid .check-row {
  font:
    0.9rem "Trebuchet MS",
    sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.check-row input {
  margin: 0;
}
.settings-grid .home-setting {
  grid-column: 1/-1;
}
.home-setting small {
  display: block;
  font:
    0.75rem/1.7 "Trebuchet MS",
    sans-serif;
  margin-top: 9px;
  color: var(--muted);
}
@keyframes wake {
  from {
    opacity: 1;
    filter: brightness(1.2);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}
.field,
.glance,
.world-wrist {
  animation: wake 0.3s ease-out;
}
.screen-border {
  transition: box-shadow 0.3s;
}
.host-connected .screen-border {
  box-shadow:
    inset 0 0 0 3px #1c303b,
    0 0 22px #62e5ed25;
}
@media (min-width: 1500px) {
  .wrist-shell {
    --case-size: 510px;
  }
  .device-stage {
    height: 590px;
  }
  .wheel {
    --orbit-outer: 170px;
    --orbit-middle: 130px;
    --orbit-inner: 88px;
  }
  .orbit-item {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 1100px) {
  .edition {
    display: none;
  }
  .layout {
    column-gap: 4%;
    grid-template-columns: minmax(360px, 1.15fr) minmax(320px, 1fr);
    padding-left: 3.5%;
    padding-right: 3.5%;
  }
  .device-stage {
    height: 470px;
  }
  .wrist-shell {
    --case-size: 410px;
  }
  .wheel {
    --orbit-outer: 130px;
    --orbit-middle: 104px;
    --orbit-inner: 76px;
  }
  .orbit-item {
    width: 44px;
    height: 44px;
  }
  .orbit-item small {
    font-size: 5px;
  }
  .case-engraving {
    top: 20px;
    font-size: 7px;
  }
  .case-number {
    bottom: 18px;
  }
  .screen-selection {
    bottom: 28px;
  }
  .case-leds {
    bottom: 35px;
  }
  .device-head {
    top: 22px;
  }
  .stage-annotation {
    display: none;
  }
  .device-bottom .serial {
    display: none;
  }
  .glance {
    padding: 54px 20px 20px;
  }
  .glance-mark {
    font-size: 36px;
  }
  .glance .button {
    min-height: 40px;
    padding: 10px;
    font-size: 8px;
  }
  .glance-foot {
    margin-top: 8px;
  }
  .meters {
    margin: 12px 0;
    gap: 7px;
  }
  .meter {
    padding: 0 8px;
  }
  .meter strong {
    font-size: 20px;
  }
  .world-wrist {
    padding: 50px 35px 25px;
  }
  .world-wrist h3 {
    font-size: 18px;
  }
  .global-nav button {
    padding: 14px 16px;
  }
  .host-status {
    gap: 10px;
  }
  .host-stat strong {
    font-size: 23px;
  }
  .host-actions {
    grid-template-columns: 1fr;
  }
  .architecture-strip {
    gap: 18px;
  }
  .architecture-strip > div {
    gap: 14px;
  }
}
@media (max-width: 800px) {
  .topbar {
    height: 78px;
    padding: 0 5%;
    gap: 10px;
  }
  .brand {
    font-size: 17px;
    gap: 10px;
  }
  .brand svg {
    width: 34px;
    height: 34px;
  }
  .brand small {
    font-size: 6px;
  }
  .micro {
    display: none;
  }
  .top-button {
    font-size: 9px;
    padding: 12px;
  }
  .top-button span {
    margin-left: 8px;
  }
  .global-nav {
    padding: 0 4%;
    min-height: 56px;
  }
  .global-nav .nav-home {
    font-size: 9px;
    padding-right: 14px;
  }
  .nav-home span {
    font-size: 17px;
    margin-right: 5px;
  }
  .nav-destinations button {
    font-size: 9px;
    padding: 12px 12px;
    text-align: center;
  }
  .nav-destinations span {
    display: none;
  }
  .global-nav .nav-back {
    padding: 10px;
  }
  .global-nav .nav-settings {
    font-size: 19px;
    padding: 10px 12px;
  }
  .world-indicator {
    display: none;
  }
  .layout {
    display: block;
    padding: 25px 5% 30px;
  }
  .masthead {
    gap: 24px;
    align-items: center;
    margin-bottom: 30px;
  }
  .masthead h1 {
    font-size: 48px;
  }
  .masthead-note {
    width: 35%;
    padding-left: 20px;
    font-size: 0.75rem;
  }
  .masthead-note .small-index {
    font-size: 8px;
  }
  .mode-motto {
    display: none;
  }
  .masthead .eyebrow {
    font-size: 8px;
  }
  .device {
    max-width: 590px;
    margin: auto;
  }
  .device-stage {
    height: 555px;
  }
  .wrist-shell {
    --case-size: 470px;
  }
  .wheel {
    --orbit-outer: 154px;
    --orbit-middle: 117px;
    --orbit-inner: 78px;
  }
  .orbit-item {
    width: 48px;
    height: 48px;
  }
  .case-engraving {
    top: 24px;
  }
  .case-number {
    bottom: 23px;
  }
  .screen-selection {
    bottom: 37px;
  }
  .case-leds {
    bottom: 42px;
  }
  .device-head {
    top: 26px;
  }
  .glance {
    padding: 60px 30px 24px;
  }
  .glance-mark {
    font-size: 48px;
  }
  .glance .button {
    font-size: 9px;
    padding: 11px 14px;
  }
  .meters {
    margin: 16px 0;
    gap: 12px;
  }
  .meter {
    padding: 0 12px;
  }
  .meter strong {
    font-size: 23px;
  }
  .world-wrist {
    padding: 60px 45px 38px;
  }
  .workspace {
    margin-top: 35px;
  }
  .workspace h2 {
    font-size: 32px;
    margin: 20px 0;
  }
  .workspace-content {
    max-width: none;
  }
  .atlas-list {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .host-actions {
    grid-template-columns: 1fr 1fr;
  }
  .world-card {
    grid-template-columns: 85px 1fr;
  }
  .architecture-strip {
    grid-template-columns: repeat(3, 1fr);
    padding: 26px 5%;
    gap: 15px;
  }
  .architecture-strip p {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 15px 0 0;
    margin: 0;
  }
  .architecture-strip b {
    font-size: 34px;
  }
  .architecture-strip > div {
    gap: 12px;
  }
  .architecture-strip small {
    font-size: 9px;
  }
  .page-footer {
    padding: 24px 5%;
    flex-wrap: wrap;
    line-height: 1.8;
  }
}
@media (max-width: 480px) {
  .topbar {
    height: 76px;
  }
  .brand {
    font-size: 15px;
    letter-spacing: 0.11em;
  }
  .brand svg {
    width: 29px;
    height: 29px;
  }
  .top-button {
    font-size: 8px;
    padding: 10px;
    min-height: 40px;
  }
  .global-nav {
    padding: 0 3%;
    min-height: 52px;
  }
  .global-nav .nav-home {
    font-size: 8px;
    padding-right: 10px;
    min-width: 56px;
  }
  .global-nav .nav-back {
    padding: 10px 8px;
    min-width: 35px;
  }
  .nav-destinations button {
    font-size: 8px;
    padding: 12px 7px;
    letter-spacing: 0.01em;
  }
  .global-nav .nav-settings {
    padding: 8px 9px;
    font-size: 17px;
  }
  .layout {
    padding: 22px 5% 30px;
  }
  .masthead {
    display: block;
    margin-bottom: 25px;
  }
  .masthead h1 {
    font-size: clamp(40px, 12vw, 54px);
    margin: 18px 0;
  }
  .masthead-note {
    width: 100%;
    border: 0;
    padding: 0;
    font-size: 0.86rem;
    margin-top: 15px;
  }
  .masthead-note p {
    margin: 8px 0;
  }
  .masthead-note .small-index {
    display: none;
  }
  .masthead .eyebrow {
    font-size: 8px;
  }
  .rule {
    width: 18px;
    margin-right: 8px;
  }
  .device-stage {
    height: 405px;
    margin-top: 7px;
  }
  .wrist-shell {
    width: 94%;
    --case-size: 360px;
  }
  .screen-border {
    width: 84%;
    height: 84%;
  }
  .wheel {
    --orbit-outer: 113px;
    --orbit-middle: 98px;
    --orbit-inner: 75px;
  }
  .orbit-item {
    width: 44px;
    height: 44px;
  }
  .orbit-item small {
    font-size: 5px;
  }
  .wheel-center {
    width: 61px;
    height: 61px;
  }
  .wheel-center strong {
    font-size: 13px;
  }
  .wheel-center small {
    font-size: 5px;
  }
  .case-engraving {
    top: 18px;
    font-size: 6px;
  }
  .case-number {
    bottom: 17px;
    font-size: 5px;
  }
  .case-leds {
    bottom: 31px;
  }
  .case-leds i {
    width: 6px;
  }
  .case-edge {
    inset: 9px;
  }
  .case-ticks {
    inset: 16px;
  }
  .case-engraving {
    letter-spacing: 0.25em;
  }
  .device-head {
    top: 24px;
    font-size: 6px;
  }
  .device-head small {
    font-size: 5px;
  }
  .screen-selection {
    bottom: 24px;
    font-size: 6px;
    max-width: 90px;
  }
  .crown {
    height: 48px;
    width: 18px;
    right: -12px;
  }
  .glance {
    padding: 54px 24px 25px;
  }
  .glance-mark {
    font-size: 35px;
  }
  .glance-title {
    font-size: 9px;
    margin-top: 8px;
  }
  .glance-sub {
    font-size: 6px;
    margin: 6px 0;
  }
  .meters {
    gap: 5px;
    margin: 10px 0 12px;
  }
  .meter {
    padding: 0 9px;
  }
  .meter label {
    font-size: 6px;
  }
  .meter strong {
    font-size: 18px;
  }
  .glance .button {
    font-size: 7px;
    min-height: 36px;
    padding: 9px;
  }
  .glance-foot {
    font-size: 6px;
    margin-top: 8px;
  }
  .world-wrist {
    padding: 50px 26px 25px;
  }
  .world-wrist .icon svg {
    height: 25px;
    width: 25px;
  }
  .world-wrist h3 {
    font-size: 16px;
    margin: 10px 0 2px;
  }
  .world-wrist p {
    font-size: 6px;
    margin: 6px 0;
  }
  .world-wrist .chip {
    font-size: 6px;
    min-height: 34px;
  }
  .world-wrist .meter strong {
    font-size: 16px;
  }
  .ring-controls {
    gap: 5px;
  }
  .tab {
    font-size: 8px;
    padding: 8px 7px;
    min-height: 46px;
  }
  .tab b {
    font-size: 15px;
    margin-right: 6px;
  }
  .device-bottom {
    font-size: 6px;
    padding-top: 14px;
  }
  .device-bottom .text-button {
    font-size: 7px;
  }
  .device-top .eyebrow {
    font-size: 8px;
  }
  .signal-tag {
    font-size: 7px;
  }
  .disclosure {
    font-size: 0.68rem;
    margin-top: 4px;
  }
  .workspace {
    margin-top: 24px;
  }
  .workspace h2 {
    font-size: 29px;
  }
  .workspace-footer span {
    font-size: 7px;
  }
  .workspace-footer .text-button {
    font-size: 7px;
  }
  .host-status {
    gap: 10px;
  }
  .host-stat strong {
    font-size: 22px;
  }
  .host-actions {
    grid-template-columns: 1fr 1fr;
  }
  .world-surface {
    padding: 16px;
  }
  .host-action {
    font-size: 8px;
  }
  .world-card {
    grid-template-columns: 70px 1fr;
  }
  .module-list {
    gap: 6px;
  }
  .module-link {
    padding: 12px;
  }
  .module-link b {
    font-size: 0.9rem;
  }
  .architecture-strip > div {
    display: block;
  }
  .architecture-strip b {
    display: block;
    margin-bottom: 8px;
  }
  .architecture-strip span {
    font-size: 8px;
  }
  .architecture-strip small {
    font-size: 8px;
  }
  .architecture-strip p {
    font-size: 0.75rem;
  }
  .settings-grid {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .settings-grid .home-setting {
    grid-column: auto;
  }
  dialog {
    padding: 24px 20px;
  }
  .dialog-buttons {
    flex-direction: column;
  }
  .dialog-buttons button {
    width: 100%;
  }
  .view-grid span {
    font-size: 0.75rem;
    padding: 16px 8px;
  }
  .project-row {
    flex-wrap: wrap;
  }
  .project-row input {
    min-width: 100%;
    width: 100%;
  }
  .geometry-controls {
    gap: 12px;
  }
  .laughter-display {
    font-size: 1.4rem;
  }
}
@media (max-width: 360px) {
  .device-stage {
    height: 365px;
  }
  .wheel {
    --orbit-outer: 100px;
    --orbit-middle: 88px;
    --orbit-inner: 72px;
  }
  .glance {
    padding-top: 50px;
  }
  .device-head {
    top: 19px;
  }
  .screen-selection {
    bottom: 21px;
  }
  .case-engraving {
    top: 16px;
  }
  .case-number {
    bottom: 15px;
  }
  .case-leds {
    bottom: 28px;
  }
  .world-wrist h3 {
    font-size: 14px;
  }
  .meters {
    gap: 2px;
  }
  .meter {
    padding: 0 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
body.reduced-motion *,
body.reduced-motion *:before,
body.reduced-motion *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.screen {
  container-type: inline-size;
}
.screen .wheel {
  --orbit-outer: min(40cqw, 170px);
  --orbit-middle: min(31cqw, 130px);
  --orbit-inner: clamp(72px, 22cqw, 88px);
}
/* Mechanical art must never cover a real hit target. */
.stage-orbit,
.stage-annotation,
.wrist-strap,
.case-edge,
.case-ticks,
.case-engraving,
.case-number,
.wrist-screw,
.case-leds {
  pointer-events: none;
}
/* Keep rotated ornament within the wearable stage on narrow viewports. */
.device-stage {
  overflow: clip;
}
.module-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-link {
  min-width: 0;
  overflow-wrap: anywhere;
}
.screen .wheel {
  --orbit-outer: min(40cqw, calc(50cqw - 23px), 170px);
}
@media (max-width: 800px) {
  .micro.offline {
    display: block;
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 20;
    background: #102b36;
    border: 1px solid var(--glow);
    padding: 12px;
    font-size: 9px;
    color: var(--ink);
  }
}


/* PhiOperator bridge: purely optional visual rewards; never permissions. */
.operator-passport-settings {
  border-top: 1px solid #56828a77;
  margin-top: 24px;
  padding: 18px 0;
}
.operator-passport-settings h3 {
  margin: 8px 0 12px;
  font-size: 1.2rem;
}
.operator-passport-settings p { max-width: 720px; line-height: 1.5; }
#operator-passport-status { color: #b7f9e8; font-weight: 650; }
.operator-passport-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.operator-passport-actions a { color: #b7f9e8; font-size: .84rem; }
.operator-passport-actions .operator-import-label { cursor: pointer; font-size: .78rem; padding: 10px 13px; }
#operator-passport-import {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
}
#operator-passport-import:focus-visible + label { outline: 3px solid #ffdc9b; }
.operator-passport-actions button:disabled { opacity: .4; cursor: default; }
body.operator-surf-wheel .phisurf-launch {
  border: 2px solid #e9c0ff;
  background: #2e1751;
  color: #ffe7ff;
  box-shadow: 0 0 0 3px #9341ad55, 0 8px 32px #b248f07d;
}
body.operator-surf-wheel .phisurf-launch::after { content: "  ✦"; }
body.operator-surf-wheel .phisurf-orbit {
  border: 2px solid #d3aaff;
  box-shadow: inset 0 0 70px #462761, 0 0 0 12px #6e35a233;
}
body.operator-surf-wheel .phisurf-center { border-color: #ead4ff; }
body.operator-wrist-pulse .wrist-shell {
  box-shadow: 0 0 26px #92eee788, 0 0 70px #b07aff66;
  animation: operator-wrist-glow 5s ease-in-out infinite;
}
body.operator-wrist-pulse .case-engraving { color: #c8b2ff; }
@keyframes operator-wrist-glow {
  0%,100% { filter: saturate(1); }
  50% { filter: saturate(1.4) brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  body.operator-wrist-pulse .wrist-shell { animation: none !important; }
}
body.reduced-motion.operator-wrist-pulse .wrist-shell { animation: none !important; }
@media (max-width: 600px) {
  .operator-passport-actions { align-items: stretch; }
  .operator-passport-actions a { align-self: center; }
}