.study-start{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:#e6f3fd;border:1px solid #b5d8ee;border-radius:1.2rem;padding:1.5rem;margin-bottom:1.5rem}
.study-start h2{margin-top:0}.study-start p{max-width:48rem}.study-start .snappie{width:7rem;max-height:9rem;object-fit:contain}
.study-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr));gap:1.25rem}
.study-set{display:flex;flex-direction:column;gap:1rem}.study-set h2,.study-set p{margin:0}.study-set h2 a{text-decoration:none;color:inherit}.study-set>.row:last-child{margin-top:auto}
.study-counts{display:flex;gap:.6rem}.study-counts>span{flex:1;background:#f0f6f1;border-radius:.65rem;padding:.7rem;font-size:.875rem}.study-counts strong{display:block;margin-top:.25rem;font-size:1rem;color:#286344}
.study-entries{display:flex;flex-direction:column;gap:1rem}.study-entry{display:grid;grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1fr) 2.75rem;gap:.65rem;align-items:center;padding:1rem;background:#f5f9fc;border:1px solid #d6e3ed;border-radius:.8rem}.study-entry label{min-width:0}.study-entry label:nth-of-type(3){grid-column:2/4}.study-entry>.icon-btn{grid-column:4;grid-row:1}.study-entry>.question-number{grid-row:1/3}
.study-flashcard{display:grid;gap:1rem}.study-flashcard>p{margin:0}.flashcard-flip{width:100%;min-height:10rem;background:#fff4ca;color:#584619;border:2px solid #eac859;border-radius:1.1rem;font:inherit;font-size:1.2rem;display:flex;flex-direction:column;gap:.6rem;align-items:center;justify-content:center;padding:1.5rem;cursor:pointer;overflow-wrap:anywhere}.flashcard-flip strong{font-size:1.7rem;line-height:1.35}.flashcard-flip svg{width:2rem;height:2rem}.flashcard-flip[aria-expanded=true]{background:#e7f6ee;border-color:#77c699;color:#164a31}.study-flashcard fieldset{margin:0}.study-flashcard legend{font-weight:700}.study-flashcard .btn[aria-pressed=true]{outline:3px solid #193f71;outline-offset:2px}
.study-entry input{width:100%;min-width:0}.study-start .row,.study-set .row,.study-flashcard .row{flex-wrap:wrap}
@media(max-width:700px){.study-start{align-items:flex-start;padding:1rem}.study-start .snappie{width:4rem}.study-entry{grid-template-columns:1.5rem minmax(0,1fr) 2.75rem}.study-entry>label{grid-column:2}.study-entry>label:nth-of-type(3){grid-column:2}.study-entry>.icon-btn{grid-column:3}.study-entry>.question-number{align-self:start}.study-counts{flex-wrap:wrap}.study-counts>span{min-width:5rem}.study-start .row>.btn{width:100%}}
