:root{--bg:#0E251C;--card:#162D24;--milk:#f1f0e8;--gold:#cbc7a4;--line:rgba(241,240,232,.25);--serif:Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--milk);font:18px/1.55 Arial,sans-serif}header,main{width:min(900px,calc(100% - 32px));margin:auto}header{min-height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header a{font:28px var(--serif);color:var(--milk);text-decoration:none}button,input,textarea{font:inherit}button{min-height:52px;padding:10px 18px;border:1px solid var(--line);background:transparent;color:var(--milk);cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);color:var(--bg);border-color:var(--gold)}main{padding:56px 0 80px}.progress{margin-bottom:36px;color:var(--gold);font-size:15px}.bar{height:4px;background:#294236;margin-top:10px}.bar i{display:block;height:100%;background:var(--gold)}.over{color:var(--gold);font-size:14px;letter-spacing:.13em}.screen{max-width:760px}.screen h1{font:400 clamp(38px,7vw,68px)/1.03 var(--serif);margin:12px 0 20px}.screen>p{max-width:650px}.options,.photos{display:grid;gap:12px;margin:28px 0}.options label,.photo{padding:18px;border:1px solid var(--line);background:var(--card);cursor:pointer}.options input{accent-color:var(--gold);margin-right:12px}.options label:has(input:checked){border:2px solid var(--gold)}input[type=text],textarea{width:100%;min-height:54px;padding:14px;border:1px solid var(--line);background:var(--card);color:var(--milk)}textarea{min-height:120px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hint,.error{color:var(--gold)}.photo{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center}.photo img{width:96px;height:72px;object-fit:cover}.photo small{display:block;color:#c9d0c8}dialog{max-width:520px;padding:30px;border:1px solid var(--line);background:var(--card);color:var(--milk)}dialog::backdrop{background:#07140ecc}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px}@media(max-width:540px){body{font-size:17px}.photo{grid-template-columns:70px 1fr}.photo img{width:70px;height:60px}.photo button{grid-column:1/-1}.actions button{width:100%}}

@media (min-width: 900px) {
  main:has(#analysisButton) { padding: 18px 0 30px; border: 0; outline: 0; box-shadow: none; }
  .screen:has(#analysisButton) { max-width: 900px; padding: 26px clamp(32px, 3vw, 40px) 20px; border: 1px solid var(--line); background: var(--card); }
  .screen:has(#analysisButton) .over { margin: 0 0 6px; }
  .screen:has(#analysisButton) h1 { margin: 8px 0 12px; font-size: clamp(36px, 3.7vw, 52px); line-height: .98; }
  .screen:has(#analysisButton) > p { max-width: none; margin: 10px 0; font-size: 17px; line-height: 1.42; }
  .screen:has(#analysisButton) .options { gap: 4px; margin: 14px 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .screen:has(#analysisButton) .options p { margin: 6px 0 0; }
  .screen:has(#analysisButton) .actions:has(#analysisButton) { display: grid; width: 100%; gap: 6px; margin-top: 12px; }
  .screen:has(#analysisButton) .actions:has(#analysisButton) .hint { margin: 0; font-size: 15px; line-height: 1.35; }
  .screen:has(#analysisButton) .actions:has(#analysisButton) .error { min-height: 0; margin: 0; }
  .screen:has(#analysisButton) #analysisButton { width: 100%; min-height: 48px; border: 0; outline: 0; box-shadow: none; }
  .screen:has(#analysisButton) > .actions { margin-top: 10px; }
  .screen:has(#analysisButton) > .actions button { min-height: 46px; }
  dialog#resume { width: min(550px, calc(100% - 48px)); max-width: 550px; transform: translateY(-5vh); }
}