:root { color-scheme:light; --ink:#17211e; --muted:#6d7773; --line:#dce3df; --paper:#f3f5f1; --card:#fff; --accent:#d9ff64; --green:#18392f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(#9ea8a2 .65px,transparent .65px); background-size:7px 7px; }
.shell { position:relative; width:min(920px,calc(100% - 32px)); margin:auto; padding:72px 0 36px; }
.hero { margin-bottom:42px; }
.eyebrow,.results-head span { color:#68736d; font-size:11px; font-weight:800; letter-spacing:.18em; }
h1 { max-width:760px; margin:14px 0 18px; font-family:Georgia,"Songti SC",serif; font-size:clamp(42px,8vw,82px); font-weight:500; line-height:1.04; letter-spacing:-.045em; }
h1 span { color:#355e50; }
.hero-notice { font-size:clamp(26px,4.5vw,44px); line-height:1.25; letter-spacing:-.025em; }
.hero-notice span { display:block; white-space:nowrap; }
.hero p { margin:0; color:var(--muted); font-size:16px; }
.tool-card,.results { border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 24px 70px rgba(33,55,47,.08); }
.tool-card { padding:34px; }
.step { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.step.second { margin-top:34px; }
.step > span { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; color:white; background:var(--green); font-size:10px; font-weight:800; }
h2 { margin:0; font-size:17px; }
.platforms { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.platform { display:flex; min-height:82px; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.2s; }
.platform:hover { transform:translateY(-2px); border-color:#9eaaa4; }
.platform.active { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:#f9fbf7; }
.platform input { position:absolute; opacity:0; pointer-events:none; }
.platform b,.platform small { display:block; }
.platform b { font-size:14px; }
.platform small { margin-top:4px; color:var(--muted); font-size:11px; }
.mark { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:10px; color:white; font-weight:800; }
.mark.doubao { background:#315eea; }.mark.jimeng { background:#20201f; }.mark.qianwen { background:#6a42db; }
.input-wrap { display:flex; padding:7px 7px 7px 17px; border:1px solid var(--line); border-radius:14px; background:white; }
.input-wrap:focus-within { border-color:#678a7e; box-shadow:0 0 0 3px rgba(53,94,80,.1); }
input[type=url] { min-width:0; flex:1; border:0; outline:0; color:var(--ink); font:inherit; }
button { border:0; cursor:pointer; font:inherit; }
.paste { padding:10px 15px; border-radius:9px; color:#365347; background:#edf2ef; font-size:13px; font-weight:700; }
.hint { margin:9px 2px 22px; color:var(--muted); font-size:12px; }
.submit { display:flex; width:100%; align-items:center; justify-content:space-between; padding:17px 21px; border-radius:13px; color:#17211e; background:var(--accent); font-weight:800; transition:.2s; }
.submit:hover { filter:brightness(.96); transform:translateY(-1px); }.submit:disabled { cursor:wait; opacity:.65; }
.arrow { font-size:22px; line-height:1; }
.status { min-height:0; margin-top:0; border-radius:11px; font-size:13px; }
.status:not(:empty) { margin-top:14px; padding:12px 14px; background:#f1f4f2; }.status.error { color:#8d2f2f; background:#fff0ef; }
.results { margin-top:22px; padding:30px; }
.results-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:20px; }
.results-head h2 { margin-top:5px; font-size:24px; }.results-head button { color:#56625d; background:transparent; font-size:12px; text-decoration:underline; }
.media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.media-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#f8faf8; }
.media-card img,.media-card video { display:block; width:100%; height:330px; object-fit:contain; background:#edf0ed; }
.media-actions { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; }
.media-actions span { color:var(--muted); font-size:12px; }.media-actions a { color:#244d40; font-size:13px; font-weight:800; text-decoration:none; }
details { margin-top:18px; color:var(--muted); font-size:12px; } pre { max-height:260px; overflow:auto; padding:14px; border-radius:10px; color:#dbe7e1; background:#17211e; white-space:pre-wrap; word-break:break-all; }
footer { padding:28px 0 0; color:#89918d; font-size:11px; text-align:center; }
@media (max-width:720px) { .shell{padding-top:42px}.platforms{grid-template-columns:repeat(2,1fr)}.tool-card{padding:22px}.media-grid{grid-template-columns:1fr}.media-card img,.media-card video{height:280px} }
@media (max-width:420px) { .platform{padding:11px}.platform small{display:none}.hero p{font-size:14px} }