* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #8d8d8d;
    color: #1b1b1b;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.55;
}
.layout {
    width: min(1040px, calc(100% - 24px));
    margin: 20px auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 14px;
    align-items: start;
}
h1 { margin: 0 0 8px; font-size: 30px; }
.intro { margin: 0 0 12px; }
.pick { display: inline-block; background: #1b1b1b; color: #fff; padding: 6px 12px; cursor: pointer; }
.pick input { display: none; }
.stage {
    position: relative;
    width: min(720px, 100%);
    margin: 14px auto;
    background: #111;
    min-height: 180px;
}
.stage video { display: block; width: 100%; height: 100%; background: #111; }
.box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
    cursor: move;
    touch-action: none;
}
.box i {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    cursor: nwse-resize;
}
.ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.ratios button { border: 0; background: #d7d7d7; padding: 6px 10px; cursor: pointer; }
.ratios button.is-on { background: #1b1b1b; color: #fff; }
#fallback { margin-top: 10px; }
#fallback input { width: 72px; margin: 0 10px 0 6px; }
#start-btn { margin-top: 12px; border: 0; background: #1b1b1b; color: #fff; padding: 10px 16px; cursor: pointer; }
#start-btn:disabled { opacity: 0.4; cursor: default; }
.progress { height: 4px; background: #c8c8c8; margin-top: 12px; }
#progress-bar { height: 100%; width: 0; background: #1b1b1b; }
.status { min-height: 1.4em; }
.status.is-error { color: #7a1d1d; }
.result a { color: #1b1b1b; font-weight: 650; }
.promo { background: #f4f4f4; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.promo p { margin: 0; font-weight: 700; }
.promo a { margin-top: auto; text-align: center; background: #1b1b1b; color: #fff; text-decoration: none; padding: 8px 4px; }
.foot { width: min(1040px, calc(100% - 24px)); margin: 8px auto 28px; }
.foot h2 { font-size: 15px; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; }
.foot a { color: #1b1b1b; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }