:root{--primary-color: #00ff88;--bg-color: #1a1a1a;--text-color: #ffffff}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh}#container{position:relative;width:100%;height:100%;max-width:1280px;max-height:720px;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #00000080}#output_canvas,#drawing_canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#drawing_canvas{z-index:5;pointer-events:none}#ui-overlay{position:absolute;top:20px;left:20px;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:300px;z-index:10}h1{font-size:1.2rem;margin:0 0 10px;color:var(--primary-color)}#measurements{font-size:1.5rem;font-weight:700;margin-bottom:10px}.instruction{font-size:.9rem;color:#ccc;margin:0}.measurement-item{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.measurement-item:last-child{border-bottom:none}#toolbar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:10px 20px;border-radius:50px;display:flex;gap:15px;align-items:center;z-index:10;box-shadow:0 8px 32px #0000005e;border:1px solid rgba(255,255,255,.18)}.color-btn{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:#fff;box-shadow:0 0 10px currentColor}#reset-btn{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;padding:8px 16px;border-radius:20px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .2s}#reset-btn:hover{background:#ffffff1a;border-color:#fff}