:root{color-scheme:light;--coral:#fd7979;--cream:#fff9f2;--ink:#302329;--muted:#75676b;--line:#e6dcd6;--panel:#fffdf9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body,h1,h2,p,dl,dd{margin:0}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:wait}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid #ad383d;outline-offset:5px}
[hidden]{display:none!important}
.wrap{width:min(1120px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:24px;top:-80px;z-index:2;background:var(--ink);color:var(--cream);padding:13px 18px;border-radius:8px}
.skip-link:focus{top:12px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:24px;font-weight:750;letter-spacing:-.8px}
.brand img{width:40px;height:40px}
.header-note{font-size:12px;color:var(--muted);line-height:1.5;text-align:right}
.header-note span{display:block;font-size:11px}
.intro{padding:24px 0 32px;display:grid;grid-template-columns:1.12fr 1fr;column-gap:60px;align-items:end}
.intro h1{font-size:clamp(32px,3.8vw,48px);font-weight:650;line-height:1.18;letter-spacing:-2px}
.intro-en{grid-column:1;font-size:clamp(18px,2vw,26px);line-height:1.3;letter-spacing:-.6px;margin-top:16px}
.intro-copy{grid-column:2;grid-row:1/3;padding-bottom:3px;max-width:400px}
.intro-copy p{font-size:15px;line-height:1.85}
.intro-copy p[lang=en]{font-size:13px;line-height:1.65;color:var(--muted);margin-top:12px}
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}
.demo-heading h2{font-size:14px;font-weight:650;letter-spacing:0;line-height:1.5}
.demo-heading h2 span{display:inline;margin-top:0;font-weight:400;color:var(--muted);margin-left:9px;font-size:12px}
.duration{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.video-frame{background:#171416;border-radius:12px;overflow:hidden;border:1px solid #493a3e}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:1922/1224;object-fit:contain;max-height:78dvh;background:#171416}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 12px;min-height:88px}
.player-bar>p{font-size:13px;line-height:1.6}
.player-bar>p span{display:block}
.player-bar>p span[lang=en]{font-size:12px;color:var(--muted);margin-top:3px}
.player-bar[data-state=error]>p>span:first-child{color:#a5353c}
.player-actions{display:flex;gap:10px;flex-shrink:0}
.button{border:1px solid transparent;border-radius:8px;min-height:46px;padding:10px 18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:650;white-space:nowrap;transition:background .15s}
.button [lang=en]{font-size:11px;font-weight:500}
.button-primary{background:var(--coral)}
.button-primary:hover{background:#fb9090}
.button-secondary{border-color:var(--line);background:transparent}
.button-secondary:hover{background:#f7eae3}
.content-note{font-size:11px;line-height:1.65;color:var(--muted)}
.content-note span{display:block;margin-top:2px}
.notice{font-size:13px;line-height:1.7;padding:18px;background:#fbe9df}
.notice span{display:block}
.context-section{display:grid;grid-template-columns:1fr 1.12fr;gap:100px;margin-top:92px;padding-bottom:68px}
h2{font-size:26px;font-weight:650;letter-spacing:-.8px;line-height:1.4}
h2>span{display:block;font-size:17px;line-height:1.5;letter-spacing:-.2px;font-weight:450;margin-top:5px}
.context-intro>p{font-size:14px;line-height:1.9;margin-top:18px}
.context-intro>p[lang=en]{font-size:12px;line-height:1.75;color:var(--muted);margin-top:8px}
.context-intro>p{max-width:340px}
.feature-list{display:grid;gap:32px;padding-top:4px}
.feature-list dt{font-size:15px;font-weight:650;line-height:1.5}
.feature-list dt span{display:block;font-size:12px;font-weight:400;margin-top:3px;color:var(--muted)}
.feature-list dd{margin-top:9px;font-size:13px;line-height:1.85}
.feature-list dd p[lang=en]{font-size:12px;color:var(--muted);line-height:1.75;margin-top:5px}
footer{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:24px 0 32px}
footer>span{font-size:18px;font-weight:700}
footer>p{font-size:10px;line-height:1.8;color:var(--muted);text-align:right}
footer>p span{display:block}

@media(min-width:1440px){.intro{padding-top:32px;padding-bottom:36px}
}

@media(max-width:1023px){.wrap{width:calc(100% - 64px)}
.intro{column-gap:40px}
.intro h1{font-size:36px}
.context-section{gap:60px}
.player-actions{gap:8px}
.button{padding:10px 12px;gap:6px}
.button[hidden]+.button{margin:0}
}

@media(max-width:767px){.wrap{width:calc(100% - 36px)}
.site-header{height:76px}
.brand{font-size:22px;gap:8px}
.brand img{width:34px;height:34px}
.header-note{font-size:11px}
.header-note span{font-size:10px}
.intro{display:block;padding:28px 0 30px}
.intro h1{font-size:32px;letter-spacing:-1.5px;line-height:1.2}
.intro-en{font-size:19px;margin-top:12px;line-height:1.35}
.intro-copy{margin-top:23px;max-width:100%}
.intro-copy p{font-size:13px;line-height:1.8}
.intro-copy p[lang=en]{font-size:12px;margin-top:7px;max-width:340px}
.desktop-break{display:none}
.demo-heading{margin-bottom:11px;gap:10px}
.demo-heading h2{font-size:12px}
.demo-heading h2 span{display:block;font-size:10px;margin-left:0}
.duration{font-size:11px}
.video-frame{border-radius:8px}
.player-bar{align-items:flex-start;flex-direction:column;gap:13px;padding:14px 0 12px;min-height:0}
.player-bar>p{font-size:12px}
.player-bar>p span[lang=en]{font-size:11px}
.player-actions{width:100%;gap:10px}
.button{flex:1;font-size:12px;gap:7px}
.button [lang=en]{font-size:10px}
.content-note{font-size:10px;line-height:1.7}
.content-note span{margin-top:3px}
.context-section{grid-template-columns:1fr;gap:30px;margin-top:58px;padding-bottom:38px}
h2{font-size:24px;letter-spacing:-.6px}
h2>span{font-size:16px;margin-top:4px}
.context-intro>p{font-size:13px;margin-top:14px;line-height:1.85}
.context-intro>p[lang=en]{font-size:12px;margin-top:7px}
.context-intro>p{max-width:100%}
.feature-list{gap:26px;padding:0}
.feature-list dt{font-size:14px}
.feature-list dd{font-size:12px;margin-top:8px}
.feature-list dd p[lang=en]{font-size:11px}
footer{display:block;padding:22px 0 26px}
footer>span{font-size:17px}
footer>p{text-align:left;margin-top:12px;font-size:10px}
}

@media(max-width:359px){.wrap{width:calc(100% - 28px)}
.intro h1{font-size:29px}
.intro-en{font-size:17px}
.button{padding-inline:9px}
.demo-heading h2 span{display:block;margin-left:0}
.demo-heading{align-items:flex-end}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}