:root{--ink:#272934;--muted:#92939e;--purple:#7b62d5;--line:#ececf1;--font:"Avenir Next","Segoe UI",Arial,sans-serif}*{box-sizing:border-box}body{color:var(--ink);font-family:var(--font);background:#fafafb;margin:0;font-size:13px}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #b7a3ff}button{background:0 0;border:0}a{color:inherit;text-decoration:none}svg{flex-shrink:0}button:hover{filter:brightness(.96)}.main-header{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:78px;padding:0 32px;display:flex}.brand{letter-spacing:-1px;align-items:center;font-family:Avenir Next,Segoe UI,Arial,sans-serif;font-size:23px;font-weight:800;display:flex}.brand-light{margin-left:.22em;font-weight:450}.brand-mark{color:#fff;background:#8066d5;border-radius:10px;place-items:center;width:35px;height:35px;margin-right:10px;display:grid}.beta{font:600 9px var(--font);letter-spacing:1px;color:#91879f;border:1px solid #e8e3ef;border-radius:4px;margin-left:13px;padding:4px 6px}.header-right{align-items:center;gap:30px;display:flex}.local-badge{color:#9999a3;align-items:center;gap:7px;font-size:11px;display:flex}.local-badge i,.tiny-dot{background:#a0b8a9;border-radius:50%;width:5px;height:5px;display:inline-block}.help-button{color:#777884;align-items:center;gap:8px;font-size:12px;display:flex}.app-body{min-height:calc(100dvh - 78px);display:flex}.sidebar{border-right:1px solid var(--line);background:#fff;flex-direction:column;flex-shrink:0;width:282px;padding:32px 23px 20px;display:flex}.eyebrow{letter-spacing:1.8px;color:#a09aa9;font-size:9px;font-weight:600}.sidebar-title h2{letter-spacing:-.7px;margin:12px 0 6px;font:750 21px Avenir Next,Segoe UI,Arial,sans-serif}.sidebar-title p{color:#9a99a4;margin:0 0 34px;font-size:12px}.section-label{color:#94939f;letter-spacing:1.4px;justify-content:space-between;margin-bottom:13px;font-size:9px;font-weight:650;display:flex}.section-label>span{background:#f5f4f8;border-radius:3px;padding:2px 4px;font-size:8px}.device-list{gap:10px;display:grid}.device-card{text-align:left;background:#fff;border:1px solid #eeedf2;border-radius:10px;align-items:center;gap:14px;width:100%;padding:16px 13px;display:flex;position:relative}.device-card.selected{background:#f7f4fd;border-color:#b4a1e9;box-shadow:0 0 0 2px #f9f7fd}.device-silhouette{border:2px solid #aaaab5;border-radius:5px;flex-shrink:0;width:29px;height:38px;margin:0 4px;padding:2px;position:relative}.device-silhouette:after{content:"";background:#aaaab5;width:8px;height:1px;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.device-silhouette.iphone{border-radius:6px;width:22px;height:40px;margin:0 7.5px}.device-silhouette.iphone:before{content:"";background:#aaaab5;border-radius:0 0 3px 3px;height:3px;position:absolute;top:0;left:5px;right:5px}.device-silhouette.mini{width:26px;height:35px;margin:0 5.5px}.selected .device-silhouette{border-color:var(--purple)}.device-text{gap:5px;display:grid}.device-text strong{font-size:11px;font-weight:650}.device-text small{color:#aaa6b2;font-size:8px}.device-text>span{color:#9c95aa;font-size:9px}.selected-check{color:#fff;background:#8a6ddc;border-radius:50%;place-items:center;width:15px;height:15px;display:grid;position:absolute;top:11px;right:10px}.settings-label{margin-top:30px}.setting-row{color:#797884;justify-content:space-between;align-items:center;min-height:44px;font-size:11px;display:flex}.segmented{background:#f5f4f7;border:1px solid #eeedf2;border-radius:6px;gap:3px;padding:3px;display:flex}.segmented button{color:#a5a0af;border-radius:4px;padding:4px 9px;display:flex}.segmented button.active{color:var(--purple);background:#fff;box-shadow:0 1px 4px #29223912}.turned{display:flex;transform:rotate(90deg)}select{color:#6f6b7d;background:#fff;border:1px solid #eceaf1;border-radius:6px;padding:7px 6px;font-size:10px}.switch{background:#d6d4dd;border-radius:10px;width:29px;height:17px;padding:3px;display:flex}.switch.on{background:#8b72d8}.switch span{background:#fff;border-radius:50%;width:11px;height:11px;transition:transform .15s}.switch.on span{transform:translate(12px)}.swatches{gap:11px;display:flex}.swatch{color:#8672b5;border:3px solid #fff;border-radius:50%;place-items:center;width:30px;height:30px;display:grid;box-shadow:0 0 0 1px #e7e5ed}.swatch.chosen{box-shadow:0 0 0 1.5px #a48ad9}.lavender{background-color:#eeebf5}.sand{background-color:#f1ebe2}.mist{background-color:#e5eeec}.dark{color:#ddd;background-color:#292b35}.sidebar-note{background:#f8f7fb;border:1px solid #f0eef5;border-radius:10px;margin-top:40px;padding:16px 13px}.note-icon{color:#a596c5;margin-bottom:12px;display:block}.sidebar-note strong{font-size:10px;font-weight:550}.sidebar-note p{color:#a09ba9;margin:8px 0 13px;font-size:10px;line-height:1.8}.sidebar-note button{color:#967bc7;align-items:center;gap:9px;padding:0;font-size:10px;display:flex}.sidebar-footer{color:#b4b1bc;align-items:center;gap:7px;margin-top:auto;padding-top:28px;font-size:9px;display:flex}.workspace{background:#fafafb;flex-direction:column;flex:1;min-width:0;height:calc(100dvh - 78px);min-height:650px;padding:24px 28px 0;display:flex}.url-toolbar{gap:10px;margin-bottom:22px;display:flex}.url-field{color:#a29aac;background:#fff;border:1px solid #e5e3ec;border-radius:8px;flex:1;align-items:center;gap:12px;min-width:0;padding:0 14px;display:flex}.url-field input{color:#514b61;background:0 0;border:0;outline:none;width:100%;height:44px;font-size:12px}.url-field:focus-within{border-color:#a68bdc;box-shadow:0 0 0 3px #9278cd10}.url-hint{letter-spacing:.5px;background:#f7f6fa;border:1px solid #eeedf2;border-radius:3px;padding:3px 5px;font-size:8px}.primary{color:#fff;background:#8265cc;border-radius:7px;justify-content:center;align-items:center;gap:18px;min-height:44px;padding:0 20px;font-size:11px;font-weight:500;display:flex;box-shadow:0 2px 3px #55447810}.preview-toolbar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px;display:flex}.preview-title{color:#96909f;align-items:center;gap:10px;font-size:10px;display:flex}.preview-title strong{color:#5d5868;font-weight:600}.live-dot{background:#84b39a;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #84b39a12}.toolbar-divider{background:#e4e1ea;width:1px;height:13px;display:inline-block}.orientation-label{color:#9b92aa;background:#f0eef5;border-radius:4px;margin-left:2px;padding:4px 7px;font-size:8px}.preview-actions{color:#8a8495;align-items:center;gap:14px;display:flex}.preview-actions button{align-items:center;gap:7px;padding:2px;font-size:10px;display:flex}.canvas{background-image:radial-gradient(#93839b26 .7px,#0000 .7px);background-size:16px 16px;border:1px solid #e6e1ed;border-radius:12px;flex:1;min-height:0;transition:background-color .25s;position:relative;overflow:auto}.canvas-caption{letter-spacing:1.3px;color:#aaa1b5;pointer-events:none;justify-content:space-between;font-size:8px;display:flex;position:absolute;top:20px;left:22px;right:22px}.device-position{flex-direction:column;justify-content:center;align-items:center;width:max-content;min-width:100%;min-height:100%;padding:50px 40px 25px;display:flex}.device-size{flex-shrink:0;position:relative}.device-frame{transform-origin:0 0;background:#111215;border-radius:58px;position:absolute;box-shadow:0 24px 50px -16px #32274466,0 4px 8px #32274425}.device-frame.with-frame{outline-offset:-2px;border:0;outline:2px solid #77747b;box-shadow:inset 0 0 0 5px #313136,0 24px 50px -16px #32274466,0 4px 8px #32274425}.device-screen{background:#fff;border-radius:27px;position:relative;overflow:hidden}.device-screen iframe{background:#fff;border:0;max-width:none;display:block}.camera{background:#202738;border:2px solid #17191d;border-radius:50%;width:7px;height:7px;position:absolute;top:13px;left:50%}.landscape-frame .camera{top:50%;left:12px}.hardware-button{background:#6c6971;border-radius:0 2px 2px 0;width:3px;height:65px;position:absolute;top:70px;right:-3px}.phone-frame{border-radius:59px}.phone-frame .device-screen{border-radius:45px}.phone-frame .camera{display:none}.notch{pointer-events:none;background:#111215;border-radius:0 0 20px 20px;width:170px;height:30px;position:absolute;top:0;left:50%;transform:translate(-50%)}.notch:after{content:"";background:#202738;border-radius:50%;width:9px;height:9px;position:absolute;top:9px;right:25px}.home-indicator{pointer-events:none;background:#11121577;border-radius:8px;width:125px;height:5px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.landscape-frame .notch{border-radius:0 20px 20px 0;width:30px;height:170px;top:50%;left:0;transform:translateY(-50%)}.frameless,.frameless .device-screen{border-radius:3px}.device-caption{color:#a198ad;letter-spacing:.2px;align-items:center;gap:8px;margin-top:24px;font-size:9px;display:flex}.workspace-footer{color:#a29ba9;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;height:49px;font-size:9px;display:flex}.workspace-footer>span:first-child,.workspace-footer a{align-items:center;gap:7px;display:flex}.workspace-footer a{color:#9076b8}.footer-tag{color:#b5aebd;font-size:9px}.error{color:#a44456;background:#fff0f1;border-radius:5px;margin:-10px 0 15px;padding:10px;font-size:12px}.workspace:fullscreen,.workspace.expanded{width:100vw;height:100dvh;min-height:0;padding-top:22px}.workspace.expanded:not(:fullscreen){z-index:20;position:fixed;inset:0}.modal-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:40;background:#22203166;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.help-modal{background:#fff;border-radius:18px;max-width:530px;padding:32px;box-shadow:0 20px 80px #17121e33}.help-modal h2{font:700 24px Avenir Next,Segoe UI,Arial,sans-serif}.help-modal p{color:#89808f;font-size:13px;line-height:1.8}.help-modal .primary{margin-top:22px}.help-modal{max-height:90dvh;overflow:auto}@media (min-width:1500px){.sidebar{width:305px;padding:36px 28px}.workspace{padding:28px 36px 0}.device-card{padding:19px 13px}}@media (max-width:1000px){.sidebar{width:240px;padding:26px 16px}.device-card{gap:9px;padding:14px 9px}.device-text small{font-size:7px}.workspace{padding:22px 18px 0}.orientation-label{display:none}.preview-actions{gap:10px}.local-badge{display:none}}@media (max-width:720px){.main-header{height:65px;padding:0 18px}.brand{font-size:20px}.beta{display:none}.help-button{gap:0;font-size:0}.app-body{flex-direction:column}.sidebar{border-right:0;border-bottom:1px solid var(--line);width:100%;padding:18px;display:block}.sidebar-title,.section-label,.setting-row,.swatches,.sidebar-note,.sidebar-footer{display:none}.device-list{gap:8px;display:flex}.device-card{border-radius:8px;justify-content:center;padding:13px 7px}.device-silhouette,.device-text small,.device-text>span,.selected-check{display:none}.device-text strong{font-size:9px}.workspace{height:calc(100dvh - 145px);min-height:560px;padding:18px 14px 0}.url-toolbar{gap:6px;margin-bottom:18px}.primary{gap:8px;padding:0 13px}.url-field{gap:7px;padding:0 9px}.url-hint{display:none}.url-field input{font-size:11px}.preview-title{gap:6px;font-size:9px}.preview-actions{gap:10px}.fullscreen-button span{display:none}.canvas-caption{font-size:7px;left:15px;right:15px}.footer-tag{display:none}.workspace-footer{font-size:8px}.device-position{padding:50px 35px 24px}}.editorial{border-top:1px solid var(--line);background:#fff;padding:90px max(28px,50% - 525px)}.editorial-intro{max-width:600px}.editorial h2{letter-spacing:-1.2px;color:#373141;margin:16px 0;font:700 34px/1.3 Avenir Next,Segoe UI,Arial,sans-serif}.editorial p{color:#857d90;font-size:14px;line-height:1.9}.guide-grid{grid-template-columns:repeat(3,1fr);gap:40px;margin:50px 0 70px;display:grid}.step-number{color:#a991d3;font-size:11px;font-weight:600}.guide-grid h3{font:650 17px Avenir Next,Segoe UI,Arial,sans-serif}.guide-grid p{font-size:13px}.learn-panel{background:#f8f6fb;border:1px solid #eeeaf4;border-radius:15px;grid-template-columns:1fr 1fr;gap:45px;padding:35px;display:grid}.learn-panel h2{font-size:25px}.learn-panel p{font-size:12px}.text-link{color:#8666b8;margin-top:12px;font-size:12px;display:inline-block}.viewport-table h3{margin:8px 0 20px;font-size:13px}.viewport-table table{border-collapse:collapse;text-align:left;width:100%;font-size:11px}.viewport-table th{color:#9a8ca8;font-size:9px;font-weight:500}.viewport-table td,.viewport-table th{border-bottom:1px solid #e7e1ee;padding:12px 0}.faq{max-width:750px;margin-top:75px}.faq h2{margin-bottom:30px}.faq details{border-bottom:1px solid #eeeaf2;padding:20px 0}.faq summary{cursor:pointer;font-size:13px;font-weight:500}.faq p{font-size:13px}.site-footer{border-top:1px solid var(--line);background:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:25px;padding:30px 40px;display:flex}.site-footer .brand{font-size:19px}.site-footer nav{color:#80768a;gap:23px;font-size:11px;display:flex}.site-footer>span{color:#aaa1b2;font-size:10px}.article-header{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;padding:25px 7%;display:flex}.article{max-width:800px;min-height:60vh;margin:65px auto 90px;padding:0 28px}.article h1{letter-spacing:-1.5px;margin:20px 0 40px;font:700 44px/1.2 Avenir Next,Segoe UI,Arial,sans-serif}.article-content{color:#7d7487;font-size:15px;line-height:1.9}.article-content h2{color:#3a3344;margin-top:35px;font:650 23px Avenir Next,Segoe UI,Arial,sans-serif}.article-content a{color:#8867b9;text-underline-offset:4px;text-decoration:underline}.article-cta{margin-top:20px;display:inline-block}.skip-link{z-index:100;background:#fff;padding:15px;position:fixed;top:-100px;left:15px}.skip-link:focus{top:10px}@media (max-width:720px){.editorial{padding:55px 24px}.editorial h2{font-size:28px}.guide-grid,.learn-panel{grid-template-columns:1fr;gap:22px}.guide-grid{margin:35px 0}.learn-panel{padding:24px}.site-footer{padding:25px}.site-footer nav{flex-wrap:wrap;gap:16px}.article h1{font-size:34px}.article-header .brand{font-size:20px}}.mobile-settings-toggle{display:none}.editorial-intro h1{letter-spacing:-1.2px;color:#373141;margin:16px 0;font:700 38px/1.3 Avenir Next,Segoe UI,Arial,sans-serif}.device-text small{color:#82798f}.device-text>span{color:#7e728e}.section-label,.eyebrow{color:#82748f}.setting-row{color:#6f657b}.workspace-footer{color:#81768e}.editorial p{color:#73697e}.canvas-caption,.device-caption{color:#80718f}.dark .canvas-caption,.dark .device-caption{color:#c2b6d5}.sidebar-note p{color:#81738e}.url-field input::placeholder{color:#81758e}@media (max-width:720px){.mobile-settings-toggle{color:#8062b2;background:#f3eff9;border-radius:6px;margin:12px auto 0;padding:7px 18px;font-size:10px;display:block}.show-settings .setting-row{display:flex}.show-settings .swatches{margin-top:12px;display:flex}.workspace{height:calc(100dvh - 184px)}.editorial-intro h1{font-size:31px}}.canvas{display:flex}.device-position{flex:1}.preview-actions .share-button{color:#8060bb;gap:6px}.share-panel{background:#f4f0fa;border:1px solid #e6ddef;border-radius:10px;flex-shrink:0;margin-bottom:16px;padding:14px 16px}.share-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.share-heading strong{font-size:12px;font-weight:600}.share-heading button{color:#877395;padding:0 3px;font-size:22px;line-height:1}.share-panel p{color:#82718f;margin:7px 0;font-size:11px;line-height:1.6}.share-link-row{gap:8px;margin-top:10px;display:flex}.share-link-row input{color:#6f5c84;background:#fff;border:1px solid #ded4e9;border-radius:6px;flex:1;min-width:0;padding:10px;font-size:11px}.share-link-row .primary{min-height:36px;padding:0 14px;font-size:11px}.share-link-row input:focus{outline:2px solid #b7a3ff}@media (max-width:720px){.preview-toolbar{flex-wrap:wrap;row-gap:12px}.preview-actions{margin-left:auto}.share-panel{padding:12px}.share-panel p{font-size:10px}.workspace:has(.share-panel){min-height:750px}}.device-search{color:#343044;background:#fff;border:1px solid #e5e3ec;border-radius:9px;width:100%;min-width:0;margin:0 0 12px;padding:11px 12px;font:12px inherit}.device-list{scrollbar-width:thin;max-height:310px;padding:2px 5px 2px 2px;overflow-y:auto}.fullscreen-device{align-items:center;gap:12px;padding:12px 24px;font-size:12px;display:flex}.fullscreen-device select{color:#343044;background:#fff;border:1px solid #dfdce8;border-radius:8px;max-width:80%;padding:8px}.notch.island{border-radius:30px;width:110px;height:30px;top:12px}.landscape-frame .notch.island{width:30px;height:110px;top:50%;left:12px}.notch.punch{border-radius:50%;width:12px;height:12px;top:12px}.landscape-frame .notch.punch{width:12px;height:12px;top:50%;left:12px}.viewport-table{max-height:580px;overflow:auto}@media (max-width:760px){.device-list{max-height:190px;display:flex;overflow:auto}.device-card{min-width:205px}.device-search{margin-bottom:10px}}.site-footer>span a{color:#736080;text-underline-offset:3px;text-decoration:underline}