:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}header{text-align:center;width:100%;max-width:500px}h1{color:#2c3e50;margin-bottom:20px;font-size:24px}main{width:100%;max-width:500px}.navigation-bar{justify-content:center;gap:10px;margin-bottom:20px;display:flex}.nav-button{color:#3498db;cursor:pointer;background-color:#fff;border:2px solid #3498db;border-radius:6px;padding:10px 20px;font-size:14px;text-decoration:none;transition:all .2s;display:inline-block}.nav-button:hover{background-color:#f0f8ff}.nav-button.active{color:#fff;background-color:#3498db}.progress-bar{text-align:center;color:#666;margin-bottom:20px;font-size:14px}.flashcard-container{width:100%;position:relative}.flashcard-container:before{content:"";z-index:1;pointer-events:none;background-color:#0000;transition:background-color .4s ease-in-out;position:fixed;inset:0}.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{z-index:2;position:relative}.flashcard{cursor:pointer;perspective:1000px;width:100%;min-height:400px;margin-bottom:30px;position:relative}.flashcard-inner{width:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .5s;display:grid;position:relative}.flashcard-inner.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;background:#fff;border-radius:12px;flex-direction:column;grid-area:1/1;justify-content:center;align-items:center;padding:40px;display:flex;box-shadow:0 4px 6px #0000001a}.flashcard-back{transform:rotateY(180deg)}.kana-character,.kanji-character{font-size:120px;font-weight:400;line-height:1}.romaji{color:#2c3e50;text-align:center;font-size:24px;font-weight:600}.reading{color:#5a6c7d;text-align:center;letter-spacing:.5px;margin-bottom:10px;font-size:14px;font-weight:400}.meaning{color:#95a5a6;text-align:center;margin-top:8px;font-size:14px;font-weight:300}.example{text-align:center;margin-bottom:20px}.example-item{margin-bottom:16px}.example-item:last-child{margin-bottom:0}.example-japanese{color:#2c3e50;margin-bottom:4px;font-size:28px;font-weight:500;line-height:1.4}.example-translation{color:#7f8c8d;font-size:14px;font-weight:300;line-height:1.2}.flashcard-back.has-sentence{padding:24px 20px}.has-sentence .example{margin-bottom:14px}.has-sentence .example-item{margin-bottom:10px}.has-sentence .example-japanese{word-break:keep-all;font-size:24px}.sentence{text-align:center;border-top:1px solid #ecf0f1;width:100%;margin-bottom:16px;padding-top:14px}.sentence-japanese{color:#2c3e50;font-size:18px;line-height:1.9}.sentence-japanese rt{color:#95a5a6;font-size:10px}.sentence-target{color:#3498db;font-weight:600}.sentence-romaji{color:#95a5a6;margin-bottom:2px;font-size:12px;line-height:1.4}.sentence-translation{color:#7f8c8d;font-size:13px;font-weight:300;line-height:1.2}.card-controls{justify-content:center;gap:15px;margin-bottom:20px;display:flex}.control-button{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:6px;justify-content:center;align-items:center;padding:12px 24px;font-size:16px;transition:background-color .2s;display:inline-flex}.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{cursor:not-allowed;background-color:#bdc3c7}.control-button.auto-playing{background-color:#e74c3c;animation:1.5s ease-in-out infinite pulse}.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{color:#fff;font-size:20px;font-weight:700}footer{text-align:center;color:#ccc;opacity:.7;font-size:11px;position:fixed;bottom:10px;left:0;right:0}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 (width<=360px){.flashcard-back.has-sentence{padding:16px}}@media (width<=600px){.flashcard{min-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}}