:root { color-scheme: light; font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203b37; background: #f4f3ed; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1100px; margin: auto; padding: 32px 40px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #d7ddd5; }
.brand { color: inherit; font-size: 30px; font-weight: 750; letter-spacing: -.07em; text-decoration: none; }
.brand span { color: #819b51; }
.local { font-size: .83rem; color: #50635e; }
.local::before { content: ''; display: inline-block; width: 7px; height: 7px; background: #628c45; border-radius: 50%; margin-right: 8px; }
.intro { max-width: 720px; margin: 38px 0 32px; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 750; color: #60764f; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 650; }
.intro > p:last-child { max-width: 600px; margin: 0; color: #50635e; }
form { border: 1px solid #ced7ca; border-radius: 12px; background: #fffefa; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 0; }
.actions { display: flex; border-bottom: 1px solid #ced7ca; background: #eeefe7; padding: 8px; gap: 4px; }
.actions legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.actions label { flex: 1; position: relative; text-align: center; }
.actions input { position: absolute; opacity: 0; }
.actions span { display: block; padding: 12px 8px; border-radius: 6px; cursor: pointer; font-size: .94rem; }
.actions input:checked + span { background: #fffefa; box-shadow: 0 1px 3px #173b3220; font-weight: 650; }
.actions input:focus-visible + span { outline: 3px solid #4c796d; outline-offset: -3px; }
.actions input:disabled + span { cursor: default; opacity: .6; }
.workspace { display: grid; grid-template-columns: 1.7fr 1fr; }
.settings { padding: 28px; min-width: 0; }
.summary { padding: 28px; border-left: 1px solid #e0e4db; background: #f8f9f2; display: flex; flex-direction: column; }
.field-label, .thresholds label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
input, select, button { font: inherit; max-width: 100%; }
input[type=file] { font-size: .88rem; width: 100%; border: 1px dashed #a6b5a0; padding: 14px; border-radius: 6px; background: #fafbf6; }
input::file-selector-button { border: 1px solid #b6c3af; border-radius: 4px; background: #fffefa; color: #203b37; padding: 6px 10px; margin-right: 12px; cursor: pointer; font: inherit; }
select, input[type=number], input[type=text] { background: #fff; color: inherit; border: 1px solid #b4c1b0; border-radius: 5px; padding: 10px 12px; width: 100%; }
#fingerprint { font-family: ui-monospace, monospace; font-size: .8rem; }
.hint { color: #58675c; font-size: .81rem; line-height: 1.6; margin: 9px 0 18px; }
.selection { font-size: .84rem; overflow-wrap: anywhere; margin: 0 0 20px; }
.selection:empty { display: none; }
.thresholds { display: grid; align-items: end; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.thresholds input { max-width: 110px; }
#estimate { margin: 0 0 6px; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
code { font-family: ui-monospace, monospace; font-size: .85em; overflow-wrap: anywhere; }
.buttons { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
button { border: 1px solid #244c40; border-radius: 6px; padding: 10px 19px; cursor: pointer; font-weight: 600; min-height: 44px; }
#start { background: #244c40; color: #fff; }
#cancel { background: transparent; color: #244c40; }
button:disabled { opacity: .42; cursor: default; }
:focus-visible { outline: 3px solid #488277; outline-offset: 3px; }
.activity { margin-top: 20px; border: 1px solid #d4ddce; background: #fffefa; border-radius: 10px; padding: 18px 24px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#status { margin: 0; font-size: .91rem; }
#status[data-kind=error] { color: #9b361f; }
#percent { font-size: .8rem; color: #60764f; }
progress { display: block; width: 100%; height: 6px; margin-top: 14px; accent-color: #528066; }
#report { font-size: .84rem; overflow-wrap: anywhere; }
#report p { margin: 14px 0 8px; }
.part-report { border-top: 1px solid #d4ddce; margin-top: 16px; padding-top: 2px; }
#report ul { padding-left: 20px; }
#downloads { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#downloads:not(:empty) { margin-top: 18px; }
#downloads a { display: block; border: 1px solid #c3d4b8; background: #f2f7eb; color: #254c39; padding: 10px 12px; border-radius: 5px; overflow-wrap: anywhere; font-size: .87rem; }
footer { color: #58675c; font-size: .78rem; margin: 25px 0 12px; max-width: 850px; }
footer > p { margin-bottom: 16px; }
summary { cursor: pointer; color: #3e594a; }
[hidden] { display: none !important; }
@media (max-width: 680px) { main { padding: 20px 16px; } .masthead { padding-bottom: 16px; gap: 12px; } .local { max-width: 155px; font-size: .74rem; } .intro { margin: 28px 0; } .workspace { grid-template-columns: 1fr; } .settings, .summary { padding: 22px 18px; } .summary { border-left: 0; border-top: 1px solid #e0e4db; } .actions span { font-size: .79rem; padding: 12px 2px; } .actions { gap: 2px; padding: 6px; } .activity { padding: 16px 18px; } #downloads { grid-template-columns: 1fr; } .thresholds { gap: 12px; } .thresholds label { font-size: .8rem; } }