.screenComposerSection{scroll-margin-top:90px}.screenComposer{border:1px solid #bdcfc7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 16px 45px #183a2810;--compose-accent:#92e1c9}.composeToolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#f4f7f3;border-bottom:1px solid #cad9d0;padding:16px 22px;font-size:10px;letter-spacing:1.3px;color:#23453d}.composeToolbar>span:first-child{display:flex;align-items:center;gap:8px;font-weight:700}.composeToolbar svg{width:17px;height:17px}.composeToolbar b{font-weight:400;color:#486457;letter-spacing:2px}.composeLive{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:0;font-weight:600}.composeLive i,.composeStatus i{width:5px;height:5px;flex:none;border-radius:50%;background:#26705a}.composeLive small{font-size:9px;margin-left:12px;color:#5b746a;font-variant-numeric:tabular-nums}.composeLayout{display:grid;grid-template-columns:310px minmax(0,1fr)}.composeControls{padding:23px;border-right:1px solid #cad9d0;background:#fbfcf9;min-width:0}.composeControlTitle{display:flex;align-items:center;gap:9px;margin:0 0 13px}.composeControlTitle:not(:first-child){margin-top:24px}.composeControlTitle>span{font-size:9px;color:#4c6b59;font-variant-numeric:tabular-nums}.composeControlTitle strong{font-size:12px;letter-spacing:-.01em;color:#244137}.composePresets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.composePresets>button{background:#fff;border:1px solid #c4d3c9;border-radius:6px;padding:4px;color:#36564a;overflow:hidden;cursor:pointer;min-width:0}.composePresets img{width:100%;height:47px;object-fit:cover;border-radius:3px;transition:filter .2s}.composePresets span{display:block;font-size:10px;font-weight:600;padding:8px 0 4px}.composePresets>button[aria-pressed=true]{border-color:#26725d;background:#e2eee5;box-shadow:0 0 0 1px #26725d}.composePresets>button:hover img{filter:brightness(1.12)}.composeLayers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.composeLayers button{font:inherit;font-size:10px;font-weight:600;background:#fff;color:#557364;border:1px solid #c5d4ca;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:60px;padding:9px 5px;cursor:pointer;transition:background .18s,border-color .18s,color .18s}.composeLayers svg{width:16px;height:16px}.composeLayers [aria-pressed=true]{background:#dcece3;color:#184d3b;border-color:#83ac96}.composeLayers button:hover{border-color:#326f57;background:#e9f1ea}.composeInputLabel{display:block;font-size:10px;color:#476557;font-weight:600}.composeInputLabel input{width:100%;box-sizing:border-box;border:1px solid #b8cdbf;border-radius:6px;background:#fff;padding:10px 11px;font:inherit;font-size:11px;color:#234136;margin-top:8px;min-height:36px}.composeColours{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.composeColours button{display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;color:#345c49;border:1px solid #c2d3c7;border-radius:5px;padding:8px;font:inherit;font-size:10px;cursor:pointer;min-height:32px}.composeColours [aria-pressed=true]{border-color:#346b52;box-shadow:inset 0 0 0 1px #346b52}.composeSwatch{height:10px;width:10px;border-radius:50%;border:1px solid #6f8d7c}.composeSwatch.mint{background:#92e1c9}.composeSwatch.gold{background:#f4c077}.composeSwatch.lilac{background:#c9b8f1}.composeReset{font:inherit;font-size:10px;display:flex;gap:6px;align-items:center;background:transparent;color:#4b6a5b;border:0;padding:3px 0;margin-top:17px;cursor:pointer}.composeReset svg{height:13px;width:13px}.composeReset:hover{color:#153c2b}.screenComposer button:focus-visible,.screenComposer input:focus-visible{outline:2px solid #236a52;outline-offset:3px}.composeWorkspace{background:radial-gradient(ellipse at 70% 0,#d3dfd4,transparent 65%),#e7ede6;padding:30px;min-width:0;display:flex;flex-direction:column;justify-content:center}.composeStage{padding:9px;background:#142c2c;border:1px solid #45615b;border-radius:9px;box-shadow:0 20px 35px #193c282b}.composeCanvas{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(ellipse at 0% 100%,#244b42,transparent 85%),#0d2928;color:#f9f4de;container-type:inline-size;border-radius:3px;isolation:isolate}.composePhoto{position:absolute;inset:0 0 0 auto;width:54%;height:100%;object-fit:cover;object-position:center 42%;z-index:-2}.composePhotoFade{position:absolute;inset:0;background:linear-gradient(90deg,#0d2928 34%,#0d292899 53%,#0d292800 82%);z-index:-1;pointer-events:none}.composeBrand{position:absolute;left:5%;top:7%;display:flex;align-items:center;gap:1cqw;color:#fff6dd;font-size:1.35cqw;letter-spacing:.13cqw;font-weight:700}.composeBrandSymbol{display:grid;place-items:center;font-size:1.8cqw;font-weight:600;color:#10372e;background:var(--compose-accent);width:3.2cqw;height:3.2cqw;border-radius:.5cqw}.composeMain{position:absolute;left:5%;top:26%;width:61%}.composeMain>span{font-size:1.05cqw;color:var(--compose-accent);letter-spacing:.18cqw;font-weight:600;display:block;margin-bottom:1.5cqw}.composeMain h3{font-size:5.3cqw;color:#fff8e3;line-height:1.08;letter-spacing:-.19cqw;margin:0 0 1.7cqw;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}.composeMain p{font-size:1.45cqw;line-height:1.6;color:#d8e4d8;max-width:44cqw;margin:0}.composePrice{position:absolute;bottom:11%;left:5%;display:flex;align-items:flex-start;flex-direction:column}.composePrice small{font-size:1.05cqw;letter-spacing:.11cqw;color:#d0dbcb}.composePrice strong{font-size:4.7cqw;line-height:1.2;letter-spacing:-.14cqw;color:var(--compose-accent);margin-top:.5cqw}.composePrice>span{font-size:1.05cqw;color:#e9e4d3;margin-top:.4cqw}.composeWidgets{position:absolute;right:3.5%;top:6%;display:flex;align-items:flex-end;flex-direction:column;gap:1cqw}.composeClock{display:flex;align-items:center;gap:.8cqw;background:#0b2526dd;border:1px solid #7a9c8f77;padding:1cqw 1.4cqw;border-radius:.6cqw;backdrop-filter:blur(4px)}.composeClock svg{height:2cqw;width:2cqw;color:var(--compose-accent)}.composeClock time{font-size:3cqw;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.09cqw}.composeDate{display:block;font-size:1.2cqw;text-transform:uppercase;letter-spacing:.06cqw;background:#0b2526e8;padding:.8cqw 1cqw;border-radius:.4cqw;max-width:28cqw;color:#f0eddd;text-align:right}.composeWeather{display:flex;align-items:center;gap:.9cqw;padding:.9cqw 1.3cqw;border-radius:.5cqw;background:#0b2526e8;border:1px solid #7a9c8f55}.composeWeather svg{width:2.7cqw;height:2.7cqw;color:var(--compose-accent)}.composeWeather strong{font-size:2.5cqw;font-weight:500}.composeWeather span{max-width:9cqw;font-size:1cqw;line-height:1.4}.composeQr{position:absolute;right:3.5%;bottom:10%;width:12.5%;padding:.7cqw;border-radius:.5cqw;background:#fbf9ef;box-shadow:0 2px 12px #001a1855}.composeQr img{width:100%;height:auto;display:block}.composeQr span{display:block;text-align:center;color:#183a2d;font-size:.9cqw;line-height:1.5;margin:.15cqw 0 .4cqw}.composeNews{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:1.5cqw;padding:1.1cqw 3cqw;background:#061a1ce8;border-top:1px solid #7a9c8f55;min-width:0}.composeNews strong{font-size:1cqw;letter-spacing:.14cqw;color:var(--compose-accent);flex:none}.composeNews>span{font-size:1.15cqw;color:#e7eadb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composeStatus{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 2px 0;color:#486858;font-size:9px}.composeStatus>span:first-child{display:flex;align-items:center;gap:7px;font-weight:600}.composeStatus>span:last-child{text-align:right;font-size:9px;color:#557262}.composeDisclaimer{font-size:10px;color:#526e5c;line-height:1.8;margin:24px 0 14px;max-width:600px}.composeStudioLink{font-size:11px;align-self:flex-start}.composeCanvas [hidden]{display:none!important}
@media(max-width:1050px){.composeLayout{grid-template-columns:270px minmax(0,1fr)}.composeControls{padding:19px}.composeWorkspace{padding:20px}.composeStatus{flex-wrap:wrap}.composeStatus>span:last-child{text-align:left}.composeColours button{padding:7px 6px}}
@media(max-width:800px){.composeLayout{grid-template-columns:1fr}.composeControls{border-right:0;border-bottom:1px solid #cad9d0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.composeControlTitle{grid-column:1/-1;margin-bottom:0!important;margin-top:0!important}.composePresets{grid-column:1/-1;gap:10px}.composePresets img{height:65px}.composeLayers{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.composeLayers button{min-height:58px}.composeInputLabel{grid-column:1/-1}.composeColours{margin:0;grid-column:1/2}.composeReset{justify-self:end;margin:0;align-self:center}.composeWorkspace{padding:25px}.composeDisclaimer{margin-top:18px}.composeToolbar{padding:15px 19px}}
@media(max-width:500px){.composeControls{padding:18px;gap:15px}.composeLayers{grid-template-columns:repeat(3,minmax(0,1fr))}.composeWorkspace{padding:14px}.composeStage{padding:5px;border-radius:6px}.composeColours{grid-column:1/-1}.composeReset{grid-column:1/-1;justify-self:start;margin-top:0}.composeLive{font-size:9px}.composeLive small{display:none}.composeToolbar{padding:13px 17px;font-size:9px}.composeToolbar b{font-size:8px}.composeToolbar svg{width:15px;height:15px}.composeStatus{font-size:9px;padding-top:13px}.composeStatus>span:last-child{display:none}.composeDisclaimer{font-size:9px;margin-top:17px}.composePresets img{height:57px}.composeBrand{font-size:1.6cqw}.composeMain>span{font-size:1.3cqw}.composeMain p{font-size:1.7cqw}.composePrice small,.composePrice>span{font-size:1.3cqw}}
@media(prefers-reduced-motion:reduce){.screenComposer *{transition:none!important;animation:none!important}}
/* Keep the live screen visible while changing layers on a phone. */
.screenComposer{overflow:clip}@media(max-width:800px){.composeLayout{display:flex;flex-direction:column}.composeWorkspace{order:-1}}@media(max-width:500px){.composeWorkspace{position:sticky;top:66px;z-index:3;box-shadow:0 5px 16px #23402d1a}.composeDisclaimer{margin-top:10px;font-size:8px;line-height:1.6}.composeStudioLink{font-size:10px}}