:root {
  color-scheme: light;
  --ink: #07314e;
  --muted: #526d7d;
  --paper: #fffdf5;
  --sky: #e6f7ff;
  --mint: #d8f8ef;
  --aqua: #1bbf9e;
  --blue: #1767e8;
  --gold: #ffb703;
  --line: rgba(7, 49, 78, 0.14);
  --shadow: 0 28px 70px rgba(7, 49, 78, 0.16);
  --display: "Avenir Next", "Trebuchet MS", "PingFang SC", sans-serif;
  --body: "Nunito", "Avenir Next", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; }
.nav { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 20px; font-weight: 900; }
.brand-wordmark { position: relative; padding: 3px 1px 8px; font-size: 23px; letter-spacing: .16em; line-height: 1; text-shadow: 0 2px 16px rgba(0, 0, 0, .14); }
.brand-wordmark::after { content: ""; position: absolute; right: 1px; bottom: 0; left: 1px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, #8df0db 24%, #fff 65%, transparent); opacity: .82; transform: scaleX(.72); transform-origin: center; transition: transform .25s ease, opacity .25s ease; }
.brand-wordmark:hover::after { opacity: 1; transform: scaleX(1); }
.brand img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 8px 20px rgba(7, 49, 78, .15); }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: linear-gradient(145deg, var(--aqua), var(--blue)); border-radius: 13px; font-family: var(--display); font-size: 22px; font-weight: 900; box-shadow: 0 8px 20px rgba(7, 49, 78, .15); }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 750; }
.nav-links a:not(.nav-button) { border-bottom: 2px solid transparent; }
.nav-links a:not(.nav-button):hover { border-color: var(--aqua); }
.nav-button { padding: 10px 18px; color: #fff; background: var(--ink); border-radius: 999px; }

.hero { position: relative; min-height: 790px; padding-top: 120px; overflow: hidden; background: linear-gradient(135deg, #fff8d5 0%, #e3fbf5 47%, #d9efff 100%); }
.hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -170px; top: -190px; border: 1px solid rgba(23, 103, 232, .14); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.16), 0 0 0 140px rgba(255,255,255,.12); }
.hero-grid { min-height: 670px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 80px; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; }
h1 { margin: 0; font-size: clamp(52px, 7vw, 82px); line-height: 1.08; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-copy > p:not(.kicker) { max-width: 610px; margin: 26px 0 0; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.primary-button { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 23px; color: #fff; background: var(--ink); border-radius: 15px; font-weight: 850; box-shadow: 0 13px 30px rgba(7,49,78,.2); }
.primary-button svg { width: 25px; fill: currentColor; }
.text-link { font-weight: 850; border-bottom: 1px solid currentColor; }
.release-note { margin-top: 15px !important; font-size: 12px !important; }

.hero-art { position: relative; min-height: 590px; display: grid; place-items: center; }
.orbit { position: absolute; width: 510px; height: 510px; border: 2px dashed rgba(7,49,78,.15); border-radius: 50%; animation: spin 30s linear infinite; }
.logo-card { position: relative; z-index: 2; width: min(390px, 85vw); padding: 28px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: 54px; box-shadow: var(--shadow); backdrop-filter: blur(14px); transform: rotate(2deg); animation: arrive .8s ease-out both; }
.logo-card img { border-radius: 34px; }
.word-chip { position: absolute; z-index: 3; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-family: var(--display); font-weight: 900; box-shadow: 0 12px 25px rgba(7,49,78,.12); }
.chip-one { left: 0; top: 125px; transform: rotate(-7deg); }
.chip-two { right: -5px; bottom: 125px; transform: rotate(7deg); color: var(--blue); }

.proof { border-block: 1px solid var(--line); background: #fff; }
.proof-grid { min-height: 100px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; }
.proof-grid div + div { border-left: 1px solid var(--line); }
.proof strong { display: block; font-family: var(--display); font-size: 18px; }
.proof span { color: var(--muted); font-size: 13px; }

.section { padding: 112px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.section-heading h2, .steps-copy h2, .download-copy h2 { max-width: 720px; margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.15; }
.section-intro { max-width: 660px; margin: 22px 0 0; color: var(--muted); font-size: 17px; }
.app-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; }
.app-card { position: relative; min-height: 390px; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: #fff; overflow: hidden; }
.app-card-live { color: #fff; background: linear-gradient(145deg, #0a405f, #1767e8); box-shadow: 0 24px 55px rgba(23,103,232,.2); }
.app-card-live::after { content: ""; position: absolute; right: -80px; bottom: -110px; width: 250px; height: 250px; border: 38px solid rgba(255,255,255,.08); border-radius: 50%; }
.app-card img, .future-icon { width: 88px; height: 88px; margin-bottom: 35px; border-radius: 24px; }
.app-card img { box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.future-icon { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #dd6c55, #8d3038); font-family: "Songti SC", "STSong", serif; font-size: 38px; font-weight: 900; box-shadow: 0 16px 30px rgba(141,48,56,.16); }
.idiom-icon { background: linear-gradient(145deg, #ecb64c, #bd6926); }
.app-status { display: block; margin-bottom: 8px; color: var(--aqua); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.app-card-live .app-status { color: #8df0db; }
.app-card h3 { margin: 0 0 10px; font-size: 29px; }
.app-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.app-card-live p { color: rgba(255,255,255,.72); }
.app-card a { position: relative; z-index: 2; font-weight: 850; }
.app-card-coming { background: linear-gradient(155deg, #fff, #fffaf0); }
.coming-note { color: var(--muted); font-size: 12px; font-weight: 800; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 390px; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: #fff; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.feature-card:hover { transform: translateY(-7px); box-shadow: 0 20px 50px rgba(7,49,78,.1); }
.card-number { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.feature-card h3 { margin: 25px 0 10px; font-size: 25px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }
.mini-scene { height: 180px; margin: 28px -28px -28px; padding: 22px; background: var(--sky); }
.falling-words { display: flex; justify-content: space-around; align-items: flex-start; height: 100%; }
.falling-words b { padding: 8px 12px; color: #fff; background: var(--blue); border-radius: 10px; box-shadow: 0 8px 16px rgba(23,103,232,.2); }
.falling-words b:nth-child(2) { margin-top: 48px; background: var(--aqua); }
.falling-words b:nth-child(3) { margin-top: 88px; background: var(--ink); }
.levels { display: flex; gap: 12px; align-items: center; justify-content: center; height: 100%; }
.levels b { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--aqua); border-radius: 50%; }
.levels b + b::before { content: ""; position: absolute; width: 12px; margin-left: -60px; border-top: 2px dashed rgba(7,49,78,.25); }
.score { display: grid; place-items: center; height: 100%; }
.score strong { font-family: var(--display); font-size: 50px; color: var(--blue); }

.steps-section { color: #fff; background: var(--ink); background-image: radial-gradient(circle at 16% 20%, rgba(27,191,158,.18), transparent 30%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: auto, 42px 42px, 42px 42px; }
.steps-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; }
.steps-copy p { color: rgba(255,255,255,.65); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); }
.steps li > span { display: grid; place-items: center; width: 52px; height: 52px; color: var(--gold); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-weight: 900; }
.steps h3 { margin: 0 0 6px; font-size: 22px; }
.steps p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; }

.download-card { position: relative; display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 55px; min-height: 440px; padding: 60px 8%; border-radius: 34px; background: linear-gradient(135deg, #fff2b7, #bff3e6); overflow: hidden; }
.download-copy > img { width: 68px; height: 68px; margin-bottom: 25px; border-radius: 19px; }
.download-copy p { color: var(--muted); }
.qr-placeholder { position: relative; z-index: 2; padding: 34px 22px; text-align: center; background: #fff; border-radius: 22px; box-shadow: var(--shadow); transform: rotate(2deg); }
.qr-placeholder .mark { display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 18px; border: 2px dashed var(--line); border-radius: 16px; font-size: 48px; }
.qr-placeholder small { color: var(--muted); }

footer { padding: 42px 0; border-top: 1px solid var(--line); background: #fff; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img, .footer-brand .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.footer-brand div { display: flex; flex-direction: column; }
.ministep-brand-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ministep-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(23,103,232,.16); border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1767e8, #1bbf9e); box-shadow: 0 8px 18px rgba(23,103,232,.18); font-family: "Songti SC", "STSong", serif; font-size: 24px; font-weight: 900; }
.ministep-brand-copy { display: flex; flex-direction: column; }
.ministep-brand-copy strong { line-height: 1.2; }
.ministep-brand-copy small { color: var(--muted); font-size: 12px; }
.ministep-brand-link:hover .ministep-brand-mark { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(23,103,232,.24); }
.ministep-brand-link:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; border-radius: 14px; }
.ministep-brand-mark { transition: transform .2s ease, box-shadow .2s ease; }
.ministep-doc-footer { margin-top: 0; }
.footer-brand small, .footer-meta { color: var(--muted); font-size: 12px; }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.footer-meta a:hover { color: var(--blue); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); font-size: 13px; }
.footer-links a:hover, .doc-body a:hover { color: var(--blue); }

/* Brand homepage */
.brand-home { background: #f7f4e9; }
.brand-header { color: #fff; }
.brand-header .brand-mark { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); box-shadow: none; backdrop-filter: blur(12px); }
.brand-header .nav-button { color: var(--ink); background: #fff; }
.brand-hero { color: #fff; background: #0a405f; overflow: hidden; }
.brand-slider { position: relative; }
.brand-track { display: flex; width: 100%; transition: transform .75s cubic-bezier(.75,0,.2,1); }
.brand-slide { flex: 0 0 100%; min-width: 0; overflow: hidden; }
.brand-slide-inner { min-height: 790px; padding-top: 120px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.brand-slide-copy { position: relative; z-index: 3; }
.brand-slide-copy h1 { font-size: clamp(54px, 7vw, 88px); }
.brand-slide-copy h1 em { color: #8df0db; }
.brand-slide-copy > p:not(.kicker) { max-width: 590px; margin: 26px 0 0; color: rgba(255,255,255,.7); font-size: 18px; }
.brand-slide-copy .kicker { color: #8df0db; }
.brand-slide-copy .primary-button { color: var(--ink); background: #fff; }
.brand-slide-copy .text-link { color: rgba(255,255,255,.86); }
.slide-words { background: radial-gradient(circle at 82% 28%, rgba(141,240,219,.24), transparent 28%), linear-gradient(130deg, #07314e, #0d5a7b); }
.slide-poems { background: radial-gradient(circle at 78% 20%, rgba(255,235,184,.21), transparent 25%), linear-gradient(130deg, #5d2530, #9b4f43); }
.slide-idioms { background: radial-gradient(circle at 82% 20%, rgba(255,223,134,.2), transparent 27%), linear-gradient(130deg, #49341c, #a65b23); }
.slide-poems .brand-slide-copy h1 em, .slide-poems .brand-slide-copy .kicker { color: #ffd9a1; }
.slide-idioms .brand-slide-copy h1 em, .slide-idioms .brand-slide-copy .kicker { color: #ffca62; }
.slide-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.slide-visual::before { content: ""; position: absolute; width: 470px; height: 470px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.035), 0 0 0 130px rgba(255,255,255,.025); }
.slide-app-icon, .future-app-icon { position: relative; z-index: 2; width: min(350px, 78vw); aspect-ratio: 1; padding: 25px; border: 1px solid rgba(255,255,255,.27); border-radius: 52px; background: rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.25); backdrop-filter: blur(18px); transform: rotate(2deg); }
.slide-app-icon img { border-radius: 32px; }
.future-app-icon { display: grid; place-items: center; color: #fff7dc; background: rgba(255,255,255,.1); font-family: "Songti SC", "STSong", serif; font-size: 140px; font-weight: 900; }
.float-token, .poem-line { position: absolute; z-index: 3; padding: 10px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; background: rgba(255,255,255,.9); color: var(--ink); font-weight: 900; box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.token-a { left: 1%; top: 18%; transform: rotate(-7deg); }.token-b { right: -2%; bottom: 19%; transform: rotate(7deg); }.token-c { left: 5%; bottom: 9%; transform: rotate(3deg); }
.poem-line { font-family: "Songti SC", "STSong", serif; font-size: 16px; font-weight: 700; }.line-a { left: -3%; top: 19%; transform: rotate(-4deg); }.line-b { right: -5%; bottom: 19%; transform: rotate(4deg); }
.idiom-tiles { position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(4, 54px); gap: 8px; bottom: 9%; }
.idiom-tiles b { display: grid; place-items: center; height: 54px; color: #6e411c; background: #fff4ce; border-radius: 10px; font-family: "Songti SC", "STSong", serif; font-size: 25px; box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.coming-pill { display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: rgba(255,255,255,.82); font-weight: 850; }
.slider-toolbar { position: absolute; z-index: 6; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.slider-dots, .slider-arrows { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.38); cursor: pointer; transition: width .25s, background .25s; }
.slider-dots button.is-active { width: 34px; border-radius: 999px; background: #fff; }
.slider-arrows { padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(0,0,0,.12); backdrop-filter: blur(10px); }
.slider-arrows button { width: 38px; height: 38px; padding: 0; color: #fff; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 18px; cursor: pointer; }
.slider-arrows span { min-width: 68px; text-align: center; color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .12em; }.slider-arrows b { color: #fff; }
.brand-intro { display: grid; grid-template-columns: .42fr 1fr; align-items: center; gap: 8%; }
.brand-intro-number { color: transparent; -webkit-text-stroke: 2px rgba(23,103,232,.35); font-family: var(--display); font-size: clamp(78px, 12vw, 150px); font-weight: 900; line-height: .72; letter-spacing: -.1em; transform: rotate(-5deg); }
.brand-intro h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 5vw, 65px); line-height: 1.14; }
.brand-principles { padding: 0 0 112px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 28px; background: #fff; overflow: hidden; }
.principle-grid article { min-height: 260px; padding: 34px; }.principle-grid article + article { border-left: 1px solid var(--line); }
.principle-grid span { color: var(--aqua); font-weight: 900; letter-spacing: .1em; }.principle-grid h3 { margin: 45px 0 8px; font-size: 28px; }.principle-grid p { margin: 0; color: var(--muted); }

.doc-body { background: linear-gradient(180deg, var(--sky), var(--paper) 320px); }
.doc-nav { display: none; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255,253,245,.92); backdrop-filter: blur(15px); }
.doc-nav-visible .doc-nav { display: block; }
.doc-nav-inner { width: min(900px, calc(100% - 40px)); min-height: 66px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.doc-nav-title { font-family: var(--display); font-weight: 900; }
.doc-nav-links { display: flex; gap: 20px; color: var(--muted); font-size: 13px; font-weight: 750; }
.doc-main { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 74px 0 100px; }
.doc-main h1 { font-size: clamp(38px, 7vw, 58px); }
.doc-main h2 { margin-top: 42px; font-size: 25px; }
.doc-main a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.meta, .muted { color: var(--muted); }
.notice, .support-card { padding: 20px 22px; border: 1px solid rgba(23,103,232,.18); border-radius: 16px; background: rgba(255,255,255,.75); }
.language-switcher { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); }
.language-switcher a { padding: 6px 13px; color: var(--muted); text-decoration: none; border-radius: 999px; font-size: 13px; font-weight: 800; }
.language-switcher a:hover { color: var(--ink); background: var(--mint); }
.language-switcher a.is-active { color: var(--paper); background: var(--ink); }
.legal-main { width: min(900px, calc(100% - 40px)); }
.legal-product { margin-top: 44px; padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.86); box-shadow: 0 20px 55px rgba(7,49,78,.09); }
.legal-product-head { display: flex; align-items: center; gap: 20px; }
.legal-product-head img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 12px 25px rgba(7,49,78,.14); }
.legal-product-head h2 { margin: 2px 0 0; }
.legal-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
.legal-links a { display: flex; flex-direction: column; padding: 18px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.legal-links a:hover { color: var(--blue); border-color: rgba(23,103,232,.35); }
.legal-links span { color: var(--muted); font-size: 12px; }
.future-legal { margin-top: 30px; padding: 24px 28px; border-radius: 22px; background: var(--mint); }
.future-legal h2 { margin-top: 0; }

@keyframes arrive { from { opacity: 0; transform: translateY(50px) rotate(7deg); } to { opacity: 1; transform: translateY(0) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .hero-grid, .steps-grid { grid-template-columns: 1fr; } .hero-copy { padding-top: 70px; text-align: center; } .kicker, .hero-actions { justify-content: center; } .hero-copy > p { margin-inline: auto !important; } .hero-grid { gap: 10px; } .hero-art { min-height: 530px; } .app-grid, .feature-grid { grid-template-columns: 1fr; } .app-card, .feature-card { min-height: 340px; } .section-heading { display: block; } .brand-slide-inner { grid-template-columns: 1fr; gap: 0; padding-top: 145px; text-align: center; } .brand-slide-copy > p:not(.kicker) { margin-inline: auto; } .brand-slide-copy .kicker, .brand-slide-copy .hero-actions { justify-content: center; } .slide-visual { min-height: 430px; } .slide-app-icon, .future-app-icon { width: 260px; border-radius: 40px; } .future-app-icon { font-size: 100px; } .slide-visual::before { width: 350px; height: 350px; } .brand-intro { grid-template-columns: 1fr; gap: 55px; } }
@media (max-width: 640px) { .shell { width: min(100% - 28px, 1160px); } .nav { min-height: 72px; } .brand img, .brand .brand-mark { width: 38px; height: 38px; } .nav-links a:not(.nav-button) { display: none; } .hero { min-height: auto; } .hero-grid { min-height: 0; } h1 { font-size: 45px; } .hero-art { min-height: 470px; } .logo-card { padding: 20px; border-radius: 40px; } .orbit { width: 360px; height: 360px; } .chip-one { left: -2px; } .chip-two { right: -2px; } .proof-grid { grid-template-columns: 1fr; padding: 16px 0; } .proof-grid div { padding: 12px; } .proof-grid div + div { border-left: 0; border-top: 1px solid var(--line); } .section { padding: 78px 0; } .download-card { grid-template-columns: 1fr; padding: 40px 24px; text-align: center; } .download-copy > img { margin-inline: auto; } .footer-inner { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } .footer-meta { align-items: center; } .doc-nav-inner { align-items: flex-start; flex-direction: column; padding: 12px 0; gap: 6px; } .doc-nav-links { flex-wrap: wrap; gap: 10px 16px; } .legal-product { padding: 22px; } .legal-links { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 640px) { .brand-slide-inner { min-height: 800px; padding-top: 110px; } .brand-slide-copy h1 { font-size: 46px; } .brand-slide-copy > p:not(.kicker) { font-size: 16px; } .slide-visual { min-height: 350px; } .slide-app-icon, .future-app-icon { width: 210px; padding: 17px; border-radius: 32px; } .slide-app-icon img { border-radius: 23px; } .future-app-icon { font-size: 82px; } .slide-visual::before { width: 270px; height: 270px; } .float-token, .poem-line { font-size: 11px; padding: 7px 10px; } .idiom-tiles { grid-template-columns: repeat(4, 42px); }.idiom-tiles b { height: 42px; font-size: 20px; } .slider-toolbar { bottom: 17px; } .slider-arrows span { display: none; } .brand-intro-number { font-size: 95px; } .principle-grid { grid-template-columns: 1fr; } .principle-grid article { min-height: 220px; }.principle-grid article + article { border-left: 0; border-top: 1px solid var(--line); } }

/* CppStarter product pages */
.cpp-site { --ink: #0f212e; --muted: #58717c; --paper: #faf4e9; --sky: #e8f0ed; --mint: #d9eee4; --aqua: #5aa98a; --blue: #e94d31; --gold: #f0ad3d; --line: rgba(15,33,46,.15); }
.cpp-header { color: #f8f0e3; }
.cpp-header .nav-button { color: var(--ink); background: #7ac7a8; }
.cpp-hero { color: #f8f0e3; background: radial-gradient(circle at 82% 14%, rgba(233,77,49,.23), transparent 30%), radial-gradient(circle at 12% 88%, rgba(122,199,168,.17), transparent 31%), #0f212e; }
.cpp-hero::before { border-color: rgba(122,199,168,.14); box-shadow: 0 0 0 70px rgba(122,199,168,.035), 0 0 0 140px rgba(122,199,168,.02); }
.cpp-hero .kicker, .cpp-hero h1 em { color: #7ac7a8; }
.cpp-hero .hero-copy > p:not(.kicker) { color: rgba(248,240,227,.72); }
.cpp-hero .primary-button { color: #fff8ed; background: #e94d31; }
.cpp-hero .text-link { color: #f8f0e3; }
.cpp-hero-art { min-height: 590px; }
.cpp-orbit { position: absolute; width: 520px; height: 520px; border: 1px dashed rgba(122,199,168,.3); border-radius: 50%; animation: spin 34s linear infinite; }
.cpp-code-card { position: relative; z-index: 2; width: min(470px, 90vw); overflow: hidden; border: 1px solid rgba(122,199,168,.35); border-radius: 30px; background: #081820; box-shadow: 0 35px 80px rgba(0,0,0,.38); transform: rotate(1.5deg); animation: arrive .8s ease-out both; }
.cpp-window-bar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.09); background: #173544; }
.cpp-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e94d31; }.cpp-window-bar i:nth-child(2) { background: #f0ad3d; }.cpp-window-bar i:nth-child(3) { background: #7ac7a8; }.cpp-window-bar span { margin-left: auto; color: rgba(248,240,227,.55); font: 12px ui-monospace, monospace; }
.cpp-code-card pre { min-height: 285px; margin: 0; padding: 34px; color: #f8f0e3; font: 16px/1.75 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre-wrap; }.cpp-code-card pre b { color: #7ac7a8; }.cpp-code-card pre em { color: #f0ad3d; font-style: normal; }
.cpp-run-result { display: flex; align-items: center; gap: 20px; min-height: 70px; padding: 0 28px; border-top: 1px solid rgba(255,255,255,.09); background: #102b38; }.cpp-run-result span { color: #e94d31; font-size: 11px; font-weight: 900; letter-spacing: .12em; }.cpp-run-result strong { color: #f8f0e3; font: 15px ui-monospace, monospace; }
.cpp-mini-scene { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; background: #dcebe5; }.cpp-token { padding: 9px 13px; color: #f8f0e3; border-radius: 10px; background: #173544; font: 13px ui-monospace, monospace; }.cpp-token:nth-child(2) { color: #0f212e; background: #7ac7a8; }.cpp-token:nth-child(3) { background: #e94d31; }
.cpp-terminal-scene { display: grid; place-items: center; color: #f8f0e3; background: #0f212e; }.cpp-terminal-scene code { font: 14px/2 ui-monospace, monospace; }.cpp-terminal-scene b { color: #7ac7a8; }
.cpp-output-scene { display: grid; place-items: center; align-content: center; background: #fff0e5; }.cpp-output-scene strong { color: #e94d31; font: 56px ui-monospace, monospace; }.cpp-output-scene span { color: var(--muted); font-size: 12px; }
.cpp-download-card { background: linear-gradient(135deg, #dbeee6, #ffd8ca); }.cpp-brace-mark { position: relative; z-index: 2; color: #e94d31; font: 900 92px/1 ui-monospace, monospace; text-align: center; transform: rotate(2deg); }.cpp-brace-mark small { display: block; margin-top: 14px; color: #5aa98a; font-size: 52px; }
@media (max-width: 900px) { .cpp-hero-art { min-height: 500px; }.cpp-orbit { width: 390px; height: 390px; } }
@media (max-width: 640px) { .cpp-code-card { border-radius: 24px; }.cpp-code-card pre { min-height: 245px; padding: 24px; font-size: 13px; }.cpp-window-bar { height: 48px; }.cpp-orbit { width: 320px; height: 320px; }.cpp-brace-mark { font-size: 68px; } }