:root {
  color-scheme: dark;
  --ink: #050807;
  --panel: #0a100e;
  --panel-2: #0d1512;
  --line: rgba(196, 255, 229, 0.14);
  --line-strong: rgba(196, 255, 229, 0.28);
  --text: #effff9;
  --muted: #8da69b;
  --acid: #4df6b7;
  --cyan: #68e7ff;
  --amber: #ffbd59;
  --danger: #ff7070;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 80% 0%, rgba(77, 246, 183, 0.08), transparent 30rem),
    linear-gradient(180deg, #050807 0%, #060a09 55%, #030504 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 76px;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: 44px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 7, 0.76);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-word { font-weight: 760; letter-spacing: -0.04em; font-size: 1.1rem; }
.brand-word span, .footer-brand span { color: var(--acid); }
.brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

nav { display: flex; gap: 26px; color: var(--muted); font-size: 0.9rem; }
nav a:hover { color: var(--text); }
.network-pill {
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #b9cec5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.network-pill i, .live-dot::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px var(--acid);
}

main, footer { width: min(1440px, calc(100% - 40px)); margin: 0 auto; }
.hero {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  align-items: center;
  gap: clamp(30px, 7vw, 100px);
  padding: 70px clamp(0px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}
.eyebrow, .panel-head, .section-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--muted);
}
.eyebrow { display: flex; gap: 16px; align-items: center; margin-bottom: 28px; }
.eyebrow b { color: var(--acid); font-weight: 500; }
.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3.6rem, 7.3vw, 7.2rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
  font-weight: 620;
}
.hero h1 em { color: transparent; -webkit-text-stroke: 1px rgba(239,255,249,.7); font-style: normal; }
.hero-lede { max-width: 680px; margin: 32px 0 0; color: #aec2b9; font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 650; }
.button.primary { background: var(--acid); color: #04110c; border-color: var(--acid); }
.button.primary:hover { background: #8affd1; }
.button.ghost:hover { background: rgba(255,255,255,.04); }
.hero-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 46px; color: var(--muted); font-size: 0.78rem; }
.hero-proof strong { padding: 5px 8px; border: 1px solid var(--line); color: #c9ded5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }

.hero-visual { min-height: 580px; position: relative; overflow: hidden; border:1px solid var(--line); background:#050807; }
.hero-visual::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, transparent 36%, rgba(5,8,7,.08) 58%, rgba(5,8,7,.76) 100%), linear-gradient(180deg, transparent 65%, rgba(5,8,7,.5)); pointer-events:none; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.86) contrast(1.07); }
.hero-sigil { position:absolute; z-index:2; right:8%; top:50%; width:clamp(94px, 18vw, 175px); height:auto; transform:translateY(-50%); filter:drop-shadow(0 0 24px rgba(104,231,255,.28)); animation:float 5s ease-in-out infinite; }
.telemetry { position: absolute; min-width: 148px; padding: 13px; border: 1px solid var(--line); background: rgba(7,13,11,.82); backdrop-filter: blur(12px); font: 0.66rem ui-monospace, monospace; }
.telemetry span { color: var(--muted); display:block; }
.telemetry b { color: var(--acid); font-weight: 500; }
.telemetry-top { top: 15%; right: 2%; }
.telemetry-bottom { bottom: 16%; left: 3%; }
@keyframes float { 50% { transform:translateY(calc(-50% - 9px)); } }

.console-section, .registry-section, .architecture, .about { padding: clamp(80px, 10vw, 150px) clamp(0px, 2vw, 28px); border-bottom: 1px solid var(--line); }
.section-intro { max-width: 690px; margin-bottom: 52px; }
.section-intro.wide { max-width: 920px; }
.section-kicker { margin: 0 0 18px; color: var(--acid); }
.section-intro h2, .about h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; }
.section-intro > p:last-child { color: var(--muted); max-width: 640px; font-size: 1.03rem; }
.chain-console { margin-bottom:18px; padding:clamp(22px,3vw,34px); border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(7,18,14,.96),rgba(5,9,8,.98)); }
.chain-console-head { display:flex; justify-content:space-between; gap:22px; align-items:flex-start; padding-bottom:24px; border-bottom:1px solid var(--line); }
.chain-console-head .section-kicker { margin-bottom:10px; }
.chain-console-head h3 { margin:0; font-size:clamp(1.5rem,3vw,2.6rem); line-height:1; letter-spacing:-.045em; }
.read-only-badge { padding:7px 9px; border:1px solid rgba(104,231,255,.32); color:var(--cyan); font:.64rem ui-monospace,monospace; letter-spacing:.1em; white-space:nowrap; }
.wallet-strip { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.wallet-state { display:flex; align-items:center; gap:12px; min-width:0; }
.wallet-state i { width:9px; height:9px; border-radius:50%; background:#52635c; box-shadow:0 0 0 5px rgba(82,99,92,.1); flex:none; }
.wallet-state i.connected { background:var(--acid); box-shadow:0 0 14px rgba(77,246,183,.72); }
.wallet-state span { display:block; color:var(--muted); font:.62rem ui-monospace,monospace; letter-spacing:.11em; }
.wallet-state strong { display:block; margin-top:3px; color:#d8e9e2; font-size:.86rem; overflow-wrap:anywhere; }
.wallet-actions { display:flex; gap:8px; }
.wallet-actions button, .chain-controls button { min-height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:3px; color:var(--text); background:rgba(255,255,255,.018); cursor:pointer; }
.wallet-actions button:hover, .chain-controls button:hover { border-color:var(--acid); color:var(--acid); }
.wallet-actions button:disabled, .chain-controls button:disabled { opacity:.42; cursor:not-allowed; }
.chain-controls { display:grid; grid-template-columns:minmax(280px,1.5fr) minmax(180px,.65fr) auto; gap:12px; align-items:end; padding:22px 0; }
.chain-controls label { color:#a9beb5; font-size:.82rem; }
.chain-controls input, .chain-controls select { display:block; width:100%; min-height:48px; margin-top:8px; padding:0 13px; border:1px solid var(--line); border-radius:3px; background:#050908; color:var(--text); outline:none; }
.chain-controls input:focus, .chain-controls select:focus { border-color:var(--acid); box-shadow:0 0 0 3px rgba(77,246,183,.08); }
.chain-controls button { min-height:48px; background:var(--acid); color:#03110b; border-color:var(--acid); font-weight:750; }
.chain-controls button:hover { background:#8affd1; color:#03110b; }
.chain-results { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.chain-results div { min-width:0; min-height:96px; padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); }
.chain-results span { display:block; color:var(--muted); font:.62rem ui-monospace,monospace; letter-spacing:.1em; }
.chain-results strong { display:block; margin-top:18px; color:var(--cyan); font-size:1rem; overflow-wrap:anywhere; }
.chain-foot { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:14px; }
.chain-foot p { margin:0; color:var(--muted); font-size:.76rem; }
.chain-foot a { color:var(--acid); font-size:.76rem; white-space:nowrap; }
.console-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr); gap: 18px; align-items: stretch; }
.console-panel, .lifecycle-card { border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(13,21,18,.95), rgba(6,10,9,.96)); }
.console-panel { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.panel-head { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.live-dot { color: var(--acid); }
.console-panel label, legend { color: #a9beb5; font-size: .82rem; }
.console-panel input[type="text"], .console-panel input:not([type]) { display:block; width:100%; margin-top:8px; padding: 15px 14px; border:1px solid var(--line); background:#050908; color:var(--text); outline:none; border-radius: 3px; }
.console-panel input:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(77,246,183,.08); }
.optional { float:right; color:#647b71; font: .64rem ui-monospace, monospace; text-transform:uppercase; letter-spacing:.08em; }
.field-status { display:block; margin-top:7px; color:var(--acid); font: .66rem ui-monospace, monospace; }
.field-status.warning { color:var(--amber); }
.field-status.invalid { color:var(--danger); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { margin-bottom: 9px; }
.state-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.state-picker label { position:relative; }
.state-picker input { position:absolute; opacity:0; pointer-events:none; }
.state-picker span { display:block; padding: 12px; text-align:center; border:1px solid var(--line); cursor:pointer; transition:.2s ease; }
.state-picker input:checked + span { border-color:var(--acid); color:var(--acid); background:rgba(77,246,183,.07); }
.generate-button { margin-top:auto; min-height:54px; border:0; border-radius:3px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:var(--acid); color:#03110b; cursor:pointer; font-weight:750; }
.generate-button:hover { background:#8affd1; }
.save-button { min-height:48px; border:1px solid var(--line-strong); border-radius:3px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:transparent; color:var(--text); cursor:pointer; font-weight:700; }
.save-button:hover { border-color:var(--acid); color:var(--acid); background:rgba(77,246,183,.04); }
.save-button:disabled { opacity:.42; cursor:not-allowed; }
.form-note { margin: -9px 0 0; color: var(--muted); font-size: .76rem; }

.lifecycle-card { min-height: 600px; padding: clamp(24px, 4vw, 52px); position:relative; overflow:hidden; }
.lifecycle-card::after { content:""; position:absolute; inset:auto -18% -44% 30%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(77,246,183,.09), transparent 64%); pointer-events:none; }
.card-scanline { position:absolute; inset:0; background:linear-gradient(180deg, transparent 48%, rgba(77,246,183,.08) 50%, transparent 52%); background-size:100% 8px; opacity:.12; pointer-events:none; }
.card-header { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.card-header span, .identity-row span { color:var(--muted); font: .68rem ui-monospace, monospace; letter-spacing:.13em; }
.card-header h3 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 4.2rem); letter-spacing:-.055em; }
.card-status { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid rgba(77,246,183,.38); color:var(--acid); font:.72rem ui-monospace, monospace; }
.card-status i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.identity-row { margin-top:34px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:100px 1fr; gap:14px; }
.identity-row code { overflow-wrap:anywhere; color:#d4e8df; }
.lifecycle-track { list-style:none; margin:42px 0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); position:relative; }
.lifecycle-track::before { content:""; position:absolute; height:1px; top:14px; left:4%; right:4%; background:var(--line-strong); }
.lifecycle-track li { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; color:#60736b; font: .66rem ui-monospace, monospace; text-transform:uppercase; }
.lifecycle-track i { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; border:1px solid #34443d; background:#08100d; font-style:normal; position:relative; z-index:1; }
.lifecycle-track li.complete, .lifecycle-track li.current { color:var(--text); }
.lifecycle-track li.complete i { border-color:var(--acid); background:var(--acid); color:#04100b; }
.lifecycle-track li.current i { border-color:var(--acid); color:var(--acid); box-shadow:0 0 0 5px rgba(77,246,183,.08); }
.card-data { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin:0; }
.card-data div { min-width:0; padding:15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.card-data dt { color:var(--muted); font: .65rem ui-monospace, monospace; text-transform:uppercase; }
.card-data dd { margin:6px 0 0; color:#d9ebe4; overflow-wrap:anywhere; }
.card-data code { font-size:.74rem; color:var(--cyan); }
.card-footer { display:flex; align-items:center; gap:10px; margin-top:32px; color:var(--muted); font: .67rem ui-monospace, monospace; }
.card-footer button { margin-left:auto; padding:8px 11px; color:var(--text); border:1px solid var(--line); background:transparent; cursor:pointer; }
.card-footer button:hover { border-color:var(--acid); color:var(--acid); }
.mini-mark { width:25px; height:25px; object-fit:contain; }

.event-preview { position:relative; z-index:1; margin-top:26px; border-top:1px solid var(--line); }
.event-preview-head { display:flex; justify-content:space-between; align-items:center; padding:15px 0 10px; color:var(--muted); font:.65rem ui-monospace, monospace; letter-spacing:.1em; }
.event-preview-head b { min-width:26px; padding:3px 7px; border:1px solid var(--line); color:var(--acid); text-align:center; font-weight:500; }
.event-preview ol { list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.event-preview li { display:grid; grid-template-columns:86px 1fr auto; gap:10px; align-items:center; padding:9px 10px; background:rgba(255,255,255,.018); border:1px solid var(--line); font-size:.72rem; }
.event-preview li span { color:var(--acid); font: .66rem ui-monospace, monospace; }
.event-preview li p { margin:0; min-width:0; color:#c7dad2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-preview li time { color:var(--muted); font: .64rem ui-monospace, monospace; }
.event-preview li.empty-event { display:block; color:var(--muted); background:transparent; }

.registry-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.registry-head .section-intro { margin-bottom:36px; }
.registry-actions { display:flex; gap:10px; margin-bottom:42px; }
.registry-actions button { min-height:44px; padding:0 15px; border:1px solid var(--line-strong); border-radius:3px; color:var(--text); background:rgba(255,255,255,.018); cursor:pointer; }
.registry-actions button:hover { border-color:var(--acid); color:var(--acid); }
.registry-actions button:disabled { opacity:.42; cursor:not-allowed; }
.registry-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.registry-stats div { min-height:124px; padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.012); }
.registry-stats span { color:var(--muted); font:.66rem ui-monospace, monospace; letter-spacing:.12em; }
.registry-stats strong { font-size:2.2rem; line-height:1; letter-spacing:-.05em; }
.registry-table-wrap { overflow-x:auto; border-left:1px solid var(--line); }
.registry-table { width:100%; border-collapse:collapse; min-width:780px; }
.registry-table th, .registry-table td { padding:17px 18px; text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.registry-table th { color:var(--muted); font:.64rem ui-monospace, monospace; letter-spacing:.1em; font-weight:500; }
.registry-table td { color:#c8dad3; font-size:.82rem; }
.registry-table td:first-child { color:var(--text); font-weight:700; }
.registry-table code { color:var(--cyan); font-size:.72rem; }
.registry-state { display:inline-flex; align-items:center; gap:7px; color:var(--acid); font:.66rem ui-monospace, monospace; }
.registry-state::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.registry-state[data-state="SUSPENDED"] { color:var(--amber); }
.registry-state[data-state="RETIRED"] { color:#96a39e; }
.registry-state[data-state="DRAFT"] { color:var(--cyan); }
.load-agent { border:0; background:transparent; color:var(--acid); cursor:pointer; font:.7rem ui-monospace, monospace; }
.load-agent:hover { text-decoration:underline; }
.registry-empty td { padding:34px; text-align:center; color:var(--muted); font-weight:400; }

.architecture-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.architecture-grid article { min-height:250px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); }
.architecture-grid b { font: .7rem ui-monospace, monospace; color:var(--acid); }
.architecture-grid h3 { margin:42px 0 10px; font-size:1.55rem; }
.architecture-grid p { color:var(--muted); margin:0; max-width:330px; }
.about { display:grid; grid-template-columns: .9fr 1.1fr; gap:8vw; }
.boundary-list { border-top:1px solid var(--line); }
.boundary-list div { display:grid; grid-template-columns:100px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.boundary-list span { color:var(--acid); font:.7rem ui-monospace, monospace; }
.boundary-list p { margin:0; color:#bccfc7; }

footer { min-height:230px; display:grid; grid-template-columns:.6fr 1.2fr .7fr; align-items:center; gap:40px; padding:60px clamp(0px,2vw,28px); }
.footer-brand { font-size:1.35rem; font-weight:800; letter-spacing:-.04em; }
.footer-brand small { display:block; color:var(--muted); font: .7rem ui-monospace, monospace; margin-top:6px; }
footer p { color:var(--muted); font-size:.82rem; }
footer a { justify-self:end; color:var(--acid); font-size:.82rem; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); padding:12px 16px; background:var(--text); color:var(--ink); opacity:0; pointer-events:none; transition:.25s ease; z-index:30; font-weight:700; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

.lifecycle-card[data-state="SUSPENDED"] .card-status { color:var(--amber); border-color:rgba(255,189,89,.38); }
.lifecycle-card[data-state="RETIRED"] .card-status { color:#96a39e; border-color:rgba(150,163,158,.38); }
.lifecycle-card[data-state="DRAFT"] .card-status { color:var(--cyan); border-color:rgba(104,231,255,.38); }

@media (max-width: 980px) {
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:90px; }
  .hero-visual { min-height:480px; }
  .console-grid { grid-template-columns:1fr; }
  .chain-controls { grid-template-columns:1fr 1fr; }
  .chain-controls button { grid-column:1 / -1; }
  .registry-head { align-items:flex-start; flex-direction:column; }
  .registry-actions { margin:-16px 0 30px; }
  .architecture-grid { grid-template-columns:1fr 1fr; }
  .about { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  main, footer { width:min(100% - 28px, 1440px); }
  .site-header { height:66px; padding:0 15px; }
  .network-pill { font-size:0; padding:9px; }
  .network-pill i { margin:0; }
  .hero { min-height:auto; padding:72px 0 50px; }
  .hero h1 { font-size:clamp(3.15rem, 15vw, 5rem); }
  .hero-actions { flex-direction:column; }
  .hero-visual { min-height:390px; }
  .telemetry { min-width:126px; }
  .console-section, .registry-section, .architecture, .about { padding:80px 0; }
  .chain-console-head, .wallet-strip, .chain-foot { flex-direction:column; align-items:flex-start; }
  .wallet-actions { width:100%; }
  .wallet-actions button { flex:1; }
  .chain-controls { grid-template-columns:1fr; }
  .chain-controls button { grid-column:auto; }
  .chain-results { grid-template-columns:1fr 1fr; }
  .lifecycle-card { min-height:0; padding:22px 17px; }
  .card-header { flex-direction:column; }
  .identity-row { grid-template-columns:1fr; }
  .lifecycle-track { grid-template-columns:repeat(3,1fr); gap:24px 0; }
  .lifecycle-track::before { display:none; }
  .card-data { grid-template-columns:1fr; }
  .event-preview li { grid-template-columns:76px 1fr; }
  .event-preview li time { grid-column:2; }
  .registry-actions { width:100%; }
  .registry-actions button { flex:1; }
  .registry-stats { grid-template-columns:1fr 1fr; }
  .architecture-grid { grid-template-columns:1fr; }
  .architecture-grid article { min-height:210px; }
  footer { grid-template-columns:1fr; gap:20px; }
  footer a { justify-self:start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-sigil { animation:none; }
}