*{margin:0;padding:0}html,body{overflow:hidden;font-family:Roboto,-apple-system,BlinkMacSystemFont,sans-serif}#layout{display:flex;width:100vw;height:100vh}#grid-panel{width:280px;min-width:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;background:#0d0d0d;color:#fff;padding:40px 32px}#grid-panel h1{font-size:3rem;font-weight:800;letter-spacing:.06em;line-height:1;text-transform:uppercase}.grid-panel-header{display:flex;flex-direction:column;gap:8px;align-items:left;justify-content:left}#grid-panel .hint{font-size:1.5rem;font-weight:500;color:#ccc;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}.grid-set{display:flex;flex-direction:column;gap:20px;align-items:center}.grid-wrap{display:flex;flex-direction:column;gap:8px;align-items:center}.grid-wrap label{font-size:.7rem;font-weight:700;color:#666;letter-spacing:.15em;text-transform:uppercase}.shape-grid,#shape-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;aspect-ratio:1;background:#333;padding:4px;border-radius:4px}.shape-grid{width:140px;min-width:140px}#shape-grid .cell,.shape-grid .cell{position:relative;background:#262626;border:none;cursor:pointer;overflow:hidden;border-radius:2px;transition:background .2s ease}#shape-grid .cell:before,#shape-grid .cell:after,.shape-grid .cell:before,.shape-grid .cell:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(0);transform-origin:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}#shape-grid .cell:after,.shape-grid .cell:after{background:#0d0d0d}#shape-grid .cell:before,.shape-grid .cell:before{background:#86ff35;z-index:1}#shape-grid .cell.active:after,.shape-grid .cell.active:after{transform:translate(-50%,-50%) scale(1)}#shape-grid .cell.root:before,.shape-grid .cell.root:before{transform:translate(-50%,-50%) scale(1)}#shape-grid .cell:hover:not(.active):not(.root),.shape-grid .cell:hover:not(.active):not(.root){background:#333}#canvas-container{flex:1;position:relative;min-width:0;background:#0a0a0a}.webgl{display:block;width:100%;height:100%;outline:none}#debug-info{position:absolute;top:20px;left:20px;background:#0d0d0de6;color:#fff;padding:16px 20px;font-family:Syne,system-ui,sans-serif;font-size:11px;font-weight:500;line-height:1.7;letter-spacing:.02em;border-radius:6px;z-index:1000;pointer-events:none;-webkit-user-select:none;user-select:none}#debug-info .label{color:#888;font-weight:600}#debug-info .value{color:#86ff35}