/* =====================================================================
   AENET Cloud Public v0.9.0 — UNIFIED INTELLIGENT INTERFACE
   =====================================================================
   Semantic Block System v3 + Semantic Color v3 + Motion Orchestrator v3
   + Canonical Route Graph + Registration component family.

   Loaded AFTER search-display.css so it can extend the shared shell.
   Every color below resolves from a semantic role (design/color-intelligence.json);
   every motion preset is applied by web/assets/js/motion-orchestrator.js.
   ===================================================================== */

:root {
  --data-violet: #9d7bff;
  --neutral-slate: #64748b;
  --role-neutral: var(--neutral-slate);
  --role-data: var(--data-violet);
  --role-system: var(--system);
  --role-navigation: var(--nav);
  --role-action: var(--action);
  --role-insight: var(--insight);
  --role-guard: var(--guard);
  --role-warning: var(--warning);
}

/* ------------------------------------------------------------------ */
/* TYPOGRAPHY MINIMUMS (requirement #39 — no important text at 8–10px) */
/* ------------------------------------------------------------------ */
body { font-size: 15px; }
main p, main li, main dd, main dt { font-size: 15px; }
.meta, .muted, nav.breadcrumb, .route-context-meta, .system-card-meta,
.bus-cell, .eyebrow { font-size: 12px; }
@media (min-width: 900px) {
  main p, main li, main dd, main dt { font-size: 16px; }
}

/* Thai + Chinese breathing room (requirements #40–41). */
html[lang="th"] body { line-height: 1.85; letter-spacing: .01em; }
html[lang="th"] p, html[lang="th"] li { line-height: 1.9; }
html[lang="th"] .lede { line-height: 1.95; }
html[lang="zh-cn"] body { line-height: 1.8; letter-spacing: .02em; }
html[lang="zh-cn"] p, html[lang="zh-cn"] li { line-height: 1.85; }
html[lang="zh-cn"] h1, html[lang="zh-cn"] h2, html[lang="zh-cn"] h3 { letter-spacing: .03em; }

/* ------------------------------------------------------------------ */
/* ROUTE CONTEXT BAR (requirements #3, #8, #48)                        */
/* ------------------------------------------------------------------ */
.route-context {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 8px 0 4px; border-bottom: 1px solid var(--line);
}
.route-context nav.breadcrumb { border-bottom: 0; padding: 6px 0; flex: 1 1 auto; }
.route-context-meta {
  display: flex; gap: 8px; align-items: center; font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.route-id { color: var(--system); }
.route-coordinate { color: var(--data-violet); }

/* ------------------------------------------------------------------ */
/* SYSTEM BUS FOOTER (requirements #55–56)                             */
/* ------------------------------------------------------------------ */
.system-bus {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--muted);
}
.system-bus b { color: var(--text); font-weight: 600; }
.bus-cell { display: inline-flex; align-items: center; gap: 6px; }
.bus-cell .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--action);
  box-shadow: 0 0 6px color-mix(in srgb, var(--action) 60%, transparent);
}
[data-bus-core] ~ .bus-cell .dot, .bus-cell:nth-child(3) .dot { background: var(--guard); }
.bus-cell[data-bus-core] .dot, [data-bus-core] .dot { background: var(--guard); }
.system-bus[data-ui-state="ready"] [data-bus-ui] { color: var(--action); }

/* ------------------------------------------------------------------ */
/* SEMANTIC STATE COLORS (requirements #21–26)                         */
/* ------------------------------------------------------------------ */
/* Color is never the only signal — every [data-state] carries a label. */
.state-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--panel2);
  position: relative;
}
.state-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--role-color, var(--neutral-slate));
}
[data-state="READY"], [data-state="ready"], [data-state="ACTIVE"], [data-state="active"] { --role-color: var(--role-system); }
[data-state="PREVIEW"], [data-state="preview"] { --role-color: var(--role-insight); }
[data-state="PRIVATE"], [data-state="private"] { --role-color: var(--role-guard); }
[data-state="INSUFFICIENT_PUBLIC_EVIDENCE"], [data-state="insufficient-public-evidence"] { --role-color: var(--role-warning); }
[data-state="WAITING"], [data-state="waiting"], [data-state="STALE"], [data-state="stale"], [data-state="VALIDATING"], [data-state="CHALLENGE"], [data-state="SUBMITTING"] { --role-color: var(--role-warning); }
[data-state="ERROR"], [data-state="error"], [data-state="BLOCKED"], [data-state="blocked"] { --role-color: var(--role-guard); }
[data-state="SUCCESS"], [data-state="success"] { --role-color: var(--role-action); }
[data-state="DISABLED"], [data-state="disabled"], [data-state="IDLE"], [data-state="idle"] { --role-color: var(--role-neutral); }
[data-state="DATA"], [data-state="data"] { --role-color: var(--role-data); }

