:root{--primary-bg: #060c18;--primary-fg: #c8daf0;--panel-bg: #0c1830;--accent: #e0b440;--inactive: #2a3a5a;--divider: #0c1830;--shot-red: #e05a5a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--primary-bg);color:var(--primary-fg);font-family:DotGothic16,monospace;height:100svh;overflow-y:auto;display:flex;flex-direction:column;image-rendering:pixelated}header{height:44px;display:flex;align-items:center;padding:0 16px;border-bottom:2px solid var(--accent);background:var(--primary-bg);flex-shrink:0}header h1{font-size:1.2rem;color:var(--accent)}#app{flex:1;display:flex;flex-direction:column;min-height:0}#preview-area{flex:1;min-height:0;background:#000;overflow:hidden}#display-canvas{width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges}#controls{flex-shrink:0;background:var(--panel-bg);border-top:1px solid var(--divider);padding:6px 8px 8px;display:flex;flex-direction:column;gap:5px}.ctrl-row{display:flex;gap:5px;align-items:center}.select-wrap{flex:1;display:flex;flex-direction:column;gap:2px}.sel-label{font-size:.5rem;color:var(--inactive);letter-spacing:1px}select{font-family:DotGothic16,monospace;font-size:.68rem;background:var(--primary-bg);color:var(--primary-fg);border:1px solid var(--inactive);padding:3px 2px;width:100%;outline:none;cursor:pointer}select:focus{border-color:var(--accent)}.ctrl-btn{font-family:DotGothic16,monospace;font-size:.65rem;flex:1;padding:6px 2px;background:var(--primary-bg);color:var(--primary-fg);border:1px solid var(--inactive);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .15s,color .15s}.ctrl-btn:active{background:#e0b4401a}.ctrl-btn.active{color:var(--accent);border-color:var(--accent)}.shot-btn{background:var(--shot-red);color:#fff;border-color:var(--shot-red);font-size:.9rem;flex:1.4}.shot-btn:active{background:#c04030}.val-btn{flex:1.6;color:var(--accent);border-color:var(--inactive);font-size:.6rem}#result-view{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--primary-bg);z-index:2147483647;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:16px;gap:16px;box-sizing:border-box}#result-view #output-canvas,#result-view #output-gif{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;width:auto;height:auto;border:2px solid var(--accent)}.btn-group{display:flex;gap:16px}button{font-family:DotGothic16,monospace;font-size:1rem;padding:10px 24px;background:var(--primary-fg);color:var(--primary-bg);border:2px solid var(--primary-fg);cursor:pointer}.alt-btn{background:var(--primary-bg);color:var(--accent);border:2px solid var(--accent)}footer{flex-shrink:0;min-height:24px;font-size:.55rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 0;border-top:1px solid #0c1830;background:#0c1830}footer p{margin:0;color:#2a3a5a}.top-link{font-family:DotGothic16,monospace;font-size:.6rem;color:var(--accent);text-decoration:none;border:1px solid #2a3a5a;padding:1px 8px}.top-link:hover{border-color:var(--accent)}.share-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.share-btn{font-family:DotGothic16,monospace;font-size:.6rem;color:var(--primary-fg);text-decoration:none;border:1px solid #2a3a5a;padding:1px 8px}.share-btn:hover{border-color:var(--accent);color:var(--accent)}.hidden{display:none!important}@media(display-mode:standalone){#ad-wrap{display:none!important}}