:root{color-scheme:dark;--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;--bg: #000000;--bg-elevated: #1c1c1e;--bg-card: rgba(255, 255, 255, .065);--bg-card-h: rgba(255, 255, 255, .1);--bg-input: rgba(118, 118, 128, .24);--bg-deep: rgba(0, 0, 0, .35);--text: #f5f5f7;--text-2: rgba(235, 235, 245, .64);--text-3: rgba(235, 235, 245, .34);--border: rgba(255, 255, 255, .1);--border-h: rgba(255, 255, 255, .2);--separator: rgba(84, 84, 88, .6);--accent: #7d7aff;--accent-rgb: 125, 122, 255;--on-accent: #ffffff;--success: #30d158;--warning: #ffd60a;--danger: #ff453a;--material-thin: rgba(28, 28, 30, .55);--material-regular: rgba(28, 28, 30, .72);--material-thick: rgba(28, 28, 30, .88);--material-edge: rgba(255, 255, 255, .12);--material-blur: blur(24px) saturate(180%);--neu-light: rgba(255, 255, 255, .05);--neu-dark: rgba(0, 0, 0, .6);--neu-raised: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 0 0 .5px rgba(255,255,255,.1) inset, 0 10px 30px -6px rgba(0,0,0,.55);--neu-raised-sm: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 0 0 .5px rgba(255,255,255,.09) inset, 0 4px 14px -4px rgba(0,0,0,.45);--neu-pressed: 0 0 0 .5px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.35) inset;--neu-flat: 0 0 0 .5px rgba(255,255,255,.1) inset;--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--spring: linear(0, .051, .162, .293, .421, .536, .634, .715, .781, .833, .873, .905, .929, .947, .96, .971, .978, .984, .988, .991, .994, .995, .997, .998, 1);--spring-dur: .48s;--spring-slow: linear(0, .05, .16, .289, .416, .531, .63, .711, .777, .829, .87, .902, .926, .945, .959, .97, .978, .983, .988, .991, .993, .995, .996, .997, 1);--spring-slow-dur: .68s;--spring-bouncy: linear(0, .048, .16, .3, .443, .575, .689, .783, .856, .912, .952, .979, .997, 1.008, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1);--spring-bouncy-dur: .52s;--press-dur: 90ms}body.light-mode{color-scheme:light;--bg: #f2f2f7;--bg-elevated: #ffffff;--bg-card: #ffffff;--bg-card-h: #fbfbfd;--bg-input: rgba(118, 118, 128, .12);--bg-deep: rgba(0, 0, 0, .04);--text: #1d1d1f;--text-2: rgba(60, 60, 67, .72);--text-3: rgba(60, 60, 67, .4);--border: rgba(0, 0, 0, .08);--border-h: rgba(0, 0, 0, .16);--separator: rgba(60, 60, 67, .22);--accent: #5856d6;--accent-rgb: 88, 86, 214;--success: #248a3d;--warning: #b25000;--danger: #d70015;--material-thin: rgba(255, 255, 255, .55);--material-regular: rgba(255, 255, 255, .72);--material-thick: rgba(250, 250, 252, .9);--material-edge: rgba(255, 255, 255, .85);--neu-light: #ffffff;--neu-dark: rgba(0, 0, 0, .12);--neu-raised: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -8px rgba(0,0,0,.14);--neu-raised-sm: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 4px 12px -4px rgba(0,0,0,.1);--neu-pressed: 0 0 0 .5px rgba(0,0,0,.08) inset, 0 1px 4px rgba(0,0,0,.08) inset;--neu-flat: 0 0 0 .5px rgba(0,0,0,.08) inset}body.mode-osmoklasista{--accent: #30d158;--accent-rgb: 48, 209, 88;--on-accent: #062b12}body.mode-osmoklasista.light-mode{--accent: #248a3d;--accent-rgb: 36, 138, 61;--on-accent: #ffffff}body.mode-english{--accent: #0a84ff;--accent-rgb: 10, 132, 255}body.mode-english.light-mode{--accent: #007aff;--accent-rgb: 0, 122, 255}body.mode-spanish{--accent: #ff375f;--accent-rgb: 255, 55, 95}body.mode-spanish.light-mode{--accent: #d70015;--accent-rgb: 215, 0, 21}body{--bg-ambient: radial-gradient(1100px 700px at 85% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), radial-gradient(900px 640px at -12% 108%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%), var(--bg);--bg-body: var(--bg);--bg-card-hover: var(--bg-card-h);--border-color: var(--border);--text-main: var(--text);--text-muted: var(--text-2);--btn-bg: var(--bg-card)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font:100%/1.5 var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:var(--bg-ambient);color:var(--text);min-height:100vh;transition:background-color .4s ease,color .4s ease}@media (min-width: 900px) and (hover: hover) and (pointer: fine){body{background-attachment:fixed}}button,input,select,textarea{font-family:inherit}button{touch-action:manipulation}::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}h1,h2,h3{text-wrap:balance}h1{letter-spacing:-.022em;line-height:1.08}h2{letter-spacing:-.018em;line-height:1.15}h3{letter-spacing:-.012em;line-height:1.25}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:8px}.app-shell :is(button,[role=button],a.pressable,.pressable):not(:disabled){transition-property:transform,background-color,box-shadow,color,opacity,border-color;transition-duration:var(--spring-dur);transition-timing-function:var(--spring)}.app-shell :is(button,[role=button],a.pressable,.pressable):not(:disabled):active{transform:scale(.97);transition-duration:var(--press-dur);transition-timing-function:ease-out}.material{background:var(--material-regular);-webkit-backdrop-filter:var(--material-blur);backdrop-filter:var(--material-blur);box-shadow:0 0 0 .5px var(--border),inset 0 1px 0 var(--material-edge)}@media (prefers-reduced-motion: reduce){:root{--spring: ease;--spring-slow: ease;--spring-bouncy: ease;--spring-dur: .18s;--spring-slow-dur: .2s;--spring-bouncy-dur: .18s}.app-shell :is(button,[role=button],a.pressable,.pressable):not(:disabled):active{transform:none;opacity:.7}*,*:before,*:after{scroll-behavior:auto!important}}@media (prefers-reduced-transparency: reduce){:root,body.light-mode{--material-thin: var(--bg-elevated);--material-regular: var(--bg-elevated);--material-thick: var(--bg-elevated);--material-blur: none}}@media (prefers-contrast: more){:root{--text-2: rgba(235, 235, 245, .85);--text-3: rgba(235, 235, 245, .6);--border: rgba(255, 255, 255, .35);--material-regular: #1c1c1e;--material-thick: #1c1c1e}body.light-mode{--text-2: rgba(60, 60, 67, .92);--text-3: rgba(60, 60, 67, .7);--border: rgba(0, 0, 0, .4);--material-regular: #ffffff;--material-thick: #ffffff}}
