/* Material Design 3 色彩角色、层级与形状；品牌蓝紫搭配创作房间的青绿。 */
:root { color-scheme: light; --primary:#5146a0; --on-primary:#fff; --primary-container:#e8dfff; --on-primary-container:#20144c; --secondary:#006b60; --secondary-container:#d1f0e7; --on-secondary-container:#00382f; --tertiary:#435e91; --tertiary-container:#d8e3ff; --surface:#fbf9ff; --surface-container-low:#f5f1fa; --surface-container:#efebf5; --surface-container-high:#e9e5ef; --on-surface:#201e27; --on-surface-variant:#5e5969; --outline:#80778f; --outline-variant:#d7cfdf; --inverse-surface:#322e3c; --inverse-on-surface:#f4effa; --shadow:0 12px 40px #35246d14; --font:"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --ease:cubic-bezier(.2,0,0,1); --radius:28px; }
:root[data-theme=dark] { color-scheme:dark; --primary:#cec0ff; --on-primary:#2a1e65; --primary-container:#433487; --on-primary-container:#e8dfff; --secondary:#91d5c3; --secondary-container:#124f43; --on-secondary-container:#c0efde; --tertiary:#b2c6f7; --tertiary-container:#2a456f; --surface:#141319; --surface-container-low:#1d1b23; --surface-container:#24212b; --surface-container-high:#2d2935; --on-surface:#e8e1ee; --on-surface-variant:#c5bdce; --outline:#958bA4; --outline-variant:#4a4256; --inverse-surface:#e8e1ee; --inverse-on-surface:#302b38; --shadow:0 16px 52px #0004; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:110px; } body { margin:0; background:var(--surface); color:var(--on-surface); font-family:var(--font); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; } button,input,select,textarea { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button { color:inherit; } ::selection { background:var(--primary-container); color:var(--on-primary-container); } :focus-visible { outline:3px solid var(--primary); outline-offset:5px; } [hidden] { display:none!important; } .icon-library { position:absolute; width:0; height:0; overflow:hidden; } .icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .skip-link { position:fixed; top:12px; left:16px; padding:12px 20px; z-index:110; border-radius:12px; background:var(--primary); color:var(--on-primary); transform:translateY(-150%); } .skip-link:focus { transform:none; }
.section-shell { width:min(1248px,calc(100% - 96px)); margin-inline:auto; } .section-space { padding-block:100px; } .eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--primary); font-size:14px; font-weight:650; letter-spacing:.06em; } .mini-symbol { font-size:21px; } h1,h2,h3,p { margin-top:0; } h2 { font-size:clamp(32px,3.6vw,48px); font-weight:600; line-height:1.35; letter-spacing:-.045em; margin-bottom:0; } h3 { font-size:21px; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:background .3s,border-color .3s; } .site-header.scrolled { background:color-mix(in srgb,var(--surface-container-low) 95%,transparent); border-color:var(--outline-variant); } .header-inner { width:min(1360px,calc(100% - 64px)); min-height:88px; margin:auto; display:flex; gap:36px; align-items:center; justify-content:space-between; } .wordmark { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; font-size:28px; font-weight:700; line-height:1; letter-spacing:-1.1px; min-height:44px; } .wordmark img { object-fit:contain; } .wordmark-dot { color:var(--primary); } .navigation { display:flex; align-items:center; gap:4px; } .navigation a { min-height:44px; padding:10px 15px; display:flex; align-items:center; border-radius:24px; font-size:14px; color:var(--on-surface-variant); font-weight:550; transition:background .2s; } .navigation a:hover,.navigation a.active { background:var(--surface-container); color:var(--on-surface); } .header-actions { display:flex; gap:8px; align-items:center; } .icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; background:transparent; border:0; border-radius:50%; transition:background .2s; flex-shrink:0; } .icon-button:hover { background:var(--surface-container-high); } .menu-toggle { display:none; }
.button { min-height:52px; padding:13px 25px; border:1px solid transparent; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:15px; font-weight:600; line-height:1.35; transition:background .22s,box-shadow .22s,transform .22s var(--ease); white-space:normal; } .button:hover { box-shadow:0 4px 12px #20144c18; transform:translateY(-1px); } .button:active { transform:scale(.98); } .button-filled { background:var(--primary); color:var(--on-primary); } .button-filled:hover { background:color-mix(in srgb,var(--primary) 90%,var(--on-primary)); } .button-tonal { background:var(--primary-container); color:var(--on-primary-container); } .button-outline { border-color:var(--outline-variant); color:var(--primary); } .button-outline:hover { background:var(--primary-container); } .button-small { min-height:44px; padding:11px 20px; font-size:14px; }
.hero { display:grid; grid-template-columns:1fr 1.12fr; gap:36px; align-items:center; padding-block:82px 76px; } .hero-copy { padding-block:20px; position:relative; z-index:2; } h1 { font-weight:620; font-size:clamp(52px,5.35vw,76px); line-height:1.24; letter-spacing:-.055em; margin-bottom:28px; } h1 span { color:var(--primary); } .hero-description { color:var(--on-surface-variant); font-size:18px; max-width:460px; margin-bottom:32px; line-height:1.9; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .hero-notes { display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; font-size:13px; color:var(--on-surface-variant); } .hero-notes span { display:flex; align-items:center; gap:6px; } .hero-notes .icon { width:17px; height:17px; }
.hero-visual { position:relative; min-width:0; padding:48px 0 34px; } .visual-orbit { position:absolute; border-radius:42%; background:var(--primary-container); } .orbit-one { inset:5% -3% 1% 3%; transform:rotate(-7deg); } .orbit-two { width:150px; height:150px; top:0; right:-20px; border-radius:50%; background:var(--secondary-container); } .floating-label { position:absolute; top:3px; right:32px; display:flex; align-items:center; gap:8px; padding:10px 17px; border-radius:20px 20px 5px 20px; background:var(--secondary-container); color:var(--on-secondary-container); font-size:14px; font-weight:600; z-index:3; transform:rotate(4deg); } .label-spark { font-size:25px; } .product-shot { display:block; position:relative; width:100%; padding:0; border:1px solid var(--outline-variant); border-radius:20px; background:var(--surface-container-low); overflow:hidden; text-align:left; box-shadow:var(--shadow); } .hero-shot { transform:rotate(-1.8deg); transition:transform .4s var(--ease); } .hero-shot:hover { transform:rotate(0deg) translateY(-3px); } .shot-caption { display:flex; align-items:center; min-height:40px; gap:8px; padding:8px 15px; font-size:12px; border-bottom:1px solid var(--outline-variant); color:var(--on-surface-variant); } .shot-mode { margin-left:auto; font-size:11px; } .screenshot { width:100%; height:auto; } .shot-hint { position:absolute; bottom:12px; right:12px; font-size:12px; background:#1d173ddc; color:#fff; padding:5px 10px; border-radius:14px; } .visual-caption { display:flex; align-items:center; justify-content:flex-end; gap:12px; position:relative; margin-top:26px; padding-right:14px; color:var(--on-surface-variant); font-size:13px; } .caption-line { width:42px; height:1px; background:var(--outline); } .tiny-flower { color:var(--primary); font-size:32px; line-height:1; }
.intro-strip { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--outline-variant); border-bottom:1px solid var(--outline-variant); padding:24px 8px; } .intro-strip p { margin:0; color:var(--on-surface-variant); font-size:18px; } .intro-strip strong { color:var(--on-surface); font-weight:550; } .intro-strip>div { display:flex; gap:15px; font-size:14px; flex-shrink:0; } .strip-separator { color:var(--outline); }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:42px; } .section-heading>p { color:var(--on-surface-variant); font-size:16px; margin-bottom:4px; max-width:365px; } .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .feature-card { display:flex; flex-direction:column; min-width:0; padding:30px; border-radius:var(--radius); background:var(--surface-container-low); transition:background .2s; } .feature-card:hover { background:var(--surface-container); } .feature-primary { background:var(--primary-container); color:var(--on-primary-container); } .feature-primary:hover { background:color-mix(in srgb,var(--primary-container) 92%,var(--primary)); } .feature-secondary { background:var(--secondary-container); color:var(--on-secondary-container); } .feature-secondary:hover { background:color-mix(in srgb,var(--secondary-container) 92%,var(--secondary)); } .feature-icon { width:48px; height:48px; border-radius:17px; background:var(--surface); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:26px; } .feature-primary .feature-icon { color:var(--on-primary-container); background:color-mix(in srgb,var(--surface) 60%,transparent); } .feature-secondary .feature-icon { color:var(--on-secondary-container); background:color-mix(in srgb,var(--surface) 60%,transparent); } .feature-card h3 { margin-bottom:13px; } .feature-card p { font-size:15px; color:var(--on-surface-variant); margin-bottom:28px; } .feature-primary p,.feature-secondary p { color:inherit; opacity:.88; } .feature-footer { margin-top:auto; padding-top:18px; border-top:1px solid var(--outline-variant); font-size:12px; color:var(--on-surface-variant); } .feature-secondary .feature-footer { color:inherit; border-color:color-mix(in srgb,var(--secondary) 25%,transparent); } .mode-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; } .mode-chips span { border:1px solid color-mix(in srgb,var(--primary) 25%,transparent); font-size:12px; padding:5px 10px; border-radius:999px; } .mode-chips .selected { background:var(--primary); color:var(--on-primary); border-color:transparent; } .branch-graphic { display:flex; align-items:center; gap:12px; font-size:12px; margin-top:auto; padding-top:8px; } .branch-graphic i { width:40px; height:1px; background:var(--outline-variant); } .branch-graphic b { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--tertiary-container); color:var(--tertiary); font-weight:550; }
.start-teaser { text-align:center; background:var(--primary-container); border-radius:40px; padding:70px 24px; color:var(--on-primary-container); margin-bottom:70px; } .start-teaser .eyebrow { justify-content:center; } .start-teaser h2 { margin-bottom:28px; } .small-note { font-size:13px; color:var(--on-surface-variant); margin:16px 0 0; } .site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:26px; padding:32px 0 38px; border-top:1px solid var(--outline-variant); color:var(--on-surface-variant); font-size:13px; } .site-footer .wordmark { color:var(--on-surface); font-size:25px; } .site-footer p { margin:0; margin-right:auto; } .site-footer a:not(.wordmark) { min-height:44px; display:flex; align-items:center; } .site-footer a:not(.wordmark):hover { color:var(--primary); }
.image-dialog { border:1px solid var(--outline-variant); border-radius:24px; background:var(--surface-container-low); color:var(--on-surface); width:min(1300px,95vw); max-height:94dvh; padding:16px; box-shadow:var(--shadow); } .image-dialog::backdrop { background:#100e20b8; backdrop-filter:blur(5px); } .dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; } .dialog-top h2 { font-size:19px; letter-spacing:0; } .image-dialog>img { border-radius:12px; width:100%; max-height:76dvh; object-fit:contain; } .image-dialog>p { font-size:13px; text-align:center; color:var(--on-surface-variant); margin:14px 0 0; } .snackbar { position:fixed; z-index:100; bottom:max(28px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); min-width:240px; background:var(--inverse-surface); color:var(--inverse-on-surface); border-radius:12px; padding:14px 22px; text-align:center; box-shadow:var(--shadow); font-size:14px; }
.workflow { padding-top:0; } .workflow-layout { display:grid; grid-template-columns:360px 1fr; gap:32px; } .workflow-tabs { display:flex; flex-direction:column; gap:8px; } .workflow-tab { display:flex; align-items:center; gap:18px; min-height:96px; border:0; background:transparent; padding:20px 22px; border-radius:24px; text-align:left; transition:background .2s; } .workflow-tab>span { font-size:15px; color:var(--outline); } .workflow-tab>div { flex:1; } .workflow-tab b { display:block; font-size:17px; font-weight:600; } .workflow-tab small { font-size:13px; color:var(--on-surface-variant); } .workflow-tab>.icon { color:var(--on-surface-variant); } .workflow-tab[aria-selected=true] { background:var(--primary-container); color:var(--on-primary-container); } .workflow-tab[aria-selected=true]>span,.workflow-tab[aria-selected=true]>.icon { color:var(--primary); } .workflow-tab:hover { background:var(--surface-container); } .workflow-panel { position:relative; display:flex; align-items:center; justify-content:center; padding:44px; background:var(--surface-container-low); border-radius:36px; overflow:hidden; min-height:408px; } .workflow-number { position:absolute; right:12px; bottom:-42px; font-size:230px; line-height:1; font-weight:700; letter-spacing:-18px; color:var(--surface-container-high); user-select:none; } .workflow-paper { background:var(--surface); border:1px solid var(--outline-variant); border-radius:22px; padding:30px; position:relative; box-shadow:0 10px 30px #30234d07; width:100%; max-width:490px; } .paper-label { font-size:12px; color:var(--primary); display:block; margin-bottom:14px; } .workflow-paper h3 { font-size:24px; margin-bottom:16px; } .workflow-paper p { color:var(--on-surface-variant); font-size:15px; margin-bottom:24px; } .workflow-tools { display:flex; flex-wrap:wrap; gap:8px; } .workflow-tools span { font-size:12px; color:var(--on-primary-container); background:var(--primary-container); padding:5px 11px; border-radius:8px; } .paper-lines { display:flex; flex-direction:column; gap:8px; margin-top:24px; } .paper-lines i { height:3px; border-radius:2px; background:var(--surface-container); width:100%; } .paper-lines i:nth-child(2) { width:85%; } .paper-lines i:nth-child(3) { width:60%; }
.vibe-section { background:var(--secondary-container); padding-block:90px; position:relative; overflow:hidden; color:var(--on-secondary-container); } .vibe-inner { display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:center; } .vibe-copy .eyebrow { color:var(--secondary); } .vibe-copy h2 { font-size:clamp(36px,4.3vw,58px); } .vibe-copy>p:not(.eyebrow) { margin-top:26px; max-width:430px; color:var(--on-secondary-container); opacity:.88; font-size:16px; } .vibe-benefits { display:flex; flex-direction:column; gap:15px; font-size:14px; margin:30px 0; } .vibe-benefits span { display:flex; align-items:center; gap:10px; } .vibe-copy>.vibe-small { font-size:14px!important; line-height:1.9; } .room-preview { --scene-accent:#d7a96b; --scene-base:#232328; border-radius:32px; background:#1d2029; color:#f4eff6; padding:20px; box-shadow:0 24px 55px #06382b22; min-width:0; } .room-preview[data-scene=ocean] { --scene-accent:#60c3cc; --scene-base:#123439; } .room-preview[data-scene=neon] { --scene-accent:#b49fea; --scene-base:#2b2244; } .room-preview[data-scene=train] { --scene-accent:#a9bbd7; --scene-base:#222f42; } .room-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 5px; } .preview-pill { border:1px solid #ffffff32; color:#dad4e5; border-radius:14px; padding:4px 10px; font-size:11px; } .audio-status { font-size:11px; color:#ccc5d7; } .scene-stage { min-height:280px; margin-top:14px; padding:36px 15px 16px; border-radius:23px; background:var(--scene-base); position:relative; text-align:center; overflow:hidden; transition:background .5s; } .scene-glow { position:absolute; width:240px; height:240px; border-radius:50%; background:color-mix(in srgb,var(--scene-accent) 20%,transparent); filter:blur(35px); top:-90px; left:calc(50% - 120px); pointer-events:none; } .scene-rings { position:absolute; width:370px; height:370px; top:-200px; left:calc(50% - 185px); border:1px solid color-mix(in srgb,var(--scene-accent) 13%,transparent); border-radius:50%; pointer-events:none; } .scene-rings i { position:absolute; inset:22px; border:1px solid color-mix(in srgb,var(--scene-accent) 15%,transparent); border-radius:50%; } .scene-rings i:nth-child(2) { inset:50px; } .scene-rings i:nth-child(3) { inset:80px; } .scene-symbol { font-size:52px; color:var(--scene-accent); line-height:1.15; position:relative; margin-bottom:18px; } .scene-name { font-size:24px; font-weight:550; position:relative; margin-bottom:7px; } .scene-description { font-size:13px; color:#d3ccde; position:relative; } .room-pet { display:flex; align-items:center; justify-content:center; gap:12px; position:relative; padding:14px 16px; margin:22px auto 0; min-height:58px; border:1px solid #ffffff18; background:#ffffff06; border-radius:18px; width:100%; color:#cfc8d9; font-size:12px; } .website-koi { width:58px; height:30px; display:block; position:relative; flex-shrink:0; animation:koi-swim 4s ease-in-out infinite; } .koi-body { position:absolute; left:14px; top:5px; width:40px; height:21px; background:#eae0cb; border-radius:55% 55% 45% 45%; transform:rotate(-8deg); } .koi-spot { position:absolute; width:17px; height:10px; border-radius:40% 60%; top:1px; left:10px; background:#d77659; transform:rotate(14deg); } .koi-spot::after { content:""; position:absolute; width:9px; height:10px; border-radius:50%; left:-8px; top:6px; background:#b77a60; } .koi-eye { position:absolute; right:3px; top:4px; width:3px; height:3px; border-radius:50%; background:#32342e; } .koi-tail { position:absolute; left:3px; top:5px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #dfb38a; transform:rotate(10deg); } .koi-fin { position:absolute; left:24px; top:20px; width:15px; height:8px; background:#c6a47d; border-radius:0 0 70% 70%; transform:rotate(-20deg); } @keyframes koi-swim { 0%,100% { transform:translateX(-2px) rotate(-3deg); } 50% { transform:translateX(2px) rotate(3deg); } }
.scene-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:18px 0; } .scene-tabs button { border:1px solid transparent; background:transparent; border-radius:14px; min-height:44px; padding:8px 4px; color:#c7bfd4; font-size:12px; } .scene-tabs button[aria-selected=true] { background:#ffffff14; color:var(--scene-accent); border-color:#ffffff24; } .scene-tabs button:hover { background:#ffffff12; } .audio-controls { display:flex; align-items:center; gap:16px; justify-content:space-between; } .audio-controls .button { background:var(--scene-accent); color:#1a2630; min-width:150px; font-size:13px; } .volume-control { display:flex; align-items:center; min-width:0; gap:8px; color:#d1cadb; flex:1; } .volume-control>.icon { width:18px; height:18px; } input[type=range] { min-width:0; width:100%; cursor:pointer; accent-color:var(--scene-accent); min-height:40px; } .volume-control output { min-width:34px; font-size:11px; } .audio-note { margin:16px 0 1px; color:#bfb6cf; text-align:center; font-size:11px; }
.device-layout { display:grid; grid-template-columns:.85fr 1.25fr; gap:70px; align-items:center; } .segmented-tabs { display:inline-flex; border:1px solid var(--outline-variant); border-radius:99px; padding:4px; gap:3px; margin-bottom:34px; } .segmented-tabs button { min-height:44px; padding:9px 17px; display:flex; align-items:center; gap:7px; border:0; border-radius:99px; background:transparent; font-size:14px; } .segmented-tabs button[aria-selected=true] { background:var(--primary-container); color:var(--on-primary-container); } .segmented-tabs button:hover { background:var(--surface-container-high); } .segmented-tabs .icon { width:18px; height:18px; } .device-copy h3 { font-size:26px; margin-bottom:16px; } .device-copy>p { color:var(--on-surface-variant); font-size:15px; margin-bottom:22px; } .device-copy ul { list-style:none; padding:0; margin:0 0 24px; font-size:14px; } .device-copy li { padding:8px 0 8px 24px; position:relative; } .device-copy li::before { content:""; width:6px; height:6px; position:absolute; border-radius:50%; background:var(--primary); left:3px; top:19px; } .device-copy>.device-footnote { font-size:12px; color:var(--on-surface-variant); margin-bottom:0; } .device-panel { min-height:440px; display:flex; align-items:center; justify-content:center; border-radius:36px; padding:28px; background:var(--tertiary-container); min-width:0; } .device-shot { border-radius:18px; max-width:640px; } .device-panel[data-device=mobile] .device-shot { width:190px; border-radius:25px; box-shadow:0 14px 34px #27365c22; } .device-panel[data-device=mobile] { padding-block:12px; }
.trust-section { display:grid; grid-template-columns:1fr 1fr; border-radius:40px; overflow:hidden; background:var(--surface-container-low); } .trust-intro { padding:48px; background:var(--primary-container); color:var(--on-primary-container); } .trust-icon { display:grid; place-items:center; width:62px; height:62px; background:color-mix(in srgb,var(--surface) 45%,transparent); border-radius:22px; margin-bottom:26px; color:var(--primary); } .trust-icon .icon { width:30px; height:30px; } .trust-intro .eyebrow { font-size:13px; } .trust-intro h2 { font-size:42px; } .trust-intro>p:not(.eyebrow) { font-size:15px; opacity:.9; margin:24px 0; } .trust-intro .button { border-color:color-mix(in srgb,var(--primary) 35%,transparent); } .trust-details { padding:42px; align-self:center; } .trust-details article { display:flex; gap:22px; padding-block:22px; } .trust-details article+article { border-top:1px solid var(--outline-variant); } .trust-details article>span { color:var(--primary); font-size:13px; margin-top:5px; } .trust-details h3 { font-size:19px; margin-bottom:10px; } .trust-details p { font-size:14px; color:var(--on-surface-variant); margin:0; } .providers { text-align:center; padding-block:64px 0; } .providers h3 { margin-bottom:9px; } .providers>p { color:var(--on-surface-variant); font-size:14px; margin-bottom:26px; } .provider-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; } .provider-chips span { padding:9px 17px; border:1px solid var(--outline-variant); border-radius:12px; font-size:14px; background:var(--surface-container-low); }
.start-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .start-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px; } .start-steps li { display:flex; align-items:flex-start; gap:22px; } .start-steps li>span { min-width:40px; height:40px; background:var(--primary-container); border-radius:50%; display:grid; place-items:center; font-size:15px; color:var(--on-primary-container); } .start-steps h3 { font-size:19px; margin:3px 0 7px; } .start-steps p { font-size:14px; color:var(--on-surface-variant); margin:0; max-width:400px; } .source-card { background:var(--surface-container-low); border-radius:28px; border:1px solid var(--outline-variant); padding:24px 26px; min-width:0; } .source-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; } .source-heading>span { display:flex; align-items:center; gap:8px; } .source-heading .icon { width:19px; height:19px; } .source-card pre { color:var(--on-primary-container); border-radius:18px; padding:20px; background:var(--primary-container); margin:18px 0; font:14px/2 "Cascadia Code",Consolas,monospace; overflow-x:auto; max-width:100%; } .source-card>p { color:var(--on-surface-variant); font-size:12px; margin-bottom:15px; } .text-link { display:inline-flex; align-items:center; min-height:40px; gap:8px; font-size:13px; font-weight:600; color:var(--primary); } .text-link .icon { width:18px; height:18px; } .text-link:hover { text-decoration:underline; } .release-note { color:var(--on-surface-variant); font-size:12px; margin:36px 0 0; padding-top:20px; border-top:1px solid var(--outline-variant); }
.faq { display:grid; grid-template-columns:.68fr 1.32fr; gap:80px; padding-bottom:90px; } .faq-heading { padding-top:16px; } .faq-list details { border-bottom:1px solid var(--outline-variant); } .faq-list summary { list-style:none; display:flex; gap:20px; align-items:center; justify-content:space-between; min-height:76px; padding:20px 8px; cursor:pointer; font-size:16px; font-weight:550; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary:hover { color:var(--primary); } .faq-plus { font-size:24px; color:var(--primary); line-height:1; transition:transform .2s; } details[open] .faq-plus { transform:rotate(45deg); } .faq-list details>p { margin:0; padding:0 40px 24px 8px; color:var(--on-surface-variant); font-size:14px; line-height:1.9; } .closing { display:flex; gap:30px; align-items:center; background:var(--secondary-container); color:var(--on-secondary-container); border-radius:32px; padding:40px; margin-bottom:68px; } .closing-star { font-size:70px; color:var(--secondary); line-height:1; flex-shrink:0; } .closing>div { flex:1; } .closing p { font-size:14px; margin-bottom:8px; } .closing h2 { font-size:28px; letter-spacing:-.03em; } .closing .button { background:var(--secondary); color:#fff; } :root[data-theme=dark] .closing .button { color:var(--on-secondary-container); background:#174f42; }
@media(min-width:1600px) { .hero { padding-block:106px 92px; } }
@media(max-width:1100px) { .header-inner { gap:20px; } .navigation a { padding-inline:10px; } .section-shell { width:calc(100% - 64px); } .hero { gap:26px; grid-template-columns:1fr 1fr; padding-block:60px; } h1 { font-size:54px; } .hero-description { font-size:16px; } .feature-card { padding:24px; } .hero-actions .button { padding-inline:20px; } .intro-strip { align-items:flex-start; flex-direction:column; gap:12px; } }
@media(max-width:900px) { .navigation { position:absolute; top:76px; right:24px; min-width:230px; padding:12px; flex-direction:column; align-items:stretch; border:1px solid var(--outline-variant); border-radius:22px; background:var(--surface-container); box-shadow:var(--shadow); display:none; } .navigation.open { display:flex; } .navigation a { padding:12px 18px; } .menu-toggle { display:flex; } .header-inner { min-height:76px; } .hero { grid-template-columns:1fr; gap:26px; padding-top:45px; } .hero-copy { max-width:620px; } h1 { font-size:68px; } .hero-description { max-width:510px; font-size:18px; } .hero-visual { width:90%; margin:0 auto; max-width:720px; } .hero-shot { transform:rotate(-1deg); } .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-heading { flex-direction:column; align-items:flex-start; gap:18px; } .section-heading>p { max-width:550px; } .section-heading>p br { display:none; } .section-space { padding-block:76px; } }
@media(max-width:600px) { html { scroll-padding-top:88px; } .header-inner { width:calc(100% - 32px); min-height:72px; gap:12px; } .header-actions { gap:1px; } .wordmark { font-size:25px; gap:7px; } .wordmark img { width:22px; height:31px; } .header-cta { min-height:40px; padding:9px 13px; font-size:12px; } .icon-button { width:40px; height:40px; padding:9px; } .navigation { top:72px; right:16px; left:16px; min-width:0; } .section-shell { width:calc(100% - 40px); } .hero { padding:36px 0 46px; gap:14px; } .hero-copy { padding:0; } .eyebrow { font-size:12px; margin-bottom:18px; letter-spacing:.04em; } h1 { font-size:clamp(45px,12.5vw,64px); margin-bottom:22px; line-height:1.25; } .hero-description { font-size:16px; line-height:1.85; margin-bottom:26px; } .hero-actions { gap:9px; } .hero-actions .button { font-size:14px; min-height:48px; padding-inline:19px; } .hero-notes { margin-top:22px; gap:14px; font-size:12px; } .hero-notes .icon { width:16px; height:16px; } .hero-visual { width:100%; padding:43px 0 24px; } .orbit-two { width:105px; height:105px; right:-4px; top:0; } .orbit-one { inset:10% -2% 6% 1%; } .floating-label { font-size:12px; padding:7px 12px; right:12px; top:5px; } .label-spark { font-size:20px; } .product-shot { border-radius:16px; } .shot-caption { min-height:34px; padding:7px 10px; font-size:10px; } .shot-mode { font-size:10px; } .shot-caption img { width:11px; height:16px; } .shot-hint { font-size:10px; padding:3px 8px; bottom:8px; right:8px; } .visual-caption { margin-top:20px; font-size:11px; gap:10px; padding-right:0; } .caption-line { width:28px; } .tiny-flower { font-size:26px; } .intro-strip { padding:20px 0; } .intro-strip p { font-size:16px; } .intro-strip>div { gap:16px; font-size:12px; } .section-space { padding-block:58px; } h2 { font-size:32px; line-height:1.4; } .section-heading { margin-bottom:28px; gap:16px; } .section-heading>p { font-size:15px; } .feature-grid { grid-template-columns:1fr; gap:12px; } .feature-card { padding:26px; border-radius:24px; } .feature-icon { margin-bottom:20px; } .feature-card p { margin-bottom:20px; } .start-teaser { border-radius:28px; padding:48px 20px; margin-bottom:42px; } .site-footer { padding-block:26px; gap:16px; } .site-footer p { width:calc(100% - 110px); font-size:12px; } .site-footer span { margin-left:auto; font-size:12px; } .image-dialog { padding:12px; border-radius:18px; } .dialog-top h2 { font-size:15px; } }
@media(max-width:359px) { .header-cta { display:none; } .hero-notes { gap:9px; } .hero-actions .button { padding-inline:17px; } h2 { font-size:29px; } }
@media(max-width:1100px) { .vibe-inner { gap:36px; } .workflow-layout { grid-template-columns:310px 1fr; gap:20px; } .workflow-panel { padding:28px; } .device-layout { gap:36px; grid-template-columns:1fr 1.15fr; } .device-panel { min-height:390px; padding:20px; } .segmented-tabs button { padding-inline:13px; } .trust-intro { padding:36px; } .trust-details { padding:30px; } .trust-intro h2 { font-size:36px; } .faq { gap:48px; } .start-layout { gap:36px; } .audio-controls { gap:10px; } .audio-controls .button { min-width:140px; padding-inline:14px; } }
@media(max-width:900px) { .workflow-layout { grid-template-columns:1fr; } .workflow-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .workflow-tab { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px; border-radius:20px; min-height:125px; } .workflow-tab>.icon { display:none; } .workflow-tab small { font-size:12px; } .workflow-tab b { font-size:15px; } .workflow-panel { min-height:330px; } .workflow-paper { max-width:580px; } .vibe-inner { grid-template-columns:1fr; gap:32px; } .vibe-copy { max-width:600px; } .vibe-copy>p:not(.eyebrow) { max-width:600px; } .vibe-benefits { flex-direction:row; flex-wrap:wrap; gap:14px 24px; } .vibe-copy>.vibe-small { margin-bottom:0; } .room-preview { max-width:640px; width:100%; margin:auto; } .scene-stage { min-height:285px; } .device-layout { grid-template-columns:1fr; gap:32px; } .device-copy { max-width:650px; } .device-panel { min-height:440px; } .trust-intro { padding:32px; } .trust-details { padding:26px; } .trust-details article { gap:16px; } .trust-intro h2 { font-size:33px; } .start-layout { grid-template-columns:1fr; gap:34px; } .start-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .start-steps li { flex-direction:column; gap:16px; } .source-card { max-width:none; } .faq { grid-template-columns:1fr; gap:26px; } .faq-heading { padding:0; } .closing { gap:24px; padding:30px; } .closing h2 { font-size:22px; } .closing-star { font-size:56px; } }
@media(max-width:600px) { .workflow { padding-top:0; } .workflow-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .workflow-tab { flex-direction:row; gap:10px; align-items:flex-start; min-height:88px; padding:15px 12px; border-radius:17px; } .workflow-tab>span { font-size:12px; margin-top:2px; } .workflow-tab b { font-size:14px; } .workflow-tab small { display:block; font-size:12px; line-height:1.6; margin-top:4px; } .workflow-panel { padding:20px; border-radius:24px; min-height:320px; } .workflow-paper { padding:24px 20px; border-radius:18px; } .workflow-paper h3 { font-size:20px; } .workflow-paper p { font-size:14px; } .workflow-number { font-size:170px; letter-spacing:-10px; } .workflow-tools { gap:6px; } .workflow-tools span { font-size:12px; padding-inline:9px; } .vibe-section { padding-block:56px; } .vibe-copy h2 { font-size:39px; } .vibe-copy>p:not(.eyebrow) { font-size:15px; margin-top:22px; } .vibe-benefits { flex-direction:column; gap:14px; margin:25px 0; } .vibe-copy>.vibe-small { font-size:13px!important; } .vibe-inner { gap:26px; } .room-preview { padding:14px; border-radius:26px; } .room-top { gap:8px; } .scene-stage { padding:28px 12px 14px; min-height:270px; border-radius:18px; } .scene-symbol { font-size:45px; } .scene-name { font-size:23px; } .scene-description { font-size:12px; } .room-pet { font-size:12px; gap:7px; padding:12px 8px; } .scene-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-block:13px; } .scene-tabs button { min-height:44px; font-size:13px; padding-inline:2px; border-radius:12px; } .audio-controls { flex-direction:column; align-items:stretch; gap:12px; } .audio-controls .button { align-self:flex-start; max-width:100%; min-width:128px; padding:11px 12px; font-size:12px; gap:6px; } .volume-control { width:100%; gap:5px; } .volume-control .icon { width:15px; height:15px; } .volume-control output { font-size:12px; min-width:29px; } .audio-note { font-size:12px; } .segmented-tabs { margin-bottom:24px; } .segmented-tabs button { font-size:13px; min-height:42px; padding-inline:14px; gap:6px; } .device-copy h3 { font-size:24px; } .device-copy>p { font-size:14px; } .device-copy ul { font-size:13px; } .device-copy>.device-footnote { font-size:12px; } .device-panel { min-height:280px; border-radius:26px; padding:16px; } .device-panel[data-device=mobile] { min-height:440px; padding:15px; } .device-panel[data-device=mobile] .device-shot { width:190px; } .trust-section { grid-template-columns:1fr; border-radius:28px; } .trust-intro { padding:30px 26px; } .trust-intro h2 { font-size:34px; } .trust-icon { width:54px; height:54px; border-radius:18px; margin-bottom:22px; } .trust-details { padding:12px 26px; } .trust-details h3 { font-size:18px; } .trust-details p { font-size:13px; } .trust-details article { padding-block:22px; } .providers { padding-top:42px; } .providers h3 { font-size:20px; } .providers>p { font-size:13px; } .provider-chips { gap:8px; } .provider-chips span { font-size:12px; padding:8px 12px; } .get-started .section-heading>.button { align-self:flex-start; } .start-steps { display:flex; gap:23px; } .start-steps li { flex-direction:row; gap:16px; } .start-steps h3 { font-size:18px; } .start-steps p { font-size:13px; } .source-card { padding:18px; border-radius:24px; } .source-card pre { font-size:13px; padding:18px; } .source-card>p { font-size:12px; } .release-note { margin-top:26px; font-size:12px; padding-top:16px; } .faq { padding-bottom:54px; gap:24px; } .faq-list summary { font-size:14px; min-height:70px; padding:18px 4px; gap:12px; } .faq-list details>p { font-size:13px; padding:0 20px 20px 4px; } .closing { display:grid; grid-template-columns:38px 1fr; gap:18px; padding:28px 22px; margin-bottom:40px; border-radius:26px; } .closing-star { font-size:42px; } .closing p { font-size:12px; } .closing h2 { font-size:22px; } .closing .button { grid-column:2; justify-self:start; min-height:46px; font-size:14px; padding-inline:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .hero-shot,.hero-shot:hover { transform:none; } }

/* HTML 尺寸保留原图比例提示；缩放展示时高度跟随可用宽度。 */
.device-shot>img { width:100%; height:auto; object-fit:contain; }
.image-dialog>img { width:auto; height:auto; max-width:100%; margin-inline:auto; }