:root {
  color-scheme: dark;
  --ink: #f7f1e2; --dim: #cbbfae; --faint: #9a8c79; --gold: #d8af69; --gold-hi: #f1d59b; --gold-lo: #a67c3c;
  --line: #3b3024; --line-hi: #7d613c; --bg: #050505; --card: #0f0c0a; --card-hi: #16120e;
  --err: #ff8f7f; --ok: #7fd8a3;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar: 64px;
  font-family: var(--sans);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100dvh; background: radial-gradient(120% 60% at 50% -10%, #2b1a0c 0, transparent 55%), var(--bg); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 22px; height: 22px; flex: none; }
.ico.big { width: 44px; height: 44px; color: var(--gold); opacity: .8; margin-bottom: 8px; }
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
b { color: var(--ink); font-weight: 650; }
.lede { color: var(--dim); font-size: 1.05rem; line-height: 1.5; margin: .4rem 0 0; }
.sub { color: var(--faint); margin: .2rem 0 1rem; line-height: 1.45; }
.fine { color: var(--faint); font-size: .8rem; line-height: 1.5; }
.status { color: var(--dim); font-size: .9rem; min-height: 1.2em; margin: .6rem 0 0; }
.muted { color: var(--faint); }
.empty { color: var(--faint); text-align: center; padding: 40px 12px; }
.eyebrow { margin: 0; color: var(--gold); font-size: .72rem; letter-spacing: .2em; font-weight: 700; }
.field, textarea, input:not([type=checkbox]) {
  font: inherit; font-size: 16px; color: var(--ink); background: #0b0907; border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; width: 100%;
}
.field:focus, textarea:focus, input:focus { outline: none; border-color: var(--line-hi); }
.gold-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 16px; font-weight: 700;
  color: #16110a; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 6px 24px #d8af6933, inset 0 1px 0 #fff6;
}
.gold-btn.wide { width: 100%; margin-top: 12px; }
.ghost-btn { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-hi); color: var(--gold); font-weight: 600; }
.text-btn { color: var(--faint); text-decoration: underline; padding: 6px; }
.danger-btn { width: 100%; margin-top: 18px; padding: 14px; border-radius: 16px; border: 1px solid #5c2a2a; color: var(--err); font-weight: 600; }

/* ---------- pairing ---------- */
.pair { min-height: 100dvh; display: grid; place-items: center; padding: 28px 18px calc(28px + var(--safe-b)); }
.pair-card { width: min(100%, 30rem); text-align: left; }
.pair-logo { display: block; width: 112px; height: 112px; margin: 0 auto 20px; border-radius: 26px; box-shadow: 0 0 60px #d8af6933; }
.pair h1 { font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.05; margin: 0; text-align: center; }
.pair .lede { text-align: center; }
.steps { list-style: none; padding: 0; margin: 26px 0 18px; display: grid; gap: 12px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--dim); line-height: 1.45; }
.num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #16110a; background: var(--gold); }
.paste { border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; background: var(--card); }
.paste summary { color: var(--gold); cursor: pointer; font-weight: 600; }
#pair-form { display: grid; gap: 10px; margin-top: 12px; }

/* ---------- app shell ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar) + var(--safe-b)); }
.top { position: sticky; top: 0; z-index: 5; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 8px; background: linear-gradient(var(--bg) 60%, transparent); }
.conn { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--dim); }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.conn[data-state="ready"] .dot { background: #4cd08a; box-shadow: 0 0 10px #4cd08a99; }
.conn[data-state="mac-offline"] .dot, .conn[data-state="offline"] .dot { background: var(--err); }
.conn[data-state="elsewhere"] .dot, .conn[data-state="waiting"] .dot, .conn[data-state="connecting"] .dot { background: var(--gold); }
.elsewhere { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 16px 8px; padding: 12px 14px; border: 1px solid var(--line-hi); border-radius: 16px; background: var(--card-hi); color: var(--dim); }
.elsewhere p { margin: 0; font-size: .9rem; line-height: 1.4; }
.elsewhere button { flex: none; padding: 10px 14px; border-radius: 12px; font-weight: 700; color: #16110a; background: var(--gold); }
.views { flex: 1; width: min(100%, 44rem); margin: 0 auto; padding: 0 16px; }
.view { padding-bottom: 96px; }
.view h2 { font-size: 2rem; margin: 8px 0 0; }

/* ---------- Ace home ---------- */
.hero { text-align: center; padding: 3vh 4px 8px; }
.hero-logo { width: 132px; height: 132px; border-radius: 30px; filter: drop-shadow(0 0 40px #d8af6940); }
.hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); margin: 18px 0 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 8px; }
.chip { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-hi); background: #0d0a08; color: var(--ink); font-weight: 600; font-size: .95rem; }
.chip:first-child { color: var(--gold); border-color: var(--gold-lo); background: #1a130b; }
.chip:active, .gold-btn:active, .orb:active { transform: scale(.97); }
.messages { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.msg.you { align-self: flex-end; background: linear-gradient(180deg, #2c2217, #221a11); border: 1px solid #3d2f1f; border-bottom-right-radius: 6px; }
.msg.ace { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.ace a { color: var(--gold); }
.msg.error { align-self: flex-start; color: var(--err); border: 1px solid #5c2a2a; background: #140a09; }
.msg.note { align-self: center; color: var(--faint); font-size: .85rem; }
.msg.task { align-self: stretch; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-title { margin: 0; font-weight: 650; }
.task-state { margin: 4px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--gold); }
.state-done .task-state { color: var(--ok); }
.state-failed .task-state, .state-unknown .task-state, .state-stopped .task-state { color: var(--err); }
.task-app { color: var(--faint); font-weight: 500; }
.task-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--dim); }
.task-steps .step { display: flex; gap: 8px; align-items: baseline; }
.task-steps .step::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--faint); transform: translateY(1px); }
.task-steps .step.done::before { background: var(--ok); border-color: var(--ok); }
.task-steps .step.active::before { background: var(--gold); border-color: var(--gold); animation: glow 1.2s infinite ease-in-out; }
.task-steps .step.waiting::before { border-color: var(--gold); }
.task-steps .step.failed::before, .task-steps .step.stopped::before { background: var(--err); border-color: var(--err); }
.task-line { margin: 10px 0 0; color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
.task .text-btn { margin-top: 6px; }
@keyframes glow { 50% { opacity: .35; } }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: .95rem; margin: 14px 2px 0; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: glow 1.1s infinite ease-in-out; flex: none; }

/* ---------- composer ---------- */
.composer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + var(--safe-b)); z-index: 6;
  display: flex; align-items: flex-end; gap: 8px; width: min(100%, 44rem); margin: 0 auto; padding: 10px 14px 12px;
  background: linear-gradient(transparent, var(--bg) 28%);
}
.composer textarea { flex: 1; min-width: 0; resize: none; min-height: 52px; max-height: 150px; line-height: 1.4; border-radius: 26px; padding: 14px 18px; background: #0e0b09; overflow-y: hidden; scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--faint); }
.icon-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--dim); border: 1px solid var(--line); background: #0e0b09; }
.orb { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #16110a;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 22px #d8af6955; }
.orb.live { animation: glow 1s infinite ease-in-out; background: radial-gradient(circle at 35% 30%, #ffb199, #d9573f 60%, #8e2d1f); }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--safe-b)); z-index: 7;
  width: min(calc(100% - 20px), 40rem); height: var(--tabbar); display: grid; grid-template-columns: repeat(5, 1fr);
  border-radius: 26px; border: 1px solid var(--line); background: #0c0a08ee; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--faint); font-size: .72rem; font-weight: 600; }
.tabbar button[aria-selected="true"] { color: var(--gold); }
.tabbar button[aria-selected="true"] .ico { filter: drop-shadow(0 0 8px #d8af6980); }
.badge { position: absolute; top: 8px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: #16110a; font-size: .65rem; font-style: normal; font-weight: 800; display: grid; place-items: center; }

/* ---------- Mac ---------- */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-hi); color: var(--gold); font-weight: 600; font-size: .9rem; }
.seg button.on { background: var(--gold); color: #16110a; }
.seg button:disabled { opacity: .35; cursor: default; }
.screen-stage { position: relative; margin-top: 14px; border: 1px solid var(--line-hi); border-radius: 20px; overflow: hidden; background: #000; min-height: 220px; box-shadow: 0 10px 40px #0008; }
#screen-image { display: block; width: 100%; height: auto; touch-action: manipulation; }
.targets { position: absolute; inset: 0; pointer-events: none; }
.targets span { position: absolute; border: 1.5px solid var(--gold); border-radius: 5px; background: #d8af6926; }
.screen-empty { color: var(--faint); text-align: center; padding: 56px 18px; margin: 0; line-height: 1.6; }

/* ---------- More ---------- */
.list { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); }
.row:last-child { border-bottom: none; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #2a241d; position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #f7f1e2; transition: transform .2s; }
.switch:checked { background: var(--gold); }
.switch:checked::after { transform: translateX(20px); }

/* ---------- secure prompt ---------- */
dialog { background: var(--card-hi); color: var(--ink); border: 1px solid var(--line-hi); border-radius: 22px; padding: 22px; width: min(92vw, 26rem); }
dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.secret-prompt { color: var(--dim); line-height: 1.45; }
#secret-dialog label { display: block; color: var(--faint); font-size: .85rem; margin: 10px 0 6px; }
.secret-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (min-width: 900px) { .hero { padding-top: 7vh; } }

/* Match Ace Mobile's paired and pairing surfaces. */
:root {
  --ink: #f4ecdd; --dim: #bdb3a2; --faint: #8a8275;
  --gold: #e4bd63; --gold-hi: #f1d48e; --gold-lo: #9a7430;
  --line: #38332a; --line-hi: #746039; --bg: #000;
  --card: #0c0c10; --card-hi: #131318;
}
body { background: radial-gradient(100% 55% at 50% 14%, #251d0b, transparent 58%), #000; }
.pair { display: flex; justify-content: center; padding: calc(15px + env(safe-area-inset-top, 0px)) 20px calc(28px + var(--safe-b)); }
.pair-card { width: min(100%, 32rem); }
.pair-brand { display: flex; align-items: center; gap: 11px; font: 500 24px var(--serif); }
.pair-brand img { width: 46px; height: 49px; }
.pair-eyebrow { margin-top: 26px; }
.pair h1 { font-size: clamp(2.2rem, 9vw, 2.7rem); line-height: 1.08; margin: 7px 0 0; font-weight: 500; text-align: left; }
.pair .lede { font-size: .9rem; max-width: 26rem; margin-top: 9px; text-align: left; }
.pair-feature { display: flex; gap: 14px; min-height: 132px; align-items: center; margin-top: 15px; padding: 20px; border: 1px solid #8a764d7d; border-radius: 36px; background: radial-gradient(circle at 40% 10%, #ffffff12, #e4bd6316 56%, #101015), #101015; box-shadow: 0 14px 34px #e4bd6317; }
.pair-feature .ico { width: 38px; height: 38px; color: var(--gold-hi); }
.pair-feature strong { color: var(--gold); font-size: 1rem; }
.pair-feature p { margin: 7px 0 0; color: var(--dim); font-size: .78rem; line-height: 1.45; }
.steps { margin: 18px 0; gap: 8px; }
.steps li { gap: 12px; padding: 10px 14px; border-color: #ffffff1a; background: #ffffff0b; font-size: .86rem; }
.paste { border-color: #ffffff22; background: #ffffff0b; }
.app { background: radial-gradient(75% 55% at 50% 26%, #e4bd6312, transparent), #000; }
.top { display: flex; align-items: center; justify-content: space-between; min-height: calc(52px + env(safe-area-inset-top, 0px)); padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 4px; background: linear-gradient(#000 70%, transparent); }
.stealth-action { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff1e; background: #101015; color: var(--gold); }
.hero { min-height: calc(100dvh - 220px - var(--safe-b)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 4px 12px; }
.hero-gem { display: block; width: 250px; height: 265px; margin: -12px auto -28px; animation: gem-breathe 5.6s ease-in-out infinite alternate; }
.hero-gem img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 28px #e4bd6344); }
.hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); margin: 0; font-weight: 400; }
.hero .lede { font: 1.1rem/1.4 var(--serif); max-width: 30rem; margin: 12px auto 0; }
.chips { margin: 22px 0 8px; }
.chip { min-height: 44px; padding: 10px 16px; border-color: #ffffff20; background: #ffffff0a; font-weight: 500; font-size: .92rem; }
.chip:first-child { color: var(--gold-hi); border-color: #e4bd6373; background: #e4bd631a; }
@keyframes gem-breathe { to { transform: scale(1.035); } }
.msg.you { background: #ffffff0d; border-color: #ffffff1e; }
.msg.ace { background: transparent; border: 0; border-radius: 0; font: 1.22rem/1.5 var(--serif); padding-left: 0; }
.composer textarea { background: #101015; }
.tabbar { background: #0c0c10f0; border-color: #ffffff20; }
.stealth-screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #000; color: var(--faint); text-align: center; touch-action: manipulation; }
.stealth-screen img { opacity: .42; }
.stealth-screen p { margin: 0; font-size: .88rem; }
.stealth-screen .eyebrow { letter-spacing: .3em; color: var(--faint); }
.stealth-screen button { position: absolute; bottom: calc(24px + var(--safe-b)); min-height: 44px; padding: 0 18px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .hero-gem { animation: none; } }