* { box-sizing: border-box; }

body 
{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0f172a;
    color: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1.5rem;
}

h1 
{ 
    margin: 0 0 0.5rem 0; 
    color: #38bdf8; 
    font-size: 5rem;
}

h2 
{ 
    margin: 0 0 1rem 0; 
    color: #38bdf8; 
    font-size: 1.5rem;
}

.span 
{ 
    height: 1rem; 
    width: 100%; 
    margin-bottom: 1rem; 
}

.controls 
{
    display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;
    background: #1e293b; padding: 0.75rem 1.25rem; border-radius: 8px; border: 1px solid #334155;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* SEO / AEO Informational Text Block */
.seo-info-container {
  max-width: 900px;
  margin: 3rem auto 2rem auto;
  padding: 0 1.5rem;
  text-align: left;
  line-height: 1.6;
}

.seo-info-container h2 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.seo-info-container p {
  margin-bottom: 1rem;
}

.seo-info-container ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.seo-info-container li {
  margin-bottom: 0.4rem;
}

select, button 
{
    background: #020202; 
    color: #38bdf8; 
    border: 1px solid #38bdf8;
    padding: 0.5rem 1rem; 
    border-radius: 6px; 
    font-weight: 600; 
    cursor: pointer;
}

button:hover, select:hover 
{ 
    background: #38bdf8; 
    color: #0f172a; 
}

.status-bar, .instructions
{ 
    font-family: monospace; 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    color: #94a3b8; 
    height: 1.5rem; 
}

.keyboard-container {
    background: #1e293b; 
    padding: 1.25rem; 
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); 
    display: flex; 
    gap: 0.4rem;
}

.cluster 
{ 
    display: flex; 
    flex-direction: column; 
    gap: 0.4rem; 
}

.row 
{ 
    display: flex; 
    gap: 0.4rem; 
}

.f-row { margin-bottom: 0.5rem; }

.f-gap { width: 0.75rem; }

.key {
    background: #334155; 
    color: #e2e8f0; 
    border: 1px solid #475569; 
    border-radius: 6px;
    height: 44px; 
    min-width: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 0.8rem; 
    font-weight: 600; 
    user-select: none;
}

.fn-disabled 
{ 
    background: #94a3b8; 
    opacity: 0.4; 
    pointer-events: none; 
}

.key.active 
{ 
    background: #0284c7 !important; 
    color: #fff; 
    transform: translateY(2px); 
}

.key.tested 
{ 
    background: #10b981; 
    border-color: #059669; 
    color: #022c22; 
}

/* Key Width Utilities */
.w-1 
{ 
    min-width: 44px; 
    width: 44px; 
}
.w-1-25 { width: 55px; } 
.w-1-5 { width: 66px; } 
.w-1-75 { width: 83px;}
.w-2 { width: 88px; } 
.w-2-25 { width: 99px; }
.w-2-75 { width: 133px; } 
.w-space { flex: 1; }

/* Grid for Numpad */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    grid-template-rows: repeat(5, 44px);
    gap: 0.4rem;
}
.numpad-grid .h-2 
{ 
    grid-row: span 2; 
    height: 100%; 
}
.numpad-grid .w-2-grid 
{ 
    grid-column: span 2; 
    width: 100%; 
}

/* LAYOUT SPECIFIC VISIBILITY & MODIFIERS */
.layout-60 .f-row, .layout-60 .nav-cluster, .layout-60 .numpad-cluster, .layout-60 .col-75, .layout-60 .row-75,
.layout-65 .f-row, .layout-65 .nav-cluster, .layout-65 .numpad-cluster, .layout-65 .standard-bottom-row, .layout-65 .standard-right-shift,
.layout-75 .numpad-cluster, .layout-75 .nav-cluster, .layout-75 .standard-right-shift, .layout-75 .standard-bottom-row,
.layout-80 .numpad-cluster, .layout-80 .col-75, .layout-80 .row-75,
.layout-100 .col-75, .layout-100 .row-75 
{ 
    display: none !important; 
}
.layout-65 .col-75,
.layout-75 .col-75, .layout-75 .row-75
{ 
    display: flex !important; 
}
.layout-65 .main-cluster > .row-75:last-child,
.layout-75 .main-cluster > .row-75:last-child 
{
    transform: none;
    width: calc(100% + 50px);
}
.layout-65 .lay75
{
    display: none !important;
}