:root{--primary-bg: #060c18;--primary-fg: #c8daf0;--panel-bg: #0c1830;--accent: #a07ae0;--inactive: #2a3a5a;--divider: #0c1830}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:50px;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.4rem;margin:0;color:var(--accent)}#camera-container{position:relative;flex:1;overflow:hidden;background:#060c18;min-height:0}#webcam{width:100%;height:100%;object-fit:cover}#guide-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}#split-banner{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:20;background:#000000b3;border:1px solid var(--accent);padding:5px 16px;white-space:nowrap}#split-banner span{font-size:.75rem;color:var(--accent);letter-spacing:.5px}#app{flex:1;display:flex;flex-direction:column;min-height:0}#control-panel{flex-shrink:0;background:var(--panel-bg);border-top:1px solid var(--divider);padding:10px 16px 12px;display:flex;flex-direction:column;gap:8px}.selector-row{display:flex;align-items:center;gap:8px}.selector-label{font-size:.65rem;color:#4a6a9a;letter-spacing:1px;width:40px;flex-shrink:0}.shape-btn,.stripe-btn{font-family:DotGothic16,monospace;font-size:1rem;width:40px;height:36px;background:transparent;color:var(--inactive);border:1px solid var(--inactive);cursor:pointer;transition:color .15s,border-color .15s;padding:0;line-height:1}.shape-btn.active,.stripe-btn.active{color:var(--accent);border-color:var(--accent)}.action-row{display:flex;align-items:center;justify-content:center;gap:20px;padding-top:4px}#cancel-btn{font-family:DotGothic16,monospace;font-size:.8rem;padding:8px 20px;background:transparent;color:#e05a5a;border:1px solid #e05a5a;cursor:pointer}#shutter-btn{width:72px;height:72px;border-radius:50%;background:var(--primary-fg);border:5px double var(--primary-bg);box-shadow:0 0 0 3px var(--primary-fg);cursor:pointer;transition:background .2s,box-shadow .2s;outline:none;flex-shrink:0}#shutter-btn.second-shot{background:var(--accent);box-shadow:0 0 0 3px var(--accent);border-color:var(--primary-bg)}#shutter-btn:active{transform:scale(.93);background:#000;box-shadow:0 0 0 3px var(--primary-bg),0 0 24px var(--accent)}#shutter-btn:disabled{opacity:.4;cursor:not-allowed}#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{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border:2px solid var(--accent)}.btn-group{display:flex;gap:16px;padding-bottom:8px}button{font-family:DotGothic16,monospace;font-size:1.1rem;padding:10px 28px;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:28px;font-size:.6rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px 0;border-top:1px solid #0c1830;background:#0c1830}footer p{margin:0;color:#2a3a5a}.top-link{font-family:DotGothic16,monospace;font-size:.65rem;color:var(--accent);text-decoration:none;border:1px solid #2a3a5a;padding:2px 10px}.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:.65rem;color:var(--primary-fg);text-decoration:none;border:1px solid #2a3a5a;padding:2px 10px}.share-btn:hover{border-color:var(--accent);color:var(--accent)}.flip-cam-btn{font-family:DotGothic16,monospace;font-size:.8rem;padding:8px 14px;background:transparent;color:var(--primary-fg);border:1px solid var(--inactive);cursor:pointer;outline:none;flex-shrink:0;letter-spacing:1px}.flip-cam-btn:active{opacity:.6}.hidden{display:none!important}@media(display-mode:standalone){#ad-wrap{display:none!important}}
