:root {
  color-scheme: dark;
  --ui-master-width: 1302px;
  --ui-master-height: 912px;
  --bg-top: #1b1920;
  --bg-bottom: #121118;
  --ink: #9b9aa1;
  --muted: rgba(155, 154, 161, 0.58);
  --panel: rgba(20, 20, 26, 0.92);
  --panel-edge: rgba(155, 154, 161, 0.2);
  --card-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --device-body: #bcbcbe;
  --device-edge: #c8c8cc;
  --screen-shell: #16151b;
  --screen-face: #9b9aa1;
  --screen-glow: rgba(155, 154, 161, 0.15);
  --key: #9b9aa1;
  --accent: #9b9aa1;
  --accent-strong: #c6c5cb;
  --danger: #9b9aa1;
  --font-display: "VT323", "IBM Plex Mono", monospace;
  --font-ui: "IBM Plex Mono", "SFMono-Regular", monospace;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(155, 154, 161, 0.08), transparent 26%),
    radial-gradient(circle at bottom left, rgba(155, 154, 161, 0.06), transparent 24%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(155, 154, 161, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155, 154, 161, 0.06) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.24;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, 0.34) 100%);
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
}

.access-gate[hidden] {
  display: none;
}

.access-gate__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(155, 154, 161, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(5, 5, 9, 0.72) 0%, rgba(5, 5, 9, 0.84) 100%);
  backdrop-filter: blur(18px);
}

.access-gate__panel {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 40px));
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(155, 154, 161, 0.22);
  background: rgba(20, 20, 26, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

.access-gate__eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.access-gate__title {
  margin: 0;
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.access-gate__copy,
.access-gate__label,
.access-gate__error {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.access-gate__copy,
.access-gate__label {
  color: var(--ink);
}

.access-gate__field {
  display: grid;
  gap: 8px;
}

.access-gate__password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.access-gate__input,
.access-gate__button,
.access-gate__toggle {
  border-radius: 16px;
  font-family: var(--font-ui);
  font-size: 14px;
}

.access-gate__input {
  width: 100%;
  border: 1px solid rgba(155, 154, 161, 0.22);
  background: rgba(155, 154, 161, 0.04);
  color: var(--accent-strong);
  padding: 14px 16px;
  outline: none;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.access-gate__input:focus {
  border-color: rgba(198, 197, 203, 0.42);
  background: rgba(155, 154, 161, 0.08);
  box-shadow: 0 0 0 3px rgba(198, 197, 203, 0.08);
}

.access-gate__button {
  border: 1px solid rgba(198, 197, 203, 0.34);
  background: rgba(155, 154, 161, 0.12);
  color: var(--accent-strong);
  padding: 14px 16px;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.access-gate__toggle {
  border: 1px solid rgba(198, 197, 203, 0.22);
  background: rgba(155, 154, 161, 0.06);
  color: var(--ink);
  padding: 14px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.access-gate__button:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.5);
  background: rgba(155, 154, 161, 0.16);
}

.access-gate__toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.34);
  background: rgba(155, 154, 161, 0.1);
  color: var(--accent-strong);
}

.access-gate__error {
  color: #f2d7d7;
}

body.is-auth-locked {
  overflow: hidden;
}

body.is-auth-locked .app-shell {
  pointer-events: none;
  user-select: none;
  filter: blur(16px);
  opacity: 0.18;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 34px 0 40px;
}

.hero,
.workspace {
  display: grid;
  gap: 24px;
}

.hero {
  margin-bottom: 16px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.language-switch,
.top-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-button,
.top-tab {
  border: 1px solid rgba(155, 154, 161, 0.18);
  background: rgba(155, 154, 161, 0.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.lang-button.is-active,
.top-tab.is-active {
  color: var(--accent-strong);
  background: rgba(155, 154, 161, 0.1);
  border-color: rgba(198, 197, 203, 0.34);
}

.lang-button:hover,
.top-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.28);
}

.section-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-ui);
}

.stage-header h2,
.panel-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%);
}

.stage-card,
.panel-card,
.full-view-card {
  padding: 24px;
}

.full-view-card--flush {
  padding: 0;
  overflow: hidden;
}

.stage-header,
.panel-header,
.group-title,
.mini-legend,
.status-grid,
.control-row {
  display: flex;
}

.stage-header,
.panel-header,
.group-title {
  justify-content: space-between;
  align-items: center;
}

.stage-header h2,
.panel-header h2 {
  font-size: 34px;
}

.mini-legend {
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-ui);
  text-transform: uppercase;
}

.mini-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.workspace-view {
  display: none;
}

.workspace-view.is-active {
  display: block;
}

.dashboard-stack {
  display: grid;
  gap: 24px;
}

.dashboard-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(520px, 1.2fr) minmax(360px, 0.8fr);
  align-items: start;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-screen {
  background: var(--accent);
}

.dot-key {
  background: var(--key);
}

.device-stage {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.device-stage + .control-group {
  margin-top: 6px;
}

.full-view-card .panel-header {
  margin-bottom: 22px;
}

.view-copy {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.ui-design-grid {
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-scene-card {
  display: grid;
  gap: 24px;
  margin-top: 16px;
}

.ui-scene-meta h3 {
  margin: 0;
  font-size: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.ui-scene-group {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ui-scene-preview {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(155, 154, 161, 0.03);
  border: 1px solid rgba(155, 154, 161, 0.12);
  overflow: hidden;
}

.ui-scene-expand {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(10, 10, 14, 0.7);
  color: rgba(245, 243, 238, 0.8);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    background 140ms ease;
}

.ui-scene-expand:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.96);
  background: rgba(16, 16, 22, 0.86);
}

.ui-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 217 / 152;
  overflow: hidden;
  --ui-stage-scale: 0.1667;
}

.ui-master-surface {
  width: var(--ui-master-width);
  height: var(--ui-master-height);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(var(--ui-stage-scale));
}

.ui-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 6, 10, 0.86);
  backdrop-filter: blur(16px);
  padding: 24px;
}

.ui-fullscreen-overlay[hidden] {
  display: none;
}

.ui-fullscreen-shell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
    rgba(12, 12, 18, 0.82);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ui-fullscreen-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.76);
  color: rgba(245, 243, 238, 0.84);
  font-family: var(--font-ui);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ui-fullscreen-stage {
  position: absolute;
  inset: 32px 32px 96px;
  display: grid;
  place-items: center;
}

.ui-fullscreen-stage__viewport {
  position: relative;
  width: var(--ui-master-width);
  height: var(--ui-master-height);
  transform-origin: center center;
  transform: scale(var(--ui-stage-scale, 1));
}

.ui-fullscreen-stage__viewport .ui-master-surface {
  transform: none;
  position: relative;
}

.ui-fullscreen-variants {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 14, 20, 0.78);
}

.ui-canvas-empty {
  width: 100%;
  height: 100%;
  border-radius: 42px;
  background: #0f0f14;
}

.pd-charge-boot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pd-boot-sequence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  animation: pd-boot-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.pd-charge-battery {
  position: relative;
  width: 96px;
  height: 44px;
  border: 4px solid #2d2b24;
  border-radius: 6px;
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.pd-charge-battery::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 10px;
  width: 5px;
  height: 16px;
  background: #2d2b24;
  border-radius: 0 3px 3px 0;
}

.pd-charge-scanline {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(45, 43, 36, 0.15) 0px,
    rgba(45, 43, 36, 0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  position: relative;
  overflow: hidden;
}

.pd-charge-scanline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  width: 30px;
  background-image: repeating-linear-gradient(
    90deg,
    #2d2b24 0px,
    #2d2b24 2px,
    transparent 2px,
    transparent 4px
  );
  animation: pd-scan-sweep 1.8s linear infinite;
}

.pd-charge-percent {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #25231d;
}

.ui-screen-frame--glow .pd-charge-battery {
  border-color: rgba(249, 248, 244, 0.92);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.ui-screen-frame--glow .pd-charge-battery::after {
  background: rgba(249, 248, 244, 0.92);
  box-shadow: 4px 0 8px rgba(255, 255, 255, 0.1);
}

.ui-screen-frame--glow .pd-charge-scanline {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0px,
    rgba(255, 255, 255, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
}

.ui-screen-frame--glow .pd-charge-scanline::before {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0px,
    rgba(255, 255, 255, 0.95) 2px,
    transparent 2px,
    transparent 4px
  );
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
}

.ui-screen-frame--glow .pd-charge-percent {
  color: rgba(249, 248, 244, 0.98);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@keyframes pd-scan-sweep {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(130px);
  }
}

@keyframes pd-boot-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ui-screen-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: 217 / 152;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  color: #25231d;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    repeating-linear-gradient(
      0deg,
      rgba(35, 34, 28, 0.08) 0 1px,
      rgba(206, 204, 193, 0.18) 1px 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(35, 34, 28, 0.06) 0 1px,
      rgba(205, 203, 194, 0.14) 1px 2px
    ),
    linear-gradient(180deg, #d4d1c8 0%, #c1beb5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 0 2px rgba(28, 27, 22, 0.18);
  image-rendering: pixelated;
}

.ui-screen-frame--prototype {
  color: #ebeaf0;
  background:
    linear-gradient(180deg, rgba(19, 19, 24, 0.98), rgba(10, 10, 14, 1)),
    #0f0f14;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 2px rgba(255, 255, 255, 0.015),
    0 0 18px rgba(255, 255, 255, 0.04);
}

.ui-screen-frame--prototype::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.32;
}

.ui-screen-frame--glow {
  color: #f5f3ee;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(17, 17, 22, 0.92), rgba(10, 10, 14, 0.98)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 7px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(255, 255, 255, 0.08);
}

.ui-screen-frame--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 20%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.06), transparent 36%);
  opacity: 0.9;
}

.ui-screen-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(26, 25, 20, 0.08) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(30, 29, 24, 0.04) 0 3px,
      transparent 3px 6px
    );
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.ui-screen-frame--glow::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.44) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 8px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 8px
    );
  mix-blend-mode: screen;
  opacity: 0.38;
}

.ui-screen-frame--prototype::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.42) 100%);
  mix-blend-mode: normal;
  opacity: 0.9;
}

.ui-screen-frame--isolated::before,
.ui-screen-frame--isolated::after {
  display: none;
}

.ui-screen-frame--isolated {
  background: #0f0f14;
}

.ui-screen-body {
  position: absolute;
  inset: 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
  z-index: 1;
}

.ui-screen-body--isolated {
  inset: 0;
  padding: 12px;
  display: block;
}

.ui-import-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f0f14;
  pointer-events: none;
}

.prototype-crop-body {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 10px;
}

.prototype-crop-body--status {
  padding-top: 38px;
}

.powerviz-menubar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(241, 240, 246, 0.84);
  text-transform: uppercase;
  z-index: 2;
}

.powerviz-menubar__left,
.powerviz-menubar__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.powerviz-menubar__time,
.powerviz-menubar__battery-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.powerviz-menubar__battery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.powerviz-menubar__battery-icon {
  position: relative;
  width: 24px;
  height: 12px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
}

.powerviz-menubar__battery-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -4px;
  width: 2px;
  height: 5px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

.powerviz-menubar__battery-fill {
  position: absolute;
  inset: 1.5px;
  width: 78%;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.09);
}

.powerviz-menubar__glyph {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(241, 240, 246, 0.8);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.06));
}