/* ------------------------------------------------------------------ */
/* LAYER MAP + SYSTEM CARDS (requirements #34–37, #44)                 */
/* ------------------------------------------------------------------ */
.systems-workspace.layer-map { display: grid; gap: 10px; }
.systems-layer {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 14px 16px 16px; margin: 0;
}
.systems-layer[data-layer-priority="primary"] { border-color: color-mix(in srgb, var(--nav) 45%, var(--line)); background: linear-gradient(180deg, rgba(77,163,255,.06), var(--panel)); }
.systems-layer[data-layer-priority="secondary"] { border-color: color-mix(in srgb, var(--system) 30%, var(--line)); }
.systems-layer[data-layer-priority="background"] { opacity: .92; }
.systems-layer[data-layer-priority="private-boundary"] { border-color: color-mix(in srgb, var(--guard) 45%, var(--line)); background: linear-gradient(180deg, rgba(255,93,115,.05), var(--panel)); }
.systems-layer-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.systems-layer-heading h2 { margin: 0; padding: 0; border: 0; font-size: 16px; }
.layer-badge {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--system);
  background: var(--panel2);
}
.systems-layer-heading p { margin: 0; font-size: 13px; color: var(--muted); }

.system-card { display: flex; flex-direction: column; gap: 8px; }
.system-card h3 { font-size: 16px; }
.system-purpose { font-size: 13px !important; color: var(--muted); line-height: 1.55; }
.system-card-meta { margin: 4px 0; display: grid; gap: 6px; }
.system-card-meta .meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); font-family: var(--mono);
}
.system-card-meta .meta-row dt {
  font-size: 10px; letter-spacing: .1em; color: var(--insight); text-transform: uppercase;
}
.system-card-meta .meta-row dd { margin: 0; color: var(--text); font-size: 12px; }
.system-card-meta .meta-row.meta-flow { border-top: 1px dashed var(--line); padding-top: 6px; }
.system-card-meta .meta-row .flow-arrow { color: var(--system); }
.system-open { margin: 2px 0 0; }
.action-link { color: var(--action); font-weight: 600; font-size: 13px; }
.action-link:hover { text-decoration: underline; }

/* Boundary divider (requirement #35 — private core, one-way rail). */
.layer-boundary {
  margin: 4px 0; padding: 14px 16px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--guard) 55%, var(--line));
  border-radius: var(--radius); background: rgba(255,93,115,.04);
  color: var(--guard); font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
}
.layer-boundary p { margin: 6px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; }

/* ------------------------------------------------------------------ */
/* REGISTRATION COMPONENT FAMILY (requirements #11–20, #62–67)         */
/* ------------------------------------------------------------------ */
.registration-mount { max-width: 720px; margin: 22px 0 8px; }
.registration-mount .reg-block { margin: 14px 0; }
.reg-entry h2 { border: 0; padding: 0; margin: 4px 0 8px; }
.reg-entry .muted { max-width: 60ch; }

