*{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;position:absolute;inset:0}.layer img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.scene-frame{pointer-events:none;z-index:10;position:absolute;inset:0}.scene-frame img{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;align-items:center;gap:8px;padding:6px 8px;display:flex}.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-name{color:#bbb;flex:1;font-size:.85rem}.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-val{color:#888;text-align:center;min-width:36px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}.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}.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}