:root{--font-mono:"Roboto Mono", monospace}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;background:#000;font-size:18px;line-height:32px}html,body,#app{height:100%}body{color:#fff;margin:0;font-family:system-ui;font-size:18px;line-height:32px}@media (max-width:1024px){body{font-size:15px;line-height:24px}}img{max-width:100%;height:auto;display:block}h1{margin:40px 0;font-size:64px;font-weight:700;line-height:70px}@media (max-width:1024px){h1{margin:24px 0;font-size:42px;line-height:42px}}@media (max-width:768px){h1{font-size:38px;line-height:38px}}@media (max-width:400px){h1{font-size:32px;line-height:32px}}p{margin:24px 0}@media (max-width:1024px){p{margin:calc(var(--base) * .75) 0}}a{color:currentColor}a:focus{opacity:.8;outline:none}a:active{opacity:.7;outline:none}svg{vertical-align:middle}.home-container{color:#f3f4f6;flex-direction:column;max-width:1200px;min-height:100vh;margin:0 auto;padding:45px 20px;display:flex}@media (max-width:480px){.home-container{padding:24px 16px}}.page-header{text-align:center;margin-bottom:48px}.page-header .title{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);-webkit-text-fill-color:transparent;letter-spacing:-.025em;-webkit-background-clip:text;margin:0 0 12px;font-size:2rem;font-weight:800}.page-header .subtitle{color:#9ca3af;margin:0;font-size:1.1rem}.flashcards-grid{flex-grow:1;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;width:100%;display:grid}.flashcard-wrapper{perspective:1000px;background-color:#0000;height:420px}.flashcard-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flashcard-wrapper:hover .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;width:100%;height:100%;transition:border-color .3s,box-shadow .3s;display:flex;position:absolute;overflow:hidden;box-shadow:0 10px 30px #00000080}.flashcard-front{background:#111827}.flashcard-back{background:linear-gradient(135deg,#1e1b4b 0%,#311042 100%);justify-content:center;align-items:center;padding:24px;transform:rotateY(180deg)}.flashcard-image-container{aspect-ratio:1;background:#1f2937;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.flashcard-thumb{object-fit:contain;width:100%;height:100%;transition:transform .5s}.flashcard-wrapper:hover .flashcard-thumb{transform:scale(1.08)}.flashcard-image-placeholder{aspect-ratio:1;color:#4b5563;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(45deg,#1f2937,#374151);justify-content:center;align-items:center;width:100%;font-size:.9rem;font-weight:500;display:flex}.flashcard-content{text-align:left;flex-direction:column;flex-grow:1;align-items:flex-start;padding:20px;display:flex;position:relative}.flashcard-category{text-transform:uppercase;color:#a5b4fc;letter-spacing:.05em;background:#6366f133;border:1px solid #6366f14d;border-radius:9999px;margin-bottom:12px;padding:4px 10px;font-size:.75rem;font-weight:600}.flashcard-rank{color:#9ca3af;background:#ffffff0d;border-radius:4px;padding:2px 8px;font-size:.8rem;position:absolute;top:20px;right:20px}.flashcard-text{color:#fff;margin:0;font-size:1.25rem;font-weight:700;line-height:1.4}.flashcard-content-back{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.answer-label{text-transform:uppercase;color:#ec4899;letter-spacing:.1em;border-bottom:2px solid #ec4899;margin-bottom:16px;padding-bottom:4px;font-size:.75rem;font-weight:700}.flashcard-text-back{color:#f3f4f6;margin:0;font-size:1.2rem;font-weight:500;line-height:1.6}.footer{justify-content:center;align-items:center;margin-top:60px;display:flex}.links .admin{color:#fff;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);border-radius:8px;padding:12px 24px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-block;box-shadow:0 4px 14px #7c3aed66}.links .admin:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed99}.links .admin:active{transform:translateY(0)}