.matrix-editor{max-width:430px;margin:auto}.matrix-board{display:flex;align-items:center;gap:10px;padding:12px 6px;background:#101827;border-radius:12px;border:1px solid #fff}.matrix-wires{display:flex;flex-direction:column;justify-content:space-around;width:66px;align-self:stretch;padding:20px 0;color:#fff;font:11px monospace}.matrix-wires span{border-bottom:2px solid #89c6ff;padding:0 0 4px 4px}.matrix-wires span:first-child{border-color:#f76c72}.matrix-wires span:nth-child(2){border-color:#cad1da}.matrix-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;flex:1;min-width:0;padding:5px;border:1px solid #fff;border-radius:6px}.matrix-grid button{width:100%;height:auto;aspect-ratio:1;min-width:0;padding:0;border:1px solid #66758b!important;border-radius:4px;background:#263448!important}.matrix-grid button.on{background:#fff!important;border-color:#fff!important}.matrix-grid button:focus-visible{outline:3px solid #ffba38;outline-offset:1px}.matrix-controls{display:flex;gap:8px;justify-content:center;margin:12px 0}.matrix-controls button{flex:1;padding:0 8px}.matrix-controls button:first-child{background:#101827;color:#fff;border:1px solid #fff;outline:1px solid #66758b;outline-offset:2px}.matrix-presets{border:1px solid #8192aa66;border-radius:10px;padding:10px}.matrix-presets summary{cursor:pointer;font-weight:700}.matrix-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.matrix-shapes button{height:auto;padding:8px 3px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;white-space:normal}@media(max-width:480px){.matrix-grid{gap:3px}.matrix-wires{width:48px}.matrix-controls{gap:6px}.matrix-controls button{font-size:12px}}
.matrix-grid button{min-height:0!important}

.colour-editor{display:grid;grid-template-columns:minmax(280px,2fr) minmax(220px,1fr);gap:24px;max-width:900px}.colour-preview{height:160px;border:1px solid #7e8ba0;border-radius:12px;box-shadow:inset 0 0 0 10px #ffffff30}.colour-summary output{display:block;margin:8px 0 22px;font:14px monospace}.colour-presets{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}.colour-presets button{padding:0;min-width:0;height:38px;border:2px solid #aab5c5;border-radius:6px}.colour-presets button[aria-pressed=true]{outline:3px solid #2563eb;outline-offset:3px}.colour-plane{height:170px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);border-radius:10px;position:relative;touch-action:none;overflow:hidden}.colour-plane span{position:absolute;width:14px;height:14px;border:2px solid white;box-shadow:0 0 0 2px #111;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.colour-mixer>input{width:100%;margin:15px 0;accent-color:#fff;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,blue,#f0f,red);border-radius:15px}.colour-rgb{display:flex;gap:8px}.colour-rgb label{display:flex;flex:1;flex-direction:column;gap:5px;font-weight:700;text-align:center}.colour-rgb input{width:100%;min-width:0;text-align:center}.matrix-board{position:relative;padding:58px;margin:0 auto;width:min(440px,100%);box-sizing:border-box}.matrix-grid{width:100%}.matrix-wires{position:absolute;left:0;top:50%;width:55px;transform:translateY(-50%)}.matrix-board[data-turn="1"] .matrix-wires{left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(-90deg);transform-origin:center}.matrix-board[data-turn="2"] .matrix-wires{left:auto;right:0;transform:translateY(-50%) rotate(180deg)}.matrix-board[data-turn="3"] .matrix-wires{left:50%;top:0;transform:translateX(-50%) rotate(90deg);transform-origin:center}.matrix-board[data-turn="2"] .matrix-wires span{font-size:0}.matrix-board[data-turn="2"] .matrix-wires span:after{content:''}.matrix-board .matrix-grid{flex:none}
@media(max-width:640px){.colour-editor{grid-template-columns:1fr}.colour-preview{height:90px}.colour-presets{gap:4px}.colour-presets button{height:32px}.matrix-board{padding:40px}.matrix-wires{width:38px}}

.board-choices{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:14px}.board-card{display:flex;flex-direction:column;gap:10px;padding:16px!important;text-align:left;align-items:stretch;border:2px solid #8392ab55!important;border-radius:14px!important;background:var(--panel)!important}.board-card img{width:100%;height:125px;object-fit:contain;background:white;border-radius:8px}.board-card strong{font-size:18px}.board-card span,.board-card small{font-size:12px}.board-card[aria-pressed=true]{border-color:#2563eb!important;box-shadow:0 0 0 2px #2563eb33}.board-card:disabled{opacity:.5}.board-card:hover{transform:translateY(-2px)}@media(max-width:480px){.board-choices{grid-template-columns:1fr 1fr;gap:8px}.board-card{padding:8px!important}.board-card img{height:85px}.board-card strong{font-size:15px}}

.colour-mixer>input[type=range]{appearance:none;-webkit-appearance:none;height:14px;border:0;padding:0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,blue,#f0f,red)!important}.colour-mixer>input[type=range]::-webkit-slider-runnable-track{background:transparent;border:0}.colour-mixer>input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:transparent;border:3px solid white;box-shadow:0 0 2px 1px #444}.colour-plane span{left:clamp(7px,var(--x),calc(100% - 7px));top:clamp(7px,var(--y),calc(100% - 7px))}.brand{min-width:160px;flex-shrink:0}.connection{min-width:260px}.header-actions{flex-wrap:wrap;justify-content:flex-end}header{flex-wrap:wrap}.matrix-wires{height:160px;box-sizing:border-box;padding:0}.matrix-board[data-turn="1"] .matrix-wires{bottom:-53px;transform:translateX(-50%) rotate(-90deg)}.matrix-board[data-turn="3"] .matrix-wires{top:-53px;transform:translateX(-50%) rotate(90deg)}
header{height:auto;min-height:70px;padding-top:8px;padding-bottom:8px}.header-actions{flex-wrap:nowrap}.connection>a,.connection>span{white-space:nowrap}
.board-card{height:auto!important;min-height:210px}.board-card img{flex-shrink:0}.board-choices{align-items:stretch}
.board-card{min-width:0;white-space:normal}.board-card span,.board-card small{overflow-wrap:anywhere}@media(max-width:480px){.board-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

.language-choice{display:flex;align-items:center;gap:5px;flex-shrink:0}.language-choice select{min-width:96px}.language-choice span{font-size:17px}html[lang=en] .blocklyToolboxCategoryLabel{font-size:11px!important}

.uno-settings{border:1px solid #8192aa66;padding:12px;border-radius:10px;margin:14px 0}.uno-settings summary{cursor:pointer;font-weight:700}.uno-settings select{margin-left:auto;max-width:65%}html[lang=en] .blocklyToolbox{min-width:136px}