Witrażowa asymetryczna siatka

<main class="light-plan">
  <section class="glass-grid" aria-label="Kolorowy plan galerii" data-tone="Neutralne">
    <div class="pane p1"></div><div class="pane p2"></div><div class="pane p3"><span id="glass-lux">500</span><small>lx</small></div><div class="pane p4"></div><div class="pane p5"><strong id="glass-room">NOWA GALERIA</strong></div><div class="pane p6"></div><div class="pane p7"></div>
  </section>
  <form id="light-form" novalidate>
    <header><span>PLAN ŚWIATŁA / 05</span><h1>Galeria po zmroku</h1><p>Ustaw scenę dla jednej sali i zobacz jej zapis w kolorowej siatce.</p></header>
    <label>Nazwa sali<input id="gallery-name" name="gallery" required minlength="3" maxlength="32" placeholder="Np. Galeria Północ"></label>
    <div class="light-row"><label>Natężenie światła<input id="gallery-lux" name="lux" type="number" required min="100" max="1000" step="10" value="500"></label><label>Oprawa<select id="gallery-fixture" name="fixture"><option>Szyna punktowa</option><option>Panel sufitowy</option><option>Kinkiet liniowy</option></select></label></div>
    <fieldset><legend>Temperatura sceny</legend><label><input type="radio" name="tone" value="Ciepłe"><span>Ciepłe</span></label><label><input type="radio" name="tone" value="Neutralne" checked><span>Neutralne</span></label><label><input type="radio" name="tone" value="Chłodne"><span>Chłodne</span></label></fieldset>
    <div class="light-actions"><button class="primary" type="submit">Zapisz plan</button><button class="secondary" type="reset">Resetuj scenę</button><button type="button" disabled>Scena zajęta</button></div>
    <p id="light-status" class="status" role="status" aria-live="polite"></p>
  </form>
</main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:22px;background:#0e0e10;color:#171719;font:16px/1.45 Arial,sans-serif;display:grid;place-items:center}.light-plan{width:min(100%,980px);min-height:550px;display:grid;grid-template-columns:1.05fr .95fr;border:4px solid #0e0e10;background:#f4f0df}.glass-grid{display:grid;grid-template-columns:1.1fr .7fr 1.2fr;grid-template-rows:.8fr 1.2fr .7fr;border-right:5px solid #0e0e10;background:#0e0e10;gap:5px;min-height:550px}.pane{position:relative;display:grid;place-items:center;overflow:hidden}.p1{grid-column:1/3;background:#df3d54}.p2{background:#eeb63e}.p3{background:#287aaa;color:#fff;font:900 61px/1 Arial,sans-serif;align-content:center}.p3 small{font-size:13px}.p4{grid-row:2/4;background:#4a9564}.p5{grid-column:2/4;background:#f5efe0}.p5 strong{font:900 clamp(28px,5vw,53px)/.9 Arial,sans-serif;padding:20px;overflow-wrap:anywhere}.p6{background:#7d4b97}.p7{background:#e76738}.glass-grid[data-tone="Ciepłe"] .p3{background:#e76738}.glass-grid[data-tone="Ciepłe"] .p2{background:#df3d54}.glass-grid[data-tone="Chłodne"] .p3{background:#4b4fb7}.glass-grid[data-tone="Chłodne"] .p2{background:#4a9564}.glass-grid:after{content:"";position:absolute;width:0;height:0}.glass-grid.is-saved .p6:after{content:"✓";font:900 54px Arial;color:#fff}form{padding:34px 36px;background:#f4f0df}header{border-top:12px solid #171719;padding-top:13px;margin-bottom:23px}header span{font-size:11px;font-weight:800;letter-spacing:.13em}h1{margin:5px 0 8px;font:900 clamp(39px,6vw,64px)/.9 Arial,sans-serif;letter-spacing:-.05em}header p{margin:0;max-width:40ch}label{display:block;font-size:13px;font-weight:800}input,select,button{font:inherit}input,select{display:block;width:100%;min-height:46px;margin-top:6px;padding:8px 10px;border:3px solid #171719;border-radius:0;background:#fff;color:#171719}.light-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin-top:17px}fieldset{border:0;border-top:5px solid #171719;border-bottom:5px solid #171719;margin:21px 0;padding:11px 0 7px}legend{padding-right:9px;font-weight:900}fieldset label{display:inline-flex;min-height:44px;align-items:center;gap:7px;margin-right:13px}input[type=radio]{width:21px;height:21px;accent-color:#7d4b97}.light-actions{display:flex;gap:8px;flex-wrap:wrap}button{min-height:44px;padding:9px 13px;border:3px solid #171719;border-radius:0;background:#f4f0df;color:#171719;font-weight:900;cursor:pointer}.primary{background:#287aaa;color:#fff}.secondary:hover{background:#eeb63e}button:disabled{color:#8a877d;border-color:#aaa697;cursor:not-allowed}.status{min-height:25px;margin:14px 0 0;font-weight:900;color:#7a2251}input:focus-visible,select:focus-visible,button:focus-visible{outline:4px solid #df3d54;outline-offset:3px}@media(max-width:730px){body{padding:12px}.light-plan{grid-template-columns:1fr}.glass-grid{min-height:300px;border-right:0;border-bottom:5px solid #0e0e10}.p3{font-size:45px}form{padding:28px 23px}}@media(max-width:380px){body{padding:0}.light-plan{border-left:0;border-right:0}.glass-grid{min-height:260px}.p5 strong{font-size:27px}.light-row{grid-template-columns:1fr}form{padding:23px 16px}.light-actions button{width:100%}fieldset label{display:flex;margin-right:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

$(()=>{const $form=$('#light-form'),$grid=$('.glass-grid'),$status=$('#light-status');function sync(){const room=$('#gallery-name').val().trim();$('#glass-room').text((room||'NOWA GALERIA').toUpperCase());$('#glass-lux').text($('#gallery-lux').val()||'0');$grid.attr('data-tone',$('input[name="tone"]:checked').val()||'Neutralne').removeClass('is-saved');}$form.on('input change',sync);$form.on('submit',function(event){event.preventDefault();if(!this.checkValidity()){$status.text('Podaj nazwę i natężenie od 100 do 1000 lx.');this.reportValidity();return;}$grid.addClass('is-saved');$status.text('Plan dla '+$('#gallery-name').val().trim()+': '+$('#gallery-lux').val()+' lx.');});$form.on('reset',()=>setTimeout(()=>{$status.text('Przywrócono neutralną scenę.');sync();},0));sync();;const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$form.find('.primary').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});