@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-variable.woff2") format("woff2"); font-weight: 100 800; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-variable.woff2") format("woff2"); font-weight: 100 900; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030914; color: #e8edf3; overflow: hidden;
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; }
.page { position: fixed; inset: 0; }
.si2 .si-stage { position: relative; overflow: hidden; background: #030914; }
.si-sky { position: absolute; inset: 0; background:
  radial-gradient(900px 520px at 72% 30%, rgba(47,123,255,.28), transparent 60%),
  radial-gradient(700px 500px at 18% 80%, rgba(34,167,232,.14), transparent 60%),
  linear-gradient(180deg, #06142a 0%, #030914 70%); }
.si-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.si-orb.o1 { width: 420px; height: 420px; right: 8%; top: -120px; background: #1e5bff; }
.si-orb.o2 { width: 340px; height: 340px; left: 32%; bottom: -160px; background: #0f8fd6; animation-duration: 24s; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-60px, 40px); } }
.si-grid { position: absolute; left: -10%; right: -10%; bottom: -2%; height: 46%; transform: perspective(700px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(80,140,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(80,140,255,.22) 1px, transparent 1px);
  background-size: 60px 60px; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); }
.si-hero { position: absolute; top: 0; bottom: 0; left: 30%; right: 0; opacity: .92;
  -webkit-mask-image: radial-gradient(60% 70% at 55% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(60% 70% at 55% 45%, #000 55%, transparent 100%); }
.si-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(160,200,255,.07) 48%, rgba(160,200,255,.13) 50%, transparent 58%);
  background-size: 250% 100%; animation: sweep 9s ease-in-out infinite; }
@keyframes sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.si-wrap { position: relative; z-index: 2; height: 100%; width: min(1240px, 92vw); margin: 0 auto; display: grid; grid-template-columns: 1fr 430px; gap: 64px; align-items: center; }
.si-logo { width: min(460px, 100%); display: block; filter: drop-shadow(0 0 28px rgba(47,123,255,.45)); animation: rise2 .7s ease-out both; }
.si-head { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.03em; margin: 26px 0 0; color: #f1f5fb; font-weight: 750; animation: rise2 .7s .08s ease-out both; }
.si-head span { background: linear-gradient(90deg, #6fb4ff, #2f7bff 50%, #22a7e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.si-lead { color: #a8b8cd; font-size: 16.5px; line-height: 1.6; max-width: 540px; margin: 16px 0 0; animation: rise2 .7s .16s ease-out both; }
.si-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; max-width: 620px; animation: rise2 .7s .24s ease-out both; }
.si-feats > div { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(120,170,255,.16); backdrop-filter: blur(6px); }
.si-feats svg { width: 22px; height: 22px; fill: none; stroke: #5aa2ff; stroke-width: 1.7; display: block; margin-bottom: 8px; }
.si-feats b { display: block; color: #eaf1fb; font-size: 14px; }
.si-feats span { display: block; color: #8597af; font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.si-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; max-width: 620px; animation: rise2 .7s .32s ease-out both; }
.si-mods span { font-size: 11.5px; color: #7f93ad; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(120,170,255,.16); }
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.si-card { position: relative; padding: 26px 28px 22px; border-radius: 18px; color: #e8edf3; animation: rise2 .8s .2s ease-out both;
  background: linear-gradient(180deg, rgba(14,30,56,.82), rgba(8,18,36,.86)); backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.si-card::before { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(110,170,255,.65), rgba(47,123,255,.08) 40%, rgba(34,167,232,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.si-card-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #7fa7d9; font-weight: 700; }
.si-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; box-shadow: 0 0 0 4px rgba(63,191,127,.18); }
.si-title { font-size: 27px; font-weight: 750; letter-spacing: -.02em; margin-top: 12px; }
.si-lbl { display: block; font-size: 12.5px; color: #93a6bf; margin: 12px 0 6px; }
.si-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); transition: border-color .15s, box-shadow .15s; }
.si-field:focus-within { border-color: #2f7bff; box-shadow: 0 0 0 4px rgba(47,123,255,.22); }
.si-field svg { width: 18px; height: 18px; fill: none; stroke: #6f86a3; stroke-width: 1.7; flex: none; }
.si-field input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #eef3fa; font-size: 15px; padding: 0; height: 100%; outline: none; }
.si-eye { border: 0; background: transparent; color: #7fa7d9; font: 600 12px Inter, sans-serif; cursor: pointer; }
.si-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.si-digit { height: 52px; text-align: center; font: 600 22px "JetBrains Mono", monospace; color: #eef3fa; border-radius: 11px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.1) !important; transition: border-color .15s, box-shadow .15s, transform .12s; }
.si-digit:focus { border-color: #2f7bff !important; box-shadow: 0 0 0 4px rgba(47,123,255,.22) !important; outline: none; }
.si-digit.on { border-color: rgba(110,170,255,.55) !important; transform: translateY(-1px); }
.si-msg { min-height: 20px; margin-top: 10px; font-size: 13px; color: #f0a830; }
.si-btn { width: 100%; height: 50px; margin-top: 4px; border: 0; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 650 15.5px Inter, sans-serif; color: #fff; background: linear-gradient(180deg, #3d88ff, #1f63e6); box-shadow: 0 10px 30px rgba(47,123,255,.45), inset 0 1px 0 rgba(255,255,255,.25); transition: filter .15s, transform .08s; }
.si-btn:hover { filter: brightness(1.08); } .si-btn:active { transform: translateY(1px); }
.si-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; transition: transform .2s; } .si-btn:hover svg { transform: translateX(3px); }
.si-btn.busy svg { animation: spin .8s linear infinite; } .si-btn.done { background: linear-gradient(180deg, #3fbf7f, #22995e); box-shadow: 0 10px 30px rgba(63,191,127,.4); }
@keyframes spin { to { transform: rotate(360deg); } }
.si-note { margin-top: 14px; font-size: 11.8px; line-height: 1.55; color: #6f829b; }
.si-card.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.si-flag { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; }
@media (max-width: 1100px) { .si-wrap { grid-template-columns: 1fr; gap: 24px; overflow: auto; padding: 30px 0; } .si-feats { grid-template-columns: 1fr; } .si-hero { left: 0; opacity: .35; } }
.si-digit { width: 100%; min-width: 0; padding: 0 !important; }
.si-code, .si-card, .si-wrap > * { min-width: 0; }
.si2 .si-stage { height: 100%; }
/* the building tower fills the stage; the text side is shaded so it reads */
.si-hero { left: 0 !important; right: 0 !important; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.si-grid { display: none; }
.si-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(3,9,20,.92) 0%, rgba(3,9,20,.75) 30%, rgba(3,9,20,0) 46%, rgba(3,9,20,0) 66%, rgba(3,9,20,.55) 82%),
              linear-gradient(0deg, rgba(3,9,20,.9) 0%, rgba(3,9,20,0) 18%); }
.si-wrap { grid-template-columns: minmax(0, 560px) 1fr 420px !important; gap: 24px !important; }
.si-wrap .si-card { grid-column: 3; }
.si-sweep { display: none; }
@media (max-width: 1100px) { .si-wrap { grid-template-columns: 1fr !important; } .si-wrap .si-card { grid-column: 1; } }
/* the tower stands behind, between the words and the card: shade less of it */
.si-stage::after { background: linear-gradient(90deg, rgba(3,9,20,.9) 0%, rgba(3,9,20,.78) 30%, rgba(3,9,20,.25) 44%, rgba(3,9,20,0) 55%, rgba(3,9,20,.35) 80%),
                                linear-gradient(0deg, rgba(3,9,20,.85) 0%, rgba(3,9,20,0) 16%) !important; }
.si-toggle { position: absolute; left: 24px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 8px; border-radius: 999px;
  background: rgba(10,23,41,.7); border: 1px solid rgba(120,170,255,.25); color: #a9bcd6; font: 600 12.5px Inter, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.si-toggle .sw { width: 30px; height: 17px; border-radius: 999px; background: #233653; position: relative; transition: background .2s; }
.si-toggle .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8aa0bf; transition: transform .2s, background .2s; }
.si-toggle.on .sw { background: #2f7bff; } .si-toggle.on .sw::after { transform: translateX(13px); background: #fff; } .si-toggle.on { color: #e8f0fb; }
/* coming soon: the words on the left, the tower to the right, no sign-in card */
.si-stage { position: absolute; inset: 0; }
.si-wrap { grid-template-columns: minmax(0, 600px) 1fr !important; gap: 0 !important; padding: 0 !important; overflow: visible !important; }
.si-soon { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: rgba(240,168,48,.1); border: 1px solid rgba(240,168,48,.35); color: #f3b955; font-size: 13px; font-weight: 700; letter-spacing: .16em;
  animation: rise2 .7s .24s ease-out both; }
.si-soon i { width: 8px; height: 8px; border-radius: 50%; background: #f0a830; box-shadow: 0 0 0 4px rgba(240,168,48,.2); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(240,168,48,.05); } }
.si-head .rot { display: inline-block; white-space: nowrap; color: #f1f5fb; min-width: 2ch; transition: opacity .35s, transform .35s; }
.si-head .rot.out { opacity: 0; transform: translateY(-12px); } .si-head .rot.in { opacity: 0; transform: translateY(12px); transition: none; }
.si-head .typed::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: #2f7bff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.si-build { position: absolute; z-index: 3; right: max(4vw, calc(50vw - 640px)); bottom: 64px; width: 300px; padding: 14px 16px 15px; border-radius: 14px;
  background: rgba(8,20,38,.62); border: 1px solid rgba(120,170,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; color: #a9bcd6; animation: rise2 .7s .4s ease-out both; }
.si-build .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.si-build .st { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #5aa2ff; }
.si-build .st.done { color: #3fbf7f; }
.si-build .fl { font: 600 12px "JetBrains Mono", Menlo, monospace; color: #e8edf3; font-variant-numeric: tabular-nums; }
.si-build .sys { margin-top: 6px; font-size: 15px; font-weight: 650; color: #eef3fa; min-height: 1.4em; }
.si-build .bar { margin-top: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.si-build .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f7bff, #22a7e8); border-radius: 3px; }
.si-wind { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.si-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(90,162,255,.13), transparent 70%); }
.si-stage.lit .si-light { opacity: 1; }
#heroSlot { cursor: grab; touch-action: none; z-index: 1; } #heroSlot.drag { cursor: grabbing; }
.si-wrap { pointer-events: none; } .si-wrap * { pointer-events: auto; }
.si-hint { position: absolute; z-index: 3; left: 66%; transform: translateX(-50%); bottom: 22px; display: flex; align-items: center; gap: 8px;
  color: #7f93ad; font-size: 12.5px; pointer-events: none; transition: opacity .8s; animation: rise2 .7s 1.2s ease-out both; }
.si-hint svg { width: 18px; height: 18px; fill: none; stroke: #5aa2ff; stroke-width: 1.8; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.si-hint.gone { opacity: 0; }
.si-sound { position: absolute; z-index: 4; left: max(4vw, calc(50vw - 620px)); bottom: 18px; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: rgba(10,23,41,.7); border: 1px solid rgba(120,170,255,.25); color: #a9bcd6; font: 600 12.5px Inter, sans-serif; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: rise2 .7s 1s ease-out both; }
.si-sound:hover { color: #e8f0fb; border-color: rgba(120,170,255,.5); }
.si-sound .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.si-sound .eq i { width: 3px; height: 3px; border-radius: 2px; background: #5aa2ff; }
.si-sound.on .eq i { animation: eq 1.1s ease-in-out infinite; } .si-sound.on .eq i:nth-child(2) { animation-delay: .2s; } .si-sound.on .eq i:nth-child(3) { animation-delay: .45s; } .si-sound.on .eq i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
.si-sound.on { color: #e8f0fb; }
.si-sky, .si-orb { transition: transform .6s ease-out; }
.si-foot { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; color: #5f7290; font-size: 12.5px; }
@media (max-width: 1100px) {
  .si-wrap { grid-template-columns: 1fr !important; align-content: end; padding: 0 16px 104px !important; }
  .si-hero { bottom: 42% !important; top: 2% !important; -webkit-mask-image: linear-gradient(#000 70%, transparent) !important; mask-image: linear-gradient(#000 70%, transparent) !important; }
  .si-stage::after { background: linear-gradient(0deg, rgba(3,9,20,.95) 0%, rgba(3,9,20,.75) 38%, rgba(3,9,20,0) 52%) !important; }
  .si-logo { width: min(320px, 80vw); } .si-head { font-size: 30px; }
  .si-sound { left: 16px; bottom: 40px; } .si-foot { text-align: right; padding-right: 16px; }
  .si-hint { left: 50%; bottom: auto; top: 46%; } .si-foot { bottom: 12px; }
  .si-build { left: 16px; right: 16px; width: auto; top: 16px; bottom: auto; padding: 10px 14px; } .si-build .sys { font-size: 14px; }
}