@import url('/video-to-audio.css');

.hero h1 { font-size: clamp(36px, 5vw, 64px); max-width: 850px; }
.hero .lede { max-width: 690px; }
.settings h2 { margin: 0 0 12px; font-size: 16px; }
.settings > p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.lock { font-size: 27px; line-height: 1; }
.cutout-mark { display: block; width: 112px; height: 112px; margin: 0 auto 28px; border: 1px dashed #536471; border-radius: 20px; background: repeating-conic-gradient(#202a32 0% 25%, #141c23 0% 50%) 50% / 22px 22px; position: relative; }
.cutout-mark i { position: absolute; inset: 20px 26px; background: #b6e5d1; clip-path: polygon(50% 0, 85% 17%, 100% 52%, 85% 100%, 15% 100%, 0 52%, 15% 17%); transform: rotate(-12deg); box-shadow: 0 6px 12px #0004; }
.drop small { margin-top: 10px; }
.file-header strong, .file-header .label, .file-header .muted { display: block; }
.file-header strong { margin: 6px 0; overflow-wrap: anywhere; font-size: 14px; }
#original { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #0c1016; border-radius: 10px; }
.result-canvas { border-radius: 12px; overflow: hidden; margin: 20px 0; background: repeating-conic-gradient(#23303a 0% 25%, #18232c 0% 50%) 50% / 28px 28px; }
.result-canvas img { display: block; width: 100%; max-height: 530px; object-fit: contain; }
.result[data-bg="light"] .result-canvas { background: #fff; }
.result[data-bg="dark"] .result-canvas { background: #080b10; }
.result-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.backgrounds { display: flex; gap: 6px; }
.backgrounds button { border: 1px solid transparent; border-radius: 8px; padding: 5px; background: none; cursor: pointer; }
.backgrounds button[aria-pressed="true"] { border-color: var(--accent, #b6e5d1); }
.swatch { display: block; width: 26px; height: 26px; border-radius: 4px; border: 1px solid #52606b; }
.swatch.grid { background: repeating-conic-gradient(#71808b 0% 25%, #23303a 0% 50%) 50% / 12px 12px; }
.swatch.light { background: #fff; }.swatch.dark { background: #080b10; }
.download { margin: 0; }
@media(max-width:600px) { .hero h1 { font-size: 35px; } .result-controls { align-items: stretch; } .result-controls .download { width: 100%; } .top nav { gap: 10px; } }