.early-access-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; display: grid; gap: 16px;
}
.early-access-form .ea-field { display: grid; gap: 6px; margin: 0; }
.early-access-form .ea-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--insight);
}
.early-access-form input[type="email"],
.early-access-form select,
.early-access-form textarea {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: 15px; font-family: inherit;
}
.early-access-form input:focus, .early-access-form select:focus, .early-access-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--nav) 55%, transparent);
  outline-offset: 1px; border-color: var(--nav);
}
.early-access-form input[aria-invalid="true"], .early-access-form input[data-state="ERROR"] {
  border-color: var(--guard); box-shadow: 0 0 0 1px var(--guard);
}
.ea-interests { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-interest {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel2);
  font-size: 13px; color: var(--text); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.ea-interest:has(input:checked) { border-color: var(--action); background: rgba(46,220,138,.1); }
.ea-interest input { accent-color: var(--action); }
.ea-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.ea-consent input { margin-top: 3px; accent-color: var(--action); }

.early-access-form .btn {
  justify-self: start; background: var(--action); color: #06231a; border: 0;
  border-radius: 8px; padding: 11px 22px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.early-access-form .btn:hover { filter: brightness(1.08); }
.early-access-form .btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.reg-security { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.reg-security .state-label { color: var(--muted); }

.reg-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; }

.reg-success, .reg-error, .reg-unavailable, .reg-duplicate {
  border-radius: var(--radius); padding: 22px 24px; border: 1px solid var(--line);
}
.reg-success { border-color: color-mix(in srgb, var(--action) 50%, var(--line)); background: linear-gradient(180deg, rgba(46,220,138,.07), var(--panel)); }
.reg-success h2 { border: 0; padding: 0; margin: 4px 0 14px; }
.reg-result-list { display: grid; gap: 8px; margin: 0; }
.reg-result-list dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.reg-result-list dd { margin: 0; font-size: 15px; }
.reg-ticket {
  font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .06em;
  color: var(--data-violet);
}
.reg-error, .reg-unavailable { border-color: color-mix(in srgb, var(--guard) 50%, var(--line)); background: linear-gradient(180deg, rgba(255,93,115,.06), var(--panel)); }
.reg-error h2, .reg-unavailable h2, .reg-duplicate h2 { border: 0; padding: 0; }
.reg-error .btn, .reg-unavailable .btn, .reg-duplicate .btn {
  margin-top: 12px; background: transparent; color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 18px; cursor: pointer; font-size: 13px;
}
.reg-error .btn:hover, .reg-unavailable .btn:hover, .reg-duplicate .btn:hover { border-color: var(--guard); color: var(--guard); }
.reg-duplicate { border-color: color-mix(in srgb, var(--insight) 45%, var(--line)); }

/* ------------------------------------------------------------------ */
/* MOTION ORCHESTRATOR v3 (requirements #28–33, #51–52)                */
/* ------------------------------------------------------------------ */
.motion-active { animation: aenet-motion-enter .32s cubic-bezier(.2,.7,.3,1) both; }
.motion-revealed { opacity: 1; transform: none; }
[data-reveal] { opacity: 0; transform: translateY(10px); }
.motion-revealed, .motion-active { opacity: 1; transform: none; }
@keyframes aenet-motion-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
main.content-field { transition: opacity .32s ease; }

/* Connection motion (systems): slow, controlled, direction-revealing. */
.system-card { transition: border-color .32s ease, background .32s ease, transform .32s ease; }
.system-card:hover { border-color: color-mix(in srgb, var(--nav) 55%, var(--line)); transform: translateY(-1px); }
.system-card:hover .system-open .action-link { color: var(--action); }

/* Reduced motion — everything reveals instantly (requirements #30, #72). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* DENSITY MODES (requirement #38)                                     */
/* ------------------------------------------------------------------ */
html[data-density="compact"] main p, html[data-density="compact"] main li { font-size: 14px; }
html[data-density="compact"] .card { padding: 14px; }
html[data-density="compact"] h1 { font-size: 28px; }
html[data-density="stacked"] .cards { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  html[data-density="comfortable"] .cards, html[data-density="compact"] .cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE — no giant empty panels (requirements #42–43)            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="development"] .launch-roadmap { grid-template-columns: 1fr; }
  body[data-page="development"] .launch-roadmap-head p.muted { -webkit-line-clamp: 2; }
  body[data-page="development"] .launch-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .route-context { flex-direction: column; align-items: flex-start; gap: 4px; }
  .route-context-meta { width: 100%; }
  .system-bus { gap: 6px 14px; font-size: 11px; }
  .early-access-form { padding: 16px; }
  .systems-layer { padding: 12px; }
}

/* System card grid stays content-aware (minmax, auto-fit — no fixed px). */
.layer-map .cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Focus visibility everywhere (keyboard). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--nav); outline-offset: 2px;
}

/* Active nav state (requirement #46). */
nav.topnav a.active { color: var(--system); border-bottom: 2px solid var(--system); text-decoration: none; }

/* DGRID development adapter: fixed intelligent release board with visible
   coordinates, state cards, and bounded connection lanes. */
body[data-page="development"]{
  min-width:1280px;height:100vh;overflow:hidden;display:grid;
  grid-template-rows:56px minmax(0,1fr) 34px;background:var(--bg);
}
body[data-page="development"] > header.site{grid-row:1;min-height:0;position:relative;overflow:hidden;}
body[data-page="development"] > header.site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--system),var(--nav),var(--action),transparent);animation:development-header-scan 5.6s linear infinite;pointer-events:none;}
@keyframes development-header-scan{0%{transform:translateX(-34%);opacity:.35}50%{opacity:1}100%{transform:translateX(34%);opacity:.35}}
body[data-page="development"] .topbar{grid-template-columns:minmax(236px,.68fr) minmax(0,2.42fr) 310px;}
body[data-page="development"] .topbar-right{grid-template-columns:minmax(154px,1fr) 122px;justify-self:stretch;}
body[data-page="development"] .langs{justify-self:end;width:122px;display:grid;grid-template-columns:repeat(3,36px);justify-content:end;gap:6px;}
body[data-page="development"] .langs a{width:36px;height:30px;min-width:0;padding:6px 7px;display:grid;place-items:center;border-color:rgba(77,163,255,.42);}
body[data-page="development"] .langs a.active{border-color:var(--system);background:rgba(53,224,224,.1);box-shadow:inset 0 -2px 0 var(--system);}
body[data-page="development"] > .wrap{grid-row:2;min-height:0;max-width:none;padding:0 18px;display:flex;flex-direction:column;}
body[data-page="development"] .route-context{flex:0 0 30px;min-height:0;padding:4px 0;overflow:hidden;}
body[data-page="development"] nav.breadcrumb{min-height:0;padding:4px 0;font-size:12px;overflow:hidden;}
body[data-page="development"] .route-context-meta{font-size:11px;white-space:nowrap;}
body[data-page="development"] [data-reveal]{opacity:1;transform:none;}
body[data-page="development"] main{min-height:0;flex:1;padding:8px 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8px;overflow:hidden;}
body[data-page="development"] main > .page-head{grid-column:1 / 4;grid-row:1;min-width:0;min-height:0;margin:0;padding:16px 12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,26,46,.94),rgba(11,18,32,.88));display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;}
body[data-page="development"] main > .page-head::after{content:"";position:absolute;inset:auto 12px 10px;height:1px;background:linear-gradient(90deg,transparent,var(--system),transparent);animation:development-panel-line 3.8s ease-in-out infinite;}
@keyframes development-panel-line{0%,100%{opacity:.3;transform:scaleX(.45)}50%{opacity:1;transform:scaleX(1)}}
body[data-page="development"] .page-head h1{font-size:30px;line-height:1.15;margin-bottom:8px;}
body[data-page="development"] .page-head .lede{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-bottom:12px;}
body[data-page="development"] .development-identity-grid{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;}
body[data-page="development"] .development-identity-grid span{min-width:0;min-height:58px;padding:7px;border:1px solid var(--line);border-radius:4px;background:rgba(20,33,58,.72);overflow:hidden;}
body[data-page="development"] .development-identity-grid b,
body[data-page="development"] .development-identity-grid small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .development-identity-grid b{color:var(--system);font:700 18px/1.2 var(--mono);}
body[data-page="development"] .development-identity-grid small{color:var(--muted);font:11px/1.2 var(--mono);text-transform:uppercase;}
body[data-page="development"] .development-workspace{grid-column:4 / 13;grid-row:1;min-width:0;min-height:0;display:grid;grid-template-rows:76px minmax(0,1fr) 92px 104px;gap:8px;overflow:hidden;}
body[data-page="development"] .development-index-head{min-width:0;min-height:0;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:rgba(16,26,46,.74);display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:10px;align-items:center;overflow:hidden;}
body[data-page="development"] .development-index-head .eyebrow{margin:0 0 3px;font-size:12px;letter-spacing:1.5px;}
body[data-page="development"] .development-index-head p:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);font-size:12px;line-height:1.3;}
body[data-page="development"] .development-pulse{height:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:end;}
body[data-page="development"] .development-pulse i{display:block;border:1px solid color-mix(in srgb,var(--system) 42%,var(--line));border-radius:3px;background:linear-gradient(180deg,rgba(53,224,224,.18),rgba(77,163,255,.06));animation:development-pulse-rise 2.8s ease-in-out infinite;}
body[data-page="development"] .development-pulse i:nth-child(1){height:34%;animation-delay:0ms;}
body[data-page="development"] .development-pulse i:nth-child(2){height:58%;animation-delay:140ms;}
body[data-page="development"] .development-pulse i:nth-child(3){height:82%;animation-delay:280ms;}
body[data-page="development"] .development-pulse i:nth-child(4){height:48%;animation-delay:420ms;}
@keyframes development-pulse-rise{0%,100%{opacity:.52;transform:scaleY(.82)}50%{opacity:1;transform:scaleY(1)}}
body[data-page="development"] .development-board{min-width:0;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;overflow:hidden;}
body[data-page="development"] .development-card{min-width:0;min-height:0;margin:0;padding:8px 9px 12px;border-radius:4px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px 8px;align-content:start;position:relative;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease;animation:development-card-enter .42s cubic-bezier(.2,.7,.3,1) both;}
body[data-page="development"] .development-card:nth-child(2){animation-delay:50ms;}
body[data-page="development"] .development-card:nth-child(3){animation-delay:100ms;}
body[data-page="development"] .development-card:nth-child(4){animation-delay:150ms;}
body[data-page="development"] .development-card:nth-child(5){animation-delay:200ms;}
body[data-page="development"] .development-card:nth-child(6){animation-delay:250ms;}
@keyframes development-card-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body[data-page="development"] .development-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nav);box-shadow:0 0 12px rgba(77,163,255,.45);}
body[data-page="development"] .development-card[data-stage="QUALITY"]::before{background:var(--action);}
body[data-page="development"] .development-card[data-stage="SEARCH"]::before{background:var(--system);}
body[data-page="development"] .development-card[data-stage="MOTION"]::before{background:var(--insight);}
body[data-page="development"] .development-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--system) 55%,var(--line));background:linear-gradient(180deg,rgba(53,224,224,.06),var(--panel));}
body[data-page="development"] .development-card-kgrid,
body[data-page="development"] .development-card-stage{min-width:0;font:11px/1.1 var(--mono);letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .development-card-kgrid{color:var(--system);}
body[data-page="development"] .development-card-stage{justify-self:end;color:var(--warning);}
body[data-page="development"] .development-card h3{grid-column:1 / -1;min-width:0;margin:0;font-size:14px;line-height:1.18;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
body[data-page="development"] .development-card h3 a{color:var(--text);}
body[data-page="development"] .development-card p{grid-column:1 / -1;min-width:0;margin:0;color:var(--muted);font-size:12px;line-height:1.28;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
body[data-page="development"] .development-card-detail{grid-column:1 / -1;align-self:end;min-width:0;margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 8px;border-top:1px solid rgba(30,44,73,.9);padding-top:6px;}
body[data-page="development"] .development-card-detail div{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px;align-items:center;}
body[data-page="development"] .development-card-detail div:first-child{grid-column:1 / -1;}
body[data-page="development"] .development-card-detail dt,
body[data-page="development"] .development-card-detail dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/1.15 var(--mono);}
body[data-page="development"] .development-card-detail dt{color:var(--system);text-transform:uppercase;}
body[data-page="development"] .development-card-detail dd{color:var(--muted);}
body[data-page="development"] .development-card-detail div:nth-child(2) dd{color:var(--action);}
body[data-page="development"] .development-card-detail div:nth-child(3) dd{color:var(--insight);}
body[data-page="development"] .development-flow{min-width:0;min-height:0;margin:0;padding:8px;border:1px solid var(--line);border-radius:4px;background:rgba(16,26,46,.7);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:hidden;}
body[data-page="development"] .development-flow a{min-width:0;min-height:0;padding:8px 8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel);display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;}
body[data-page="development"] .development-flow a::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,var(--action),transparent);transform:scaleX(.35);opacity:.45;transition:transform .18s ease,opacity .18s ease;}
body[data-page="development"] .development-flow a:hover{border-color:color-mix(in srgb,var(--action) 55%,var(--line));text-decoration:none;}
body[data-page="development"] .development-flow a:hover::after{transform:scaleX(1);opacity:1;}
body[data-page="development"] .development-flow b,
body[data-page="development"] .development-flow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .development-flow b{color:var(--text);font-size:13px;}
body[data-page="development"] .development-flow span{color:var(--muted);font-size:12px;line-height:1.25;}
/* Launch Roadmap (launch gate v1) — 7-phase strip inside the development
   workspace. Status badges: done / launch-gate / next / later. */
body[data-page="development"] .launch-roadmap{min-width:0;min-height:0;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:rgba(16,26,46,.7);display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:10px;align-items:stretch;overflow:hidden;}
body[data-page="development"] .launch-roadmap-head{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden;}
body[data-page="development"] .launch-roadmap-head .eyebrow{margin:0;font-size:12px;letter-spacing:1.5px;}
body[data-page="development"] .launch-roadmap-head p.muted{min-width:0;margin:0;color:var(--muted);font-size:12px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
body[data-page="development"] .launch-phases{min-width:0;min-height:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow:hidden;}
body[data-page="development"] .launch-phase{min-width:0;min-height:0;margin:0;padding:7px 8px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel);display:grid;grid-template-rows:auto auto auto;gap:3px;align-content:start;overflow:hidden;position:relative;}
body[data-page="development"] .launch-phase::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nav);opacity:.55;}
body[data-page="development"] .launch-phase[data-status="done"]::before{background:var(--action);}
body[data-page="development"] .launch-phase[data-status="launch-gate"]::before{background:var(--warning);box-shadow:0 0 10px rgba(255,193,84,.5);}
body[data-page="development"] .launch-phase[data-status="next"]::before{background:var(--system);}
body[data-page="development"] .launch-phase[data-status="later"]::before{background:var(--line);}
body[data-page="development"] .launch-phase-no{min-width:0;font:12px/1.2 var(--mono);color:var(--system);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .launch-phase b{min-width:0;font-size:12px;line-height:1.2;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .launch-phase-status{min-width:0;justify-self:start;padding:1px 6px;border-radius:999px;border:1px solid var(--line);font:12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-page="development"] .launch-phase[data-status="done"] .launch-phase-status{color:var(--action);border-color:color-mix(in srgb,var(--action) 45%,var(--line));}
body[data-page="development"] .launch-phase[data-status="launch-gate"] .launch-phase-status{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 55%,var(--line));}
body[data-page="development"] .launch-phase[data-status="next"] .launch-phase-status{color:var(--system);border-color:color-mix(in srgb,var(--system) 45%,var(--line));}
body[data-page="development"] > footer.site{grid-row:3;min-height:0;height:34px;padding:0 18px;overflow:hidden;display:flex;align-items:center;}
body[data-page="development"] > footer.site .wrap{width:100%;max-width:none;padding:0;min-width:0;}
body[data-page="development"] > footer.site .grid{width:100%;display:flex;flex-wrap:nowrap;gap:12px;align-items:center;justify-content:space-between;white-space:nowrap;font-size:12px;overflow:hidden;}
body[data-page="development"] > footer.site .grid > div{min-width:0;overflow:hidden;text-overflow:ellipsis;}

@media (prefers-reduced-motion: reduce){
  body[data-page="development"] > header.site::after,
  body[data-page="development"] main > .page-head::after,
  body[data-page="development"] .development-pulse i,
  body[data-page="development"] .development-card{animation:none;}
}

/* =====================================================================
   v1.1 — INFORMATION ARCHITECTURE
   use-cases / tour / build pages + a flowing long-form home.
   The home was a fixed 100vh workstation; v1.1 turns it into a scrollable
   page so new visitors can read What → Use cases → How → Evidence →
   Development → Audience → Early Access in one vertical flow.
   ===================================================================== */
.note {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--line); padding: 4px 0 4px 12px; margin: 10px 0 16px;
}
.btn {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); background: var(--panel2);
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.btn:hover { border-color: var(--nav); text-decoration: none; }
.btn-primary { background: var(--action); color: #06231a; border-color: var(--action); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--action); }

/* ---- Home: flowing long-form page (desktop + mobile) ---- */
body[data-page="home"] {
  min-width: 0; height: auto; overflow: visible; display: block;
  grid-template-rows: none;
}
body[data-page="home"] > header.site { grid-row: auto; position: sticky; height: auto; min-height: 0; }
body[data-page="home"] > .wrap { grid-row: auto; max-width: 1080px; padding: 0 24px; display: block; }
body[data-page="home"] nav.breadcrumb { flex: none; padding: 12px 0; font-size: 13px; }
body[data-page="home"] main { display: block; padding: 30px 0 60px; }
body[data-page="home"] main > .page-head {
  grid-column: auto; grid-row: auto; padding: 0; border: 0; background: transparent;
  display: block; justify-content: initial; margin: 0 0 22px;
}
body[data-page="home"] .page-head h1 { font-size: 34px; line-height: 1.2; }
body[data-page="home"] .page-head .lede { font-size: 18px; line-height: 1.6; }
.home-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
body[data-page="home"] .home-visual-system {
  grid-column: auto; grid-row: auto;
  margin: 0 0 26px; padding: 18px;
  border: 1px solid rgba(77,163,255,.42); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(16,26,46,.94), rgba(7,12,24,.96));
  display: grid; grid-template-rows: auto auto auto; gap: 12px;
}
body[data-page="home"] .home-visual-head { grid-template-columns: minmax(0,1fr) minmax(255px,.55fr); gap: 12px; }
body[data-page="home"] .home-visual-canvas { min-height: 220px; }
body[data-page="home"] .home-visual-actions { grid-template-columns: repeat(4, minmax(0,1fr)); }
body[data-page="home"] .home-visual-actions a { min-height: 42px; }
body[data-page="home"] main > section:not(.page-head):not(.home-visual-system) {
  grid-column: auto; grid-row: auto; padding: 0; margin: 0 0 20px; border: 0; overflow: visible;
}
body[data-page="home"] main > section h2 {
  margin: 0 0 10px; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 20px;
}
body[data-page="home"] main > section:first-of-type h2 { border-top: 0; }
body[data-page="home"] main > section > p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
body[data-page="home"] .cards { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 12px; margin: 12px 0; }
body[data-page="home"] .card { min-height: 0; padding: 14px; border-radius: 10px; }
body[data-page="home"] .card p { display: block; }
body[data-page="home"] .card h3 a { color: var(--text); }
.home-link-row { margin: 8px 0 0; }
.home-link-row a { font-weight: 600; }
.home-early-access { border: 1px solid rgba(46,220,138,.3); border-radius: var(--radius); padding: 16px 18px; background: rgba(46,220,138,.05); }
body[data-page="home"] > footer.site { grid-row: auto; height: auto; padding: 26px 0 40px; display: block; }
body[data-page="home"] > footer.site .grid { flex-wrap: wrap; white-space: normal; font-size: 13px; }

/* ---- Use cases page ---- */
.use-cases-intro { margin-bottom: 8px; }
.use-case {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin: 16px 0; background: var(--panel);
}
.use-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.use-case-head h2 { border: 0; padding: 0; margin: 0; font-size: 19px; }
.use-case-availability { white-space: normal; }
.use-case-block { margin: 14px 0 0; }
.use-case-block h3 {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--insight); margin: 0 0 6px; border: 0; padding: 0;
}
.use-case-block p { margin: 4px 0; font-size: 14px; line-height: 1.6; }
.use-case-block ol { margin: 4px 0; padding-left: 20px; }
.use-case-block li { margin: 4px 0; font-size: 14px; line-height: 1.55; }
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li { margin: 0; }
.link-list { margin: 4px 0; padding-left: 18px; }
.link-list a { word-break: break-all; }
.use-case-next { border-top: 1px dashed var(--line); padding-top: 12px; }

/* ---- Guided tour page ---- */
.tour-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; margin: 16px 0 28px; }
.tour-layer { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--panel); }
.tour-layer h2 { border: 0; padding: 0; margin: 0 0 8px; font-size: 15px; }
.tour-layer p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tour-step { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tour-step:last-child { border-bottom: 0; }
.tour-step-num {
  width: 44px; height: 44px; border: 1px solid rgba(77,163,255,.5); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; color: var(--system); background: var(--panel2);
}
.tour-step-body h2 { border: 0; padding: 0; margin: 0 0 6px; font-size: 17px; }
.tour-step-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---- Build evidence page ---- */
.build-evidence {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 14px 0; background: var(--panel);
}
.build-evidence-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.build-evidence-head h2 { border: 0; padding: 0; margin: 0; font-size: 16px; }
.build-url { font-size: 12px; font-family: var(--mono); color: var(--nav); }
.build-evidence-meta { margin: 10px 0 0; display: grid; gap: 6px; }
.build-evidence-meta .meta-row { font-size: 12px; }
.build-evidence-meta .meta-row dd a { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.build-evidence-sources { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.build-state[data-state="ACTIVE"], .build-state[data-state="PREVIEW"], .build-state[data-state="RELEASED"] { color: var(--action); border-color: color-mix(in srgb, var(--action) 45%, var(--line)); }
.build-state[data-state="PRIVATE"], .build-state[data-state="INSUFFICIENT_PUBLIC_EVIDENCE"] { color: var(--muted); }