asjs-express 1.1.0

package/lib/client/asjs-theme.css

@@ -0,0 +1,1073 @@
+:root {
+  --bg: #f4efe8;
+  --surface: rgba(255, 255, 255, 0.78);
+  --surface-strong: rgba(255, 255, 255, 0.96);
+  --surface-soft: #f8f4ee;
+  --surface-muted: #efe7dc;
+  --text: #1d2b36;
+  --muted: #5f6c77;
+  --accent: #0f5b66;
+  --accent-strong: #0a4750;
+  --accent-soft: #e6f2f3;
+  --accent-warm: #a97845;
+  --line: rgba(111, 92, 67, 0.16);
+  --line-strong: rgba(86, 69, 50, 0.26);
+  --shadow: 0 24px 60px rgba(69, 51, 31, 0.12);
+  --shadow-soft: 0 10px 24px rgba(69, 51, 31, 0.08);
+  --shadow-panel: 0 36px 90px rgba(46, 34, 18, 0.14);
+  --radius-xl: 32px;
+  --radius-lg: 24px;
+  --radius-md: 18px;
+  --radius-sm: 14px;
+  --asjs-progress-gradient: linear-gradient(90deg, #0f5b66, #32808c, #b78657);
+  --asjs-progress-shadow: 0 0 28px rgba(15, 91, 102, 0.24);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body.example-body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--text);
+  font-family: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(15, 91, 102, 0.08), transparent 26%),
+    radial-gradient(circle at bottom right, rgba(169, 120, 69, 0.1), transparent 30%),
+    linear-gradient(180deg, #fbf8f3, #f4efe8 42%, #ece4d7);
+}
+
+body.example-body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(105, 88, 65, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(105, 88, 65, 0.035) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: radial-gradient(circle at center, black 54%, transparent 90%);
+}
+
+body.example-body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: rgba(247, 242, 235, 0.5);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease;
+  z-index: 18;
+}
+
+html.asjs-loading body.example-body::after {
+  opacity: 1;
+}
+
+h1,
+h2,
+h3,
+.brand-copy strong {
+  font-family: "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.page-shell {
+  width: min(1220px, calc(100% - 36px));
+  margin: 24px auto 44px;
+  position: relative;
+  z-index: 1;
+}
+
+.example-header,
+.view-frame,
+.section-card,
+.hero-copy,
+.hero-aside,
+.info-card,
+.stat-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: var(--surface-strong);
+  box-shadow: var(--shadow-soft);
+}
+
+.example-header {
+  padding: 24px 26px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 246, 239, 0.96)),
+    var(--surface);
+  box-shadow: var(--shadow-panel);
+  position: relative;
+  overflow: hidden;
+}
+
+.example-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(115deg, rgba(15, 91, 102, 0.08), transparent 42%),
+    radial-gradient(circle at top right, rgba(169, 120, 69, 0.11), transparent 26%);
+  pointer-events: none;
+}
+
+.header-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 0 0 18px;
+  margin-bottom: 22px;
+  border-bottom: 1px solid rgba(111, 92, 67, 0.12);
+}
+
+.header-note p {
+  margin: 0;
+  max-width: 760px;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.example-pill,
+.section-label,
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 13px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #f4fbfb, #e7f3f3);
+  color: var(--accent-strong);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  box-shadow: inset 0 0 0 1px rgba(15, 91, 102, 0.08);
+}
+
+.header-main {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+  z-index: 1;
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.brand-mark {
+  width: 56px;
+  height: 56px;
+  display: grid;
+  place-items: center;
+  border-radius: 18px;
+  background: linear-gradient(140deg, var(--accent), #2e7782);
+  color: #ffffff;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  box-shadow: 0 16px 34px rgba(15, 91, 102, 0.22);
+}
+
+.brand-copy {
+  display: grid;
+  gap: 4px;
+}
+
+.brand-copy strong {
+  font-size: 1.55rem;
+  line-height: 1;
+  letter-spacing: -0.045em;
+}
+
+.brand-copy span,
+.brand-copy small {
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.site-nav {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.site-link {
+  display: grid;
+  gap: 4px;
+  min-width: 156px;
+  padding: 12px 14px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.08);
+  background: rgba(255, 255, 255, 0.72);
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    background 180ms ease;
+}
+
+.site-link span {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.site-link small {
+  color: var(--muted);
+  font-size: 0.78rem;
+  line-height: 1.42;
+}
+
+.site-link:hover,
+.site-link.is-active {
+  transform: translateY(-2px);
+  border-color: rgba(15, 91, 102, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: var(--shadow-soft);
+}
+
+.site-link[data-asjs-prefetched="true"] {
+  box-shadow: inset 0 0 0 1px rgba(15, 91, 102, 0.12), var(--shadow-soft);
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+  padding: 12px 20px;
+  border-radius: 999px;
+  border: 1px solid var(--line-strong);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background 180ms ease,
+    border-color 180ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-soft);
+}
+
+.button:focus-visible,
+.site-link:focus-visible,
+.brand-link:focus-visible,
+.inline-link:focus-visible {
+  outline: 3px solid rgba(15, 91, 102, 0.16);
+  outline-offset: 3px;
+}
+
+.button-primary {
+  border-color: var(--accent);
+  background: linear-gradient(180deg, #126671, #0f5b66);
+  color: #ffffff;
+  box-shadow: 0 18px 34px rgba(15, 91, 102, 0.18);
+}
+
+.button-secondary {
+  background: linear-gradient(180deg, #ffffff, #f7f2eb);
+  color: var(--text);
+}
+
+.header-cta {
+  white-space: nowrap;
+}
+
+.view-frame {
+  margin-top: 24px;
+  padding: 32px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 245, 238, 0.96));
+  box-shadow: var(--shadow-panel);
+  position: relative;
+  z-index: 1;
+}
+
+[data-asjs-view] {
+  animation: reveal 280ms ease;
+}
+
+.route-loader {
+  position: fixed;
+  inset: auto 30px 30px auto;
+  width: min(440px, calc(100% - 40px));
+  opacity: 0;
+  transform: translateY(18px);
+  pointer-events: none;
+  transition: opacity 220ms ease, transform 220ms ease;
+  z-index: 28;
+}
+
+html.asjs-loading .route-loader {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.route-loader-card {
+  padding: 20px;
+  border-radius: 26px;
+  border: 1px solid rgba(15, 91, 102, 0.14);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: var(--shadow-panel);
+}
+
+.route-loader-label {
+  display: inline-flex;
+  padding: 7px 11px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.route-loader-card strong {
+  display: block;
+  margin-top: 14px;
+  font-size: 1.16rem;
+  letter-spacing: -0.03em;
+}
+
+.route-loader-card p,
+.render-note,
+.render-stamp {
+  color: var(--muted);
+}
+
+.route-loader-card p {
+  margin: 10px 0 0;
+  line-height: 1.7;
+}
+
+.route-loader-skeleton {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.route-loader-skeleton span {
+  display: block;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(15, 91, 102, 0.08), rgba(15, 91, 102, 0.18), rgba(15, 91, 102, 0.08));
+  background-size: 220% 100%;
+  animation: shimmer 1.2s linear infinite;
+}
+
+.route-loader-skeleton span:nth-child(2) {
+  width: 84%;
+}
+
+.route-loader-skeleton span:nth-child(3) {
+  width: 70%;
+}
+
+.hero,
+.split-layout,
+.card-grid,
+.stats-grid,
+.render-summary-grid,
+.dashboard-grid,
+.metric-grid,
+.catalog-grid,
+.api-grid,
+.field-grid,
+.signal-list {
+  display: grid;
+  gap: 20px;
+}
+
+.hero {
+  grid-template-columns: 1.18fr 0.82fr;
+  align-items: stretch;
+}
+
+.hero-copy,
+.hero-aside,
+.section-card,
+.info-card,
+.stat-card {
+  padding: 28px;
+}
+
+.hero-copy,
+.section-card,
+.info-card,
+.stat-card,
+.product-card,
+.metric-panel,
+.activity-item,
+.signal-item,
+.status-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-copy::before,
+.section-card::before,
+.info-card::before,
+.stat-card::before,
+.product-card::before,
+.metric-panel::before,
+.status-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, rgba(15, 91, 102, 0.8), rgba(183, 134, 87, 0.5));
+  opacity: 0.3;
+}
+
+.hero-copy h1,
+.page-intro h1,
+.section-card h2,
+.section-header h2,
+.not-found-panel h1 {
+  margin: 18px 0 14px;
+  line-height: 0.98;
+  letter-spacing: -0.05em;
+}
+
+.hero-copy h1,
+.page-intro h1,
+.not-found-panel h1 {
+  font-size: clamp(2.8rem, 6vw, 5rem);
+}
+
+.section-card h2,
+.section-header h2 {
+  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
+}
+
+.hero-copy p,
+.page-intro p,
+.section-card p,
+.info-card p,
+.footer,
+.flow-list li,
+.check-list li {
+  color: var(--muted);
+  line-height: 1.78;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.hero-aside {
+  display: flex;
+  align-items: stretch;
+}
+
+.render-panel {
+  width: 100%;
+  background: linear-gradient(180deg, #ffffff, #f7f0e6);
+}
+
+.dashboard-grid {
+  grid-template-columns: 1.12fr 0.88fr;
+  margin-top: 24px;
+}
+
+.metric-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.metric-panel {
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: linear-gradient(180deg, #ffffff, #f8f2e9);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.metric-panel span,
+.activity-time,
+.product-chip,
+.status-pill,
+.status-summary span,
+.submitted-brief span,
+.field-group span,
+.inline-response-meta strong {
+  display: inline-flex;
+  color: var(--accent-strong);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.metric-panel strong {
+  display: block;
+  margin-top: 12px;
+  font-size: 2rem;
+  letter-spacing: -0.06em;
+}
+
+.metric-panel p,
+.activity-item p,
+.signal-item p,
+.product-note,
+.status-panel p,
+.submitted-brief p,
+.quick-check-panel p {
+  margin: 10px 0 0;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.activity-list {
+  display: grid;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.activity-item {
+  display: grid;
+  grid-template-columns: 92px 1fr;
+  gap: 18px;
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 233, 0.92));
+}
+
+.activity-time {
+  align-self: start;
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+}
+
+.activity-item h3,
+.signal-item h3,
+.product-card h2,
+.status-panel h3,
+.quick-check-panel h3 {
+  margin: 0;
+  font-size: 1.12rem;
+  letter-spacing: -0.03em;
+}
+
+.signal-list {
+  margin-top: 20px;
+}
+
+.signal-item {
+  padding: 20px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.catalog-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 24px;
+}
+
+.product-card {
+  background: linear-gradient(180deg, #ffffff, #fbf6ef);
+}
+
+.product-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.product-chip,
+.status-pill {
+  padding: 6px 11px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+}
+
+.product-card > p {
+  margin-top: 14px;
+}
+
+.product-facts {
+  display: grid;
+  gap: 12px;
+  margin: 20px 0 0;
+}
+
+.product-facts div,
+.status-summary div,
+.inline-response-meta span {
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: var(--surface-soft);
+}
+
+.product-facts dt {
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.product-facts dd,
+.status-summary strong,
+.inline-response-meta span {
+  margin: 8px 0 0;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.product-note {
+  padding-top: 16px;
+  border-top: 1px solid rgba(111, 92, 67, 0.12);
+}
+
+.api-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 18px;
+}
+
+.form-panel {
+  background: linear-gradient(180deg, #ffffff, #fbf5ed);
+}
+
+.webas-form,
+.quick-check-form {
+  display: grid;
+  gap: 18px;
+  margin-top: 20px;
+}
+
+.field-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.field-group {
+  display: grid;
+  gap: 8px;
+}
+
+.field-group input,
+.field-group textarea {
+  width: 100%;
+  padding: 15px 17px;
+  border-radius: 18px;
+  border: 1px solid rgba(86, 69, 50, 0.2);
+  background: rgba(255, 255, 255, 0.98);
+  color: var(--text);
+  font: inherit;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    background 180ms ease,
+    transform 180ms ease;
+}
+
+.field-group input:hover,
+.field-group textarea:hover {
+  border-color: rgba(15, 91, 102, 0.24);
+}
+
+.field-group input:focus,
+.field-group textarea:focus,
+.field-group input:focus-visible,
+.field-group textarea:focus-visible {
+  outline: none;
+  border-color: rgba(15, 91, 102, 0.44);
+  box-shadow: 0 0 0 4px rgba(15, 91, 102, 0.08), 0 14px 26px rgba(15, 91, 102, 0.08);
+  background: #ffffff;
+  transform: translateY(-1px);
+}
+
+.field-group textarea {
+  resize: vertical;
+  min-height: 170px;
+}
+
+.field-error {
+  color: #9a4738;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.form-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.form-actions span {
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.status-panel {
+  padding: 20px;
+  border-radius: 24px;
+  border: 1px solid rgba(111, 92, 67, 0.14);
+  background: #ffffff;
+  box-shadow: var(--shadow-soft);
+}
+
+.status-panel--success {
+  background: linear-gradient(180deg, #ffffff, #eef8f6);
+}
+
+.status-panel--error {
+  background: linear-gradient(180deg, #ffffff, #fbf1eb);
+}
+
+.status-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.submitted-brief {
+  margin-top: 20px;
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.render-summary-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 20px;
+}
+
+.render-summary-grid--wide {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.render-item {
+  padding: 17px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: linear-gradient(180deg, #ffffff, #f8f3eb);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
+}
+
+.render-item span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.render-item strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 1rem;
+  line-height: 1.35;
+}
+
+.render-note {
+  margin: 16px 0 0;
+  line-height: 1.72;
+}
+
+.render-stamp {
+  display: inline-block;
+  margin-top: 10px;
+  font-size: 0.86rem;
+}
+
+.stats-grid,
+.card-grid {
+  width: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.stat-card {
+  background: linear-gradient(180deg, #ffffff, #f8f3eb);
+}
+
+.stat-card strong,
+.contact-value {
+  display: block;
+  color: var(--accent-strong);
+  font-size: 1.7rem;
+  font-weight: 700;
+  letter-spacing: -0.05em;
+}
+
+.contact-card {
+  background: linear-gradient(180deg, #ffffff, #f9f5ee);
+}
+
+.section,
+.split-layout,
+.page-intro,
+.section-card {
+  margin-top: 24px;
+}
+
+.compact-section {
+  margin-top: 18px;
+}
+
+.page-intro {
+  padding: 12px 2px 4px;
+}
+
+.section-header {
+  margin-bottom: 18px;
+}
+
+.info-card h3 {
+  margin: 0 0 12px;
+  font-size: 1.16rem;
+  letter-spacing: -0.02em;
+}
+
+.split-layout {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.check-list,
+.flow-list {
+  margin: 18px 0 0;
+  padding-left: 20px;
+  display: grid;
+  gap: 12px;
+}
+
+.check-list li::marker,
+.flow-list li::marker {
+  color: var(--accent-strong);
+}
+
+.code-panel {
+  background: linear-gradient(180deg, #ffffff, #faf7f1);
+}
+
+.render-band {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 242, 233, 0.92));
+}
+
+.code-block,
+.mono-list {
+  font-family: "Cascadia Code", "Consolas", monospace;
+}
+
+.code-block {
+  margin: 18px 0 0;
+  padding: 18px;
+  border-radius: 18px;
+  background: #f4efe6;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.64;
+}
+
+.quick-check-panel {
+  margin-top: 24px;
+  padding-top: 22px;
+  border-top: 1px solid rgba(111, 92, 67, 0.12);
+}
+
+.quick-check-actions {
+  margin-top: 4px;
+}
+
+.inline-response-shell {
+  margin-top: 16px;
+}
+
+.asjs-inline-response {
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(111, 92, 67, 0.12);
+  background: linear-gradient(180deg, #ffffff, #f8f3eb);
+  box-shadow: var(--shadow-soft);
+}
+
+.asjs-inline-response strong {
+  display: block;
+  font-size: 1rem;
+  letter-spacing: -0.02em;
+}
+
+.asjs-inline-response p {
+  margin: 10px 0 0;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.asjs-inline-response.is-success {
+  background: linear-gradient(180deg, #ffffff, #eef8f6);
+}
+
+.asjs-inline-response.is-error {
+  background: linear-gradient(180deg, #ffffff, #fbf1eb);
+}
+
+.asjs-inline-response.is-neutral {
+  background: linear-gradient(180deg, #ffffff, #f7f2ea);
+}
+
+.inline-response-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.inline-response-meta span {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+}
+
+.inline-support {
+  margin: 16px 0 0;
+  color: var(--muted);
+}
+
+.inline-link {
+  color: var(--accent-strong);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.not-found-panel {
+  padding: 32px;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+  padding: 0 4px;
+}
+
+.footer strong {
+  color: var(--text);
+}
+
+.asjs-form-submitting {
+  opacity: 0.74;
+}
+
+.asjs-form-submitting .button {
+  pointer-events: none;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (max-width: 1080px) {
+  .header-main,
+  .hero,
+  .split-layout,
+  .card-grid,
+  .stats-grid,
+  .render-summary-grid,
+  .render-summary-grid--wide,
+  .dashboard-grid,
+  .metric-grid,
+  .catalog-grid,
+  .api-grid,
+  .field-grid,
+  .status-summary,
+  .inline-response-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .site-nav {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 760px) {
+  .page-shell {
+    width: min(100%, calc(100% - 20px));
+    margin: 14px auto 24px;
+  }
+
+  .example-header,
+  .view-frame,
+  .hero-copy,
+  .hero-aside,
+  .section-card,
+  .info-card,
+  .stat-card,
+  .not-found-panel {
+    padding: 20px;
+  }
+
+  .header-note,
+  .footer,
+  .hero-actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .site-link {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .route-loader {
+    inset: auto 10px 10px 10px;
+    width: auto;
+  }
+
+  .activity-item {
+    grid-template-columns: 1fr;
+  }
+}