:root{--radius:10px;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--hira-kana-deboss-depth:3px}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--font-sans);background:var(--primaryColor);color:var(--textColor)}.app{flex-direction:column;min-height:100vh;display:flex}.body{flex-direction:column;flex:1;display:flex}.main{flex-direction:column;flex:1;align-items:center;padding:24px 16px;display:flex}.topbar{background:var(--secondaryColor);border-bottom:1px solid var(--borderColor);grid-template-columns:1fr minmax(200px,480px) 1fr;align-items:center;gap:16px;padding:14px 20px;display:grid}.topbar__side--left{min-width:0}.topbar__title{text-align:center;flex-direction:column;gap:2px;display:flex}.topbar__label{letter-spacing:.12em;text-transform:uppercase;color:var(--mutedTextColor);font-size:11px}.topbar__group{font-size:18px;font-weight:600}.topbar__group--muted{color:var(--mutedTextColor);font-weight:500}.topbar__side--right{justify-content:flex-end;align-items:center;gap:14px;display:flex}.theme-picker{align-items:center;gap:8px;display:flex}.theme-picker__swatch{border:2px solid var(--borderColor);cursor:pointer;box-sizing:border-box;border-radius:50%;flex-shrink:0;width:22px;height:22px;padding:0}.theme-picker__swatch:hover{filter:brightness(1.08)}.theme-picker__swatch--active{border-color:var(--accentColor);outline:2px solid var(--accentDimColor);outline-offset:1px}.topbar__link{color:var(--accentColor);cursor:pointer;font-size:14px;font-weight:500;text-decoration:none}.topbar__link:hover{color:var(--textColor);text-decoration:underline}.main--groups{justify-content:flex-start;padding-top:200px}.groups-page{width:100%;max-width:960px}.groups-page__title{margin:0 0 16px;font-size:22px;font-weight:600}.groups-grid{grid-template-columns:repeat(3,1fr);gap:0;width:100%;display:grid}.groups-grid__cell{--group-accent:var(--borderColor);box-sizing:border-box;border:1px solid color-mix(in srgb, var(--group-accent) 55%, var(--borderColor));background:color-mix(in srgb, var(--group-accent) 22%, var(--secondaryColor));height:200px;color:var(--textColor);font:inherit;text-align:center;cursor:pointer;border-radius:0;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;text-decoration:none;transition:background .15s,border-color .15s;display:flex}.groups-grid__cell:hover{background:color-mix(in srgb, var(--group-accent) 30%, var(--tertiaryColor));border-color:color-mix(in srgb, var(--group-accent) 70%, var(--borderColor))}.groups-grid__cell:focus-visible{outline:2px solid var(--group-accent);outline-offset:2px;border-color:var(--group-accent)}.groups-grid__name{font-size:16px;font-weight:600;line-height:1.3}.groups-grid__count{color:var(--mutedTextColor);font-size:14px}.groups-page__hint{color:var(--mutedTextColor);margin:20px 0 0;font-size:12px;line-height:1.45}.groups-page__hint code{color:var(--textColor);word-break:break-all;font-size:11px}.face-answer__values{flex-wrap:wrap;align-content:center;align-items:center;gap:6px;min-width:0;display:flex}.face-answer__tag{color:var(--textColor);background-color:var(--faceTagBg);border:1px solid var(--faceTagBorder);border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:2px 6px;font-size:17px;font-weight:500;line-height:1.35;display:inline-flex}.face-answer__tag-kana{line-height:1}.face-answer__tag-romaji{letter-spacing:.03em;color:var(--mutedTextColor);text-align:center;max-width:12em;font-size:11px;font-weight:500;line-height:1}.flashcard__face{cursor:pointer;flex-direction:column;flex:auto;align-self:stretch;width:100%;min-width:0;min-height:0;display:flex}.flashcard__face--front{justify-content:center;align-items:center;min-height:0;position:relative}.flashcard__face--back{min-height:0}.flashcard__face--back .flashcard__split{flex-direction:row;flex:auto;align-items:stretch;width:100%;min-width:0;min-height:0;display:flex}.flashcard__media-zone{outline:1px solid color-mix(in srgb, var(--borderColor) 72%, transparent);outline-offset:-1px;background-color:#5c1111;background-image:url(https://diplolearn.wordpress.com/wp-content/uploads/2018/05/holiday.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;flex:0 0 30%;align-self:stretch;width:30%;min-width:0}.flashcard__kanji-morph--front{pointer-events:none;color:var(--textColor);font-size:min(116px, calc(var(--flashcard-face-h) * .68));font-weight:500;line-height:1.05}.flashcard__peek-hint{left:12px;right:12px;bottom:max(10px, env(safe-area-inset-bottom,0px));z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;letter-spacing:.06em;color:var(--mutedTextColor);opacity:.88;font-size:12px;font-weight:500;position:absolute}.flashcard__content-zone--back{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1 1 0;gap:10px;min-width:0;min-height:0;padding:16px 24px 18px;display:flex;overflow:hidden auto}.flashcard__reveal-hero-row{flex-direction:row;align-items:center;column-gap:18px;width:100%;min-width:0;display:flex}.flashcard__reveal-kanji{letter-spacing:-.02em;text-align:left;color:var(--textColor);flex:none;font-size:clamp(40px,8vw,56px);font-weight:600;line-height:1.05}.flashcard__reveal-hero-row .flashcard__reveal-english{flex:1 1 0;width:auto;min-width:0}.flashcard__reveal-kana-block{flex-direction:column;gap:6px;width:100%;min-width:0;display:flex}.flashcard__reveal-label{letter-spacing:.16em;text-transform:uppercase;color:var(--mutedTextColor);font-size:10px;font-weight:700;line-height:1.4;display:block}.flashcard__reveal-english{flex-direction:column;min-width:0;display:flex}.flashcard__reveal-english-text{color:var(--textColor);margin:0;font-size:15px;font-weight:400;line-height:1.55}.hira-keyboard{border-radius:var(--radius);border:1px solid var(--borderColor);background:var(--keyboardWellBg);-webkit-user-select:none;user-select:none;flex-direction:column;gap:6px;padding:20px 9px 14px;display:flex}.hira-keyboard__grid{justify-content:center;column-gap:0;display:grid}.hira-key{--hira-key-deboss:var(--hira-kana-deboss-depth);border:1px solid var(--kanaButtonDeboss);background:var(--kanaButtonBg);color:var(--kanaButtonText);font:inherit;cursor:pointer;box-shadow:0 var(--hira-key-deboss) 0 var(--kanaButtonDeboss), inset 0 1px 0 var(--kanaButtonInset);border-radius:6px;padding:0;font-size:18px;line-height:1}.hira-key--dakuten{filter:grayscale()}.hira-key:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.hira-keyboard__script-toggle{border:1px solid color-mix(in srgb, var(--borderColor) 75%, transparent);background:color-mix(in srgb, var(--secondaryColor) 35%, transparent);border-radius:10px;align-self:center;margin-top:12px;padding:4px 5px}.hira-keyboard__script-track{flex-direction:row;justify-content:center;align-items:stretch;gap:4px;display:flex}.hira-keyboard__script-option{font:inherit;letter-spacing:.05em;text-transform:lowercase;cursor:pointer;color:var(--mutedTextColor);box-shadow:none;background:0 0;border:none;border-radius:6px;outline:none;margin:0;padding:5px 12px;font-size:11px;font-weight:600;line-height:1.2;transition:color .12s,box-shadow .12s,background .12s}.hira-keyboard__script-option[aria-checked=true]{color:var(--textColor);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--borderColor) 78%, transparent);background:color-mix(in srgb, var(--tertiaryColor) 40%, transparent)}.hira-keyboard__script-option[aria-checked=false]{box-shadow:none;outline:none}.hira-keyboard__script-option:disabled{opacity:.45;cursor:not-allowed}@keyframes kana-shell-shake{0%,to{transform:translate(0)}18%{transform:translate(-7px)}36%{transform:translate(7px)}54%{transform:translate(-4px)}72%{transform:translate(4px)}}.kana-input-shell__kana--wrong .kana-input-shell__chips{animation:.48s kana-shell-shake}.kana-input-shell__kana--wrong .kana-input-shell__chip{background:var(--kanaWrongBg);border-color:var(--kanaWrongBorderDeboss);color:var(--textColor);box-shadow:0 var(--kana-input-shell-chip-deboss) 0 var(--kanaWrongBorderDeboss), inset 0 1px 0 var(--kanaWrongInset)}.kana-input-shell__kana--correct .kana-input-shell__chip{background:var(--kanaOkBg);border-color:var(--kanaOkBorderDeboss);color:var(--kanaOkText);box-shadow:0 var(--kana-input-shell-chip-deboss) 0 var(--kanaOkBorderDeboss), inset 0 1px 0 var(--kanaOkInset)}.kana-input-shell__kana--correct .kana-input-shell__chip:disabled{opacity:.92;box-shadow:0 var(--kana-input-shell-chip-deboss) 0 var(--kanaOkBorderDeboss), inset 0 1px 0 var(--kanaOkInset)}@media (prefers-reduced-motion:reduce){.kana-input-shell__kana--wrong .kana-input-shell__chips{animation:none}}.kana-input-shell{z-index:1;box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;position:relative}.kana-input-shell__kana{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-width:0;min-height:48px;padding:2px 4px;display:flex}.kana-input-shell__placeholder{pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;letter-spacing:.02em;color:var(--mutedTextColor);opacity:.88;font-size:14px;font-weight:500}.kana-input-shell__chips{flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;width:100%;max-width:100%;margin:0;padding:0;list-style:none;display:flex}.kana-input-shell__chip{--kana-input-shell-chip-deboss:var(--hira-kana-deboss-depth);border:1px solid var(--kanaButtonDeboss);background:var(--kanaButtonBg);min-width:44px;min-height:44px;color:var(--kanaButtonText);font:inherit;cursor:pointer;box-shadow:0 var(--kana-input-shell-chip-deboss) 0 var(--kanaButtonDeboss), inset 0 1px 0 var(--kanaButtonInset);border-radius:8px;justify-content:center;align-items:center;margin:0;padding:4px 7px;line-height:1;display:inline-flex}.kana-input-shell__chip:disabled{opacity:.5;cursor:not-allowed;transform:none}.kana-input-shell__chip-glyph{font-size:23px}.kj-button{min-width:76px;height:40px;font-weight:600;font:inherit;cursor:pointer;box-sizing:border-box;border-style:solid;border-width:1px;border-radius:10px;padding:8px 22px}.kj-button--primary{border-color:var(--buttonPrimaryBorder);background-color:var(--buttonPrimaryBg);color:var(--buttonPrimaryText);box-shadow:0 4px 0 var(--buttonPrimaryDeboss), inset 0 1px 0 var(--buttonPrimaryInset)}.kj-button--primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.kj-button--secondary{border-color:var(--buttonSecondaryBorder);background-color:var(--buttonSecondaryBg);color:var(--textColor);box-shadow:0 4px 0 var(--buttonSecondaryDeboss)}.kj-button--secondary:disabled{background-color:var(--buttonSecondaryDisabledBg);border-color:var(--buttonSecondaryBorder);opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.study-layout{--flashcard-face-h:clamp(216px, 32vh, 320px);--flashcard-side-nav-w:120px;--flashcard-side-nav-gap:10px;flex-direction:column;align-items:stretch;gap:9px;width:min(560px,100%);display:flex;position:relative;overflow:visible}.flashcard__meta{color:var(--mutedTextColor);justify-content:space-between;gap:16px;font-size:14px;display:flex}.flashcard__char-stage,.flashcard__answer-stage{justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:visible}.flashcard__answer-nav{z-index:2;position:absolute;top:50%}.flashcard__answer-nav.kj-button{width:var(--flashcard-side-nav-w);min-width:var(--flashcard-side-nav-w);max-width:var(--flashcard-side-nav-w);padding-left:0;padding-right:0;justify-content:center;align-items:center;padding-inline:0;display:inline-flex}.flashcard__answer-nav--skip{transform:translate(calc(-100% - var(--flashcard-side-nav-gap)), -50%);left:0}.flashcard__answer-nav--check{transform:translate(calc(100% + var(--flashcard-side-nav-gap)), -50%);right:0}.flashcard__nav-labelstack{flex-direction:column;justify-content:center;align-items:center;gap:5px;line-height:1;display:flex}.flashcard__nav-icon{font-size:1em;display:block}.flashcard__nav-caption{letter-spacing:.04em;text-transform:lowercase;font-size:12px;font-weight:600;line-height:1}.flashcard__nav{z-index:2;box-sizing:border-box;width:var(--flashcard-side-nav-w);min-width:var(--flashcard-side-nav-w);height:var(--flashcard-face-h);min-height:var(--flashcard-face-h);color:var(--mutedTextColor);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:0;font-size:22px;line-height:1;transition:background .15s,color .15s;display:inline-flex;position:absolute;top:50%}.flashcard__nav--prev{transform:translate(calc(-100% - var(--flashcard-side-nav-gap)), -50%);left:0}.flashcard__nav-next-stack{z-index:2;gap:var(--flashcard-side-nav-gap);width:var(--flashcard-side-nav-w);height:var(--flashcard-face-h);transform:translate(calc(100% + var(--flashcard-side-nav-gap)), -50%);flex-direction:column;display:flex;position:absolute;top:50%;right:0}.flashcard__nav-next-stack .flashcard__nav--next-seg{border-radius:10px;flex:1 1 0;height:auto;min-height:0;position:relative;top:auto;left:auto;right:auto;transform:none}.flashcard__nav:hover,.flashcard__nav-next-stack .flashcard__nav--next-seg:hover{background:color-mix(in srgb, var(--textColor) 10%, transparent);color:var(--textColor)}.flashcard__char{z-index:1;box-sizing:border-box;border:1px solid color-mix(in srgb, var(--borderColor) 75%, transparent);background:var(--secondaryColor);color:inherit;font:inherit;cursor:pointer;width:100%;height:var(--flashcard-face-h);min-height:var(--flashcard-face-h);max-height:var(--flashcard-face-h);border-radius:14px;justify-content:center;align-items:center;margin:0;padding:8px 12px;font-size:16px;font-weight:400;line-height:1.35;transition:background .15s,border-color .15s;display:flex;position:relative}.flashcard__char:not(.flashcard__char--reveal):hover{background:var(--tertiaryColor);border-color:color-mix(in srgb, var(--accentDimColor) 45%, var(--borderColor))}.flashcard__char:focus-visible{outline:none}.flashcard__char:not(.flashcard__char--reveal):focus-visible,.flashcard__char--reveal:focus-visible{outline:2px solid var(--accentDimColor);outline-offset:2px}.flashcard__char--reveal{text-align:left;border:1px solid color-mix(in srgb, var(--borderColor) 72%, transparent);background:color-mix(in srgb, var(--secondaryColor) 62%, transparent);border-radius:16px;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0;font-size:16px;font-weight:400;line-height:1.35;overflow:hidden}.flashcard__char--reveal:hover{background:color-mix(in srgb, var(--secondaryColor) 72%, transparent);border-color:color-mix(in srgb, var(--accentDimColor) 28%, var(--borderColor))}.flashcard__input-block{flex-direction:column;align-items:stretch;gap:10px;display:flex}@media (prefers-reduced-motion:reduce){.flashcard__char,.flashcard__nav{transition:none}}.flashcard__controls{flex-direction:column;gap:7px;display:flex}.not-found__link{color:var(--accentColor);border-bottom:1px solid var(--accentDimColor);cursor:pointer;font-weight:500;text-decoration:none}.not-found__link:hover{color:var(--textColor);border-bottom-color:var(--accentColor)}