:root {
  color-scheme: dark;
  font-family: "Source Sans 3", Arial, sans-serif;
  color: #fff;
  background: #00102d;
  font-synthesis: none;
  --cyan: #20e7ff;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #00102d; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: #00102d; }
h1, h2, p { margin: 0; }
button, input, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button, a { color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-stage { position: relative; margin: 0 auto; overflow: hidden; }
.page { position: absolute; inset: 0 auto auto 0; width: 862px; height: 1825px; overflow: hidden; transform-origin: top left; background: #001438; }
.background-art { position: absolute; z-index: 0; top: -134px; left: 0; width: 862px; height: 1535px; object-fit: cover; pointer-events: none; }
.background-fade { position: absolute; z-index: 1; inset: 980px 0 0; background: linear-gradient(transparent, rgba(0,20,55,.96) 300px, #001438 450px); pointer-events: none; }
.page::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 50% 19%, rgba(17,211,255,.14), transparent 26%), linear-gradient(90deg, rgba(0,15,48,.1), transparent 50%, rgba(0,15,48,.1)); pointer-events: none; }

.hero { position: absolute; z-index: 2; top: 80px; left: 0; width: 862px; height: 405px; }
.robot { width: 448px; height: 427px; margin: 1px auto 0; object-fit: contain; }

.analyzer { position: absolute; z-index: 3; top: 480px; left: 34px; width: 794px; height: 724px; padding: 28px 28px 30px; border: 2px solid #2ccfff; border-radius: 28px 28px 19px 19px; background: linear-gradient(155deg, rgba(4,56,112,.96), rgba(0,22,59,.98) 40%, rgba(0,16,46,.98)); box-shadow: inset 0 0 0 3px rgba(9,101,187,.62), inset 0 0 38px rgba(0,132,255,.36), 0 0 22px rgba(0,174,255,.55); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); text-align: center; }
.analyzer::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(46,150,255,.48); border-radius: 19px; pointer-events: none; }
.analyzer h1 { position: relative; z-index: 1; font-size: 57px; line-height: 1.18; font-weight: 900; letter-spacing: 0; text-shadow: 0 3px 2px #00122f; }
.analyzer h1 span { white-space: nowrap; }
.accuracy-banner { position: relative; z-index: 1; width: 610px; height: 73px; margin: 27px auto 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #159cff; border-radius: 999px; background: linear-gradient(90deg, rgba(4,31,78,.75), rgba(8,67,132,.9), rgba(4,31,78,.75)); box-shadow: inset 0 0 22px rgba(8,157,255,.38), 0 0 13px rgba(0,168,255,.58); }
.accuracy-banner::before, .accuracy-banner::after { content: ""; position: absolute; top: 35px; width: 105px; height: 1px; background: linear-gradient(90deg, transparent, #178fe7); }
.accuracy-banner::before { right: 100%; }
.accuracy-banner::after { left: 100%; transform: scaleX(-1); }
.accuracy-banner img { position: absolute; left: -12px; width: 89px; height: 84px; object-fit: contain; }
.accuracy-banner strong { font-size: 28px; font-weight: 800; }
.analyzer-copy { position: relative; z-index: 1; color: #f6f8ff; font-size: 22px; font-weight: 700; line-height: 1.42; }
.analyzer-copy b { font-size: 25px; }
.analyzer-copy em { color: #24e8ff; font-style: normal; }

.analysis-form { position: relative; z-index: 1; margin-top: 27px; }
.code-field { height: 103px; display: flex; align-items: center; direction: ltr; border: 3px solid #31e9ff; border-radius: 25px; background: linear-gradient(110deg, rgba(2,70,128,.96), rgba(3,45,92,.98)); box-shadow: inset 0 0 0 3px rgba(9,114,190,.68), inset 0 0 25px rgba(0,165,255,.35), 0 0 16px rgba(0,182,255,.7); }
.code-field > img { width: 103px; height: 100px; margin: 0 4px 0 6px; object-fit: contain; flex: 0 0 auto; }
.field-divider { width: 2px; height: 54px; flex: 0 0 auto; background: linear-gradient(transparent, #35dcff 15% 85%, transparent); box-shadow: 0 0 8px #23cfff; }
.code-field input { width: 100%; min-width: 0; height: 100%; padding: 0 24px; border: 0; outline: 0; color: #effaff; background: transparent; text-align: left; direction: ltr; font-size: 24px; font-weight: 600; }
.code-field input::placeholder { color: #c1cee9; opacity: .9; }
.code-field:focus-within { box-shadow: inset 0 0 0 3px rgba(9,114,190,.68), inset 0 0 25px rgba(0,165,255,.45), 0 0 24px rgba(41,225,255,.9); }
.start-button { width: 100%; height: 101px; margin-top: 26px; border: 3px solid #fff0a0; border-radius: 999px; color: #05265a; background: linear-gradient(180deg, #fff0a0 0%, #ffd95e 44%, #e7a918 100%); box-shadow: inset 0 0 0 4px rgba(206,139,8,.62), inset 0 12px 19px rgba(255,255,255,.7), 0 0 24px #ffd64d, 0 10px 24px rgba(0,0,0,.32); font-size: 38px; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.start-button span { display: inline-block; margin-left: 14px; font-size: 40px; }
.start-button:hover, .start-button:focus-visible { outline: 0; filter: brightness(1.08); box-shadow: inset 0 0 0 4px rgba(206,139,8,.62), inset 0 12px 19px rgba(255,255,255,.8), 0 0 34px #ffe46f, 0 10px 24px rgba(0,0,0,.32); }
.start-button:active { transform: translateY(2px); }

.features { position: absolute; z-index: 3; top: 1230px; left: 133px; width: 596px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 47px; direction: ltr; }
.features article { text-align: center; }
.features img { width: 170px; height: 160px; margin: 0 auto 3px; object-fit: contain; }
.features h2 { font-size: 31px; line-height: 1.15; font-weight: 900; }
.features p { margin-top: 8px; color: #f2f7ff; font-size: 22px; font-weight: 600; }
.feature-divider { width: 1px; height: 205px; margin-top: 15px; background: linear-gradient(transparent, rgba(89,170,232,.65), transparent); }
.tech-line { position: absolute; z-index: 3; top: 1513px; left: 0; width: 862px; height: 32px; display: flex; align-items: center; }
.tech-line::before, .tech-line::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #1268a6); }
.tech-line::after { transform: scaleX(-1); }
.tech-line span { width: 164px; height: 17px; border-bottom: 2px solid #1268a6; clip-path: polygon(0 50%, 18% 50%, 25% 100%, 75% 100%, 82% 50%, 100% 50%, 100% 100%, 0 100%); }

footer { position: absolute; z-index: 3; top: 1636px; left: 24px; width: 815px; }
.copyright { margin-bottom: 6px; text-align: center; font-size: 13px; }
.disclaimer { min-height: 126px; display: flex; align-items: flex-start; gap: 18px; direction: ltr; padding: 16px 24px; border: 2px solid #19bfff; border-radius: 19px; background: linear-gradient(135deg, rgba(5,59,118,.96), rgba(0,25,62,.98)); box-shadow: inset 0 0 0 2px rgba(8,93,178,.65), inset 0 0 25px rgba(0,129,255,.26), 0 0 12px rgba(0,170,255,.5); }
.disclaimer > img { width: 56px; height: 54px; flex: 0 0 auto; object-fit: contain; }
.disclaimer > div { direction: ltr; text-align: left; }
.disclaimer h2 { font-size: 20px; line-height: 1.2; }
.disclaimer p { margin-top: 6px; color: #eef6ff; font-size: 13px; line-height: 1.55; }

.analysis-dialog { width: min(520px, calc(100% - 32px)); padding: 24px 32px 32px; border: 2px solid #22ddff; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #073b79, #001638 64%); text-align: center; box-shadow: inset 0 0 32px rgba(0, 166, 255, .28), 0 24px 90px rgba(0, 0, 0, .78), 0 0 32px rgba(0, 165, 255, .48); }
.analysis-dialog::backdrop { background: rgba(0, 7, 24, .84); backdrop-filter: blur(5px); }
.analysis-dialog > img { width: 150px; height: 142px; object-fit: contain; margin: 0 auto -2px; }
.analysis-dialog h2 { margin: 0; font-size: 28px; line-height: 1.25; }
.analysis-dialog > p { margin: 10px 0 22px; color: #c9eaff; font-size: 17px; }
.dialog-close { position: absolute; top: 10px; right: 12px; left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #d9f8ff; background: rgba(0, 23, 57, .6); font-size: 30px; line-height: 1; }
.dialog-close:focus-visible { outline: 2px solid #fff; }
.progress { height: 12px; overflow: hidden; border: 1px solid #1fcfff; border-radius: 999px; background: #00112b; }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #00a7ff, #29f3ff); box-shadow: 0 0 16px #1ee7ff; }
.analysis-dialog.is-analyzing .progress span { animation: analyze 1.8s ease-out forwards; }
@keyframes analyze { to { width: 100%; } }
.analysis-dialog.is-complete > img,
.analysis-dialog.is-complete > h2,
.analysis-dialog.is-complete > p,
.analysis-dialog.is-complete .progress { display: none; }
.analysis-result { padding-top: 8px; }
.analysis-result strong { display: block; color: #ffcf56; font-size: 28px; }
.analysis-result p { margin: 14px 0 22px; color: #e8f7ff; font-size: 17px; line-height: 1.55; }
.analysis-result a { display: flex; min-height: 60px; align-items: center; justify-content: center; border: 2px solid #fff1a2; border-radius: 999px; color: #05234d; background: linear-gradient(#ffe477, #f4b820); box-shadow: inset 0 0 15px rgba(255,255,255,.65), 0 0 22px rgba(255,190,23,.5); font-size: 21px; font-weight: 900; }
.noscript { margin: 0; padding: 12px; color: #fff; background: #991b1b; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}