:root{color-scheme:light;font-family:Sora,Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at top left,rgba(255,197,123,.22),transparent 24%),radial-gradient(circle at top right,rgba(128,179,255,.22),transparent 28%),#f3efe8;color:#172032;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel: rgba(255, 253, 248, .84);--panel-border: rgba(31, 38, 52, .08);--panel-shadow: 0 24px 60px rgba(33, 39, 52, .1);--text-muted: #5f6877;--accent: #1f5eff;--accent-soft: rgba(31, 94, 255, .08)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.app-shell{position:relative;height:100vh;overflow:hidden;isolation:isolate}.eyebrow{margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted)}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;letter-spacing:-.05em}h2{font-size:1rem;letter-spacing:-.03em}.panel-copy,.stage-copy,.section-caption{color:var(--text-muted);line-height:1.5;font-size:.95rem}.app-background-glow,.app-background-grid,.app-background-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.app-background-glow{background:radial-gradient(circle at 14% 14%,rgba(255,255,255,.48),transparent 24%),radial-gradient(circle at 84% 12%,rgba(255,255,255,.24),transparent 20%),radial-gradient(circle at 50% 76%,rgba(22,32,50,.18),transparent 38%)}.app-background-grid{background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(180deg,#00000029,#0000007a 18%,#00000085 82%,#0000002e);mask-image:linear-gradient(180deg,#00000029,#0000007a 18%,#00000085 82%,#0000002e);opacity:.9}.app-background-vignette{background:radial-gradient(circle at center,transparent 48%,rgba(12,18,30,.08) 100%),linear-gradient(180deg,#070b120f,#070b1229)}.app-logo{position:absolute;top:24px;left:24px;z-index:5;color:#f8fafc;font-size:1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 10px 24px rgba(10,16,26,.28);pointer-events:none}.overlay-layer{position:absolute;z-index:4;pointer-events:none}.overlay-left{top:60px;left:24px;bottom:18px;width:min(290px,calc(100vw - 48px));overflow:hidden;background:transparent;box-shadow:none;outline:none}.overlay-left-scroll{height:100%;display:grid;align-content:start;gap:10px;overflow-y:auto;overflow-x:hidden;padding:30px 2px 30px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 34px,rgba(0,0,0,1) calc(100% - 34px),rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#0000 0,#000 34px,#000 calc(100% - 34px),#0000);mask-mode:alpha}.overlay-left-scroll::-webkit-scrollbar{width:0;height:0}.overlay-bottom{left:50%;bottom:24px;width:auto;max-width:calc(100vw - 48px);transform:translate(-50%)}.floating-card{position:relative;display:grid;gap:10px;padding:14px;pointer-events:auto;border-radius:20px;border:1px solid rgba(255,255,255,.26);background:linear-gradient(180deg,#ffffffc7,#f7f3ed8f),#fffdf89e;-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px #ffffff8a}.floating-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 42%);pointer-events:none}.card-meta{color:var(--text-muted);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}.control-group{display:grid;gap:10px}.control-group+.control-group{padding-top:14px;border-top:1px solid rgba(31,38,52,.08)}.upload-field{display:grid;gap:6px;font-weight:600;justify-items:center;font-size:.92rem}.upload-field input[type=file]{width:100%;max-width:100%;display:block;border:1px dashed rgba(31,38,52,.16);background:#ffffffb3;border-radius:14px;padding:10px;color:var(--text-muted);overflow:hidden;font-size:.86rem}.upload-field input[type=file]::file-selector-button{margin-right:10px;border:0;border-radius:10px;padding:8px 12px;background:#17203214;color:#172032;font-weight:600}.secondary-button,.ghost-button,.chip,.segment{border:0;transition:transform .16s ease,background-color .16s ease,opacity .16s ease,box-shadow .16s ease}.secondary-button{width:100%;min-height:42px;border-radius:14px;background:linear-gradient(135deg,#202942,#0e1524);color:#f8fafc;font-weight:600;box-shadow:0 18px 38px #0c121e2e;justify-self:center;font-size:.92rem}.secondary-button:disabled{opacity:.65;cursor:wait}.ghost-button{padding:0;background:none;color:var(--text-muted);font-size:.82rem}.section-title-row{display:flex;align-items:center;justify-content:space-between}.device-grid{display:grid;grid-template-columns:1fr;gap:8px}.chip{display:grid;gap:3px;align-content:start;text-align:left;width:100%;padding:10px 12px;min-height:62px;border-radius:15px;background:#f7f4efeb;border:1px solid rgba(31,38,52,.08);font-size:.92rem}.chip span{color:var(--text-muted);font-size:.78rem}.chip-active{background:linear-gradient(160deg,#1f5eff1f,#fffffff2);box-shadow:inset 0 0 0 1px #1f5eff33;transform:translateY(-1px)}.segmented-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.segment{min-height:38px;border-radius:12px;background:#f8f5f0db;color:var(--text-muted);text-transform:capitalize;font-size:.86rem}.segment-active{background:#172032;color:#fffdf7}.range-field{display:grid;gap:6px}.range-field span{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.84rem}.range-field em{color:var(--text-muted);font-style:normal}.range-field input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,#1f5eff61,#1f5eff14)}.range-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#172032;border:2px solid #fff;box-shadow:0 5px 12px #16203226}.range-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#172032;box-shadow:0 5px 12px #16203226}.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.color-field{display:grid;gap:6px;font-weight:600;font-size:.84rem}.color-field input[type=color]{width:100%;min-height:42px;border:0;border-radius:12px;background:transparent}.stage-shell{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.stage-viewport{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;overflow:hidden}.stage-viewport-rotatable{cursor:grab;touch-action:none}.stage-viewport-rotatable:active{cursor:grabbing}.preview-canvas{position:relative;display:grid;place-items:center;flex:0 0 auto}.stage-artboard{position:relative;overflow:visible;will-change:transform}.device-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;perspective:1800px;transform-style:preserve-3d}.background-picker{display:grid;justify-items:center;gap:0;pointer-events:auto}.background-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.background-swatch{display:grid;justify-items:center;gap:15px;width:72px;padding:0;border:0;background:transparent;transition:transform .22s cubic-bezier(.22,1,.36,1)}.background-swatch-fill{display:block;width:56px;height:56px;border-radius:999px;background:linear-gradient(145deg,#ffffffeb,#e8ecf4d6);overflow:hidden;box-shadow:0 10px 24px #111a281f,inset 0 1px #ffffff8c;transform:scale(1);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.background-swatch-label{color:#f8fafcd1;font-size:.68rem;font-weight:600;letter-spacing:.03em;line-height:1;text-align:center;transition:color .18s ease,transform .22s cubic-bezier(.22,1,.36,1),opacity .18s ease}.background-swatch-transparent .background-swatch-fill{background:linear-gradient(145deg,#fffffff0,#e9eef6e0),linear-gradient(45deg,rgba(168,180,198,.32) 25%,transparent 25%),linear-gradient(-45deg,rgba(168,180,198,.32) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(168,180,198,.32) 75%),linear-gradient(-45deg,transparent 75%,rgba(168,180,198,.32) 75%);background-size:100% 100%,12px 12px,12px 12px,12px 12px,12px 12px;background-position:0 0,0 0,0 6px,6px -6px,-6px 0}.background-swatch-active{transform:translateY(-2px)}.background-swatch-active .background-swatch-fill{animation:swatch-select .26s cubic-bezier(.22,1,.36,1);box-shadow:0 0 0 2px #fffffff0,0 0 0 7px #ffffff29,0 12px 26px #111a282e,inset 0 1px #ffffff8c;transform:scale(1.06)}.background-swatch-active .background-swatch-label{color:#fffffffa;transform:translateY(1px)}@keyframes swatch-select{0%{transform:scale(.94)}60%{transform:scale(1.08)}to{transform:scale(1.06)}}.device-wrapper{position:relative;transform-style:preserve-3d;transition:transform .18s ease}.device-shadow{position:absolute;left:50%;top:calc(100% - 34px);transform:translate(-50%) translateZ(-180px) rotateX(90deg);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(9,14,24,.28),rgba(9,14,24,.04) 65%,transparent 78%);filter:blur(18px);pointer-events:none}.device-body{position:relative;transform-style:preserve-3d}.device-edge-shell{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;pointer-events:none}.device-edge-slice{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--device-radius);background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 18%,rgba(0,0,0,.1) 100%),var(--device-side);box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #00000024;backface-visibility:hidden}.device-side-button,.device-face,.device-side{position:absolute;backface-visibility:hidden}.device-side-button{width:var(--button-thickness);border-radius:var(--button-radius);background:linear-gradient(180deg,#f8f8f9f2,#777b83f2);box-shadow:inset 0 1px #ffffff59,0 1px 2px #00000038;pointer-events:none;z-index:2}.device-side-button-left{left:calc(var(--button-thickness) / -2);transform:rotateY(-90deg) translateZ(calc(var(--button-thickness) / 2))}.device-side-button-right{right:calc(var(--button-thickness) / -2);transform:rotateY(90deg) translateZ(calc(var(--button-thickness) / 2))}.device-face{top:0;right:0;bottom:0;left:0;border-radius:var(--device-radius)}.device-front{transform:translateZ(calc(var(--device-depth) / 2))}.device-back{transform:rotateY(180deg) translateZ(calc(var(--device-depth) / 2));background:radial-gradient(circle at 24% 18%,rgba(255,255,255,.22),transparent 18%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 36%),var(--device-back);box-shadow:inset 0 1px #fff3,inset 0 -18px 30px #0000002e,0 25px 40px #0000001f;overflow:hidden;pointer-events:none}.device-back-reflection{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 20%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.08),transparent 28%)}.device-back-logo{position:absolute;left:50%;top:50%;width:56px;height:66px;transform:translate(-50%,-50%);background:radial-gradient(circle at 32% 34%,rgba(255,255,255,.22),rgba(255,255,255,.06) 44%,transparent 45%),#ffffff14;box-shadow:inset 0 1px #ffffff2e,0 16px 30px #0000001a;clip-path:path("M28 0 C21 8 16 17 16 26 C16 34 20 41 24 46 C18 48 12 52 12 58 C12 64 17 66 28 66 C39 66 44 64 44 58 C44 52 38 48 32 46 C36 41 40 34 40 26 C40 17 35 8 28 0 Z")}.device-back-camera-plate{position:absolute;pointer-events:none}.device-back-camera-plate-iphone{top:18px;left:18px;width:112px;height:118px;border-radius:32px;background:linear-gradient(180deg,#ffffff2e,#ffffff08),#433f3a38;box-shadow:inset 0 1px #ffffff2e,0 16px 24px #0000001f}.device-back-camera-plate-galaxy{top:22px;left:26px;width:132px;height:170px}.device-back-camera-plate-tablet{top:20px;left:20px;width:54px;height:54px;border-radius:18px;background:#31353c2e;box-shadow:inset 0 1px #ffffff24,0 10px 18px #0000001f}.device-back-lens,.device-back-flash,.device-back-sensor,.device-back-mic{position:absolute;border-radius:50%}.device-back-lens{background:radial-gradient(circle at 35% 35%,#7b8cabb3,#03060bf2 55%),#05070b;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 2px #0000002e,0 8px 16px #00000024}.lens-iphone{width:34px;height:34px}.lens-iphone-top-left{top:12px;left:12px}.lens-iphone-top-right{top:12px;right:14px}.lens-iphone-bottom-left{bottom:14px;left:22px}.device-back-flash-iphone{width:16px;height:16px;top:24px;right:18px;background:radial-gradient(circle at 35% 35%,#fffffff0,#f0e2a9b8 52%,#bcb27980);box-shadow:0 0 0 2px #ffffff29}.device-back-sensor-iphone{width:14px;height:14px;right:19px;bottom:24px;background:radial-gradient(circle at 35% 35%,#7f9bafd1,#121a25f5 58%);box-shadow:0 0 0 2px #ffffff1f}.device-back-mic-iphone{width:8px;height:8px;right:28px;bottom:49px;background:#272a2feb;box-shadow:0 0 0 1px #ffffff14}.lens-galaxy{width:38px;height:38px;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 3px #30353c1f,0 10px 16px #0000001f}.lens-galaxy-top-left{top:0;left:0}.lens-galaxy-top-right{top:46px;left:0}.lens-galaxy-bottom-left{top:92px;left:0}.lens-galaxy-bottom-right{top:30px;left:56px;width:30px;height:30px}.device-back-flash-galaxy{top:98px;left:62px;width:14px;height:14px;background:radial-gradient(circle at 35% 35%,#fffffff5,#f2e6aabd 52%,#c7bc8294);box-shadow:0 0 0 2px #ffffff29}.lens-tablet{top:10px;right:10px;bottom:10px;left:10px}.device-frame{transform-style:preserve-3d;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden}.device-frame:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 30%,rgba(255,255,255,.08));pointer-events:none}.device-rim{position:absolute;border:1px solid;box-shadow:inset 0 0 0 1px #ffffff0f,0 0 0 1px #00000014}.device-screen{position:absolute;overflow:hidden;background:linear-gradient(180deg,#121b2c66,#02060ce6),#0b1019;box-shadow:inset 0 0 0 1px #ffffff0a,inset 0 -18px 36px #0000004d;cursor:grab;touch-action:none}.device-screen:active{cursor:grabbing}.device-front:active{cursor:grabbing!important}.screen-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform-origin:center center;-webkit-user-select:none;user-select:none;pointer-events:none}.screen-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;align-content:start;gap:16px;padding:28px;background:radial-gradient(circle at top right,rgba(145,232,255,.2),transparent 32%),linear-gradient(180deg,#111c2e,#07111c);color:#f5f7fb}.placeholder-tag{width:fit-content;padding:8px 12px;border-radius:999px;background:#ffffff1a;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.screen-placeholder h3{font-size:clamp(1.5rem,2vw,2.4rem);line-height:1;letter-spacing:-.05em}.screen-placeholder p{color:#f5f7fbbf;max-width:28ch}.placeholder-cards{display:flex;flex-wrap:wrap;gap:10px}.placeholder-cards span{padding:10px 12px;border-radius:14px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);font-size:.88rem}.screen-noise{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,rgba(255,255,255,.04));pointer-events:none}.device-notch{position:absolute;top:18px;left:50%;transform:translate(-50%);background:#06090f;box-shadow:inset 0 1px #ffffff0f,0 5px 14px #00000040}.speaker-slot{position:absolute;left:50%;transform:translate(-50%);border-radius:999px;background:linear-gradient(180deg,#1e2837,#05070a)}.camera-hole{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7b8cabb3,#03060bf2 55%),#05070b;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 2px #00000040}.glass-sheen,.device-accent{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.glass-sheen{mix-blend-mode:screen}.device-accent{opacity:.1;filter:blur(12px)}@media (max-width: 1180px){.app-logo{top:18px;left:18px}.overlay-left{top:54px;left:18px;bottom:16px;width:min(276px,calc(100vw - 36px))}.overlay-bottom{bottom:18px;max-width:calc(100vw - 36px)}}@media (max-width: 980px){.overlay-left{width:min(276px,calc(100vw - 36px))}.overlay-bottom{max-width:calc(100vw - 36px)}}@media (max-width: 760px){.app-logo{top:16px;left:16px;font-size:.9rem;letter-spacing:.14em}.overlay-left{top:48px;left:16px;bottom:14px;right:auto;width:min(248px,calc(100vw - 32px))}.overlay-bottom{left:16px;right:16px;bottom:16px;max-width:none;transform:none}.floating-card{padding:13px;border-radius:18px}.overlay-left-scroll{gap:12px}.background-picker{gap:0}.background-swatch{width:66px}.background-swatch-fill{width:50px;height:50px}.background-swatch-label{font-size:.64rem}.stage-viewport{padding:16px}.device-grid,.color-grid,.background-card-body{grid-template-columns:1fr}}