body,html{margin:0;padding:0;background-color:#121214;width:100%;min-height:100vh}:root {--scale-factor:1.15}.app-container{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;width:100vw;background-color:#121214;color:#fff;font-family:system-ui,sans-serif;box-sizing:border-box;margin:0;padding:40px 20px}.content-wrapper{display:grid;grid-template-columns:1fr;gap:40px;width:100%;max-width:950px;margin:0 auto;justify-content:center}.audio-box{display:flex;align-items:center;justify-content:center;gap:8px}.dynamic-direction:after {content:"CARDS TO GENERATE (see examples on the right)"}@media (max-width: 899px){.dynamic-direction:after {content:"CARDS TO GENERATE (see examples below)"}}@media (min-width: 900px){.content-wrapper{grid-template-columns:minmax(320px,430px) minmax(320px,430px);align-items:start;transform:scale(var(--scale-factor));transform-origin:top center}}.config-panel{display:flex;flex-direction:column;gap:18px;padding:28px;background-color:#1a1a1e;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.24);box-sizing:border-box;border:1px solid #2a2a30;height:fit-content}.panel-header{margin:0 0 8px 0;display:flex;flex-direction:row;gap:16px;align-items:center}.panel-header h3{margin:0;font-size:22px;color:#fff;font-weight:600;line-height:1.2}.input-group{display:flex;flex-direction:column;gap:8px;font-weight:500;font-size:14px;color:#a1a1aa}.text-input{padding:10px 14px;border:1px solid #2e2e33;border-radius:6px;font-size:16px;background-color:#26262b;color:#fff;outline:none;box-sizing:border-box;width:100%}.checkbox-group{display:flex;gap:16px;background-color:#222227;padding:10px 14px;border-radius:6px;border:1px solid #2e2e33;flex-wrap:wrap}.checkbox-group label{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff;cursor:pointer}.checkbox-group input[type="checkbox"]{accent-color:#8b5cf6;width:16px;height:16px;cursor:pointer}.space-between{display:flex;justify-content:space-between;align-items:center}.toggle-btn{cursor:pointer;color:#0a84ff;font-size:13px;font-weight:700;letter-spacing:.05em;background:none;border:none}.color-picker{width:100%;height:36px;border:1px solid #2e2e33;border-radius:6px;cursor:pointer;padding:0;background:none}.primary-btn{margin-top:4px;padding:14px;background-color:#0062cc;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer}.preview-panel{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;padding-right:8px;position:sticky;top:40px;max-height:calc(100vh - 80px);overflow-y:auto}.preview-panel:-webkit-scrollbar {width:8px}.preview-panel:-webkit-scrollbar-thumb {background:#2a2a30;border-radius:4px}.preview-header{text-align:left;position:sticky;top:0;background-color:#121214;padding-bottom:6px;z-index:10;border-bottom:1px solid #2a2a30}.preview-header h2{margin:0 0 4px 0;font-size:20px;color:#fff;font-weight:600}.preview-header p{margin:0 0 4px 0;font-size:13px;color:#a1a1aa;line-height:1.3}.card-container{display:flex;flex-direction:column;gap:6px;background-color:#1a1a1e;padding:10px;border-radius:8px;border:1px solid #2c2c35}.card-label{font-size:11px;font-weight:700;text-transform:uppercase}.color-passive{color:#30d158}.color-active{color:#0a84ff}.color-writing{color:#ff9f0a}.card-face{background-color:transparent;border-radius:6px;padding:6px 10px;color:#fff}.face-label{font-size:10px;color:#8e8e93;font-weight:700;border-bottom:1px solid #2c2c35;padding-bottom:2px;margin-bottom:4px}.face-content{margin:0;font-size:15px;font-weight:500;text-align:center}.word-highlight{font-weight:700;margin-right:6px}.type-box{display:inline-block;padding:2px 8px;border:1px solid #3f3f46;border-radius:4px;font-family:monospace;color:#71717a;background-color:#121214;min-width:140px}.correct-answer{display:inline-block;padding:2px 8px;background-color:#062b14;color:#4ade80;border-radius:4px;font-family:monospace;font-weight:700;font-size:13px}.text-center{text-align:center}.margin-bottom-8{margin-bottom:6px}