*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

body {
    background:  #fafafa;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
    min-height:  100vh;
    border-top:  2px solid #6b1a1a;
}

/* ── ページ遷移 ── */
.page {
    transition: opacity 0.35s ease;
}

/* ── ホーム画面 ── */
.home-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         48px;
    text-align:      center;
}

.home-subtitle {
    font-size:      11px;
    letter-spacing: 0.5em;
    color:          #8b3030;
    margin-bottom:  28px;
    font-weight:    300;
}

.home-logo {
    font-size:      30px;
    font-weight:    300;
    letter-spacing: 0.35em;
    color:          #444;
    margin-bottom:  10px;
}

.home-desc {
    font-size:      11px;
    letter-spacing: 0.3em;
    color:          #999;
    margin-bottom:  72px;
}

/* ── 言語カードグリッド ── */
.lang-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
    max-width:             520px;
    width:                 100%;
}

.lang-card {
    background:     none;
    border:         1px solid #e0e0e0;
    color:          #888;
    padding:        30px 16px;
    border-radius:  1px;
    cursor:         pointer;
    font:           inherit;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    transition:     border-color 0.2s, color 0.2s, background 0.2s;
}

.lang-card:hover {
    border-color: #bbb;
    background:   #f2f2f2;
    color:        #333;
}

.lang-en {
    font-size:      13px;
    letter-spacing: 0.08em;
}

.lang-ja {
    font-size:      20px;
    letter-spacing: 0.2em;
    color:          #ccc;
    transition:     color 0.2s;
}

.lang-card:hover .lang-ja {
    color: #8b3030;
}

/* ── ヘッダー（タイピング画面） ── */
.header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 48px;
    border-bottom:   1px solid #ebebeb;
}

.back-btn {
    background:     none;
    border:         none;
    color:          #ccc;
    font:           inherit;
    font-size:      12px;
    letter-spacing: 0.08em;
    cursor:         pointer;
    padding:        4px 0;
    transition:     color 0.15s;
    min-width:      80px;
}

.back-btn:hover { color: #666; }

.logo {
    font-size:      13px;
    font-weight:    300;
    letter-spacing: 0.35em;
    color:          #ccc;
}

.current-lang {
    font-size:      12px;
    letter-spacing: 0.1em;
    color:          #ccc;
    text-align:     right;
    min-width:      80px;
}

.current-lang .lang-kanji {
    display:        block;
    font-size:      13px;
    color:          #6b1a1a;
    letter-spacing: 0.25em;
    margin-top:     3px;
}

/* ── メインエリア（タイピング画面） ── */
.main {
    max-width: 840px;
    margin:    0 auto;
    padding:   64px 48px 80px;
}

/* ── コード表示エリア ── */
.code-wrap {
    outline:    none;
    cursor:     text;
    position:   relative;
    max-height: 70vh;
    overflow-y: auto;
}

.code-wrap::-webkit-scrollbar       { width: 3px; }
.code-wrap::-webkit-scrollbar-track { background: transparent; }
.code-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.code-wrap:not(.focused) .code-text { opacity: 0.4; }

.hint {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    letter-spacing:  0.2em;
    color:           #bbb;
    pointer-events:  none;
    transition:      opacity 0.3s;
}

.code-wrap.focused .hint { opacity: 0; }

.code-text {
    font-size:   14px;
    line-height: 1.9;
    white-space: pre;
    transition:  opacity 0.3s;
}

/* ── 文字の状態 ── */

/* 未入力：薄いグレー */
.c.wait { color: #cccccc; }

/* 入力済み：濃い黒 */
.c.done { color: #1a1a1a; }

/* ミスタイプ */
.c.bad  { color: #c0392b; background: rgba(192, 57, 43, 0.08); border-radius: 2px; }

/* カーソル位置 */
.c.cur:not(.nl) {
    color:         #999;
    border-bottom: 1px solid #aaa;
}

/* 改行記号（↵）の表示 */
.c.nl::before       { content: '↵'; font-size: 0.65em; opacity: 0.2; }
.c.nl.done::before  { opacity: 0.4; color: #999; }
.c.nl.cur::before   { opacity: 0.7; color: #aaa; }
.c.nl.bad::before   { opacity: 0.8; color: #c0392b; }

/* ── シンタックスハイライト ── */

/* 入力待ち：ほのかな色味のみ */
.c.wait.tok-keyword   { color: #ccd8f0; }
.c.wait.tok-string    { color: #f0d0cc; }
.c.wait.tok-comment   { color: #cce8cc; }
.c.wait.tok-number    { color: #cce8e0; }
.c.wait.tok-decorator { color: #ead0f0; }

/* 入力済み：VS Code Light スタイル */
.c.done.tok-keyword   { color: #0070c1; }
.c.done.tok-string    { color: #a31515; }
.c.done.tok-comment   { color: #357a35; }
.c.done.tok-number    { color: #098658; }
.c.done.tok-decorator { color: #af00db; }

/* カーソル位置：トークン色の中間調 */
.c.cur.tok-keyword:not(.nl)   { color: #7ab0e0; border-bottom-color: #7ab0e0; }
.c.cur.tok-string:not(.nl)    { color: #d08080; border-bottom-color: #d08080; }
.c.cur.tok-comment:not(.nl)   { color: #70aa70; border-bottom-color: #70aa70; }
.c.cur.tok-number:not(.nl)    { color: #60aa90; border-bottom-color: #60aa90; }
.c.cur.tok-decorator:not(.nl) { color: #c070d0; border-bottom-color: #c070d0; }

/* ── 進捗バー ── */
.footer {
    margin-top:  52px;
    display:     flex;
    align-items: center;
    gap:         20px;
}

.track { flex: 1; height: 1px; background: #e8e8e8; }

.fill {
    height:     100%;
    background: #bbb;
    width:      0%;
    transition: width 0.3s ease;
}

.counter {
    font-size:      11px;
    letter-spacing: 0.08em;
    color:          #ccc;
    min-width:      80px;
    text-align:     right;
}

/* ── 完了メッセージ ── */
.done-msg {
    margin-top:     40px;
    font-size:      13px;
    letter-spacing: 0.25em;
    color:          #5a8a5a;
    display:        none;
}

.done-msg.show { display: block; }

/* ── アクションボタン ── */
.actions {
    display:    flex;
    gap:        12px;
    margin-top: 16px;
}

.action-btn {
    display:        none;
    background:     none;
    border:         1px solid #e0e0e0;
    color:          #aaa;
    padding:        7px 18px;
    border-radius:  1px;
    cursor:         pointer;
    font:           inherit;
    font-size:      12px;
    letter-spacing: 0.12em;
    transition:     color 0.15s, border-color 0.15s;
}

.action-btn.show  { display: inline-block; }
.action-btn:hover { color: #333; border-color: #999; }

/* ── レスポンシブ ── */
@media (max-width: 600px) {
    .header       { padding: 16px 20px; }
    .main         { padding: 32px 20px 60px; }
    .code-text    { font-size: 13px; }
    .home-inner   { padding: 32px 20px; }
    .lang-grid    { grid-template-columns: repeat(2, 1fr); }
    .home-logo    { font-size: 22px; }
}