:root { --red:#ee3026; --red-dark:#c6251d; --ink:#24221f; --muted:#736e67; --paper:#faf8f3; --line:#e6e1d8; --shell:1240px; --header-height:84px; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 24px); scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; }
body.menu-open, html.dialog-open { overflow:hidden; }
html.dialog-open { padding-right:var(--scrollbar,0px); }
html.dialog-open .site-header { padding-right:var(--scrollbar,0px); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; cursor:pointer; }
button, a { -webkit-tap-highlight-color:transparent; }
h1,h2,h3,p,figure,dl,dd { margin:0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
[hidden] { display:none!important; }
.shell { width:min(var(--shell),calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:200; top:12px; left:16px; padding:10px 16px; color:#fff; background:var(--red); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:50; height:var(--header-height); border-bottom:1px solid transparent; background:rgba(250,248,243,.96); transition:border-color .3s,box-shadow .3s; }
.site-header.scrolled { border-color:var(--line); box-shadow:0 3px 18px rgba(45,25,14,.035); }
.header-inner { height:100%; display:flex; align-items:center; gap:36px; }
.wordmark { display:inline-flex; align-items:baseline; white-space:nowrap; font-size:29px; font-weight:850; letter-spacing:-1.5px; line-height:1.4; }
.wordmark span { color:var(--red); }
.wordmark i { color:var(--red); font-style:normal; font-size:38px; line-height:1; margin-left:2px; }
.desktop-nav { display:flex; gap:32px; margin-left:auto; font-size:14px; }
.desktop-nav a { position:relative; padding-block:10px; }
.desktop-nav a::after { content:""; position:absolute; height:2px; background:var(--red); bottom:4px; left:0; right:0; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform:scaleX(1); }
.header-action { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:42px; padding:0 20px; border:1px solid var(--red); color:var(--red); font-size:13px; font-weight:650; border-radius:6px; transition:background .2s,color .2s; }
.header-action:hover { color:#fff; background:var(--red); }
.menu-button { display:none; }
.mobile-nav { position:absolute; top:100%; left:0; right:0; padding:12px 24px 24px; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 16px 24px rgba(40,25,15,.08); }
.mobile-nav a { display:block; padding:14px 0; border-bottom:1px solid var(--line); }
.hero { min-height:690px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-block:36px 60px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--red); font-size:13px; font-weight:650; line-height:1.7; }
.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.hero h1 { margin-top:22px; font-size:clamp(62px,6vw,88px); font-weight:800; line-height:1.22; letter-spacing:-5px; }
.hero h1 > span { color:var(--red); }
.hero-description { margin-top:28px; color:var(--muted); font-size:18px; line-height:1.9; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:54px; padding:0 25px; border-radius:6px; font-size:15px; font-weight:650; transition:background .2s,transform .2s; }
.primary { color:#fff; background:var(--red); }
.primary:hover { background:var(--red-dark); transform:translateY(-2px); }
.quiet-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:14px; }
.quiet-link:hover { color:var(--red); }
.hero-footnote { display:flex; align-items:center; gap:16px; margin-top:46px; color:var(--muted); font-size:12px; }
.hero-footnote i { width:3px; height:3px; border-radius:50%; background:#c7bdb2; }
.hero-stage { position:relative; height:590px; min-width:0; }
.stage-disc { position:absolute; inset:62px 2% 40px; border-radius:50%; background:#f2ded2; }
.stage-word { position:absolute; top:13px; right:8px; font-family:"Songti SC",serif; font-size:260px; font-weight:700; line-height:1; color:#e4b1a0; opacity:.3; transform:rotate(8deg); }
.phone { position:relative; padding:5px; background:#24231f; border-radius:32px; overflow:hidden; box-shadow:0 20px 32px rgba(75,43,27,.16),0 0 0 1px rgba(36,35,31,.08); }
.phone img { width:100%; height:auto; border-radius:27px; }
.hero-phone-front { position:absolute; width:232px; top:50px; left:41%; transform:rotate(8deg); animation:front-float 7s ease-in-out 3; }
.hero-phone-back { position:absolute; width:210px; top:88px; left:4%; transform:rotate(-9deg); animation:back-float 7s .5s ease-in-out 3; }
.stage-caption { position:absolute; bottom:6px; left:20%; display:flex; align-items:center; gap:12px; font-size:12px; color:#806458; }
.caption-line { width:34px; height:1px; background:currentColor; }
@keyframes front-float { 0%,100% { transform:translateY(0) rotate(8deg); } 50% { transform:translateY(-10px) rotate(7deg); } }
@keyframes back-float { 0%,100% { transform:translateY(0) rotate(-9deg); } 50% { transform:translateY(8px) rotate(-8deg); } }
.overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line); }
.overview > a { display:flex; align-items:center; gap:20px; padding:30px 32px; border-right:1px solid var(--line); transition:background .25s; }
.overview > a:first-child { padding-left:0; }
.overview > a:last-child { border-right:0; padding-right:0; }
.overview > a:hover { background:rgba(255,255,255,.7); }
.icon { width:30px; height:30px; flex:none; fill:none; stroke:var(--red); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.overview strong { display:block; font-size:17px; font-weight:650; }
.overview small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.overview b { margin-left:auto; font-size:18px; font-weight:400; }
.experience { padding-block:98px 100px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:36px; }
h2 { margin-top:12px; font-size:42px; font-weight:750; line-height:1.35; letter-spacing:-1.2px; }
.section-heading > p { color:var(--muted); font-size:14px; line-height:1.9; }
.experience-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.experience-tabs button { position:relative; display:flex; align-items:center; gap:16px; padding:18px 24px; border:0; border-bottom:2px solid transparent; color:var(--muted); background:transparent; font-size:18px; font-weight:650; text-align:left; transition:background .25s,color .25s; }
.experience-tabs span { font-size:12px; font-weight:400; }
.experience-tabs button[aria-selected="true"] { color:var(--red); border-bottom-color:var(--red); background:#fff; }
.experience-tabs button:hover { background:#fff; }
.app-panel { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); background:#fff; }
.app-visual { position:relative; display:grid; justify-items:center; align-content:center; gap:18px; min-height:620px; padding:36px; overflow:hidden; background:#f2ede4; transition:background .35s; }
.visual-word { position:absolute; top:40px; left:0; right:0; text-align:center; font-size:128px; font-weight:800; letter-spacing:-6px; line-height:1; color:rgba(112,83,58,.075); }
.preview-phone { width:216px; margin-top:10px; border:0; cursor:zoom-in; }
.preview-phone:hover { box-shadow:0 24px 36px rgba(75,43,27,.2),0 0 0 2px #d8b1a1; }
.visual-caption { position:relative; color:var(--muted); font-size:11px; }
.app-copy { align-self:center; padding:55px 64px; }
.app-copy h3 { margin-top:20px; font-size:36px; font-weight:750; line-height:1.45; letter-spacing:-.8px; }
.app-copy > p:not(.eyebrow) { margin-top:22px; color:var(--muted); font-size:15px; line-height:1.95; }
.view-points { margin:26px 0 22px; padding:0; list-style:none; }
.view-points li { padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.view-points li::before { content:""; display:inline-block; width:5px; height:5px; margin:0 12px 3px 0; border-radius:50%; background:var(--red); }
.screen-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; padding:5px 0; border:0; border-bottom:1px solid var(--ink); background:transparent; font-size:13px; }
.screen-link:hover { color:var(--red); border-color:var(--red); }
.app-panel[data-active-view="shop"] .app-visual { background:#e9eee7; }
.app-panel[data-active-view="video"] .app-visual { background:#e2e6da; }
.app-panel[data-active-view="account"] .app-visual { background:#f8e9e3; }
.noscript-note { padding-top:20px; color:var(--muted); font-size:14px; }
.noscript-note a { color:var(--red); text-decoration:underline; }
.finds { padding-block:78px; background:#f0ece3; }
.finds-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.find-image { overflow:hidden; aspect-ratio:1; background:#e6e4db; }
.find-image img { width:100%; height:100%; object-fit:cover; image-rendering:auto; transition:transform .7s var(--ease); }
.finds-grid figure:hover img { transform:scale(1.035); }
.finds-grid figcaption { padding-top:20px; }
.finds-grid h3 { font-size:22px; font-weight:650; }
.finds-grid figcaption span { display:block; color:var(--muted); font-size:13px; margin-top:6px; }
.finds-note { margin-top:30px; color:var(--muted); font-size:11px; }
.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:90px; align-items:center; padding-block:100px; }
.about h2 { font-size:38px; }
.about-description { margin-top:22px; color:var(--muted); font-size:15px; line-height:1.95; max-width:450px; }
.company-info { border-left:1px solid var(--line); padding-left:56px; }
.company-label { color:var(--red); font-size:12px; }
.company-info h3 { margin-top:12px; font-size:22px; font-weight:700; }
.company-info dl { display:grid; gap:18px; margin-block:22px; }
.company-info dt { color:var(--muted); font-size:12px; }
.company-info dd { margin-top:4px; color:#45413c; font-size:14px; overflow-wrap:anywhere; }
.site-footer { padding-block:40px 22px; background:#eae5da; }
.footer-top { display:flex; align-items:center; gap:32px; padding-bottom:28px; border-bottom:1px solid #d6d0c5; }
.footer-top > p { color:var(--muted); font-size:13px; }
.footer-to-top { margin-left:auto; display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:12px; }
.footer-info { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:70px; padding-block:30px; }
.footer-info h2 { margin:0 0 16px; font-size:13px; font-weight:650; letter-spacing:0; }
.qualification-list { display:grid; gap:8px; font-size:12px; }
.qualification-list > div { display:flex; flex-wrap:wrap; gap:4px 18px; }
.qualification-list dt { color:var(--muted); }
.qualification-list dd { overflow-wrap:anywhere; }
.qualification-list a:hover, .footer-documents a:hover, .footer-bottom a:hover { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.footer-documents nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 22px; font-size:12px; }
.footer-documents a { min-width:0; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; padding-top:18px; border-top:1px solid #d6d0c5; color:var(--muted); font-size:11px; }
.footer-bottom a { margin-left:3px; }
.screen-dialog { width:min(520px,calc(100% - 32px)); max-width:none; max-height:calc(100svh - 32px); margin:auto; padding:20px; border:0; border-radius:14px; color:var(--ink); background:var(--paper); overflow:auto; }
.screen-dialog:not([open]) { display:none; }
.screen-dialog[open] { display:grid; justify-items:center; gap:16px; }
.screen-dialog::backdrop { background:rgba(35,28,20,.7); }
.dialog-header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dialog-header h2 { margin:0; font-size:16px; letter-spacing:0; }
.close-dialog { width:40px; height:40px; padding:0; background:transparent; border:1px solid var(--line); border-radius:50%; font-size:28px; font-weight:300; line-height:1; }
.dialog-image { width:auto; height:auto; max-height:calc(100svh - 180px); object-fit:contain; border-radius:10px; }
.dialog-original { font-size:13px; color:var(--red); min-height:36px; display:flex; align-items:center; gap:16px; }
@media (max-width:1120px) {
  .shell { width:calc(100% - 64px); }
  .header-inner { gap:28px; }
  .desktop-nav { gap:22px; }
  .hero { gap:20px; min-height:630px; }
  .hero h1 { font-size:66px; letter-spacing:-3px; }
  .hero-stage { height:520px; }
  .hero-phone-front { width:204px; left:41%; top:40px; }
  .hero-phone-back { width:185px; left:1%; top:72px; }
  .stage-word { font-size:220px; }
  .app-copy { padding:38px; }
  .app-copy h3 { font-size:31px; }
  .experience-tabs button { padding-inline:18px; gap:10px; }
  .about { gap:48px; }
  .company-info { padding-left:38px; }
  .footer-info { gap:40px; }
}
@media (max-width:820px) {
  :root { --header-height:72px; }
  .shell { width:calc(100% - 48px); }
  .desktop-nav { display:none; }
  .header-action { margin-left:auto; }
  .menu-button { display:grid; align-content:center; gap:7px; width:40px; height:44px; padding:7px; border:0; background:transparent; }
  .menu-button span { width:24px; height:1.5px; background:var(--ink); transition:transform .25s; }
  .menu-button[aria-expanded="true"] span:first-child { transform:translateY(4.25px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform:translateY(-4.25px) rotate(-45deg); }
  .hero { min-height:auto; padding-block:46px 42px; grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:54px; letter-spacing:-2px; }
  .hero-description { font-size:15px; margin-top:22px; }
  .hero-actions { margin-top:24px; gap:12px; }
  .hero-footnote { margin-top:24px; gap:12px; font-size:11px; }
  .hero-stage { height:450px; }
  .hero-phone-front { width:170px; left:39%; top:38px; }
  .hero-phone-back { width:155px; left:0; top:72px; }
  .stage-word { font-size:180px; right:0; }
  .stage-caption { left:8%; font-size:11px; }
  .overview > a { gap:12px; padding:22px 16px; }
  .overview .icon { width:24px; height:24px; }
  .overview strong { font-size:15px; }
  .overview small { font-size:11px; }
  .overview b { display:none; }
  .experience { padding-block:70px; }
  h2 { font-size:34px; }
  .experience-tabs button { display:grid; gap:2px; font-size:17px; }
  .app-visual { min-height:570px; padding:30px 18px; }
  .preview-phone { width:204px; }
  .visual-word { font-size:98px; }
  .app-copy { padding:30px; }
  .app-copy h3 { font-size:26px; }
  .app-copy > p:not(.eyebrow) { font-size:14px; }
  .view-points li { font-size:12px; }
  .finds { padding-block:60px; }
  .finds-grid { gap:20px; }
  .finds-grid h3 { font-size:19px; }
  .finds-grid figcaption span { font-size:12px; }
  .about { gap:34px; padding-block:70px; }
  .about h2 { font-size:30px; }
  .company-info { padding-left:28px; }
  .company-info h3 { font-size:20px; }
  .company-info dd { font-size:13px; }
  .footer-info { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:700px) {
  :root { --header-height:68px; }
  .shell { width:calc(100% - 40px); }
  .header-inner { gap:16px; }
  .wordmark { font-size:23px; letter-spacing:-1px; }
  .wordmark i { font-size:30px; }
  .header-action { min-height:36px; font-size:11px; padding-inline:12px; gap:8px; }
  .hero { grid-template-columns:1fr; gap:24px; padding-block:32px 28px; }
  .hero-copy { position:relative; z-index:1; }
  .hero h1 { margin-top:14px; font-size:59px; line-height:1.22; letter-spacing:-3px; }
  .hero-description { margin-top:18px; font-size:15px; }
  .hero-actions { margin-top:22px; gap:20px; }
  .button { min-height:48px; padding-inline:18px; gap:20px; font-size:13px; }
  .quiet-link { font-size:12px; gap:10px; }
  .hero-footnote { display:none; }
  .hero-stage { height:430px; margin-top:-4px; }
  .stage-disc { inset:35px 3% 45px; }
  .stage-word { font-size:180px; top:2px; right:4%; }
  .hero-phone-front { width:168px; left:43%; top:18px; border-radius:25px; }
  .hero-phone-back { width:158px; left:9%; top:47px; border-radius:25px; }
  .hero-stage .phone img { border-radius:20px; }
  .stage-caption { left:26%; bottom:3px; }
  .overview { grid-template-columns:1fr; }
  .overview > a, .overview > a:first-child, .overview > a:last-child { border-right:0; border-bottom:1px solid var(--line); padding:18px 0; gap:18px; }
  .overview > a:last-child { border-bottom:0; }
  .overview strong { font-size:16px; }
  .overview small { font-size:12px; }
  .overview b { display:block; }
  .experience { padding-block:55px; }
  .section-heading { align-items:start; flex-direction:column; gap:16px; margin-bottom:26px; }
  h2 { font-size:31px; line-height:1.4; }
  .section-heading > p { font-size:13px; }
  .section-heading > p br { display:none; }
  .experience-tabs button { padding:14px 8px; font-size:16px; text-align:center; }
  .experience-tabs span { font-size:10px; }
  .app-panel { grid-template-columns:1fr; }
  .app-visual { min-height:556px; padding:28px 20px 22px; }
  .visual-word { font-size:116px; }
  .preview-phone { width:208px; }
  .app-copy { padding:28px 24px 34px; }
  .app-copy h3 { margin-top:12px; font-size:29px; }
  .app-copy > p:not(.eyebrow) { margin-top:16px; min-height:7.8em; }
  .view-points { margin-top:18px; }
  .view-points li { font-size:13px; padding-block:10px; }
  .finds { padding-block:50px; }
  .finds-grid { grid-template-columns:1fr; gap:28px; }
  .finds-grid figure { display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; align-items:center; }
  .finds-grid figcaption { padding-top:0; }
  .finds-grid figcaption span { line-height:1.8; }
  .finds-grid h3 { font-size:18px; }
  .finds-note { margin-top:26px; font-size:10px; }
  .about { grid-template-columns:1fr; gap:30px; padding-block:55px; }
  .about h2 { font-size:29px; }
  .about-description { font-size:14px; margin-top:18px; }
  .company-info { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
  .company-info h3 { font-size:19px; }
  .company-info dl { gap:14px; margin-block:18px; }
  .company-info dd { font-size:13px; }
  .site-footer { padding-block:26px 20px; }
  .footer-top { flex-wrap:wrap; gap:6px 20px; padding-bottom:22px; }
  .footer-top > p { font-size:11px; }
  .footer-to-top { width:100%; justify-content:flex-end; min-height:32px; }
  .footer-info { gap:26px; padding-block:22px; }
  .qualification-list { gap:12px; }
  .qualification-list > div { display:grid; gap:2px; }
  .qualification-list dt { font-size:11px; }
  .footer-documents nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; font-size:11px; }
  .footer-bottom { flex-direction:column; gap:6px; font-size:10px; }
}
@media (max-width:360px) {
  .shell { width:calc(100% - 32px); }
  .header-inner { gap:10px; }
  .hero h1 { font-size:52px; }
  .hero-actions { gap:12px; }
  .hero-stage { height:388px; }
  .hero-phone-front { width:151px; left:44%; }
  .hero-phone-back { width:142px; left:6%; }
  .app-copy h3 { font-size:26px; }
  .finds-grid figure { grid-template-columns:112px minmax(0,1fr); gap:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}