:root{--primary-bg: #060c18;--primary-fg: #c8daf0;--accent: #40c8e0}body{background-color:var(--primary-bg);color:var(--primary-fg);font-family:DotGothic16,monospace;margin:0;padding:0;overflow-y:auto;height:100svh;display:flex;flex-direction:column;image-rendering:pixelated}header{height:60px;display:flex;align-items:center;padding:0 20px;border-bottom:2px solid var(--accent);background:var(--primary-bg);flex-shrink:0}header h1{font-size:1.5rem;margin:0;color:var(--accent)}#app{flex:1;display:flex;flex-direction:column;min-height:0}#camera-container{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#000;flex-shrink:0}#preview-canvas{width:100%;height:100%;display:block}#webcam{display:none}#flash-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;transition:opacity .04s;pointer-events:none}#flash-layer.on{opacity:.55}#control-bar{flex-shrink:0;background:var(--primary-bg);border-top:2px solid var(--accent);padding:10px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}#spell-wrap{width:100%;max-width:520px;display:flex;gap:6px}#apply-btn{font-family:DotGothic16,monospace;font-size:1rem;padding:8px 16px;background:var(--accent);color:var(--primary-bg);border:2px solid var(--accent);cursor:pointer;flex-shrink:0;letter-spacing:2px}#spell-input{font-family:DotGothic16,monospace;font-size:1.2rem;flex:1;min-width:0;padding:8px 12px;background:#060c18;color:var(--accent);border:2px solid var(--accent);outline:none;letter-spacing:3px;box-sizing:border-box;text-align:center;text-transform:uppercase}#spell-input::placeholder{color:#2a4060;letter-spacing:2px}#param-readout{font-family:DotGothic16,monospace;font-size:.58rem;color:#4a7ab0;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:520px;letter-spacing:.5px;line-height:1.4}#param-readout span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}#stamp-row{display:flex;justify-content:center}.stamp-btn{font-family:DotGothic16,monospace;font-size:.72rem;padding:4px 16px;background:var(--primary-bg);color:#3a5a8a;border:1px solid #3a5a8a;cursor:pointer;letter-spacing:1px}.stamp-btn.active{color:var(--accent);border-color:var(--accent)}#shutter-row{display:flex;justify-content:center;align-items:center}#shutter-btn{width:80px;height:80px;border-radius:50%;background:#fff;border:6px double #000;box-shadow:0 0 0 4px #fff;cursor:pointer;transition:.1s;outline:none}#shutter-btn:active{transform:scale(.95);background:#000;box-shadow:0 0 0 4px #000,0 0 30px #fff}#shutter-btn:disabled{opacity:.4;cursor:not-allowed}#loading-view{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--primary-bg);z-index:2147483647;display:flex;align-items:center;justify-content:center}#loading-text{font-family:DotGothic16,monospace;font-size:1.1rem;color:var(--accent);letter-spacing:4px;animation:blink .8s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}#result-view{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--primary-bg);z-index:2147483647;display:flex;flex-direction:column;align-items:center;padding:12px 16px 16px;gap:12px;box-sizing:border-box}#canvas-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;justify-content:center;align-items:flex-start;-webkit-overflow-scrolling:touch}#canvas-scroll #output-canvas{max-width:100%;width:auto;height:auto;display:block;border:2px solid var(--accent)}.btn-group{display:flex;gap:12px;flex-shrink:0}button{font-family:DotGothic16,monospace;font-size:1.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{min-height:30px;font-size:.6rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 0;border-top:1px solid #0c1830;background:#0c1830}.top-link{font-family:DotGothic16,monospace;font-size:.7rem;color:var(--accent);text-decoration:none;border:1px solid #2a3a5a;padding:3px 12px}.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:.7rem;color:var(--primary-fg);text-decoration:none;border:1px solid #2a3a5a;padding:3px 12px}.share-btn:hover{border-color:var(--accent);color:var(--accent)}.hidden{display:none!important}@media(display-mode:standalone){#ad-wrap{display:none!important}}