:root {
  color-scheme: dark;
  --ink: #fcf5ff;
  --muted: #cbbbd8;
  --accent: #edbdff;
  --paper: #100d1c;
  --field: #241a35;
  --border: #735786;
  --gradient: linear-gradient(109deg, #fac0ee, #dfc3ff 52%, #b3e7ff);
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
a { color: inherit; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #cdeaff; outline-offset: 4px; }
.shell { width: min(100% - 64px, 1060px); margin-inline: auto; }
.hero { isolation: isolate; position: relative; overflow: hidden; background: radial-gradient(ellipse 680px 440px at 51% 0%, #432047, #2a173b 48%, transparent 100%); }
.prism { position: absolute; z-index: -1; inset: 0 0 auto; height: 495px; overflow: hidden; pointer-events: none; mask-image: linear-gradient(#000 53%, transparent 100%); }
.orbit { position: absolute; left: 50%; width: min(1050px, 113vw); height: clamp(150px, 26vw, 270px); top: 8px; border-radius: 50%; background: conic-gradient(from 50deg, #8fb0ff00, #dba0ff 18%, #fc77b4 34%, #ffceaa 48%, #f67bff00 62%, #b785ff 88%, #8fb0ff00); filter: blur(9px); mask-image: radial-gradient(ellipse, transparent 51%, #000 69%, transparent 75%); }
.orbit-one { opacity: .76; transform: translateX(-52%) rotate(-12deg); animation: drift-one 9s ease-in-out infinite alternate; }
.orbit-two { top: 53px; opacity: .54; transform: translateX(-46%) rotate(13deg); animation: drift-two 12s ease-in-out infinite alternate; }
@keyframes drift-one { to { transform: translate(-48%, 22px) rotate(-6deg) scale(1.1); } }
@keyframes drift-two { to { transform: translate(-53%, -11px) rotate(18deg); } }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 29px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 850; letter-spacing: -.055em; text-decoration: none; }
.domain { color: var(--muted); }
.masthead-link { font-size: 14px; color: var(--muted); text-decoration: none; }
.masthead-link:hover { color: var(--ink); }
.masthead-link span { margin-left: 4px; }
.intro { max-width: 770px; margin-inline: auto; text-align: center; padding-top: clamp(120px, 19vw, 198px); padding-bottom: 88px; }
.eyebrow { margin: 0 0 17px; color: var(--accent); font: 700 11px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 21px; font-size: clamp(53px, 9vw, 98px); font-weight: 890; letter-spacing: -.082em; line-height: .98; }
h1 span { color: #e4bbff; background: var(--gradient); background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { color: var(--muted); margin-bottom: 29px; font-size: clamp(16px, 2vw, 18px); line-height: 1.5; }
.grab-form { display: flex; gap: 7px; max-width: 640px; padding: 6px; margin-inline: auto; border: 1px solid var(--border); border-radius: 19px; background: var(--field); box-shadow: 0 16px 56px #08051066; }
.grab-form:focus-within { border-color: #d7acee; }
.url-field { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; padding-inline: 12px; color: var(--muted); }
.url-field svg, .download-button svg { width: 20px; height: 20px; flex: none; }
.url-field input { width: 100%; min-width: 0; height: 50px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 16px; }
.url-field input::placeholder { color: var(--muted); opacity: 1; }
.url-field input:focus { outline: 0; }
.download-button, .file-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; border: 0; padding: 0 22px; border-radius: 13px; background: var(--gradient); color: #261332; font-weight: 790; text-decoration: none; }
.download-button:hover, .file-button:hover { filter: brightness(1.09); }
.download-button:disabled { cursor: progress; opacity: .74; }
.download-button:disabled svg { animation: wait 1.3s ease-in-out infinite; }
@keyframes wait { 50% { transform: translateY(3px); } }
.status { margin: 12px auto 0; color: var(--accent); font-size: 14px; line-height: 1.45; max-width: 640px; }
.status:empty { display: none; }
.status[data-error] { color: #ffc4d0; }
.formats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 25px 0 0; color: var(--muted); font-size: 13px; font-weight: 690; }
.formats li + li::before { content: '·'; margin-inline-end: 16px; color: #9378a8; }
.results { border-top: 1px solid #433150; padding-top: 32px; padding-bottom: 62px; scroll-margin-top: 24px; }
.result-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
h2 { font-size: clamp(29px, 4vw, 43px); line-height: 1.06; letter-spacing: -.05em; margin-bottom: 0; }
.result-header .eyebrow { margin-bottom: 8px; }
.result-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.file { background: #1a1427; border: 1px solid #453150; border-radius: 19px; overflow: hidden; }
.file:only-child { max-width: 470px; width: 100%; }
.file img, .file video { display: block; width: 100%; height: min(330px, 72vw); background: #0a0813; object-fit: contain; }
.file-body { padding: 15px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.file-body strong { display: block; }
.file-body small { display: block; color: var(--muted); margin-top: 4px; }
.file-body .file-button { min-height: 44px; padding-inline: 15px; font-size: 14px; }
.info { width: min(100%, 860px); margin-inline: auto; border-top: 1px solid #342641; padding: 47px 0 55px; }
.info .eyebrow { margin-bottom: 9px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 0; margin: 28px 0; list-style: none; }
.steps li { border-top: 1px solid #553b66; padding-top: 14px; }
.steps span { color: var(--accent); font: 700 12px/1 ui-monospace, Consolas, monospace; }
.steps p, details p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
details { border-top: 1px solid #342641; padding: 15px 0; }
summary { font-weight: 650; }
details p { max-width: 63ch; }
.footer { display: flex; justify-content: space-between; gap: 10px; padding: 20px 0 30px; border-top: 1px solid #342641; color: var(--muted); font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .shell { width: calc(100% - 36px); }
  .masthead { padding-top: 19px; }
  .brand { font-size: 17px; }
  .masthead-link { font-size: 12px; }
  .prism { height: 310px; }
  .orbit { width: 110vw; top: 19px; filter: blur(6px); }
  .orbit-two { top: 38px; }
  .intro { padding-top: 128px; padding-bottom: 59px; }
  .eyebrow { font-size: 10px; letter-spacing: .13em; }
  h1 { font-size: clamp(39px, 10.4vw, 60px); margin-bottom: 16px; }
  .subtitle { margin-bottom: 20px; }
  .grab-form { flex-direction: column; border-radius: 17px; }
  .url-field input { height: 43px; }
  .download-button { width: 100%; min-height: 48px; }
  .formats { margin-top: 20px; }
  .result-header { align-items: start; flex-direction: column; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }