:root { --line:#303030; --text:#f7f7f7; --muted:#919191; --green:#bcff2f; --pink:#fc46ab; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 18% 5%,#202020 0,transparent 22rem),#050505; color:var(--text); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:minmax(340px,470px) minmax(360px,1fr); gap:clamp(36px,8vw,140px); align-items:center; max-width:1280px; margin:auto; padding:52px 48px; }
.intro { max-width:440px; }.brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.02em; }.brand i { width:24px; height:24px; display:block; background:conic-gradient(from 90deg,#fff 0 25%,transparent 0 50%,#fff 0 75%,transparent 0); background-size:12px 12px; border-radius:2px; }
.eyebrow { font-size:13px; color:var(--green); letter-spacing:.18em; margin:40px 0 8px; }.intro h1 { font-size:clamp(42px,5vw,66px); line-height:.98; letter-spacing:-.08em; margin:0; }.intro h1 em { font-style:normal; color:var(--green); }.lede { line-height:1.55; color:var(--muted); margin:22px 0 28px; }
form { display:grid; gap:14px; } label,legend { font-size:12px; color:#b4b4b4; letter-spacing:.04em; } input,select { display:block; width:100%; border:1px solid var(--line); background:#101010; color:#fff; border-radius:8px; padding:12px; margin-top:7px; font-size:14px; } input[type=file] { font-size:12px; } fieldset { border:0; padding:0; margin:0; }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }.choice { border:1px solid var(--line); background:#101010; color:#dedede; padding:12px 9px; border-radius:8px; cursor:pointer; font-size:13px; }.choice.active.up { border-color:var(--green); color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }.choice.active.down { border-color:var(--pink); color:var(--pink); box-shadow:0 0 0 1px var(--pink) inset; }
.download { width:100%; margin-top:20px; padding:15px; border:0; border-radius:8px; background:var(--green); color:#050505; font-weight:800; font-size:15px; cursor:pointer; }.download:disabled { opacity:.55; cursor:wait; }.download span { float:right; font-size:20px; line-height:12px; }.note { margin:10px 0 0; text-align:center; color:#777; font-size:11px; }
.preview-wrap { display:flex; justify-content:center; }.card { width:min(100%,432px); aspect-ratio:9/16; background:#000; box-shadow:0 20px 70px rgba(0,0,0,.65); overflow:hidden; position:relative; }.card-top,.card-bottom { height:12.5%; background-color:#030303; background-image:radial-gradient(#555 1px,transparent 1px); background-size:10px 10px; position:relative; z-index:2; text-align:center; overflow:hidden; }.card-top { padding:21px 12px 8px; }.card-top p { font-size:13px; font-weight:bold; margin:0 0 2px; white-space:nowrap; }.card-top h2 { margin:0; line-height:1; color:#fff; font-size:clamp(34px,8.5vw,64px); letter-spacing:-.09em; white-space:nowrap; }
.film { height:75%; position:relative; overflow:hidden; }.film video { width:100%; height:100%; object-fit:cover; display:block; }.film-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06) 35%,rgba(0,0,0,.25) 72%,rgba(0,0,0,.62) 100%); }.prediction-block { position:absolute; left:7%; bottom:9%; display:grid; grid-template-columns:24% 1fr; grid-template-rows:auto auto; column-gap:12px; text-align:left; align-items:end; white-space:nowrap; }.avatar { grid-row:1/3; width:100%; aspect-ratio:1; overflow:hidden; background:#272727; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); }.avatar img { width:100%; height:100%; object-fit:cover; }.prediction-block p { grid-column:2; margin:0; color:#fff; font-size:clamp(18px,3.5vw,30px); font-weight:bold; }.prediction-block strong { grid-column:2; line-height:.98; font-size:clamp(38px,7.5vw,70px); letter-spacing:-.09em; }.up-text { color:var(--green); }.down-text { color:var(--pink); }
.card-bottom { padding:24px 8px 5px; background-position:5px 5px; white-space:nowrap; }.card-bottom strong { display:block; font-size:clamp(20px,3.8vw,32px); letter-spacing:-.07em; }.card-bottom span { display:block; font-size:clamp(11px,2.1vw,17px); margin-top:7px; color:#eee; } #toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(30px); padding:11px 16px; border-radius:999px; background:#f5f5f5; color:#111; font-size:13px; opacity:0; transition:.2s; z-index:5; pointer-events:none; } #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media(max-width:780px) { .app-shell { display:flex; flex-direction:column-reverse; padding:26px 20px 48px; gap:34px; }.intro { width:100%; }.eyebrow { margin-top:24px; }.intro h1 { font-size:44px; }.card { width:min(100%,390px); }.preview-wrap { width:100%; }.card-top { padding-top:18px; }.card-bottom { padding-top:20px; } }