/* Trial redesign: the opening through #boot. Later sections keep their styles. */
.intro-wrap { width: min(100%, 1360px); padding-inline: clamp(22px, 4.5vw, 64px); margin-inline: auto; }
.intro-hero, .intro-overview, .intro-look { --intro-ink: #292b2b; --intro-muted: #777874; --intro-accent: #bd5c36; color: var(--intro-ink); background: #faf9f6; }
.intro-hero, .intro-overview, .intro-look, .intro-boot { scroll-margin-top: 100px; }
.intro-nav { position: fixed; z-index: 70; top: 0; left: 0; width: 100%; height: 84px; padding-inline: max(24px, calc((100vw - 1232px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #292b2b0d; background: #faf9f6e8; backdrop-filter: blur(18px); transition: opacity .2s, transform .2s; }
.intro-nav a { color: #292b2b; text-decoration: none; font-size: 14px; }
.intro-nav a:hover { color: #bd5c36; }
.intro-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .08em; }
.intro-brand img { width: 32px; height: 32px; }
.intro-nav .intro-brand { font-size: 19px; }
.intro-nav-links { display: flex; gap: 32px; }
.intro-nav .intro-download { display: flex; gap: 25px; align-items: center; padding: 10px 18px; border: 1px solid #292b2b24; border-radius: 30px; font-weight: 500; }
.intro-nav.is-night { background: #202722e8; border-color: #ffffff0d; }
.intro-nav.is-night a { color: #eeeae1; }
.intro-nav.is-night a:hover { color: #c8aa88; }
.intro-nav.is-night .intro-download { border-color: #ffffff30; }
.intro-hero { min-height: 100svh; padding-block: 140px 80px; display: flex; align-items: center; overflow: clip; position: relative; }
.intro-hero-layout { display: grid; grid-template-columns: minmax(0, .39fr) minmax(0, .61fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
.intro-hero-copy { position: relative; z-index: 1; text-align: left; }
.intro-kicker { display: inline-flex; align-items: center; gap: 10px; font: 12px/1.5 var(--mono); letter-spacing: .02em; color: #727570; }
.intro-status { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #749279; box-shadow: 0 0 0 3px #74927912; }
.intro-kicker-divider { margin-inline: 6px; color: #bbbdb6; }
.intro-hero h1 { margin-top: 25px; font-size: clamp(48px, 5.2vw, 74px); line-height: 1.07; font-weight: 500; letter-spacing: -.06em; text-wrap: initial; }
.intro-period { color: #bd5c36; }
.intro-hero-lead { margin-top: 25px; max-width: 36ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: #777874; }
.intro-actions { display: flex; justify-content: flex-start; align-items: center; gap: 24px; margin-top: 30px; }
.intro-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 12px 23px; color: #fff; background: #303532; border-radius: 30px; font: 500 14px/1.4 var(--ui); transition: background .2s, transform .2s; text-decoration: none !important; }
.intro-button:hover { background: #bd5c36; transform: translateY(-2px); }
.intro-button .nios-glyph { width: 17px; height: 17px; }
.intro-text-link { display: inline-flex; align-items: center; gap: 20px; color: #484b45; font-size: 14px; font-weight: 500; }
.intro-text-link:hover { color: #bd5c36; text-decoration: none; }
.intro-platform { margin-top: 16px; color: #92948d; font-size: 12px; }
.intro-hero-visual { position: relative; min-width: 0; }
.intro-hero-visual::before { content: ''; position: absolute; inset: -75px 0 0; background: radial-gradient(ellipse at 50% 56%, #eebc9760, #e9d9c937 38%, transparent 68%); pointer-events: none; }
.intro-screen-label, .intro-visual-footer { position: relative; display: flex; justify-content: space-between; gap: 18px; color: #8a8b85; font-size: 11px; }
.intro-screen-label { margin-bottom: 14px; }
.intro-screen-label > span:first-child { display: flex; align-items: center; gap: 9px; color: #5d635c; }
.intro-hero-screen { position: relative; padding: 7px; border: 1px solid #fff; border-radius: 17px; background: #e0ded9; box-shadow: 0 35px 70px -35px #67544777, 0 0 0 1px #292b2b15; }
.intro-hero-screen img { display: block; width: 100%; height: auto; border-radius: 10px; }
.intro-visual-footer { margin-top: 22px; }
.intro-scroll-hint { display: flex; align-items: center; gap: 18px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .intro-kicker { font-size: 10px; gap: 7px; }
  .intro-actions { gap: 16px; }
  .intro-button { font-size: 12px; padding-inline: 18px; gap: 14px; }
  .intro-hero .intro-text-link { font-size: 12px; gap: 10px; }
  .intro-screen-label > span:last-child, .intro-scroll-hint { display: none; }
}
.intro-overview { padding-block: 100px 90px; }
.intro-overview-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 12%; }
.intro-eyebrow { font: 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a76d52; margin-bottom: 24px; }
.intro-overview-copy .intro-eyebrow { grid-column: 1 / -1; }
.intro-overview h2, .intro-section-heading h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 1.12; letter-spacing: -.05em; }
.intro-overview-copy > p:last-child { max-width: 47ch; font-size: 17px; line-height: 1.75; color: #777874; }
.intro-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 55px 0 0; padding: 30px 0 0; border-top: 1px solid #292b2b20; }
.intro-facts > div { padding-inline: 32px; border-left: 1px solid #292b2b15; }
.intro-facts > div:first-child { padding-left: 0; border: 0; }
.intro-facts dt { font-size: clamp(32px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.05em; line-height: 1.2; }
.intro-unit { font-size: .55em; font-weight: 400; letter-spacing: -.025em; color: #92948d; }
.intro-facts dd { margin: 13px 0 0; font-size: 14px; }
.intro-facts dd > span { display: block; margin-top: 6px; font-size: 12px; color: #92948d; }
.intro-look { padding-block: 90px 55px; }
.intro-section-heading { padding-bottom: 35px; }
.intro-section-heading > p:last-child { margin-top: 22px; color: #777874; font-size: 17px; }
.scroll-story { display: grid; grid-template-columns: minmax(0, .31fr) minmax(0, .69fr); column-gap: 5%; position: relative; align-items: start; }
.story-step { display: flex; flex-direction: column; justify-content: center; min-height: max(430px, 65svh); padding-block: 80px; }
.story-step-copy { transition: opacity .35s, transform .35s; }
.story-number { display: block; margin-bottom: 24px; font: 11px/1.5 var(--mono); letter-spacing: .025em; color: #bd5c36; }
.story-step h3 { font-size: clamp(25px, 2.5vw, 37px); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; }
.story-step p { margin-top: 22px; font-size: 15px; line-height: 1.75; color: #777874; max-width: 36ch; }
.story-detail { display: block; margin-top: 28px; padding-top: 17px; border-top: 1px solid #292b2b1c; font-size: 11px; color: #92948d; }
.story-stage { display: none; position: sticky; top: clamp(110px, calc((100svh - var(--story-screen-height, 450px)) / 2), calc(100svh - var(--story-stage-height, 510px) - 24px)); align-self: start; justify-self: center; margin-top: 75px; width: min(100%, calc((100svh - 210px) * 1.6)); }
.story-enhanced .story-stage { display: block; }
.story-enhanced .story-mobile-shot { display: none; }
.story-enhanced .story-step-copy { opacity: .3; transform: translateY(8px); }
.story-enhanced .story-step.is-active .story-step-copy { opacity: 1; transform: none; }
.story-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #e2d7ce; box-shadow: 0 30px 50px -25px #59423545, 0 0 0 5px #e7e6e3, 0 0 0 6px #d4d3cf; }
.story-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity .55s, transform .8s cubic-bezier(.2,.7,.2,1); }
.story-image.is-active { opacity: 1; transform: scale(1); }
.story-mobile-shot { width: 100%; height: auto; border-radius: 10px; margin-top: 30px; }
.story-stage-footer { display: flex; justify-content: space-between; margin-top: 25px; gap: 20px; font: 10px/1.5 var(--mono); color: #767a72; }
.story-total { color: #b0b2ab; }
.story-progress { margin-top: 13px; height: 2px; background: #292b2b12; overflow: hidden; }
.story-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(var(--story-progress, .1)); transform-origin: left; background: #bd5c36; }
.intro-look-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid #292b2b18; font-size: 12px; color: #92948d; }
.intro-boot { color: #f4f1eb; background: #202722; padding-block: 110px 55px; border-radius: 28px 28px 0 0; position: relative; }
.intro-boot .intro-eyebrow { color: #c8aa88; }
.intro-boot .intro-section-heading > p:last-child, .intro-boot .story-step p { color: #a8b1a7; }
.boot-story { grid-template-columns: minmax(0, .62fr) minmax(0, .38fr); column-gap: 8%; }
.boot-story .story-step { min-height: max(370px, 55svh); padding-block: 75px; }
.boot-story .story-stage { margin-top: 65px; }
.intro-boot .story-number { color: #c8aa88; }
.intro-boot .story-detail { color: #859184; border-color: #fff2; }
.intro-boot .story-stage-footer { color: #b4c0b0; }
.intro-boot .story-total { color: #6f7f6e; }
.intro-boot .story-progress { background: #fff1; }
.intro-boot .story-progress > span { background: #bca082; }
.boot-preview { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #ffffff20; border-radius: 14px; background: #121713; box-shadow: 0 30px 70px -30px #0006; }
.boot-preview-wall, .boot-preview-desktop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.boot-preview-desktop { object-fit: contain; background: #121713; }
.boot-preview-firmware, .boot-preview-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .4s; gap: 18px; }
.boot-preview-firmware { font: 18px var(--mono); letter-spacing: .12em; color: #ddd9cd; }
.firmware-symbol { font: 58px/1 var(--ui); color: #a8ba9f; }
.boot-preview-firmware small { font-size: 10px; letter-spacing: 0; color: #7c8e78; margin-top: 12px; }
.boot-preview-splash { opacity: 0; color: #fff; gap: 14px; }
.boot-preview-splash > img { width: clamp(40px, 5vw, 70px); height: auto; }
.boot-preview-splash > span { font-size: 21px; letter-spacing: .3em; padding-left: .3em; }
.boot-preview-splash small { font-size: 11px; color: #fffd; }
.boot-preview-ring { width: 42px; height: 42px; transform: rotate(-90deg); margin-top: 10px; }
.boot-preview-ring circle { fill: none; stroke: #fff4; stroke-width: 4; }
.boot-preview-ring .boot-preview-arc { stroke: #fff; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: calc(201 * (1 - var(--boot-progress, .15))); }
.boot-story[data-active-scene="1"] .boot-preview-splash, .boot-story[data-active-scene="2"] .boot-preview-splash { opacity: 1; }
.boot-story[data-active-scene="1"] .boot-preview-firmware, .boot-story[data-active-scene="2"] .boot-preview-firmware, .boot-story[data-active-scene="3"] .boot-preview-firmware { opacity: 0; }
.boot-story[data-active-scene="2"] .boot-preview-wall, .boot-story[data-active-scene="3"] .boot-preview-desktop { opacity: 1; }
.boot-preview-note { margin-top: 16px; color: #859184; font-size: 10px; }
.intro-boot-footnote { padding-top: 22px; border-top: 1px solid #fff1; color: #859184; font-size: 11px; max-width: 85ch; }
/* JS adds motion only after the page has usable content. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .intro-ready .intro-hero-copy { animation: intro-enter .8s both; }
  .intro-ready .intro-hero-visual { animation: intro-enter 1s .12s both; }
}
@keyframes intro-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1000px) {
  .scroll-story { grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); gap: 5%; }
  .boot-story { grid-template-columns: minmax(0, .56fr) minmax(0, .44fr); gap: 6%; }
  .story-step h3 { font-size: 28px; }
  .story-step p { font-size: 14px; }
  .intro-overview-copy { column-gap: 7%; }
}
@media (max-width: 760px) {
  .intro-nav { height: 68px; gap: 12px; padding-inline: 22px; }
  .intro-nav-links { gap: 20px; }
  .intro-nav-links a:last-child { display: none; }
  .intro-nav .intro-download { padding: 8px 14px; gap: 13px; font-size: 12px; }
  .intro-nav .intro-brand { font-size: 16px; gap: 6px; }
  .intro-brand img { width: 26px; height: 26px; }
  .intro-nav-links a { font-size: 12px; }
  .intro-hero { min-height: 100svh; padding-block: 105px 55px; }
  .intro-hero-layout { display: flex; flex-direction: column; gap: 34px; }
  .intro-hero-copy { width: 100%; text-align: center; }
  .intro-title-break { display: none; }
  .intro-hero h1 { font-size: clamp(39px, 7.8vw, 59px); margin-top: 22px; }
  .intro-hero-lead { margin-top: 22px; font-size: 15px; max-width: 34ch; margin-inline: auto; }
  .intro-kicker { font-size: 10px; gap: 7px; }
  .intro-actions { justify-content: center; gap: 22px; }
  .intro-button { font-size: 12px; padding: 12px 19px; min-height: 46px; gap: 14px; }
  .intro-text-link { font-size: 12px; gap: 12px; }
  .intro-platform { font-size: 10px; }
  .intro-hero-visual { width: 100%; max-width: 600px; order: -1; }
  .intro-screen-label { font-size: 10px; margin-bottom: 12px; }
  .intro-screen-label > span:last-child { display: none; }
  .intro-hero-screen { padding: 4px; border-radius: 10px; }
  .intro-hero-screen img { border-radius: 6px; }
  .intro-visual-footer { font-size: 9px; }
  .intro-scroll-hint { display: none; }
  .intro-overview { padding-block: 60px 40px; }
  .intro-overview-copy { display: block; }
  .intro-eyebrow { font-size: 10px; margin-bottom: 22px; }
  .intro-overview h2, .intro-section-heading h2 { font-size: clamp(32px, 6vw, 44px); }
  .intro-overview-copy > p:last-child { font-size: 15px; margin-top: 25px; }
  .intro-facts { margin-top: 35px; padding-top: 25px; gap: 16px; }
  .intro-facts > div { padding: 0; border: 0; }
  .intro-facts dt { font-size: clamp(26px, 5.3vw, 36px); }
  .intro-facts dd { font-size: 11px; line-height: 1.5; }
  .intro-facts dd > span { display: none; }
  .intro-look { padding-block: 55px 40px; }
  .intro-section-heading { padding-bottom: 35px; }
  .intro-section-heading > p:last-child { font-size: 15px; }
  .scroll-story, .boot-story { display: flex; flex-direction: column; gap: 0; }
  .story-stage, .boot-story .story-stage { order: -1; margin: 0; top: 68px; width: 100%; z-index: 2; padding-block: 18px; background: #faf9f6; }
  .story-stage-footer { margin-top: 14px; font-size: 9px; }
  .story-screen { border-radius: 7px; box-shadow: 0 0 0 3px #e7e6e3, 0 0 0 4px #d4d3cf; }
  .story-steps { width: 100%; }
  .story-step, .boot-story .story-step { min-height: 400px; padding-block: 60px; }
  .story-number { margin-bottom: 19px; }
  .story-step h3 { font-size: 31px; }
  .story-step h3 br { display: none; }
  .story-step p { font-size: 15px; max-width: 44ch; margin-top: 18px; }
  .story-detail { margin-top: 23px; }
  .intro-look-end { align-items: start; flex-direction: column; gap: 16px; font-size: 11px; margin-top: 0; }
  .intro-boot { padding-block: 70px 40px; border-radius: 20px 20px 0 0; }
  .boot-story .story-stage { background: #202722; }
  .boot-preview { aspect-ratio: 16 / 9; border-radius: 10px; }
  .boot-preview-note { font-size: 9px; margin-top: 10px; }
  .boot-preview-firmware { gap: 12px; font-size: 15px; }
  .firmware-symbol { font-size: 40px; }
  .boot-preview-splash { gap: 8px; }
  .boot-preview-splash > img { width: 38px; }
  .boot-preview-splash > span { font-size: 16px; }
  .boot-preview-ring { width: 30px; height: 30px; margin-top: 5px; }
  .boot-preview-splash small { font-size: 10px; }
}
@media (max-width: 380px) {
  .intro-nav-links a:nth-child(2) { display: none; }
  .intro-nav .intro-download { padding: 8px 11px; gap: 8px; }
  .intro-actions { gap: 14px; }
  .intro-button { font-size: 11px; padding-inline: 16px; gap: 10px; white-space: nowrap; }
  .intro-text-link { font-size: 11px; gap: 8px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-hero-screen { transform: none; }
  .story-image, .story-step-copy, .boot-preview-wall, .boot-preview-desktop, .boot-preview-firmware, .boot-preview-splash, .intro-button, .intro-nav { transition: none; }
  .story-image { transform: none; }
}

/* Sunrise from build/teaser/boot.html and kernel/splash.c. The opening
 * cuts a window through the scene to the live page, at its final position. */
.site-splash { display: none; }
html.site-starting body, body.site-booted .intro-hero { overflow-anchor: none; }
html.site-starting .site-splash { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: #fff; }
.site-splash-scene { position: absolute; inset: 0; overflow: hidden; background: #000; }
.site-splash-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
.site-splash-stage div { position: absolute; }
.splash-sky { inset: 0; background: linear-gradient(180deg, #7f99cf 0%, #a8aed6 26%, #e8b6a0 50%, #f6c39a 60%, #fbe0c4 66%); }
.splash-night { inset: 0; background: linear-gradient(180deg, #0a1024 0%, #1d2547 40%, #4a3f63 58%, #8a5a5e 66%); }
.splash-sea { left: 0; right: 0; top: 66%; bottom: 0; background: linear-gradient(180deg, #b9a6b4 0%, #7f84a3 40%, #4d5679 100%); }
.splash-sea-night { left: 0; right: 0; top: 66%; bottom: 0; background: linear-gradient(180deg, #2c2741 0%, #1a1a2e 100%); }
.splash-black { inset: 0; background: #000; }
.splash-sky-clip { left: 0; right: 0; top: 0; height: 66%; overflow: hidden; }
.splash-halo { left: 50%; top: 100%; width: 1500px; height: 1100px; margin: -550px 0 0 -750px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #ffe8c8bf, #ffd6aa59 35%, #ffc8a01a 65%, transparent); }
.splash-sun { left: 810px; top: 100%; width: 300px; height: 300px; border-radius: 66px; background: #fffaf3; }
.splash-reflection { left: 50%; top: 66%; width: 300px; height: 220px; margin-left: -150px; opacity: 0;
  background: repeating-linear-gradient(180deg, #fff0dcd9 0 7px, transparent 7px 18px);
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); filter: blur(1.2px); transform-origin: 50% 0; }
.splash-reflection-wide { left: 50%; top: 66%; width: 560px; height: 360px; margin-left: -280px; opacity: 0;
  background: repeating-linear-gradient(180deg, #ffe2c473 0 3px, transparent 3px 22px);
  -webkit-mask: radial-gradient(closest-side at 50% 0, #000, transparent); mask: radial-gradient(closest-side at 50% 0, #000, transparent); }
.splash-horizon { left: 0; right: 0; top: 66%; height: 2px; background: #fff5ebb3; opacity: 0; }
.splash-star { left: 770px; top: 327.8px; width: 0; height: 0; opacity: 0; }
.splash-star-halo { left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, #4682fa6b, #5087fa24 45%, transparent); }
.splash-star-flash { left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #e1ecffe6, #78aaff73 22%, #5087fa1f 55%, transparent); }
.splash-star-core { left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #a9c8ff 60%, #508cff00 100%); box-shadow: 0 0 10px 3px #5a96ffd9, 0 0 28px 8px #3c78fa59; }
.splash-star-rays { left: -46px; top: -46px; width: 92px; height: 92px; }
.splash-star-rays i { position: absolute; display: block; }
.splash-star-rays i:first-child { left: 0; top: 45.5px; width: 92px; height: 1px; background: linear-gradient(90deg, transparent, #ebf2ffe6, transparent); }
.splash-star-rays i:last-child { left: 45.5px; top: 0; width: 1px; height: 92px; background: linear-gradient(0deg, transparent, #ebf2ffe6, transparent); }
.splash-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.site-splash-window { display: none; position: absolute; background: #fffaf3; pointer-events: none; }
.site-splash-skip { position: absolute; right: max(22px, env(safe-area-inset-right)); top: max(22px, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 16px; padding: 9px 15px; border-radius: 24px; border: 1px solid #ffffff30; background: #0000000d; color: #fff; cursor: pointer; font: 400 11px/1.5 var(--ui); backdrop-filter: blur(10px); }
.site-splash-skip:hover { background: #ffffff20; }
.site-splash-skip:focus-visible { outline-color: #fff; }
.intro-ready.site-booted .intro-hero-copy, .intro-ready.site-booted .intro-hero-visual { animation: none; }
@media (prefers-reduced-motion: reduce) { html.site-starting .site-splash { display: none; } }