:root{--obg-off:#0b0e12;--obg-on:#7fd3ff;--obg-grid:#23303c}[data-theme=dark]{--obg-grid:#2b3a48}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--obg-grid:#2b3a48}}.obg-stage{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-start}.obg-canvas-wrap{flex:1 1 320px;min-width:0}#obg-canvas{display:block;max-width:100%;border:1px solid var(--border);border-radius:8px;background:var(--obg-off);touch-action:none;cursor:crosshair}.obg-side{flex:0 0 auto;display:flex;flex-direction:column;gap:.6rem}.obg-preview-box{border:1px solid var(--border);border-radius:8px;padding:.7rem;background:var(--surface);text-align:center}#obg-preview{display:block;margin:0 auto .4rem;image-rendering:pixelated;background:var(--obg-off);border-radius:3px}.obg-preview-box .hint{margin:0;font-size:.78rem}.obg-toolbar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}.obg-toolbar .btn{flex:0 0 auto}.obg-toolbar .btn.active{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--accent-ink)}.obg-toolbar .btn.active:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--accent-ink)}.obg-pad{display:grid;grid-template-columns:repeat(3,2.1rem);grid-template-rows:repeat(2,2.1rem);gap:.25rem;justify-content:start}.obg-pad .btn{padding:0;display:grid;place-items:center;font-size:.9rem;line-height:1}.obg-pad .obg-pad-up{grid-column:2;grid-row:1}.obg-pad .obg-pad-left{grid-column:1;grid-row:2}.obg-pad .obg-pad-down{grid-column:2;grid-row:2}.obg-pad .obg-pad-right{grid-column:3;grid-row:2}.obg-out-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}.obg-out-head>div{flex:1 1 150px;min-width:0}.obg-out-head label{display:block}.obg-check{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;padding-bottom:.55rem;white-space:nowrap}.obg-check input{width:auto;margin:0}.obg-check label{margin:0;font-weight:400}textarea.obg-code{width:100%;min-height:190px;font-family:var(--mono);font-variant-ligatures:none;font-size:.82rem;line-height:1.45;white-space:pre;overflow-wrap:normal;overflow-x:auto;resize:vertical}textarea#obg-import{min-height:120px}.obg-code-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.35rem}.obg-code-head label{margin:0}.obg-code-head .hint{margin:0;font-size:.78rem}.code-copy-btn{font:inherit;font-size:.78rem;line-height:1;padding:.55rem .7rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;flex:0 0 auto}.code-copy-btn:hover{border-color:var(--accent);color:var(--accent-text)}@media (max-width:560px){.obg-stage{gap:.9rem}.obg-side{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:flex-start}.obg-preview-box,.obg-toolbar .btn{flex:1 1 auto}}