.powerviz-menubar__glyph svg {
  width: 100%;
  height: 100%;
}

.powerviz-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #ebeaf0;
}

.powerviz-battery {
  display: flex;
  align-items: center;
  
}

.powerviz-battery-body {
  width: 384px;
  height: 192px;
  border: 6px solid currentColor;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  gap: 12px;
  position: relative;
}

.powerviz-terminal {
  width: 24px;
  height: 72px;
  background: currentColor;
  border-radius: 0 6px 6px 0;
}

.powerviz-cell {
  flex: 1;
  height: 100%;
  background: transparent;
}

.powerviz-cell.is-filled {
  background: currentColor;
  opacity: 1;
}

.powerviz-cell.is-pulse {
  background: currentColor;
  animation: c2-segment-pulse 2s ease-in-out infinite;
}

.powerviz-lightning {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
  color: #0f0f14;
  pointer-events: none;
}

.powerviz-lightning svg {
  width: 128px;
  height: 128px;
}

.powerviz-copy {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.powerviz-copy__percent {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1;
  color: #f4f3f8;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

.powerviz-copy__label {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  color: rgba(244, 243, 248, 0.5);
}

.is-booting-v1 {
  animation: c2-screen-wake 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.is-booting-v1 .powerviz-cell.is-filled {
  animation: c2-cell-fill-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.is-counting-up {
  display: inline-block;
  position: relative;
  color: transparent !important;
}

.is-counting-up::after {
  content: "78%";
  position: absolute;
  left: 0;
  top: 0;
  color: #f4f3f8;
  animation: c2-count-up 1.2s steps(8, end) forwards;
}

@keyframes c2-cell-fill-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes c2-count-up {
  0% { content: "0%"; }
  12% { content: "12%"; }
  25% { content: "24%"; }
  37% { content: "35%"; }
  50% { content: "48%"; }
  62% { content: "56%"; }
  75% { content: "67%"; }
  87% { content: "74%"; }
  100% { content: "78%"; }
}

.is-booting {
  animation: c2-screen-wake 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.is-booting .powerviz-battery {
  opacity: 0.3;
}

.is-fast-pulse {
  animation: c2-fast-pulse 0.4s ease-in-out infinite alternate;
}

.is-surge .powerviz-battery {
  animation: c2-surge-breathe 2s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

.powerviz-surge-fill {
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 0%;
  background: currentColor;
  border-radius: 1px;
  animation: c2-surge-fill 2s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

.is-surge-pulse {
  animation: c2-surge-icon-pulse 2s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

@keyframes c2-surge-fill {
  0% {
    width: 0%;
    opacity: 0.8;
  }
  40% {
    width: 100%;
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@keyframes c2-surge-icon-pulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes c2-screen-wake {
  0% {
    opacity: 0;
    filter: brightness(0.2) contrast(1.2);
  }
  10% {
    opacity: 1;
    filter: brightness(1.5) contrast(1.1);
  }
  20% {
    filter: brightness(0.8) contrast(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1) contrast(1);
  }
}

@keyframes c2-fast-pulse {
  0% {
    opacity: 0.2;
    filter: brightness(0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  }
}

@keyframes c2-surge-breathe {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.4);
  }
}

@keyframes c2-energy-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 16px 0;
  }
}

.powerviz-battery.is-vertical {
  flex-direction: column;
}

.powerviz-battery.is-vertical .powerviz-battery-body {
  width: 192px;
  height: 280px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
}

.powerviz-battery.is-vertical .powerviz-terminal {
  width: 72px;
  height: 24px;
  border-radius: 6px 6px 0 0;
}

.powerviz-liquid-fill {
  width: 100%;
  height: 78%;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.powerviz-liquid-fill::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -50%;
  width: 200%;
  height: 20px;
  background: rgba(15, 15, 20, 0.2);
  border-radius: 50%;
  animation: c2-liquid-wave 3s infinite linear;
}

@keyframes c2-liquid-wave {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(-25%) rotate(5deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

.powerviz-ring-container {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.powerviz-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.powerviz-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.powerviz-ring-progress {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 678.584;
  transition: stroke-dashoffset 0.5s ease;
}

.powerviz-ring-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.powerviz-dots-container {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.powerviz-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 6px solid currentColor;
  background: transparent;
}

.powerviz-dot.is-filled {
  background: currentColor;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.powerviz-dot.is-pulse {
  background: currentColor;
  animation: c2-dot-pulse 2s ease-in-out infinite;
}

@keyframes c2-dot-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  }
}


.is-critical .powerviz-battery-body {
  border-color: #ff3b30;
  box-shadow: 0 0 24px rgba(255, 59, 48, 0.4);
}

.is-critical .powerviz-terminal {
  background: #ff3b30;
  box-shadow: 4px 0 12px rgba(255, 59, 48, 0.4);
}

.powerviz-cell.is-critical-pulse {
  background: #ff3b30;
  animation: c2-critical-pulse 1s steps(2, start) infinite;
}

.powerviz-copy.is-critical-text {
  color: #ff3b30;
  text-shadow: 0 0 16px rgba(255, 59, 48, 0.6);
  animation: c2-critical-pulse 1s steps(2, start) infinite;
}

.powerviz-copy.is-critical-text .powerviz-copy__percent,
.powerviz-copy.is-critical-text .powerviz-copy__label {
  color: inherit;
  text-shadow: inherit;
}

.is-critical-bw .powerviz-battery-body {
  border-color: rgba(249, 248, 244, 0.92);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
}

.is-critical-bw .powerviz-terminal {
  background: rgba(249, 248, 244, 0.92);
  box-shadow: 4px 0 12px rgba(255, 255, 255, 0.2);
}

.powerviz-cell.is-critical-pulse-bw {
  background: rgba(249, 248, 244, 0.92);
  animation: c2-critical-pulse 1s steps(2, start) infinite;
}

.powerviz-copy.is-critical-text-bw {
  color: rgba(249, 248, 244, 0.92);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
  animation: c2-critical-pulse 1s steps(2, start) infinite;
}

.powerviz-copy.is-critical-text-bw .powerviz-copy__percent,
.powerviz-copy.is-critical-text-bw .powerviz-copy__label {
  color: inherit;
  text-shadow: inherit;
}

.ui-screen-frame--critical-red {
  background: #ff3b30;
  color: #0f0f14;
  animation: c2-critical-flash-red 1s steps(2, start) infinite;
}

.ui-screen-frame--critical-red .powerviz-copy__percent,
.ui-screen-frame--critical-red .powerviz-copy__label {
  color: #0f0f14;
  text-shadow: none;
}

.powerviz-battery.is-critical-pulse-scale {
  animation: c2-critical-pulse-scale 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes c2-critical-pulse-scale {
  0%, 100% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(1.45);
  }
}

.powerviz-battery.is-critical-huge {
  transform: scale(1.4);
}

.powerviz-battery.is-critical-huge .powerviz-battery-body {
  border-color: #ff3b30;
  box-shadow: 0 0 32px rgba(255, 59, 48, 0.5);
}

.powerviz-battery.is-critical-huge .powerviz-terminal {
  background: #ff3b30;
  box-shadow: 4px 0 16px rgba(255, 59, 48, 0.5);
}

.powerviz-battery.is-critical-drain .powerviz-battery-body {
  border-color: rgba(249, 248, 244, 0.92);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
  animation: c2-drain-border 3s infinite;
}

.powerviz-battery.is-critical-drain .powerviz-terminal {
  background: rgba(249, 248, 244, 0.92);
  box-shadow: 4px 0 12px rgba(255, 255, 255, 0.2);
  animation: c2-drain-terminal 3s infinite;
}

.powerviz-battery.is-critical-drain .powerviz-cell.is-filled {
  background: rgba(249, 248, 244, 0.92);
  animation: c2-drain-cell 3s infinite;
}

.powerviz-battery.is-critical-drain .powerviz-cell:nth-child(1) { animation-delay: 0.8s; }
.powerviz-battery.is-critical-drain .powerviz-cell:nth-child(2) { animation-delay: 0.6s; }
.powerviz-battery.is-critical-drain .powerviz-cell:nth-child(3) { animation-delay: 0.4s; }
.powerviz-battery.is-critical-drain .powerviz-cell:nth-child(4) { animation-delay: 0.2s; }
.powerviz-battery.is-critical-drain .powerviz-cell:nth-child(5) { animation-delay: 0s; }

@keyframes c2-drain-cell {
  0%, 10% { opacity: 1; }
  15%, 100% { opacity: 0; }
}

@keyframes c2-drain-border {
  0%, 85% {
    border-color: rgba(249, 248, 244, 0.92);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
  }
  90%, 95% {
    border-color: #ff3b30;
    box-shadow: 0 0 48px rgba(255, 59, 48, 0.8);
  }
  100% {
    border-color: rgba(249, 248, 244, 0.92);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
  }
}

@keyframes c2-drain-terminal {
  0%, 85% {
    background: rgba(249, 248, 244, 0.92);
    box-shadow: 4px 0 12px rgba(255, 255, 255, 0.2);
  }
  90%, 95% {
    background: #ff3b30;
    box-shadow: 4px 0 24px rgba(255, 59, 48, 0.8);
  }
  100% {
    background: rgba(249, 248, 244, 0.92);
    box-shadow: 4px 0 12px rgba(255, 255, 255, 0.2);
  }
}

.ui-screen-frame--critical-flash {
  animation: c2-critical-flash-bw 0.8s steps(2, start) infinite;
}

@keyframes c2-critical-pulse {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes c2-critical-flash-red {
  0% { background: #ff3b30; }
  100% { background: #8b0000; }
}

@keyframes c2-critical-flash-bw {
  0% {
    background: #0f0f14;
    color: rgba(249, 248, 244, 0.92);
  }
  100% {
    background: rgba(249, 248, 244, 0.92);
    color: #0f0f14;
  }
}

.ui-screen-frame--critical-flash .is-critical-text-bw,
.ui-screen-frame--critical-flash .is-critical-bw .powerviz-battery-body,
.ui-screen-frame--critical-flash .is-critical-bw .powerviz-terminal,
.ui-screen-frame--critical-flash .is-critical-pulse-bw {
  animation: none; /* Disable inner pulse when outer flashes */
  color: currentColor;
  border-color: currentColor;
  background: currentColor;
  text-shadow: none;
  box-shadow: none;
}

.ui-screen-frame--critical-flash .powerviz-cell.is-critical-pulse-bw {
  background: currentColor;
}

.pd-wifi-large {
  width: 140px;
  height: 96px;
  position: relative;
  margin-bottom: 20px;
}

.pd-wifi-large span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 8px solid #2d2b24;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.pd-wifi-large span:nth-child(1) { width: 36px; height: 20px; }
.pd-wifi-large span:nth-child(2) { width: 76px; height: 44px; }
.pd-wifi-large span:nth-child(3) { width: 116px; height: 68px; }

.playdate-connect-large .pd-title {
  font-size: 64px;
}

.playdate-connect-large .pd-sub {
  font-size: 28px;
  margin-top: 8px;
}

.ui-screen-frame--inverted {
  background: #f4f3f8;
  color: #0f0f14;
}

.ui-screen-frame--inverted .pd-wifi-icon-large,
.ui-screen-frame--inverted .pd-bt-icon-large,
.ui-screen-frame--inverted .powerviz-copy__percent,
.ui-screen-frame--inverted .powerviz-copy__label {
  color: #0f0f14;
  text-shadow: none;
}

@keyframes pd-wifi-scan {
  0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes pd-wifi-flash {
  0% { opacity: 1; filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.4)); }
  100% { opacity: 0.2; filter: none; }
}

.pd-connect-huge {
  width: 200px;
  height: 200px;
  color: rgba(249, 248, 244, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pd-connect-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* V1: Breathing */
.pd-connect-huge.is-breathing {
  animation: pd-connect-breathe 2s ease-in-out infinite alternate;
}

@keyframes pd-connect-breathe {
  0% {
    opacity: 0.3;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
  }
}

/* V2: Hard Flashing */
.pd-connect-huge.is-hard-flashing {
  animation: pd-connect-flash 1s steps(2, start) infinite;
}

@keyframes pd-connect-flash {
  0% {
    opacity: 1;
    filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.6));
  }
  100% {
    opacity: 0.2;
    filter: none;
  }
}

/* V3: Heartbeat (BT) / Cascade (WiFi) */
.pd-connect-huge.is-heartbeat {
  animation: pd-connect-heartbeat 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes pd-connect-heartbeat {
  0%, 100% {
    transform: scale(0.9);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  }
  15%, 30% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.5));
  }
  22% {
    transform: scale(1);
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
  }
}

.pd-connect-huge.is-wifi-cascade .pd-wifi-arc-1 { animation: pd-wifi-cascade 1.5s infinite 0.0s; }
.pd-connect-huge.is-wifi-cascade .pd-wifi-arc-2 { animation: pd-wifi-cascade 1.5s infinite 0.2s; }
.pd-connect-huge.is-wifi-cascade .pd-wifi-arc-3 { animation: pd-wifi-cascade 1.5s infinite 0.4s; }
.pd-connect-huge.is-wifi-cascade .pd-wifi-arc-4 { animation: pd-wifi-cascade 1.5s infinite 0.6s; }

@keyframes pd-wifi-cascade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); }
}

/* V4: Invert Flash */
.ui-screen-frame--invert-flash {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(19, 19, 24, 0.98), rgba(10, 10, 14, 1)),
    #0f0f14;
}

.ui-screen-frame--invert-flash .pd-connect-huge {
  color: rgba(249, 248, 244, 0.92);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.18));
}

.ui-screen-frame--invert-flash .pd-connect-huge.is-invert-flash {
  animation: pd-connect-invert-flash 1.25s steps(2, start) infinite;
}

@keyframes pd-connect-invert-flash {
  0% {
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.16))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.06));
  }
  100% {
    opacity: 0.26;
    filter: none;
  }
}

