body{margin:0;padding:0;font-family:Arial,sans-serif}header{color:#fff;text-align:center;background:#bfa88f;padding:1em}.header-sub{opacity:.9;margin-top:4px;font-size:.5em;font-weight:400;display:block}.controls{flex-wrap:wrap;justify-content:center;gap:1em;margin:1em 0;display:flex}.controls-items{box-sizing:border-box;background:#f5f5f5;border-radius:8px;max-width:calc(100% - 2rem);margin:0 auto;padding:1em;position:relative}.controls-label{align-items:center;font-weight:700;display:flex}.guide-link{color:#333;white-space:nowrap;padding:.5em 1em;font-size:.9rem;font-weight:700;text-decoration:none;position:absolute;top:50%;right:1em;transform:translateY(-50%)}.guide-link:hover{text-decoration:underline}label{flex-direction:column;align-items:center;display:flex}input{text-align:center;border:1px solid #ccc;border-radius:4px;margin-top:.5em;padding:.5em}select{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;margin-top:.5em;padding:.5em}.input-with-unit{gap:4px;margin-top:.5em;display:flex}.input-with-unit input{width:70px;margin-top:0}.input-with-unit select{width:60px;margin-top:0}.grid-container{gap:var(--gap,8px);box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;padding:1em;display:grid}.grid-cell{cursor:pointer;background-color:#e0e0e0;border:1px solid #ccc;justify-content:center;align-items:center;font-size:1rem;display:flex;position:relative}.grid-cell:before{content:"+";color:#ccc;font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.grid-cell.selected{background:#007bff80;border-color:#007bff}.grid-item{color:#fff;cursor:pointer;background:#be3455;border-radius:4px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:opacity .2s;display:flex}.grid-item:hover{opacity:.8}.output-container{flex-wrap:wrap;justify-content:space-between;gap:1em;width:100%;max-width:1000px;margin:2em auto;display:flex}.output-html,.output{white-space:pre-wrap;box-sizing:border-box;background:#f4f4f4;border:1px solid #ccc;border-radius:8px;flex:calc(50% - 1em);padding:1em;font-family:monospace}footer.footer{background-color:#bfa88f;place-content:center;height:100px;display:grid}.footer a{color:#007bff;margin:4px;font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}.copy-button{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:4px;margin-bottom:10px;padding:8px 12px;font-size:14px;transition:background-color .2s}.copy-button:hover{background-color:#0056b3}.Toastify__toast-container{left:50%;transform:translate(-50%);bottom:50%!important}@media (max-width:768px){.grid-container{gap:5px!important}.grid-cell,.grid-item{height:auto;min-height:80px;font-size:.8rem}.output-container{flex-direction:column;gap:10px}.output-html,.output{width:100%}}