:root {
      --cream: #F1ECDC;
      --paper: #F7F3E7;
      --ink: #15130E;
      --orange: #FF5A1F;
      --gold: #F5B400;
      --teal: #22766A;
      --shadow: 6px 6px 0 var(--ink);
      --radius: 0px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--cream);
      color: var(--ink);
      font-family: 'Space Grotesk', sans-serif;
      -webkit-font-smoothing: antialiased;
      display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;
      background-image:
        linear-gradient(rgba(21,19,14,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,19,14,0.06) 1px, transparent 1px);
      background-size: 34px 34px;
    }
    h1, h2, h3 {
      font-family: 'Archivo Black', sans-serif;
      text-transform: uppercase;
      line-height: 1;
      letter-spacing: -0.01em;
    }
    .mono {
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .container {
      width: 100%; max-width: 800px; padding: 2rem; box-sizing: border-box;
    }
    .card {
      background: var(--paper);
      padding: 3rem;
      border: 4px solid var(--ink);
      box-shadow: 10px 10px 0 var(--ink);
      position: relative;
    }
    
    .header { text-align: center; margin-bottom: 2rem; }
    .header h1 { font-size: 2.5rem; margin-bottom: 1rem; }
    .header p { font-size: 1.1rem; line-height: 1.5; font-weight: 500; }
    
    .btn {
      display: inline-flex; align-items: center; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      font-size: 14px;
      padding: 16px 24px;
      border: 3px solid var(--ink);
      background: var(--paper); color: var(--ink);
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      width: 100%; text-align: left; margin-bottom: 1rem;
    }
    .btn:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); background: #fff; }
    .btn:active:not(:disabled) { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--ink); }
    .btn:disabled { cursor: default; opacity: 0.9; }
    
    .btn.primary { background: var(--orange); color: var(--ink); justify-content: center; text-align: center; font-size: 16px; margin-top: 1.5rem; }
    .btn.primary:hover:not(:disabled) { background: #ff6a33; }
    
    .btn.correct { background: var(--teal) !important; color: #fff !important; border-color: var(--ink) !important; }
    .btn.wrong { background: #ff3333 !important; color: #fff !important; border-color: var(--ink) !important; }
    
    .progress-wrap { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; border-bottom: 3px solid var(--ink); padding-bottom: 1rem; }
    .progress-bar { flex: 1; height: 12px; background: var(--cream); border: 2px solid var(--ink); position: relative; }
    .progress-fill { height: 100%; background: var(--orange); width: 0%; transition: width 0.3s ease; border-right: 2px solid var(--ink); }
    .progress-text { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; width: 60px; text-align: right; }
    
    .tag { 
      display: inline-block; padding: 6px 12px; background: var(--gold); color: var(--ink); 
      border: 2px solid var(--ink); font-family: 'JetBrains Mono', monospace; 
      font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 1.5rem;
      box-shadow: 3px 3px 0 var(--ink);
    }
    
    .question-title { font-size: 1.5rem; margin-bottom: 2rem; line-height: 1.4; font-weight: 700; }
    
    .score-circle {
      width: 160px; height: 160px; border-radius: 50%; border: 6px solid var(--ink);
      display: flex; align-items: center; justify-content: center; font-size: 3.5rem; font-weight: bold; margin: 0 auto 2rem auto;
      background: var(--gold); color: var(--ink); font-family: 'Archivo Black', sans-serif;
      box-shadow: 8px 8px 0 var(--ink);
    }
    
    .screen { display: none; }
    .screen.active { display: block; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    .recommendation { background: #fff; padding: 1.5rem; border: 3px solid var(--ink); margin-top: 2rem; box-shadow: 6px 6px 0 var(--ink); }
    .recommendation h3 { margin-top: 0; color: var(--ink); font-size: 1.3rem; margin-bottom: 10px; }
    .recommendation p { margin-bottom: 0; line-height: 1.5; font-weight: 500; }
    
    .info-box { text-align: left; margin: 2rem 0; background: var(--cream); padding: 1.5rem; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
    .info-box ul { padding-left: 1.5rem; margin-top: 10px; font-weight: 500; }
    .info-box li { margin-bottom: 5px; }

    /* Дополнительные классы для скрытия через JS */
    .hidden { display: none !important; }

    /* Mobile */
    @media (max-width: 600px) {
      .container { padding: 1rem; }
      .card { padding: 1.5rem; box-shadow: 6px 6px 0 var(--ink); }
      .card.header h1 { font-size: 2rem; }
      .question-title { font-size: 18px; }
      .btn { width: 100%; box-shadow: 4px 4px 0 var(--ink); }
      .btn:active { box-shadow: 0 0 0 var(--ink); }
      .recommendation { box-shadow: 4px 4px 0 var(--ink); padding: 1rem; }
      .info-box { padding: 1rem; box-shadow: 4px 4px 0 var(--ink); }
      #optGrid { grid-template-columns: 1fr; }
    }