:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#172133;background:#f6f7f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #5292ed;outline-offset:2px}.topbar{height:78px;background:#fff;border-bottom:1px solid #e7e9ed;display:flex;align-items:center;gap:48px;padding:0 max(30px,calc((100vw - 1680px)/2));position:relative;z-index:4}.brand{display:flex;align-items:center;gap:12px;min-width:260px}.brand-mark{border-radius:12px;background:#172644;color:#fff;width:42px;height:42px;display:grid;place-items:center;font-weight:750;letter-spacing:-2px;position:relative}.mark-dot{position:absolute;width:5px;height:5px;background:#7cabfc;border-radius:50%;right:7px;top:9px}.brand strong{display:block;font-size:17px;letter-spacing:-.5px}.brand small{display:block;color:#8b96a6;font-size:12px;margin-top:2px}.topbar nav{display:flex;gap:28px;align-self:stretch;align-items:center;margin:auto}.topbar nav a{color:#677287;text-decoration:none;font-size:14px;padding:27px 0}.topbar nav a.active{color:#244c97;border-bottom:2px solid #4076cf;font-weight:650}.primary{border:1px solid #2e62bd;background:#326ac9;color:#fff;border-radius:10px;padding:13px 18px;font-weight:650;box-shadow:0 5px 14px #1c62be24;display:inline-flex;justify-content:center;gap:16px;align-items:center;white-space:nowrap}.primary:hover{background:#245aae}.workspace{max-width:1680px;margin:auto;display:grid;grid-template-columns:minmax(310px,390px) minmax(540px,1fr) 272px;gap:23px;padding:29px 30px 80px;align-items:start}.preview-col{position:sticky;top:22px}.section-heading,.controls-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:19px}.eyebrow{font-size:11px;letter-spacing:1.9px;color:#7991b6;font-weight:800}.section-heading h1,.controls-title h2{font-size:24px;letter-spacing:-.8px;margin:5px 0 0}.live-indicator{font-size:11px;color:#44846b;background:#eaf7f0;padding:7px 9px;border-radius:20px;white-space:nowrap}.live-indicator i{display:inline-block;width:6px;height:6px;background:#4aaa80;border-radius:50%;vertical-align:1px;margin-right:3px}.phone-wrap{background:#e9edf3;border:1px solid #dce3ed;border-radius:22px;display:flex;justify-content:center;padding:21px}.phone{width:min(100%,292px);aspect-ratio:1179/2556;background:#0a0e17;padding:7px;border-radius:42px;box-shadow:0 21px 31px #1a263345,0 2px 3px #1d283c;position:relative}.phone-screen{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;background:#1a2336}canvas{width:100%;height:100%;display:block}.island{position:absolute;width:28%;height:3.3%;border-radius:30px;top:1.6%;left:36%;background:#090b10}.phone-status{position:absolute;top:2.6%;left:9%;right:8%;color:#fff;display:flex;justify-content:space-between;font-size:11px;font-weight:700;pointer-events:none;text-shadow:0 1px 2px #222}.home-bar{position:absolute;bottom:1.2%;left:35%;width:30%;height:4px;border-radius:10px;background:#fff9}.preview-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.resolution{color:#718096;background:#e9edf2;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:600}.text-button,.reset,.subtle{border:0;background:none;color:#3467b8;font-size:13px;font-weight:650;padding:8px}.preview-note{color:#8591a1;font-size:12px;line-height:1.55;margin:14px 0}.controls-title{margin:0 0 16px}.controls-title h2{font-size:23px}.reset{color:#72819b}.section-card{background:#fff;border:1px solid #e5e9ef;border-radius:16px;padding:22px 24px;margin-bottom:14px;box-shadow:0 2px 8px #162d4f05}.card-title{display:flex;gap:13px;align-items:start;margin-bottom:19px}.step{font-weight:800;color:#5084d5;background:#edf4fe;font-size:12px;border-radius:7px;padding:7px 8px}.card-title h3,.download-card h3{font-size:17px;margin:0 0 4px;letter-spacing:-.35px}.card-title p,.download-card p{font-size:12px;color:#8b96a5;margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label,.photo-controls label{font-size:12px;font-weight:650;color:#68758a;display:flex;flex-direction:column;gap:7px}.form-grid select,.form-grid input,.event-entry input{border:1px solid #dfe5ed;border-radius:9px;background:#fbfcfe;color:#24334a;min-width:0;width:100%;height:42px;padding:0 10px;outline:none}.form-grid label:first-child{grid-column:span 2}.form-grid select:focus,.form-grid input:focus,.event-entry input:focus{border-color:#5790e0}.segmented{display:flex;gap:8px}.segmented button{flex:1;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 8px;font-size:13px;color:#647086;font-weight:600}.segmented button.selected,.option.selected{border-color:#6795df;background:#f1f6ff;color:#2459a9;box-shadow:inset 0 0 0 1px #87ace8}.palette-row{display:flex;align-items:center;justify-content:space-between;margin-top:20px;color:#59687d;font-size:13px;font-weight:650}.swatches{display:flex;gap:9px}.swatch{width:27px;height:27px;border-radius:50%;background:var(--sw);border:2px solid #fff;box-shadow:0 0 0 1px #d7dce3;position:relative}.swatch.selected{box-shadow:0 0 0 2px #3971c9}.swatch.selected::after{content:'✓';color:#fff;position:absolute;inset:1px;font-size:14px;text-shadow:0 1px 3px #000;text-align:center}.swatch[data-theme=paper].selected::after{color:#222}.choice-label{font-size:12px;font-weight:700;color:#68758a;margin:18px 0 9px}.option-row{display:flex;gap:9px}.option{border:1px solid #e2e8f0;background:#fff;min-width:0;flex:1;min-height:82px;border-radius:10px;color:#59677d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.option-icon{font-size:25px;font-weight:400;line-height:1}.option strong{font-size:12px;font-weight:650}.toggle-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0f4;margin-top:22px;padding-top:18px;cursor:pointer}.toggle-row strong{font-size:13px;display:block}.toggle-row small{font-size:11px;color:#8491a1;display:block;margin-top:4px}.toggle-row input{position:absolute;opacity:0}.switch{background:#ccd5e0;border-radius:20px;width:40px;height:23px;position:relative;flex:none}.switch:after{content:'';position:absolute;background:#fff;width:17px;height:17px;border-radius:50%;left:3px;top:3px;box-shadow:0 1px 3px #0002;transition:transform .2s}.toggle-row input:checked+.switch{background:#3c75d1}.toggle-row input:checked+.switch:after{transform:translateX(17px)}.toggle-row input:focus-visible+.switch{outline:3px solid #5292ed}.events{display:flex;flex-direction:column;gap:8px}.event-item{background:#f8fafc;border:1px solid #e9edf3;border-radius:9px;padding:9px 10px;display:flex;gap:9px;align-items:center;font-size:12px}.event-item .event-dot{width:8px;height:8px;border-radius:50%;background:#f7ad6c}.event-item span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis}.event-item time{color:#8895a5}.event-item button{border:0;background:none;color:#8c9bad;font-size:18px;line-height:1}.event-entry{display:grid;grid-template-columns:1fr 135px auto;gap:8px;margin-top:10px}.secondary{background:#eff5ff;border:1px solid #d2e0f8;color:#3266b5;border-radius:9px;padding:9px 12px;font-weight:650;font-size:12px}.hint{font-size:11px;color:#9ba5b2;line-height:1.5;margin:10px 0 0}.photo-controls{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;margin-top:15px}.photo-controls .upload{border:1px dashed #94acd2;border-radius:9px;padding:12px;color:#316abf;cursor:pointer}.upload input{display:none}.photo-controls label:nth-of-type(2),.photo-controls .hint{grid-column:span 2}.photo-controls label output{float:right}.photo-controls input[type=range]{accent-color:#3974cd;width:100%}.hidden{display:none!important}.download-card{background:#eaf2ff;border:1px solid #cfe1fc;border-radius:15px;padding:17px 21px;display:flex;align-items:center;justify-content:space-between;gap:15px}.summary-col{padding-top:51px;position:sticky;top:22px}.summary-card,.how-card{background:#fff;border:1px solid #e5e9ef;border-radius:15px;padding:21px;margin-bottom:15px}.summary-card h3{font-size:18px;margin:10px 0 18px}.summary-item{display:flex;justify-content:space-between;gap:10px;font-size:12px;border-bottom:1px solid #edf0f3;padding:13px 0}.summary-item span{color:#8b96a5}.summary-item strong{text-align:right;font-weight:650}.wide{width:100%;margin-top:20px}.summary-caption{font-size:11px;color:#a0a9b5;line-height:1.5;margin:13px 0 0}.how-card{background:#f0f4fa}.how-icon{color:#3c73c7;font-size:20px}.how-card h3{font-size:14px;line-height:1.35;margin:10px 0 7px}.how-card p{font-size:12px;color:#748296;line-height:1.6;margin:0}.mobile-actions{display:none}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#172644;color:white;font-size:13px;padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:1250px){.workspace{grid-template-columns:minmax(290px,370px) minmax(450px,1fr)}.summary-col{display:none}}@media(max-width:800px){.topbar{height:68px;padding:0 18px;gap:10px}.topbar nav,.top-download{display:none}.brand{min-width:0}.workspace{display:flex;flex-direction:column;padding:20px 15px 110px;gap:22px}.preview-col{position:relative;top:auto;width:100%}.section-heading{margin-bottom:14px}.section-heading h1{font-size:22px}.phone-wrap{padding:20px 10px;background:linear-gradient(160deg,#e9eef6,#f0f3f8)}.phone{width:min(61vw,294px)}.preview-note{display:none}.controls-col{width:100%}.controls-title{margin-bottom:14px}.section-card{padding:19px 16px}.mobile-actions{display:flex;position:fixed;bottom:0;left:0;right:0;padding:12px 15px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e9ef;gap:9px;z-index:5;box-shadow:0 -9px 30px #182a4812}.mobile-actions>*{flex:1;min-height:44px}.download-card{display:none}.toast{bottom:85px}.event-entry{grid-template-columns:1fr 130px}.event-entry button{grid-column:span 2}.preview-footer{padding:0 4px}}@media(max-width:390px){.phone{width:68vw}.event-entry{grid-template-columns:1fr}.event-entry button{grid-column:auto}.form-grid{grid-template-columns:1fr}.form-grid label:first-child{grid-column:auto}.live-indicator{font-size:10px}}
.visibility{margin-top:21px;border-top:1px solid #edf0f4;padding-top:3px}.visibility .toggle-row{margin-top:0;border-top:1px solid #f0f2f5;padding:14px 0}.visibility .toggle-row:first-of-type{border:0}.visibility .choice-label{margin:13px 0 7px}.select-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:650;color:#68758a;border-top:1px solid #f0f2f5;padding-top:14px}.select-row select{min-width:190px;max-width:58%;background:#fbfcfe;border:1px solid #dfe5ed;border-radius:9px;height:40px;padding:0 9px;color:#24334a}.select-row.disabled{opacity:.45}.select-row.disabled select{pointer-events:none}@media(max-width:390px){.select-row{align-items:stretch;flex-direction:column}.select-row select{max-width:none;width:100%}}
.sheet-head{display:none}.glass-panel{grid-column:span 2;border:1px solid #dfe7ef;background:#f7f9fc;border-radius:11px;padding:0 14px 14px}.glass-panel .toggle-row{margin-top:0;padding:13px 0;border:0}.glass-panel #glassControls{display:grid;gap:13px;border-top:1px solid #e6ebf2;padding-top:12px}.glass-panel input[type=range]{accent-color:#3c75d1}.glass-panel output{float:right}.glass-panel label{font-size:12px;color:#68758a}.glass-panel .toggle-row span:first-child{display:block}.glass-panel .toggle-row strong{color:#253249}.glass-panel .toggle-row small{color:#8290a3}.glass-panel #glassControls.disabled{opacity:.45;pointer-events:none}
@media(max-width:800px){html,body{height:100%;overflow:hidden}.topbar{position:fixed;inset:0 0 auto;height:68px;z-index:12}.workspace{display:block;height:100dvh;padding:0}.preview-col{position:fixed;inset:68px 0 0;z-index:1;display:flex;flex-direction:column;top:68px;padding:10px 14px 0;background:#e8edf5;overflow:hidden}.preview-col .section-heading{flex:none;margin:0 2px 6px}.preview-col .section-heading h1{font-size:18px}.preview-col .eyebrow{display:none}.preview-col .live-indicator{font-size:10px}.phone-wrap{flex:1;min-height:0;padding:4px 5px;border:0;background:transparent;align-items:flex-start;overflow:hidden}.phone{width:auto;height:min(calc(100dvh - 235px),630px);max-width:100%;aspect-ratio:1179/2556;border-radius:31px;padding:5px;transition:height .25s ease,transform .25s ease;margin:auto auto 0}.phone-screen{border-radius:27px}.phone-status{font-size:clamp(6px,2vw,10px)}body.sheet-open .phone{height:max(155px,calc(50dvh - 125px));margin:0 auto}.preview-footer,.preview-note{display:none}.controls-col{position:fixed;z-index:7;left:0;right:0;bottom:0;width:100%;height:50dvh;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -12px 30px #17233c26;overflow:hidden;display:flex;flex-direction:column;transition:height .25s ease}body:not(.sheet-open) .controls-col{height:124px}.sheet-head{display:flex;align-items:center;justify-content:center;flex:none;height:57px;position:relative;border-bottom:1px solid #eef1f5;touch-action:pan-y}.sheet-head strong{font-size:14px}.sheet-handle{position:absolute;width:38px;height:4px;border-radius:5px;background:#bfc8d5;top:7px}.sheet-head button{position:absolute;right:18px;top:13px;border:0;background:#f0f4fa;border-radius:9px;width:31px;height:31px;font-size:23px;line-height:24px;color:#5e718e}body:not(.sheet-open) .sheet-head button{transform:rotate(180deg)}.controls-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:16px 15px calc(96px + env(safe-area-inset-bottom));scrollbar-width:thin}body:not(.sheet-open) .controls-scroll{visibility:hidden;pointer-events:none}.mobile-actions{z-index:8;background:#fffffff2;backdrop-filter:blur(14px);box-shadow:none}body:not(.sheet-open) .mobile-actions{background:transparent;backdrop-filter:none}.summary-col{display:none}.toast{z-index:20}}
.theme-select{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;color:#65748a;font-size:13px;font-weight:650}.theme-select select,.holiday-grid select{min-width:0;border:1px solid #dfe5ed;border-radius:9px;background:#fbfcfe;color:#24334a;height:41px;padding:0 10px}.theme-select select{width:60%}.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.color-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:8px 10px;border:1px solid #e7ebf0;border-radius:9px;color:#59687d;font-size:12px;font-weight:650}.color-grid input{width:34px;height:34px;min-width:34px;border:0;background:none;padding:0;cursor:pointer}.holiday-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.holiday-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:650;color:#68758a}.event-entry{grid-template-columns:1fr 120px 120px auto}@media(max-width:800px){.event-entry{grid-template-columns:1fr 1fr}.event-entry input:first-child{grid-column:span 2}.event-entry button{grid-column:span 2}}@media(max-width:390px){.color-grid,.holiday-grid{grid-template-columns:1fr}.event-entry input:first-child,.event-entry button{grid-column:auto}}
/* Full-screen preview with an independent side drawer. */
html,body{height:100%;overflow:hidden}.topbar{height:72px;position:fixed;inset:0 0 auto;z-index:12;padding:0 24px;gap:14px}.topbar-spacer{flex:1}.topbar nav{display:none}.menu-toggle{width:44px;height:44px;border:1px solid #dce3eb;border-radius:11px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}.menu-toggle span{display:block;width:18px;height:2px;background:#243751;border-radius:2px}.header-open{border:1px solid #c9d8f1;border-radius:9px;background:#eef4ff;color:#2e62b6;font-weight:700;padding:11px 15px}.workspace{max-width:none;padding:0;margin:0;display:block;height:100dvh}.preview-col{position:fixed;inset:72px 0 0;z-index:1;background:linear-gradient(145deg,#e4eaf3,#f8fafc);padding:10px 14px 20px;display:flex;align-items:center;justify-content:center}.preview-col .section-heading,.preview-col .preview-footer,.preview-col .preview-note{display:none}.phone-wrap{border:0;background:transparent;padding:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.phone{height:min(calc(100dvh - 115px),900px);width:auto;max-width:calc(100vw - 28px);aspect-ratio:1179/2556;margin:0;border-radius:clamp(25px,5vw,42px);padding:6px;box-shadow:0 22px 50px #1423394d}.phone-screen{border-radius:clamp(22px,4vw,36px)}.drawer-scrim{position:fixed;inset:0;z-index:14;background:#09152592;opacity:0;pointer-events:none;transition:opacity .25s}.controls-col{position:fixed;top:0;bottom:0;left:0;z-index:15;width:min(435px,88vw);height:100dvh;border-radius:0 19px 19px 0;background:#f7f9fc;box-shadow:15px 0 35px #0f21312b;display:flex;flex-direction:column;overflow:hidden;transform:translateX(-105%);transition:transform .28s ease}.sheet-head{display:flex;align-items:center;justify-content:space-between;flex:none;height:70px;background:#fff;border-bottom:1px solid #e5eaf1;padding:0 19px}.sheet-head strong{font-size:16px}.sheet-head button{position:static;border:0;background:#eef2f8;border-radius:9px;width:34px;height:34px;font-size:26px;line-height:27px;color:#4e6179}.controls-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px 17px 36px;flex:1;visibility:visible;pointer-events:auto}.controls-title h2{font-size:20px}.section-card{padding:18px 16px}.summary-col,.mobile-actions{display:none}.download-card{display:flex;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #e5e9ef}.action-pair{display:flex;gap:8px}.action-pair>*{flex:1;min-width:0}.share-panel{display:flex;flex-direction:column;gap:9px;border-top:1px solid #edf0f4;padding-top:14px;width:100%}.share-panel label{font-size:12px;color:#66758b;font-weight:700}.share-panel input{width:100%;height:43px;border:1px solid #d9e3f2;border-radius:9px;padding:0 10px;font-size:12px;color:#2e405b;background:#f8fafc}.share-panel .action-pair button{font-size:13px}body.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}body.drawer-open .controls-col{transform:translateX(0)}.toast{z-index:20}@media(max-width:800px){.topbar{height:64px;padding:0 12px}.brand{min-width:0}.brand small{font-size:10px}.brand strong{font-size:15px}.brand-mark{width:36px;height:36px}.header-open{display:none}.preview-col{inset:64px 0 0;padding:6px 8px 14px;top:64px}.phone-wrap{align-items:center}.phone{height:min(calc(100dvh - 95px),760px);max-width:calc(100vw - 16px);margin:0}.controls-col,body:not(.sheet-open) .controls-col{top:0;bottom:0;left:0;right:auto;width:min(440px,88vw);height:100dvh;border-radius:0 18px 18px 0;transform:translateX(-105%);display:flex}.controls-scroll,body:not(.sheet-open) .controls-scroll{visibility:visible;pointer-events:auto;padding:16px 14px calc(32px + env(safe-area-inset-bottom))}.sheet-head{height:64px}.sheet-head button,body:not(.sheet-open) .sheet-head button{transform:none}.download-card{display:flex}.mobile-actions{display:none}body.drawer-open .controls-col,body.drawer-open:not(.sheet-open) .controls-col{transform:translateX(0)}}
.form-grid label{grid-column:span 2}
html:has(body.landing-mode){height:auto;overflow:auto}body.landing-mode{height:auto;min-height:100svh}
/* The visible device changes with the export preset; all chrome stays outside the PNG canvas. */
.phone{--frame-light:#8f969d;--frame-dark:#292e35;--rim:6px;--corner:43px;--screen-corner:37px;--cutout-width:28%;--cutout-height:3.3%;--cutout-top:1.6%;aspect-ratio:1206/2622;padding:var(--rim);border-radius:var(--corner);background:linear-gradient(110deg,#34383d 0%,var(--frame-light) 10%,#35383e 18%,#16191d 48%,var(--frame-dark) 84%,#b3b6b7 96%,#383a3b 100%);border:1px solid #717780;box-shadow:0 0 0 1px #111922,0 25px 55px #12233b65,0 4px 10px #1c293e30;transition:border-radius .22s,background .22s,padding .22s}.phone:before{content:"";position:absolute;inset:2px;border:1px solid #ffffff29;border-radius:calc(var(--corner) - 2px);pointer-events:none;z-index:2}.phone-screen{border-radius:var(--screen-corner);box-shadow:inset 0 0 0 1px #ffffff17}.phone-button{position:absolute;z-index:-1;background:linear-gradient(90deg,#1a1e24,#8b9298,#21252b);width:3px;border-radius:2px}.phone-button-left{height:8%;left:-3px;top:20%}.phone-button-right{height:11%;right:-3px;top:23%;background:linear-gradient(90deg,#555b62,#1c2027)}.island{width:var(--cutout-width);height:var(--cutout-height);top:var(--cutout-top);left:50%;transform:translateX(-50%);background:#040506;box-shadow:inset 0 1px 1px #303239,0 1px 2px #ffffff19;display:flex;align-items:center;justify-content:flex-end;padding-right:9%}.island-lens{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#354354,#070a12 70%);box-shadow:0 0 0 1px #1c222a}.phone-status{font-size:clamp(10px,1.4vw,15px);top:2.48%;left:8%;right:7%;align-items:center;font-variant-numeric:tabular-nums}.status-icons{display:flex;align-items:center;gap:5px}.status-signal{letter-spacing:-2px;font-size:1em}.status-wifi{font-size:1.15em;line-height:1}.status-battery{width:17px;height:8px;border:1.5px solid currentColor;border-radius:3px;position:relative}.status-battery:before{content:"";position:absolute;inset:1px 3px 1px 1px;background:currentColor;border-radius:1px}.status-battery:after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:3px;background:currentColor;border-radius:0 2px 2px 0}.home-bar{height:4px;bottom:1%;background:#fff9;box-shadow:0 0 2px #0006}.device-caption{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);color:#657386;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.phone[data-device="iphone14pro"]{--frame-light:#818098;--frame-dark:#282735;--rim:7px;--corner:39px;--screen-corner:32px;--cutout-width:30%;--cutout-top:1.75%;background:linear-gradient(100deg,#373444,#888298 11%,#272534 19%,#15141b 53%,#514d62 89%,#a29cab 97%)}.phone[data-device="iphone15pro"]{--frame-light:#b2aa9c;--frame-dark:#55534d;--rim:6px;--corner:43px;--screen-corner:37px;--cutout-width:28.5%}.phone[data-device="iphone16pro"],.phone[data-device="iphone16promax"]{--frame-light:#a9a198;--frame-dark:#4d4c49;--rim:5px;--corner:47px;--screen-corner:42px;--cutout-width:27%}.phone[data-device="iphone17pro"],.phone[data-device="iphone17promax"]{--frame-light:#d1bca8;--frame-dark:#5d554e;--rim:5px;--corner:51px;--screen-corner:46px;--cutout-width:25.5%;--cutout-height:3.1%}.phone[data-device="iphone17"]{--frame-light:#a6b5c5;--frame-dark:#3b4d5d;--rim:6px;--corner:48px;--screen-corner:42px;--cutout-width:27%}.phone[data-device="iphoneair"]{--frame-light:#c5c8cf;--frame-dark:#5c626e;--rim:3px;--corner:45px;--screen-corner:41px;--cutout-width:26%;--cutout-height:3%;box-shadow:0 0 0 1px #111922,0 17px 36px #12233b44,0 3px 6px #1c293e30}.phone[data-device="iphone16promax"],.phone[data-device="iphone17promax"]{height:min(calc(100dvh - 108px),940px)}@media(max-width:800px){.phone[data-device="iphone16promax"],.phone[data-device="iphone17promax"]{height:min(calc(100dvh - 95px),760px)}.phone-status{font-size:clamp(10px,2.8vw,14px)}.device-caption{bottom:3px;font-size:10px}}
/* Start screen: the editor remains a separate view without resetting its settings. */
.landing{display:none}.editor-home{border:0;background:transparent;text-align:left;cursor:pointer;padding:0;color:inherit}.landing-mode{background:#090b10;color:#fff;overflow:auto}.landing-mode .landing{display:block;min-height:100svh}.landing-mode .topbar,.landing-mode .workspace,.landing-mode .drawer-scrim,.landing-mode .controls-col{display:none!important}.landing-nav{height:96px;display:flex;align-items:center;gap:clamp(20px,5vw,75px);max-width:1440px;padding:0 clamp(22px,5vw,68px);margin:auto;border-bottom:1px solid #24272c}.landing-logo{width:52px;height:52px;display:grid;place-items:center;flex:none;border:1px solid #606268;border-radius:18px;background:linear-gradient(145deg,#303238,#0c0e13);color:#fff;text-decoration:none;font-size:19px;font-weight:750;box-shadow:inset 0 1px 2px #ffffff24}.landing-nav nav{display:flex;gap:clamp(18px,4vw,55px);align-items:center;flex:1}.landing-nav nav a,.landing-footer a{color:#b9bbc2;text-decoration:none}.landing-nav nav a:hover,.landing-footer a:hover{color:#fff}.landing-create{border:1px solid #5d6066;background:linear-gradient(180deg,#25272b,#111217);color:#fff;border-radius:999px;padding:14px 29px;font-weight:750;box-shadow:inset 0 1px 1px #ffffff23;white-space:nowrap}.landing-create:hover{border-color:#a0a3a9;background:#24272c}.landing-hero{min-height:calc(100svh - 96px);display:grid;place-items:center;text-align:center;padding:58px 22px 100px}.landing-kicker{letter-spacing:.29em;font-size:12px;font-weight:700;color:#848991;margin-bottom:34px}.landing-hero h1{font-size:clamp(60px,10vw,146px);line-height:1.01;letter-spacing:-.07em;margin:0 0 45px;font-weight:800;animation:landing-enter .9s both}.landing-down{width:70px;height:70px;border-radius:50%;border:1px solid #474b52;display:grid;place-items:center;margin:auto;color:#75aaff;text-decoration:none;font-size:28px;animation:landing-bob 2.2s ease-in-out infinite}.landing-discover{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 24px 130px;scroll-margin-top:20px}.landing-emblem{font-size:clamp(80px,12vw,164px);line-height:1;font-weight:520;letter-spacing:-.07em;margin-bottom:24px}.landing-discover h2{font-size:clamp(21px,3vw,31px);margin:0 0 9px}.landing-discover p{margin:0;color:#aaaeb8}.landing-dots{display:flex;gap:clamp(8px,1.6vw,18px);margin:35px 0 62px}.landing-dots i{display:block;width:clamp(10px,1.5vw,19px);height:clamp(10px,1.5vw,19px);border-radius:50%;background:#35383e;animation:month-pulse 12s steps(1,end) infinite}.landing-dots i:nth-child(-n+6){background:#8df6bd}.landing-dots i:nth-child(1){animation-delay:0s}.landing-dots i:nth-child(2){animation-delay:-1s}.landing-dots i:nth-child(3){animation-delay:-2s}.landing-dots i:nth-child(4){animation-delay:-3s}.landing-dots i:nth-child(5){animation-delay:-4s}.landing-dots i:nth-child(6){animation-delay:-5s}.landing-dots i:nth-child(7){animation-delay:-6s}.landing-dots i:nth-child(8){animation-delay:-7s}.landing-dots i:nth-child(9){animation-delay:-8s}.landing-dots i:nth-child(10){animation-delay:-9s}.landing-dots i:nth-child(11){animation-delay:-10s}.landing-dots i:nth-child(12){animation-delay:-11s}.landing-main-cta{font-size:20px;padding:20px 46px}.landing-subline{color:#858992;font-size:13px;margin-top:24px}.landing-footer{min-height:125px;max-width:1440px;margin:auto;padding:30px clamp(22px,5vw,68px);border-top:1px solid #25272c;display:flex;align-items:center;gap:30px;flex-wrap:wrap;color:#74777e;font-size:14px}.landing-footer span{margin-left:auto}@keyframes landing-enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes landing-bob{50%{transform:translateY(8px)}}@keyframes month-pulse{0%,100%{background:#8df6bd;box-shadow:0 0 18px #8df6bd77}50%{background:#34383d;box-shadow:none}}@media(max-width:600px){.landing-nav{height:90px;gap:14px;padding:0 18px}.landing-logo{width:46px;height:46px}.landing-nav nav{gap:17px;font-size:13px}.landing-create{padding:12px 17px;font-size:14px}.landing-hero{min-height:calc(100svh - 90px);padding:30px 15px 110px}.landing-hero h1{font-size:clamp(48px,10vw,85px);letter-spacing:-.065em}.landing-discover{min-height:80svh}.landing-footer{gap:16px;font-size:12px}.landing-footer span{width:100%;margin:0}}@media(max-width:390px){.landing-nav nav a:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){.landing-hero h1,.landing-down,.landing-dots i{animation:none}}
.event-mode{display:flex;padding:4px;gap:4px;background:#eef2f7;border-radius:12px;margin-top:15px}.event-mode button{flex:1;border:0;border-radius:9px;background:transparent;padding:10px 12px;color:#5b6980;font-size:12px;font-weight:700}.event-mode button.selected{background:#fff;color:#265eb3;box-shadow:0 2px 6px #172c4a1a}.event-entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:15px}.event-entry label{display:flex;flex-direction:column;gap:6px;min-width:0;color:#637189;font-size:12px;font-weight:700}.event-entry .event-title,.event-entry #addEvent{grid-column:span 2}.event-entry #addEvent{min-height:42px}@media(max-width:390px){.event-entry label,.event-entry .event-title,.event-entry #addEvent{grid-column:span 2}}
/* Site appearance is independent from the exported wallpaper palette. */
.site-theme-toggle{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:50%;border:1px solid #555a65;background:#1b1d22;color:#f7f8fb;font-size:21px;line-height:1}.site-theme-toggle:hover{border-color:#84a9ed}.editor-nav{display:flex;gap:9px;align-items:center}.editor-nav a,.editor-nav button{text-decoration:none;color:#475b76;background:transparent;border:0;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:700;white-space:nowrap}.editor-nav a:hover,.editor-nav button:hover{background:#ebf1f9}.editor-links{display:flex;flex-wrap:wrap;gap:12px 18px;padding:18px 8px 32px;border-top:1px solid #dde4ec}.editor-links a{color:#758398;text-decoration:none;font-size:12px}.editor-links a:hover{text-decoration:underline;color:#2d67b6}.landing-nav{border:1px solid #2d3037;border-radius:30px;margin-top:16px;background:#111318a8;min-height:82px;height:auto}.landing-nav nav a[aria-current="page"]{color:#fff;font-weight:750}.landing-footer{align-items:flex-start}.landing-footer span{align-self:center}.landing-nav .site-theme-toggle{margin-left:auto}.topbar .site-theme-toggle{background:#fff;color:#283a56;border-color:#d5dce5}
html[data-site-theme="light"] body.landing-mode{background:#f5f7fa;color:#182338}html[data-site-theme="light"] .landing-nav{background:#ffffffd9;border-color:#dce2eb}html[data-site-theme="light"] .landing-logo{background:linear-gradient(150deg,#f3f6fb,#e3eaf3);border-color:#b8c5d4;color:#1d2e48}html[data-site-theme="light"] .landing-nav nav a{color:#53647d}html[data-site-theme="light"] .landing-nav nav a[aria-current="page"]{color:#182c4d}html[data-site-theme="light"] .landing-create{background:linear-gradient(180deg,#fff,#edf2f8);border-color:#bcc8d8;color:#223954}html[data-site-theme="light"] .landing-create:hover{background:#e7eef8}html[data-site-theme="light"] .landing-down{border-color:#c9d2de}html[data-site-theme="light"] .landing-kicker,html[data-site-theme="light"] .landing-discover p,html[data-site-theme="light"] .landing-subline{color:#667890}html[data-site-theme="light"] .landing-dots i{background:#d1d8e2}html[data-site-theme="light"] .landing-dots i:nth-child(-n+6){background:#29b874}html[data-site-theme="light"] .landing-footer{border-color:#d9e0e9;color:#77869a}html[data-site-theme="light"] .landing-footer a{color:#53647d}html[data-site-theme="light"] .landing-footer a:hover{color:#203a62}html[data-site-theme="light"] .landing-nav .site-theme-toggle{background:#f8fafc;color:#2f4769;border-color:#cdd7e4}
html[data-site-theme="dark"] body:not(.landing-mode){background:#090b10;color:#e9edf3}html[data-site-theme="dark"] .topbar{background:#101318;border-color:#2a303a}html[data-site-theme="dark"] .brand-mark{background:#242831;color:#f7f8fa}html[data-site-theme="dark"] .brand small{color:#959fad}html[data-site-theme="dark"] .menu-toggle,html[data-site-theme="dark"] .topbar .site-theme-toggle{background:#1c2027;border-color:#434c59;color:#f4f7fb}html[data-site-theme="dark"] .menu-toggle span{background:#e0e5ed}html[data-site-theme="dark"] .editor-nav a,html[data-site-theme="dark"] .editor-nav button{color:#c8d2df}html[data-site-theme="dark"] .editor-nav a:hover,html[data-site-theme="dark"] .editor-nav button:hover{background:#28313d}html[data-site-theme="dark"] .preview-col{background:linear-gradient(145deg,#121923,#090d14)}html[data-site-theme="dark"] .controls-col{background:#11151b;color:#edf0f5;border-color:#313843}html[data-site-theme="dark"] .sheet-head,html[data-site-theme="dark"] .section-card,html[data-site-theme="dark"] .download-card{background:#1a1e25;border-color:#343b45;color:#edf0f5}html[data-site-theme="dark"] .sheet-head button{background:#292f38;color:#eef2f7}html[data-site-theme="dark"] .controls-scroll{color:#e7ebf1}html[data-site-theme="dark"] .section-card p,html[data-site-theme="dark"] .hint,html[data-site-theme="dark"] .choice-label,html[data-site-theme="dark"] .event-entry label{color:#a6b1c0}html[data-site-theme="dark"] .option,html[data-site-theme="dark"] .secondary,html[data-site-theme="dark"] .subtle,html[data-site-theme="dark"] .event-item,html[data-site-theme="dark"] .glass-panel,html[data-site-theme="dark"] .color-grid label,html[data-site-theme="dark"] .share-panel input,html[data-site-theme="dark"] .theme-select select,html[data-site-theme="dark"] .holiday-grid select,html[data-site-theme="dark"] .event-entry input,html[data-site-theme="dark"] .form-grid select{background:#252a32;border-color:#424b58;color:#edf0f5}html[data-site-theme="dark"] .option.selected,html[data-site-theme="dark"] .secondary:hover{background:#283956;border-color:#6086c4}html[data-site-theme="dark"] .segmented,html[data-site-theme="dark"] .event-mode{background:#252a32}html[data-site-theme="dark"] .segmented button,html[data-site-theme="dark"] .event-mode button{color:#b6c1ce}html[data-site-theme="dark"] .segmented button.selected,html[data-site-theme="dark"] .event-mode button.selected{background:#39465a;color:#fff}html[data-site-theme="dark"] .toggle-row{border-color:#343b45}html[data-site-theme="dark"] .toggle-row small,html[data-site-theme="dark"] .card-title p,html[data-site-theme="dark"] .theme-select{color:#aab5c3}html[data-site-theme="dark"] .editor-links{border-color:#333b47}html[data-site-theme="dark"] .editor-links a{color:#aeb9c8}html[data-site-theme="dark"] .device-caption{color:#98a6b9}html[data-site-theme="dark"] .header-open{background:#25334b;color:#dceaff;border-color:#42597c}
@media(max-width:800px){.editor-home{min-width:0}.editor-home>span:last-child{display:none}.editor-nav{gap:0}.editor-nav a,.editor-nav button{font-size:12px;padding:8px}.topbar .site-theme-toggle{width:36px;height:36px;font-size:18px}.landing-nav{margin:10px 12px 0;padding:10px 13px;border-radius:22px;min-height:74px}.landing-nav .site-theme-toggle{width:36px;height:36px;font-size:18px}.landing-nav nav{flex:none;margin-right:auto}}@media(max-width:390px){.editor-nav a{display:none}.landing-nav{gap:8px}.landing-nav nav{gap:8px}.landing-nav nav a:nth-child(2){display:none}.landing-nav .landing-create{padding:10px 12px}}
.topbar .editor-nav{display:flex;align-items:center;margin:0;align-self:auto}html[data-site-theme="dark"] .form-grid label,html[data-site-theme="dark"] .holiday-grid label,html[data-site-theme="dark"] .color-grid label,html[data-site-theme="dark"] .select-row{color:#c1cad6}html[data-site-theme="dark"] .upload{background:#242b35;color:#b9d4ff}html[data-site-theme="dark"] .share-panel label{color:#c1cad6}html[data-site-theme="dark"] .download-card p{color:#a7b4c3}
/* A compact bottom sheet keeps the wallpaper visible while editing on phones. */
@media(max-width:800px){body .controls-col,body:not(.sheet-open) .controls-col{top:auto;bottom:0;left:0;right:0;width:100%;height:44dvh;max-height:520px;border-radius:22px 22px 0 0;transform:translateY(105%);box-shadow:0 -16px 40px #080d1b66;transition:transform .28s ease}body.drawer-open .controls-col,body.drawer-open:not(.sheet-open) .controls-col{transform:translateY(0)}.sheet-head{height:58px;padding-top:8px}.sheet-head:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:4px;background:#abb6c6}.sheet-head strong{margin-top:5px}body.drawer-open .preview-col{bottom:0}body.drawer-open .phone{transform:translateY(-11dvh);transition:transform .28s ease}body.drawer-open .device-caption{bottom:auto;top:4px}.drawer-scrim{background:transparent}body.drawer-open .drawer-scrim{background:transparent}.controls-scroll,body:not(.sheet-open) .controls-scroll{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}@media(max-width:800px) and (max-height:620px){body .controls-col,body:not(.sheet-open) .controls-col{height:52dvh}body.drawer-open .preview-col{bottom:0}body.drawer-open .phone{transform:translateY(-14dvh)}}
.landing-dots i,.landing-dots i:nth-child(-n+6){background:#34383e;animation:none;box-shadow:none}.landing-dots i.is-past,.landing-dots i:nth-child(-n+6).is-past{background:#8df6bd;box-shadow:0 0 10px #8df6bd45}.landing-dots i.is-current{background:#8df6bd;animation:current-month-pulse 2.5s ease-in-out infinite}@keyframes current-month-pulse{50%{background:#3a6f57;box-shadow:0 0 0 5px #8df6bd24}}html[data-site-theme="light"] .landing-dots i{background:#cbd4df}html[data-site-theme="light"] .landing-dots i.is-past,html[data-site-theme="light"] .landing-dots i.is-current{background:#29b874}html[data-site-theme="light"] .landing-dots i.is-current{animation-name:current-month-pulse}@media(prefers-reduced-motion:reduce){.landing-dots i.is-current{animation:none}}
/* Keep the logo clear and give the settings control its own readable label. */
.topbar .menu-toggle{position:fixed;top:86px;left:16px;z-index:13;width:auto;min-width:126px;height:44px;padding:0 13px;flex-direction:row;gap:10px;background:#fff;box-shadow:0 6px 22px #101b2d35}.topbar .menu-toggle>span{width:auto;height:auto;background:transparent}.menu-icon{display:flex!important;flex-direction:column;gap:4px}.menu-icon i{display:block;width:18px;height:2px;border-radius:2px;background:#243751}.menu-label{font-size:13px;font-weight:750;white-space:nowrap;color:#243751}.settings-hint{position:fixed;top:139px;left:16px;width:min(258px,calc(100vw - 32px));padding:13px 30px 13px 13px;border:1px solid #dce6f5;border-radius:12px;background:#fff;color:#314762;box-shadow:0 10px 28px #172e5040;font-size:12px;font-weight:600;line-height:1.35}.settings-hint:before{content:"";position:absolute;top:-7px;left:28px;width:12px;height:12px;transform:rotate(45deg);background:inherit;border-top:1px solid #dce6f5;border-left:1px solid #dce6f5}.settings-hint button{position:absolute;right:7px;top:6px;width:22px;height:22px;border:0;background:transparent;color:inherit;font-size:21px;line-height:20px}.drawer-intro{margin:0 0 16px;font-size:12px;line-height:1.5;color:#687990}html[data-site-theme="dark"] .topbar .menu-toggle{background:#202630;border-color:#4c5869}html[data-site-theme="dark"] .menu-icon i{background:#edf3fb}html[data-site-theme="dark"] .menu-label{color:#edf3fb}html[data-site-theme="dark"] .settings-hint{background:#202630;border-color:#4c5869;color:#dce5f3}html[data-site-theme="dark"] .settings-hint:before{border-color:#4c5869}html[data-site-theme="dark"] .drawer-intro{color:#aab6c7}body.drawer-open .settings-hint{display:none}@media(max-width:800px){.topbar .menu-toggle{top:75px;left:12px;min-width:114px;height:42px;padding:0 11px}.settings-hint{top:124px;left:12px}.drawer-intro{margin-bottom:14px}}
.sheet-actions{display:flex;align-items:center;gap:8px}.sheet-head .sheet-resize{display:none}.drawer-open .topbar .menu-toggle{opacity:0;pointer-events:none}.drawer-open .device-caption{display:none}@media(max-width:800px){body .controls-col,body:not(.sheet-open) .controls-col{height:var(--sheet-height,44dvh);max-height:none}.sheet-head{touch-action:none;user-select:none;cursor:ns-resize}.sheet-head .sheet-resize{display:block;position:static;transform:none;width:auto;height:34px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:750;line-height:normal;cursor:pointer}.sheet-actions #sheetToggle{position:static;transform:none}.sheet-head:before{pointer-events:none}body.drawer-open .phone,body.drawer-open .phone[data-device="iphone16promax"],body.drawer-open .phone[data-device="iphone17promax"]{transform:translateY(calc(0px - var(--preview-shift,11dvh)))}body.sheet-dragging .controls-col,body.sheet-dragging .phone{transition:none!important}}@media(max-width:800px) and (max-height:620px){body .controls-col,body:not(.sheet-open) .controls-col{height:var(--sheet-height,44dvh)}body.drawer-open .phone{transform:translateY(calc(0px - var(--preview-shift,11dvh)))}}

/* Mode-dependent controls must stay hidden despite flex/grid rules. */
[hidden]{display:none!important}