.flashcards,.flashcards ol,.flashcards li{list-style:none!important;padding-left:0!important;margin-top:0!important}.flashcards{--card-w: clamp(158px, 17vw, 210px);--card-h: calc(var(--card-w) * 1.4);--card-w-open: clamp(300px, 42vw, 380px);--card-h-open: clamp(420px, 56vh, 500px);--fan-step: clamp(82px, 11vw, 150px);--fan-rot: 5deg;--open-shift: clamp(120px, 17vw, 210px);--card-radius: 2px;--ease: var(--ease-smooth);--card-shadow: 0 5px 14px -11px color-mix(in srgb, var(--color-ink) 60%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--color-ink) 16%, transparent);--card-shadow-hover: 0 12px 22px -15px color-mix(in srgb, var(--color-ink) 60%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-ink) 18%, transparent);--card-shadow-open: 0 18px 32px -22px color-mix(in srgb, var(--color-ink) 52%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--color-ink) 16%, transparent);position:relative;display:block;margin:3rem auto 3.5rem;padding:0;width:100%;max-width:860px;min-height:calc(var(--card-h-open) + 2rem);overflow:visible}.flashcards__stage{position:absolute;inset:0;margin:0;padding:0;list-style:none}.flashcard{--tone-bg: var(--color-paper);--tone-fg: var(--color-ink);--tone-pattern: var(--color-ink-soft);--tone-border: var(--color-rule);--card-mark: color-mix(in srgb, var(--tone-fg) 32%, transparent);--tx: calc(var(--off) * var(--fan-step));--ty: calc(var(--absoff) * 7px);--rot: calc(var(--off) * var(--fan-rot));--shift-dir: 0;--shift: calc(var(--shift-dir) * var(--open-shift));position:absolute;top:50%;left:50%;width:var(--card-w);height:var(--card-h);margin:0;z-index:var(--z, 1);transform:translate(calc(-50% + var(--tx) + var(--shift)),calc(-50% + var(--ty))) rotate(var(--rot));transition:top .46s var(--ease),transform .46s var(--ease),width .46s var(--ease),height .46s var(--ease),opacity .32s ease,box-shadow .32s ease}.flashcard[data-tone=ink]{--tone-bg: var(--color-ink);--tone-fg: var(--color-paper);--tone-pattern: var(--color-paper-soft);--tone-border: color-mix(in srgb, var(--color-ink) 82%, var(--color-paper))}.flashcard[data-tone=ocean]{--tone-bg: var(--color-ocean);--tone-fg: var(--color-paper);--tone-pattern: var(--color-paper);--tone-border: var(--color-ocean-soft)}.flashcard[data-tone=lime]{--tone-bg: var(--color-lime);--tone-fg: var(--color-ink);--tone-pattern: var(--color-ink-soft);--tone-border: var(--color-lime-deep)}.flashcard[data-tone=clay]{--tone-bg: var(--color-clay);--tone-fg: var(--color-paper);--tone-pattern: var(--color-paper);--tone-border: var(--color-clay-deep)}.flashcard__hit{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:.85rem 1rem 1rem;border:1px solid var(--tone-border);border-radius:var(--card-radius);background:var(--tone-bg);color:var(--tone-fg);box-shadow:var(--card-shadow);cursor:pointer;text-align:left;font:inherit;appearance:none;overflow:hidden;transition:box-shadow .28s ease,padding .46s var(--ease)}.flashcard__hit:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.flashcards:not([data-open-id]) .flashcard:hover{z-index:90;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) - 16px)) rotate(calc(var(--rot) * .35))}.flashcards:not([data-open-id]) .flashcard:hover .flashcard__hit{box-shadow:var(--card-shadow-hover)}.flashcard__plate{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex:none;margin-bottom:.5rem}.flashcard__eyebrow{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;opacity:.78}.flashcard__pattern{position:relative;height:40%;margin:0 0 .7rem;color:var(--tone-pattern);opacity:.95;flex:none;transition:height .46s var(--ease)}.flashcards .flashcard__title{font-family:var(--font-sans);font-weight:600;font-size:1.3rem;line-height:1.08;letter-spacing:-.01em;color:inherit;text-transform:none;margin:0;border:none;padding:0;background:none;width:auto;flex:none;transition:font-size .46s var(--ease)}.flashcard__body{font-family:var(--font-sans);font-size:1rem;line-height:1.55;margin:.8rem 0 0;color:inherit;opacity:0;transform:translateY(.9rem);pointer-events:none;flex:1 1 auto;min-height:0;overflow-y:auto;border-top:1px solid transparent;transition:opacity .32s ease,transform .38s var(--ease),border-color .32s ease,padding-top .46s var(--ease)}.flashcard__margin{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--card-mark);opacity:0;pointer-events:none;transition:opacity .3s ease .14s}.flashcard__tick{position:absolute;width:9px;height:9px;border:0 solid var(--card-mark);opacity:0;pointer-events:none;transition:opacity .3s ease .14s}.flashcard__tick--tl{top:7px;left:7px;border-top-width:1px;border-left-width:1px}.flashcard__tick--tr{top:7px;right:7px;border-top-width:1px;border-right-width:1px}.flashcard__tick--bl{bottom:7px;left:7px;border-bottom-width:1px;border-left-width:1px}.flashcard__tick--br{bottom:7px;right:7px;border-bottom-width:1px;border-right-width:1px}.flashcards[data-open-id] .flashcard:not([data-active]){opacity:.42;z-index:1;transform:translate(calc(-50% + var(--tx) + var(--shift)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(.94)}.flashcards[data-open-id] .flashcard:not([data-active]) .flashcard__hit{box-shadow:var(--card-shadow)}.flashcard[data-active]{z-index:80;top:0;width:var(--card-w-open);height:var(--card-h-open);transform:translate(-50%) rotate(0)}.flashcard[data-active] .flashcard__hit{cursor:pointer;padding:1.5rem 1.6rem 1.6rem;box-shadow:var(--card-shadow-open)}.flashcard[data-active] .flashcard__pattern{height:30%}.flashcard[data-active] .flashcard__title{font-size:2rem;line-height:1.04}.flashcard[data-active] .flashcard__body{opacity:1;transform:translateY(0);pointer-events:auto;border-top-color:color-mix(in srgb,var(--tone-fg) 20%,transparent);padding-top:.8rem;transition:opacity .36s ease .2s,transform .42s var(--ease) .18s,border-color .32s ease .22s}.flashcard[data-active] .flashcard__margin,.flashcard[data-active] .flashcard__tick{opacity:1}@media(prefers-reduced-motion:reduce){.flashcard,.flashcard__hit,.flashcard__body,.flashcard__pattern,.flashcards .flashcard__title{transition-duration:1ms!important}}
