/* ORA public site — responsive editorial layout, September 2026. */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
.landing-body { font-family: "Onest", sans-serif; -webkit-font-smoothing: antialiased; }
.ora-site { --site-orange: var(--ora-orange); --site-rule: var(--ora-rule); --site-blue: var(--ora-blue); --site-action-hover: #edbd37; }
.ora-site button, .ora-site a { -webkit-tap-highlight-color: transparent; }
.ora-site button { font: inherit; }
.ora-site a { color: inherit; }
.ora-site :focus-visible { outline: 2px solid var(--site-blue); outline-offset: 5px; }
.ora-site ::selection { background: var(--ora-yellow); color: var(--ora-graphite); }
.ora-site figure, .ora-site p { margin: 0; }
.ora-site h1, .ora-site h2, .ora-site h3 { font-family: "Manrope", sans-serif; }
.page-width { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 16px 24px; background: var(--ora-graphite); color: var(--ora-ivory) !important; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 100px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--site-rule); }
.site-brand { display: inline-flex; align-items: baseline; text-decoration: none; font-family: "Manrope", sans-serif; font-size: 37px; font-weight: 800; letter-spacing: -.075em; line-height: 1; }
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--site-orange); margin-left: 5px; }
.site-byline { max-width: 160px; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.5; text-transform: uppercase; color: var(--ora-muted); }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 13px; }
.site-nav a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.site-nav a:hover, .site-footer a:hover { color: var(--site-blue); }
.locale-switcher { display: flex; align-items: center; border-left: 1px solid var(--site-rule); padding-left: 16px; }
.locale-switcher__link { display: grid; place-items: center; min-width: 40px; min-height: 44px; font-family: "IBM Plex Mono", monospace; font-size: 11px; text-decoration: none; color: var(--ora-muted) !important; }
.locale-switcher__link:hover { color: var(--site-blue) !important; }
.locale-switcher__link[aria-current="page"] { background: var(--ora-yellow); color: var(--ora-graphite) !important; border-radius: 5px; }
.hero { display: grid; grid-template-columns: 1.06fr 1fr; gap: 24px; align-items: center; padding-block: 72px 60px; }
.hero-copy { position: relative; z-index: 1; padding-block: 20px; }
.eyebrow { display: flex; align-items: center; gap: 16px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.6; letter-spacing: .045em; text-transform: uppercase; color: var(--site-blue); }
.eyebrow > span:not(.status-dot) { color: var(--site-blue); }
.status-dot, .tiny-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-dot { background: var(--site-orange); }
.hero h1 { margin: 30px 0 28px; font-size: clamp(48px, 5.2vw, 78px); font-weight: 800; letter-spacing: -.065em; line-height: 1.04; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: var(--site-blue); }
.hero-lede { max-width: 440px; font-size: 18px; line-height: 1.6; color: var(--ora-muted); text-wrap: pretty; }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-buttons--hero { margin-top: 32px; }
.store-button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 194px; min-height: 66px; padding: 11px 16px; border: 1px solid var(--ora-yellow); border-radius: 5px; background: var(--ora-yellow); color: var(--ora-graphite); cursor: pointer; text-align: left; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.store-button:hover { background: var(--site-action-hover); border-color: var(--site-action-hover); transform: translateY(-2px); box-shadow: 0 6px 12px rgb(36 59 53 / 10%); }
.store-button:active { transform: translateY(0); }
.store-button .device-icon { width: 27px; height: 30px; flex-shrink: 0; }
.store-button__copy { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.store-button__copy > span { font-size: 10px; line-height: 1.3; }
.store-button__copy strong { font-size: 21px; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.store-button__arrow { font-size: 18px; margin-left: auto; padding-left: 12px; opacity: .6; }
.release-note { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; font-size: 11px; color: var(--ora-muted); }
.release-note .tiny-dot { width: 5px; height: 5px; color: var(--site-orange); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 44px; text-decoration: none; font-size: 13px; }
.text-link span { color: var(--site-blue); font-size: 22px; }
.hero-explore { margin-top: 25px; }
.hero-art { position: relative; min-width: 0; height: 660px; isolation: isolate; }
.hero-art__paper { position: absolute; inset: 35px 0 44px 60px; background: var(--ora-yellow); color: var(--ora-graphite); overflow: hidden; transform: rotate(4deg); }
.hero-art__edition { position: absolute; top: 28px; right: 25px; font-size: 34px; font-family: "Manrope", sans-serif; letter-spacing: -.055em; font-weight: 700; }
.hero-art__rule { position: absolute; left: 26px; right: 26px; top: 85px; height: 1px; background: rgb(36 59 53 / 35%); }
.hero-art__type { position: absolute; top: 105px; right: 28px; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.7; }
.hero-art__bottom { position: absolute; right: 28px; bottom: 26px; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.hero-art__circle { position: absolute; width: 410px; height: 410px; border: 1px solid rgb(36 59 53 / 28%); border-radius: 50%; right: -200px; top: 150px; }
.hero-art__circle::after { content: ""; position: absolute; inset: 36px; border: 1px solid rgb(36 59 53 / 18%); border-radius: 50%; }
.phone-frame { width: 278px; padding: 6px; border: 1px solid #777671; border-radius: 39px; background: #272726; box-shadow: 18px 28px 50px rgb(36 35 33 / 22%), 0 2px 3px rgb(36 35 33 / 22%); }
.app-screen { display: block; width: 100%; height: auto; border-radius: 32px; }
.hero-phone { position: absolute; z-index: 1; left: 23%; top: 0; transform: rotate(-7deg); animation: phone-arrive .8s cubic-bezier(.2,.7,.3,1) both; }
.hero-art__caption { display: flex; align-items: center; gap: 8px; position: absolute; bottom: 2px; left: 25px; color: var(--ora-muted); font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; }
.hero-art__caption .tiny-dot { color: var(--site-orange); width: 5px; height: 5px; }
.hero-art__index { position: absolute; bottom: 2px; right: 0; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ora-muted); }
.product-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 27px; border-top: 1px solid var(--site-rule); }
.product-strip p { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.strip-number { color: var(--site-blue); font: 10px "IBM Plex Mono", monospace; }
.strip-platforms { color: var(--ora-muted); font: 11px "IBM Plex Mono", monospace; white-space: nowrap; }
.experience { padding-block: 104px; background: var(--site-blue); color: var(--ora-ivory-raised); }
.experience-inner { display: grid; grid-template-columns: .88fr 1fr; align-items: center; gap: 88px; }
.experience .eyebrow { color: var(--ora-ivory-raised); }
.experience .eyebrow > span { padding: 3px 7px; border-radius: 3px; background: var(--ora-yellow); color: var(--ora-graphite); }
.ora-site h2 { margin: 24px 0; font-size: clamp(36px, 3.8vw, 56px); font-weight: 700; line-height: 1.09; letter-spacing: -.055em; text-wrap: balance; }
.section-lede { font-size: 17px; line-height: 1.7; color: var(--ora-muted); text-wrap: pretty; }
.experience .section-lede { color: var(--ora-ivory-raised); max-width: 400px; }
.mechanism-specs { display: flex; gap: 52px; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgb(255 253 243 / 35%); }
.mechanism-specs > div { display: flex; flex-direction: column; gap: 10px; }
.mechanism-specs strong { font-family: "IBM Plex Mono", monospace; font-size: 29px; font-weight: 500; letter-spacing: -.06em; color: var(--ora-yellow); }
.mechanism-specs strong span { font-size: 18px; color: var(--ora-ivory-raised); }
.mechanism-specs > div > span { color: var(--ora-ivory-raised); font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.mechanism-figure { position: relative; padding: 26px 26px 24px; background: var(--ora-ivory); color: var(--ora-graphite); transform: rotate(2deg); }
.mechanism-figure__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--site-rule); font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; }
.mechanism-figure__heading > span:first-child { font-size: 16px; font-weight: 700; }
.mechanism-drawing { position: relative; aspect-ratio: 900 / 620; margin: 10px -16px 2px; }
.mechanism-figure figcaption { display: flex; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--site-rule); color: var(--ora-muted); font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.6; }
.mechanism-figure figcaption .tiny-dot { color: var(--site-orange); margin-top: 5px; width: 5px; height: 5px; }
.turntable { position: absolute; inset: 0; }
.turntable__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.turntable__hatching { position: absolute; top: 11.2903%; left: 7.7778%; width: 87.7778%; height: 77.4194%; opacity: .62; mask-image: var(--hatching-mask); mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; }
.turntable__hatching-lines, .turntable__hatching-edge { position: absolute; display: block; }
.turntable__hatching-lines { top: 87.5%; left: 6.0759%; width: 96.7389%; height: 6.0362%; }
.turntable__hatching-edge { top: 77.9167%; left: 6.8354%; width: 89.6286%; height: 15.5828%; }
.turntable__signal { position: absolute; display: block; pointer-events: none; }
.turntable__signal--label { top: 42.2581%; left: 32.4444%; width: 14%; height: 15.4839%; }
.turntable__signal--core { top: 48.2258%; left: 37.8889%; width: 3.1111%; height: 3.5484%; }
.turntable__signal--spindle { top: 49.5161%; left: 39%; width: .8889%; height: .9677%; }
.turntable__signal--quartz { top: 61.9355%; left: 87%; width: 1.3333%; height: 1.9355%; }
.collection { display: grid; grid-template-columns: 1fr .95fr; gap: 110px; align-items: center; padding-block: 116px; }
.collection-art { position: relative; height: 640px; min-width: 0; background: var(--site-blue); overflow: hidden; }
.collection-art::before { content: ""; position: absolute; left: 24px; top: 24px; width: 30px; height: 2px; background: var(--site-orange); }
.collection-art__disc { position: absolute; width: 405px; top: 85px; right: -110px; transform: rotate(18deg); }
.collection-art__disc img { display: block; width: 100%; height: auto; }
.library-phone { position: absolute; width: 252px; left: 13%; top: 36px; transform: rotate(-5deg); box-shadow: 14px 22px 38px rgb(36 35 33 / 18%); }
.collection-art figcaption { position: absolute; bottom: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--ora-ivory-raised); }
.collection-features { margin: 30px 0 0; }
.collection-features > div { padding-block: 18px; border-top: 1px solid var(--site-rule); }
.collection-features dt { display: flex; align-items: center; gap: 18px; font-size: 16px; font-weight: 600; }
.collection-features dt span { color: var(--site-blue); font: 10px "IBM Plex Mono", monospace; }
.collection-features dd { margin: 7px 0 0 31px; color: var(--ora-muted); font-size: 14px; line-height: 1.6; }
.format-list { margin-top: 24px !important; color: var(--site-blue); font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.8; letter-spacing: .04em; }
.download-section { padding-block: 86px 62px; background: var(--ora-yellow); }
.download-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 90px; align-items: end; margin-bottom: 40px; }
.download-heading h2 { margin-bottom: 0; }
.download-heading .section-lede { max-width: 340px; }
.download-heading .eyebrow, .download-heading .eyebrow > span, .download-heading .section-lede { color: var(--ora-graphite); }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.platform-card { display: flex; flex-direction: column; padding: 34px; background: var(--ora-ivory-raised); border-top: 3px solid var(--site-blue); }
.platform-card--macos { border-top-color: var(--site-orange); }
.platform-card__top { display: flex; align-items: center; gap: 13px; }
.platform-card__top > .device-icon { width: 27px; height: 27px; color: var(--site-blue); }
.platform-card--macos .platform-card__top > .device-icon { color: var(--ora-graphite); }
.platform-card__name { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.platform-card__status { margin-left: auto; color: var(--ora-muted); font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; }
.platform-card h3 { margin: 29px 0 12px; font-size: 31px; font-weight: 700; letter-spacing: -.04em; }
.platform-card__body { flex-grow: 1; max-width: 410px; font-size: 15px; line-height: 1.65; color: var(--ora-muted); }
.platform-card__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 32px; }
.platform-card__requirements { max-width: 160px; color: var(--ora-muted); font: 10px/1.8 "IBM Plex Mono", monospace; }
.download-footnote { margin-top: 22px !important; font-size: 12px; line-height: 1.6; color: var(--ora-graphite); }
.site-footer { padding-block: 44px; display: flex; align-items: center; gap: 40px; }
.footer-signature { display: flex; align-items: center; gap: 24px; }
.footer-signature .site-brand { font-size: 32px; }
.footer-signature > span { max-width: 160px; color: var(--ora-muted); font: 10px/1.6 "IBM Plex Mono", monospace; text-transform: uppercase; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: none; }
.site-footer > p { font: 10px "IBM Plex Mono", monospace; color: var(--ora-muted); white-space: nowrap; }
@keyframes phone-arrive { from { opacity: 0; transform: translateY(18px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(-7deg); } }
@media (min-width: 1450px) { .hero { padding-block: 85px 70px; } .hero h1 { font-size: 80px; } .hero-art { height: 690px; } .hero-phone { width: 292px; left: 26%; } }
@media (max-width: 1150px) {
  .page-width { width: calc(100% - 72px); }
  .site-header { gap: 20px; }
  .site-byline { display: none; }
  .site-nav { gap: 22px; }
  .hero { padding-block: 52px 42px; grid-template-columns: 1.12fr 1fr; }
  .hero h1 { font-size: clamp(48px, 5.4vw, 65px); }
  .hero-art { height: 584px; }
  .hero-phone { width: 242px; left: 16%; top: 4px; }
  .hero-art__paper { left: 32px; top: 30px; bottom: 43px; }
  .hero-art__edition { font-size: 27px; }
  .hero-art__type { top: 94px; }
  .hero-art__rule { top: 77px; }
  .hero-art__caption { left: 0; max-width: 230px; font-size: 9px; }
  .hero-art__index { display: none; }
  .hero-lede { font-size: 17px; }
  .store-button { min-width: 180px; padding: 10px 12px; gap: 10px; }
  .store-button__arrow { padding-left: 4px; }
  .experience-inner { gap: 42px; }
  .collection { gap: 55px; }
  .collection-art { height: 604px; }
  .library-phone { width: 235px; left: 9%; }
  .download-heading { gap: 40px; }
  .platform-card { padding: 28px; }
}
@media (max-width: 900px) {
  .site-header { min-height: 88px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(54px, 8.1vw, 74px); margin-block: 26px; }
  .hero-lede { max-width: 520px; font-size: 18px; }
  .hero-explore { margin-top: 14px; }
  .hero-art { width: min(590px, 100%); height: 620px; margin-inline: auto !important; }
  .hero-phone { width: 262px; left: 26%; }
  .hero-art__paper { inset: 26px 12px 50px 50px; }
  .hero-art__caption { max-width: none; left: 30px; }
  .product-strip { flex-wrap: wrap; gap: 20px; }
  .product-strip p { font-size: 12px; gap: 10px; }
  .strip-platforms { display: none; }
  .experience { padding-block: 70px; }
  .experience-inner { grid-template-columns: 1fr; gap: 44px; }
  .experience-copy { max-width: 580px; }
  .experience .section-lede { max-width: 550px; }
  .mechanism-specs { max-width: 500px; }
  .mechanism-figure { width: min(600px, calc(100% - 12px)); margin: 0 auto !important; }
  .collection { grid-template-columns: 1fr; gap: 44px; padding-block: 76px; }
  .collection-copy { grid-row: 1; max-width: 580px; }
  .collection-art { height: 628px; width: min(580px, 100%); margin: 0 auto !important; }
  .library-phone { width: 250px; left: 18%; }
  .collection-art__disc { right: -40px; }
  .download-heading { grid-template-columns: 1fr; gap: 22px; }
  .download-heading .section-lede { max-width: 540px; }
  .platform-card h3 { font-size: 27px; }
  .platform-card__requirements { max-width: none; }
  .platform-card__bottom { gap: 14px; }
  .site-footer { flex-wrap: wrap; gap: 24px; }
  .footer-signature { flex: 1 1 100%; }
  .site-footer nav { margin-left: 0; margin-right: auto; }
}
@media (max-width: 600px) {
  .page-width { width: calc(100% - 40px); }
  .site-header { min-height: 80px; gap: 12px; }
  .site-brand { font-size: 32px; }
  .site-nav { display: none; }
  .locale-switcher { margin-left: auto; border: 0; padding: 0; }
  .locale-switcher__link { min-width: 38px; }
  .hero { padding-block: 35px 32px; gap: 28px; }
  .eyebrow { font-size: 10px; gap: 12px; }
  .hero h1 { font-size: clamp(34px, 9.8vw, 58px); letter-spacing: -.06em; line-height: 1.08; margin-block: 22px; }
  .hero-lede { font-size: 16px; line-height: 1.65; }
  .store-buttons { gap: 10px; }
  .store-buttons--hero { margin-top: 24px; }
  .store-buttons--hero .store-button { flex: 1 1 140px; min-width: 0; min-height: 64px; padding: 10px; gap: 9px; }
  .store-buttons--hero .device-icon { width: 23px; }
  .store-buttons--hero .store-button__copy strong { font-size: 19px; }
  .store-buttons--hero .store-button__copy > span { font-size: 9px; }
  .store-buttons--hero .store-button__arrow { display: none; }
  .release-note { font-size: 10px; line-height: 1.5; }
  .hero-explore { font-size: 12px; margin-top: 12px; }
  .hero-art { height: 520px; width: 100%; }
  .hero-phone { width: 214px; top: 4px; left: calc(50% - 103px); border-radius: 31px; padding: 5px; }
  .hero-phone .app-screen { border-radius: 25px; }
  .hero-art__paper { inset: 26px 7px 47px 19px; }
  .hero-art__edition { right: 15px; top: 24px; font-size: 16px; }
  .hero-art__rule { left: 15px; right: 15px; top: 64px; }
  .hero-art__type { display: none; }
  .hero-art__bottom { right: 16px; bottom: 17px; font-size: 9px; }
  .hero-art__caption { bottom: 9px; left: 7px; font-size: 9px; }
  .product-strip { display: grid; grid-template-columns: 1fr; padding-block: 23px; gap: 15px; }
  .product-strip p { font-size: 12px; gap: 18px; }
  .experience { padding-block: 52px; }
  .ora-site h2 { font-size: 37px; margin-block: 20px; letter-spacing: -.05em; }
  .section-lede { font-size: 16px; }
  .experience-inner { gap: 36px; }
  .mechanism-specs { gap: 38px; margin-top: 28px; padding-top: 22px; }
  .mechanism-specs strong { font-size: 26px; }
  .mechanism-specs > div > span { font-size: 9px; }
  .mechanism-figure { padding: 18px 16px; transform: rotate(1.5deg); }
  .mechanism-figure__heading { font-size: 8px; }
  .mechanism-figure__heading > span:first-child { font-size: 14px; }
  .mechanism-figure figcaption { font-size: 9px; }
  .collection { padding-block: 54px; gap: 30px; }
  .collection-features dt { font-size: 15px; }
  .collection-features dd { font-size: 14px; }
  .collection-art { height: 548px; }
  .library-phone { width: 214px; left: 11%; top: 32px; border-radius: 31px; padding: 5px; }
  .library-phone .app-screen { border-radius: 25px; }
  .collection-art__disc { width: 305px; right: -110px; top: 85px; }
  .collection-art figcaption { left: 18px; right: 18px; bottom: 19px; font-size: 9px; }
  .download-section { padding-block: 54px 40px; }
  .download-heading { gap: 4px; margin-bottom: 28px; }
  .platform-grid { grid-template-columns: 1fr; gap: 16px; }
  .platform-card { padding: 24px; }
  .platform-card h3 { font-size: 28px; margin-top: 22px; }
  .platform-card__body { font-size: 14px; }
  .platform-card__bottom { margin-top: 25px; }
  .platform-card .store-button { min-width: 190px; }
  .download-footnote { font-size: 11px; }
  .site-footer { padding-block: 34px; gap: 16px; }
  .site-footer nav { gap: 18px; }
  .site-footer nav a { font-size: 11px; }
  .site-footer > p { flex: 1 1 100%; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-phone { animation: none; }
  .store-button { transition: none; }
  .store-button:hover { transform: none; }
}

/* The assembly belongs to the mechanism figure, independently of hero motion. */
.assembly-replay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-blue);
  font-size: 11px !important;
  cursor: pointer;
}
.assembly-replay[hidden] { display: none; }
.assembly-replay > span { font-size: 20px; }
.assembly-replay:hover { color: var(--ora-graphite); }
.assembly-replay:disabled { opacity: .45; cursor: default; }
.assembly-pending .assembly-layer:not(.assembly-axes) { opacity: 0; }
.assembly-chassis { --assembly-delay: 1800ms; --assembly-duration: 1050ms; }
.assembly-platter { --assembly-delay: 3060ms; --assembly-duration: 1140ms; }
.assembly-material { --assembly-delay: 5160ms; --assembly-duration: 900ms; }
.assembly-archive { --assembly-delay: 5820ms; --assembly-duration: 780ms; }
.assembly-spindle { --assembly-delay: 6000ms; --assembly-duration: 690ms; }
.assembly-quartz { --assembly-delay: 6510ms; --assembly-duration: 690ms; }
.assembly-playing .assembly-fade {
  animation: assembly-layer-in var(--assembly-duration) ease-out var(--assembly-delay) both;
}
.assembly-playing .assembly-hatching {
  animation: assembly-hatching-in 1500ms ease-out 4860ms both;
}
.assembly-playing .draw-path {
  animation: assembly-stroke var(--draw-duration) linear var(--draw-delay) both;
}
.assembly-playing .draw-path--dashed { animation-name: assembly-dashed; }
.assembly-playing .draw-fill {
  animation: assembly-fill 540ms ease-out var(--fill-delay) both;
}
.assembly-playing .draw-path.draw-fill {
  animation:
    assembly-stroke var(--draw-duration) linear var(--draw-delay) both,
    assembly-fill 540ms ease-out var(--fill-delay) both;
}
.assembly-playing .draw-path--dashed.draw-fill { animation-name: assembly-dashed, assembly-fill; }
@keyframes assembly-layer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes assembly-hatching-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: .62; clip-path: inset(0); }
}
@keyframes assembly-stroke {
  0% { visibility: hidden; stroke-dasharray: 0 1; stroke-dashoffset: 0; }
  0.01% { visibility: visible; }
  100% { visibility: visible; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}
@keyframes assembly-dashed {
  from { opacity: 0; }
  to { opacity: var(--path-opacity, 1); }
}
@keyframes assembly-fill {
  from { fill-opacity: 0; }
  to { fill-opacity: var(--fill-opacity, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .mechanism-figure .assembly-layer,
  .mechanism-figure .draw-path,
  .mechanism-figure .draw-fill { animation: none; }
  .assembly-pending .assembly-layer { opacity: 1; }
  .assembly-pending .assembly-hatching { opacity: .62; }
  .assembly-replay { display: none; }
}

/* Japanese headings need room for full-width glyphs and natural line breaks. */
html:lang(ja) .landing-body { font-family: "Onest", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; line-break: strict; }
html:lang(ja) .ora-site h1,
html:lang(ja) .ora-site h2,
html:lang(ja) .ora-site h3 { font-family: "Manrope", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; letter-spacing: 0; line-height: 1.3; }
html:lang(ja) .hero-lede,
html:lang(ja) .section-lede { line-height: 1.9; }
.locale-switcher__link[lang="ja"] { min-width: 50px; }

.store-button { text-decoration: none; }