:root {
    color-scheme: light;
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #24282e;
    background: #f6f6f3;
    --accent: #1468d4;
    --muted: #697078;
    --border: #d7dbdf;
    --page-width: 1200px;
    --page-gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100%, var(--page-width)); margin-inline: auto; padding: 28px var(--page-gutter) 32px; }
.page-header { margin-bottom: 24px; }
.home { color: var(--muted); font-size: .85rem; text-decoration: none; }
.home:hover { color: var(--accent); text-decoration: underline; }
h1 { margin: 16px 0 2px; font-size: clamp(2rem, 5vw, 3rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.15; }
p { margin: 6px 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, input[type="number"], select { color: inherit; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
button { padding: 7px 12px; }
button:hover { background: #edf3fb; border-color: #a9bfdc; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#drop-zone { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border: 1px dashed #aeb6bf; border-radius: 14px; background: #ffffff90; transition: background .12s, border-color .12s; }
#drop-zone h2 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
#drop-zone p { font-size: .875rem; color: var(--muted); }
#choose { padding: 0; border: 0; border-radius: 0; color: var(--accent); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.is-dragging #drop-zone { border: 2px solid var(--accent); background: #e9f2ff; padding: 19px 23px; }
#status { min-height: 1.5em; margin: 10px 0; font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
#status.error { color: #b42318; }
.file-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
#reset { flex: none; font-size: .8rem; }
.resolutions { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 8px 0 18px; font-size: .875rem; color: var(--muted); }
.resolutions output { margin-left: .35em; color: #24282e; font-variant-numeric: tabular-nums; }
.resolutions .crop-resolution, .crop-resolution output { color: var(--accent); font-weight: 600; }

/*× The overlay follows the displayed video; crop measurements stay in source pixels. */
#measurement-board {
    --field-width: 5rem;
    --board-gap: 1rem;
    display: grid;
    grid-template-areas: ". top ." "left stage right" ". bottom .";
    grid-template-columns: var(--field-width) minmax(0, 1fr) var(--field-width);
    gap: 12px var(--board-gap);
    align-items: center;
    justify-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
.margin-control { display: grid; justify-items: center; gap: 3px; width: var(--field-width); color: var(--muted); font-size: .8rem; }
.margin-control input { width: 100%; min-width: 0; padding: 7px 5px; text-align: center; font-variant-numeric: tabular-nums; }
.margin-control span { font-size: .7rem; }
.top, .bottom { grid-template-columns: auto var(--field-width) auto; gap: .4rem; width: auto; align-items: center; }
.top { grid-area: top; }
.left { grid-area: left; }
.right { grid-area: right; }
.bottom { grid-area: bottom; }
#stage { grid-area: stage; position: relative; width: min(var(--source-width), calc(min(100vw, var(--page-width)) - 2 * var(--page-gutter) - 2 * var(--field-width) - 2 * var(--board-gap)), calc(60svh * var(--video-ratio))); line-height: 0; background: #1b1e22; }
video { display: block; width: 100%; height: auto; }
#overlay { position: absolute; inset: 0; pointer-events: none; }
.shade { position: absolute; background: #0008; }
.shade-top { inset: 0 0 auto; height: var(--crop-top); }
.shade-bottom { inset: auto 0 0; height: var(--crop-bottom); }
.shade-left { inset: var(--crop-top) auto var(--crop-bottom) 0; width: var(--crop-left); }
.shade-right { inset: var(--crop-top) 0 var(--crop-bottom) auto; width: var(--crop-right); }
/*× The outline sits entirely outside the retained image, leaving its edge pixels visible. */
#selection { position: absolute; inset: var(--crop-top) var(--crop-right) var(--crop-bottom) var(--crop-left); outline: 2px solid #fff; outline-offset: 0; pointer-events: auto; cursor: move; touch-action: pinch-zoom; }
/*× Handles extend beyond the video edge; the selection outline needs no clipping mask. */
#selection button { position: absolute; width: 18px; height: 18px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--accent); pointer-events: auto; touch-action: pinch-zoom; transform: translate(-50%, -50%); }
#selection button[data-edge="n"] { left: 50%; top: 0; cursor: ns-resize; }
#selection button[data-edge="s"] { left: 50%; top: 100%; cursor: ns-resize; }
#selection button[data-edge="w"] { left: 0; top: 50%; cursor: ew-resize; }
#selection button[data-edge="e"] { left: 100%; top: 50%; cursor: ew-resize; }
#selection button[data-edge="nw"] { left: 0; top: 0; cursor: nwse-resize; }
#selection button[data-edge="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
#selection button[data-edge="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
#selection button[data-edge="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
#selection:focus-visible { outline-color: #83bdff; }
.playback { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 20px auto 0; }
#play { min-width: 4.5rem; font-size: .85rem; }
#timeline { min-width: 0; flex: 1; accent-color: var(--accent); }
#time { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
footer { margin-top: 24px; font-size: .8rem; color: var(--muted); }
@media (max-width: 520px) {
    main { padding-top: 20px; }
    #drop-zone { padding: 16px; }
    .is-dragging #drop-zone { padding: 15px; }
    #measurement-board { --field-width: 3.75rem; --board-gap: .6rem; }
    .margin-control input { font-size: 1rem; }
    .file-heading { align-items: flex-start; }
    #time { font-size: .7rem; }
}

/*× Export controls share the page's type and spacing; the download stays separate from the source. */
.export-panel { max-width: 680px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid var(--border); }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#export { color: #fff; background: var(--accent); border-color: var(--accent); }
#export:disabled { opacity: .55; cursor: default; }
#download { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.export-panel p { font-size: .8rem; color: var(--muted); }
#export-status.error { color: #b42318; }

#export-progress { width: 8rem; height: .6rem; accent-color: var(--accent); }

/*× Quality controls and credits use the same typography and spacing as the crop controls. */
.quality-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.quality-control select { max-width: 100%; padding: 7px 10px; }
#quality-description { margin: 8px 0 14px; }
#open-credits { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; }
#credits { width: min(36rem, calc(100% - 32px)); max-height: 80svh; overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 14px; color: inherit; background: #f6f6f3; }
#credits::backdrop { background: #0007; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.dialog-heading h2 { margin: 0; font-size: 1.3rem; }
#credits p { margin: 12px 0; font-size: .9rem; }
#credits a { color: var(--accent); }