:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#2f2f2f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes slideOutLeft{to{transform:translate(-150%) rotate(-15deg);opacity:0}}@keyframes slideOutRight{to{transform:translate(150%) rotate(15deg);opacity:0}}@keyframes slideInFromBottom{0%{transform:translateY(50px) scale(.9);opacity:.5}to{transform:translateY(0) scale(1);opacity:1}}@keyframes fadeInNext{0%{transform:scale(.95);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes particleBurst{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}@keyframes revealCard{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#242424,#3a3a3a);padding:1rem;box-sizing:border-box;overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}#app{max-width:900px;width:100%;margin:0 auto;padding:2rem;text-align:center;display:flex;justify-content:center;position:relative;z-index:5}.flashcard-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:700px;margin:0 auto;position:relative;z-index:10}.arrow-indicator{position:absolute;top:50%;transform:translateY(-50%);font-size:3em;color:#ffffff4d;z-index:9;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}.arrow-left{left:-50px}.arrow-right{right:-50px}body.is-dragging .arrow-indicator{opacity:1}.flashcard-stack{position:relative;width:550px;height:340px;margin-top:30px;margin-bottom:40px}#particle-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:15}.particle{position:absolute;width:8px;height:8px;background-color:#646cff;border-radius:50%;top:50%;left:50%;opacity:0;will-change:transform,opacity}.flashcard{width:100%;height:100%;perspective:1500px;cursor:grab;position:absolute;top:0;left:0;transition:opacity .4s ease,transform .4s ease;will-change:transform,opacity;z-index:10;opacity:1}#flashcard-next{z-index:1;opacity:0;transform:scale(.9);cursor:default;pointer-events:none;transition:opacity .3s ease,transform .3s ease}#flashcard.revealing{animation:revealCard .6s ease-out forwards;animation-delay:.1s;opacity:0;transform:scale(.8);z-index:12}#flashcard{z-index:12}#flashcard.dropped-left{animation:slideOutLeft .5s forwards ease-in-out;z-index:11}#flashcard.dropped-right{animation:slideOutRight .5s forwards ease-in-out;z-index:11}#flashcard.dragging{opacity:.7;cursor:grabbing;z-index:13;transition:none}body.is-dragging~.flashcard-stack #flashcard-next,.flashcard-stack:has(#flashcard.flipped) #flashcard-next,body.is-dragging #flashcard-next{opacity:.7;transform:scale(1);z-index:11}.flashcard.dragging .flashcard-inner{box-shadow:0 16px 32px #0006}.flashcard-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;box-shadow:0 8px 16px #0000004d;border-radius:15px}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px;border-radius:15px;box-sizing:border-box}.flashcard-front{background:linear-gradient(135deg,#5a5a5a,#3a3a3a)}.flashcard-front h2{font-size:3em}.flashcard-back{background:linear-gradient(135deg,#6a6a6a,#4a4a4a);transform:rotateY(180deg)}.flashcard-back h3{font-size:2em;margin-bottom:15px}.flashcard-back p{font-size:1.2em;font-style:italic;color:#ccc}.controls{display:flex;gap:15px;margin-top:10px;display:none}.drop-zone{position:fixed;top:0;bottom:0;width:120px;display:flex;justify-content:center;align-items:center;background-color:#50505033;border:none;color:#c8c8c880;font-weight:700;writing-mode:vertical-rl;text-orientation:mixed;z-index:1;opacity:0;visibility:hidden;transition:background-color .3s,border-color .3s,color .3s}#unknown-zone{left:0;border-right:5px solid transparent}#known-zone{right:0;border-left:5px solid transparent}.drop-zone.drag-over{background-color:#646cff4d;color:#fff;border-style:dashed}#known-zone.drag-over{background-color:#66bb6a66;border-left-color:#66bb6a;border-style:dashed}#unknown-zone.drag-over{background-color:#ef535066;border-right-color:#ef5350;border-style:dashed}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#f0f0f0}body{background:linear-gradient(135deg,#fff,#e0e0e0)}a:hover{color:#747bff}button{background-color:#e9e9e9;color:#213547;box-shadow:0 2px 4px #0000001a}button:hover{background-color:#dcdcdc;border-color:#646cff}.flashcard-front{background:linear-gradient(135deg,#fff,#f0f0f0)}.flashcard-back{background:linear-gradient(135deg,#f9f9f9,#e8e8e8)}.flashcard-back p{color:#555}.drop-zone{background-color:#c8c8c833;color:#32323280}.drop-zone.drag-over{background-color:#646cff33;color:#000}#known-zone.drag-over{background-color:#a5d6a74d;border-left-color:#81c784}#unknown-zone.drag-over{background-color:#ef9a9a4d;border-right-color:#e57373}.controls{display:none}body.is-dragging~.flashcard-stack #flashcard-next,.flashcard-stack:has(#flashcard.flipped) #flashcard-next,body.is-dragging #flashcard-next{opacity:.8}#flashcard.dragging{opacity:.7}.flashcard.dragging .flashcard-inner{box-shadow:0 12px 24px #0003}.arrow-indicator{color:#0000004d}.particle{background-color:#747bff}}