:root {
  color-scheme: dark;
  --ink: #eaf5ff;
  --muted: #a8bacd;
  --dim: #71849a;
  --void: #020914;
  --surface: #071323;
  --surface-raised: #0c1b2e;
  --line: #2a435d;
  --cyan: #52e7ff;
  --cyan-soft: #7cdff1;
  --green: #2de2a0;
  --coral: #ff6b88;
  --violet: #c09bff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  min-width: 20rem;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  background-color: var(--void);
  background-image: linear-gradient(rgba(57, 125, 161, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 125, 161, .16) 1px, transparent 1px), radial-gradient(circle at 50% 17%, rgba(27, 99, 151, .18), transparent 42rem);
  background-size: 1.78rem 1.78rem, 1.78rem 1.78rem, auto;
}

button, input, select { font: inherit; }

button, select, input { border-radius: .35rem; }

button { cursor: pointer; }

:where(a, button, input, select):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset: 1rem auto auto 1rem;
  z-index: 10;
  padding: .65rem 1rem;
  color: #00101b;
  background: var(--cyan);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.site-header, main, .site-footer { width: min(88rem, calc(100% - 2rem)); margin-inline: auto; }

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  color: var(--muted);
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand { display: flex; align-items: center; gap: .45rem; color: var(--cyan); font-size: 1rem; }
.brand-mark { font-size: 1.45rem; line-height: .7; }
.header-caption { margin: 0; }
.header-status { display: flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; color: var(--green); }
.status-dot { display: inline-block; inline-size: .58rem; block-size: .58rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .65rem rgba(45, 226, 160, .55); }

.hero { max-width: 78rem; padding: 2.5rem 4.8rem 2rem; }
.eyebrow, .micro-label, .panel-index, .room-topline, .column-heading, .boundary-head, .audit-head, .result-heading, .result-meta, .prompt-head, .outside-scope h2 { font-family: var(--mono); letter-spacing: .095em; text-transform: uppercase; }
.eyebrow { margin: 0 0 .8rem; color: var(--cyan); font-size: .78rem; }
h1, h2, p { margin-top: 0; }
.hero h1 { margin-bottom: .75rem; color: var(--cyan); font: 800 clamp(2.5rem, 5.3vw, 4.35rem)/1 var(--mono); letter-spacing: .065em; text-transform: uppercase; }
.hero h1 span { color: var(--coral); }
.hero-copy { max-width: 42rem; margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }

.control-room {
  overflow: hidden;
  border: 1px solid #34536b;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, rgba(8, 21, 37, .97), rgba(3, 11, 22, .98));
  box-shadow: 0 1.75rem 4rem rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .05);
}

