:root { color-scheme: light dark; --gap: 1rem; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; }
.topbar { display: flex; align-items: center; justify-content: space-between;
          padding: var(--gap); border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.brand { font-weight: 600; text-decoration: none; color: inherit; }
main { max-width: 52rem; margin: 0 auto; padding: var(--gap); }
.card { display: grid; gap: .75rem; padding: var(--gap); margin-bottom: var(--gap);
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: .5rem; }
.card.inline { grid-template-columns: 1fr auto; align-items: end; }
label { display: grid; gap: .25rem; }
input { padding: .5rem; font: inherit; }
button { padding: .5rem 1rem; font: inherit; cursor: pointer; }
button.link { background: none; border: none; text-decoration: underline; }
.error { padding: .75rem; border-radius: .5rem; background: #fde2e1; color: #7a1c17; }
.token-value { display: block; padding: .75rem; overflow-wrap: anywhere; user-select: all;
               background: color-mix(in srgb, currentColor 8%, transparent); border-radius: .375rem; }
.token-once { border-color: #2f7d32; }
.tokens { width: 100%; border-collapse: collapse; }
.tokens th, .tokens td { text-align: left; padding: .4rem .5rem;
                         border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.hint, small { opacity: .75; font-size: .875rem; }
.empty { opacity: .75; }
.problem img { max-width: 100%; height: auto; display: block; margin: .75rem auto; }
.problem table { border-collapse: collapse; }
.problem td, .problem th { border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
                           padding: .25rem .5rem; }
.problem-list { display: grid; gap: .5rem; padding-left: 1.25rem; }
.answer { font-weight: 600; }
summary { cursor: pointer; }
.task h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.photo-form { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin-top: .5rem; }
.photos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.photos img { max-width: 220px; border-radius: .25rem; }
.saved, .saved-slot { font-size: .85rem; opacity: .8; }
.saved.error { color: #a12; opacity: 1; }
.ok { color: #2f7d32; font-size: .85rem; }
.bad { color: #a12; font-size: .85rem; }
.verdict-wrong { border-left: 3px solid #a12; }
.verdict-correct { border-left: 3px solid #2f7d32; }
.button-link { display: inline-block; padding: .5rem 1rem; border: 1px solid currentColor;
               border-radius: .375rem; text-decoration: none; color: inherit; }
.verdict-partial { border-left: 3px solid #b8860b; }
.summary h3 { font-size: 1rem; margin: .5rem 0 .25rem; }
.summary ul, .errors { margin: 0; padding-left: 1.25rem; }
.review { padding: .5rem .75rem; border-radius: .375rem;
          background: color-mix(in srgb, currentColor 6%, transparent); }
.errors li { margin-bottom: .35rem; }
.errors .hint { display: block; }
.mid { color: #8a6100; font-size: .85rem; }
.token-url { display: block; padding: .75rem; overflow-wrap: anywhere; user-select: all;
             font-weight: 600;
             background: color-mix(in srgb, currentColor 8%, transparent); border-radius: .375rem; }
.chart { width: 100%; height: 280px; }
.chart-tall { height: 380px; }