:root {
  color-scheme: light;
  --ink: #12233f;
  --muted: #65748b;
  --line: #dce5f0;
  --panel: rgba(255, 255, 255, 0.92);
  --blue: #246bfd;
  --blue-dark: #1251d8;
  --cyan: #08a9c8;
  --green: #0f9f74;
  --orange: #d97812;
  --shadow: 0 24px 70px rgba(33, 64, 112, 0.12);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 58%, #f8fbff 100%);
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.page-glow { position: fixed; border-radius: 999px; filter: blur(1px); pointer-events: none; opacity: .55; }
.page-glow-one { width: 430px; height: 430px; right: -150px; top: 90px; background: radial-gradient(circle, rgba(36,107,253,.2), transparent 68%); }
.page-glow-two { width: 360px; height: 360px; left: -130px; bottom: 5%; background: radial-gradient(circle, rgba(8,169,200,.16), transparent 70%); }
.topbar { height: 76px; padding: 0 max(24px, calc((100vw - 1260px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(205,218,234,.8); background: rgba(255,255,255,.78); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-weight: 750; letter-spacing: .01em; }
.brand img { width: 126px; height: 40px; object-fit: contain; object-position: left center; }
.brand span { padding-left: 14px; border-left: 1px solid var(--line); }
.session-badge { padding: 8px 13px; border-radius: 999px; color: #315175; background: #edf4fc; font-size: 13px; }
.shell { width: min(1260px, calc(100% - 40px)); margin: 34px auto 70px; position: relative; }
.hero { padding: 34px 38px; border-radius: 26px; color: white; background: linear-gradient(125deg, #102f67 0%, #145db9 54%, #07a4bd 110%); box-shadow: var(--shadow); display: block; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 300px; height: 300px; right: -80px; top: -130px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.04), 0 0 0 72px rgba(255,255,255,.03); }
.eyebrow { margin: 0 0 8px; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #4792ff; }
.hero .eyebrow { color: #8eefff; }
.hero h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.15; letter-spacing: -.025em; }
.hero-copy { max-width: 980px; margin: 16px 0 0; color: rgba(255,255,255,.78); line-height: 1.75; }
.wizard { margin-top: 24px; display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 24px; align-items: start; }
.step-rail { position: sticky; top: 100px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 14px 45px rgba(33,64,112,.08); }
.rail-heading { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rail-heading strong { color: var(--blue); }
.step-rail ol { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.step-rail li { display: flex; gap: 12px; align-items: center; padding: 11px 9px; border-radius: 12px; }
.step-rail li > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #718096; background: #edf2f7; font-size: 13px; font-weight: 800; }
.step-rail li div { display: grid; gap: 2px; }
.step-rail li strong { font-size: 14px; }
.step-rail li small { color: var(--muted); }
.step-rail li.complete { background: #effbf7; }
.step-rail li.complete > span { color: white; background: var(--green); }
.step-rail li { cursor: pointer; transition: .18s ease; }
.step-rail li:hover { background: #f4f8fc; }
.step-rail li.active { color: #174fba; background: #eaf2ff; box-shadow: inset 3px 0 var(--blue); }
.step-rail li.active > span { color: white; background: var(--blue); }
.security-note { display: flex; gap: 9px; padding: 13px; border-radius: 12px; color: #52657e; background: #f4f8fc; font-size: 12px; line-height: 1.55; }
.security-note p { margin: 0; }
.step-content { display: grid; gap: 20px; }
.step-card { padding: clamp(24px, 4vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 16px 50px rgba(33,64,112,.075); }
.step-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.step-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 850; }
.step-heading h2, .completion-card h2 { margin: 0; font-size: 24px; letter-spacing: -.015em; }
.step-heading .eyebrow { margin-bottom: 4px; }
.status-pill { padding: 7px 11px; border-radius: 999px; color: var(--orange); background: #fff5e7; font-size: 12px; font-weight: 750; }
.status-pill.complete { color: var(--green); background: #e9f9f3; }
.section-copy { margin: 20px 0; color: var(--muted); line-height: 1.75; }
.console-link { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 20px; padding: 11px 16px; border-radius: 12px; color: white; background: #183e78; text-decoration: none; font-weight: 700; }
.copy-grid { display: grid; gap: 11px; }
.copy-row { display: grid; grid-template-columns: 145px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: #f9fbfd; }
.copy-row span { color: var(--muted); font-size: 13px; }
.copy-row code { overflow-wrap: anywhere; color: #173b70; }
.copy-button { border: 0; border-radius: 9px; padding: 8px 11px; color: var(--blue); background: #eaf2ff; cursor: pointer; font-weight: 700; }
.subsection-heading { margin: 28px 0 13px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.subsection-heading h3 { margin: 0 0 4px; }
.subsection-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.subsection-heading > span { color: var(--muted); font-size: 13px; }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.permission-group { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.permission-group h4 { margin: 0 0 10px; }
.permission-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.permission-group li { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid #edf1f5; }
.permission-group li:first-child { border: 0; padding-top: 0; }
.permission-group strong { font-size: 13px; }
.permission-group code { color: #6c7c91; font-size: 11px; overflow-wrap: anywhere; }
.confirmation-box { display: flex; gap: 12px; margin-top: 20px; padding: 15px; border: 1px solid #cbdcf4; border-radius: 14px; background: #f4f8ff; cursor: pointer; }
.confirmation-box input { width: 19px; height: 19px; margin-top: 2px; }
.confirmation-box span { display: grid; gap: 3px; }
.confirmation-box small { color: var(--muted); }
.primary-button { margin-top: 18px; border: 0; border-radius: 12px; padding: 12px 18px; color: white; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); box-shadow: 0 10px 22px rgba(36,107,253,.2); cursor: pointer; font-weight: 750; }
.primary-button:disabled { cursor: wait; opacity: .65; }
.form-grid { display: grid; gap: 15px; }
.form-grid label { display: grid; gap: 7px; color: #41536b; font-size: 13px; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #cbd8e7; border-radius: 12px; padding: 12px 13px; color: var(--ink); background: white; outline: none; transition: .18s; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,107,253,.1); }
textarea { resize: vertical; line-height: 1.6; }
.inline-result { margin: 14px 0 0; padding: 12px 14px; border-radius: 11px; color: var(--green); background: #eaf9f4; line-height: 1.55; }
.inline-result.error { color: #b42318; background: #fff0ee; }
.completion-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.completion-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--green); font-size: 26px; font-weight: 900; }
.completion-card p { color: var(--muted); line-height: 1.7; }
.completion-checklist, .completion-card > button, .completion-card > .inline-result { grid-column: 1 / -1; }
.completion-checklist { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.check-item { padding: 12px; border-radius: 12px; color: #8a5a12; background: #fff6e9; font-size: 13px; }
.check-item.complete { color: var(--green); background: #eaf9f4; }
.fatal-state { margin-top: 24px; padding: 28px; border: 1px solid #ffcfc9; border-radius: 18px; color: #9d241b; background: #fff3f1; }
.fatal-state p { margin-bottom: 0; }
.secondary-button { margin-top: 16px; padding: 10px 15px; border: 1px solid currentColor; border-radius: 10px; color: inherit; background: transparent; cursor: pointer; font-weight: 700; }
.landing-state { margin-top: 24px; padding: clamp(24px,4vw,40px); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); gap: 34px; align-items: center; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.landing-copy h2 { margin: 0; font-size: clamp(25px,3vw,34px); letter-spacing: -.02em; }
.landing-copy > p:not(.eyebrow) { max-width: 660px; margin: 14px 0 22px; color: var(--muted); line-height: 1.8; }
.landing-steps { display: grid; gap: 10px; }
.landing-steps > div { padding: 12px 14px; display: flex; gap: 12px; align-items: center; border-radius: 13px; background: #f4f8fc; }
.landing-steps > div > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(135deg,var(--blue),var(--cyan)); font-size: 13px; font-weight: 800; }
.landing-steps p { margin: 0; display: grid; gap: 2px; }
.landing-steps small { color: var(--muted); line-height: 1.5; }
.access-link-card { padding: 24px; border: 1px solid #cadbf2; border-radius: 18px; background: #f7faff; box-shadow: 0 14px 35px rgba(33,64,112,.08); }
.form-progress { margin: -4px 0 22px; padding-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.form-progress strong { color: var(--blue); }
.intake-step { animation: step-in .22s ease-out; }
@keyframes step-in { from { opacity: .25; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.guidance-box { margin: 13px 0 18px; padding: 15px 16px; display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 8px 13px; border: 1px solid #cddff5; border-radius: 14px; color: #315175; background: #f1f7ff; font-size: 13px; line-height: 1.65; }
.guidance-box strong { color: #173b70; }
.guidance-box p { margin: 0; }
.guidance-box.safe { border-color: #bfe7d8; color: #3b695b; background: #f0faf6; }
.guidance-box.safe strong { color: #17664f; }
.platform-guide { margin: 14px 0 17px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.platform-guide ol { margin: 0; padding-left: 22px; color: #435770; font-size: 13px; line-height: 1.8; }
.platform-guide li + li { margin-top: 5px; }
.platform-guide code { color: #174fba; background: #edf4ff; border-radius: 4px; padding: 1px 4px; }
.platform-guide h4 { margin: 18px 0 9px; color: #173b70; font-size: 14px; }
.demo-title { margin: 0 0 11px; display: flex; justify-content: space-between; gap: 12px; color: #173b70; }
.demo-title span { color: var(--muted); font-size: 12px; }
.guide-correction, .success-standard { margin: 10px 0 13px; padding: 10px 12px; border-radius: 9px; color: #684d16; background: #fff8e8; font-size: 12px; line-height: 1.7; }
.success-standard { color: #315175; background: #f1f7ff; }
.identifier-explainer { margin: 14px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.identifier-explainer > div { padding: 11px 12px; display: grid; gap: 4px; border: 1px solid #d5e1f0; border-radius: 10px; background: #f8fbff; }
.identifier-explainer b { color: #173b70; font-size: 12px; }
.identifier-explainer span { color: #52667e; font-size: 12px; line-height: 1.65; }
.aily-prompt-card { margin-top: 14px; overflow: hidden; border: 1px solid #bcd6f5; border-radius: 12px; background: #f7faff; }
.aily-prompt-card > div { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #173b70; background: #eaf3ff; font-size: 12px; }
.aily-prompt-card .copy-button { width: auto; flex: 0 0 auto; }
.aily-prompt-card pre { margin: 0; padding: 14px; overflow: auto; max-height: 390px; white-space: pre-wrap; color: #344a63; font: 12px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; }
.format-example { margin-top: 13px; padding: 11px 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; border-radius: 9px; color: #17664f; background: #eefaf6; font-size: 12px; }
.format-example code { color: #17664f; background: transparent; line-height: 1.7; }
.template-status { margin: 11px 0 14px; padding: 10px 12px; border-radius: 9px; color: #315175; background: #edf4fc; font-size: 12px; line-height: 1.65; }
.console-shot { margin-top: 14px; padding: 12px; display: grid; gap: 8px; border: 1px solid #d4dfeb; border-radius: 11px; color: #42536b; background: linear-gradient(135deg,#f8fafc,#eef3f8); box-shadow: inset 0 23px #e5ebf2; font-size: 12px; }
.console-shot.wide { margin: 0 0 20px; }
.console-shot span { padding-bottom: 9px; color: #40516a; font-weight: 800; }
.console-shot b { margin-top: 5px; color: #184f9f; }
.console-shot i { padding: 9px 10px; border: 1px solid #d5dfeb; border-radius: 7px; background: white; font-style: normal; }
.console-shot small { color: #7a899c; }
.review-list { margin: 14px 0 18px; display: grid; gap: 9px; }
.review-list div { padding: 11px 13px; display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 13px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.review-list span { color: var(--muted); font-size: 12px; }
.review-list strong { overflow-wrap: anywhere; font-size: 13px; }
.step-actions { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; }
.step-actions .primary-button, .step-actions .secondary-button { margin-top: 0; }
.step-actions .primary-button:last-child { margin-left: auto; }
.access-card-label { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.access-link-card h3 { margin: 7px 0 8px; font-size: 21px; }
.access-link-card h3:not(:first-of-type) { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.access-link-card > p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.access-link-card label { display: grid; gap: 7px; color: #41536b; font-size: 13px; font-weight: 650; }
.intake-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.intake-grid .full-row { grid-column: 1 / -1; }
.platform-choice { padding: 14px; border: 2px solid #b9cff0; border-radius: 13px; background: #eef5ff; }
.platform-choice > span { color: #174fba; font-size: 14px; }
.platform-choice small { color: var(--muted); font-weight: 500; line-height: 1.5; }
.secret-privacy-note { margin: 0; padding: 12px 13px; display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; border: 1px solid #bfe7d8; border-radius: 12px; color: #17664f; background: #eefaf6; line-height: 1.5; }
.secret-privacy-note > span { grid-row: 1 / 3; }
.secret-privacy-note small { color: #527568; }
.access-link-card .primary-button { width: 100%; }
.access-link-error { margin: 9px 0 0 !important; color: #b42318 !important; }
.landing-actions { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.landing-actions a { color: #315175; font-size: 12px; text-decoration: none; }
.landing-actions a:hover { color: var(--blue); text-decoration: underline; }
.waiting-state { margin-top: 24px; padding: clamp(28px,5vw,48px); display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 22px; align-items: center; border: 1px solid #bfe7d8; border-radius: 22px; background: #f1fbf7; box-shadow: var(--shadow); }
.waiting-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 27px; font-weight: 900; }
.waiting-state h2 { margin: 0; font-size: 27px; }
.waiting-state p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.waiting-state dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.waiting-state dt { color: var(--muted); }
.waiting-state dd { margin: 0; font-weight: 700; }
footer { padding: 30px; text-align: center; color: #8492a6; font-size: 12px; }
@media (max-width: 900px) {
  .landing-state { grid-template-columns: 1fr; }
  .waiting-state { grid-template-columns: auto 1fr; }
  .waiting-state > button { grid-column: 1 / -1; width: 100%; }
  .wizard { grid-template-columns: 1fr; }
  .step-rail { position: static; }
  .step-rail ol { grid-template-columns: repeat(4,1fr); }
  .step-rail li { display: grid; justify-items: center; text-align: center; }
  .step-rail li small { display: none; }
  .permission-groups { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .topbar { height: 66px; padding: 0 15px; }
  .brand img { width: 105px; }
  .brand span { display: none; }
  .session-badge { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell { width: min(100% - 24px, 1260px); margin-top: 18px; }
  .hero { padding: 25px 21px; border-radius: 20px; }
  .step-card { padding: 22px 18px; }
  .step-heading { grid-template-columns: auto 1fr; }
  .status-pill { grid-column: 2; justify-self: start; }
  .copy-row { grid-template-columns: 1fr auto; }
  .copy-row code { grid-column: 1 / -1; grid-row: 2; }
  .step-rail { overflow-x: auto; }
  .step-rail ol { min-width: 430px; }
  .completion-checklist { grid-template-columns: 1fr; }
  .landing-state { padding: 22px 18px; }
  .access-link-card { padding: 19px 16px; }
  .intake-grid { grid-template-columns: 1fr; }
  .intake-grid .full-row { grid-column: auto; }
  .identifier-explainer { grid-template-columns: 1fr; }
  .waiting-state { grid-template-columns: 1fr; text-align: center; }
  .waiting-icon { margin: auto; }
  .waiting-state dl { text-align: left; }
}