/* V5: Double Ghost (BT) / Radar Scan (WiFi) */
.pd-connect-huge.is-double-ghost {
  position: relative;
}

.pd-connect-huge.is-double-ghost::before,
.pd-connect-huge.is-double-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  animation: pd-bt-ghost 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.pd-connect-huge.is-double-ghost .pd-connect-svg {
  opacity: 0;
}

.pd-connect-huge.is-double-ghost::before {
  transform: translateX(-20px);
  opacity: 0.3;
}

.pd-connect-huge.is-double-ghost::after {
  transform: translateX(20px);
  opacity: 0.3;
  animation-delay: 0.1s;
}

@keyframes pd-bt-ghost {
  0%, 10% {
    transform: translateX(calc(var(--dir, 1) * 20px));
    opacity: 0.3;
    filter: none;
  }
  30%, 80% {
    transform: translateX(0);
    opacity: 1;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.6));
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

.pd-connect-huge.is-double-ghost::before { --dir: -1; }
.pd-connect-huge.is-double-ghost::after { --dir: 1; }

.pd-connect-huge.is-radar-scan {
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255, 255, 255, 0.2) 20%, transparent 20%);
  animation: pd-radar-spin 2s linear infinite;
}

.pd-connect-huge.is-radar-scan .pd-connect-svg {
  animation: pd-radar-counter-spin 2s linear infinite;
}

@keyframes pd-radar-spin {
  100% { transform: rotate(360deg); }
}

@keyframes pd-radar-counter-spin {
  100% { transform: rotate(-360deg); }
}

/* V6: Scan Reveal (BT) / Signal Jump (WiFi) */
.pd-connect-huge.is-scan-reveal {
  position: relative;
  overflow: hidden;
}

.pd-connect-huge.is-scan-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0f0f14;
  animation: pd-scan-reveal 2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

.pd-connect-huge.is-scan-reveal .pd-connect-svg {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.4));
}

@keyframes pd-scan-reveal {
  0%, 20% { transform: translateY(0); }
  60%, 80% { transform: translateY(-100%); }
  100% { transform: translateY(-100%); opacity: 0; }
}

.pd-connect-huge.is-signal-jump {
  animation: pd-signal-jump 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes pd-signal-jump {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  20%, 40% {
    transform: translateY(-20px);
    filter: drop-shadow(0 20px 24px rgba(255, 255, 255, 0.5));
  }
}

.pd-title,
.pd-sub,
.pd-chip,
.pd-mic-badge,
.pd-mini-tag {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pd-title {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 0.92;
  color: #25231d;
}

.pd-sub {
  font-size: 15px;
  line-height: 1;
  color: rgba(37, 35, 29, 0.72);
}

.pd-chip,
.pd-mic-badge,
.pd-mini-tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(37, 35, 29, 0.2);
  background: rgba(242, 239, 230, 0.48);
  color: rgba(37, 35, 29, 0.84);
  font-size: 12px;
}

.ui-screen-frame--glow .pd-title {
  color: rgba(249, 248, 244, 0.98);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.18),
    0 0 22px rgba(255, 255, 255, 0.06);
}

.ui-screen-frame--glow .pd-sub,
.ui-screen-frame--glow .pd-chip,
.ui-screen-frame--glow .pd-mini-tag {
  color: rgba(245, 243, 238, 0.78);
}

.ui-screen-frame--glow .pd-chip,
.ui-screen-frame--glow .pd-mini-tag {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}

.playdate-chat {
  width: 100%;
  gap: 12px;
}

.chat-c2-display {
  width: min(172px, 94%);
  height: 86px;
  position: relative;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    rgba(255, 255, 255, 0.015);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.chat-c2-display::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 7px
    );
  opacity: 0.4;
}

.chat-c2-segments {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
}

.chat-c2-segment {
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.chat-c2-segment--filled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.chat-c2-segment--filled-soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
}

.chat-c2-segment--active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58));
  animation: c2-segment-pulse 2s ease-in-out infinite;
}

.chat-c2-segment--duplex {
  animation: c2-segment-scan 2.4s ease-in-out infinite;
}

.chat-c2-segment--duplex:nth-child(1) { animation-delay: 0s; }
.chat-c2-segment--duplex:nth-child(2) { animation-delay: 0.16s; }
.chat-c2-segment--duplex:nth-child(3) { animation-delay: 0.32s; }
.chat-c2-segment--duplex:nth-child(4) { animation-delay: 0.48s; }

.chat-c2-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.chat-c2-slash {
  width: 16px;
  height: 42px;
  border-radius: 999px;
  transform: rotate(33deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), #ffffff 46%, rgba(255, 255, 255, 0.4));
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.32),
    0 0 34px rgba(255, 255, 255, 0.14);
  animation: c2-slash-breathe 2s ease-in-out infinite;
}

.chat-c2-overlay--duplex {
  grid-template-columns: 18px 70px 18px;
  gap: 10px;
  align-items: center;
}

.chat-c2-node {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.24),
    0 0 30px rgba(255, 255, 255, 0.12);
  animation: c2-node-pulse 2s ease-in-out infinite;
}

.chat-c2-node--right {
  animation-delay: 1s;
}

.chat-c2-stream {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.chat-c2-stream::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), #ffffff 58%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
  animation: c2-stream-run 1.8s linear infinite;
}

.chat-c2-overlay--reply {
  align-items: center;
}

.chat-c2-bubble {
  position: relative;
  width: 88px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.1),
    inset 0 0 12px rgba(255, 255, 255, 0.04);
  animation: c2-bubble-breathe 2.1s ease-in-out infinite;
}

.chat-c2-bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.82);
  border-bottom: 2px solid rgba(255, 255, 255, 0.82);
  transform: rotate(-25deg);
  background: transparent;
}

.chat-c2-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
  animation: c2-dot-blink 1.25s ease-in-out infinite;
}

.chat-c2-bubble span:nth-child(2) { animation-delay: 0.16s; }
.chat-c2-bubble span:nth-child(3) { animation-delay: 0.32s; }

.chat-c2-meter {
  display: grid;
  grid-template-columns: repeat(5, 9px);
  gap: 6px;
  align-items: end;
  height: 20px;
}

.chat-c2-meter span {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), #ffffff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
  animation: c2-meter-wave 1.5s ease-in-out infinite;
}

.chat-c2-meter span:nth-child(1) { height: 8px; animation-delay: 0s; }
.chat-c2-meter span:nth-child(2) { height: 14px; animation-delay: 0.12s; }
.chat-c2-meter span:nth-child(3) { height: 20px; animation-delay: 0.24s; }
.chat-c2-meter span:nth-child(4) { height: 13px; animation-delay: 0.36s; }
.chat-c2-meter span:nth-child(5) { height: 9px; animation-delay: 0.48s; }

.pd-wave {
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  gap: 5px;
  height: 52px;
}

.pd-wave span {
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: #2e2b24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pd-wave-chat span:nth-child(1) { height: 18px; }
.pd-wave-chat span:nth-child(2) { height: 34px; }
.pd-wave-chat span:nth-child(3) { height: 24px; }
.pd-wave-chat span:nth-child(4) { height: 42px; }
.pd-wave-chat span:nth-child(5) { height: 20px; }

.pd-wave-dictation span:nth-child(1) { height: 12px; }
.pd-wave-dictation span:nth-child(2) { height: 28px; }
.pd-wave-dictation span:nth-child(3) { height: 46px; }
.pd-wave-dictation span:nth-child(4) { height: 20px; }
.pd-wave-dictation span:nth-child(5) { height: 36px; }
.pd-wave-dictation span:nth-child(6) { height: 14px; }

.pd-orb-row {
  display: flex;
  gap: 8px;
}

.pd-orb-row span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(37, 35, 29, 0.6);
}

.pd-icon {
  width: 52px;
  height: 52px;
  position: relative;
}

.pd-icon-ring {
  border-radius: 50%;
  border: 6px solid #2f2d26;
  box-shadow:
    inset 0 0 0 6px #cbc7bc,
    inset 0 0 0 12px #2f2d26;
}

.pd-progress {
  display: grid;
  grid-template-columns: repeat(5, 16px);
  gap: 6px;
  align-items: end;
  height: 34px;
}

.pd-progress span {
  background: #2e2b24;
  border-radius: 2px 2px 0 0;
}

.pd-progress span:nth-child(1) { height: 8px; }
.pd-progress span:nth-child(2) { height: 14px; }
.pd-progress span:nth-child(3) { height: 22px; }
.pd-progress span:nth-child(4) { height: 30px; }
.pd-progress span:nth-child(5) { height: 18px; }

.pd-clock,
.pd-sun,
.pd-connect-icon,
.pd-battery-alert {
  position: relative;
}

