:root{

--bg:#0f1117;
--text:#d8dee9;
--accent:#88c0d0;

/* menu */
--menu-bg:#141922;
--menu-border:#1f2633;
--menu-input-bg:#141922;

--menu-item:#cfd6e6;
--menu-hover-bg:#1b2230;
--menu-hover-text:#ffffff;

--menu-active-bg:#263041;
--menu-active-text:#ffffff;

--menu-placeholder:#6f7a92;

/* rest */
--char-idle:#4c566a;
--correct:#50fa7b;
--wrong:#ff6b6b;

--current-bg:#88c0d0;
--current-text:#2e3440;

--footer:#434c5e;

--kbd-bg:#2e3440;

--kana-active:#9cd6cf;
}


body{
padding-bottom:env(safe-area-inset-bottom);
}


body{
background:var(--bg);
color:var(--text);
font-family:monospace;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
margin:0;
}

.container{
width:900px;
text-align:center;
}



#preview{
height:50px;
margin-bottom:25px;
font-size:32px;
color:var(--accent);
}



#wrap{
width:900px;
overflow:hidden;
margin-bottom:40px;
}



#words{
display:flex;
gap:32px;
white-space:nowrap;

transition: transform .35s cubic-bezier(.22,.61,.36,1);

font-family:"Kosugi Maru", sans-serif;

will-change: transform;
}



.char{
display:flex;
flex-direction:column;
align-items:center;
font-size:64px;
color:var(--char-idle);
}



.kana{
line-height:70px;
}



.romaji{
font-size:24px;
height:28px;
opacity:0;
}



.char.show .romaji{
opacity:1;
}



.char.correct .kana{
color:var(--correct);
}



.char.wrong .kana{
color:var(--wrong);
}



.char.current .kana{
background:var(--current-bg);
color:var(--current-text);
border-radius:6px;
padding:4px 8px;
}



#input{
opacity:0;
position:absolute;
}



.footer{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
color:var(--footer);
font-size:14px;
}



kbd{
background:var(--kbd-bg);
padding:3px 6px;
border-radius:4px;
font-size:12px;
}



.kana-group.active{
color:var(--kana-active);
font-weight:600;
}

.char.current{

transform:scale(1.05);

transition:transform .18s ease;

}

.char.correct{
color:var(--correct);
opacity:.9;
}

.char.wrong{
color:var(--wrong);
opacity:.9;
}