:root {
  --paper:#050913; --ink:#f5f7fc; --muted:#8d9bb3; --orange:#ffa748;
  --blue:#263e6b; --night:#060b16; --line:#ffffff14;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; border:0; background:none; transition:transform 160ms var(--ease-out); }
button:active { transform:scale(.97); }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
p,h1,h2,h3 { margin:0; }
.shell { width:min(1180px,calc(100% - 100px)); margin-inline:auto; }
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link:focus { position:fixed; z-index:99; background:var(--night); padding:16px; }
.product-bar { position:sticky; top:0; z-index:30; background:#070c16cc; backdrop-filter:blur(24px); border-bottom:1px solid var(--line); }
.product-nav { height:68px; display:flex; align-items:center; justify-content:space-between; }
.product-brand { display:flex; align-items:center; gap:11px; font-weight:600; font-size:22px; letter-spacing:-.05em; }
.app-mark { display:grid; place-items:center; width:31px; height:31px; background:linear-gradient(150deg,#ffc775,#d88c32); color:#142039; border:1px solid #ffd6a177; border-radius:9px; box-shadow:0 0 22px #ffa74822; }
.app-mark svg { width:21px; height:21px; stroke-width:2; }
.product-nav nav { display:flex; align-items:center; gap:28px; font-size:11px; color:#aab3c4; }
.status-pill { border:1px solid #eab16a47; border-radius:30px; padding:8px 15px; font-size:10px; color:#edba7c; display:flex; align-items:center; gap:7px; background:#ffb85b08; }
.status-pill span,.live-dot,.coming-soon>span { width:5px; height:5px; border-radius:50%; background:var(--orange); display:inline-block; box-shadow:0 0 12px #ffb65980; }
.eyebrow { font-size:12px; letter-spacing:.09em; font-weight:500; color:#a3b4d2; }
.hero { position:relative; height:calc(100svh + 510px); }
.hero-sticky { position:sticky; top:68px; height:calc(100svh - 68px); min-height:650px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 78% 30%,#24447899,transparent 55%),radial-gradient(ellipse at 22% 90%,#14244666,transparent 60%),#050913; }
.hero-atmosphere { position:absolute; inset:0; overflow:hidden; z-index:-1; }
.hero-atmosphere:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#050913,transparent 27%,transparent 90%,#05091399); }
.light-orbit { position:absolute; width:1000px; height:680px; border:1px solid #8aa8e416; border-radius:50%; transform:rotate(-30deg); }
.orbit-one { top:60px; left:34%; box-shadow:0 0 90px #316abb0a,inset 0 0 100px #35579111; }
.orbit-two { top:130px; left:39%; width:850px; height:520px; border-color:#b2bacc0c; }
.ambient-wave { position:absolute; width:1500px; height:290px; display:flex; align-items:center; gap:6px; left:25%; top:53%; transform:rotate(-16deg); opacity:.25; mask-image:linear-gradient(90deg,transparent,#000 20%,#000 75%,transparent); }
.ambient-wave i { flex:1; min-width:2px; border-radius:4px; background:linear-gradient(#fdd28d,#e99038); }
.hero-layout { display:grid; grid-template-columns:46% 54%; height:100%; align-items:center; position:relative; }
.hero-copy { padding:0 0 28px; position:relative; z-index:3; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:11px; font-size:11px; }
.hero h1 { font-size:clamp(80px,7.5vw,108px); font-weight:650; line-height:1.06; letter-spacing:-.065em; margin:27px 0 25px; }
.hero h1>span { background:linear-gradient(130deg,#fff0cc,#ffb151 75%); background-clip:text; color:transparent; text-shadow:0 6px 60px #ffb25912; }
.hero-description { color:#9daac1; font-size:16px; line-height:1.9; letter-spacing:.02em; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:30px; }
.primary-link { display:inline-flex; align-items:center; gap:20px; border-radius:30px; padding:14px 23px; background:linear-gradient(120deg,#ffdb9d,#efa346); color:#26201b; font-size:13px; font-weight:600; box-shadow:0 4px 26px #ffb85914,inset 0 1px #ffeacd; }
.primary-link svg { width:17px; height:17px; }
.hero-actions>span { font-size:9px; line-height:1.8; color:#818ca2; }
.scroll-cue { display:flex; align-items:center; gap:11px; margin-top:44px; color:#788aa7; font-size:9px; letter-spacing:.06em; }
.scroll-cue>span { width:16px; height:24px; border:1px solid #7083a15c; border-radius:12px; position:relative; }
.scroll-cue>span:after { content:""; width:2px; height:5px; background:#a9b2c3; position:absolute; top:5px; left:6px; border-radius:4px; }
.intro { animation:hero-in 850ms var(--ease-out) both; }
.intro:nth-child(2) { animation-delay:50ms; }
.intro:nth-child(3) { animation-delay:100ms; }
.intro:nth-child(4) { animation-delay:150ms; }
@keyframes hero-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.hero-stage { position:relative; height:650px; perspective:1400px; }
.device-shadow { position:absolute; width:340px; height:110px; top:535px; left:160px; background:#000; filter:blur(30px); transform:rotate(-15deg); opacity:.8; }
.phone { width:300px; height:646px; padding:5px; border-radius:43px; background:linear-gradient(110deg,#101724,#a0a9b9 3%,#24364b 5%,#14243a 94%,#77808f 98%,#18202a); box-shadow:2px 1px 1px #c6d6f599,15px 15px 0 -9px #080d17,21px 15px 1px -12px #4a5970,0 38px 70px #0009; }
.hero-phone { position:absolute; left:calc(50% - 110px); top:-3px; transform:rotateY(-19deg) rotateX(5deg) rotateZ(9deg); }
.phone-screen { height:100%; border:4px solid #02050b; border-radius:38px; overflow:hidden; overflow:clip; padding:13px 16px 15px; position:relative; background:linear-gradient(165deg,#273f6c 0%,#162849 44%,#080f20 70%,#010305 94%); }
.phone-status { height:26px; display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; color:#fafafa; }
.island { width:76px; height:22px; border-radius:25px; background:#030609; position:absolute; left:50%; transform:translateX(-50%); top:8px; }
.system-signals { display:flex; gap:3px; align-items:center; }
.system-signals svg { width:12px; height:12px; }
.system-signals svg:last-child { width:18px; color:#9bd47f; }
.sheet-handle { width:29px; height:4px; border-radius:4px; background:#7786a266; margin:10px auto 22px; }
.phone-tools { display:flex; align-items:center; justify-content:flex-end; gap:5px; color:#f3a54c; font-size:8px; white-space:nowrap; }
.phone-tools>button,.recognize-label { background:#ffb25922; border-radius:18px; padding:7px 8px; }
.phone-tools>button[aria-pressed=true] { background:#ffb25955; }
.phone-transcript { height:216px; margin:0 0 9px; font-size:13px; line-height:1.5; color:#bdc9df80; overflow:hidden; mask-image:linear-gradient(0deg,transparent,#000 10%,#000 95%); }
.phone-transcript p { margin:0 0 13px; }
.phone-transcript>p:first-child { margin-top:3px; }
.phone-transcript .phone-current { color:#fff; font-weight:550; font-size:14px; margin:0 0 13px; }
.phone-current p { margin-bottom:3px; }
.phone-current small { color:#d5bc94; font-size:10px; font-weight:400; }
.phone-slices { display:flex; gap:12px; align-items:center; height:34px; color:var(--orange); }
.phone-slices>button,.phone-slices>span:not(.slice-divider) { display:flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:20px; background:#ffb05e29; font-size:20px; }
.phone-slices>span:last-child { gap:4px; font-size:14px; padding:0 9px; }
.phone-slices svg { width:16px; height:16px; }
.slice-divider { width:1px; height:22px; background:#ffffff15; }
.phone-slices>button[aria-pressed=true] { background:#b57337; color:white; }
.phone-timeline { height:73px; position:relative; margin:6px -17px 0; overflow:hidden; }
.timeline-ruler { display:flex; justify-content:space-around; color:#8190aa; font-size:9px; margin:4px 0 0; font-variant-numeric:tabular-nums; }
.timeline-ruler>span:before { content:""; display:block; width:1px; height:5px; background:#75839e; margin-bottom:2px; }
.phone-wave { height:40px; display:flex; gap:2px; align-items:center; margin-top:3px; width:130%; }
.phone-wave i { flex:1; min-width:2px; background:#ffaf56; border-radius:2px; }
.phone-playhead { position:absolute; width:1.5px; height:64px; background:#ffa748; left:50%; top:7px; box-shadow:0 0 12px #ffb75935; }
.phone-playhead:before { content:""; width:9px; height:9px; border-radius:50%; background:#ffa748; position:absolute; left:-3.7px; top:-2px; }
.phone-track { display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.phone-track strong { display:block; font-size:16px; font-weight:650; letter-spacing:-.035em; }
.phone-track small { display:block; font-size:10px; color:#8d8e99; margin-top:5px; }
.phone-track button { padding:5px; color:var(--orange); }
.phone-track svg { width:19px; height:19px; }
.phone-track button[aria-pressed=true] svg { fill:var(--orange); }
.phone-controls { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:5px; }
.phone-controls button { padding:5px; display:grid; place-items:center; }
.phone-controls svg { width:20px; height:20px; fill:currentColor; }
.phone-controls .round-play { width:54px; height:54px; background:linear-gradient(140deg,#b67b3b,#97602e); border:1px solid #d99d5166; color:#fff; border-radius:50%; }
.phone-controls .round-play svg { width:24px; height:24px; }
.phone-bottom { display:flex; align-items:start; justify-content:space-between; margin:12px 21px 0; color:var(--orange); }
.phone-bottom>svg { width:19px; height:19px; }
.phone-bottom>svg:last-child { color:#fff; }
.phone-bottom button { display:flex; align-items:center; flex-direction:column; gap:4px; font-size:8px; color:white; padding:0; }
.phone-bottom button svg { width:18px; height:18px; }
.home-indicator { width:80px; height:3px; border-radius:10px; background:#ffffff66; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); }
.detail-float { pointer-events:none; position:absolute; z-index:3; border:1px solid #c0d8ff29; background:linear-gradient(120deg,#243f69cf,#10203be8); backdrop-filter:blur(22px); border-radius:18px; padding:20px 23px; box-shadow:0 20px 65px #0007,inset 0 1px #ffffff0a; }
.subtitle-float { left:-35px; top:326px; width:330px; transform:translateY(0) rotate(-4deg); }
.detail-label { display:flex; align-items:center; gap:8px; font-size:9px; color:#b2c2dd; letter-spacing:.05em; }
.detail-label>span { width:5px; height:5px; background:var(--orange); border-radius:50%; }
.subtitle-float p { font-size:20px; font-weight:500; color:#fff; margin:16px 0 10px; }
.subtitle-float small { font-size:10px; color:#7f95b9; }
.wave-float { left:-10px; top:515px; width:255px; transform:rotate(4deg); padding:16px 22px 12px; }
.float-wave { display:flex; gap:3px; align-items:center; height:43px; margin:10px 0 5px; }
.float-wave i { flex:1; background:#ffb253; border-radius:3px; }
.float-ruler { display:flex; justify-content:space-between; color:#8e9bb2; font:8px ui-monospace,monospace; }
.float-head { position:absolute; left:54%; top:39px; height:55px; width:1px; background:#ffd39a; box-shadow:0 0 8px #ffb75d; }
.device-caption { position:absolute; bottom:-12px; right:20px; font-size:8px; letter-spacing:.03em; color:#6a7c9e; }
.hero-chapters { position:absolute; bottom:18px; left:0; right:0; display:flex; align-items:center; gap:25px; font-size:9px; color:#5a6980; }
.hero-chapters>span { transition:color 250ms ease; }
.hero-chapters .chapter-active { color:#d9b278; }
.hero-chapters>div { width:70px; height:2px; background:#31415b; overflow:hidden; }
.hero-chapters i { display:block; width:100%; height:100%; background:#ffbe6e; transform-origin:left; transform:scaleX(.05); }
h2 { font-size:clamp(38px,4.7vw,66px); line-height:1.23; letter-spacing:-.055em; font-weight:600; }
.muted { color:#526786; }
.warm-text { color:#f8c88b; }
.manifesto { padding:100px 0 90px; text-align:center; position:relative; }
.manifesto h2 { margin-top:26px; }
.section-description { font-size:15px; line-height:1.95; color:#8597b5; margin-top:26px; }
.feature-strip { display:flex; justify-content:center; gap:42px; margin-top:45px; font-size:11px; color:#a5b7d3; }
.feature-strip span { display:flex; align-items:center; gap:10px; }
.feature-strip svg { width:18px; height:18px; color:#eab47b; }
.experience { padding:90px 0 60px; background:radial-gradient(ellipse at 40% 60%,#213a6270,transparent 66%),#080e1c; border-block:1px solid #7c9ed515; }
.experience-heading { display:flex; justify-content:space-between; align-items:end; }
.experience-heading h2 { margin-top:23px; }
.experience-heading h2>span { color:#f4bd79; }
.experience-heading>p { font-size:14px; line-height:1.95; color:#8c9db8; padding-bottom:6px; }
.experience-tabs { display:flex; position:relative; width:360px; margin:36px 0 25px; background:#172238; border:1px solid #adc4eb15; padding:5px; border-radius:30px; isolation:isolate; }
.experience-tabs button { flex:1; min-width:0; padding:11px 0; font-size:11px; color:#8f9fbb; border-radius:30px; transition:color 200ms ease; }
.experience-tabs button[aria-selected=true] { color:#ffdeb1; }
.tab-indicator { position:absolute; top:5px; bottom:5px; left:5px; width:calc((100% - 10px)/3); border:1px solid #ffb75433; background:#ffb0541c; border-radius:30px; z-index:-1; transition:transform 250ms var(--ease-in-out); }
.demo-console { display:grid; grid-template-columns:27% 73%; border:1px solid #97baf52b; border-radius:26px; background:linear-gradient(145deg,#233c65,#111e36 53%,#040914); box-shadow:0 30px 80px #0006,inset 0 1px #ffffff0c; overflow:hidden; min-height:480px; }
.demo-sidebar { display:flex; flex-direction:column; padding:35px; border-right:1px solid #ffffff0a; background:#040b182b; }
.demo-cover { position:relative; width:165px; height:176px; max-width:100%; background:radial-gradient(ellipse at 30% 10%,#44618b,transparent 80%),#162c4c; border:1px solid #cadfff1f; border-radius:13px; padding:20px; overflow:hidden; }
.demo-cover>span { position:relative; z-index:1; font-family:"Hiragino Mincho ProN","Songti SC",serif; font-size:15px; line-height:1.6; color:#ffc780; }
.demo-cover b { font-weight:400; font-size:39px; }
.demo-cover:after { content:""; width:200px; height:200px; border:1px solid #ffa94933; border-radius:50%; position:absolute; left:57px; top:80px; box-shadow:0 0 0 12px #ffb76006,0 0 0 24px #ffb76005; }
.demo-cover svg { position:absolute; bottom:17px; right:17px; color:#eab77b; }
.demo-sidebar>strong { font-size:14px; margin-top:24px; }
.demo-sidebar>span { font-size:10px; margin-top:9px; color:#8497b8; }
.demo-file { display:flex; gap:9px; align-items:center; font-size:10px; margin-top:29px; color:#b1bfd6; }
.demo-file svg { width:16px; }
.demo-sidebar>p { font-size:9px; line-height:1.8; color:#7484a0; margin-top:auto; padding-top:24px; }
.demo-main { padding:27px 38px 23px; min-width:0; }
.demo-topline { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#91a5c8; }
.demo-topline>span:first-child { display:flex; align-items:center; gap:7px; color:#d6af7c; }
.demo-topline i { width:5px; height:5px; background:#ffb35b; border-radius:50%; }
.demo-panels { display:grid; height:224px; align-items:center; position:relative; }
.demo-panel { grid-area:1/1; text-align:center; opacity:0; transform:translateY(15px) scale(.97); transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out); pointer-events:none; visibility:hidden; }
.demo-panel.active { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; }
.demo-panel:not(.active) { transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),visibility 0s 250ms; }
.previous-line,.next-line { font-size:16px; color:#7d91b1; opacity:.7; }
.active-line { font-size:clamp(20px,2.4vw,32px); font-weight:550; letter-spacing:.02em; color:#fff; margin:24px 0 12px; }
.translation { font-size:12px; color:#b8cae5; }
.next-line { margin-top:22px; }
.demo-wave-shell { height:65px; position:relative; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.demo-wave { display:flex; align-items:center; gap:3px; height:100%; }
.demo-wave i { flex:1; min-width:2px; background:#e9963e; border-radius:3px; transform-origin:center; }
.demo-wave i:nth-child(3n) { background:#ffc174; }
.playhead { position:absolute; width:100%; height:100%; top:0; left:0; transform:translateX(33.333%); }
.playhead:before { content:""; display:block; width:2px; height:100%; background:#ffe0b6; }
.demo-progress { display:block; width:100%; height:16px; margin:0; accent-color:#ffb655; cursor:pointer; background:transparent; }
.demo-times { display:flex; justify-content:space-between; font:10px ui-monospace,SFMono-Regular,monospace; color:#8c9db7; margin-top:4px; }
.demo-controls { display:flex; justify-content:space-between; align-items:center; margin-top:15px; }
.demo-controls>div { display:flex; align-items:center; gap:26px; }
.demo-controls button { display:grid; place-items:center; min-width:44px; min-height:44px; color:#fff; font-size:12px; }
.demo-controls button[aria-pressed=true]:not(.round-play) { color:#ffb459; background:#ffbb5b14; border-radius:12px; }
.demo-controls .round-play { width:56px; height:56px; background:linear-gradient(130deg,#c58b44,#945c2b); border:1px solid #f0be7a55; color:white; border-radius:50%; }
.demo-controls .round-play svg { width:26px; height:26px; }
.demo-controls svg { width:20px; height:20px; }
.demo-hint { text-align:center; font-size:11px; color:#a1b3cf; margin-top:25px; }
.demo-hint>span { color:#637898; margin-left:10px; }
.panel-eyebrow { display:block; font-size:12px; color:#9bb0cf; margin-bottom:23px; }
.demo-panel label { display:block; font-size:19px; color:#fff; }
.slice-item button { flex-shrink:0; background:#edb571; color:#1c2331; border-radius:9px; padding:10px 15px; font-size:12px; }
.answer-feedback,.slice-feedback { font-size:11px; color:#b7c5dc; margin-top:13px; min-height:18px; }
.slice-item { display:flex; align-items:center; gap:14px; padding:19px; border:1px solid #ffb45744; border-radius:13px; background:#ffb2540a; text-align:left; }
.slice-icon { color:#ffb35f; }
.slice-item>div { flex:1; }
.slice-item strong { display:block; font-size:14px; font-weight:500; }
.slice-item small { display:block; margin-top:8px; font-size:10px; color:#8da3c0; }
.details { padding:95px 0 100px; }
.details-heading { margin-bottom:42px; }
.details-heading h2 { margin-top:22px; }
/* The supporting screens share the App's charcoal surfaces and amber controls. */
.workspace-showcase { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:70px; margin-top:50px; }
.workspace-story { align-self:center; }
.workspace-tabs { display:flex; flex-direction:column; gap:12px; margin:26px 0; }
.workspace-tabs button { display:flex; align-items:center; gap:18px; text-align:left; padding:24px 20px; border-radius:20px; border:1px solid transparent; color:#8d9bb3; transition:background 200ms ease,border-color 200ms ease; }
.workspace-tabs button[aria-selected=true] { border-color:#ffa74835; background:linear-gradient(110deg,#ffa74817,#ffa74804); color:#ffd29a; }
.workspace-tabs button>svg { width:27px; height:27px; flex-shrink:0; }
.workspace-tabs strong { display:block; font-size:23px; font-weight:550; }
.workspace-tabs small { display:block; margin-top:10px; font-size:12px; color:#91a0b7; }
.workspace-arrow { margin-left:auto; opacity:0; }
.workspace-tabs [aria-selected=true] .workspace-arrow { opacity:1; }
.workspace-note { color:#76869f; font-size:11px; line-height:1.9; }
.workspace-device { min-width:0; background:#030303; border:1px solid #fff3; border-radius:38px; padding:22px 26px 18px; box-shadow:0 35px 90px #0008,0 0 90px #d4964210,inset 0 1px #fff2; }
.workspace-system { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; padding:0 6px 24px; }
.workspace-system>span:nth-child(2) { color:#777; font-size:9px; font-weight:400; }
.workspace-system svg { width:21px; height:21px; }
.workspace-panels { display:grid; }
.workspace-panel { grid-area:1/1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px) scale(.98); transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),visibility 0s 250ms; }
.workspace-panel.active { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out); }
.workspace-panels.instant .workspace-panel { transition:none; }
.native-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.native-title h3 { font-size:32px; font-weight:650; letter-spacing:-.04em; }
.native-add { display:grid; place-items:center; background:var(--orange); color:white; border-radius:50%; width:42px; height:42px; font-size:34px; }
.native-caption { font-size:10px; color:#999; }
.library-counts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.library-counts>span { display:flex; align-items:center; gap:9px; background:#1d1d1f; padding:16px 12px; border-radius:20px; font-size:12px; }
.library-counts svg { color:var(--orange); width:20px; height:20px; }
.library-counts b { font-size:11px; color:#8c8c92; font-weight:400; margin-left:auto; }
.native-heading { display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:550; margin:23px 0 14px; }
.native-heading small { font-size:10px; color:#96969c; font-weight:400; }
.playlist-shelf { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.playlist-art { height:142px; border-radius:25px; background:linear-gradient(145deg,#ffc77e,#ff983b); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.playlist-art.recently { flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; padding:18px; background:linear-gradient(140deg,#d97472,#8f3e43); border:1px solid #ffcbc766; }
.playlist-art>svg { width:35px; height:35px; border-radius:50%; background:#0004; padding:7px; align-self:center; }
.playlist-art>span:not(.music-note) { font-size:16px; }
.playlist-art [data-wave] { display:flex; height:16px; gap:2px; width:100%; align-items:center; }
.playlist-art i { background:#ffc7bb; flex:1; border-radius:2px; }
.music-note { font-size:76px; color:#fff9ec; }
.playlist-shelf strong,.playlist-shelf small { display:block; }
.playlist-shelf strong { font-size:13px; font-weight:500; margin-top:10px; }
.playlist-shelf small { font-size:10px; color:#919198; margin-top:6px; }
.native-folder { background:#1d1d1f; border-radius:20px; padding:16px; display:flex; align-items:center; gap:14px; margin-top:9px; }
.native-folder>svg { width:37px; height:37px; color:var(--orange); padding:6px; background:#ffa7480b; border-radius:9px; }
.native-folder>div { flex:1; min-width:0; }
.native-folder strong { font-size:13px; font-weight:500; }
.native-folder strong span { color:var(--orange); }
.native-folder small { display:block; color:#909097; font-size:10px; margin-top:6px; }
.native-folder>span { color:#777; }
.native-mini-player { display:flex; align-items:center; gap:14px; margin-top:20px; padding:10px 14px; background:linear-gradient(120deg,#454548,#252528); border:1px solid #fff3; border-radius:23px; position:relative; }
.native-mini-player:after { content:""; position:absolute; bottom:4px; left:16px; right:21%; height:2px; background:var(--orange); }
.native-mini-player>span { background:#ab5253; width:33px; height:33px; border-radius:8px; display:grid; place-items:center; }
.native-mini-player>div { flex:1; }
.native-mini-player strong,.native-mini-player small { display:block; font-size:11px; }
.native-mini-player small { color:#aaa; font-size:9px; margin-top:4px; }
.native-mini-player>svg { width:18px; }
.native-bottom { display:flex; justify-content:space-around; background:linear-gradient(#343436,#222224); border:1px solid #fff2; border-radius:28px; margin-top:8px; padding:5px; }
.native-bottom>span { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9px; width:25%; padding:6px; border-radius:25px; }
.native-bottom svg { width:21px; height:21px; }
.native-bottom .selected { background:#080809; color:var(--orange); }
.native-recorder { background:#1d1d1f; border-radius:25px; padding:24px 18px 18px; text-align:center; }
.native-recorder>strong { font-size:16px; font-weight:500; }
.record-clock { display:block; font-size:44px; font-weight:300; font-variant-numeric:tabular-nums; margin:15px 0; letter-spacing:-.04em; }
.record-line { height:3px; background:#414147; margin-bottom:19px; border-radius:4px; overflow:hidden; }
.record-line i { display:block; height:100%; width:100%; background:#e52249; transform:scaleX(0); transform-origin:left; }
.record-actions { display:flex; justify-content:center; gap:8px; }
.record-actions button { background:#483019; color:var(--orange); padding:12px 16px; border-radius:30px; font-size:13px; min-height:44px; }
.record-actions #record-start,.record-actions #record-end { background:#d80c36; color:white; }
.record-actions #record-start { align-items:center; gap:8px; }
.record-actions svg { vertical-align:middle; width:19px; height:19px; margin-right:4px; }
.native-recorder p { color:#9c9ca3; font-size:10px; line-height:1.7; margin-top:17px; }
.native-explanation { color:#939399; font-size:11px; line-height:1.8; margin:15px 5px 0; }
.record-marks { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:43px; padding:9px 4px 0; font-size:10px; color:#999; }
.record-marks b { border:1px solid #ffa74840; color:var(--orange); border-radius:20px; font-size:10px; font-weight:400; padding:6px 9px; }
.native-drafts { background:#1d1d1f; border-radius:23px; padding:0 18px; }
.native-drafts>div { display:flex; align-items:center; gap:12px; padding:16px 0; }
.native-drafts>div+div { border-top:1px solid #fff2; }
.native-drafts svg { color:#8c8c92; width:20px; }
.native-drafts>div>span:nth-child(2) { flex:1; }
.native-drafts strong { display:block; font-size:12px; font-weight:500; }
.native-drafts small { display:block; font-size:10px; color:#8c8c92; margin-top:7px; }
.analysis-filter { display:flex; justify-content:space-between; background:#1d1d1f; border-radius:22px; padding:18px; font-size:13px; }
.analysis-filter>span:last-child { color:var(--orange); }
.analysis-toggle { display:flex; gap:6px; margin:20px 0 15px; }
.analysis-toggle button { border-radius:20px; padding:10px 16px; font-size:11px; color:#aaa; }
.analysis-toggle button[aria-pressed=true] { color:var(--orange); background:#ffa74818; }
.native-metrics { display:grid; grid-template-columns:1fr 1fr; gap:27px 20px; padding:25px; border-radius:25px; background:#1d1d1f; }
.native-metrics small { color:#94949a; font-size:11px; }
.native-metrics strong { display:block; font-size:36px; font-weight:550; margin-top:8px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.native-metrics strong>span { font-size:24px; }
.native-metrics .metric-accent { color:var(--orange); }
.analysis-rows { background:#1d1d1f; border-radius:22px; padding:0 18px; }
.analysis-rows>div { display:flex; justify-content:space-between; font-size:12px; padding:15px 0; }
.analysis-rows>div+div { border-top:1px solid #ffffff15; }
.analysis-rows b { color:#94949a; font-weight:400; }
.local-footnote { display:flex; align-items:center; gap:25px; max-width:780px; margin:70px auto 0; }
.local-footnote>svg { width:35px; height:35px; color:#a9bbd5; flex-shrink:0; }
.local-footnote h3 { font-size:21px; font-weight:500; }
.local-footnote p { color:#8394ae; font-size:12px; line-height:1.9; margin-top:12px; }
.dictation-top { display:flex; justify-content:space-between; font-size:11px; color:#efc38c; }
.dictation-guide { font-size:11px; color:#95a3ba; margin:12px 0; text-align:left; }
.dictation-sentence { display:flex; gap:7px; align-items:center; padding:17px; border-radius:16px; background:#29292c; color:#53c97a; font-size:20px; text-align:left; }
.dictation-sentence input { width:65px; min-width:0; border:0; border-bottom:2px solid var(--orange); background:#ffa74815; border-radius:4px 4px 0 0; padding:6px; color:var(--orange); font-size:16px; text-align:center; }
.dictation-sentence input[aria-invalid=false] { color:#53c97a; border-color:#53c97a; }
.dictation-actions { display:flex; justify-content:space-between; margin-top:12px; }
.dictation-actions button { padding:10px 17px; border-radius:22px; font-size:11px; background:#ffffff12; }
.dictation-actions #check-answer { background:#009cf1; color:white; }
@media(max-width:1100px) { .workspace-showcase { gap:35px; grid-template-columns:.8fr 1.2fr; } .workspace-device { padding:20px; } }
@media(max-width:760px) {
  .workspace-showcase { grid-template-columns:1fr; gap:25px; margin-top:30px; }
  .workspace-story>.eyebrow { display:none; }
  .workspace-tabs { flex-direction:row; gap:6px; margin:0 0 15px; }
  .workspace-tabs button { flex:1; justify-content:center; padding:15px 4px; gap:7px; border-radius:18px; }
  .workspace-tabs strong { font-size:12px; white-space:nowrap; }
  .workspace-tabs small,.workspace-arrow { display:none; }
  .workspace-tabs button>svg { width:16px; height:16px; }
  .workspace-note { font-size:10px; }
  .workspace-device { max-width:480px; width:100%; margin:auto; padding:20px 16px 14px; border-radius:30px; }
  .native-title h3 { font-size:28px; }
  .native-title { margin-bottom:18px; }
  .library-counts>span { padding:13px 10px; font-size:11px; gap:7px; }
  .library-counts svg { width:17px; }
  .playlist-art { height:127px; border-radius:22px; }
  .native-folder { padding:14px; gap:10px; }
  .native-folder strong { font-size:12px; }
  .native-mini-player { gap:9px; }
  .native-recorder { padding:22px 12px 17px; }
  .record-actions button { padding:12px; font-size:12px; }
  .native-metrics { padding:22px; }
  .native-metrics strong { font-size:31px; }
  .local-footnote { gap:17px; margin-top:40px; align-items:flex-start; }
  .local-footnote h3 { font-size:17px; }
  .local-footnote p { font-size:11px; }
  .dictation-sentence { font-size:16px; padding:14px 9px; gap:4px; }
  .dictation-sentence input { width:50px; }
  .demo-panels { height:245px; }
}
@media(max-width:370px) {
  .workspace-tabs button { gap:4px; }
  .workspace-tabs strong { font-size:11px; }
  .workspace-tabs button>svg { width:13px; }
  .workspace-device { padding-inline:12px; }
  .library-counts>span { gap:4px; padding-inline:8px; }
  .playlist-art { height:112px; }
  .native-heading small { font-size:9px; }
  .dictation-sentence { font-size:14px; padding-inline:6px; }
  .dictation-sentence input { width:43px; }
}
@media(prefers-reduced-motion:reduce) { .workspace-panel { transform:none; } }
.availability { text-align:center; padding:55px 24px 95px; background:radial-gradient(ellipse at 50% 110%,#253b685e,transparent 70%); }
.large-mark { width:68px; height:68px; border-radius:20px; margin:0 auto 26px; box-shadow:0 0 90px #e5a75520,inset 0 1px 2px #fff7; }
.large-mark svg { width:42px; height:42px; }
.availability .eyebrow { font-size:11px; color:#8b9ab5; }
.availability h2 { margin-top:24px; font-size:clamp(46px,5.7vw,78px); letter-spacing:-.065em; background:linear-gradient(#fff,#7f94b9); background-clip:text; color:transparent; }
.availability>p:not(.eyebrow) { font-size:14px; color:#899ab6; line-height:1.9; margin-top:24px; }
.coming-soon { display:inline-flex; align-items:center; gap:9px; border:1px solid #dba15c5c; border-radius:30px; padding:13px 25px; margin-top:28px; font-size:11px; color:#dfb584; }
.availability>small { display:block; font-size:10px; color:#6f809c; margin-top:22px; }
.back-top { display:inline-block; margin-top:25px; font-size:11px; color:#b4c0d6; padding:10px; }
.footer { border-top:1px solid var(--line); padding:23px 0; display:flex; justify-content:space-between; gap:20px; font-size:9px; color:#63748e; }
.reveal { opacity:1; transform:none; }
.motion-ready .reveal:not(.visible) { opacity:0; transform:translateY(25px); }
.motion-ready .reveal { transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out); }
.is-playing .phone-wave i,.is-playing .demo-wave i { animation:wave-play 750ms ease-in-out infinite alternate; }
.is-playing i:nth-child(3n) { animation-delay:-300ms; }
.is-playing i:nth-child(3n + 1) { animation-delay:-550ms; }
@keyframes wave-play { from { transform:scaleY(.55); } to { transform:scaleY(1); } }
@media(hover:hover) and (pointer:fine) {
  a:hover { color:var(--orange); }
  .primary-link:hover { color:#151515; box-shadow:0 4px 40px #ffb85936; }
  .demo-controls button:hover { opacity:.8; }
}
@media(min-width:1500px) {
  .hero-stage { transform:scale(1.08); transform-origin:center; }
}
@media(max-width:1100px) {
  .shell { width:calc(100% - 64px); }
  .hero h1 { font-size:88px; }
  .hero-stage { transform:scale(.9); transform-origin:center right; }
  .hero-layout { grid-template-columns:43% 57%; }
  .subtitle-float { left:-45px; }
  .demo-sidebar { padding:30px 24px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:80px; }
  .shell { width:calc(100% - 40px); }
  .product-nav { height:60px; }
  .product-brand { font-size:20px; }
  .product-nav nav { gap:17px; font-size:10px; }
  .product-nav nav>a[href="#features"] { display:none; }
  .status-pill { padding:8px 10px; font-size:9px; }
  .hero { height:auto; }
  .hero-sticky { position:relative; top:0; height:auto; min-height:0; background:radial-gradient(ellipse at 80% 55%,#27416e88,transparent 65%),#050913; }
  .hero-layout { display:flex; flex-direction:column; align-items:stretch; }
  .hero-copy { padding:45px 0 0; }
  .hero-copy .eyebrow { font-size:10px; }
  .hero h1 { font-size:clamp(56px,12vw,82px); margin:20px 0; line-height:1.17; }
  .hero h1 br { display:block; }
  .hero h1>span { display:inline; }
  .hero-description { font-size:13px; }
  .hero-actions { margin-top:22px; gap:15px; }
  .primary-link { padding:12px 20px; font-size:11px; }
  .hero-actions>span { font-size:8px; }
  .scroll-cue { display:none; }
  .hero-stage { height:800px; transform:none; margin:28px -20px 0; perspective:1200px; }
  .hero-phone { left:calc(50% - 145px); top:15px; transform:rotate(5deg); }
  .subtitle-float { left:5px; top:300px; width:255px; padding:16px 18px; transform:rotate(-5deg); }
  .subtitle-float p { font-size:16px; margin:12px 0 7px; }
  .subtitle-float small { font-size:9px; }
  .detail-label { font-size:8px; }
  .wave-float { width:240px; left:auto; right:16px; top:671px; padding:13px 16px 9px; }
  .float-wave { height:32px; margin-top:8px; }
  .float-head { top:34px; height:42px; }
  .device-caption { right:0; left:0; text-align:center; bottom:7px; font-size:8px; }
  .hero-chapters { position:relative; bottom:auto; padding:13px 0 25px; gap:20px; font-size:8px; }
  .device-shadow { left:20px; top:560px; width:280px; }
  .ambient-wave { left:-60%; width:1000px; top:60%; opacity:.16; }
  .light-orbit { left:-40%; top:40%; width:750px; height:480px; }
  .manifesto { padding:65px 0; }
  .manifesto h2 { font-size:35px; }
  .eyebrow { font-size:10px; }
  .section-description { font-size:13px; }
  .feature-strip { gap:20px 25px; flex-wrap:wrap; margin-top:29px; font-size:10px; }
  .feature-strip span { gap:7px; }
  .feature-strip svg { width:16px; }
  .experience { padding:60px 0 35px; }
  .experience-heading { display:block; }
  .experience-heading h2 { font-size:45px; }
  .experience-heading>p { margin-top:22px; font-size:12px; }
  .experience-tabs { width:100%; max-width:360px; margin-top:25px; }
  .demo-console { grid-template-columns:1fr; border-radius:20px; min-height:0; }
  .demo-sidebar { display:none; }
  .demo-main { padding:23px 17px; }
  .demo-topline { font-size:9px; }
  .demo-panels { height:245px; }
  .active-line { font-size:23px; }
  .previous-line,.next-line { font-size:12px; }
  .translation { font-size:11px; }
  .demo-hint { font-size:10px; line-height:1.8; }
  .demo-hint>span { display:block; margin-left:0; font-size:9px; }
  .slice-item { gap:8px; padding:13px 10px; flex-wrap:wrap; }
  .slice-item strong { font-size:12px; }
  .slice-item button { padding:10px; font-size:10px; margin-left:auto; }
  .slice-icon svg { width:18px; }
  .demo-panel label { font-size:17px; }
  .details { padding:65px 0; }
  .details-heading h2 { font-size:35px; }
  .availability { padding-top:25px; padding-bottom:65px; }
  .availability h2 { font-size:53px; }
  .footer { flex-wrap:wrap; font-size:9px; line-height:1.6; gap:8px 20px; }
  .footer>span:nth-child(2) { display:none; }
}
@media(max-width:370px) {
  .product-nav nav { gap:10px; }
  .hero h1 { font-size:54px; }
  .hero-stage { transform:scale(.9); transform-origin:top center; margin-bottom:-60px; }
  .active-line { font-size:20px; }
  .hero-chapters { gap:14px; }
  .demo-panel label { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; }
  .motion-ready .reveal:not(.visible) { opacity:1; transform:none; }
  .demo-panel { transform:none; }
  .hero { height:auto; }
  .hero-sticky { position:relative; top:0; }
}
@media(prefers-reduced-transparency:reduce) {
  .product-bar { background:#070c16; backdrop-filter:none; }
  .detail-float { background:#152746; backdrop-filter:none; }
}
@media(prefers-contrast:more) {
  .muted,.section-description,.local-footnote p { color:#a9bedc; }
  .product-bar,.demo-console,.detail-float { border-color:#a3b4d3; }
}

/* Official supplied artwork is used intact, including its light background. */
.app-mark { background:#f7f7fa; border:0; overflow:hidden; box-shadow:0 0 22px #7c9fea22; }
.app-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.large-mark { width:88px; height:88px; border-radius:22px; box-shadow:0 0 80px #7c9fea22; }

/* Light mode is a web interpretation; the supplied native references are dark. */
:root { color-scheme:dark; }
.theme-toggle { display:flex; align-items:center; gap:6px; padding:8px; border:1px solid var(--line); border-radius:22px; color:var(--muted); font-size:10px; }
.theme-toggle svg { width:17px; height:17px; }
:root[data-theme=light] { color-scheme:light; --paper:#f7f9fc; --ink:#17263d; --muted:#65748b; --orange:#bc661a; --line:#152c4d18; --night:#edf2fa; }
[data-theme=light] .product-bar { background:#f7f9fce8; }
[data-theme=light] .product-nav nav { color:#53647c; }
[data-theme=light] .status-pill { color:#98531b; background:#fff5e8; border-color:#b57c3838; }
[data-theme=light] .hero-sticky { background:radial-gradient(ellipse at 78% 30%,#cbdcf6bb,transparent 58%),radial-gradient(ellipse at 22% 90%,#e8eff9,transparent 60%),#f7f9fc; }
[data-theme=light] .hero-atmosphere:after { background:linear-gradient(0deg,#f7f9fc,transparent 27%,transparent 90%,#f7f9fc99); }
[data-theme=light] .light-orbit { border-color:#5277ac1c; box-shadow:none; }
[data-theme=light] .ambient-wave { opacity:.25; }
[data-theme=light] .hero h1>span { background:linear-gradient(120deg,#384f78,#b66c29); background-clip:text; text-shadow:none; }
[data-theme=light] .hero-description,[data-theme=light] .eyebrow,[data-theme=light] .section-description,[data-theme=light] .experience-heading>p { color:#60728d; }
[data-theme=light] .muted { color:#778ba7; }
[data-theme=light] .warm-text,[data-theme=light] .experience-heading h2>span { color:#b36c2b; }
[data-theme=light] .phone-screen { background:linear-gradient(160deg,#dce8fb,#f2f6fe 55%,#fff); color:#152943; }
[data-theme=light] .phone { border-color:#c7cdd7; background:linear-gradient(140deg,#fff,#9ca9bb,#edf2f9); box-shadow:22px 30px 70px #263d6733,inset 0 0 0 2px #fff8; }
[data-theme=light] .phone-transcript { color:#6f8199; }
[data-theme=light] .phone-transcript .phone-current,[data-theme=light] .phone-bottom>svg:last-child,[data-theme=light] .phone-bottom button { color:#17263d; }
[data-theme=light] .phone-current small,[data-theme=light] .phone-tools { color:#985a24; }
[data-theme=light] .home-indicator { background:#15294366; }
[data-theme=light] .detail-float { background:linear-gradient(120deg,#fffffff2,#edf4fff0); border-color:#fff; box-shadow:0 20px 65px #304d7525; }
[data-theme=light] .subtitle-float p { color:#1c304e; }
[data-theme=light] .detail-label,[data-theme=light] .subtitle-float small { color:#5a7092; }
[data-theme=light] .hero-chapters .chapter-active { color:#985f2d; }
[data-theme=light] .feature-strip { color:#556c8c; }
[data-theme=light] .experience { background:radial-gradient(ellipse at 40% 60%,#dde8fb99,transparent 66%),#edf2fa; border-color:#5277ac14; }
[data-theme=light] .experience-tabs { background:#e1e7f0; border-color:#152c4d0c; }
[data-theme=light] .experience-tabs button { color:#586d8c; }
[data-theme=light] .experience-tabs button[aria-selected=true] { color:#8e541b; }
[data-theme=light] .tab-indicator { background:#fff9ef; border-color:#b97a3233; }
[data-theme=light] .demo-console { background:linear-gradient(145deg,#e1eafa,#f8fbff 65%,#fff); border-color:#fff; box-shadow:0 30px 80px #27426916; }
[data-theme=light] .demo-sidebar { background:#cfdcf333; border-color:#9eaec22b; }
[data-theme=light] .demo-topline,[data-theme=light] .demo-topline>span:first-child,[data-theme=light] .panel-eyebrow,[data-theme=light] .demo-file { color:#6c7c94; }
[data-theme=light] .active-line,[data-theme=light] .demo-controls button { color:#1c304e; }
[data-theme=light] .demo-controls .round-play { color:white; }
[data-theme=light] .previous-line,[data-theme=light] .next-line { color:#6d809c; }
[data-theme=light] .translation,[data-theme=light] .answer-feedback,[data-theme=light] .slice-feedback,[data-theme=light] .demo-hint { color:#536c8f; }
[data-theme=light] .dictation-top { color:#9c622c; }
[data-theme=light] .dictation-guide { color:#627694; }
[data-theme=light] .dictation-sentence { background:#fff; color:#208443; box-shadow:inset 0 0 0 1px #243d6512; }
[data-theme=light] .dictation-sentence input[aria-invalid=false] { color:#208443; border-color:#208443; }
[data-theme=light] .dictation-actions button { background:#dfe7f3; }
[data-theme=light] .workspace-tabs button[aria-selected=true] { color:#9d5d20; background:linear-gradient(110deg,#fff2df,#fff); }
[data-theme=light] .workspace-tabs small,[data-theme=light] .workspace-note { color:#6d7f99; }
[data-theme=light] .workspace-device { color:#202126; background:#f6f6f8; border-color:#fff; box-shadow:0 35px 90px #27426922,inset 0 1px #fff; }
[data-theme=light] .library-counts>span,[data-theme=light] .native-folder,[data-theme=light] .native-recorder,[data-theme=light] .native-drafts,[data-theme=light] .analysis-filter,[data-theme=light] .native-metrics,[data-theme=light] .analysis-rows { background:white; box-shadow:0 1px 0 #17263d08; }
[data-theme=light] .native-add { background:#ff9f42; }
[data-theme=light] .playlist-art.recently { color:white; }
[data-theme=light] .native-caption,[data-theme=light] .native-explanation,[data-theme=light] .native-metrics small,[data-theme=light] .native-heading small,[data-theme=light] .native-folder small,[data-theme=light] .native-drafts small,[data-theme=light] .analysis-rows b,[data-theme=light] .library-counts b,[data-theme=light] .playlist-shelf small,[data-theme=light] .native-recorder p { color:#777b83; }
[data-theme=light] .record-actions button { background:#fff0df; }
[data-theme=light] .record-line { background:#e2e3e8; }
[data-theme=light] .native-drafts>div+div,[data-theme=light] .analysis-rows>div+div { border-color:#17263d14; }
[data-theme=light] .analysis-toggle button { color:#69717f; }
[data-theme=light] .analysis-toggle button[aria-pressed=true] { color:#a45e20; background:#fff0df; }
[data-theme=light] .native-mini-player { background:linear-gradient(120deg,#fff,#e8e9ee); border-color:#fff; }
[data-theme=light] .native-mini-player>span { color:white; }
[data-theme=light] .native-mini-player small { color:#7b808a; }
[data-theme=light] .native-bottom { background:linear-gradient(#eeeef2,#dddfe5); border-color:#fff; }
[data-theme=light] .native-bottom .selected { background:white; }
[data-theme=light] .local-footnote>svg { color:#6d87a8; }
[data-theme=light] .local-footnote p { color:#697c98; }
[data-theme=light] .availability { background:radial-gradient(ellipse at 50% 110%,#d7e4f8aa,transparent 70%); }
[data-theme=light] .availability h2 { background:linear-gradient(#172a47,#6581a9); background-clip:text; }
[data-theme=light] .availability>p:not(.eyebrow),[data-theme=light] .back-top { color:#667c9b; }
[data-theme=light] .coming-soon { color:#975921; border-color:#c397613e; background:#fff8ee; }
@media(max-width:760px) { .theme-toggle { padding:7px; } .theme-toggle span { display:none; } .product-nav nav { gap:10px; } }
@media(max-width:370px) { .product-nav nav { gap:5px; } .theme-toggle { padding:6px; } }
@media(prefers-reduced-transparency:reduce) { [data-theme=light] .product-bar { background:#f7f9fc; } [data-theme=light] .detail-float { background:#edf4ff; } }

[data-theme=light] .phone-status { color:#253951; }
@media(max-width:760px) {
  .demo-controls>div { gap:12px; }
  .demo-controls button { min-width:32px; }
}
.hero h1 small { display:block; font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--muted); margin-bottom:16px; }
.capabilities { padding:10px 0 95px; }
.capabilities-heading h2 { font-size:clamp(34px,4vw,54px); margin-top:20px; }
.capabilities-heading>p:last-child { font-size:14px; line-height:1.9; color:var(--muted); margin-top:24px; }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:35px 38px; margin-top:45px; }
.capability-item { border-top:1px solid var(--line); padding-top:25px; }
.capability-item>svg { color:var(--orange); width:23px; height:23px; }
.capability-item h3 { font-size:18px; line-height:1.5; font-weight:550; margin-top:16px; }
.capability-item p { color:var(--muted); font-size:12px; line-height:1.9; margin-top:12px; }
.app-questions { max-width:900px; padding:0 0 90px; }
.app-questions h2 { font-size:28px; margin-bottom:30px; }
.app-questions details { border-bottom:1px solid var(--line); padding:0 2px; }
.app-questions summary { cursor:pointer; font-size:15px; font-weight:500; padding:22px 0; line-height:1.7; }
.app-questions summary::marker { color:var(--orange); }
.app-questions summary:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.app-questions details p { color:var(--muted); font-size:13px; line-height:1.95; padding:0 0 23px; }
@media(max-width:760px) {
  .hero h1 small { font-size:11px; margin-bottom:12px; }
  .capabilities { padding-bottom:60px; }
  .capabilities-heading>p:last-child { font-size:12px; }
  .capability-grid { grid-template-columns:repeat(2,1fr); gap:25px 22px; margin-top:30px; }
  .capability-item h3 { font-size:15px; }
  .capability-item p { font-size:11px; }
  .app-questions { padding-bottom:60px; }
  .app-questions h2 { font-size:25px; }
  .app-questions summary { font-size:13px; }
  .app-questions details p { font-size:12px; }
}
@media(max-width:370px) { .capability-grid { grid-template-columns:1fr; } }
/* Locale and content changes: short, interruptible transitions. */
.product-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:15px; padding-top:8px; }
.language-nav { display:flex; gap:6px; }
.language-nav a { font-size:10px; color:var(--muted); padding:6px 10px; border-radius:20px; border:1px solid transparent; }
.language-nav a[aria-current] { color:var(--ink); border-color:var(--line); background:#8199c012; }
.product-nav { height:58px; }
.product-bar { position:sticky; }
.hero-sticky { top:96px; height:calc(100svh - 96px); }
html { scroll-padding-top:115px; }
html:lang(en) .hero h1 { font-size:clamp(54px,5.6vw,76px); line-height:1.12; letter-spacing:-.055em; }
html:lang(ja) .hero h1 { font-size:clamp(64px,6.8vw,94px); }
html:lang(en) .hero h1 small,html:lang(ja) .hero h1 small { font-size:12px; letter-spacing:0; }
html:lang(en) .hero-description,html:lang(ja) .hero-description { font-size:14px; }
html:lang(en) .phone-tools { font-size:7px; gap:3px; }
html:lang(en) .phone-track strong { font-size:13px; }
html:lang(en) .workspace-tabs strong { font-size:20px; }
html:lang(en) .native-heading small { max-width:50%; text-align:right; }
html:lang(en) .native-metrics small { font-size:10px; }
html:lang(en) .dictation-sentence { font-size:19px; }
html:lang(en) .answer-feedback,html:lang(ja) .answer-feedback { font-size:10px; line-height:1.7; }
.demo-source-icon { display:grid; place-items:center; width:80px; height:80px; border-radius:20px; background:#ffa74814; color:var(--orange); }
.demo-source-icon svg { width:40px; height:40px; }
.demo-console.instant .demo-panel,.experience-tabs.instant .tab-indicator { transition:none; }
.device-continuity { padding:5px 0 90px; }
.device-continuity h2 { margin-top:24px; }
.device-continuity>p:not(.eyebrow) { font-size:15px; line-height:1.9; color:var(--muted); max-width:680px; margin-top:25px; }
.platform-pills { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.platform-pills span { border:1px solid var(--line); border-radius:25px; padding:11px 20px; font-size:13px; }
.platform-pills .platform-future { color:var(--muted); border-style:dashed; }
.cloud-summary { display:flex; gap:22px; border-top:1px solid var(--line); padding-top:30px; max-width:850px; }
.cloud-summary>svg { flex-shrink:0; color:var(--orange); width:28px; height:28px; }
.cloud-summary h3 { font-size:24px; font-weight:550; }
.cloud-summary p { color:var(--muted); font-size:14px; line-height:1.9; margin-top:14px; }
.cloud-summary small { display:block; color:var(--muted); font-size:11px; line-height:1.8; margin-top:14px; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:240ms; animation-timing-function:cubic-bezier(.23,1,.32,1); }
@media(hover:hover) and (pointer:fine) { .language-nav a:hover { color:var(--orange); background:#8199c012; } }
@media(max-width:1100px) { html:lang(en) .hero h1 { font-size:59px; } }
@media(max-width:760px) {
  .product-toolbar { justify-content:space-between; padding-top:5px; gap:6px; }
  .language-nav { gap:2px; }
  .language-nav a { font-size:10px; padding:6px 7px; }
  .product-nav { height:56px; }
  .hero-sticky { top:0; height:auto; }
  .product-brand { font-size:18px; }
  html:lang(en) .product-brand { font-size:17px; gap:7px; }
  .product-nav nav .status-pill { padding:7px 9px; }
  html:lang(en) .product-nav nav>a[href="#experience"] { font-size:9px; max-width:44px; text-align:center; }
  html:lang(en) .hero h1 { font-size:clamp(43px,10vw,70px); }
  html:lang(ja) .hero h1 { font-size:clamp(48px,11vw,72px); }
  html:lang(en) .workspace-tabs strong { font-size:11px; white-space:normal; }
  html:lang(en) .workspace-tabs button { padding:12px 5px; }
  html:lang(en) .workspace-tabs svg { display:none; }
  html:lang(en) .native-title h3 { font-size:25px; }
  html:lang(en) .library-counts>span { font-size:10px; }
  html:lang(en) .record-actions button { font-size:10px; padding:12px 10px; }
  .device-continuity { padding-bottom:60px; }
  .device-continuity h2 { font-size:34px; }
  .device-continuity>p:not(.eyebrow) { font-size:13px; }
  .cloud-summary { gap:15px; }
  .cloud-summary h3 { font-size:21px; }
  .cloud-summary p { font-size:12px; }
  .platform-pills span { font-size:11px; padding:10px 15px; }
}
@media(max-width:370px) {
  html:lang(en) .product-brand { font-size:15px; }
  html:lang(en) .product-nav nav .status-pill { font-size:8px; padding:6px 7px; }
  html:lang(en) .dictation-sentence { font-size:14px; }
  html:lang(en) .native-title h3 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation:none!important; }
  .hero-sticky { top:0; }
}

.site-menu { position:relative; flex-shrink:0; }
.site-menu summary { display:flex; align-items:center; gap:2px; font-size:10px; color:var(--muted); cursor:pointer; list-style:none; padding:6px 0 6px 8px; }
.site-menu summary::-webkit-details-marker { display:none; }
.site-menu summary svg { width:14px; height:14px; transition:transform 180ms var(--ease-out); }
.site-menu[open] summary svg { transform:rotate(180deg); }
.site-menu summary:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:5px; }
.site-menu-links { position:absolute; right:0; top:calc(100% + 8px); width:180px; padding:7px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 12px 36px #0003; z-index:40; }
.site-menu-links a { display:block; padding:12px 14px; font-size:12px; color:var(--muted); border-radius:10px; }
.site-menu-links a:hover,.site-menu-links a:focus-visible { color:var(--ink); background:#8199c018; }
@media(prefers-reduced-motion:reduce) { .site-menu summary svg { transition:none; } }

.legal-links { display:flex; justify-content:center; gap:25px; padding:24px 0; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }

.footer-filings { display:flex; flex-wrap:wrap; gap:10px 20px; grid-column:1 / -1; font-size:11px; line-height:1.7; }
.footer-filings a { white-space:normal; overflow-wrap:anywhere; }