:root { --navy-950: #07131f; --navy-900: #0b1b2a; --navy-850: #102438; --navy-800: #153047; --ink: #102332; --muted: #5d6c78; --faint: #82919c; --cloud: #f3f7f9; --mist: #eaf1f4; --white: #ffffff; --line: #d5e0e5; --line-dark: rgba(190, 217, 228, .16); --orange: #ef5b3c; --orange-light: #ff8063; --cyan: #70cfe0; --green: #58d6a4; --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; --body: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; --mono: "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; --m-radius: 10px; --m-shadow: 0 30px 80px rgba(7, 19, 31, .18); }

*, ::before, ::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body { margin: 0px; overflow-x: hidden; color: var(--ink); background: var(--cloud); font-family: var(--body); -webkit-font-smoothing: antialiased; }

body::before { position: fixed; z-index: 100; top: 0px; right: 0px; left: 0px; height: 3px; content: ""; pointer-events: none; background: linear-gradient(90deg, var(--orange), #ff9b48 42%, var(--cyan)); }

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

a { color: inherit; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 200; top: 14px; left: 14px; padding: 10px 14px; transform: translateY(-160%); border-radius: 5px; color: var(--navy-950); background: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; }

.skip-link:focus { transform: translateY(0px); }

.page-width { width: min(100% - 48px, 1180px); margin-inline: auto; }

.site-header { position: absolute; z-index: 20; top: 3px; right: 0px; left: 0px; color: rgba(255, 255, 255, 0.78); }

.site-nav { display: flex; width: min(100% - 48px, 1180px); height: 76px; margin-inline: auto; align-items: center; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.025em; text-decoration: none; }

.brand img { width: 37px; height: 37px; object-fit: contain; }

.nav-links { display: flex; gap: 30px; margin-left: auto; }

.nav-links a { font-size: 12px; font-weight: 650; text-decoration: none; transition: color 0.2s; }

.nav-links a:hover { color: var(--white); }

.github-link { display: inline-flex; gap: 7px; margin-left: 30px; padding: 4px 0px; align-items: center; color: rgba(255, 255, 255, 0.82); font-size: 12px; font-weight: 650; text-decoration: none; transition: color 0.2s; }

.github-link:hover { color: var(--white); }

.github-link svg { width: 16px; height: 16px; fill: currentcolor; }

.hero { position: relative; min-height: 600px; padding: 96px 0px 24px; overflow: hidden; color: var(--white); background: radial-gradient(circle at 78% 30%, rgba(112, 207, 224, .12), transparent 28%),
    radial-gradient(circle at 24% 25%, rgba(239, 91, 60, .08), transparent 24%),
    var(--navy-900); }

.hero::before { position: absolute; inset: 0px; content: ""; pointer-events: none; opacity: 0.3; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(black, transparent 78%); }

.hero::after { position: absolute; right: -220px; bottom: -340px; width: 680px; height: 680px; content: ""; pointer-events: none; border: 1px solid rgba(112, 207, 224, 0.16); border-radius: 50%; box-shadow: rgba(112, 207, 224, 0.035) 0px 0px 0px 90px, rgba(112, 207, 224, 0.024) 0px 0px 0px 180px; }

.hero-grid { position: relative; z-index: 1; display: grid; min-height: 480px; grid-template-columns: minmax(0px, 1fr) minmax(420px, 0.78fr); gap: clamp(44px, 5vw, 64px); align-items: center; }

.hero-copy { min-width: 0px; padding-bottom: 0px; }

.hero h1, .section-heading h2, .recovery-copy h2, .cli-heading h2, .final-cta h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; }

.hero h1 { margin: 0px; font-family: var(--body); font-size: clamp(58px, 6.4vw, 84px); font-weight: 550; letter-spacing: -0.07em; line-height: 0.88; }

.hero h1 span { color: rgb(185, 213, 223); font-weight: 500; }

.hero h1 strong { color: var(--white); font-weight: 750; }

.hero-lede { max-width: 570px; margin: 30px 0px 0px; color: rgb(185, 200, 209); font-size: 16px; line-height: 1.68; letter-spacing: -0.012em; }

.hero-actions { display: flex; margin-top: 28px; align-items: center; gap: 24px; }

.install-command { display: grid; width: min(100%, 440px); min-width: 0px; grid-template-columns: 34px minmax(0px, 1fr) 48px; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; color: rgb(237, 248, 251); background: var(--navy-950); box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 34px; }

.install-command .prompt { display: flex; padding: 0px 0px 1px; align-items: center; justify-content: center; color: var(--orange-light); font: 12px/1 var(--mono); }

.install-command code { display: flex; min-width: 0px; min-height: 46px; padding: 0px 8px 1px 0px; align-items: center; overflow: hidden; font: 10px/1.5 var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.copy-button { display: grid; min-width: 48px; padding: 0px; place-items: center; border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgba(255, 255, 255, 0.16); border-image: none; border-radius: 0px 5px 5px 0px; color: rgb(156, 178, 190); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: color 0.2s, background 0.2s; }

.copy-button:hover { color: var(--white); background: rgba(255, 255, 255, 0.09); }

.copy-button.is-copied { color: var(--green); }

.copy-button svg { width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.hero-mark { position: relative; display: grid; min-height: 380px; align-content: center; isolation: isolate; }

.hero-mark::before { position: absolute; z-index: -2; top: 3%; left: 50%; width: 380px; height: 380px; content: ""; transform: translateX(-50%); border: 1px solid rgba(112, 207, 224, 0.17); border-radius: 50%; box-shadow: rgba(112, 207, 224, 0.035) 0px 0px 0px 48px, rgba(112, 207, 224, 0.02) 0px 0px 0px 96px; }

.hero-mark::after { position: absolute; z-index: -1; top: 10%; left: 50%; width: 300px; height: 300px; content: ""; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(239, 91, 60, 0.12), transparent 67%); filter: blur(8px); }

.hero-mascot { width: min(70%, 320px); margin: 0px auto; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.28) 0px 28px 35px); }

.principles-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); }

