*{box-sizing:border-box}body{margin:0;font-family:Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#1a1a1a;transition:background-color .3s ease,color .3s ease}body.dark{background-color:#1a1a1a;color:#f5f5f5}.datatype-modal{background:#ffffff;border:1px solid #d3d6da;border-radius:8px;box-shadow:0 4px 20px #0003}.dark .datatype-modal{background:#2a2a2a;border-color:#3a3a3c}.datatype-modal-header{padding:1rem;background:#f5f5f5;border-radius:8px 8px 0 0;border-bottom:1px solid #d3d6da;color:#1a1a1a}.dark .datatype-modal-header{background:#3a3a3a;border-bottom-color:#4a4a4a;color:#d7dadc}.datatype-modal-body{padding:1rem;overflow-y:auto;flex:1;color:#1a1a1a}.dark .datatype-modal-body{color:#d7dadc}.datatype-modal-body h4{color:#1a1a1a!important}.dark .datatype-modal-body h4{color:#d7dadc!important}.datatype-table{width:100%;border-collapse:collapse;fontSize:.85rem}.datatype-table thead tr{border-bottom:2px solid #d3d6da}.dark .datatype-table thead tr{border-bottom-color:#4a4a4a}.datatype-table th{color:#1a1a1a;font-size:.88rem}.dark .datatype-table th{color:#d7dadc;font-size:.88rem}.datatype-table td{color:#1a1a1a}.dark .datatype-table td{color:#d7dadc}.datatype-row{border-bottom:1px solid #e9ecef}.dark .datatype-row{border-bottom-color:#3a3a3a}.datatype-desc{color:#555}.dark .datatype-desc{color:#a8a8a8}.datatype-modal-footer{padding:.5rem 1rem;background:#f5f5f5;border-top:1px solid #d3d6da;border-radius:0 0 8px 8px;text-align:center;color:#555}.dark .datatype-modal-footer{background:#3a3a3a;border-top-color:#4a4a4a;color:#a8a8a8}.container{max-width:500px;margin:0 auto;padding:3.5rem .5rem .5rem;min-height:100vh;display:flex;flex-direction:column;position:relative}@media (min-width: 768px){.container{padding:3.5rem 1rem 1rem}}.card{background:#ffffff;border-radius:0;padding:1rem;box-shadow:none;border:1px solid #d3d6da;margin-bottom:.5rem;transition:all .3s ease;animation:fadeInUp .5s ease-out}@media (min-width: 768px){.card{padding:1.5rem}}.dark .card{background:#121213;border-color:#3a3a3c}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn{display:inline-block;padding:1rem 2rem;border:none;border-radius:4px;background:#6aaa64;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s ease;text-decoration:none;text-align:center;text-transform:uppercase;letter-spacing:.05em}.btn:hover:not(:disabled){background:#5a9a54}.btn:disabled{background:#d3d6da;color:#878a8c;cursor:not-allowed}.btn-primary{background:#5a8fd4}.btn-primary:hover:not(:disabled){background:#4a7fc4}.btn-secondary{background:#878a8c}.btn-secondary:hover:not(:disabled){background:#6a6d70}.btn-success{background:#6aaa64}.btn-success:hover:not(:disabled){background:#5a9a54}.dark .btn:disabled{background:#3a3a3c;color:#565758}.input{width:100%;padding:1.5rem;border:2px solid #d3d6da;border-radius:4px;font-size:2rem;font-weight:700;text-align:center;letter-spacing:.02em;margin-bottom:.5rem;transition:all .2s ease}.input::placeholder{font-size:1rem;font-weight:400;opacity:.5}.input:focus{outline:none;border-color:#878a8c;box-shadow:0 0 0 1px #878a8c}.dark .input{background:#121213;border-color:#3a3a3c;color:#fff}.dark .input:focus{border-color:#565758;box-shadow:0 0 0 1px #565758}.header{text-align:center;margin-bottom:1rem}.title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#1a1a1a;letter-spacing:-.01em}@media (min-width: 768px){.title{font-size:1.5rem}}.dark .title{color:#d7dadc}.subtitle{color:#787c7e;font-size:1rem;font-weight:400}.dark .subtitle{color:#818384}.mode-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.mode-btn{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:#ffffff;border:2px solid #d3d6da;border-radius:4px;text-decoration:none;color:#1a1a1a;transition:all .15s ease;text-align:left}.mode-btn:hover{border-color:#878a8c;background:#f9f9f9;transform:translate(4px)}.mode-icon{font-size:2rem;flex-shrink:0}.mode-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.mode-title{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#1a1a1a}.mode-description{font-size:.85rem;font-weight:400;color:#787c7e;text-transform:none;letter-spacing:normal}.dark .mode-btn{background:#121213;border-color:#3a3a3c;color:#d7dadc}.dark .mode-btn:hover{border-color:#565758;background:#1a1a1b}.mode-btn-highlight{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;border-color:#667eea!important;color:#fff!important}.mode-btn-highlight .mode-title,.mode-btn-highlight .mode-description{color:#fff!important}.mode-btn-highlight:hover{background:linear-gradient(135deg,#5568d3 0%,#653a8d 100%)!important;transform:translate(4px) scale(1.02)}.dark .mode-btn-highlight{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;border-color:#667eea!important}.dark .mode-btn-highlight:hover{background:linear-gradient(135deg,#5568d3 0%,#653a8d 100%)!important}.dark .mode-title{color:#d7dadc}.dark .mode-description{color:#818384}.question{font-size:.95rem;line-height:1.4;margin-bottom:1rem;text-align:left;color:#1a1a1a;font-weight:500}@media (min-width: 768px){.question{font-size:1.1rem;line-height:1.5;margin-bottom:1.5rem}}.dark .question{color:#d7dadc}.answer-box{background:#ffffff;border:2px solid #6aaa64;border-radius:4px;padding:1rem;margin:1rem 0;text-align:center;font-size:1rem;font-weight:600}.dark .answer-box{background:#121213;border-color:#538d4e}.explanation{background:#f9f9f9;border:1px solid #d3d6da;border-radius:4px;padding:1rem;margin:.5rem 0;font-size:.85rem;line-height:1.5;color:#1a1a1a}@media (min-width: 768px){.explanation{font-size:.95rem;padding:1.5rem}}.dark .explanation{background:#1a1a1b;border-color:#3a3a3c;color:#d7dadc}.toggle-container{position:absolute;top:.5rem;right:.5rem;z-index:10}.toggle{background:transparent;border:2px solid #d3d6da;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .15s ease}.toggle:hover{background:#f9f9f9;border-color:#878a8c}.dark .toggle{border-color:#3a3a3c}.dark .toggle:hover{background:#1a1a1b;border-color:#565758}.back-btn{position:absolute;top:.5rem;left:.5rem;z-index:10;background:transparent;color:#1a1a1a;border:2px solid #d3d6da;border-radius:4px;padding:.4rem .8rem;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .15s ease}.back-btn:hover{background:#f9f9f9;border-color:#878a8c}.dark .back-btn{color:#d7dadc;border-color:#3a3a3c}.dark .back-btn:hover{background:#1a1a1b;border-color:#565758}