:root{--color-brand-light:#059669;--color-brand-dark:#34d399;--color-bg-light:#fff;--color-bg-dark:#1e293b;--color-text-light:#334155;--color-text-dark:#f8fafc;--color-panel-bg-light:#f8fafc;--color-panel-bg-dark:#334155;--color-panel-border-light:#e2e8f0;--color-panel-border-dark:#475569;--color-error:#ef4444;--color-success:#10b981;--color-brand:var(--lightningcss-light,var(--color-brand-light))var(--lightningcss-dark,var(--color-brand-dark));--color-bg:var(--lightningcss-light,var(--color-bg-light))var(--lightningcss-dark,var(--color-bg-dark));--color-text:var(--lightningcss-light,var(--color-text-light))var(--lightningcss-dark,var(--color-text-dark));--color-panel-bg:var(--lightningcss-light,var(--color-panel-bg-light))var(--lightningcss-dark,var(--color-panel-bg-dark));--color-panel-border:var(--lightningcss-light,var(--color-panel-border-light))var(--lightningcss-dark,var(--color-panel-border-dark));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}*,:before,:after{box-sizing:inherit}body{background-color:var(--color-bg);width:100vw;height:100vh;color:var(--color-text);justify-content:center;align-items:center;margin:0;display:flex;overflow:hidden}.screen{opacity:0;pointer-events:none;z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.screen.active{opacity:1;pointer-events:auto}.panel{background:var(--color-panel-bg);border:1px solid var(--color-panel-border);text-align:center;border-radius:16px;width:400px;max-width:90%;padding:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}h1{color:var(--color-brand);margin-top:0;font-size:1.8rem;font-weight:700}p{color:var(--color-text);opacity:.8;line-height:1.5}#debug-log{z-index:9999;color:#4ade80;pointer-events:none;background:#000000d9;border:1px solid #4ade804d;border-radius:8px;width:calc(100% - 20px);max-width:500px;max-height:160px;padding:6px 8px;font-family:monospace;font-size:10px;display:none;position:fixed;top:10px;left:10px;overflow-y:auto}#debug-log:not(:empty){display:block}.primary-btn{background:var(--color-brand);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:2rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:transform .2s,background .2s;box-shadow:0 2px 4px #0000001a}.primary-btn:active{transform:scale(.95)}.primary-btn:disabled{cursor:not-allowed;box-shadow:none;background:#64748b;transform:scale(1)}.secondary-btn{color:var(--color-brand);border:2px solid var(--color-brand);cursor:pointer;background:0 0;border-radius:8px;width:100%;margin-top:1rem;padding:.85rem 2rem;font-size:1rem;font-weight:600;transition:background .2s,color .2s,transform .2s}.secondary-btn:hover{background:var(--color-brand);color:#fff}.secondary-btn:active{transform:scale(.95)}#next-btn{display:none}.thumbnails-grid{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:1.5rem 0;display:grid}.thumbnails-grid img{aspect-ratio:1;object-fit:cover;border:2px solid var(--color-panel-border);border-radius:8px;width:100%}.tutorial-animation{width:150px;height:150px;margin:2rem auto;position:relative}.orbit-path{border:2px dashed var(--color-brand);opacity:.5;border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0;transform:rotateX(60deg)}.phone-icon{transform-origin:-35px 0;font-size:2rem;animation:3s linear infinite orbit;position:absolute;top:50%;left:50%}@keyframes orbit{0%{transform:translate(-50%,-50%)rotate(0)translate(75px)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)translate(75px)rotate(-360deg)}}#camera-wrapper{z-index:1;background-color:#000;border-radius:20px;position:absolute;inset:14px;overflow:hidden}#camera-feed{object-fit:contain;width:100%;height:100%}#overlay-canvas{pointer-events:none;object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.overlay-ui{z-index:3;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:1rem;display:flex;position:absolute;top:0;left:0}.top-bar{background:var(--color-panel-bg);border:1px solid var(--color-panel-border);width:100%;max-width:calc(100% - 160px);color:var(--color-text);border-radius:999px;align-items:center;gap:1rem;margin:0 auto;padding:1rem;display:flex;box-shadow:0 4px 6px -1px #0000001a}.progress-bar-wrapper{background:var(--color-panel-border);border-radius:6px;flex:1;height:12px;overflow:hidden}.progress-bar-fill{background:var(--color-brand);border-radius:6px;width:0%;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1),background-color .4s}.progress-bar-fill.complete{background:var(--color-success)}.progress-bar-content{color:var(--color-text);text-align:right;min-width:45px;font-size:1rem;font-weight:700}.reticle{pointer-events:none;width:60vw;max-width:300px;height:60vw;max-height:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.corner{border:0 solid #fffc;width:30px;height:30px;transition:all .3s;position:absolute}.corner.tl{border-top-width:4px;border-left-width:4px;border-top-left-radius:12px;top:0;left:0}.corner.tr{border-top-width:4px;border-right-width:4px;border-top-right-radius:12px;top:0;right:0}.corner.bl{border-bottom-width:4px;border-left-width:4px;border-bottom-left-radius:12px;bottom:0;left:0}.corner.br{border-bottom-width:4px;border-right-width:4px;border-bottom-right-radius:12px;bottom:0;right:0}.recording .corner{border-color:var(--color-success);box-shadow:0 0 15px #10b98180}#toast-container{pointer-events:none;flex-direction:column;align-items:center;gap:.5rem;width:100%;display:flex;position:absolute;bottom:2rem;left:0}.toast{background:var(--color-error);color:#fff;border-radius:999px;padding:.8rem 1.5rem;font-weight:600;transition:opacity .3s,transform .3s;animation:.3s ease-out slideUp;box-shadow:0 4px 6px #0000001a}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#segment-ring{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0}@keyframes snap-flash{0%{border-color:#fff;box-shadow:0 0 20px #ffffffe6}to{border-color:var(--color-success);box-shadow:0 0 15px #10b98180}}.recording.snap-flash .corner{animation:.5s ease-out forwards snap-flash}.theme-toggle-btn{z-index:100;background:var(--color-panel-bg);border:1px solid var(--color-panel-border);color:var(--color-text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .2s,background .2s;display:flex;position:fixed;top:1rem;right:1rem;box-shadow:0 2px 4px #0000001a}.theme-toggle-btn:hover{transform:scale(1.05)}.theme-toggle-btn:active{transform:scale(.95)}.theme-toggle-btn svg{fill:none;width:24px;height:24px}.bubble-level-container{pointer-events:none;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;top:1rem;left:1rem}.bubble-level{background:var(--color-panel-bg);border:1px solid var(--color-panel-border);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex;position:relative;box-shadow:0 2px 4px #0000001a}.bubble-level:before{content:"";border:2px dashed var(--color-text);opacity:.35;border-radius:50%;width:20px;height:20px;position:absolute}.bubble-dot{background:var(--color-success);border-radius:50%;width:12px;height:12px;transition:transform .1s ease-out,background .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 5px #00000080}.bubble-dot.tilt-error{background:var(--color-error)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{width:90%;max-width:400px;padding:2rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:translateY(20px)}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-content h2{color:var(--color-brand);margin-top:0;margin-bottom:.5rem}.modal-content input{border:1px solid var(--color-panel-border);background:var(--color-bg);width:100%;color:var(--color-text);box-sizing:border-box;border-radius:8px;margin-top:1rem;margin-bottom:1.5rem;padding:12px;font-family:inherit;font-size:1rem}.modal-content input:focus{border-color:var(--color-brand);outline:none;box-shadow:0 0 0 2px #10b98133}.modal-actions{gap:12px;display:flex}.modal-actions button{flex:1;margin-top:0}