.pd-clock {
  width: 54px;
  height: 54px;
  border: 5px solid #2e2b24;
  border-radius: 50%;
}

.pd-clock::before,
.pd-clock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #2e2b24;
  transform-origin: 0 0;
}

.pd-clock::before {
  width: 3px;
  height: 16px;
  transform: translate(-50%, -100%) rotate(0deg);
}

.pd-clock::after {
  width: 12px;
  height: 3px;
  transform: translate(0, -50%) rotate(0deg);
}

.pd-list-bars {
  display: grid;
  gap: 6px;
  width: 66px;
}

.pd-list-bars span {
  height: 10px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #2d2b24 0 9px, transparent 9px 13px),
    rgba(37, 35, 29, 0.14);
}

.pd-media-icon {
  position: relative;
  width: 58px;
  height: 58px;
}

.pd-media-pause span {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 14px;
  border-radius: 4px;
  background: #2d2b24;
}

.pd-media-pause span:first-child { left: 10px; }
.pd-media-pause span:last-child { right: 10px; }

.pd-trackline {
  width: 84%;
  height: 10px;
  border-radius: 999px;
  background: rgba(37, 35, 29, 0.14);
  overflow: hidden;
}

.pd-trackline span {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, #2d2b24 0 8px, rgba(45, 43, 36, 0.65) 8px 12px);
}

.pd-sun {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2d2b24;
  box-shadow:
    0 -18px 0 -15px #2d2b24,
    0 18px 0 -15px #2d2b24,
    18px 0 0 -15px #2d2b24,
    -18px 0 0 -15px #2d2b24,
    13px 13px 0 -15px #2d2b24,
    -13px -13px 0 -15px #2d2b24,
    13px -13px 0 -15px #2d2b24,
    -13px 13px 0 -15px #2d2b24;
}

.pd-bars {
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
}

.pd-bars span {
  width: 18px;
  height: 32px;
  border-radius: 4px;
  border: 2px solid rgba(37, 35, 29, 0.45);
  background: transparent;
}

.pd-bars span.is-on {
  background: #2d2b24;
  border-color: #2d2b24;
}

.pd-rings {
  position: relative;
  width: 78px;
  height: 52px;
}

.pd-rings span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 3px solid #2d2b24;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.pd-rings span:nth-child(1) { width: 22px; height: 16px; }
.pd-rings span:nth-child(2) { width: 44px; height: 28px; }
.pd-rings span:nth-child(3) { width: 66px; height: 42px; }

.pd-bluetooth-icon {
  width: 34px;
  height: 56px;
  position: relative;
}

.pd-bluetooth-icon::before,
.pd-bluetooth-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 4px solid #2d2b24;
  border-left: 0;
  border-bottom: 0;
  transform-origin: left center;
}

.pd-bluetooth-icon::before {
  top: 2px;
  transform: translateX(-2px) rotate(45deg);
}

.pd-bluetooth-icon::after {
  bottom: 2px;
  transform: translateX(-2px) rotate(135deg);
}

.pd-bluetooth-icon span,
.pd-bluetooth-icon::marker {
  display: none;
}

.pd-bluetooth-icon {
  box-shadow: inset -2px 0 0 0 #2d2b24;
}

.pd-wifi-icon {
  width: 70px;
  height: 48px;
}

.pd-wifi-icon span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 3px solid #2d2b24;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.pd-wifi-icon span:nth-child(1) { width: 18px; height: 10px; }
.pd-wifi-icon span:nth-child(2) { width: 38px; height: 22px; }
.pd-wifi-icon span:nth-child(3) { width: 58px; height: 34px; }

.pd-battery-triplet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.pd-battery-triplet div {
  padding: 10px 4px 8px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(45, 43, 36, 0.1) 0 4px, transparent 4px 8px),
    rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(37, 35, 29, 0.16);
}

.pd-battery-triplet strong {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 0.9;
  color: #2d2b24;
}

.pd-battery-triplet span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(37, 35, 29, 0.7);
}

.pd-battery-alert {
  width: 64px;
  height: 34px;
  border: 4px solid #2d2b24;
  border-radius: 7px;
}

.pd-battery-alert::before {
  content: "";
  position: absolute;
  right: -9px;
  top: 9px;
  width: 7px;
  height: 12px;
  border-radius: 0 3px 3px 0;
  background: #2d2b24;
}

.pd-battery-alert span {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 12px;
  background: #2d2b24;
}

.pd-error-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2d2b24;
  color: #dad7cc;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}

.pd-boot-grid {
  display: grid;
  grid-template-columns: repeat(4, 16px);
  gap: 7px;
}

.pd-boot-grid span {
  width: 16px;
  height: 16px;
  background: #2d2b24;
}

.pd-boot-grid span:nth-child(2),
.pd-boot-grid span:nth-child(3) {
  opacity: 0.45;
}

.playdate-placeholder .pd-title {
  font-size: 20px;
}

.pd-volume-bar {
  width: 80%;
  height: 12px;
  border-radius: 999px;
  background: rgba(37, 35, 29, 0.14);
  overflow: hidden;
}

.ui-screen-body--bar-change {
  inset: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ui-screen-body--bar-change .figma-bar-change {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690px;
  height: 141px;
}

.ui-screen-body--bar-change .figma-bar-change__track {
  position: relative;
  width: 690px;
  height: 141px;
  overflow: hidden;
  border-radius: 90px;
  background: #d9d9d9;
}

.ui-screen-body--bar-change .figma-bar-change__fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  width: 252px;
  height: 141px;
  padding-left: 45px;
  box-sizing: border-box;
  border-radius: 90px;
  background: #ffffff;
  animation: figma-bar-fill-oscillate 1800ms cubic-bezier(0.22, 1, 0.36, 1) 120ms infinite;
}

.ui-screen-body--bar-change .figma-bar-change--brightness .figma-bar-change__fill {
  padding-left: 48px;
}

.ui-screen-body--bar-change .figma-bar-change__icon {
  display: inline-flex;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}

.ui-screen-body--bar-change .figma-bar-change__icon svg {
  width: 100%;
  height: 100%;
}

@keyframes figma-bar-fill-oscillate {
  0%,
  15% {
    width: 252px;
  }

  50%,
  85% {
    width: 381px;
  }

  100% {
    width: 252px;
  }
}

.pd-volume-fill {
  height: 100%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, #2d2b24 0 6px, rgba(45, 43, 36, 0.65) 6px 9px);
}

.playdate-volume .pd-title {
  font-size: clamp(32px, 4vw, 48px);
}

.pd-track-arrows {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.pd-track-arrow {
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.pd-track-arrow--prev {
  border-right: 18px solid rgba(37, 35, 29, 0.28);
}

.pd-track-arrow--next {
  border-left: 18px solid #2d2b24;
}

.pd-footer-time {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(37, 35, 29, 0.52);
  margin-top: 4px;
}

.ui-screen-frame--glow .pd-footer-time {
  color: rgba(245, 243, 238, 0.44);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
}

.playdate-wake {
  gap: 2px;
}

.pd-wake-time {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 0.88;
  letter-spacing: 0.02em;
  color: #25231d;
}

.pd-wake-period {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: rgba(37, 35, 29, 0.72);
  margin-bottom: 8px;
}

.pd-wake-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  margin-top: auto;
  padding-top: 6px;
}

.pd-wake-battery {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(37, 35, 29, 0.48);
}

.pd-wake-icons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.pd-wake-icon-bt,
.pd-wake-icon-wf {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(37, 35, 29, 0.36);
}

.pd-wake-icon-bt {
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: rgba(37, 35, 29, 0.36);
}

.pd-wake-icon-wf {
  width: 12px;
  height: 9px;
  border-radius: 6px 6px 0 0;
  border: 2px solid rgba(37, 35, 29, 0.36);
  background: transparent;
}

.ui-variant-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ui-variant-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(155, 154, 161, 0.18);
  background: rgba(155, 154, 161, 0.04);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  transition:
    transform 120ms ease,
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

.ui-variant-button:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.28);
}

.ui-variant-button.is-active {
  color: var(--accent-strong);
  background: rgba(155, 154, 161, 0.12);
  border-color: rgba(198, 197, 203, 0.34);
}

.device {
  position: relative;
  width: min(500px, 94%);
  aspect-ratio: 361 / 378;
  transform: translateY(2px);
}

.device-body {
  position: absolute;
  left: calc(100% * 60 / 361);
  top: calc(100% * 89 / 378);
  width: calc(100% * 240 / 361);
  height: calc(100% * 241 / 378);
  z-index: 2;
  border-radius: 19.583333% / 19.502075%;
  background: #bcbcbe;
  box-shadow: 0 20px 36px rgba(23, 35, 49, 0.08);
}

.device-body::before {
  display: none;
}

.device-body::after {
  display: none;
}

.hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  z-index: 4;
}

.hotspot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px dashed rgba(145, 230, 212, 0.55);
  background: rgba(145, 230, 212, 0.08);
  opacity: 0;
  transition: opacity 160ms ease;
}

.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot.is-active::after {
  opacity: 1;
}

.hotspot-knob {
  left: calc(100% * 233 / 361);
  top: calc(100% * 89 / 378);
  width: calc(100% * 67 / 361);
  height: calc(100% * 67 / 378);
  border-radius: 50%;
  z-index: 0;
  background: center / cover no-repeat url("./assets/knob.svg");
}

.knob-rotate-hitbox {
  position: absolute;
  left: calc(100% * 293 / 361);
  top: calc(100% * 55 / 378);
  width: calc(100% * 34 / 361);
  height: calc(100% * 34 / 378);
  z-index: 8;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  transition:
    transform 160ms ease,
    opacity 140ms ease;
}

.knob-rotate-hitbox::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(238, 238, 242, 0.14);
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.34), rgba(220, 220, 226, 0.12) 46%, rgba(180, 180, 190, 0.02) 72%, transparent 100%);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.16),
    0 0 0 0 rgba(240, 240, 244, 0.02);
  opacity: 0.72;
  animation: rotate-zone-breathe 2.2s ease-in-out infinite;
  transition:
    opacity 140ms ease,
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.knob-rotate-hitbox:hover,
.knob-rotate-hitbox:focus-visible,
.knob-rotate-hitbox.is-armed {
  opacity: 1;
}

.knob-rotate-hitbox.is-dragging {
  cursor: grabbing;
  transform: scale(1.05);
}

.knob-rotate-hitbox:hover::before,
.knob-rotate-hitbox:focus-visible::before,
.knob-rotate-hitbox.is-armed::before {
  opacity: 0.92;
  border-color: rgba(238, 238, 242, 0.22);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 0 5px rgba(240, 240, 244, 0.08);
}

.knob-rotate-hitbox.is-dragging::before {
  opacity: 1;
  transform: scale(1.08);
  border-color: rgba(242, 242, 246, 0.3);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    0 0 0 6px rgba(244, 244, 248, 0.1);
}

.knob-rotate-hitbox:focus-visible {
  outline: none;
}

.knob-rotation-fx {
  position: absolute;
  left: calc(100% * 223 / 361);
  top: calc(100% * 79 / 378);
  width: calc(100% * 92 / 361);
  height: calc(100% * 96 / 378);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 120ms ease,
    transform 160ms ease;
}