.principles article { min-width: 0px; padding: 34px 30px 38px; }

.principles article:first-child { padding-left: 0px; }

.principles article:last-child { padding-right: 0px; }

.principles article + article { border-left: 1px solid rgba(160, 182, 192, 0.42); }

.principles h2 { margin: 0px 0px 8px; font-family: var(--display); font-size: 22px; letter-spacing: -0.025em; line-height: 1.05; }

.principles p { max-width: 330px; margin: 0px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.panel-section { padding: 68px 0px 88px; background: var(--white); }

.original-panel-wrap { margin-top: 30px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); box-shadow: 0 24px 64px rgba(7, 19, 31, .16); font-family: var(--font-sans); }

.original-panel-wrap .dp-workspace { --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; }

.original-panel-wrap .dp-legend { padding-bottom: 0px; }

.section-heading { display: block; }

.section-heading h2 { max-width: 760px; margin: 0px; color: var(--ink); font-size: clamp(46px, 4.7vw, 60px); line-height: 0.98; }

.section-heading > p { max-width: 650px; margin: 18px 0px 0px; color: var(--muted); font-size: 14px; line-height: 1.65; }

.workflow-section { padding: 72px 0px 84px; background: #f9fbfc; }

.workflow-heading { display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(320px, 0.65fr); gap: clamp(56px, 8vw, 104px); margin-bottom: 62px; align-items: end; }

.workflow-heading h2 { max-width: 700px; }

.workflow-heading > p { max-width: 440px; margin: 0px 0px 4px; justify-self: end; }

.workflow-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0px; padding: 0px; list-style: none; }