.room-topline { display: flex; align-items: center; gap: 1rem; min-height: 4.2rem; padding: 0 1.4rem; color: var(--cyan); font-size: .8rem; }
.room-topline p { display: flex; align-items: center; gap: .55rem; margin: 0; }
.room-topline p:last-child { margin-left: auto; color: var(--ink); }
.room-topline p:first-child::after { width: clamp(2rem, 21vw, 22rem); height: 1px; margin-left: .25rem; background: #304458; content: ""; }

.browser-bar { display: flex; align-items: center; min-height: 3.75rem; padding: 0 1.4rem; border-block: 1px solid #263c53; background: rgba(0, 7, 17, .44); }
.window-controls { display: flex; gap: .45rem; margin-right: 1.35rem; }
.window-controls i { inline-size: .7rem; block-size: .7rem; border-radius: 50%; background: #4d6075; }
.address { width: min(28rem, 52%); padding: .47rem .85rem; border: 1px solid #3a5069; border-radius: .35rem; color: #c9d8e7; background: #0a1728; font: .92rem/1.2 var(--mono); }
.address span { color: var(--cyan); margin-right: .5rem; }
.session-state { display: flex; align-items: center; gap: .45rem; margin-left: auto; color: var(--green); font: 700 .76rem/1 var(--mono); letter-spacing: .07em; }

.workspace-grid { display: grid; grid-template-columns: minmax(16rem, .95fr) minmax(28rem, 1.52fr) minmax(18rem, .96fr); }
.identity-column, .tools-column, .output-column { min-width: 0; padding: 1.35rem; }
.tools-column, .output-column { border-left: 1px solid #2b4158; }
.identity-column, .output-column { display: flex; flex-direction: column; gap: 1rem; }
.panel-index { margin-bottom: .35rem; color: #ccd9e9; font-size: .86rem; }

.identity-card, .hub-card, .prompt-card, .tool-boundary, .result-card, .approval-card, .audit-card, .outside-scope li { border: 1px solid var(--line); border-radius: .5rem; background: linear-gradient(145deg, rgba(25, 42, 62, .8), rgba(10, 22, 37, .86)); }
.identity-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: 1rem; border-color: var(--coral); }
.avatar { display: grid; place-items: center; inline-size: 3.3rem; block-size: 3.3rem; color: #22050d; border-radius: .35rem; background: linear-gradient(135deg, #ff9eb0, #ff5077); font-size: 1.65rem; }
.micro-label { margin-bottom: .15rem; color: #c5d2e1; font-size: .74rem; }
.identity-card h2, .result-card h2 { margin: 0; font-size: 1.55rem; line-height: 1.15; }
.check-icon { display: grid; place-items: center; inline-size: 2.05rem; block-size: 2.05rem; color: #001d14; border-radius: 50%; background: linear-gradient(135deg, #69f2c0, #18c789); font-weight: 900; font-size: 1.3rem; }

.hub-card { padding: 1rem; border-color: #4eb8d3; }
.hub-card label { display: block; margin: .45rem 0 .35rem; color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.select-wrap { position: relative; }
.select-wrap::after { position: absolute; top: 50%; right: .8rem; color: var(--cyan); pointer-events: none; transform: translateY(-50%); content: "⌄"; }
select { width: 100%; min-height: 2.8rem; appearance: none; padding: .55rem 2rem .55rem .72rem; color: var(--ink); border: 1px solid #3c6077; background: #0a1728; }
.scope-copy { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 0; color: #c7d5e4; font-size: .83rem; }
.scope-copy .status-dot { inline-size: .5rem; block-size: .5rem; background: var(--cyan); box-shadow: 0 0 .55rem rgba(82, 231, 255, .6); }

.prompt-card { margin-top: auto; padding: 1rem; border-color: #48b9de; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #cbd7e7; font-size: .73rem; }
.prompt-head span { color: var(--cyan); font-weight: 700; }
.prompt-card > p { margin-bottom: .55rem; color: var(--muted); font-size: .78rem; }
.prompt-row { display: flex; align-items: center; overflow: hidden; border: 1px solid #304c67; border-radius: .32rem; background: #020b16; }
.prompt-chevron { padding-left: .72rem; color: var(--cyan); font: 1.7rem/.8 var(--mono); }
.prompt-row input { min-width: 0; flex: 1; min-height: 3.1rem; padding: .55rem .65rem; color: var(--ink); border: 0; background: transparent; font: .87rem/1.2 var(--mono); }
.prompt-row button, #approve-button { min-height: 3.1rem; padding: .55rem .8rem; color: #00121b; border: 0; border-radius: 0; background: var(--cyan); font: 800 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prompt-row button:hover, #approve-button:hover { background: #b4f7ff; }

.column-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.registration-status { color: var(--green); font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-align: right; }
.tool-boundary { min-height: 23rem; padding: 1.15rem; border-color: var(--cyan); box-shadow: inset 0 0 1.25rem rgba(61, 213, 255, .06), 0 0 1rem rgba(64, 207, 244, .08); }
.boundary-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; color: var(--cyan); font-size: .86rem; }
.boundary-head p { margin: 0; }.boundary-head span { color: var(--green); }
.tool-list, .availability-list, .outside-scope ul, #audit-list { padding: 0; margin: 0; list-style: none; }
.tool-list { display: grid; gap: .65rem; }
.tool-item { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 5rem; padding: .75rem; border: 1px solid #38536b; border-radius: .4rem; background: linear-gradient(135deg, rgba(31, 48, 68, .9), rgba(11, 23, 39, .9)); }
.tool-item:first-child { border-color: #5bc5df; }
.tool-check { display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; color: #002318; border-radius: .25rem; background: linear-gradient(135deg, #5df2bd, #13be82); font-weight: 900; }
.tool-item strong { display: block; overflow-wrap: anywhere; font: 700 .9rem/1.25 var(--mono); }
.tool-item small, .outside-scope small { display: block; margin-top: .2rem; color: #bbc9d9; font: .72rem/1.2 var(--mono); letter-spacing: .07em; }
.allowed { color: var(--green); font: 700 .76rem/1 var(--mono); }

.outside-scope { margin-top: auto; padding-top: 1.4rem; }
.outside-scope h2 { margin-bottom: .6rem; color: var(--coral); font-size: .84rem; font-weight: 500; }
.outside-scope ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.outside-scope li { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-color: rgba(255, 107, 136, .76); color: #cfdae5; }
.outside-scope li > span { color: var(--coral); font-size: 1.2rem; }.outside-scope small { color: var(--coral); }

.result-card { overflow: hidden; padding-top: 1.25rem; border-color: #38c898; }
.result-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; color: #dae5f3; font-size: .78rem; }
.result-heading p { margin: 0; }.result-card h2 { padding: .5rem 1rem 1.1rem; font-size: clamp(1.15rem, 2vw, 1.75rem); overflow-wrap: anywhere; }
.result-meta { display: flex; justify-content: space-between; gap: .75rem; margin: 0; padding: .8rem 1rem; border-block: 1px solid #30495f; color: #d2ddeb; font-size: .78rem; }
.result-meta dd { margin: 0; color: var(--violet); }
.availability-list { display: grid; gap: .65rem; padding: 1rem; }
.availability-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem .85rem; border: 1px solid #2e475f; border-radius: .35rem; background: #071321; }
.availability-list time { font: 700 1.08rem/1 var(--mono); }.availability-list span { display: flex; align-items: center; gap: .45rem; }.availability-list .status-dot { inline-size: .55rem; block-size: .55rem; }
.result-footer { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .85rem 1rem; border-top: 1px solid #30495f; color: #d8e3ee; font-size: .78rem; }.result-footer span { color: var(--violet); }

.result-json, [data-approval-preview] {
  max-height: 22rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  color: #dce8f5;
  background: rgba(2, 9, 20, .58);
  font: .76rem/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-card { padding: 1rem; border-color: var(--violet); }.approval-card p:not(.micro-label) { margin-bottom: .8rem; color: #d6dfec; font-size: .88rem; }.approval-card .micro-label { color: var(--violet); }
#approve-button { width: 100%; min-height: 2.8rem; border-radius: .3rem; }
.audit-card { margin-top: auto; overflow: hidden; }.audit-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem .9rem; border-bottom: 1px solid #334d65; }.audit-head h2 { margin: 0; font-size: .76rem; font-weight: 500; }.audit-head span { color: var(--green); font: 700 .7rem/1 var(--mono); }
#audit-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .7rem .9rem; color: #cbd9e8; font: .75rem/1 var(--mono); }.audit-card time { color: var(--muted); }.audit-card b { color: var(--green); font-weight: 700; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0 1.7rem; color: var(--dim); font: .7rem/1.4 var(--mono); }.site-footer p { margin: 0; }.site-footer #activity-status { color: #b7c8d8; text-align: right; }

@media (max-width: 68rem) {
  .workspace-grid { grid-template-columns: minmax(15rem, .8fr) minmax(25rem, 1.25fr); }
  .output-column { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, .8fr); align-items: start; border-top: 1px solid #2b4158; border-left: 0; }
  .output-column > .panel-index { grid-column: 1 / -1; }.result-card { grid-row: span 2; }.audit-card { margin-top: 0; }
}

@media (max-width: 48rem) {
  .site-header, main, .site-footer { width: min(100% - 1rem, 42rem); }.site-header { min-height: 3.75rem; }.header-caption { display: none; }.header-status { font-size: .64rem; }
  .hero { padding: 2.4rem .5rem 1.5rem; }.hero h1 { font-size: clamp(2.1rem, 11vw, 3.5rem); }.hero-copy { font-size: .95rem; }
  .room-topline { min-height: 3.3rem; padding: 0 .9rem; font-size: .64rem; }.room-topline p:first-child::after, .room-topline p:last-child { display: none; }
  .browser-bar { padding: 0 .9rem; }.window-controls { margin-right: .75rem; }.address { width: auto; flex: 1; font-size: .72rem; }.session-state { display: none; }
  .workspace-grid { display: block; }.identity-column, .tools-column, .output-column { padding: 1rem; border: 0; }.tools-column, .output-column { border-top: 1px solid #2b4158; }.output-column { display: flex; }.identity-column { gap: .8rem; }.prompt-card { margin-top: 0; }.tool-boundary { min-height: auto; }.outside-scope { margin-top: 0; }.outside-scope ul { grid-template-columns: 1fr; }.output-column > .panel-index { width: 100%; }.audit-card { margin-top: 0; width: 100%; }
  .site-footer { display: block; padding-bottom: 1rem; }.site-footer #activity-status { margin-top: .5rem; text-align: left; }
}

@media (max-width: 27rem) {
  .tool-item { grid-template-columns: 2rem 1fr; }.tool-item strong { font-size: .78rem; }.tool-item .allowed { grid-column: 2; }.prompt-row button { padding-inline: .65rem; }.availability-list li { align-items: flex-start; flex-direction: column; }.identity-card h2 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}