.rotation-arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(218, 217, 224, 0.16);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.26), rgba(210, 210, 216, 0.12) 42%, rgba(150, 150, 158, 0.04) 100%);
  backdrop-filter: blur(2px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  opacity: 0.46;
  transition:
    opacity 120ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.rotation-arrow-up {
  left: 4px;
  top: 6px;
  transform: translate(-2px, -2px);
}

.rotation-arrow-down {
  right: 2px;
  bottom: 6px;
  transform: translate(2px, 2px);
}

.hotspot-left-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / contain no-repeat url("./assets/left-button.svg");
}

.hotspot-left-button {
  left: calc(100% * 58 / 361);
  top: calc(100% * 154 / 378);
  width: calc(100% * 3.5 / 361);
  height: calc(100% * 35 / 378);
  z-index: 0;
  border-radius: 999px;
}

.left-button-hitbox {
  position: absolute;
  left: calc(100% * 30 / 361);
  top: calc(100% * 145 / 378);
  width: calc(100% * 50 / 361);
  height: calc(100% * 58 / 378);
  z-index: 9;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.001);
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
}

.display-window {
  position: absolute;
  left: calc(100% * 72 / 361);
  top: calc(100% * 123 / 378);
  width: calc(100% * 217 / 361);
  height: calc(100% * 152 / 378);
  overflow: hidden;
  z-index: 4;
  background: #0a0a0b;
}

.screen-base-plate {
  position: absolute;
  left: calc(100% * 62 / 361);
  top: calc(100% * 91 / 378);
  width: calc(100% * 237 / 361);
  height: calc(100% * 238 / 378);
  z-index: 3;
  border-radius: calc(100% * 47 / 237) / calc(100% * 47 / 238);
  pointer-events: none;
  background: #0a0a0b;
}

.screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;
  background: #0a0a0b;
  box-shadow: none;
}

.screen:focus-visible {
  outline: 2px solid rgba(186, 245, 255, 0.9);
  outline-offset: 6px;
}

.screen-cover {
  position: absolute;
  left: calc(100% * 61 / 361);
  top: calc(100% * 90 / 378);
  width: calc(100% * 238 / 361);
  height: calc(100% * 239 / 378);
  z-index: 5;
  border-radius: calc(100% * 47 / 238) / calc(100% * 47 / 239);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.7;
  background: #ffffff;
  box-shadow:
    inset 0 -2px 2.8px rgba(0, 0, 0, 0.25),
    inset 0 2px 2px rgba(0, 0, 0, 0.25);
}

.screen-sheen,
.screen-noise,
.screen-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen-sheen {
  background:
    linear-gradient(135deg, rgba(155, 154, 161, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%);
}

.screen-noise {
  opacity: 0.12;
  background-image:
    linear-gradient(to right, rgba(155, 154, 161, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155, 154, 161, 0.1) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.screen-vignette {
  background:
    radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, 0.26) 100%);
}

.screen-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0a0b;
  transition: filter 160ms ease;
}

.screen-base-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.screen-dashboard-base {
  position: absolute;
  inset: 12px 14px;
  display: grid;
  color: rgba(155, 154, 161, 0.78);
  font-family: var(--font-display);
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(155, 154, 161, 0.08);
}

.screen-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  animation: dashboard-scene-fade-in 160ms ease-out;
}

.screen-overlay-layer[data-scene-id="volume-change"] .figma-bar-change__fill,
.screen-overlay-layer[data-scene-id="brightness-change"] .figma-bar-change__fill {
  animation: none !important;
  transition: width 200ms ease-out !important;
}

.dashboard-overlay-stage {
  position: absolute;
  inset: 0;
}

.dashboard-overlay-stage > .ui-preview-stage {
  width: 100%;
  height: 100%;
}

@keyframes dashboard-scene-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.display {
  display: grid;
  gap: 10px;
  height: 100%;
}

.display-meta,
.display-battery-head,
.display-setting-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(155, 154, 161, 0.82);
  letter-spacing: 0.08em;
}

.display-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 1px solid rgba(155, 154, 161, 0.2);
  border-radius: 4px;
  background: rgba(155, 154, 161, 0.05);
}

.display-main {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.display-arrow {
  font-size: 22px;
  opacity: 0.88;
}

.metric-stack {
  display: grid;
  place-items: center;
  gap: 3px;
}

.metric-value {
  font-size: clamp(54px, 7vw, 76px);
  line-height: 0.84;
  letter-spacing: 0.01em;
}

.metric-label {
  font-size: 14px;
  letter-spacing: 0.12em;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  margin-top: auto;
}

.stat-card,
.battery-card,
.setting-row {
  border-radius: 10px;
  background: rgba(155, 154, 161, 0.04);
  border: 1px solid rgba(155, 154, 161, 0.1);
}

.stat-card {
  padding: 8px 6px;
  min-height: 58px;
  display: grid;
  align-content: end;
  gap: 3px;
}

.stat-card strong {
  font-size: 20px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.stat-card span,
.battery-card span,
.setting-row span,
.pairing-foot,
.standby-caption {
  font-size: 10px;
  color: rgba(155, 154, 161, 0.72);
  letter-spacing: 0.06em;
}

.pairing-screen,
.standby-screen {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
  height: 100%;
}

.pairing-rings {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
}

.pairing-rings::before,
.pairing-rings::after,
.pairing-core {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(155, 154, 161, 0.4);
}

.pairing-rings::before {
  inset: 0;
}

.pairing-rings::after {
  inset: 24px;
}

.pairing-core {
  inset: 54px;
  background: radial-gradient(circle, rgba(155, 154, 161, 0.18) 0%, transparent 70%);
  border-color: rgba(155, 154, 161, 0.72);
}

.pairing-title,
.standby-time {
  font-size: 36px;
  letter-spacing: 0.1em;
  font-family: var(--font-display);
}

.pairing-status {
  font-size: 44px;
  line-height: 1;
}

.battery-grid,
.settings-grid {
  display: grid;
  gap: 12px;
}

.battery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.battery-card {
  padding: 10px;
  display: grid;
  gap: 8px;
  text-transform: uppercase;
}

.battery-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(155, 154, 161, 0.1);
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(155, 154, 161, 0.7) 0%, rgba(198, 197, 203, 0.92) 100%);
}

.settings-grid {
  margin-top: 10px;
}

.setting-row {
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-row strong {
  font-size: 12px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.standby-screen {
  position: relative;
}

.standby-screen::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 154, 161, 0.08), transparent 68%);
  filter: blur(10px);
}

.device-shadow {
  position: absolute;
  left: 18%;
  right: 14%;
  bottom: 2%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 28, 40, 0.18), transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

.action-button {
  border: 0;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.38);
}

.status-grid {
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0;
}

.status-tile {
  flex: 1 1 220px;
  min-height: 90px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(155, 154, 161, 0.04);
  border: 1px solid rgba(155, 154, 161, 0.12);
  display: grid;
  gap: 10px;
}

.tile-label,
.group-title span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

.status-tile strong {
  font-size: 36px;
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.control-group + .control-group {
  margin-top: 18px;
}

.group-title {
  margin-bottom: 12px;
}

.group-title h3 {
  margin: 0;
  font-size: 26px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hint-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(155, 154, 161, 0.04);
  border: 1px solid rgba(155, 154, 161, 0.1);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: rgba(198, 197, 203, 0.82);
}

.hint-list p {
  margin: 0;
}

.scenario-trigger-panel {
  margin-top: 8px;
  margin-bottom: 14px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(155, 154, 161, 0.04);
  border: 1px solid rgba(155, 154, 161, 0.1);
}

.scenario-trigger-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.scenario-trigger-panel__head h4 {
  margin: 0;
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.scenario-trigger-panel__head span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

.scenario-trigger-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.control-row {
  flex-wrap: wrap;
  gap: 10px;
}

.action-button {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(155, 154, 161, 0.06);
  border: 1px solid rgba(155, 154, 161, 0.18);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.action-button.secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.action-button.is-active,
.action-button:active {
  transform: scale(0.98);
}

.scenario-trigger-button {
  min-height: 40px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 8px 9px;
}

.scenario-trigger-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(198, 197, 203, 0.18);
  background: rgba(18, 18, 24, 0.96);
  color: rgba(235, 235, 240, 0.96);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 1200;
}

.scenario-trigger-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scenario-trigger-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(198, 197, 203, 0.18);
  border-bottom: 1px solid rgba(198, 197, 203, 0.18);
  background: rgba(18, 18, 24, 0.96);
  transform: translateX(-50%) rotate(45deg);
}

.scenario-trigger-tooltip.is-below::after {
  top: -6px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}

.message-board-card .panel-header {
  margin-bottom: 22px;
  align-items: start;
  gap: 18px;
}

.message-board-identity {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.message-board-card .panel-header h2,
.message-board-card .section-label,
.message-board-card .view-copy,
.message-board-field__label {
  text-transform: none;
}

.message-board-card .section-label,
.message-board-card .view-copy {
  letter-spacing: 0.08em;
}

.message-board-identity__copy {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.message-board-switch {
  border: 1px solid rgba(198, 197, 203, 0.18);
  background: rgba(155, 154, 161, 0.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.message-board-switch:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.3);
  background: rgba(155, 154, 161, 0.1);
  color: var(--accent-strong);
}

.message-board-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
}

.message-board-layout > * {
  min-width: 0;
  width: 100%;
  align-self: start;
}

.message-board-form,
.message-board-feed {
  border-radius: 14px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.03);
}

.message-board-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  align-content: start;
}

.message-board-field {
  display: grid;
  gap: 8px;
}

.message-board-attachments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.message-board-attachments__hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.message-board-field__label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

.message-board-input,
.message-board-textarea,
.message-board-submit {
  font-family: var(--font-ui);
  font-size: 13px;
  border-radius: 12px;
}

.message-board-input,
.message-board-textarea {
  width: 100%;
  border: 1px solid rgba(155, 154, 161, 0.18);
  background: rgba(155, 154, 161, 0.04);
  color: var(--accent-strong);
  padding: 12px 14px;
  outline: none;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.message-board-input:focus,
.message-board-textarea:focus {
  border-color: rgba(198, 197, 203, 0.34);
  background: rgba(155, 154, 161, 0.08);
  box-shadow: 0 0 0 3px rgba(198, 197, 203, 0.08);
}

.message-board-textarea {
  min-height: 144px;
  resize: vertical;
  line-height: 1.65;
}

.message-board-form__error,
.message-board-feed__status {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.message-board-form__error {
  color: #f2d7d7;
}

.message-board-feed__status {
  color: rgba(198, 197, 203, 0.84);
}

.message-board-form__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.message-board-counter {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-family: var(--font-ui);
}

.message-board-submit {
  border: 1px solid rgba(198, 197, 203, 0.28);
  background: rgba(155, 154, 161, 0.12);
  color: var(--accent-strong);
  padding: 11px 16px;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    opacity 140ms ease;
}

.message-board-submit:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.42);
  background: rgba(155, 154, 161, 0.16);
}

.message-board-submit:disabled {
  opacity: 0.52;
  cursor: wait;
  transform: none;
}

.message-board-feed {
  display: grid;
  gap: 12px;
  padding: 16px;
  min-height: 278px;
  align-content: start;
}

.message-board-list {
  display: grid;
  gap: 12px;
}

.message-board-draft-attachments {
  display: grid;
  gap: 12px;
}