.workflow-track::before { position: absolute; top: 7px; right: calc(25% - 7px); left: 7px; height: 2px; content: ""; background: linear-gradient(90deg, var(--orange), #9b84e8 42%, #48b8e5 72%, var(--green)); }

.workflow-track li { --workflow-next: #9b84e8; position: relative; min-width: 0px; padding: 43px 34px 0px 0px; color: var(--orange); }

.workflow-track li:nth-child(2) { --workflow-next: #48b8e5; color: #9b84e8; }

.workflow-track li:nth-child(3) { --workflow-next: var(--green); color: #48b8e5; }

.workflow-track li:nth-child(4) { padding-right: 0px; color: var(--green); }

.workflow-track li::before { position: absolute; z-index: 1; top: 0px; left: 0px; width: 16px; height: 16px; content: ""; border: 4px solid #f9fbfc; border-radius: 50%; background: currentcolor; box-shadow: 0px 0px 0px 1px currentcolor; }

.workflow-track h3 { margin: 0px 0px 9px; color: var(--ink); font-family: var(--display); font-size: 23px; letter-spacing: -0.025em; line-height: 1.05; }

.workflow-track p { max-width: 245px; margin: 0px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.workflow-track code { color: var(--ink); font: 10px var(--mono); }

.setup-section { padding: 78px 0px 86px; background: var(--white); }

.setup-grid { display: grid; grid-template-columns: 1.03fr 0.97fr; gap: 76px; }

.setup-copy h3 { max-width: 500px; margin: 0px; font-family: var(--display); font-size: clamp(36px, 3.6vw, 48px); letter-spacing: -0.04em; line-height: 1; }

.setup-copy > p { max-width: 520px; margin: 23px 0px 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.install-command-light { width: 100%; border-color: rgb(209, 221, 226); color: rgb(215, 229, 233); box-shadow: none; }

.setup-list { margin: 0px; padding: 0px; list-style: none; }

.setup-list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0px; align-items: start; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }

.setup-list li:last-child { border-bottom: 0px; }

.setup-list li svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.setup-list li span { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }

.setup-list strong { color: var(--ink); font-size: 12px; }

.setup-list code { color: var(--ink); font: 10px var(--mono); }

.recovery-section { position: relative; padding: 66px 0px; overflow: hidden; color: var(--white); background: var(--navy-900); }

.recovery-grid { position: relative; }

.recovery-copy { display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(360px, 1.2fr); gap: clamp(52px, 7vw, 84px); align-items: center; }

.recovery-copy h2 { max-width: 500px; margin: 0px; font-size: clamp(40px, 4vw, 52px); line-height: 0.97; }

.recovery-details > p { max-width: 620px; margin: 0px; color: rgb(169, 189, 199); font-size: 14px; line-height: 1.75; }

.cli-section { display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0px, 1.22fr); gap: 64px; padding-top: 82px; padding-bottom: 92px; align-items: start; }

.cli-heading { max-width: 470px; }

.cli-heading h2 { margin: 0px; font-size: clamp(44px, 4.4vw, 56px); line-height: 0.98; }

.cli-heading > p { margin: 22px 0px 0px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.cli-heading > p code { color: var(--ink); font: 12px var(--mono); }

.cli-facts { margin: 34px 0px 0px; }

.cli-facts div { padding: 14px 0px; border-bottom: 1px solid var(--line); }

.cli-facts div:last-child { border-bottom: 0px; }

.cli-facts dt { margin-bottom: 4px; color: var(--ink); font-size: 12px; font-weight: 700; }

.cli-facts dd { margin: 0px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.terminal { overflow: hidden; border: 1px solid rgba(12, 20, 26, 0.3); border-radius: 12px; color: rgb(208, 211, 216); background: rgb(19, 21, 24); box-shadow: 0px 28px 70px rgba(7, 19, 31, 0.22), 0px 2px 8px rgba(7, 19, 31, 0.12); }

.terminal-bar { position: relative; display: flex; height: 40px; padding: 0px 13px; align-items: center; gap: 8px; border-bottom: 1px solid rgb(188, 190, 194); color: rgb(74, 77, 82); background: linear-gradient(rgb(246, 246, 247), rgb(221, 222, 224)); box-shadow: inset 0px 1px rgba(255, 255, 255, 0.8); }

.terminal-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.22); }

.terminal-dot-red { background: rgb(255, 95, 87); }

.terminal-dot-yellow { background: rgb(255, 189, 46); }

.terminal-dot-green { background: rgb(40, 200, 64); }

.terminal-bar code { position: absolute; left: 50%; transform: translateX(-50%); color: rgb(80, 82, 86); font: 500 10px/1 var(--body); white-space: nowrap; }

.terminal pre { min-height: 348px; margin: 0px; padding: 28px 30px 32px; overflow-x: auto; color: rgb(211, 214, 219); background: rgb(19, 21, 24); font: 11px/1.85 var(--mono); }

.terminal pre b { color: rgb(242, 243, 244); font-weight: 600; }

.terminal pre em { color: var(--green); font-style: normal; }

.terminal pre i { color: var(--cyan); font-style: normal; }

.terminal-muted { color: rgb(118, 122, 128); }

.terminal-cursor { display: inline-block; width: 7px; height: 14px; transform: translateY(3px); background: rgb(211, 214, 219); }

.final-cta { position: relative; overflow: hidden; color: var(--white); background: rgb(219, 77, 50); }

.final-cta::after { position: absolute; top: -50%; right: 8%; width: 500px; height: 500px; content: ""; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.035) 0px 0px 0px 80px, rgba(255, 255, 255, 0.024) 0px 0px 0px 160px; }

.final-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 106px minmax(0px, 1fr) auto; gap: 34px; min-height: 246px; align-items: center; }

.final-cta img { width: 124px; height: 124px; margin-left: -16px; object-fit: contain; filter: drop-shadow(rgba(87, 20, 9, 0.24) 0px 14px 24px); }

.final-cta h2 { margin: 0px; font-size: clamp(36px, 3.9vw, 52px); line-height: 0.98; }

.final-copy p { max-width: 500px; margin: 14px 0px 0px; color: rgba(255, 255, 255, 0.78); font-size: 12px; line-height: 1.6; }

.final-actions { display: grid; gap: 10px; min-width: 190px; }

.primary-button, .secondary-button { display: inline-flex; min-height: 48px; padding: 0px 17px; align-items: center; justify-content: center; border-radius: 5px; font-size: 11px; font-weight: 750; text-decoration: none; }

.primary-button { gap: 7px; border: 1px solid var(--navy-950); color: var(--white); background: var(--navy-950); cursor: pointer; }

.primary-button svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2; }

.secondary-button { gap: 8px; border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white); background: rgba(255, 255, 255, 0.05); }

.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; min-height: 116px; align-items: center; color: var(--muted); font-size: 11px; }

.site-footer p { margin: 0px; }

.site-footer a:not(.brand) { color: var(--ink); text-underline-offset: 3px; }

.footer-brand { color: var(--ink); }

.footer-brand img { width: 33px; height: 33px; }

@media (max-width: 1060px) {
  .hero { min-height: auto; }
  .hero-grid { min-height: 0px; grid-template-columns: 1fr; }
  .hero-copy { max-width: 740px; }
  .hero-mark { width: min(100%, 720px); justify-self: end; }
  .setup-grid { gap: 55px; }
  .setup-list li span { grid-template-columns: 1fr; gap: 3px; }
  .cli-section { gap: 48px; }
  .final-cta-inner { grid-template-columns: 110px 1fr; padding-block: 52px; }
  .final-actions { grid-column: 2; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .page-width, .site-nav { width: min(100% - 36px, 1180px); }
  .site-nav { height: 68px; }
  .nav-links { gap: 20px; }
  .github-link { margin-left: 20px; }
  .hero { padding: 94px 0px 36px; }
  .hero h1 { font-size: clamp(61px, 12vw, 84px); }
  .principles { grid-template-columns: 1fr; }
  .principles article { padding: 30px 0px 34px; }
  .principles article + article { padding-left: 0px; border-top: 1px solid var(--line); border-left: 0px; }
  .principles p { max-width: 600px; }
  .panel-section { padding: 66px 0px 80px; }
  .workflow-section { padding: 68px 0px 76px; }
  .section-heading > p { max-width: 630px; }
  .workflow-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .workflow-heading > p { margin: 0px; justify-self: start; }
  .workflow-track { grid-template-columns: 1fr; }
  .workflow-track::before { display: none; }
  .workflow-track li, .workflow-track li:nth-child(2), .workflow-track li:nth-child(3), .workflow-track li:nth-child(4) { min-height: 114px; padding: 0px 0px 38px 42px; }
  .workflow-track li:not(:last-child)::after { position: absolute; top: 16px; bottom: 0px; left: 7px; width: 2px; content: ""; background: linear-gradient(180deg, currentcolor, var(--workflow-next)); }
  .workflow-track li:last-child { min-height: 0px; padding-bottom: 0px; }
  .workflow-track p { max-width: 540px; }
  .setup-section { padding: 72px 0px 80px; }
  .setup-grid { grid-template-columns: 1fr; gap: 42px; }
  .recovery-section { padding: 72px 0px; }
  .recovery-copy { max-width: 760px; grid-template-columns: 1fr; gap: 32px; }
  .cli-section { grid-template-columns: 1fr; gap: 42px; padding-top: 78px; padding-bottom: 88px; }
  .cli-copy { max-width: 650px; }
  .cli-heading { max-width: 650px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p:first-of-type { display: none; }
}

@media (max-width: 620px) {
  .page-width, .site-nav { width: min(100% - 28px, 1180px); }
  .nav-links { display: none; }
  .github-link { margin-left: auto; }
  .hero { padding: 88px 0px 32px; }
  .hero-grid { gap: 28px; }
  .hero h1 { font-size: clamp(54px, 14.8vw, 64px); }
  .hero-lede { margin-top: 27px; font-size: 15px; }
  .hero-actions { display: grid; }
  .install-command { width: 100%; }
  .hero-mark { width: 100%; min-height: 300px; }
  .hero-mark::before { width: 300px; height: 300px; }
  .hero-mark::after { width: 245px; height: 245px; }
  .hero-mascot { width: 230px; }
  .principles h2 { font-size: 24px; }
  .panel-section { padding: 58px 0px 68px; }
  .workflow-section { padding: 58px 0px 66px; }
  .section-heading h2 { font-size: 46px; }
  .original-panel-wrap { width: 100%; margin-right: 0px; margin-left: 0px; padding: 8px 0px; border-right: 0px; border-left: 0px; border-radius: 0px; }
  .workflow-heading { gap: 20px; margin-bottom: 42px; }
  .workflow-track li, .workflow-track li:nth-child(2), .workflow-track li:nth-child(3), .workflow-track li:nth-child(4) { min-height: 120px; padding: 0px 0px 40px 38px; }
  .workflow-track li:last-child { min-height: 0px; padding-bottom: 0px; }
  .workflow-track p { max-width: 320px; }
  .setup-section { padding: 60px 0px 68px; }
  .setup-grid { gap: 36px; }
  .setup-copy h3 { font-size: 38px; }
  .install-command-light code { font-size: 9px; }
  .recovery-section { padding: 64px 0px; }
  .recovery-copy h2 { font-size: 43px; }
  .cli-section { gap: 38px; padding-top: 66px; padding-bottom: 74px; }
  .cli-heading h2 { font-size: 42px; }
  .terminal { width: calc(100% + 28px); margin-left: -14px; border-right: 0px; border-left: 0px; border-radius: 0px; }
  .terminal pre { min-height: 310px; padding: 22px 16px; font-size: 9px; }
  .final-cta-inner { grid-template-columns: 76px 1fr; gap: 20px; padding-block: 38px; }
  .final-cta img { width: 95px; height: 95px; margin-left: -15px; }
  .final-cta h2 { font-size: 38px; }
  .final-actions { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 10px; }
  .site-footer { min-height: 140px; grid-template-columns: 1fr; gap: 5px; padding-block: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: 0.7s ease 0s 1 normal both running enter-up; }
  .hero-mark { animation: 0.75s ease 0.12s 1 normal both running enter-up; }
  @keyframes enter-up {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}