* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font: var(--text-base)/1.6 var(--font-body); }
[hidden] { display: none !important; }
button,input,select { font: inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.wrap { width: min(1200px,calc(100% - var(--space-16))); margin-inline: auto; }
.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.brand { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.08em; line-height: 1; text-decoration: none; }
.brand span { color: var(--primary); }
.header-right { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-sm); }
.local-label { color: var(--muted); }
.text-button { border: 0; background: transparent; color: var(--foreground); padding: var(--space-2); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover { color: var(--primary); }
.intro { padding-top: var(--space-16); padding-bottom: var(--space-12); text-align: center; }
.eyebrow { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
h1 { font-size: clamp(2.488rem,6.5vw,var(--text-display)); line-height: 1.07; letter-spacing: -.055em; font-weight: 600; margin: 0 0 var(--space-6); }
.lead { font-size: var(--text-md); color: var(--muted); margin: 0; line-height: 1.7; }
.workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--space-12); align-items: start; }
.download-panel { background: var(--card); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; }
label { display: block; font-weight: 600; margin-bottom: var(--space-3); }
.url-row,.quality-row { display: flex; gap: var(--space-3); }
input,select { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); min-width: 0; width: 100%; }
input::placeholder { color: var(--muted); opacity: 1; }
.primary { border: 0; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-foreground); padding: var(--space-4) var(--space-6); font-weight: 600; white-space: nowrap; text-align: center; text-decoration: none; display: inline-block; }
.primary:hover:not(:disabled) { background: var(--primary-hover); }
.hint { color: var(--muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.panel-footer { display: flex; flex-wrap: wrap; gap: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-8); font-size: var(--text-sm); color: var(--muted); }
.guide { padding-top: var(--space-4); }
h2 { font-size: var(--text-lg); letter-spacing: -.025em; font-weight: 600; line-height: 1.3; margin: 0; }
.guide ol { margin: var(--space-6) 0; padding-left: var(--space-6); }
.guide li { padding-left: var(--space-2); margin-bottom: var(--space-6); }
.guide li::marker { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.guide strong { font-weight: 600; }
.guide p { color: var(--muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.guide .guide-note { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.notice { margin-top: var(--space-6); padding: var(--space-4); background: var(--background); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); font-size: var(--text-sm); overflow-wrap: anywhere; }
.notice.error { color: var(--destructive); border-color: var(--destructive); }
.result { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-6); }
.video-info { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); align-items: center; }
.video-info img { width: 128px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); outline: 1px solid var(--outline-image); }
.video-copy { min-width: 0; }
.video-copy h2 { font-size: var(--text-md); overflow-wrap: anywhere; }
.video-copy .eyebrow { margin-bottom: var(--space-1); }
.history { padding-block: var(--space-12); margin-top: var(--space-4); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.section-heading .hint { margin: 0; }
.history-row { padding-block: var(--space-6); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-6); align-items: center; }
.history-row h3 { font-weight: 600; font-size: var(--text-base); margin: 0; overflow-wrap: anywhere; }
.history-row .hint { margin-top: var(--space-1); }
.history-actions { display: flex; gap: var(--space-3); align-items: center; }
.history-actions { flex-wrap:wrap; justify-content:flex-end; max-width:350px; }
.history-actions .text-button { min-height:44px; }
.clip-options { margin-top:var(--space-4); border-bottom:0; }
.clip-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-4); }
.clip-fields label { font-size:var(--text-sm); }
.media-dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); background:var(--card); color:var(--foreground); width:min(650px,calc(100% - var(--space-8))); max-height:90dvh; overflow:auto; }
.media-dialog::backdrop { background:oklch(0 0 0 / .7); }
.dialog-top { display:flex; justify-content:flex-end; margin-bottom:var(--space-3); }
.media-dialog h2 { overflow-wrap:anywhere; margin-bottom:var(--space-4); }
.media-dialog video { display:block; width:100%; max-height:55dvh; margin-block:var(--space-4); background:#000; border-radius:var(--radius-sm); }
.media-dialog audio { width:100%; margin-block:var(--space-4); }
.media-dialog .primary { margin-top:var(--space-4); }
.media-dialog label { margin-top:var(--space-6); }
.install-panel { border-top:1px solid var(--border); padding-block:var(--space-8); display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); align-items:center; }
.install-panel p { margin:var(--space-2) 0 0; color:var(--muted); font-size:var(--text-sm); }
.install-panel .text-button { min-height:44px; }
.connection-banner { background:var(--card); border-bottom:1px solid var(--border); padding:var(--space-3) var(--space-4); text-align:center; font-size:var(--text-sm); }
.tutorial-steps { display:grid; gap:var(--space-12); padding-bottom:var(--space-12); }
.tutorial-step { max-width:1050px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:var(--space-4) var(--space-12); align-items:start; }
.tutorial-step h2,.tutorial-step > p:not(.hint) { grid-column:1; }
.tutorial-step p { color:var(--muted); line-height:1.8; }
.tutorial-step img { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius); grid-column:2; grid-row:1 / span 3; }
.tutorial-step > .hint { grid-column:2; }
@media(max-width:600px) { .tutorial-step { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }.tutorial-step img,.tutorial-step > .hint { grid-column:1; grid-row:auto; } }
.history-actions .primary { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); }
progress { display: block; accent-color: var(--primary); width: 100%; margin-top: var(--space-3); height: var(--space-2); }
.error-text { color: var(--destructive); }
.compatibility { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--space-12); align-items: center; padding: var(--space-8) 0 var(--space-12); border-bottom: 1px solid var(--border); }
.compatibility h2 { font-size: var(--text-xl); }
.platforms { min-width: 0; }
.platform-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); overflow-x: auto; overscroll-behavior-x: contain; padding-block: var(--space-2); scrollbar-width: thin; }
.platform-row-secondary { margin-top: var(--space-6); }
.platform-logo { display: flex; flex: 0 0 var(--space-12); align-items: center; justify-content: center; margin: 0; }
.platform-logo img { display: block; width: var(--space-12); height: var(--space-12); object-fit: contain; filter: brightness(0); }
:root[data-theme='dark'] .platform-logo img { filter: brightness(0) invert(1); }
.platform-logo.wordmark { flex-basis: 128px; }
.platform-logo.wordmark img { width: 128px; }
.faq { padding-block: var(--space-6); max-width: 850px; }
details { border-bottom: 1px solid var(--border); padding-block: var(--space-4); }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--muted); font-size: var(--text-sm); max-width: 75ch; }
.footer { padding-block: var(--space-8); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; color: var(--muted); font-size: var(--text-sm); }
.footer p { margin: 0; }
.footer .hint { margin: 0 0 0 auto; }
.small-brand { font-size: var(--text-xl); color: var(--foreground); }
.skip { position: absolute; left: var(--space-4); top: var(--space-4); background: var(--card); padding: var(--space-3); transform: translateY(-200%); z-index: var(--z-sticky); }
.skip:focus { transform: translateY(0); }
@media(max-width: 960px) { .workspace { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }.guide { display: none; }.compatibility { grid-template-columns: 1fr; gap: var(--space-6); } }
@media(max-width: 600px) {
  .brand { font-size: var(--text-lg); }
  .wrap { width: calc(100% - var(--space-8)); }.header { padding-block: var(--space-6); }.header-right { gap: var(--space-2); }.local-label { display: none; }
  .intro { padding-top: var(--space-12); padding-bottom: var(--space-8); }.lead { font-size: var(--text-base); }.desktop-break { display: none; }
  .download-panel { padding: var(--space-6); }.url-row,.quality-row { flex-direction: column; }.primary { width: 100%; }.panel-footer { gap: var(--space-3); }
  .compatibility { grid-template-columns: 1fr; gap: var(--space-6); }.history-row { grid-template-columns: 1fr; gap: var(--space-3); }.history-actions { justify-content: flex-start; }.history-actions .primary { width: auto; }
  .platform-row { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-6) var(--space-4); overflow: visible; overscroll-behavior-x: auto; }
  .platform-row-secondary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .video-info img { width: 80px; }.footer .hint { margin-left: 0; }.footer { gap: var(--space-4); }.history { padding-block: var(--space-8); }
}
@media(max-width: 360px) { .platform-row:not(.platform-row-secondary) { grid-template-columns: repeat(4,minmax(0,1fr)); } }