/* Levoop design layer (shared by every page: loaded by index.html and imported by practice.css).
   - Fonts served from Levoop itself (no outside requests): Onest for text, Unbounded for headings.
   - Gentle, quick motion: buttons that lift and press, smooth page changes, headings that wrap evenly.
   Nothing moves for people who have asked for reduced motion. */
/* Note: the logo (an SVG) asks for "Inter" and must keep the font it had before, otherwise its letters change width and
   the "l" gets cut off. So no font here may be called "Inter". */
@font-face{font-family:"Onest";font-style:normal;font-display:swap;font-weight:300 900;src:url(/assets/fonts/onest.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:300 900;src:url(/assets/fonts/unbounded.woff2) format("woff2")}
:root{--b1:#a79ef4;--b1-ink:#5145c4;--b1-soft:#f4f2fe;--b2:#6455e3;--b2-ink:#4f3fd1;--b2-soft:#eeebff;--c1:#35278f;--c1-ink:#2b1f7a;--c1-soft:#e7e4f8;--display:"Unbounded","Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
body{font-family:"Onest",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
h1,h2,h3{font-weight:650}h1,h2{letter-spacing:-.02em}
p,li{text-wrap:pretty}
strong,.num,.cc-score b,.dy-score,.st-tile b{font-variant-numeric:tabular-nums}
::selection{background:#6455e333}

/* Buttons and cards: a small lift on hover, a press when tapped */
.btn{transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
@media(hover:hover){.btn:hover{transform:translateY(-1px)}.btn.primary:hover,.primary:hover{box-shadow:0 12px 28px #6455e34d}}
.primary{background:linear-gradient(180deg,#7466f0,#6455e3);box-shadow:0 8px 20px #6455e333,inset 0 1px 0 #ffffff33}
.option,.pcard,.card,.gu-card,.sp-topic,.hub a{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s,background-color .2s}
.option:active:not(:disabled){transform:scale(.985)}

/* Keyboard focus: clear but only when using the keyboard */
:focus-visible{outline:3px solid #8a7cf3;outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* Smooth change between pages (browsers that support it) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lv-out .18s var(--ease-out) both}
::view-transition-new(root){animation:lv-in .28s var(--ease-out) both}
@keyframes lv-out{to{opacity:0}}
@keyframes lv-in{from{opacity:0;transform:translateY(6px)}}

/* Open/close the "frequent questions" smoothly where supported */
:root{interpolate-size:allow-keywords}
details::details-content{height:0;overflow:hidden;transition:height .3s var(--ease-out),content-visibility .3s allow-discrete}
details[open]::details-content{height:auto}
summary{list-style-position:inside}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* Phones: no grey flash on tap (each control has its own :active), no wait for a double tap, and holding a button does not select its text. Text stays selectable. */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,label,[role=button]{touch-action:manipulation}
button,.btn,.option,.chip,.nav-btn,.menu-btn,.lt-opt,.g-choice,.gap.gpick,.dy-level button{-webkit-user-select:none;user-select:none}
.option:active:not(:disabled),.lt-opt:active:not(:disabled),.g-choice:active:not(:disabled){background:#f5f3ff}