:root{--border:#ddd;--border-strong:#bbb;--radius:8px;--surface-1:#f5f5f4;--surface-2:#fff;--text-primary:#1a1a1a;--text-secondary:#666;--text-muted:#999;--bg-accent:#e6f1fb;--border-accent:#378add;--text-accent:#185fa5;--fill-accent:#378add;--fill-danger:#e24b4a;--on-danger:#fff;--text-danger:#a32d2d;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--surface-1);color:var(--text-primary);margin:0;font-family:-apple-system,Hiragino Kaku Gothic ProN,sans-serif}#root{min-height:100svh}.sm-page{flex-direction:column;gap:28px;max-width:900px;margin:0 auto;padding:2.5rem 2rem 3rem;display:flex}.sm-header{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.sm-header-logo{width:auto;height:42px;display:block}.sm-header-tagline{color:var(--text-secondary);margin:0;font-size:13px}.sm-app{flex-wrap:wrap;gap:24px;display:flex}.sm-sidebar{background:var(--surface-2);border:.5px solid var(--border);border-radius:14px;flex-direction:column;flex-shrink:0;align-self:flex-start;gap:18px;width:210px;padding:20px;display:flex;box-shadow:0 1px 2px #0000000a}.sm-label{letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px;font-size:11px;font-weight:600}.sm-btn-row{flex-wrap:wrap;gap:6px;display:flex}.sm-btn{border-radius:var(--radius);border:.5px solid var(--border-strong);background:var(--surface-2);cursor:pointer;color:var(--text-primary);align-items:center;gap:5px;padding:6px 14px;font-size:13px;transition:background-color .15s,border-color .15s,color .15s,transform .1s;display:inline-flex}.sm-btn:hover:not(:disabled){border-color:var(--fill-accent);background:var(--surface-1)}.sm-btn:active:not(:disabled){transform:scale(.97)}.sm-btn.active{border:2px solid var(--border-accent);background:var(--bg-accent);color:var(--text-accent);padding:5px 13px}.sm-btn:disabled{opacity:.4;cursor:not-allowed}.sm-btn.sm-danger{color:var(--text-danger)}.sm-btn.sm-danger:hover:not(:disabled){border-color:var(--fill-danger);background:#fdf1f1}.sm-upload-label{border-style:dashed;justify-content:center;width:100%}.sm-thumb-list{flex-wrap:wrap;gap:8px;display:flex}.sm-empty{color:var(--text-muted);font-size:12px}.sm-thumb{border-radius:var(--radius);border:.5px solid var(--border);cursor:grab;background:var(--surface-2);touch-action:none;width:52px;height:52px;transition:transform .15s,box-shadow .15s;position:relative;overflow:visible}.sm-thumb:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000001f}.sm-thumb img{object-fit:cover;border-radius:var(--radius);width:100%;height:100%}.sm-del{background:var(--fill-danger);width:17px;height:17px;color:var(--on-danger);cursor:pointer;border:1.5px solid var(--surface-2);border-radius:50%;justify-content:center;align-items:center;transition:transform .1s;display:flex;position:absolute;top:-5px;right:-5px}.sm-del:hover{transform:scale(1.12)}.sm-crop-trigger{background:var(--fill-accent);color:#fff;cursor:pointer;border:1.5px solid var(--surface-2);border-radius:50%;justify-content:center;align-items:center;width:17px;height:17px;transition:transform .1s;display:flex;position:absolute;bottom:-5px;left:-5px}.sm-crop-trigger:hover{transform:scale(1.12)}.sm-main{background:var(--surface-1);border:.5px solid var(--border);border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;min-width:300px;padding:2.5rem;display:flex}.sm-mockup{border:.5px solid var(--border-strong);transition:width .2s,height .2s;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000f,0 12px 28px -12px #14141e59}.sm-mockup:before{content:"";pointer-events:none;background-image:linear-gradient(135deg,#ffffff8c 0%,#fff0 32% 68%,#00000012 100%),repeating-linear-gradient(100deg,#ffffff0d 0 1px,#00000006 2px 3px);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff73}.sm-mockup--macbook{background:linear-gradient(160deg,#f6f7f8 0%,#e2e4e6 45%,#cfd2d5 100%);border-radius:15px}.sm-mockup--macbook:after,.sm-mockup--surface:after{content:"";pointer-events:none;background:#00000029;border-radius:2px;height:3px;position:absolute;bottom:0;left:6%;right:6%}.sm-mockup--surface{background:linear-gradient(160deg,#eef0f1 0%,#d6d9db 45%,#c1c5c8 100%);border-radius:5px}.sm-mockup--ipad{background:linear-gradient(160deg,#f7f7f8 0%,#e4e5e7 50%,#d4d5d7 100%);border-radius:18px}.sm-mockup--iphone-17,.sm-mockup--iphone-17pro{background:linear-gradient(160deg,#f5f5f6 0%,#e0e1e3 45%,#cbccce 100%);border-radius:15px}.sm-camera-bump{background:linear-gradient(155deg,#dcddde,#c0c2c5);border-radius:7px;flex-direction:column;justify-content:space-evenly;align-items:center;width:15px;height:26px;padding:3px 0;display:flex;position:absolute;top:5%;left:8%;box-shadow:0 .5px 1.5px #0003,inset 0 0 0 1px #fff6}.sm-camera-island{background:linear-gradient(155deg,#e6e7e9,#c7c9cc);border-radius:10px;flex-direction:column;justify-content:space-evenly;align-items:center;width:20px;height:38px;padding:5px 0;display:flex;position:absolute;top:6px;left:6px;box-shadow:0 .5px 1.5px #00000038,inset 0 0 0 1px #fff6}.sm-camera-plateau{background:linear-gradient(155deg,#eef0f1 0%,#d5d7da 100%);border-radius:14px;height:30%;position:absolute;top:6px;left:6px;right:6px;box-shadow:0 .5px 1.5px #0003,inset 0 0 0 1px #fff6}.sm-camera-plateau .sm-lens{width:13px;height:13px;position:absolute}.sm-camera-plateau .sm-lens--tri-1{top:12%;left:14%}.sm-camera-plateau .sm-lens--tri-2{top:50%;left:14%}.sm-camera-plateau .sm-lens--tri-3{top:31%;left:42%}.sm-camera-plateau .sm-lens--plateau-flash{width:5px;height:5px;top:10%;left:auto;right:8%}.sm-lens{background:radial-gradient(circle at 35% 35%,#6b6f75,#0b0c0d 75%);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 1.5px #ffffff26}.sm-lens--main{width:10px;height:10px}.sm-lens--flash{background:radial-gradient(circle at 35% 35%,#d9e0ec,#97a1b3 70%);width:5px;height:5px;box-shadow:0 0 0 1px #fff3}.sm-logo{color:var(--text-muted);opacity:.7;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sm-placed{cursor:move;touch-action:none;outline-offset:3px;transform-origin:50%;border-radius:4px;outline:2px solid #0000;transition:outline-color .12s;position:absolute}.sm-placed.selected{outline-color:var(--border-accent)}.sm-placed img{object-fit:contain;pointer-events:auto;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%}.sm-x{background:var(--fill-danger);width:19px;height:19px;color:var(--on-danger);cursor:pointer;border:1.5px solid var(--surface-2);border-radius:50%;justify-content:center;align-items:center;transition:transform .1s;display:none;position:absolute;top:-9px;right:-9px}.sm-x:hover{transform:scale(1.12)}.sm-rs{background:var(--fill-accent);border:1.5px solid var(--surface-2);cursor:nwse-resize;touch-action:none;border-radius:50%;width:13px;height:13px;transition:transform .1s;display:none;position:absolute;bottom:-7px;right:-7px}.sm-rs:hover{transform:scale(1.2)}.sm-rotate{background:var(--fill-accent);border:1.5px solid var(--surface-2);cursor:grab;touch-action:none;border-radius:50%;width:13px;height:13px;transition:transform .1s;display:none;position:absolute;top:-26px;left:50%;transform:translate(-50%)}.sm-rotate:before{content:"";background:var(--border-strong);width:1px;height:13px;position:absolute;top:100%;left:50%;transform:translate(-50%)}.sm-rotate:hover{transform:translate(-50%)scale(1.2)}.sm-placed.selected .sm-x,.sm-placed.selected .sm-rs,.sm-placed.selected .sm-rotate{display:flex}.sm-save{background:var(--fill-accent);color:#fff;border:none;justify-content:center;padding:8px 20px;font-weight:600;box-shadow:0 4px 12px -4px #378add99}.sm-save:hover:not(:disabled){background:var(--text-accent);border:none}.sm-save:disabled{box-shadow:none}.sm-footer{text-align:center;color:var(--text-secondary);margin:8px 0 0;font-family:Rosario,sans-serif;font-size:14px}.sm-footer-brand{color:#18016c;font-weight:700}.sm-footer-note{max-width:480px;color:var(--text-muted);margin:8px auto 0;font-size:10.5px;line-height:1.6}.sm-drag-preview{z-index:50;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 12px #0000004d);opacity:.9;width:56px;height:56px;position:fixed;transform:translate(-50%,calc(-100% - 16px))}.sm-save-modal-backdrop{z-index:100;background:#14141999;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.sm-save-modal{background:var(--surface-2);border-radius:16px;flex-direction:column;align-items:center;gap:14px;max-width:92vw;max-height:88vh;padding:20px;display:flex;overflow-y:auto;box-shadow:0 20px 50px #00000059}.sm-save-modal-hint{color:var(--text-secondary);text-align:center;margin:0;font-size:13px}.sm-save-modal-img{border:.5px solid var(--border);border-radius:8px;max-width:100%;max-height:60vh}.sm-save-modal-actions{gap:8px;display:flex}.sm-crop-modal-backdrop{z-index:100;background:#14141999;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.sm-crop-modal{background:var(--surface-2);border-radius:16px;flex-direction:column;align-items:center;gap:14px;max-width:92vw;max-height:88vh;padding:20px;display:flex;overflow-y:auto;box-shadow:0 20px 50px #00000059}.sm-crop-stage{touch-action:none;background-image:linear-gradient(45deg,#0000000f 25%,#0000 25%),linear-gradient(-45deg,#0000000f 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0000000f 75%),linear-gradient(-45deg,#0000 75%,#0000000f 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:4px;position:relative;overflow:hidden}.sm-crop-img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.sm-crop-shade{pointer-events:none;background:#00000073;position:absolute;inset:0}.sm-crop-box{box-shadow:0 0 0 1px var(--fill-accent);cursor:move;touch-action:none;border:1.5px solid #fff;position:absolute}.sm-crop-handle{background:var(--fill-accent);touch-action:none;border:1.5px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute}.sm-crop-handle--nw{cursor:nwse-resize;top:-8px;left:-8px}.sm-crop-handle--ne{cursor:nesw-resize;top:-8px;right:-8px}.sm-crop-handle--sw{cursor:nesw-resize;bottom:-8px;left:-8px}.sm-crop-handle--se{cursor:nwse-resize;bottom:-8px;right:-8px}