*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.6;min-height:100vh;text-rendering:optimizeLegibility;background-color:var(--bg-color)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}h1{color:var(--shade-primary)}p{margin-bottom:1rem;color:inherit}.secondary-text{color:var(--shade-secondary)}.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center}.btn{border:none;border-radius:.25rem;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:background-color .5s ease}.primary-btn{background-color:var(--pop);color:#fff}.primary-btn:hover{background-color:var(--shade-pop)}.action-btn{background-color:var(--secondary)}.action-btn:hover{background-color:var(--shade-secondary)}.card-btn{border-radius:50%;width:35px;height:35px;background-color:#fff;border:2px solid var(--pop);color:#000;display:flex;align-items:center;justify-content:center}.card-btn:hover{background-color:var(--shade-pop);border:none}.star-btn{position:absolute;top:5px;right:5px;z-index:2}.btns:active{background-color:transparent;color:var(--shade-pop)}#starred-btn{background-color:var(--pop)}#starred-btn:hover{background-color:var(--shade-pop)}:root{--bg-color: #FFF5E3;--primary: #F2B5D4;--secondary: #ACCAFF;--secondary-container: #E8DEF8;--pop: #FF9F68;--shade-pop: #FF7424;--shade-primary: #DB88B2;--shade-secondary: #8BAFF0;--pen-black: #000000;--pen-blue: #002B59;--friendly-success: #4dc583;--friendly-alert: #f35b40}.main-header{box-shadow:0 2px 8px #0000001a;background-color:var(--bg-color)}.navbar-nav .nav-link.active{color:var(--shade-primary)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.answer-input{height:110px}#card-form{width:clamp(255px,95%,850px);font-size:clamp(1rem,1.2vw,2rem);box-shadow:0 4px 10px #0000001f}#save-btn{background-color:var(--primary);color:#fff;font-size:clamp(1rem,1.2vw,1.5rem);border:none;padding:.7rem 1rem}#save-btn:hover{background-color:var(--shade-primary)}.flashcard{width:clamp(300px,80%,450px);height:clamp(180px,67vw,300px);cursor:pointer;position:relative;perspective:1000px}.flashcard-front{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1rem;text-align:center;padding:1rem}.flashcard-back{width:100%;height:100%;font-size:clamp(.92rem,2.5vw,1.2rem)}.notebook-lines{height:100%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(to bottom,red 3px,transparent 0) no-repeat,repeating-linear-gradient(to bottom,#fff,#fff 24px,#70b9e98a 25px);background-size:100% 2px,100% 25px;background-position:0 24px,0 0}.flashcard-inner{position:relative;width:100%;height:100%;border-radius:8px;background:#fff;box-shadow:2px 10px 10px #00000054;transition:transform 1s;transform-style:preserve-3d}.flashcard.is-flipped .flashcard-inner,.flashcard-back{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;border-radius:8px;backface-visibility:hidden}.study-btns{background-color:transparent}.study-btns:hover{background-color:transparent;color:var(--shade-secondary);transition:background-color .3s,color .3s}.study-nav{color:var(--secondary)}.icons{width:2rem;height:2rem}#shuffle-btn{color:var(--primary)}