.message-board-draft-attachments__empty {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(155, 154, 161, 0.14);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.message-board-draft-images,
.message-board-images {
  display: grid;
  gap: 8px;
}

.message-board-draft-images.is-grid,
.message-board-images.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-board-draft-image-card,
.message-board-image-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.04);
}

.message-board-draft-image-card__img,
.message-board-image-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  max-height: 360px;
  object-fit: cover;
  background: rgba(155, 154, 161, 0.04);
}

.message-board-draft-images.is-grid .message-board-draft-image-card__img,
.message-board-images.is-grid .message-board-image-card__img {
  min-height: 148px;
  max-height: 220px;
  aspect-ratio: 1 / 1;
}

.message-board-images.is-single .message-board-image-card__img {
  aspect-ratio: 16 / 10;
}

.message-board-images.is-compact {
  gap: 6px;
  max-width: 420px;
}

.message-board-images.is-compact .message-board-image-card,
.message-board-draft-images .message-board-draft-image-card {
  border-radius: 14px;
}

.message-board-images.is-compact .message-board-image-card__img {
  min-height: 120px;
  max-height: 200px;
}

.message-board-images.is-compact.is-grid .message-board-image-card__img {
  min-height: 96px;
  max-height: 148px;
}

.message-board-draft-image-card__remove {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(198, 197, 203, 0.18);
  background: rgba(16, 16, 22, 0.82);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message-board-draft-files,
.message-board-files {
  display: grid;
  gap: 8px;
}

.message-board-draft-file-card,
.message-board-file-card {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.03);
  min-width: 0;
}

.message-board-file-card {
  text-decoration: none;
  color: inherit;
}

.message-board-draft-file-card__type,
.message-board-file-card__type {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.06);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
}

.message-board-draft-file-card__meta,
.message-board-file-card__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-board-draft-file-card__name,
.message-board-file-card__name {
  color: var(--accent-strong);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.message-board-draft-file-card__size,
.message-board-file-card__size {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
}

.message-board-file-card__open {
  color: var(--accent-strong);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message-board-files.is-compact .message-board-file-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 9px 11px;
  border-radius: 12px;
}

.message-board-files.is-compact .message-board-file-card__type {
  min-height: 48px;
  font-size: 13px;
  border-radius: 10px;
}

.message-board-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed rgba(155, 154, 161, 0.16);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.message-board-item {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(155, 154, 161, 0.04);
}

.message-board-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.message-board-item__name {
  margin: 0;
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
}

.message-board-item__time {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

.message-board-item__body {
  margin: 0;
  color: rgba(198, 197, 203, 0.9);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-board-item__body:empty {
  display: none;
}

.message-board-item__body.is-withdrawn {
  color: var(--muted);
  font-style: italic;
}

.message-board-item__actions,
.message-board-reply-form__head,
.message-board-reply-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.message-board-action-button {
  border: 1px solid rgba(198, 197, 203, 0.18);
  background: rgba(155, 154, 161, 0.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

.message-board-action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 197, 203, 0.32);
  background: rgba(155, 154, 161, 0.12);
}

.message-board-action-button.is-active {
  border-color: rgba(198, 197, 203, 0.42);
  background: rgba(155, 154, 161, 0.16);
  color: var(--accent-strong);
}

.message-board-action-button.is-secondary {
  color: var(--muted);
}

.message-board-action-button:disabled {
  opacity: 0.45;
  cursor: wait;
  transform: none;
}

.message-board-thread {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(155, 154, 161, 0.1);
  position: relative;
}

.message-board-thread__list {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  position: relative;
}

.message-board-thread__list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, rgba(198, 197, 203, 0.16), rgba(198, 197, 203, 0.04));
}

.message-board-thread__empty {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(155, 154, 161, 0.14);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.message-board-reply-item {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(155, 154, 161, 0.1);
  background: rgba(155, 154, 161, 0.03);
  position: relative;
}

.message-board-reply-item::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 24px;
  width: 10px;
  height: 1px;
  background: rgba(198, 197, 203, 0.16);
}

.message-board-reply-item__name {
  margin: 0;
  font-size: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
}

.message-board-item__meta-copy {
  display: grid;
  gap: 4px;
}

.message-board-reply-item__to,
.message-board-reply-form__target {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.message-board-reply-item__to--owner,
.message-board-reply-form__target--owner {
  color: rgba(198, 197, 203, 0.92);
}

.message-board-reply-item__to--self,
.message-board-reply-form__target--self {
  color: rgba(198, 197, 203, 0.72);
}

.message-board-reply-item__to--other,
.message-board-reply-form__target--other {
  color: rgba(198, 197, 203, 0.84);
}

.message-board-reply-preview {
  margin: 0;
  padding: 8px 10px;
  border-left: 1px solid rgba(198, 197, 203, 0.14);
  border-radius: 8px;
  background: rgba(155, 154, 161, 0.025);
  color: rgba(198, 197, 203, 0.58);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-board-reply-preview.is-inline {
  margin-top: -1px;
}

.message-board-reply-form {
  display: grid;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.02);
  position: relative;
}

.message-board-reply-form::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(198, 197, 203, 0.12);
}

.message-board-reply-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid rgba(155, 154, 161, 0.18);
  border-radius: 12px;
  background: rgba(155, 154, 161, 0.04);
  color: var(--accent-strong);
  padding: 12px 14px;
  outline: none;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.65;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.message-board-reply-textarea:focus {
  border-color: rgba(198, 197, 203, 0.34);
  background: rgba(155, 154, 161, 0.08);
  box-shadow: 0 0 0 3px rgba(198, 197, 203, 0.08);
}

.message-board-form__error {
  display: none;
}

.message-board-form__error.is-visible {
  display: block;
}

.rules-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(155, 154, 161, 0.12);
  background: rgba(155, 154, 161, 0.03);
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.rules-table th,
.rules-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(155, 154, 161, 0.08);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(198, 197, 203, 0.86);
}

.rules-table th {
  color: var(--accent-strong);
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(155, 154, 161, 0.05);
}

.rules-table tr:last-child td {
  border-bottom: 0;
}

.empty-state {
  min-height: 280px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(155, 154, 161, 0.16);
  background: rgba(155, 154, 161, 0.03);
  text-align: center;
  padding: 24px;
}

.empty-state p {
  margin: 0;
  max-width: 360px;
  color: rgba(198, 197, 203, 0.72);
  line-height: 1.7;
}

.flash-screen {
  animation: flash-screen 320ms ease;
}

.hotspot-knob,
.hotspot-left-button,
.knob-rotate-hitbox,
.left-button-hitbox,
.screen {
  transition:
    transform 160ms cubic-bezier(0.2, 0.9, 0.28, 1),
    filter 160ms ease,
    box-shadow 160ms ease;
}

.hotspot-knob {
  --knob-angle: 0deg;
  --knob-press-scale: 1;
  --knob-shift-x: 0px;
  --knob-shift-y: 0px;
  transform:
    translate(var(--knob-shift-x), var(--knob-shift-y))
    scale(var(--knob-press-scale))
    rotate(var(--knob-angle));
  transform-origin: center center;
}

.hotspot-knob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 16%;
  height: 24%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(132, 132, 136, 0.96));
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: translateX(-50%);
  opacity: 0.78;
}

.hotspot-knob.is-pressed {
  --knob-press-scale: 0.94;
  --knob-shift-x: 1px;
  --knob-shift-y: 1px;
  filter: brightness(0.95);
}

.hotspot-knob.is-holding {
  filter: brightness(0.88) drop-shadow(0 0 10px rgba(198, 197, 203, 0.14));
}

.hotspot-knob.is-rotating-left,
.hotspot-knob.is-rotating-right {
  filter: brightness(1.05) drop-shadow(0 0 8px rgba(198, 197, 203, 0.12));
}

.hotspot-knob.is-rotating-left::after,
.hotspot-knob.is-rotating-right::after {
  opacity: 1;
  border-style: solid;
  border-color: rgba(145, 230, 212, 0.82);
  background: rgba(145, 230, 212, 0.08);
  box-shadow:
    0 0 0 1px rgba(145, 230, 212, 0.18),
    0 0 18px rgba(145, 230, 212, 0.18);
}

.hotspot-knob.is-rotating-left ~ .knob-rotation-fx,
.hotspot-knob.is-rotating-right ~ .knob-rotation-fx {
  opacity: 1;
}

.hotspot-knob.is-rotating-left ~ .knob-rotation-fx {
  transform: translate(-4px, -4px);
}

.hotspot-knob.is-rotating-right ~ .knob-rotation-fx {
  transform: translate(4px, 4px);
}

.hotspot-knob.is-rotating-left ~ .knob-rotation-fx .rotation-arrow-up {
  opacity: 0.94;
  border-color: rgba(218, 217, 224, 0.3);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 0 0 6px rgba(198, 197, 203, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.24);
}

.hotspot-knob.is-rotating-right ~ .knob-rotation-fx .rotation-arrow-down {
  opacity: 0.94;
  border-color: rgba(218, 217, 224, 0.3);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 0 0 6px rgba(198, 197, 203, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.24);
}

.hotspot-left-button {
  --left-hold-depth: 0;
  --left-press-x: calc(var(--left-hold-depth) * 1.6px);
  --left-scale-x: calc(1 - (var(--left-hold-depth) * 0.34));
  transform: translateX(var(--left-press-x)) scaleX(var(--left-scale-x));
  transform-origin: center center;
  transition:
    transform 110ms cubic-bezier(0.2, 0.9, 0.28, 1),
    filter 140ms ease;
}

.hotspot-left-button.is-pressed {
  --left-hold-depth: 0.7;
  filter: brightness(0.88) drop-shadow(-2px 0 4px rgba(198, 197, 203, 0.15));
}

.hotspot-left-button.is-holding {
  --left-hold-depth: 1;
  filter: brightness(0.82) drop-shadow(-2px 0 6px rgba(198, 197, 203, 0.18));
}

.left-button-hitbox:focus-visible {
  outline: 1px dashed rgba(198, 197, 203, 0.55);
  outline-offset: 2px;
}

.screen.is-pressed {
  filter: brightness(1.04);
}

.screen.is-holding {
  filter: brightness(1.08);
}

@keyframes flash-screen {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.18);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes rotate-zone-breathe {
  0% {
    opacity: 0.5;
    transform: scale(0.94);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.14),
      0 0 0 0 rgba(244, 244, 248, 0.02);
  }
  50% {
    opacity: 0.86;
    transform: scale(1);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.16),
      0 0 0 8px rgba(244, 244, 248, 0.08);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.94);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.14),
      0 0 0 0 rgba(244, 244, 248, 0.02);
  }
}

@keyframes c2-segment-pulse {
  0%,
  100% {
    opacity: 0.34;
    filter: brightness(0.82);
  }
  50% {
    opacity: 1;
    filter: brightness(1.1);
  }
}

@keyframes c2-segment-scan {
  0%,
  100% {
    opacity: 0.16;
    filter: brightness(0.85);
  }
  50% {
    opacity: 0.92;
    filter: brightness(1.08);
  }
}

@keyframes c2-slash-breathe {
  0%,
  100% {
    transform: rotate(33deg) scale(0.94);
    opacity: 0.72;
  }
  50% {
    transform: rotate(33deg) scale(1.06);
    opacity: 1;
  }
}

