@font-face{font-family:"Default";src:url(/fonts/NotoSansJP.ttf)}html.dark{--background-light: #3c3836;--background: #32302f;--background-dark: #1d2021;--foreground-weak: #504945;--foreground: #665c54;--foreground-strong: #7c6f64}html{--background-light: #f9f5d7;--background: #f2e5bc;--background-dark: #ebdbb2;--foreground-weak: #d5c4a1;--foreground: #bdae93;--foreground-strong: #a89984;--red: #ef2f27;--green: #519f50;--yellow: #fbb829;--blue: #2c78bf;--magenta: #b16286;--cyan: #689d6a;--bright-red: #f75341;--bright-green: #98bc37;--bright-yellow: #fed06e;--bright-blue: #68a8e4;--bright-magenta: #d3869b;--bright-cyan: #8ec07c;--spacing-xs: 2.5px;--spacing-s: 5px;--spacing-m: 10px;--spacing-l: 20px;--spacing-xl: 40px;--border-radius: 10px;--border-thickness: 1px;--border-color: var(--foreground-weak);--border: var(--border-thickness) solid var(--border-color);--transition: .3s ease-in-out}*{margin:0;padding:0;box-sizing:border-box;font-family:"Default";font-size:16px;color:var(--foreground);transition:var(--transition)}body{background-color:var(--background)}#root{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100vw;min-height:100vh}#root>header{display:flex;justify-content:space-between;gap:var(--spacing-l);padding:var(--spacing-l);border-bottom:var(--border);width:100%;background-color:var(--background-light)}#root>header nav{display:flex;gap:inherit}#root>header nav .options .DarkModeToggle:hover svg{color:var(--foreground-strong)}#root>header .DarkModeToggle{cursor:pointer}#root>header .DarkModeToggle:hover svg{color:var(--foreground-strong)}#root>main{display:flex;flex-direction:column;align-items:center;width:100%;padding:var(--spacing-xl)}#root>main>div{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-l);width:100%}a,button{display:flex;justify-content:center;align-items:center;gap:var(--spacing-m)}a{text-decoration:none;color:var(--blue)}a:hover{color:var(--bright-blue)}button{padding:var(--spacing-m);border:var(--border);border-radius:var(--border-radius);background-color:var(--background-light);cursor:pointer}button:not(:disabled):hover{background-color:var(--background-dark)}button:not(:disabled):active{scale:.95}button:disabled{opacity:.5;cursor:not-allowed}h1,h2,h3,h4,h5,h6{font-weight:700;text-align:center;color:var(--foreground-strong)}h1{font-size:3rem}h2{font-size:2.67rem}h3{font-size:2.33rem}h4{font-size:2rem}h5{font-size:1.67rem}h6{font-size:1.33rem}svg{width:1em;height:1em;color:inherit}svg path{color:inherit}.Nihongo .circle{width:1rem;height:1rem;border-radius:50%;background-color:var(--color)}.Nihongo .colorCodes{display:flex;gap:inherit}.Nihongo .colorCodes>div{display:flex;align-items:center;gap:var(--spacing-s)}.Nihongo .japanese,.Nihongo .furigana,.Nihongo .translation,.Nihongo .notes{color:var(--color)}.Nihongo .japanese{--color: var(--blue)}.Nihongo .furigana{--color: var(--magenta)}.Nihongo .translation{--color: var(--green)}.Nihongo .notes{--color: var(--yellow)}.Nihongo .phrases{display:flex;flex-direction:column;gap:inherit;width:100%}.Nihongo .phrases .phrase{overflow:hidden;border:var(--border);border-radius:var(--border-radius);background-color:var(--background-light)}.Nihongo .phrases .phrase .content{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-xl)}.Nihongo .phrases .phrase .content a{position:absolute;top:var(--spacing-l);left:var(--spacing-l);border:var(--border);border-radius:var(--border-radius);padding:var(--spacing-m);background-color:var(--background-light)}.Nihongo .phrases .phrase .content a.anchored{color:var(--foreground)}.Nihongo .phrases .phrase .japanese span{position:relative;font-size:2em;color:inherit}.Nihongo .phrases .phrase .japanese span .furigana{position:absolute;top:calc(var(--spacing-l) * -1);left:50%;translate:-50% 0;font-size:1rem;white-space:nowrap}.Nihongo .phrases .phrase .translation{font-size:1.5rem}.Nihongo .phrases .phrase .notes{font-size:1.25rem}.Nihongo .phrases .phrase .toggle{display:flex;justify-content:center;width:100%;padding:var(--spacing-m);border-top:var(--border);cursor:pointer}.Nihongo .phrases .phrase.toggled .toggle svg{transform:rotate(180deg)}.Nihongo .phrases .phrase:not(.toggled) .furigana,.Nihongo .phrases .phrase:not(.toggled) .translation,.Nihongo .phrases .phrase:not(.toggled) .notes{display:none}