:root { color-scheme: dark; --bg:#101113; --panel:#1a1b1e; --line:#34353b; --ink:#f6f7f9; --muted:#a5a7b1; --accent:#d3fc69; --error:#ffaaa7; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:1rem; line-height:1.6; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
a { color:inherit; }
[hidden] { display:none!important; }
.shell { max-width:1160px; margin:auto; padding:0 40px; min-height:100svh; display:flex; flex-direction:column; }
header { min-height:108px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { text-decoration:none; font-size:1.4rem; font-weight:750; letter-spacing:-.04em; display:flex; align-items:center; }
.brand-icon { background:var(--accent); color:var(--bg); height:32px; width:32px; display:grid; place-items:center; border-radius:9px; margin-right:10px; font-size:1.5rem; }
.slash { color:var(--accent); margin:0 2px; }
.header-note { color:var(--muted); font-size:.875rem; }
main { width:100%; max-width:740px; margin:auto; padding:58px 0 66px; }
.intro { margin-bottom:28px; }
.eyebrow { font-size:.75rem; letter-spacing:.13em; font-weight:650; color:var(--accent); margin:0 0 10px; }
h1 { font-size:clamp(2.5rem,6vw,4rem); font-weight:650; letter-spacing:-.055em; line-height:1.1; margin:0 0 18px; }
h1 span { color:var(--accent); }
.intro>p:last-child { color:var(--muted); margin:0; }
.workspace { background:var(--panel); padding:30px; border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 60px #0002; }
.label-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
label { font-weight:600; font-size:.9375rem; }
.text-button { color:var(--accent); background:none; border:0; padding:8px 0; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; }
.text-button:hover { color:#e7ffa6; }
.input-wrap { position:relative; }
.link-icon { position:absolute; left:17px; top:12px; color:var(--muted); font-size:1.3rem; pointer-events:none; }
input { display:block; width:100%; min-height:60px; border:1px solid #41424a; border-radius:11px; background:#121316; color:var(--ink); padding:14px 16px 14px 49px; outline:none; }
input::placeholder { color:#81838e; opacity:1; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #d3fc6918; }
input[aria-invalid="true"] { border-color:var(--error); }
.field-help { color:var(--muted); font-size:.875rem; line-height:1.55; margin:10px 0 18px; }
.primary { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; border:0; border-radius:11px; background:var(--accent); color:#151a08; text-decoration:none; font-weight:700; padding:12px 18px; transition:background .15s,transform .15s; }
.primary:hover { background:#e0ff92; }
.primary:active { transform:translateY(1px); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.status { color:var(--muted); font-size:.875rem; margin-top:18px; min-height:1.5em; overflow-wrap:anywhere; }
.status.error { color:var(--error); }
.status.success { color:var(--accent); }
.loading { margin-top:15px; }
.loading-top { display:flex; gap:15px; justify-content:space-between; align-items:center; font-size:.875rem; }
progress { width:100%; height:7px; border:0; border-radius:10px; background:#34353b; accent-color:var(--accent); display:block; margin-top:10px; overflow:hidden; }
progress::-webkit-progress-bar { background:#34353b; border-radius:10px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:10px; }
progress:indeterminate { background:linear-gradient(90deg,#34353b 20%,var(--accent) 50%,#34353b 80%); background-size:200% 100%; animation:loading 1.8s linear infinite; }
@keyframes loading { to { background-position:-200% 0; } }
.result { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:24px; padding-top:24px; margin-top:24px; border-top:1px solid var(--line); align-items:center; }
video { width:100%; max-height:320px; aspect-ratio:9/16; object-fit:contain; border-radius:10px; background:#08090a; }
h2 { font-size:1.4rem; letter-spacing:-.035em; line-height:1.25; margin:0 0 10px; }
.file-details { color:var(--muted); font-size:.875rem; margin:0 0 20px; overflow-wrap:anywhere; }
.result-info .field-help { margin-bottom:0; }
.workspace-footer { display:flex; gap:14px 26px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; margin-top:24px; color:var(--muted); font-size:.8125rem; }
.availability { color:var(--muted); margin:18px 8px 0; font-size:.875rem; text-align:center; }
footer { border-top:1px solid var(--line); padding:24px 0; display:flex; gap:16px 26px; justify-content:space-between; align-items:center; color:var(--muted); font-size:.75rem; }
footer p { margin:0; }
footer>span:first-child { color:var(--ink); font-weight:650; font-size:.875rem; }
@media(max-width:640px) { .shell { padding:0 20px; } header { min-height:82px; } .header-note { display:none; } main { padding:38px 0 44px; } .workspace { padding:22px; border-radius:18px; } .result { grid-template-columns:110px minmax(0,1fr); gap:16px; } .result-info h2 { font-size:1.2rem; } .result-info .eyebrow { font-size:.75rem; letter-spacing:.05em; } footer { flex-wrap:wrap; gap:12px 22px; } footer p { order:3; width:100%; } }
@media(max-width:390px) { .shell { padding:0 15px; } .workspace { padding:18px; } .result { grid-template-columns:1fr; } video { max-height:270px; } .workspace-footer { gap:10px 18px; } }
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }