@font-face{font-family:system-fallback;src:local("Arial");font-display:swap}

:root{--paper:#f7f5ee;--ink:#202f29;--muted:#5d6b62;--green:#245647;--line:#d8ded4;--orange:#d47752;--focus:#a54422;--cream:#f0e5d4;--white:#fffefa;--radius:20px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a,select,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button,a{touch-action:manipulation}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.header{height:104px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:27px;letter-spacing:-1.4px}
.header nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}
.language{padding:9px 15px;border:1px solid var(--line);border-radius:100px;display:flex;gap:18px}
.skip{position:absolute;top:0;left:-9999px;background:var(--green);color:white;padding:14px;z-index:10}
.skip:focus{left:10px}
.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:36px;padding-top:68px;padding-bottom:64px}
.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:750;color:var(--green);display:flex;align-items:center;gap:9px}
.live-dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(40px,4.8vw,61px);line-height:1.08;letter-spacing:-3px;margin:25px 0 23px;font-weight:620}
h1 span{display:block}
h1 span:last-child{color:var(--green)}
.intro{font-size:17px;line-height:1.75;color:var(--muted);max-width:475px;margin-bottom:0}
.moment-art{height:285px;position:relative;isolation:isolate}
.art-grid{position:absolute;inset:5px;background-image:radial-gradient(#b7c1b3 1px,transparent 1px);background-size:16px 16px;mask-image:radial-gradient(ellipse,black,transparent 75%)}
.art-frame{position:absolute;border-radius:17px;overflow:hidden;box-shadow:0 10px 20px #203d2612}
.back-frame{width:69%;height:203px;right:14px;top:5px;transform:rotate(10deg);background:#d9dfc8;border:7px solid var(--white);padding:12px;color:#385441;font-size:9px;letter-spacing:1px;font-weight:bold}
.rill{position:absolute;width:400px;height:170px;border:20px solid #acb99a;border-radius:50%;left:-60px;top:85px;transform:rotate(-10deg)}
.rill-two{top:129px;border-color:#f6f4e5}
.front-frame{width:69%;height:198px;left:6%;top:57px;transform:rotate(-8deg);background:var(--green);border:7px solid var(--white);padding:14px 16px;color:var(--paper)}
.art-tag{font-size:8px;letter-spacing:1.3px;opacity:.8}
.play-mark{position:absolute;top:55px;left:calc(50% - 23px);border:1px solid #e2edd269;background:#ffffff15;border-radius:50%;height:48px;width:48px;display:grid;place-items:center;padding-left:3px;color:#efd5af;font-size:18px}
.art-progress{position:absolute;bottom:32px;left:16px;right:16px;height:3px;background:#bacba445;border-radius:5px}
.art-progress i{display:block;width:28%;height:3px;background:#e9c29d}
.art-time{position:absolute;bottom:9px;font-size:9px;letter-spacing:1px}
.art-time span{opacity:.55}
.art-sticker{position:absolute;right:14px;bottom:17px;background:#eec5a0;border:5px solid var(--paper);border-radius:18px;transform:rotate(6deg);padding:14px 18px;font-size:21px;font-weight:750;letter-spacing:-1px;box-shadow:0 5px 10px #203d2612}
.art-sticker span{font-size:27px;padding-left:13px}
.art-spark{font-size:54px;color:var(--orange);position:absolute;right:0;top:-23px}
.tool-card{padding:32px 36px;background:var(--white);border:1px solid #d4dbcf;border-radius:var(--radius);box-shadow:0 8px 0 #e9ebe1,0 24px 60px #293c2906}
label{font-size:13px;font-weight:700;display:block;margin-bottom:10px}
.input-row{display:flex;gap:12px}
.url-field{display:flex;align-items:center;gap:12px;min-width:0;flex:1;border:1px solid #c6cfc2;border-radius:11px;background:#fafbf5;padding:8px 11px 8px 17px}
.url-field>span{font-size:22px;color:#6c7e68}
.url-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 2px var(--focus)}
.url-field input{width:100%;min-width:0;border:0;outline:none;background:transparent;padding-block:9px;color:var(--ink);font-size:15px}
.url-field input::placeholder{color:#657164}
.paste{white-space:nowrap;flex-shrink:0;border:1px solid #dbe0d4;background:var(--white);padding:6px 11px;border-radius:7px;font-size:12px;font-weight:650;color:var(--muted)}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:34px;min-height:56px;border:0;border-radius:11px;padding:13px 25px;background:var(--green);color:var(--white);font-size:15px;font-weight:650;transition:background .15s}
.primary:hover{background:#173f32}
.primary:disabled,.primary[aria-disabled=true]{opacity:.55}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px;color:var(--muted);font-size:12px}
.file-pill{font-size:11px;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.rights{text-align:center;color:var(--muted);font-size:12px;margin:23px 0 0}
#form-status,#download-status{font-size:14px;background:#e9f0e5;padding:13px 15px;border-radius:8px;margin:20px 0 0}
#form-status.error{color:#893c26;background:#f9e9df}
#result{margin-top:27px;border-top:1px solid var(--line);padding-top:25px}
.result-header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}
.result-header p{margin:0}
.text-button{border:0;background:none;color:var(--green);font-size:12px;padding:6px 0}
.result-body{display:grid;grid-template-columns:1fr 1.1fr;gap:28px}
.preview-box{background:#dce5d6;min-height:215px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background-image:radial-gradient(ellipse at 30% 100%,#b6cbb240,transparent 65%)}
.preview-button{display:flex;flex-direction:column;align-items:center;gap:12px;border:0;background:none;color:var(--green);font-weight:600;font-size:12px;padding:24px}
.preview-button span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--green);color:var(--paper);font-size:19px;padding-left:3px}
video{width:100%;max-height:330px;background:#15251b;border-radius:10px}
.clip-options h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;overflow-wrap:anywhere;margin-bottom:7px}
#result:focus{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.clip-options>p{font-size:12px;margin-bottom:16px}
.selectors{display:flex;gap:12px;margin:15px 0}
.selectors>div{flex:1;min-width:0}
.selectors label{font-size:12px;margin-bottom:6px}
.selectors select{width:100%;padding:9px 30px 9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-size:13px}
.download{width:100%;justify-content:space-between;min-height:48px;margin-bottom:10px}
.source{color:var(--green);font-weight:650;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.muted{color:var(--muted)}
.fine{font-size:12px!important;line-height:1.7}
#expiry-note{margin:18px 0 0}
h2{font-size:31px;line-height:1.25;letter-spacing:-1px;font-weight:600}
h3{font-size:17px;font-weight:650;letter-spacing:-.3px;margin-bottom:10px}
.steps{padding-block:83px 75px}
.steps h2{margin:12px 0 34px}
.step-grid,.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}
.step-number{display:block;color:#846044;font-size:12px;font-family:monospace;margin-bottom:18px}
.step-grid p,.detail-grid p{font-size:14px;color:var(--muted);max-width:290px;line-height:1.8;margin-bottom:0}
.details-section{background:#e9eddf;border-block:1px solid #dce2d2;padding:50px 0 54px}
.details-section h2{margin-bottom:29px;font-size:27px}
.detail-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #b9c8af;border-radius:10px;font-size:19px;color:var(--green);margin-bottom:17px}
.faq{padding-block:80px;display:grid;grid-template-columns:.8fr 1.4fr;gap:70px}
.faq h2{max-width:220px;font-size:33px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;gap:22px;justify-content:space-between;align-items:center;font-size:14px;font-weight:650;padding:18px 0}
summary::-webkit-details-marker{display:none}
summary span{color:var(--green);font-size:20px;font-weight:400}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:14px;color:var(--muted);margin:0 35px 20px 0;line-height:1.8}
.footer{border-top:1px solid var(--line);padding-top:37px;padding-bottom:32px;display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.brand.small{font-size:22px;letter-spacing:-1px;gap:8px}
.footer p{font-size:12px;margin:14px 0 0}
.footer p.fine{margin-top:5px}
.footer nav{display:flex;justify-content:flex-end;gap:25px;font-size:12px;align-self:start;padding-top:9px}
.copyright{grid-column:1/-1;color:var(--muted);font-size:11px;letter-spacing:.5px;padding-top:10px}
.prose{max-width:760px;min-height:60vh;padding-block:65px 85px}
.prose .eyebrow{margin-top:38px}
.prose h1{font-size:44px;letter-spacing:-1.5px;margin-bottom:32px}
.prose>p{font-size:16px;line-height:1.95;color:var(--muted);margin-bottom:24px}
.prose a:not(.primary){text-decoration:underline;text-underline-offset:4px;color:var(--green)}
.prose .primary{margin-top:15px}
html[lang=zh-CN] h1{font-size:clamp(36px,4.2vw,51px);letter-spacing:-1.7px;line-height:1.25}
html[lang=zh-CN] .intro{font-size:16px}
html[lang=zh-CN] .eyebrow{letter-spacing:2px}

@media(max-width:900px){.hero{gap:20px}
.moment-art{height:240px}
.art-frame{height:167px}
.front-frame{top:50px}
.play-mark{top:44px;height:40px;width:40px;left:calc(50% - 20px)}
.art-sticker{right:-2px;bottom:10px;padding:10px 14px;font-size:18px}
.back-frame{right:0}
.step-grid,.detail-grid{gap:28px}
.faq{gap:40px}
.tool-card{padding:27px}
.footer nav{gap:18px}
}

@media(max-width:640px){.wrap{width:calc(100% - 36px)}
.header{height:80px}
.brand{font-size:24px}
.brand img{width:33px;height:33px}
.header nav{gap:16px}
.about-link{display:none}
.language{font-size:12px;padding:7px 12px;gap:10px}
.hero{display:block;padding-top:38px;padding-bottom:32px}
.hero .eyebrow{font-size:9px;letter-spacing:1.4px}
h1{font-size:43px;letter-spacing:-2px;margin:21px 0 17px}
.intro{font-size:15px;max-width:350px}
.moment-art{display:none}
.tool-card{padding:22px 18px;border-radius:15px;box-shadow:0 6px 0 #e9ebe1}
.input-row{flex-direction:column;gap:11px}
.url-field{padding-left:11px;gap:7px}
.url-field input{font-size:14px}
.paste{padding:5px 8px}
.primary{min-height:49px;justify-content:space-between;padding:12px 18px}
.form-bottom{font-size:12px;gap:8px;margin-top:14px}
.file-pill{display:none}
.rights{font-size:12px;line-height:1.8;margin-top:20px;padding-inline:15px}
.steps{padding-block:54px 48px}
.steps h2{font-size:25px;max-width:330px;line-height:1.3}
.step-grid{grid-template-columns:1fr;gap:28px}
.step-grid article{display:grid;grid-template-columns:30px 1fr;gap:0 14px}
.step-number{grid-row:1/3;padding-top:3px}
.step-grid h3{font-size:16px;margin-bottom:5px}
.step-grid p{max-width:none;font-size:13px}
.details-section{padding-block:37px 40px}
.details-section h2{font-size:25px}
.detail-grid{grid-template-columns:1fr;gap:27px}
.detail-grid article{display:grid;grid-template-columns:34px 1fr;gap:0 16px}
.detail-icon{grid-row:1/3}
.detail-grid h3{margin-bottom:5px;font-size:16px}
.detail-grid p{max-width:none;font-size:13px}
.faq{display:block;padding-block:48px}
.faq h2{font-size:27px;max-width:none;margin-bottom:25px}
summary{font-size:13px;padding-block:16px}
details p{font-size:13px;margin-right:12px}
.footer{grid-template-columns:1fr;padding-top:28px;gap:20px}
.footer nav{justify-content:flex-start;padding-top:0;gap:25px}
.copyright{padding-top:0}
.result-body{grid-template-columns:1fr;gap:19px}
.result-header{align-items:start}
.result-header .eyebrow{font-size:9px}
.result-header button{font-size:12px;padding:0}
.preview-box{min-height:180px}
.clip-options h2{font-size:21px}
.prose{padding-block:40px 60px}
.prose h1{font-size:34px}
.prose>p{font-size:15px}
html[lang=zh-CN] h1{font-size:36px;letter-spacing:-1.5px}
}

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