/* Hypercube: PDF-canonical nine-array layout. */
#grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    width:min(100%,420px);
    max-width:calc(100vw - 24px);
    margin:0 auto;
}
.hypercubeArray{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    aspect-ratio:1;
    border:3px solid #b00000;
    box-sizing:border-box;
}
.hypercubeArray .cell{
    min-width:0;
    min-height:0;
    box-sizing:border-box;
    border:1px solid var(--border,#888);
}
.hypercubeArray .cell.black{
    background:#000!important;
}
@media (max-width:480px){
    #grid{gap:8px;max-width:calc(100vw - 16px)}
    .hypercubeArray{border-width:2px}
}

.constructionNotice{border:0;border-radius:12px;padding:0;max-width:min(92vw,520px);width:calc(100% - 2rem);background:transparent;color:inherit;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.constructionNotice::backdrop{background:rgba(0,0,0,.68)}
.constructionNoticeBox{padding:1.5rem;background:var(--surface,#fff);color:var(--text,#111);border:2px solid currentColor;border-radius:12px;text-align:center}
.constructionNoticeBox h2{margin:0 0 1rem;font-size:1.35rem}
.constructionNoticeBox p{margin:0 0 1.25rem;line-height:1.5}
.constructionNoticeBox button{padding:.65rem 1rem;font:inherit;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;cursor:pointer}


/* Hypercube input and active-chain feedback. */
#grid{touch-action:none;user-select:none;-webkit-user-select:none}
#grid .cell{touch-action:none}
#grid .cell.activeChainPulse{animation:hypercube-active-cell-pulse 2.4s ease-in-out infinite;position:relative;z-index:1}
@keyframes hypercube-active-cell-pulse{
    0%,100%{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
    50%{box-shadow:inset 0 0 0 5px rgba(255,255,255,.95)}
}
@media (prefers-reduced-motion:reduce){#grid .cell.activeChainPulse{animation:none}}