body {
    background:#0a0a0a;
    color:#e0ffe8;
    font-family:"Courier New", monospace;
    padding:20px;
}

.terminal {
    max-width:1200px;
    margin:auto;
    border:2px solid #00ff41;
    padding:20px;
    background:#111;
}

h1 {
    text-align:center;
    letter-spacing:3px;
    border-bottom:1px solid #00ff41;
    padding-bottom:8px;
}

h2 {
    font-size:0.85rem;
    margin:16px 0 6px;
}

#octo-display {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:20px;
	min-height:180px;
}

.glyph-container {
    text-align:center;
    font-size:2rem;
}

.label {
    opacity:0.85;
}

svg {
    display:block;
    margin:auto;
}

.line {
    stroke:#00ff41;
    stroke-width:3;
    stroke-linecap:round;
}

.center { fill:#00ff41; }

/* Clavier */
.keyboard-section { margin-bottom:14px; }

.keyboard {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.key {
    width:60px;
    padding:4px 2px;
    border:1px solid #00ff41;
    text-align:center;
    cursor:pointer;
    font-size:1.4rem;
    background:#000;
}

.key:hover { filter:brightness(1.2); }

.key svg {
    width:24px;
    height:24px;
    margin-bottom:2px;
}

/* Catégories */
.cat-M { background:#003300; }
.cat-N { background:#001f3f; }
.cat-S { background:#332200; }
.cat-E { background:#2a0033; }
.cat-L { background:#002200; }
.cat-C { background:#222; }
.cat-A { background:#111; }

.key.delete {
    width:10%;
    background:#330000;
    border-color:#ff5555;
    color:#ffaaaa;
}