:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.app{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px}header{width:100%;max-width:500px;text-align:center}h1{margin-bottom:20px;color:#2c3e50;font-size:24px}main{width:100%;max-width:500px}.navigation-bar{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.nav-button{display:inline-block;padding:10px 20px;font-size:14px;border:2px solid #3498db;background-color:#fff;color:#3498db;border-radius:6px;cursor:pointer;transition:all .2s;text-decoration:none}.nav-button:hover{background-color:#f0f8ff}.nav-button.active{background-color:#3498db;color:#fff}.progress-bar{text-align:center;margin-bottom:20px;font-size:14px;color:#666}.flashcard-container{width:100%;position:relative}.flashcard-container:before{content:"";position:fixed;inset:0;background-color:#0000;z-index:1;pointer-events:none;transition:background-color .4s ease-in-out}.flashcard-container.auto-play-active:before{background-color:#00000080}.flashcard-container.auto-play-active .flashcard,.flashcard-container.auto-play-active .card-controls,.flashcard-container.auto-play-active .progress-bar{position:relative;z-index:2}.flashcard{position:relative;width:100%;height:400px;margin-bottom:30px;cursor:pointer;perspective:1000px}.flashcard-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}.flashcard-inner.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;backface-visibility:hidden}.flashcard-back{transform:rotateY(180deg)}.kana-character,.kanji-character{font-size:120px;line-height:1;font-weight:400}.romaji{font-size:24px;font-weight:600;color:#2c3e50;text-align:center}.reading{font-size:14px;margin-bottom:10px;color:#5a6c7d;text-align:center;font-weight:400;letter-spacing:.5px}.meaning{font-size:14px;font-weight:300;color:#95a5a6;text-align:center;margin-top:8px}.example{text-align:center;margin-bottom:20px}.example-item{margin-bottom:16px}.example-item:last-child{margin-bottom:0}.example-japanese{font-size:28px;font-weight:500;color:#2c3e50;line-height:1.4;margin-bottom:4px}.example-translation{font-size:14px;font-weight:300;color:#7f8c8d;line-height:1.2}.card-controls{display:flex;gap:15px;justify-content:center;margin-bottom:20px}.control-button{padding:12px 24px;font-size:16px;border:none;border-radius:6px;background-color:#3498db;color:#fff;cursor:pointer;transition:background-color .2s;display:inline-flex;align-items:center;justify-content:center}.control-button svg{width:24px;height:24px}.control-button:hover:not(:disabled){background-color:#2980b9}.control-button:active:not(:disabled){transform:translateY(1px)}.control-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.control-button.auto-playing{background-color:#e74c3c;animation:pulse 1.5s ease-in-out infinite}.control-button.auto-playing:hover{background-color:#c0392b}.control-button.shuffle-active{background-color:#9b59b6}.control-button.shuffle-active:hover{background-color:#8e44ad}@keyframes pulse{0%{box-shadow:0 0 #e74c3cb3}70%{box-shadow:0 0 0 10px #e74c3c00}to{box-shadow:0 0 #e74c3c00}}.countdown-text{font-size:20px;font-weight:700;color:#fff}footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;font-size:11px;color:#ccc;opacity:.7}footer a{color:#ccc;text-decoration:none}footer a:hover{text-decoration:underline}.loading,.error,.no-cards{text-align:center;padding:40px;font-size:18px}.error{color:#e74c3c}@media (max-width: 600px){.flashcard{height:350px}.kana-character,.kanji-character{font-size:100px}.card-controls{flex-wrap:nowrap;gap:10px}.control-button{flex:1;min-width:0;padding:10px 15px}.control-button svg{width:20px;height:20px}}