#flashcards-app{width:100%;font-family:var(--font-primary);text-align:center;color:var(--text-primary)}h1{font-size:var(--text-2xl);margin-bottom:var(--spacing-6);color:var(--primary-600);font-weight:var(--font-semibold);line-height:var(--leading-tight)}@media (min-width: 768px){h1{font-size:var(--text-3xl)}}progress{width:100%;height:10px;appearance:none;margin-bottom:var(--spacing-2);border-radius:var(--radius-base);overflow:hidden}progress::-webkit-progress-bar{background:var(--neutral-200);border-radius:var(--radius-base)}progress::-webkit-progress-value{background:linear-gradient(90deg, var(--primary-500), var(--primary-600));border-radius:var(--radius-base);transition:width var(--duration-300) var(--ease-out)}progress::-moz-progress-bar{background:linear-gradient(90deg, var(--primary-500), var(--primary-600));border-radius:var(--radius-base)}#progress-text{font-size:var(--text-sm);margin-bottom:var(--spacing-4);color:var(--text-tertiary);font-weight:var(--font-medium)}#card{background:var(--bg-tertiary);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-primary);overflow:hidden;transition:all var(--duration-300) var(--ease-out);min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-4);cursor:pointer;user-select:none;padding:var(--spacing-8);margin:var(--spacing-6) auto;max-width:600px}#card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px) scale(1.01);border-color:var(--border-secondary)}#card:active{transform:translateY(-2px) scale(1)}@media (min-width: 640px){#card{min-height:320px;padding:var(--spacing-10);max-width:700px}}@media (min-width: 768px){#card{min-height:360px;padding:var(--spacing-12);max-width:800px}}@media (min-width: 1024px){#card{max-width:900px}}#card hr{border:none;border-top:1px dashed var(--border-secondary);width:60%;margin:var(--spacing-2) auto;opacity:0.7}#card-a.hidden{display:none}#card-q{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);line-height:var(--leading-relaxed);text-align:center}@media (min-width: 640px){#card-q{font-size:var(--text-2xl)}}@media (min-width: 768px){#card-q{font-size:var(--text-3xl)}}#card-a{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-top:var(--spacing-2);text-align:center}@media (min-width: 640px){#card-a{font-size:var(--text-xl)}}@media (min-width: 768px){#card-a{font-size:var(--text-2xl)}}#controls{margin-top:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-3)}@media (min-width: 640px){#controls{flex-direction:row;justify-content:center;gap:var(--spacing-4)}}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-primary);font-weight:var(--font-medium);text-decoration:none;border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-200) var(--ease-out);white-space:nowrap;user-select:none;position:relative;overflow:hidden;padding:var(--spacing-2-5) var(--spacing-6);font-size:var(--text-base);min-height:44px;background:linear-gradient(135deg, var(--primary-500), var(--primary-600));color:white;border-color:var(--primary-600);box-shadow:var(--shadow-sm);font-weight:var(--font-medium);min-width:120px}button:hover{background:linear-gradient(135deg, var(--primary-600), var(--primary-700));transform:translateY(-2px);box-shadow:var(--shadow-md)}button:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.3)}button:disabled{opacity:0.6;cursor:not-allowed;pointer-events:none}button.btn-secondary{background:transparent;color:var(--primary-600);border-color:var(--primary-500)}button.btn-secondary:hover{background:var(--primary-50);border-color:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}button.btn-secondary:active{transform:translateY(0);background:var(--primary-100)}#retry-btn{margin-top:var(--spacing-5);background:linear-gradient(135deg, var(--success), #059669);color:white;border-color:var(--success)}#retry-btn:hover{background:linear-gradient(135deg, #059669, #047857);transform:translateY(-2px);box-shadow:var(--shadow-md)}#retry-btn.hidden{display:none}@media (max-width: 640px){#card{font-size:var(--text-base);padding:var(--spacing-6) var(--spacing-4);min-height:180px}#flashcards-app{margin:var(--spacing-8) auto}h1{font-size:var(--text-xl)}}#card.hint{position:relative;animation:fadeInPulse 2.5s var(--ease-out);z-index:var(--z-10)}#card.hint::after{content:"クリックで答えを表示";position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--primary-700);background:rgba(255,255,255,0.95);border-radius:inherit;pointer-events:none;opacity:0;animation:fadeInOut 2.5s var(--ease-out);transition:opacity var(--duration-300) var(--ease-out);backdrop-filter:blur(2px)}@keyframes fadeInPulse{0%{opacity:0;box-shadow:0 0 0 0 rgba(59,130,246,0.6)}10%{opacity:1}70%{box-shadow:0 0 0 20px rgba(59,130,246,0)}100%{opacity:1;box-shadow:0 0 0 0 rgba(59,130,246,0)}}@keyframes fadeInOut{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}.app-links{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(1, minmax(0, 1fr));gap:var(--spacing-6);margin:var(--spacing-12) 0 var(--spacing-8) 0;padding:0}@media (min-width: 640px){.app-links{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.app-links{grid-template-columns:repeat(3, minmax(0, 1fr))}}.app-link{background:var(--bg-tertiary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--border-primary);overflow:hidden;transition:all var(--duration-300) var(--ease-out);display:flex;flex-direction:column;align-items:center;background:var(--primary-50);border:1px solid var(--primary-200);padding:var(--spacing-6);text-decoration:none;color:var(--primary-700);font-weight:var(--font-semibold);font-size:var(--text-base);transition:all var(--duration-200) var(--ease-out);min-height:140px}.app-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-secondary)}.app-link:hover{background:var(--primary-100);color:var(--primary-800);text-decoration:none;transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-lg)}.app-link i{font-size:var(--text-3xl);margin-bottom:var(--spacing-3);color:var(--primary-600)}.app-link span{margin-bottom:var(--spacing-1);text-align:center}.app-link small{font-size:var(--text-sm);color:var(--primary-600);font-weight:var(--font-normal);text-align:center;opacity:0.8}@media (max-width: 640px){.app-links{grid-template-columns:1fr;gap:var(--spacing-4);margin:var(--spacing-8) 0 var(--spacing-6) 0}.app-link{min-height:120px;padding:var(--spacing-5);font-size:var(--text-sm)}.app-link i{font-size:var(--text-2xl)}}