@agent-link/server 0.1.539 → 0.1.541

package/web/dist/landing/landing.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "Space Grotesk";
-  src: url("/vendor/SpaceGrotesk-latin.woff2") format("woff2");
+  src: url("../vendor/SpaceGrotesk-latin.woff2") format("woff2");
   font-style: normal;
   font-weight: 300 700;
   font-display: swap;
@@ -278,7 +278,7 @@ h3 {
 
 h1 {
   max-width: 610px;
-  font-size: clamp(3rem, 5.15vw, 4.6rem);
+  font-size: clamp(2.8rem, 4.65vw, 4.2rem);
   font-weight: 500;
   letter-spacing: -0.058em;
   line-height: 0.93;
@@ -450,12 +450,30 @@ h1 em {
 }
 
 .encrypted-label {
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   justify-self: end;
-  color: var(--accent);
+  padding: 0 9px;
+  border: 1px solid rgba(22, 125, 105, 0.24);
+  border-radius: 99px;
+  background: #d9f4e9;
+  color: #075c48;
+  font-weight: 700;
+  box-shadow: 0 0 0 3px rgba(22, 125, 105, 0.06);
+}
+
+.encrypted-label i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #0a8f6d;
+  box-shadow: 0 0 0 3px rgba(10, 143, 109, 0.13);
 }
 
 .workspace-ui {
-  min-height: 430px;
+  min-height: 535px;
   display: grid;
   grid-template-columns: 205px minmax(0, 1fr);
 }
@@ -548,6 +566,7 @@ h1 em {
 
 .session-row {
   position: relative;
+  width: 100%;
   min-height: 52px;
   display: flex;
   align-items: center;
@@ -555,6 +574,19 @@ h1 em {
   padding: 7px;
   border: 1px solid transparent;
   border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.session-row:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.session-row .provider-icon {
+  background: transparent;
 }
 
 .session-row.active {
@@ -603,6 +635,17 @@ h1 em {
   background: white;
 }
 
+.chat-ui.session-changed .chat-body,
+.chat-ui.session-changed .chat-input,
+.chat-ui.session-changed .remote-terminal {
+  animation: demo-session-in 180ms ease-out;
+}
+
+@keyframes demo-session-in {
+  from { opacity: 0.55; transform: translateY(2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chat-head {
   height: 55px;
   display: flex;
@@ -708,28 +751,318 @@ h1 em {
   font-size: 0.48rem;
 }
 
-.chat-input {
-  height: 48px;
+.demo-extra {
+  margin-top: 8px;
+}
+
+.diff-card,
+.question-card {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #f8faf9;
+}
+
+.diff-head {
+  min-height: 25px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 7px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 0.46rem;
+}
+
+.diff-head strong {
+  color: var(--accent);
+}
+
+.diff-head span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diff-card code {
+  display: block;
+  font-family: var(--mono);
+  font-size: 0.44rem;
+  line-height: 1.65;
+}
+
+.diff-card code span {
+  display: block;
+  overflow: hidden;
+  padding: 2px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diff-remove {
+  background: #fff0ed;
+  color: #9d4c3e;
+}
+
+.diff-add {
+  background: #e9f7f0;
+  color: #176c57;
+}
+
+.question-card {
+  padding: 9px;
+  background: #fbfaf6;
+}
+
+.question-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #7b5b21;
+  font-family: var(--mono);
+  font-size: 0.47rem;
+}
+
+.question-label > span {
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #f1e7cd;
+  font-weight: 700;
+}
+
+.question-card p {
+  margin-top: 7px;
+  color: var(--ink-soft);
+  font-size: 0.53rem;
+}
+
+.question-choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.question-choices span {
+  padding: 4px 6px;
+  border: 1px solid #ded5be;
+  border-radius: 5px;
+  background: white;
+  color: #675737;
+  font-size: 0.44rem;
+}
+
+.chat-input {
+  min-height: 82px;
   margin: 0 15px 14px;
-  padding: 0 8px 0 12px;
   border: 1px solid var(--line-dark);
   border-radius: 9px;
+  overflow: hidden;
+  background: white;
   color: #9aa4a0;
   font-size: 0.55rem;
 }
 
-.chat-input button {
+.input-line {
+  min-height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px 5px 12px;
+}
+
+.input-placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.input-toolbar {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px 8px;
+  border-top: 1px solid #edf1ef;
+  background: #fafbfa;
+}
+
+.input-control {
+  height: 23px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 7px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  white-space: nowrap;
+  font-size: 0.46rem;
+}
+
+.input-control:hover {
+  background: var(--surface-soft);
+  color: var(--ink-soft);
+}
+
+.input-control.icon-only {
+  width: 25px;
+  justify-content: center;
+  padding: 0;
+}
+
+.input-control svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.input-control.model-control {
+  margin-left: auto;
+  color: var(--ink-soft);
+}
+
+.terminal-open .control-terminal {
+  background: var(--accent-soft);
+  color: var(--accent-dark);
+}
+
+.chat-input .send-button {
   width: 29px;
   height: 29px;
+  flex: none;
   border: 0;
   border-radius: 7px;
   background: var(--accent-dark);
   color: white;
 }
 
+.terminal-open .chat-input {
+  margin-bottom: 8px;
+}
+
+.remote-terminal {
+  height: 108px;
+  flex: none;
+  margin: 0 15px 14px;
+  overflow: hidden;
+  border: 1px solid #263b35;
+  border-radius: 9px;
+  background: #13211d;
+  color: #dce9e4;
+  box-shadow: 0 7px 18px rgba(13, 31, 26, 0.12);
+}
+
+.remote-terminal[hidden] {
+  display: none;
+}
+
+.terminal-head {
+  height: 31px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0 9px;
+  border-bottom: 1px solid #2c3d38;
+  background: #1b2b26;
+  font-family: var(--mono);
+}
+
+.terminal-head > span {
+  display: flex;
+  gap: 4px;
+}
+
+.terminal-head > span i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #72817c;
+}
+
+.terminal-head > span i:first-child {
+  background: #df8062;
+}
+
+.terminal-head > span i:nth-child(2) {
+  background: #d8b45c;
+}
+
+.terminal-head > span i:last-child {
+  background: #5ba47e;
+}
+
+.terminal-head strong {
+  font-size: 0.47rem;
+  font-weight: 600;
+}
+
+.terminal-head small {
+  justify-self: end;
+  color: #6fc39c;
+  font-size: 0.4rem;
+}
+
+.terminal-head small::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  display: inline-block;
+  margin-right: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: 1px;
+}
+
+.terminal-body {
+  padding: 8px 10px;
+  font-family: var(--mono);
+  font-size: 0.47rem;
+  line-height: 1.65;
+}
+
+.terminal-body code,
+.terminal-body code > span {
+  display: block;
+}
+
+.terminal-command b {
+  color: #63d2a2;
+  font-weight: 600;
+}
+
+.terminal-output {
+  overflow: hidden;
+  color: #9fb0aa;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.terminal-cursor {
+  width: 5px;
+  height: 9px;
+  display: inline-block;
+  background: #73d5ad;
+  vertical-align: -1px;
+  animation: terminal-blink 1.1s steps(1) infinite;
+}
+
+@keyframes terminal-blink {
+  50% { opacity: 0; }
+}
+
 .capabilities {
   padding: 42px 0 46px;
   border-top: 1px solid var(--line);
@@ -1094,6 +1427,11 @@ h1 em {
     display: none;
   }
 
+  .encrypted-label {
+    padding-inline: 7px;
+    font-size: 0.49rem;
+  }
+
   .nav-install {
     min-height: 40px;
     padding: 0 11px;
@@ -1122,7 +1460,7 @@ h1 em {
   }
 
   .workspace-ui {
-    min-height: 410px;
+    min-height: 525px;
     grid-template-columns: 128px minmax(0, 1fr);
   }
 
@@ -1166,6 +1504,29 @@ h1 em {
     font-size: 0.56rem;
   }
 
+  .chat-input,
+  .remote-terminal {
+    margin-inline: 8px;
+  }
+
+  .remote-terminal {
+    height: 102px;
+  }
+
+  .input-control span {
+    display: none;
+  }
+
+  .input-control {
+    width: 25px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .input-control.model-control {
+    margin-left: auto;
+  }
+
   .section-intro {
     grid-template-columns: 1fr;
     gap: 10px;
@@ -1226,3 +1587,793 @@ h1 em {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* ── Arcade theme: toggled by page clicks ── */
+@font-face {
+  font-family: "Arcade Display";
+  src: url("../vendor/PressStart2P-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Arcade Text";
+  src: url("../vendor/VT323-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Arcade Han Display";
+  src: url("../vendor/FusionPixel-12px-zh_hans.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Arcade Han Text";
+  src: url("../vendor/FusionPixel-8px-zh_hans.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+html.arcade-theme {
+  --bg: #263b62;
+  --surface: #fff0bd;
+  --surface-soft: #e8c87f;
+  --ink: #35261f;
+  --ink-soft: #5d4030;
+  --muted: #80634c;
+  --line: #8d5a32;
+  --line-dark: #57351f;
+  --accent: #3f7d3e;
+  --accent-dark: #28522e;
+  --accent-soft: #b6d56b;
+  --warm: #d96b3d;
+  --dark: #241a24;
+  --display: "Arcade Display", monospace;
+  --sans: "Arcade Text", monospace;
+  --mono: "Arcade Text", monospace;
+  --shadow: 8px 8px 0 rgba(27, 20, 29, 0.42);
+  color-scheme: dark;
+}
+
+html[lang^="zh"].arcade-theme {
+  --display: "Arcade Han Display", "Arcade Display", monospace;
+  --sans: "Arcade Han Text", "Arcade Text", monospace;
+  --mono: "Arcade Han Text", "Arcade Text", monospace;
+}
+
+.arcade-theme body {
+  background: #263b62;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 1.08rem;
+  letter-spacing: 0.025em;
+  image-rendering: pixelated;
+}
+
+.arcade-theme body::before {
+  background:
+    linear-gradient(90deg, transparent 0 31px, rgba(255, 240, 189, 0.035) 31px 32px),
+    linear-gradient(transparent 0 31px, rgba(255, 240, 189, 0.035) 31px 32px),
+    linear-gradient(180deg, #263b62 0 58%, #315c43 58% 64%, #244a37 64% 100%);
+  background-size: 32px 32px, 32px 32px, 100% 100%;
+}
+
+.arcade-theme body::after {
+  z-index: -1;
+  background:
+    linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.035) 7px 8px),
+    repeating-linear-gradient(0deg, rgba(20, 17, 25, 0.05) 0 1px, transparent 1px 4px);
+  background-size: 8px 8px, 100% 4px;
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+
+.arcade-theme *,
+.arcade-theme *::before,
+.arcade-theme *::after {
+  border-radius: 0 !important;
+}
+
+.arcade-theme :focus-visible {
+  outline: 3px solid #f4d35e;
+  outline-offset: 3px;
+}
+
+.arcade-theme ::selection {
+  background: #f4d35e;
+  color: #35261f;
+}
+
+.arcade-theme h1,
+.arcade-theme h2,
+.arcade-theme h3,
+.arcade-theme .brand,
+.arcade-theme .section-label,
+.arcade-theme .eyebrow {
+  font-family: var(--display);
+  font-weight: 400;
+}
+
+.arcade-theme h1 {
+  max-width: 610px;
+  color: #fff0bd;
+  font-family: var(--sans);
+  font-size: clamp(2.35rem, 3.25vw, 3.15rem);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  line-height: 0.94;
+  text-shadow: 3px 3px 0 #18233d, 5px 5px 0 rgba(19, 14, 24, 0.34);
+}
+
+.arcade-theme h1 em {
+  color: #f4d35e;
+  text-shadow: 3px 3px 0 #8d4a2e, 5px 5px 0 rgba(19, 14, 24, 0.34);
+}
+
+.arcade-theme .site-header {
+  border-bottom: 4px solid #39251f;
+  background: #60402b;
+  box-shadow: inset 0 -4px 0 #9a6837, 0 5px 0 rgba(25, 17, 26, 0.28);
+}
+
+.arcade-theme .site-header.is-scrolled {
+  border-color: #39251f;
+  background: #60402b;
+  backdrop-filter: none;
+}
+
+.arcade-theme .nav-shell {
+  height: 70px;
+}
+
+.arcade-theme .brand {
+  color: #fff0bd;
+  font-size: 0.66rem;
+  letter-spacing: 0;
+  text-shadow: 2px 2px 0 #30201d;
+}
+
+.arcade-theme .brand-mark {
+  border: 3px solid #f4d35e;
+  background: #283d63;
+  box-shadow: 3px 3px 0 #30201d;
+}
+
+.arcade-theme .text-link,
+.arcade-theme .language-link {
+  min-height: 34px;
+  border: 3px solid #3b271f;
+  padding: 0 10px;
+  background: #e1ad50;
+  color: #39251f;
+  box-shadow: inset -3px -3px 0 #a76d33, inset 3px 3px 0 #ffe18a, 3px 3px 0 #30201d;
+  font-family: var(--display);
+  font-size: 0.48rem;
+}
+
+.arcade-theme .hero {
+  min-height: calc(100vh - 74px);
+  min-height: calc(100svh - 74px);
+  padding-block: 22px 28px;
+}
+
+.arcade-theme .eyebrow,
+.arcade-theme .section-label {
+  color: #f4d35e;
+  font-size: 0.48rem;
+  letter-spacing: 0.05em;
+  line-height: 1.6;
+  text-shadow: 2px 2px 0 #563721;
+}
+
+.arcade-theme .eyebrow span {
+  width: 10px;
+  height: 10px;
+  border: 2px solid #2c4e31;
+  background: #9fd45b;
+  box-shadow: 2px 2px 0 #17291c;
+}
+
+.arcade-theme .hero-lead {
+  margin-top: 16px;
+  color: #f6e5b5;
+  font-size: 1.05rem;
+  line-height: 1.28;
+  text-shadow: 2px 2px 0 rgba(20, 17, 26, 0.45);
+}
+
+.arcade-theme .agent-list {
+  margin-top: 15px;
+}
+
+.arcade-theme .hero-actions {
+  margin-top: 18px;
+}
+
+.arcade-theme .agent-list > span {
+  min-height: 38px;
+  border: 3px solid #3b271f;
+  padding-inline: 10px;
+  background: #f2d58e;
+  color: #3c2a22;
+  box-shadow: inset -3px -3px 0 #c18b4b, inset 3px 3px 0 #fff0bd, 3px 3px 0 #17233a;
+  font-size: 0.92rem;
+}
+
+.arcade-theme .provider-icon {
+  background: transparent;
+}
+
+.arcade-theme .install-command {
+  min-height: 72px;
+  border: 4px solid #3b271f;
+  padding-inline: 15px 8px;
+  background: #fff0bd;
+  color: #36251f;
+  box-shadow: inset -4px -4px 0 #d2a45c, inset 4px 4px 0 #fff8d9, 6px 6px 0 #17233a;
+}
+
+.arcade-theme .install-command code {
+  font-size: 1rem;
+  line-height: 1.3;
+}
+
+.arcade-theme .copy-label {
+  border: 3px solid #1f3928;
+  padding: 8px 10px;
+  background: #559447;
+  color: #fff4c7;
+  box-shadow: inset -3px -3px 0 #315d32, inset 3px 3px 0 #8dcf65;
+  font-family: var(--display);
+  font-size: 0.45rem;
+}
+
+.arcade-theme .compatibility {
+  color: #c8dfa3;
+  font-size: 0.82rem;
+  text-shadow: 2px 2px 0 #17233a;
+}
+
+.arcade-theme .product-window {
+  border: 5px solid #36231d;
+  background: #f7dda0;
+  box-shadow:
+    inset -5px -5px 0 #9b6235,
+    inset 5px 5px 0 #f6cd67,
+    9px 9px 0 rgba(19, 14, 24, 0.48);
+  transform: none;
+}
+
+.arcade-theme .workspace-ui {
+  min-height: 510px;
+  height: 510px;
+}
+
+.arcade-theme .chat-ui {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.arcade-theme .chat-body {
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px 16px 7px;
+}
+
+.arcade-theme .chat-input {
+  flex: none;
+}
+
+.arcade-theme .window-bar {
+  height: 43px;
+  border-bottom: 4px solid #39251f;
+  background: #735038;
+  color: #fff0bd;
+  font-size: 0.8rem;
+  text-shadow: 2px 2px 0 #36231d;
+}
+
+.arcade-theme .window-dots i {
+  width: 9px;
+  height: 9px;
+  border: 2px solid #39251f;
+  box-shadow: 1px 1px 0 #24171a;
+}
+
+.arcade-theme .encrypted-label {
+  min-height: 27px;
+  border: 3px solid #25422c;
+  padding-inline: 8px;
+  background: #8fc657;
+  color: #203a27;
+  box-shadow: inset -2px -2px 0 #56823c, inset 2px 2px 0 #c7ea7f, 2px 2px 0 #39251f;
+  font-size: 0.66rem;
+  text-shadow: none;
+}
+
+.arcade-theme .encrypted-label i {
+  border: 1px solid #234129;
+  background: #e9f79a;
+  box-shadow: none;
+}
+
+.arcade-theme .provider-switcher {
+  min-height: 48px;
+  border-bottom: 4px solid #56351f;
+  background:
+    linear-gradient(90deg, rgba(92, 55, 30, 0.16) 1px, transparent 1px),
+    #d6a65b;
+  background-size: 16px 16px;
+}
+
+.arcade-theme .provider-switcher-label {
+  color: #4a3023;
+  font-size: 0.68rem;
+}
+
+.arcade-theme .provider-switcher > span:not(.provider-switcher-label) {
+  min-height: 32px;
+  border: 3px solid #694326;
+  background: #f4d995;
+  color: #3d2921;
+  box-shadow: inset -2px -2px 0 #bd8243, inset 2px 2px 0 #fff0bd;
+  font-size: 0.75rem;
+}
+
+.arcade-theme .provider-switcher > span.active {
+  border-color: #314c2d;
+  background: #a9ce63;
+  box-shadow: inset -2px -2px 0 #668d43, inset 2px 2px 0 #d9ef91;
+}
+
+.arcade-theme .provider-switcher b {
+  background: #6e482a;
+  color: #fff0bd;
+  font-size: 0.6rem;
+}
+
+.arcade-theme .session-sidebar {
+  border-right: 4px solid #39251f;
+  padding: 14px 9px;
+  background:
+    linear-gradient(90deg, transparent 0 15px, rgba(214, 235, 142, 0.05) 15px 16px),
+    linear-gradient(#315c43, #274b39);
+  background-size: 16px 16px, 100% 100%;
+  color: #f7e8b2;
+}
+
+.arcade-theme .sidebar-title {
+  border-bottom: 3px solid #1c3b2b;
+  color: #f4d35e;
+  font-family: var(--display);
+  font-size: 0.5rem;
+}
+
+.arcade-theme .directory-label {
+  color: #b7d887;
+  font-size: 0.72rem;
+}
+
+.arcade-theme .session-row {
+  min-height: 57px;
+  border: 3px solid transparent;
+  color: #f8eac1;
+}
+
+.arcade-theme .session-row:hover:not(.active) {
+  border-color: #1f3d2b;
+  background: #3f7049;
+}
+
+.arcade-theme .session-row.active {
+  border-color: #432b20;
+  background: #f0cc76;
+  color: #39251f;
+  box-shadow: inset -3px -3px 0 #b5773f, inset 3px 3px 0 #fff0bd, 3px 3px 0 #172b21;
+}
+
+.arcade-theme .session-row strong {
+  font-family: var(--display);
+  font-size: 0.45rem;
+  line-height: 1.45;
+}
+
+.arcade-theme .session-row small {
+  color: inherit;
+  font-size: 0.7rem;
+  opacity: 0.72;
+}
+
+.arcade-theme .session-row > b {
+  width: 8px;
+  height: 8px;
+  border: 2px solid #243d27;
+  background: #92d657;
+}
+
+.arcade-theme .chat-ui {
+  background: #f7dda0;
+}
+
+.arcade-theme .chat-head {
+  height: 60px;
+  border-bottom: 4px solid #6a4428;
+  background: #e7b960;
+  box-shadow: inset 0 -3px 0 #bd7f3f;
+}
+
+.arcade-theme .chat-head strong {
+  font-family: var(--display);
+  font-size: 0.52rem;
+  line-height: 1.5;
+}
+
+.arcade-theme .chat-head small {
+  color: #6e482f;
+  font-size: 0.72rem;
+}
+
+.arcade-theme .chat-actions span {
+  border: 3px solid #6b4528;
+  padding: 4px 6px;
+  background: #f7dfa0;
+  color: #4c3226;
+  box-shadow: inset -2px -2px 0 #c38a47, inset 2px 2px 0 #fff2be;
+  font-size: 0.72rem;
+}
+
+.arcade-theme .chat-body {
+  background:
+    linear-gradient(90deg, rgba(109, 71, 38, 0.08) 1px, transparent 1px),
+    linear-gradient(rgba(109, 71, 38, 0.08) 1px, transparent 1px),
+    #f9e7b3;
+  background-size: 16px 16px;
+}
+
+.arcade-theme .message {
+  border: 3px solid #5d3d28;
+  padding: 8px 9px;
+  background: #fff1c5;
+  font-size: 0.76rem;
+  line-height: 1.2;
+  box-shadow: 4px 4px 0 rgba(86, 53, 31, 0.28);
+  clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
+}
+
+.arcade-theme .user-message {
+  background: #cce58b;
+  border-color: #476638;
+}
+
+.arcade-theme .agent-message {
+  margin-top: 10px;
+  background: #fff1c5;
+}
+
+.arcade-theme .message-author {
+  margin-bottom: 5px;
+}
+
+.arcade-theme .message-author {
+  color: #315d37;
+  font-family: var(--display);
+  font-size: 0.48rem;
+}
+
+.arcade-theme .tool-call {
+  margin-top: 7px;
+  padding: 6px;
+}
+
+.arcade-theme .demo-extra {
+  margin-top: 5px;
+}
+
+.arcade-theme .tool-call,
+.arcade-theme .diff-card,
+.arcade-theme .question-card {
+  border: 3px solid #745032;
+  background: #ead19a;
+  box-shadow: inset -2px -2px 0 #b47a42, inset 2px 2px 0 #fff0bd;
+}
+
+.arcade-theme .tool-call strong,
+.arcade-theme .diff-head,
+.arcade-theme .question-label {
+  font-family: var(--display);
+  font-size: 0.42rem;
+}
+
+.arcade-theme .tool-call small,
+.arcade-theme .diff-card code,
+.arcade-theme .question-card p,
+.arcade-theme .question-choices span {
+  font-size: 0.62rem;
+}
+
+.arcade-theme .diff-remove {
+  background: #d78b73;
+  color: #522b27;
+}
+
+.arcade-theme .diff-add {
+  background: #a9d37c;
+  color: #24452c;
+}
+
+.arcade-theme .question-card {
+  padding: 6px;
+  background: #f5d98e;
+}
+
+.arcade-theme .question-card p {
+  margin-top: 4px;
+}
+
+.arcade-theme .question-choices {
+  margin-top: 5px;
+}
+
+.arcade-theme .question-label > span,
+.arcade-theme .question-choices span {
+  border: 2px solid #6a452a;
+  background: #fff0bd;
+  color: #493025;
+  box-shadow: 2px 2px 0 #9d6636;
+}
+
+.arcade-theme .chat-input {
+  border: 4px solid #563720;
+  background: #fff0bd;
+  box-shadow: inset -3px -3px 0 #bd8247, inset 3px 3px 0 #fff9da, 4px 4px 0 rgba(65, 39, 28, 0.28);
+  color: #77563f;
+  font-size: 0.86rem;
+}
+
+.arcade-theme .input-toolbar {
+  border-top: 3px solid #9b6637;
+  background: #dfb667;
+}
+
+.arcade-theme .input-control {
+  border: 2px solid transparent;
+  color: #5b3e2d;
+  font-size: 0.68rem;
+}
+
+.arcade-theme .input-control:hover,
+.arcade-theme .terminal-open .control-terminal {
+  border-color: #4d662f;
+  background: #aace64;
+  color: #2b482c;
+  box-shadow: inset -2px -2px 0 #6d9145, inset 2px 2px 0 #dff28e;
+}
+
+.arcade-theme .chat-input .send-button {
+  border: 3px solid #264229;
+  background: #579448;
+  box-shadow: inset -3px -3px 0 #315b32, inset 3px 3px 0 #91ce67, 2px 2px 0 #563720;
+}
+
+.arcade-theme .remote-terminal {
+  border: 4px solid #36231d;
+  background: #172a24;
+  color: #d9ecae;
+  box-shadow: inset -3px -3px 0 #0e1d19, inset 3px 3px 0 #365543, 5px 5px 0 rgba(65, 39, 28, 0.3);
+}
+
+.arcade-theme .terminal-head {
+  border-bottom: 3px solid #17231f;
+  background: #4e382b;
+  color: #f6dd94;
+  font-family: var(--display);
+}
+
+.arcade-theme .terminal-head strong {
+  font-size: 0.42rem;
+}
+
+.arcade-theme .terminal-head small,
+.arcade-theme .terminal-body {
+  font-size: 0.7rem;
+}
+
+.arcade-theme .terminal-command b,
+.arcade-theme .terminal-cursor {
+  color: #a8df71;
+  background-color: #a8df71;
+}
+
+.arcade-theme .capabilities {
+  border-top: 6px solid #1b2f25;
+  padding-top: 52px;
+}
+
+.arcade-theme .section-intro h2 {
+  color: #fff0bd;
+  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
+  line-height: 1.35;
+  text-shadow: 3px 3px 0 #18233d;
+}
+
+.arcade-theme .section-intro > div > p {
+  color: #d6e4bb;
+  font-size: 1.08rem;
+  line-height: 1.3;
+}
+
+.arcade-theme .capability-card,
+.arcade-theme .trust-card {
+  border: 5px solid #54351f;
+  background: #fff0bd;
+  box-shadow: inset -4px -4px 0 #c78e49, inset 4px 4px 0 #fff8d8, 7px 7px 0 rgba(24, 20, 28, 0.34);
+}
+
+.arcade-theme .capability-card h3,
+.arcade-theme .trust-card h2 {
+  color: #3b2922;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.arcade-theme .capability-card > p,
+.arcade-theme .capability-card > div > p,
+.arcade-theme .trust-card p:last-child {
+  color: #634634;
+  font-size: 0.94rem;
+  line-height: 1.3;
+}
+
+.arcade-theme .card-icon {
+  border: 3px solid #29492f;
+  background: #91c65a;
+  color: #203b28;
+  box-shadow: inset -3px -3px 0 #57813d, inset 3px 3px 0 #c8e97a, 3px 3px 0 #6b4428;
+}
+
+.arcade-theme .session-stack > span,
+.arcade-theme .tool-list,
+.arcade-theme .steps-card li {
+  border-width: 3px;
+  border-color: #8e5c35;
+  background: #f2d78e;
+}
+
+.arcade-theme .session-stack > span {
+  box-shadow: inset -2px -2px 0 #c08745, inset 2px 2px 0 #fff0bd;
+}
+
+.arcade-theme .session-stack b,
+.arcade-theme .tool-list li,
+.arcade-theme .steps-card strong {
+  font-size: 0.86rem;
+}
+
+.arcade-theme .session-stack small,
+.arcade-theme .session-stack em,
+.arcade-theme .tool-list small,
+.arcade-theme .steps-card small {
+  font-size: 0.7rem;
+}
+
+.arcade-theme .tool-list li {
+  border-bottom: 2px solid #aa733e;
+  background: #f7dda0;
+}
+
+.arcade-theme .steps-card li > span {
+  border: 3px solid #3e6338;
+  background: #a4cf62;
+  color: #27462c;
+  box-shadow: 2px 2px 0 #704929;
+  font-size: 0.75rem;
+}
+
+.arcade-theme .trust-section {
+  border: 5px solid #36231d;
+  background:
+    linear-gradient(90deg, rgba(61, 36, 24, 0.24) 1px, transparent 1px),
+    #6d452a;
+  background-size: 16px 16px;
+  box-shadow: 7px 7px 0 rgba(24, 20, 28, 0.34);
+}
+
+.arcade-theme .trust-card .section-label {
+  color: #47753d;
+  text-shadow: none;
+}
+
+.arcade-theme .site-footer {
+  margin-top: 24px;
+  border-top: 5px solid #38251f;
+  color: #e9dfac;
+  font-size: 0.88rem;
+}
+
+.arcade-theme .toast {
+  border: 4px solid #39251f;
+  background: #f4d35e;
+  color: #39251f;
+  box-shadow: inset -3px -3px 0 #b67c34, inset 3px 3px 0 #fff1a0, 5px 5px 0 rgba(24, 20, 28, 0.5);
+  font-family: var(--display);
+  font-size: 0.5rem;
+}
+
+@media (max-width: 700px) {
+  .arcade-theme h1 {
+    font-size: clamp(2rem, 10.5vw, 2.8rem);
+    line-height: 0.98;
+  }
+
+  .arcade-theme .hero {
+    min-height: auto;
+    padding-top: 42px;
+  }
+
+  .arcade-theme .workspace-ui {
+    min-height: 580px;
+    height: 580px;
+  }
+
+  .arcade-theme .hero-lead {
+    font-size: 1.05rem;
+  }
+
+  .arcade-theme .product-window {
+    box-shadow: 6px 6px 0 rgba(19, 14, 24, 0.45);
+  }
+
+  .arcade-theme .window-bar {
+    font-size: 0.64rem;
+  }
+
+  .arcade-theme .encrypted-label {
+    font-size: 0.56rem;
+  }
+
+  .arcade-theme .session-row strong {
+    font-family: var(--sans);
+    font-size: 0.76rem;
+  }
+
+  .arcade-theme .session-row small,
+  .arcade-theme .chat-head small,
+  .arcade-theme .message,
+  .arcade-theme .chat-input,
+  .arcade-theme .terminal-body {
+    font-size: 0.7rem;
+  }
+
+  .arcade-theme .message {
+    padding: 8px;
+  }
+
+  .arcade-theme .tool-call small,
+  .arcade-theme .diff-card code,
+  .arcade-theme .question-card p,
+  .arcade-theme .question-choices span {
+    font-size: 0.62rem;
+  }
+
+  .arcade-theme .section-intro h2 {
+    font-size: 1.25rem;
+  }
+
+  .arcade-theme .capability-card h3,
+  .arcade-theme .trust-card h2 {
+    font-size: 0.78rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .arcade-theme .terminal-cursor {
+    animation: none;
+  }
+}