.lab{max-width:1280px;margin:auto;padding:28px}.lab nav{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:45px}.lab h1{font-size:40px;letter-spacing:-1.2px;margin:0}.lab h2{font-size:20px}.lab p{line-height:1.8}.lab-controls{display:flex;gap:25px;align-items:end;flex-wrap:wrap;padding:24px 0}.lab-controls label{flex:1;min-width:150px;font-size:12px;color:#b7c7c4;display:flex;flex-direction:column;gap:8px}.lab-controls b{color:#edbe6c}.lab-controls button{width:150px;margin-bottom:3px}.lab input[type=range]{padding:0;accent-color:#edbe6c}.direction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.direction-card{padding:15px 0;text-align:center;border:1px solid #3b555d;border-radius:6px;background:#182e36}.direction-card canvas{width:100%;max-width:256px;image-rendering:pixelated}.direction-card b{font-size:12px;letter-spacing:2px}.strip-title{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.strip-title label{display:flex;gap:12px;align-items:center;font-size:12px}.strip-title select{width:120px}.frame-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.frame-strip button{min-width:0;border:1px solid #3b555d;background:#172c34;padding:0 0 8px;border-radius:4px}.frame-strip button[aria-pressed=true]{border-color:#e9c57b;background:#294449}.frame-strip img{width:100%;image-rendering:pixelated}.frame-strip span{font-size:11px}.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:40px 0;border-top:1px solid #344b52;padding-top:30px}.source-grid p{font-size:13px;color:#b0c2c2}.source-links{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:#e7bf72}.reference{max-width:100%;max-height:170px;object-fit:contain;image-rendering:pixelated;background:#eef0dd;margin-bottom:20px}.effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.effects-grid figure{margin:0;background:#1a3039;border:1px solid #344b52;padding:20px}.effects-grid img{width:100%;height:180px;object-fit:contain;image-rendering:pixelated}.effects-grid figcaption{font-size:12px;color:#bdccca}@media(max-width:600px){.lab{padding:20px}.lab h1{font-size:30px}.lab nav span{display:none}.direction-grid{grid-template-columns:1fr 1fr}.frame-strip{grid-template-columns:repeat(4,1fr)}.source-grid,.effects-grid{grid-template-columns:1fr}.lab-controls{gap:18px}.lab-controls button{width:100%}}
.direction-card canvas{display:block;margin:auto}.direction-card b{display:block}