:root { --app-width: min(100vw, 430px); --rpx: calc(var(--app-width) / 750); --page-height: calc(100dvh - 44px); }
* { box-sizing: border-box; }
html { background: #f5f4f3; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; }
#phone { width: var(--app-width); margin: 0 auto; min-height: 100dvh; background: white; position: relative; transform: translateZ(0); }
#navigation { height: 44px; display: flex; align-items: center; justify-content: space-between; background: #f3f8fc; font-size: 16px; font-weight: 500; }
#navigation[hidden] { display: none; }
#back, .navigation-spacer { width: 44px; height: 44px; }
#back { padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; }
#app { position: relative; }
button { border: 0; padding: 0 14px; margin: 0 auto; line-height: normal; background: #f8f8f8; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px solid #ca5d77; outline-offset: 4px; }
img { display: inline-block; object-fit: contain; }
input { font: inherit; min-width: 0; border: 0; outline-offset: 2px; }
grammar-card, recall-buttons, session-progress, favorite-button, translation-toggle { display: block; }
scroll-view { display: block; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
scroll-view::-webkit-scrollbar { display: none; }
.recall-page scroll-view.card-scroll { overflow-y: auto; overflow-x: hidden; }
::selection { background: #ffe0e9; color: #623547; }
#toast { position: fixed; z-index: 100; left: 50%; bottom: 88px; transform: translateX(-50%); max-width: 85%; padding: 12px 18px; border-radius: 10px; background: #343034; color: white; font-size: 14px; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (max-height: 730px) { .recall-page .card-stack, .recall-page .stack-card { min-height: 0; } .recall-page .grammar-card.is-front, .recall-page .front-face { min-height: min(59dvh, calc(var(--rpx) * 870)); } }