:root{--bg-color: #0f172a;--text-color: #f8fafc;--card-bg: rgba(30, 41, 59, .7);--card-border: rgba(255, 255, 255, .1);--primary: #3b82f6;--primary-hover: #60a5fa;--secondary: #8b5cf6;--accent: #10b981;--danger: #ef4444}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Noto Sans JP,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,.3) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,.3) 0,transparent 50%);color:var(--text-color);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;overflow-x:hidden}#app{width:100%;max-width:800px;display:flex;flex-direction:column;gap:2rem;animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}header{text-align:center}h1{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;letter-spacing:.05em}p.subtitle{color:#94a3b8;font-size:1.1rem}.tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.tab-btn{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-color);padding:.75rem 1.5rem;border-radius:9999px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tab-btn:hover{background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.tab-btn.active{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;box-shadow:0 0 15px #8b5cf680}.quiz-container{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;box-shadow:0 25px 50px -12px #00000080;position:relative;overflow:hidden;transition:transform .3s ease}.progress{position:absolute;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s ease}.question-count{position:absolute;top:1rem;right:1.5rem;font-size:.9rem;color:#94a3b8;font-weight:600}.question{font-size:2rem;font-weight:800;margin:2rem 0;text-align:center;word-break:break-word}.answer-area{display:flex;flex-direction:column;align-items:center;width:100%;min-height:120px}.answer{font-size:2.5rem;font-weight:900;color:#10b981;opacity:0;transform:translateY(10px) scale(.95);transition:none}.answer.show{opacity:1;transform:translateY(0) scale(1);transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.controls{display:flex;gap:1rem;margin-top:2rem;width:100%;justify-content:center}.btn{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-color);padding:1rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s ease;min-width:150px}.btn:hover{background:#ffffff1a;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--primary);border-color:transparent}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 0 15px #3b82f680}.btn-secondary{background:linear-gradient(135deg,#10b981,#059669);border-color:transparent}.btn-secondary:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 0 15px #10b98180}.nav-buttons{display:flex;gap:1rem;width:100%}.nav-buttons .btn{flex:1}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@media (max-width: 600px){h1{font-size:2rem}.quiz-container{padding:2rem 1.5rem}.question{font-size:1.5rem}.answer{font-size:2rem}.controls{flex-direction:column}.btn{width:100%}}