:root{--gk-radius-scale: 1;--gk-elevation-scale: 1;--gk-density: 1;--gk-brand-h: 232;--gk-brand-c: .125;--gk-brand-50: oklch(97% calc(var(--gk-brand-c) * .14) var(--gk-brand-h));--gk-brand-100: oklch(94% calc(var(--gk-brand-c) * .28) var(--gk-brand-h));--gk-brand-200: oklch(88% calc(var(--gk-brand-c) * .48) var(--gk-brand-h));--gk-brand-300: oklch(80% calc(var(--gk-brand-c) * .72) var(--gk-brand-h));--gk-brand-400: oklch(68% calc(var(--gk-brand-c) * .92) var(--gk-brand-h));--gk-brand-500: oklch(55% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-600: oklch(48% calc(var(--gk-brand-c) * .96) var(--gk-brand-h));--gk-brand-700: oklch(40% calc(var(--gk-brand-c) * .8) var(--gk-brand-h));--gk-brand-800: oklch(32% calc(var(--gk-brand-c) * .64) var(--gk-brand-h));--gk-brand-900: oklch(25% calc(var(--gk-brand-c) * .44) var(--gk-brand-h));--gk-n-0: oklch(100% 0 0);--gk-n-50: oklch(98.5% .004 70);--gk-n-100: oklch(96.5% .005 70);--gk-n-200: oklch(92.5% .006 70);--gk-n-300: oklch(86% .007 70);--gk-n-400: oklch(72% .008 70);--gk-n-500: oklch(60% .009 70);--gk-n-600: oklch(49% .009 70);--gk-n-700: oklch(38% .008 70);--gk-n-800: oklch(27% .007 70);--gk-n-900: oklch(18% .006 70);--gk-n-950: oklch(13% .005 70);--gk-success: oklch(58% .13 152);--gk-success-soft: oklch(96% .03 152);--gk-warning: oklch(70% .14 75);--gk-warning-soft: oklch(96% .04 75);--gk-danger: oklch(56% .17 27);--gk-danger-soft: oklch(96% .03 27);--gk-page: var(--gk-n-50);--gk-surface: var(--gk-n-0);--gk-surface-2: var(--gk-n-100);--gk-border: var(--gk-n-200);--gk-border-strong: var(--gk-n-300);--gk-text: var(--gk-n-900);--gk-text-2: var(--gk-n-600);--gk-text-3: var(--gk-n-500);--gk-on-brand: var(--gk-n-0);--gk-font-body: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif;--gk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--gk-text-xs: 12px;--gk-text-sm: 13px;--gk-text-base: 15px;--gk-text-md: 16px;--gk-text-lg: 18px;--gk-text-xl: 21px;--gk-text-2xl: 25px;--gk-text-3xl: 30px;--gk-text-4xl: 36px;--gk-weight-regular: 400;--gk-weight-medium: 500;--gk-weight-semi: 620;--gk-weight-bold: 700;--gk-leading-tight: 1.18;--gk-leading-snug: 1.35;--gk-leading-body: 1.55;--gk-space-1: calc(4px * var(--gk-density));--gk-space-2: calc(8px * var(--gk-density));--gk-space-3: calc(12px * var(--gk-density));--gk-space-4: calc(16px * var(--gk-density));--gk-space-5: calc(20px * var(--gk-density));--gk-space-6: calc(24px * var(--gk-density));--gk-space-8: calc(32px * var(--gk-density));--gk-space-10: calc(40px * var(--gk-density));--gk-space-14: calc(56px * var(--gk-density));--gk-control-h: max(44px, calc(44px * var(--gk-density)));--gk-radius-sm: calc(2px + 2px * var(--gk-radius-scale));--gk-radius-md: calc(3px + 7px * var(--gk-radius-scale));--gk-radius-lg: calc(4px + 10px * var(--gk-radius-scale));--gk-radius-xl: calc(4px + 14px * var(--gk-radius-scale));--gk-radius-full: 999px;--gk-shadow-sm: 0 1px 2px oklch(20% .01 70 / calc(.05 * var(--gk-elevation-scale)));--gk-shadow-md: 0 1px 2px oklch(20% .01 70 / calc(.04 * var(--gk-elevation-scale))), 0 6px 16px -5px oklch(20% .01 70 / calc(.1 * var(--gk-elevation-scale)));--gk-shadow-lg: 0 2px 4px oklch(20% .01 70 / calc(.04 * var(--gk-elevation-scale))), 0 14px 32px -10px oklch(20% .01 70 / calc(.14 * var(--gk-elevation-scale)));--gk-shadow-brand: 0 6px 16px -6px oklch(55% var(--gk-brand-c) var(--gk-brand-h) / calc(.5 * var(--gk-elevation-scale)));--gk-border-fallback: color-mix(in oklab, var(--gk-border) calc(55% + 45% * var(--gk-elevation-scale)), var(--gk-border-strong));--gk-motion: .14s cubic-bezier(.2, .7, .3, 1);--gk-focus: 0 0 0 3px oklch(55% var(--gk-brand-c) var(--gk-brand-h) / .35)}:root[data-gk-preset=institutionnel]{--gk-radius-scale: 0;--gk-elevation-scale: 0;--gk-density: .82}@media(prefers-color-scheme:dark){:root{--gk-brand-500: oklch(70% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-600: oklch(64% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-50: oklch(26% calc(var(--gk-brand-c) * .3) var(--gk-brand-h));--gk-brand-100: oklch(31% calc(var(--gk-brand-c) * .42) var(--gk-brand-h));--gk-brand-200: oklch(40% calc(var(--gk-brand-c) * .55) var(--gk-brand-h));--gk-page: var(--gk-n-950);--gk-surface: var(--gk-n-900);--gk-surface-2: var(--gk-n-800);--gk-border: var(--gk-n-800);--gk-border-strong: var(--gk-n-700);--gk-text: var(--gk-n-100);--gk-text-2: var(--gk-n-400);--gk-text-3: var(--gk-n-500);--gk-on-brand: var(--gk-n-950);--gk-success-soft: oklch(26% .04 152);--gk-warning-soft: oklch(26% .05 75);--gk-danger-soft: oklch(26% .05 27)}}:root[data-theme=dark]{--gk-brand-500: oklch(70% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-600: oklch(64% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-50: oklch(26% calc(var(--gk-brand-c) * .3) var(--gk-brand-h));--gk-brand-100: oklch(31% calc(var(--gk-brand-c) * .42) var(--gk-brand-h));--gk-brand-200: oklch(40% calc(var(--gk-brand-c) * .55) var(--gk-brand-h));--gk-page: var(--gk-n-950);--gk-surface: var(--gk-n-900);--gk-surface-2: var(--gk-n-800);--gk-border: var(--gk-n-800);--gk-border-strong: var(--gk-n-700);--gk-text: var(--gk-n-100);--gk-text-2: var(--gk-n-400);--gk-text-3: var(--gk-n-500);--gk-on-brand: var(--gk-n-950);--gk-success-soft: oklch(26% .04 152);--gk-warning-soft: oklch(26% .05 75);--gk-danger-soft: oklch(26% .05 27)}:root[data-theme=light]{--gk-brand-500: oklch(55% var(--gk-brand-c) var(--gk-brand-h));--gk-brand-600: oklch(48% calc(var(--gk-brand-c) * .96) var(--gk-brand-h));--gk-brand-50: oklch(97% calc(var(--gk-brand-c) * .14) var(--gk-brand-h));--gk-brand-100: oklch(94% calc(var(--gk-brand-c) * .28) var(--gk-brand-h));--gk-brand-200: oklch(88% calc(var(--gk-brand-c) * .48) var(--gk-brand-h));--gk-page: var(--gk-n-50);--gk-surface: var(--gk-n-0);--gk-surface-2: var(--gk-n-100);--gk-border: var(--gk-n-200);--gk-border-strong: var(--gk-n-300);--gk-text: var(--gk-n-900);--gk-text-2: var(--gk-n-600);--gk-text-3: var(--gk-n-500);--gk-on-brand: var(--gk-n-0);--gk-success-soft: oklch(96% .03 152);--gk-warning-soft: oklch(96% .04 75);--gk-danger-soft: oklch(96% .03 27)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}:root{--gk-brand-h: 162}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--gk-page)}body{font-family:var(--gk-font-body);color:var(--gk-text);-webkit-font-smoothing:antialiased}input::placeholder{color:var(--gk-text-3)}:where(button,input,a):focus-visible{outline:none;border-color:var(--gk-brand-500);box-shadow:var(--gk-focus)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;background:var(--gk-page);color:var(--gk-text)}.header{width:min(100%,720px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px}.brand{display:flex;align-items:baseline;gap:10px}.wordmark{font-size:19px;font-weight:700;letter-spacing:-.01em}.wordmark span{color:var(--gk-brand-500)}.tagline{font-size:13px;color:var(--gk-text-3)}.header-actions{display:flex;align-items:center;gap:8px}.main{width:min(100%,560px);flex:1;display:flex;flex-direction:column;gap:16px;padding:16px 20px 48px;margin-top:16px}.switch{display:flex;gap:2px;padding:3px;background:var(--gk-surface);border:1px solid var(--gk-border-strong);border-radius:var(--gk-radius-full)}.switch button{appearance:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:620;padding:6px 14px;border:1px solid transparent;border-radius:var(--gk-radius-full);background:transparent;color:var(--gk-text-3);transition:color var(--gk-motion),background var(--gk-motion)}.switch button:hover{color:var(--gk-text-2)}.switch button[aria-pressed=true]{background:var(--gk-surface-2);border-color:var(--gk-border-strong);color:var(--gk-text)}.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:620;border-radius:var(--gk-radius-md);cursor:pointer;transition:background var(--gk-motion),color var(--gk-motion)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:default;transform:none}.btn-primary{font-size:15px;min-height:var(--gk-control-h);padding:8px 18px;border:1.5px solid transparent;background:var(--gk-brand-500);color:var(--gk-on-brand);box-shadow:var(--gk-shadow-brand)}.btn-primary:hover:not(:disabled){background:var(--gk-brand-600)}.btn-secondary{font-size:15px;min-height:var(--gk-control-h);padding:8px 18px;border:1.5px solid var(--gk-border-strong);background:var(--gk-surface);color:var(--gk-text);box-shadow:var(--gk-shadow-sm)}.btn-secondary:hover:not(:disabled){background:var(--gk-surface-2)}.btn-ghost{font-size:14px;min-height:40px;padding:6px 12px;border:1.5px solid transparent;background:transparent;color:var(--gk-text-2)}.btn-ghost:hover:not(:disabled){background:var(--gk-surface-2);color:var(--gk-text)}.btn-compact{font-size:14px;min-height:40px;padding:6px 16px}.btn-link{appearance:none;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--gk-text-3);padding:8px 12px;border-radius:var(--gk-radius-md);transition:background var(--gk-motion),color var(--gk-motion)}.btn-link:hover{background:var(--gk-surface-2);color:var(--gk-text-2)}.btn-back{align-self:flex-start;font-size:14px;color:var(--gk-text-2)}.btn-back:hover{background:var(--gk-surface-2);color:var(--gk-text)}.account{display:flex;align-items:center;gap:2px;padding:3px 4px 3px 12px;background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-full)}.account-email{font-size:13px;color:var(--gk-text-2);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account button{appearance:none;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:620;padding:5px 10px;border-radius:var(--gk-radius-full);color:var(--gk-text-3);transition:background var(--gk-motion),color var(--gk-motion)}.account button:hover{background:var(--gk-surface-2);color:var(--gk-text)}.chips{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.chip-group{display:flex;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--gk-radius-full);background:var(--gk-surface);border:1px solid var(--gk-border);font-size:13px;color:var(--gk-text-2)}.chip b{font-weight:700}.chip-new b{color:var(--gk-text)}.chip-learning b{color:#e4b572}.chip-known b{color:#6fc488}.streak{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--gk-radius-full);background:var(--gk-brand-50);border:1px solid var(--gk-brand-100);font-size:13px;font-weight:620;color:var(--gk-brand-300);animation:gk-pop .14s ease-out}.card{background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-xl);box-shadow:var(--gk-shadow-lg);padding:36px 28px 28px;display:flex;flex-direction:column;gap:20px;text-align:center}.card-centered{align-items:center;gap:14px;padding:36px 28px}.direction{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gk-text-3)}.word{font-size:44px;font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}.answer-row{display:flex;gap:8px}.input{flex:1;min-width:0;width:100%;min-height:var(--gk-control-h);padding:8px 14px;font-family:inherit;font-size:16px;color:var(--gk-text);background:var(--gk-surface-2);border:1.5px solid var(--gk-border-strong);border-radius:var(--gk-radius-md);outline:none;transition:border-color var(--gk-motion),box-shadow var(--gk-motion)}.input:focus{border-color:var(--gk-brand-500);box-shadow:var(--gk-focus)}.input:disabled{cursor:default}.input-correct{border-color:#4fb772;animation:gk-good .3s ease-out}.input-wrong{border-color:#e45d53;animation:gk-shake .36s ease-in-out}.feedback-correct{background:var(--gk-success-soft);border-radius:var(--gk-radius-lg);padding:12px 16px;font-size:15px;color:#79cd91;animation:gk-pop .14s ease-out}.feedback-correct b{font-weight:700}.feedback-wrong{background:var(--gk-danger-soft);border-radius:var(--gk-radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:4px;animation:gk-pop .14s ease-out}.feedback-wrong-label,.feedback-wrong-alts{font-size:13px;color:#f8a59b}.feedback-wrong-answer{font-size:21px;font-weight:700;color:var(--gk-text)}.hint{text-align:center;font-size:12px;color:var(--gk-text-3)}.stack{display:flex;flex-direction:column;gap:16px}.stack-tight{display:flex;flex-direction:column;gap:6px}.title{font-size:25px;font-weight:700;letter-spacing:-.01em}.subtitle{font-size:14px;color:var(--gk-text-2);line-height:1.55}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:620;color:var(--gk-text-2)}.field .input{font-size:15px;font-weight:400;background:var(--gk-surface)}.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:480px){.duo{grid-template-columns:1fr}}.mini-card{background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-lg);padding:20px;display:flex;flex-direction:column;gap:12px}.mini-card-title{font-size:15px;font-weight:620}.helper{font-size:13px;color:var(--gk-text-3);line-height:1.5}.field-label{font-size:13px;font-weight:620;color:var(--gk-text-2)}.segmented{display:flex;gap:6px}.segmented button{flex:1;appearance:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:620;min-height:36px;border-radius:var(--gk-radius-md);border:1.5px solid var(--gk-border-strong);background:var(--gk-surface-2);color:var(--gk-text-2);transition:background var(--gk-motion),border-color var(--gk-motion),color var(--gk-motion)}.segmented button[aria-pressed=true]{border-color:var(--gk-brand-500);background:var(--gk-brand-50);color:var(--gk-brand-300)}.room-code{font-family:var(--gk-font-mono);font-size:34px;font-weight:700;letter-spacing:.25em;color:var(--gk-brand-300);text-align:center;padding:6px 0 0 .25em}.code-input{font-family:var(--gk-font-mono);font-size:18px;font-weight:700;letter-spacing:.25em;text-transform:uppercase}.waiting{display:flex;align-items:center;gap:8px;color:var(--gk-text-2);font-size:13px}.waiting-centered{justify-content:center}.spinner{width:14px;height:14px;flex:none;border:2px solid var(--gk-brand-500);border-top-color:transparent;border-radius:var(--gk-radius-full);animation:gk-spin .72s linear infinite}.spinner-lg{width:16px;height:16px}.error{font-size:13px;color:#ef7f74}.error-shake{animation:gk-shake .36s ease-in-out}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-lg);padding:14px 16px}.score-side{display:flex;flex-direction:column;gap:6px;min-width:0}.score-side-right{text-align:right}.score-name{font-size:13px;font-weight:620;color:var(--gk-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-value{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.segments{display:flex;gap:3px}.segments i{flex:1;height:6px;border-radius:var(--gk-radius-full);background:var(--gk-n-800)}.segments i.on{background:var(--gk-brand-500)}.segments-opp i.on{background:var(--gk-brand-300)}.versus{font-size:13px;font-weight:620;color:var(--gk-text-3)}.result-card{background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-xl);box-shadow:var(--gk-shadow-lg);padding:40px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.result-line{font-size:30px;font-weight:700;letter-spacing:-.01em;animation:gk-pop .2s ease-out;text-wrap:balance}.result-score{font-size:36px;font-weight:700;color:var(--gk-brand-300);font-family:var(--gk-font-mono);font-variant-numeric:tabular-nums}.result-time{font-size:13px;color:var(--gk-text-2)}.result-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}.result-note{display:flex;align-items:center;font-size:13px;color:var(--gk-text-3)}.done-line{font-size:21px;font-weight:700}.auth-card{background:var(--gk-surface);border:1px solid var(--gk-border);border-radius:var(--gk-radius-xl);box-shadow:var(--gk-shadow-lg);padding:36px 28px;display:flex;flex-direction:column;gap:16px}.auth-title{font-size:23px;font-weight:700;letter-spacing:-.01em}.auth-step{display:flex;flex-direction:column;gap:10px;animation:gk-pop .14s ease-out}.auth-sent{font-size:13px;color:var(--gk-text-2)}.auth-sent b{font-weight:620;color:var(--gk-text)}.otp-input{font-family:var(--gk-font-mono);font-size:17px;font-weight:700;letter-spacing:.2em}@keyframes gk-spin{to{transform:rotate(360deg)}}@keyframes gk-pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@keyframes gk-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}35%{transform:translate(6px)}55%{transform:translate(-4px)}75%{transform:translate(3px)}}@keyframes gk-good{0%{transform:scale(1)}40%{transform:scale(1.02)}to{transform:scale(1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}