@keyframes c2-node-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes c2-stream-run {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

@keyframes c2-dot-blink {
  0%,
  80%,
  100% {
    transform: scale(0.78);
    opacity: 0.34;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes c2-bubble-breathe {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

@keyframes c2-meter-wave {
  0%,
  100% {
    transform: translateY(0) scaleY(0.72);
    opacity: 0.42;
  }
  50% {
    transform: translateY(-1px) scaleY(1.06);
    opacity: 1;
  }
}

.ui-preview-body {
  inset: 0;
  padding: 0;
  display: block;
}

.ui-preview-screen {
  position: relative;
  width: 100%;
  height: 100%;
  color: #9b9aa1;
  font-family: var(--font-display);
  overflow: hidden;
}

.ui-preview-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.2));
  background-size: 8px 8px, 8px 8px, 100% 100%;
  opacity: 0.4;
  pointer-events: none;
}

.ui-preview-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 4px
    );
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ui-preview-screen--center,
.ui-preview-screen--processing,
.ui-preview-screen--dock,
.ui-preview-screen--wake {
  display: grid;
  place-items: center;
}

.ui-preview-center-stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.ui-preview-center-stage--clock {
  width: 148px;
  height: 148px;
}

.ui-preview-center-stage--blob {
  width: 112px;
  height: 112px;
}

.ui-preview-center-stage--silk {
  width: 210px;
  height: 96px;
}

.ui-preview-center-stage--media {
  width: 120px;
  height: 120px;
}

.ui-preview-center-stage--dock {
  width: 178px;
  height: 108px;
}

.ui-preview-clock {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
}

.ui-preview-clock__face {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(155, 154, 161, 0.94);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(155, 154, 161, 0.08);
}

.ui-preview-clock__tick,
.ui-preview-clock__hand,
.ui-preview-clock__hub {
  position: absolute;
  left: 50%;
  top: 50%;
}

.ui-preview-clock__tick {
  width: 2px;
  height: 12px;
  background: rgba(155, 154, 161, 0.58);
  border-radius: 999px;
  transform:
    translate(-50%, calc(-50% - 75px))
    rotate(var(--tick-angle));
  transform-origin: center 75px;
}

.ui-preview-clock__tick.is-major {
  height: 18px;
  width: 3px;
  background: rgba(155, 154, 161, 0.82);
}

.ui-preview-clock__hand--hour {
  width: 4px;
  height: 32%;
  background: rgba(155, 154, 161, 0.95);
}

.ui-preview-clock__hand--minute {
  width: 3px;
  height: 44%;
  background: rgba(155, 154, 161, 0.8);
}

.ui-preview-clock__hand--second {
  width: 2px;
  height: 50%;
  background: rgba(155, 154, 161, 0.52);
}

.ui-preview-clock__hand {
  transform-origin: center bottom;
  border-radius: 999px;
}

.ui-preview-clock__hub {
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #9b9aa1;
  box-shadow: 0 0 10px rgba(155, 154, 161, 0.2);
}

.ui-preview-blob {
  width: 100%;
  height: 100%;
  max-width: 112px;
  max-height: 112px;
  display: grid;
  place-items: center;
  background: rgba(155, 154, 161, 0.92);
  box-shadow: 0 0 28px rgba(155, 154, 161, 0.28);
  animation: ui-preview-blob-morph 6s ease-in-out infinite, ui-preview-blob-pulse 3s ease-in-out infinite;
}

.ui-preview-blob__core {
  width: 40px;
  height: 40px;
  border-radius: 42% 58% 48% 52% / 56% 42% 58% 44%;
  background: rgba(9, 10, 15, 0.22);
  filter: blur(4px);
}

.ui-preview-silk {
  width: 100%;
  max-width: 210px;
}

.ui-preview-silk svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ui-preview-silk__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-preview-silk__path--primary {
  stroke: rgba(155, 154, 161, 0.92);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(155, 154, 161, 0.26));
}

.ui-preview-silk__path--secondary {
  stroke: rgba(155, 154, 161, 0.36);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 4px rgba(155, 154, 161, 0.16));
}

.ui-preview-aura {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 120px;
  display: grid;
  place-items: center;
}

.ui-preview-aura__glow {
  position: absolute;
  inset: 0;
  filter: blur(18px);
  opacity: 0.24;
}

.ui-preview-aura__glow::before {
  content: "";
  position: absolute;
  inset: 20px;
  background: rgba(155, 154, 161, 0.95);
}

.ui-preview-aura.is-play .ui-preview-aura__glow::before {
  clip-path: polygon(28% 18%, 76% 50%, 28% 82%);
}

.ui-preview-aura.is-pause .ui-preview-aura__glow::before {
  inset: 18px;
  background:
    linear-gradient(90deg, rgba(155, 154, 161, 0.95) 0 40%, transparent 40% 60%, rgba(155, 154, 161, 0.95) 60% 100%);
  border-radius: 14px;
}

.ui-preview-aura__glow--1 {
  animation: ui-preview-aura-1 2.8s ease-in-out infinite;
}

.ui-preview-aura__glow--2 {
  animation: ui-preview-aura-2 3.4s ease-in-out infinite 0.4s;
}

.ui-preview-aura svg {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  filter: drop-shadow(0 0 8px rgba(155, 154, 161, 0.2));
}

.ui-preview-icon-shape {
  fill: rgba(155, 154, 161, 0.96);
}

.ui-preview-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  min-height: 84px;
}

.ui-preview-dock__item {
  display: grid;
  justify-items: center;
  gap: 0;
}

.ui-preview-dock__glyph,
.ui-preview-dock__case {
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(155, 154, 161, 0.94);
  color: #111216;
}

.ui-preview-dock__glyph {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}

.ui-preview-dock__case {
  width: 44px;
  height: 32px;
  border-radius: 12px;
}

.ui-preview-dock__case-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  height: 2px;
  background: rgba(10, 10, 14, 0.55);
}

.ui-preview-dock__case-led {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.58);
  transform: translateX(-50%);
}

.ui-preview-dock.is-scan .ui-preview-dock__item {
  opacity: 0;
  animation: ui-preview-dock-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ui-preview-dock.is-scan .ui-preview-dock__item:nth-child(2) {
  animation-delay: 0.15s;
}

.ui-preview-dock.is-scan .ui-preview-dock__item:nth-child(3) {
  animation-delay: 0.3s;
}

.ui-preview-dock.is-scan .ui-preview-dock__glyph,
.ui-preview-dock.is-scan .ui-preview-dock__case {
  animation: ui-preview-dock-float 4s ease-in-out infinite;
}

.ui-preview-dock.is-scan .ui-preview-dock__item:nth-child(2) .ui-preview-dock__case {
  animation-delay: 0.45s;
}

.ui-preview-dock.is-scan .ui-preview-dock__item:nth-child(3) .ui-preview-dock__glyph {
  animation-delay: 0.8s;
}

.ui-preview-dock.is-pulse .ui-preview-dock__glyph,
.ui-preview-dock.is-pulse .ui-preview-dock__case {
  animation: ui-preview-dock-pulse 3s ease-in-out infinite;
}

.ui-preview-dock.is-pulse .ui-preview-dock__case {
  animation-name: ui-preview-dock-pulse-case;
}

.ui-design-viewport {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.ui-design-viewport--clock {
  width: 336px;
  height: 336px;
}

.ui-design-viewport--blob {
  width: 360px;
  height: 360px;
}

.ui-design-viewport--silk {
  width: 560px;
  height: 220px;
}

.ui-design-viewport--media {
  width: 360px;
  height: 360px;
}

.ui-design-viewport--dock {
  width: 460px;
  height: 220px;
}

.ui-design-offset,
.ui-design-scale {
  display: grid;
  place-items: center;
  transform-origin: center center;
}

.ui-design-offset--clock {
  transform: translateY(0);
}

.ui-design-offset--blob {
  transform: translateY(52px);
}

.ui-design-offset--silk {
  transform: translateY(28px);
}

.ui-design-offset--media {
  transform: translateY(32px);
}

.ui-design-offset--dock {
  transform: translateY(24px);
}

.ui-design-scale--clock {
  transform: scale(1.03);
}

.ui-design-scale--blob {
  transform: scale(2.8);
}

.ui-design-scale--silk {
  transform: scale(1.9);
}

.ui-design-scale--media {
  transform: scale(2.5);
}

.ui-design-scale--dock {
  transform: scale(2.1);
}

.ui-design-scene {
  position: relative;
  color: #9b9aa1;
  --color-fg: currentColor;
  --color-bg: #0f0f14;
  font-family: var(--font-display);
}

.ui-design-scene svg {
  display: block;
}

.ui-design-scene--clock {
  width: 288px;
  height: 288px;
}

.ui-design-time-analog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  color: currentColor;
}

.ui-design-clock {
  position: relative;
  width: 288px;
  height: 288px;
  border: 4px solid currentColor;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.ui-design-clock__hub {
  position: absolute;
  width: 16px;
  height: 16px;
  background: currentColor;
  border-radius: 999px;
  z-index: 10;
}

.ui-design-clock__hand {
  position: absolute;
  background: currentColor;
  transform-origin: center bottom;
  border-radius: 999px;
}

.ui-design-clock__hand--hour {
  width: 12px;
  height: 80px;
}

.ui-design-clock__hand--minute {
  width: 8px;
  height: 112px;
  opacity: 0.8;
}

.ui-design-clock__hand--second {
  width: 4px;
  height: 128px;
  opacity: 0.5;
}

.ui-design-clock__tick-wrap {
  position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  justify-content: center;
  transform: rotate(var(--tick-angle));
}

.ui-design-clock__tick {
  margin: 0 auto;
  width: 4px;
  height: 12px;
  background: currentColor;
  opacity: 0.5;
}

.ui-design-clock__tick.is-major {
  width: 8px;
  height: 24px;
}

.ui-design-scene--blob {
  width: 112px;
}

.ui-design-listening,
.ui-design-processing,
.ui-design-media,
.ui-design-tws {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ui-design-blob {
  width: 112px;
  height: 112px;
  background: currentColor;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px var(--color-fg);
  animation: ui-design-blob-morph 6s ease-in-out infinite, ui-design-blob-pulse 3s ease-in-out infinite;
}

.ui-design-blob__core {
  width: 48px;
  height: 48px;
  background: var(--color-bg);
  opacity: 0.3;
  border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
  filter: blur(4px);
}

.ui-design-copy {
  color: currentColor;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-family: var(--font-display);
}

.ui-design-copy--blob {
  margin-top: 80px;
  font-size: 14px;
  opacity: 0.5;
  animation: ui-design-blob-pulse 3s ease-in-out infinite;
}

.ui-design-scene--silk {
  width: 280px;
}

.ui-design-processing__chart {
  position: relative;
  width: 280px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-design-silk {
  position: relative;
  width: 280px;
  height: 128px;
}

.ui-design-silk svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 280px;
  height: 100px;
  overflow: visible;
}

.ui-design-silk__path {
  fill: none;
  stroke: var(--color-fg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-design-silk__path--primary {
  stroke-width: 2.5;
  opacity: 0.8;
  filter: drop-shadow(0 0 8px var(--color-fg));
}

.ui-design-silk__path--secondary {
  stroke-width: 1;
  opacity: 0.3;
  filter: drop-shadow(0 0 4px var(--color-fg));
}

.ui-design-copy--processing,
.ui-design-copy--media {
  margin-top: 48px;
  font-size: 14px;
  opacity: 0.5;
}

.ui-design-scene--media {
  width: 128px;
}

.ui-design-media__stage {
  position: relative;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-design-media__glow,
.ui-design-media__core {
  position: absolute;
  inset: 0;
  width: 128px;
  height: 128px;
}

.ui-design-media__glow {
  transform-origin: center;
}

.ui-design-media__glow--1 {
  filter: blur(12px);
}

.ui-design-media__glow--2 {
  filter: blur(24px);
}

.ui-design-media.is-play .ui-design-media__glow--1 {
  animation: ui-design-play-aura 2.5s ease-in-out infinite;
}

.ui-design-media.is-play .ui-design-media__glow--2 {
  animation: ui-design-play-aura-delay 3s ease-in-out infinite 0.5s;
}

.ui-design-media.is-pause .ui-design-media__glow--1 {
  animation: ui-design-pause-aura 3.5s ease-in-out infinite;
}

.ui-design-media.is-pause .ui-design-media__glow--2 {
  animation: ui-design-pause-aura-delay 4s ease-in-out infinite 0.5s;
}

.ui-design-media__glow svg,
.ui-design-media__core {
  filter: drop-shadow(0 0 8px var(--color-fg));
}

.ui-design-media__glow svg,
.ui-design-media__core svg {
  width: 100%;
  height: 100%;
}

.ui-design-media__core {
  z-index: 1;
}

.ui-design-scene--dock {
  width: 200px;
}

.ui-design-tws__row {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  height: 96px;
}

.ui-design-tws__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ui-design-tws__value {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: currentColor;
}

.ui-design-tws__bud,
.ui-design-tws__case {
  background: currentColor;
  color: var(--color-bg);
}

.ui-design-tws__bud {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
}

.ui-design-tws__case {
  position: relative;
  width: 56px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
}

.ui-design-tws__case-line {
  position: absolute;
  top: 33.333%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-bg);
}

.ui-design-tws__case-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
}

.ui-design-tws__case-indicator.is-scan {
  top: 8px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  opacity: 0.6;
}

.ui-design-tws__case-indicator.is-pulse {
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ui-design-copy--dock {
  margin-top: 48px;
  font-size: 12px;
  opacity: 0.3;
}

.ui-design-tws__scan-col {
  opacity: 0;
  animation: ui-design-tws-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--scan-delay, 0ms);
}

.ui-design-tws.is-scan .ui-design-tws__bud,
.ui-design-tws.is-scan .ui-design-tws__case {
  animation: ui-design-tws-scan-float 4s ease-in-out infinite;
}

.ui-design-tws.is-scan .ui-design-tws__item:nth-child(2) .ui-design-tws__case {
  animation-delay: 0.5s;
}

.ui-design-tws.is-scan .ui-design-tws__item:nth-child(3) .ui-design-tws__bud {
  animation-delay: 1s;
}

.ui-design-tws.is-pulse .ui-design-tws__bud {
  animation: ui-design-tws-pulse-charge-bud 3s ease-in-out infinite 0.5s;
}

.ui-design-tws.is-pulse .ui-design-tws__case {
  animation: ui-design-tws-pulse-charge-case 3s ease-in-out infinite;
}

@keyframes ui-design-blob-morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1) rotate(0deg);
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: scale(1.15) rotate(180deg);
  }
}

@keyframes ui-design-blob-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes ui-design-play-aura {
  0%, 100% { transform: scale(0.9); opacity: 0.15; }
  50% { transform: scale(1.4); opacity: 0.4; }
}

@keyframes ui-design-play-aura-delay {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.7); opacity: 0.25; }
}

