*{box-sizing:border-box}html,body{background:radial-gradient(#2a2a3a 0%,#121214 100%);width:100%;height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.app-layout{justify-content:flex-start;align-items:center;gap:32px;width:100%;height:100vh;padding:16px 32px;display:flex;overflow:hidden}.phone-mockup{--phone-native-w:393;--phone-native-h:852;--phone-corner:54;--phone-bezel:6;--phone-top-bezel-h:48;--phone-bottom-bar-h:18;--notch-w:120;--notch-h:32;--phone-h:min(calc(var(--phone-native-h) * 1px), calc(100vh - 32px));--phone-w:calc(var(--phone-native-w) / var(--phone-native-h) * var(--phone-h));--scale:calc(var(--phone-h) / (var(--phone-native-h) * 1px));width:var(--phone-w);height:var(--phone-h);border-radius:calc(var(--phone-corner) * var(--scale));padding:calc(var(--phone-bezel) * var(--scale));background:linear-gradient(135deg,#2c2c2e 0%,#1a1a1c 50%,#2c2c2e 100%);border:1px solid #ffffff1f;flex-shrink:0;position:relative;box-shadow:0 0 0 1px #ffffff2e,0 0 0 3px #6e6e72,0 0 0 5px #0009,0 30px 80px #000000b3,0 10px 30px #00000080}.phone-frame{border-radius:calc((var(--phone-corner) - var(--phone-bezel)) * var(--scale));flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.phone-top-bezel{height:calc(var(--phone-top-bezel-h) * var(--scale));background:#000;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.notch-pill{background:#1a1a1c;transition:all .3s;box-shadow:inset 0 0 0 1px #ffffff0f}.notch--dynamic-island{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:calc(var(--notch-h) / 2 * var(--scale))}.notch--classic{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:calc(16 * var(--scale))}.notch--punch-hole{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:50%}.notch--teardrop{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:50%/60% 60% 40% 40%}.phone-screen{background:#000;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;container-type:size}.phone-home-bar{height:calc(var(--phone-bottom-bar-h) * var(--scale));background:#000;flex-shrink:0;justify-content:center;align-items:center;display:flex}.phone-home-bar:after{content:"";width:calc(134 * var(--scale));height:calc(5 * var(--scale));background:#fff3;border-radius:100px}.phone-mockup:before{content:"";top:calc(200 * var(--scale));width:4px;height:calc(65 * var(--scale));background:linear-gradient(90deg,#4a4a4e,#5a5a5e);border-radius:0 4px 4px 0;position:absolute;right:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-mockup:after{content:"";top:calc(275 * var(--scale));width:4px;height:calc(55 * var(--scale));background:linear-gradient(90deg,#4a4a4e,#5a5a5e);border-radius:0 4px 4px 0;position:absolute;right:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-volume-up{top:calc(210 * var(--scale));width:4px;height:calc(45 * var(--scale));background:linear-gradient(270deg,#4a4a4e,#5a5a5e);border-radius:4px 0 0 4px;position:absolute;left:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-volume-down{top:calc(260 * var(--scale));width:4px;height:calc(45 * var(--scale));background:linear-gradient(270deg,#4a4a4e,#5a5a5e);border-radius:4px 0 0 4px;position:absolute;left:-4px;box-shadow:inset 0 1px #ffffff1a}.scene{background:#000;width:min(100cqw,56.25cqh);height:min(100cqh,177.778cqw);position:relative;overflow:hidden;container-type:size}.layer{will-change:transform;pointer-events:none;position:absolute;inset:0}.layer img,.layer video{top:var(--layer-inset,0px);left:var(--layer-inset,0px);object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100cqw;height:100cqh;display:block;position:absolute}.scene-frame{pointer-events:none;z-index:10;position:absolute;inset:0}.scene-frame img,.scene-frame video{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.scene-empty{color:#444;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:.78rem;display:flex;position:absolute;inset:0}.scene-empty p{margin:0}.ui-panel{background:#1e1e24;border:1px solid #2c2c30;border-radius:16px;flex-direction:column;flex:1;max-width:480px;max-height:calc(100vh - 32px);padding:28px;display:flex;overflow-y:auto;box-shadow:0 8px 32px #0000004d}.panel-header{border-bottom:1px solid #2c2c30;flex-shrink:0;margin-bottom:24px;padding-bottom:16px}.panel-header h2{color:#e0e0e0;margin:0 0 4px;font-size:1.4rem;font-weight:600}.panel-subtitle{color:#666;margin:0;font-size:.85rem}.panel-body{flex:1}.control-group{margin-bottom:24px}.control-label{color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.8rem;font-weight:500;display:block}.label-hint{text-transform:none;letter-spacing:0;color:#555;margin-left:4px;font-size:.72rem;font-weight:400}.select-wrapper{position:relative}.phone-select{color:#d0d0d0;appearance:none;cursor:pointer;background:#2a2a30;border:1px solid #3a3a40;border-radius:10px;width:100%;padding:12px 40px 12px 14px;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.phone-select:hover{border-color:#4a4a50}.phone-select:focus{border-color:#3880ff;outline:none;box-shadow:0 0 0 3px #3880ff33}.phone-select option{color:#d0d0d0;background:#2a2a30}.select-arrow{pointer-events:none;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.phone-info{color:#666;gap:16px;margin-top:12px;font-size:.82rem;display:flex}.phone-info span{background:#25252a;border-radius:6px;padding:4px 10px;font-family:SF Mono,Fira Code,monospace}.layers-list{flex-direction:column;gap:6px;display:flex}.layer-row{background:#25252a;border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;display:flex}.layer-speed{border-top:1px solid #2a2a30;flex-basis:100%;align-items:center;gap:4px;margin-top:2px;padding:4px 0 2px 40px;display:flex}.speed-label{color:#999;margin-right:4px;font-size:.7rem}.speed-btn{color:#ccc;cursor:pointer;background:#2a2a30;border:none;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;font-size:.95rem;line-height:1;transition:background .15s;display:flex}.speed-btn:hover{background:#3a3a40}.speed-input{color:#888;text-align:center;appearance:textfield;background:#1c1c20;border:1px solid #333;border-radius:4px;width:44px;padding:2px 4px;font-family:SF Mono,Fira Code,monospace;font-size:.75rem}.speed-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.speed-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.speed-input:focus{border-color:#3880ff;outline:none}.loop-btn{color:#666;cursor:pointer;background:#1c1c20;border:1px solid #333;border-radius:4px;justify-content:center;align-items:center;width:26px;height:22px;margin-left:6px;font-size:.85rem;line-height:1;transition:background .15s,color .15s,border-color .15s;display:flex}.loop-btn:hover{color:#aaa;background:#2a2a30}.loop-btn.is-on{color:#5fa9ff;background:#1a3050;border-color:#2c5485}.loop-btn.is-on:hover{background:#1f3a60}.adj-btn{color:#888;cursor:pointer;background:#1c1c20;border:1px solid #333;border-radius:4px;justify-content:center;align-items:center;width:26px;height:22px;margin-left:4px;font-size:.7rem;font-style:italic;line-height:1;transition:background .15s,color .15s,border-color .15s;display:flex}.adj-btn:hover{color:#ccc;background:#2a2a30}.adj-btn.is-on{color:#c9a4ff;background:#3a1f4d;border-color:#6a3aa0}.adj-btn.is-on:hover{background:#4a2a5e}.layer-adjust{border-top:1px solid #2a2a30;flex-direction:column;flex-basis:100%;gap:4px;margin-top:2px;padding:6px 0 4px 40px;display:flex}.adj-label{color:#c9a4ff;font-size:.7rem}.adj-hint{color:#777;margin-left:6px;font-size:.65rem}.adj-row{align-items:center;gap:6px;display:flex}.adj-name{color:#999;width:12px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}.adj-slider{accent-color:#9b6bd1;background:0 0;flex:1;height:14px}.adj-num{color:#aaa;text-align:center;appearance:textfield;background:#1c1c20;border:1px solid #333;border-radius:4px;width:44px;padding:2px 4px;font-family:SF Mono,Fira Code,monospace;font-size:.72rem}.adj-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.adj-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.adj-num:focus{border-color:#9b6bd1;outline:none}.adj-reset{color:#888;cursor:pointer;background:#1c1c20;border:1px solid #333;border-radius:4px;align-self:flex-end;padding:2px 8px;font-size:.65rem;transition:background .15s,color .15s}.adj-reset:hover{color:#ccc;background:#2a2a30}@font-face{font-family:Hedge Backwards Cap;src:url(/fonts/CapRegular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Hedge Backwards Cap;src:url(/fonts/CapRegItalics.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Hedge Backwards Cap;src:url(/fonts/CapBoldItalics.woff2)format("woff2");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Hedge Backwards Low;src:url(/fonts/LowRegular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Hedge Backwards Low;src:url(/fonts/LowRegItalics.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Hedge Backwards Low;src:url(/fonts/LowBoldItalics.woff2)format("woff2");font-weight:700;font-style:italic;font-display:swap}.bubble-overlay{top:var(--layer-inset,0px);left:var(--layer-inset,0px);pointer-events:none;width:100cqw;height:100cqh;position:absolute}.bubble{pointer-events:auto;color:#1a1a1a;text-align:center;white-space:pre-wrap;overflow-wrap:break-word;cursor:move;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:#fff;border:2px solid #1a1a1a;border-radius:18px;padding:10px 14px;font-family:Hedge Backwards Cap,Comic Sans MS,Segoe UI,system-ui,sans-serif;font-weight:400;line-height:1.25;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000040}.bubble:before,.bubble:after{content:"";width:0;height:0;position:absolute}.bubble:before{border-top:16px solid #1a1a1a;border-bottom:0 solid #0000;border-left:0 solid #0000;border-right:12px solid #0000;bottom:-16px;left:22%}.bubble:after{border-top:12px solid #fff;border-bottom:0 solid #0000;border-left:0 solid #0000;border-right:9px solid #0000;bottom:-12px;left:24%}.bubble.is-selected{outline-offset:3px;outline:2px dashed #3880ff}.control-label:has(.bubble-add-btn){align-items:center;display:flex}.bubble-add-btn{color:#ccc;cursor:pointer;background:#2a2a30;border:1px solid #444;border-radius:4px;margin-left:auto;padding:2px 10px;font-size:.72rem;transition:background .15s,color .15s}.bubble-add-btn:hover{color:#fff;background:#3880ff;border-color:#3880ff}.bubble-list{flex-direction:column;gap:4px;margin-top:6px;display:flex}.bubble-empty{color:#666;padding:6px 0;font-size:.75rem;font-style:italic}.bubble-item{cursor:pointer;background:#25252a;border:1px solid #0000;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;transition:background .15s,border-color .15s;display:flex}.bubble-item:hover{background:#2c2c32}.bubble-item.is-selected{background:#1a3050;border-color:#3880ff}.bubble-item-text{color:#ccc;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.78rem;overflow:hidden}.bubble-item-layer{color:#888;font-size:.68rem}.bubble-editor{background:#1c1c20;border:1px solid #2a2a30;border-radius:6px;flex-direction:column;gap:8px;margin-top:8px;padding:10px;display:flex}.bubble-text-input{color:#eee;box-sizing:border-box;white-space:pre-wrap;word-break:break-word;cursor:text;background:#25252a;border:1px solid #333;border-radius:4px;width:100%;min-height:60px;padding:6px 8px;font-family:inherit;font-size:.8rem}.bubble-text-input:focus{border-color:#3880ff;outline:none}.bubble-text-input:empty:before{content:attr(data-placeholder);color:#555;pointer-events:none}.bubble-row{align-items:center;gap:6px;display:flex}.bubble-row-label{color:#999;width:44px;font-size:.7rem}.bubble-layer-select{color:#ccc;background:#25252a;border:1px solid #333;border-radius:4px;flex:1;padding:4px 8px;font-size:.78rem}.bubble-layer-select:focus{border-color:#3880ff;outline:none}.bubble-slider{accent-color:#3880ff;flex:1;height:14px}.bubble-num{color:#aaa;text-align:center;appearance:textfield;background:#25252a;border:1px solid #333;border-radius:4px;width:44px;padding:2px 4px;font-family:SF Mono,Fira Code,monospace;font-size:.72rem}.bubble-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bubble-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bubble-num:focus{border-color:#3880ff;outline:none}.bubble-unit{color:#777;font-size:.7rem}.bubble-style-btn{color:#aaa;cursor:pointer;background:#25252a;border:1px solid #333;border-radius:4px;justify-content:center;align-items:center;width:28px;height:24px;padding:0;font-size:.78rem;transition:background .15s,color .15s,border-color .15s;display:flex}.bubble-style-btn:hover{color:#ccc;background:#2c2c32}.bubble-style-btn.is-on{color:#5fa9ff;background:#1a3050;border-color:#3880ff}.bubble-case-btn{width:auto;padding:0 10px;font-family:SF Mono,Fira Code,monospace;font-size:.72rem}.bubble-editor-footer{justify-content:space-between;gap:8px;display:flex}.bubble-done-btn{color:#fff;cursor:pointer;background:#2a4a8a;border:1px solid #3880ff;border-radius:4px;padding:4px 14px;font-size:.74rem;font-weight:500;transition:background .15s}.bubble-done-btn:hover{background:#3880ff}.bubble-delete-btn{color:#d66;cursor:pointer;background:#2a1c1c;border:1px solid #5a2a2a;border-radius:4px;padding:4px 12px;font-size:.72rem;transition:background .15s,color .15s}.bubble-delete-btn:hover{color:#fff;background:#5a2a2a}.layer-row--frame{background:#1f2330;border:1px dashed #3a4055;margin-bottom:4px}.layer-tag{text-transform:uppercase;letter-spacing:.05em;color:#8aa0c0;vertical-align:1px;background:#3a405566;border-radius:3px;margin-left:6px;padding:1px 6px;font-size:.62rem;font-weight:500;display:inline-block}.layer-thumb{background:#1a1a1e 50%/cover;border:1px solid #333;border-radius:4px;flex-shrink:0;width:32px;height:32px}.layer-thumb.has-image{border-color:#ffffff26}.layer-num{color:#777;text-align:center;background:#1c1c20;border-radius:4px;flex-shrink:0;min-width:38px;padding:2px 6px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}.layer-name{color:#bbb;flex:1;font-size:.85rem}.layer-reorder{flex-direction:column;gap:2px;margin-left:4px;display:flex}.reorder-btn{color:#888;cursor:pointer;background:#2a2a30;border:none;border-radius:3px;justify-content:center;align-items:center;width:20px;height:14px;font-size:.6rem;transition:background .15s,color .15s;display:flex}.reorder-btn:hover:not(:disabled){color:#fff;background:#3880ff}.reorder-btn:disabled{opacity:.3;cursor:default}.layer-btn{cursor:pointer;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:1.1rem;line-height:1;transition:background .15s;display:flex}.layer-btn--add{color:#fff;background:#3880ff}.layer-btn--add:hover{background:#5592ff}.layer-btn--clear{color:#ff6b6b;background:#3a2a2a}.layer-btn--clear:hover{background:#4a3030}.layer-scale{align-items:center;gap:4px;display:flex}.scale-btn{color:#ccc;cursor:pointer;background:#2a2a30;border:none;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;font-size:.95rem;line-height:1;transition:background .15s;display:flex}.scale-btn:hover{background:#3a3a40}.scale-btn--fine{color:#888;background:#232328;width:18px;height:18px;font-size:.7rem}.scale-btn--fine:hover{color:#ccc;background:#2c2c30}.scale-input{color:#888;text-align:center;appearance:textfield;background:#1c1c20;border:1px solid #333;border-radius:4px;width:44px;padding:2px 4px;font-family:SF Mono,Fira Code,monospace;font-size:.75rem}.scale-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.scale-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.scale-input:focus{border-color:#3880ff;outline:none}.scale-unit{color:#666;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}.reset-all-btn{color:#c66;cursor:pointer;background:#2a1f1f;border:1px solid #4a2a2a;border-radius:10px;width:100%;padding:9px 14px;font-family:inherit;font-size:.875rem;transition:background .2s,border-color .2s}.reset-all-btn:hover{color:#f88;background:#3a2222;border-color:#c44}.gyro-btn{color:#d0d0d0;cursor:pointer;background:#2a2a30;border:1px solid #3a3a40;border-radius:10px;width:100%;padding:10px 14px;font-family:inherit;font-size:.875rem;transition:background .2s,border-color .2s}.gyro-btn:hover:not(:disabled){background:#32323a;border-color:#4a4a50}.gyro-btn:disabled{opacity:.5;cursor:default}.scene-name-input{color:#d0d0d0;background:#2a2a30;border:1px solid #3a3a40;border-radius:10px;width:100%;padding:10px 14px;font-family:inherit;font-size:.95rem;transition:border-color .2s}.scene-name-input:focus{border-color:#3880ff;outline:none}.scene-name-input::placeholder{color:#555}.save-btn{color:#fff;cursor:pointer;background:#3880ff;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 14px;font-family:inherit;font-size:.95rem;font-weight:500;transition:background .2s;display:flex}.save-btn:hover:not(:disabled){background:#5592ff}.save-btn:disabled{opacity:.5;cursor:default}.save-btn-icon{font-size:1.1rem}.save-status{color:#888;text-align:center;margin-top:8px;font-family:SF Mono,Fira Code,monospace;font-size:.82rem}.saved-scenes-list{flex-direction:column;gap:8px;display:flex}.saved-scenes-empty{text-align:center;color:#555;border:1px dashed #2c2c30;border-radius:10px;padding:20px;font-size:.85rem}.scene-card{cursor:pointer;background:#25252a;border:1px solid #2c2c30;border-radius:10px;padding:12px 14px;transition:background .15s,border-color .15s,transform .1s}.scene-card:hover{background:#2a2a32;border-color:#3880ff;transform:translate(2px)}.scene-card:active{background:#222228;transform:translate(0)}.scene-card-name{color:#e0e0e0;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.9rem;font-weight:500;overflow:hidden}.scene-card-meta{align-items:center;gap:10px;margin-bottom:6px;display:flex}.scene-card-token{color:#888;letter-spacing:.05em;background:#1c1c20;border-radius:4px;padding:2px 6px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}.scene-card-date{color:#666;font-size:.7rem}.scene-card-detail{color:#777;font-size:.75rem}.scene-card.loading{opacity:.6;pointer-events:none}.app-version{color:#fff9;pointer-events:none;z-index:9999;background:#0006;border-radius:4px;padding:2px 6px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem;position:fixed;top:8px;right:12px}.hidden{display:none!important}