*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}#app{width:100%;height:100%;position:relative}#drawing-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}#toolbar{position:fixed;bottom:12px;left:50%;transform:translate(-50%);z-index:50;pointer-events:none}#toolbar-row{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#141414bf;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.1);border-radius:16px;pointer-events:auto}#toolbar-row button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:transparent;color:#ffffffb3;border:none;border-radius:10px;cursor:pointer;transition:all .15s;padding:0;flex-shrink:0}#toolbar-row button svg{width:20px;height:20px}#toolbar-row button:hover{background:#ffffff1f;color:#fff}#toolbar-row button:active{transform:scale(.9)}#toolbar-row button.active{background:#3b82f659;color:#60a5fa;box-shadow:0 0 12px #3b82f64d}.sep{width:1px;height:24px;background:#ffffff26;margin:0 2px;flex-shrink:0}#width-display{display:flex;align-items:center;padding:0 4px}#width-slider{width:80px;height:4px;accent-color:#60a5fa;cursor:pointer}.dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;justify-content:flex-end}.dialog.hidden{display:none}.dialog-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dialog-sheet{position:relative;background:#1c1c1ef2;backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-top-left-radius:20px;border-top-right-radius:20px;padding:12px 20px 28px;max-height:70vh;overflow-y:auto;color:#fff;animation:sheetUp .25s ease-out}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{width:36px;height:4px;background:#ffffff40;border-radius:2px;margin:0 auto 14px}.dialog-sheet h3{font-size:17px;font-weight:600;margin-bottom:14px;letter-spacing:-.02em}.button-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.button-grid button{background:#ffffff12;color:#fffc;border:1.5px solid transparent;border-radius:10px;padding:10px 4px;font-size:11px;font-weight:500;cursor:pointer;text-align:center;transition:all .15s}.button-grid button:hover{background:#ffffff21}.button-grid button:active{transform:scale(.95)}.button-grid button.selected{border-color:#60a5fa;background:#3b82f633;color:#fff}.recording-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.recording-item{background:#ffffff0f;border-radius:12px;padding:6px;cursor:pointer;text-align:center;transition:all .15s;border:1.5px solid transparent}.recording-item:hover{background:#ffffff1f;border-color:#ffffff26}.recording-item:active{transform:scale(.96)}.recording-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;margin-bottom:4px}.recording-item span{font-size:11px;color:#ffffff80;font-weight:500}#mirror-options label{display:flex;align-items:center;gap:10px;padding:8px 0;color:#fffc;font-size:14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06)}#mirror-options label:last-child{border-bottom:none}#mirror-options input[type=checkbox]{width:20px;height:20px;accent-color:#60a5fa;flex-shrink:0}#mirror-options input[type=number]{width:52px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 8px;font-size:14px;text-align:center}#transparency-control{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}#transparency-control label{display:flex;align-items:center;gap:10px;color:#fffc;font-size:14px;padding:6px 0}#transparency-control input[type=range]{flex:1;accent-color:#60a5fa}#transparency-control select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 10px;font-size:14px}#color-controls{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}#color-controls label{display:flex;align-items:center;gap:10px;padding:6px 0;color:#fffc;font-size:14px}#color-controls input[type=color]{width:36px;height:36px;border:2px solid rgba(255,255,255,.15);border-radius:10px;cursor:pointer;background:none;padding:2px}#color-controls input[type=range]{flex:1;accent-color:#60a5fa}@media(max-width:600px){#toolbar-row{gap:2px;padding:5px 8px}#toolbar-row button{width:34px;height:34px}#toolbar-row button svg{width:18px;height:18px}#width-slider{width:50px}.button-grid{grid-template-columns:repeat(3,1fr)}.recording-grid{grid-template-columns:repeat(2,1fr)}}