@keyframes ui-design-pause-aura {
  0%, 100% { transform: scale(0.95); opacity: 0.15; }
  50% { transform: scale(1.25); opacity: 0.35; }
}

@keyframes ui-design-pause-aura-delay {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.5); opacity: 0.2; }
}

@keyframes ui-design-tws-slide-up {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes ui-design-tws-scan-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes ui-design-tws-pulse-charge-case {
  0%, 100% { opacity: 0.3; transform: scale(0.95); filter: drop-shadow(0 0 2px var(--color-fg)); }
  50% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 16px var(--color-fg)); }
}

@keyframes ui-design-tws-pulse-charge-bud {
  0%, 100% { opacity: 0.3; transform: scale(0.95); filter: drop-shadow(0 0 2px var(--color-fg)); }
  50% { opacity: 0.8; transform: scale(1.02); filter: drop-shadow(0 0 8px var(--color-fg)); }
}

.anc-panel {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(155, 154, 161, 0.1);
  background: rgba(155, 154, 161, 0.04);
  display: grid;
  gap: 10px;
}

.anc-panel__topline,
.anc-panel__modes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.anc-panel__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(155, 154, 161, 0.72);
}

.anc-toggle-button,
.anc-mode-button {
  border: 1px solid rgba(155, 154, 161, 0.14);
  background: rgba(155, 154, 161, 0.06);
  color: rgba(214, 212, 219, 0.9);
  border-radius: 999px;
  font: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.anc-toggle-button {
  padding: 6px 10px;
  min-width: 56px;
}

.anc-toggle-button.is-on {
  background: rgba(155, 154, 161, 0.16);
  box-shadow: 0 0 18px rgba(155, 154, 161, 0.08);
}

.anc-mode-button {
  flex: 1;
  padding: 7px 0;
  font-size: 10px;
}

.anc-mode-button.is-active {
  background: rgba(155, 154, 161, 0.18);
  border-color: rgba(155, 154, 161, 0.28);
}

.anc-preview {
  position: relative;
  min-height: 126px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    rgba(8, 9, 13, 0.66);
  background-size: 8px 8px;
}

.anc-preview__label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #9b9aa1;
}

.anc-preview__bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 46px;
}

.anc-preview__bar {
  width: 5px;
  height: 100%;
  border-radius: 999px;
  background: #9b9aa1;
}

.anc-preview--wave.is-on .anc-preview__bar {
  height: 6px;
  opacity: 1;
}

.anc-preview--wave.is-off .anc-preview__bar {
  animation: anc-preview-wave 0.45s infinite alternate;
  opacity: 0.7;
}

.anc-preview__ring,
.anc-preview__shield-core,
.anc-preview__vacuum-core {
  position: absolute;
  border-radius: 50%;
}

.anc-preview__ring {
  border: 1.5px solid #9b9aa1;
}

.anc-preview__ring--outer {
  width: 88px;
  height: 88px;
}

.anc-preview__ring--inner {
  width: 58px;
  height: 58px;
}

.anc-preview__shield-core {
  width: 18px;
  height: 18px;
  background: #9b9aa1;
}

.anc-preview--shield.is-off .anc-preview__ring {
  border-style: dashed;
  opacity: 0.22;
  animation: anc-preview-spin 10s linear infinite;
}

.anc-preview--shield.is-off .anc-preview__ring--inner {
  animation-direction: reverse;
  animation-duration: 7s;
}

.anc-preview--shield.is-off .anc-preview__shield-core {
  transform: scale(0.68);
  opacity: 0.44;
}

.anc-preview__particles {
  position: absolute;
  inset: 0;
}

.anc-preview__particle {
  position: absolute;
  border-radius: 50%;
  background: #9b9aa1;
}

.anc-preview--vacuum.is-off .anc-preview__particle {
  animation: anc-preview-particle 3s infinite alternate ease-in-out;
  opacity: 0.54;
}

.anc-preview--vacuum.is-on .anc-preview__particle {
  opacity: 0;
}

.anc-preview__vacuum-core {
  width: 108px;
  height: 108px;
  background: rgba(9, 10, 15, 0.94);
  border: 1px solid rgba(155, 154, 161, 0.8);
  box-shadow: 0 0 0 1px rgba(155, 154, 161, 0.06);
}

.anc-preview--vacuum.is-off .anc-preview__vacuum-core {
  width: 0;
  height: 0;
  opacity: 0;
}

@keyframes ui-preview-rotate-hour {
  to {
    transform: translateX(-50%) rotate(calc(var(--start-angle) + 360deg));
  }
}

@keyframes ui-preview-rotate-minute {
  to {
    transform: translateX(-50%) rotate(calc(var(--start-angle) + 360deg));
  }
}

@keyframes ui-preview-rotate-second {
  to {
    transform: translateX(-50%) rotate(calc(var(--start-angle) + 360deg));
  }
}

@keyframes ui-preview-blob-morph {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1) rotate(0deg);
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: scale(1.13) rotate(180deg);
  }
}

@keyframes ui-preview-blob-pulse {
  0%,
  100% {
    opacity: 0.86;
  }
  50% {
    opacity: 1;
  }
}

@keyframes ui-preview-silk-primary {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(-3px) scaleX(1.03);
  }
}

@keyframes ui-preview-silk-secondary {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(4px) scaleX(0.98);
  }
}

@keyframes ui-preview-aura-1 {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.14;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.34;
  }
}

@keyframes ui-preview-aura-2 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.08;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.22;
  }
}

@keyframes ui-preview-dock-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-preview-dock-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes ui-preview-dock-pulse {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.95);
    box-shadow: 0 0 2px rgba(155, 154, 161, 0.18);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.03);
    box-shadow: 0 0 12px rgba(155, 154, 161, 0.24);
  }
}

@keyframes ui-preview-dock-pulse-case {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.96);
    box-shadow: 0 0 2px rgba(155, 154, 161, 0.12);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    box-shadow: 0 0 16px rgba(155, 154, 161, 0.28);
  }
}

@keyframes anc-preview-wave {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes anc-preview-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes anc-preview-particle {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(12px, -12px);
  }
}

@media (max-width: 1080px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .message-board-layout {
    grid-template-columns: 1fr;
  }

  .ui-design-grid {
    grid-template-columns: 1fr;
  }

  .device-stage {
    min-height: 620px;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100vw - 20px, 100%);
    padding-top: 18px;
  }

  .topbar,
  .top-tabs,
  .language-switch {
    flex-wrap: wrap;
  }

  .view-copy {
    text-align: left;
  }

  .stage-card,
  .panel-card,
  .full-view-card {
    padding: 18px;
  }

  .stage-header,
  .panel-header {
    align-items: start;
    gap: 16px;
    flex-direction: column;
  }

  .device-stage {
    min-height: 500px;
  }

  .device {
    width: min(420px, 98%);
  }

  .screen {
    border-radius: 50px;
  }

  .screen-content {
    inset: 18px;
  }

  .metric-value {
    font-size: 68px;
  }

  .stat-grid,
  .battery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-trigger-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .message-board-form__footer,
  .message-board-item__meta,
  .message-board-item__actions,
  .message-board-reply-form__head,
  .message-board-reply-form__footer {
    flex-direction: column;
    align-items: start;
  }

  .message-board-identity {
    justify-items: start;
    width: 100%;
  }

  .message-board-draft-file-card,
  .message-board-file-card {
    grid-template-columns: 1fr;
  }

  .message-board-draft-file-card__type,
  .message-board-file-card__type {
    width: 100%;
    min-height: 52px;
  }
}

@media (max-width: 560px) {
  .access-gate__password-row {
    grid-template-columns: 1fr;
  }

  .scenario-trigger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-board-feed,
  .message-board-form {
    padding: 14px;
  }

  .message-board-draft-images.is-grid,
  .message-board-images.is-grid {
    grid-template-columns: 1fr;
  }
}