:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; } body { margin: 0; } .shell { width: min(760px, calc(100% - 32px)); margin: 48px auto; } header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } h1 { font-size: 1.35rem; margin: 0; } h2 { font-size: 1.15rem; margin-top: 0; } .mark { width: 38px; height: 38px; fill: none; stroke: #275af5; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; } #logout { margin-left: auto; } .card { background: #fff; border: 1px solid #e2e7f0; border-radius: 14px; padding: 28px; margin: 16px 0; box-shadow: 0 4px 16px #18213a08; } button, .button { background: #275af5; color: #fff; border: 0; border-radius: 8px; padding: 10px 15px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; } button:disabled, select:disabled { opacity: .5; cursor: not-allowed; } .quiet { background: transparent; color: #275af5; border: 1px solid #cbd5e5; margin-left: 8px; } label { display: block; margin: 14px 0; } input, select { display: block; width: 100%; padding: 9px; border: 1px solid #b9c4d4; border-radius: 7px; font: inherit; margin-top: 5px; background: #fff; } fieldset { border: 0; padding: 0; margin: 18px 0; } fieldset label, .check { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; } fieldset input, .check input { width: auto; margin: 0; } #dropzone { border: 2px dashed #afbdd5; border-radius: 10px; padding: 32px; text-align: center; cursor: pointer; } #dropzone span, .muted, #speed-hint { color: #65728a; font-size: .9rem; display: block; margin-top: 5px; } #dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .meter { height: 5px; background: #e5eaf2; margin: 16px 0; border-radius: 5px; overflow: hidden; } .meter span { display: block; height: 100%; width: 0; background: #275af5; transition: width .2s; } #notice, .notice { min-height: 20px; color: #b42318; padding: 0 4px; } #process-notice { margin: 12px 0 0; } .technical-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 16px 0; font-size: .9rem; } .technical-info dt { color: #65728a; } .technical-info dd { margin: 0; overflow-wrap: anywhere; } .preview { margin: 16px 0; padding: 12px; border: 1px solid #e2e7f0; border-radius: 8px; } .preview summary { color: #275af5; cursor: pointer; font-weight: 600; } .preview video { display: block; width: 100%; max-height: 420px; margin-top: 12px; background: #172033; border-radius: 7px; } @media (max-width: 600px) { .shell { margin: 24px auto; } .card { padding: 20px; } .two-col { grid-template-columns: 1fr; } fieldset label { display: flex; } }