*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--grad-page); /* Subtle warm gradient (was flat paper) */ background-attachment: fixed; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; letter-spacing: -0.005em; } /* Burmese-script blocks get the Myanmar font stack. Only triggered by an explicit .lang-my class so the page default stays Geist for Latin glyphs. (Originally used :lang(my) but that matches body via and prevented Geist from applying to the UI.) */ .lang-my { font-family: var(--font-my); line-height: var(--lh-my); font-size: 1.05em; /* Burmese script reads smaller, bump it slightly */ letter-spacing: 0; /* don't tighten Burmese */ } h1.lang-my, h2.lang-my, h3.lang-my, .home-snake__today-title.lang-my, .lesson__title.lang-my, .quiz-screen__q.lang-my, .exam-screen__q-text.lang-my { font-weight: 700; font-size: 1.08em; } h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: 600; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0; } ul, ol { margin: 0; padding-left: 1.2em; } button { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img, video { max-width: 100%; display: block; } [hidden] { display: none !important; } /* Boot splash */ .boot { position: fixed; inset: 0; display: grid; place-items: center; gap: var(--space-4); background: var(--paper); z-index: 9999; } .boot__spinner { width: 28px; height: 28px; border: 2px solid var(--ink-4); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.9s linear infinite; } .boot__label { color: var(--ink-3); font-size: var(--fs-caption); letter-spacing: 0.02em; } @keyframes spin { to { transform: rotate(360deg); } } /* Two layouts: a centred phone frame for the intern side, a wide canvas for admin. */ .layout-phone { margin: 0 auto; max-width: var(--phone-max); min-height: 100dvh; padding-bottom: 100px; /* tabbar + safe-area room */ background: transparent; animation: pageFadeIn 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .layout-wide { margin: 0 auto; max-width: var(--content-max); padding: var(--space-6); animation: pageFadeIn 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .layout-phone, .layout-wide { animation: none; } } /* Focus visibility — accessible without being noisy. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }