@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";:root{color:#202229;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f5f6f8;font-family:DM Sans,Noto Sans SC,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:0;min-height:100%;overflow-x:hidden}body{background:#f5f6f8;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{width:100%;max-width:1180px;margin:0 auto;padding:28px 32px 42px;overflow:hidden}.app-header{align-items:center;gap:10px;margin-bottom:26px;display:flex}.brand-mark{color:#f5c96c;background:#252831;border-radius:12px;place-items:center;width:38px;height:38px;font-size:20px;font-weight:700;display:grid;box-shadow:0 7px 16px #2022291c}.eyebrow,.section-kicker{letter-spacing:.16em;color:#a0a5ae;margin:0;font-size:10px;font-weight:700;line-height:1.2}.app-header h1{letter-spacing:-.03em;margin:2px 0 0;font-size:20px}.local-badge{color:#a35e64;background:#f9e9e8;border-radius:999px;flex-shrink:0;margin-left:auto;padding:7px 9px;font-size:11px;font-weight:600}.intro-card{background:#fff;border:1px solid #e7e8ec;border-radius:23px;justify-content:space-between;align-items:center;min-height:152px;margin-bottom:20px;padding:30px 34px;display:flex;box-shadow:0 12px 30px #20222908}.intro-card h2,.panel-heading h2{letter-spacing:-.04em;color:#22242b;margin:6px 0;font-size:24px}.intro-copy{color:#878c95;max-width:550px;margin:0;font-size:13px;line-height:1.7}.love-note{color:#a46b65;margin:16px 0 0;font-size:12px;line-height:1.8}.love-note span{margin-top:3px;font-size:11px;display:block}.intro-icon{color:#d38a82;background:#fff0ea;border-radius:20px;flex-shrink:0;place-items:center;width:60px;height:60px;font-size:27px;display:grid;transform:rotate(8deg)}.intro-card>div:first-child{min-width:0}.app-footer{text-align:center;color:#9b7d76;padding:28px 8px 0;font-size:12px;line-height:1.8}.app-footer>span{color:#d38a82}.app-footer small{color:#aaa1a0;font-size:11px;display:block}@media (width<=360px){.app-header h1{font-size:18px}.brand-mark{flex-shrink:0;width:32px;height:32px}.intro-card{position:relative}.intro-icon{opacity:.45;position:absolute;top:18px;right:18px}}.workspace{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:start;gap:20px;display:grid}.preview-panel,.editor-panel{background:#fff;border:1px solid #e7e8ec;border-radius:23px;box-shadow:0 12px 30px #20222908}.preview-panel{padding:22px}.editor-panel{padding:26px 28px 23px}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:17px;display:flex}.panel-heading h2{margin-top:6px;font-size:19px}.resolution,.step-count{color:#a2a6ae;padding-top:6px;font-size:11px}.phone-stage{background:#f0f1f4;border-radius:17px;justify-content:center;padding:22px;display:flex;overflow:hidden}.phone-stage img{border-radius:4px;width:min(100%,360px);max-width:100%;height:auto;display:block;box-shadow:0 9px 22px #22273324}.loading{color:#a0a5ae;place-items:center;min-height:520px;font-size:13px;display:grid}.preview-tip,.privacy-note{color:#a0a5ae;margin:13px 2px 0;font-size:11px;line-height:1.5}.field-item>span{color:#6e737c;justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:600;display:flex}.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 13px;display:grid}.full-width{grid-column:1/-1}.code-field{min-width:0}.code-label{color:#6e737c;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;font-weight:600;display:flex}.code-label small{color:#a0a5ae;font-size:11px;font-weight:400}.code-input-row{align-items:center;gap:8px;display:flex}.code-input-row input{flex:1;min-width:0}.random-code-button{flex-shrink:0;min-height:44px;padding-inline:12px}.nickname-field .random-nickname-button{color:#9b6c35;background:#fffaf0;border-color:#eee2c9;width:100%;min-height:44px;margin-top:7px;padding-inline:8px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.field-hint{color:#9398a1;margin:7px 0 0;font-size:11px;line-height:1.6}.field-error{color:#b35533}.field-item{min-width:0}.field-item input,.field-item textarea,.field-item select{box-sizing:border-box;color:#252830;background:#fbfcfd;border:1px solid #e5e7eb;border-radius:11px;outline:none;width:100%;min-width:0;max-width:100%;margin:0;padding:11px 12px;font-size:16px;line-height:22px;transition:border .18s,box-shadow .18s}.field-item select{height:46px;display:block}.field-item input[type=time]{appearance:none;box-sizing:border-box;text-align:left;width:100%;min-width:0;max-width:100%;height:46px;min-height:46px;max-height:46px;padding:0 12px;line-height:44px;display:block;overflow:hidden}.field-item input[type=time]::-webkit-date-and-time-value{text-align:left;align-items:center;min-width:0;height:44px;margin:0;padding:0;line-height:44px;display:flex}.field-item input[type=time]::-webkit-datetime-edit{min-width:0;padding:0;line-height:44px}.field-item input[type=time]::-webkit-datetime-edit-fields-wrapper{min-width:0;padding:0;line-height:44px}.message-time-group{border:0;min-width:0;margin:0;padding:0}.message-time-group legend{color:#6e737c;margin-bottom:10px;padding:0;font-size:12px;font-weight:600}.message-time-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;display:grid}.field-item input{height:46px}.battery-field{padding-top:2px}.battery-label strong{color:#252830;font-size:14px;font-weight:700}.field-item input.battery-range{width:100%;height:44px;box-shadow:none;accent-color:#252832;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:block}.field-item input.battery-range:focus{box-shadow:none;background:0 0;border:0}.field-item input.battery-range:focus-visible{outline-offset:3px;outline:2px solid #ddb45a}.battery-scale{color:#a0a5ae;justify-content:space-between;margin-top:1px;font-size:10px;font-weight:400;display:flex}.battery-scale small{font-size:inherit;font-weight:inherit}.field-item textarea{resize:vertical;min-height:98px;line-height:1.65}.field-item input:focus,.field-item textarea:focus,.field-item select:focus{background:#fff;border-color:#ddb45a;box-shadow:0 0 0 3px #f8edda}.message-label small{color:#b2b5bc;font-size:10px;font-weight:400}.warning,.notice{border-radius:9px;margin:13px 0 0;padding:9px 11px;font-size:11px;line-height:1.5}.warning{color:#96651e;background:#fff7e4}.notice{color:#557458;background:#edf6ee}.actions{gap:10px;margin-top:21px;display:flex}.secondary-button,.primary-button{border-radius:11px;height:44px;font-size:13px;font-weight:600}.secondary-button{color:#777c85;background:#fff;border:1px solid #e4e6ea;padding:0 16px}.primary-button{color:#fff;background:#242832;border:0;flex:1;justify-content:center;align-items:center;gap:16px;display:flex;box-shadow:0 7px 14px #25283224}.primary-button:disabled{cursor:not-allowed;opacity:.5}.arrow{color:#f6cf79;font-size:18px}.privacy-note{text-align:center;margin-top:15px}.privacy-note span{color:#d5a944;vertical-align:-1px;font-size:16px}.hidden-canvas{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}@media (width<=820px){.app-shell{padding:20px 15px 32px}.intro-card{min-height:0;padding:23px 21px}.intro-card h2{font-size:21px}.workspace{grid-template-columns:1fr}.preview-panel{order:1}.editor-panel{order:2}.phone-stage{padding:17px}.phone-stage img{width:min(100%,330px)}}@media (width<=460px){.app-shell{padding:16px 12px 30px}.app-header{margin-bottom:18px}.app-header h1{font-size:18px}.eyebrow{letter-spacing:.1em;font-size:9px}.local-badge{padding:6px 7px;font-size:10px}.intro-card{border-radius:18px;padding:21px 18px}.intro-icon{border-radius:15px;width:46px;height:46px;font-size:21px}.intro-card h2{font-size:19px}.intro-copy{font-size:12px}.editor-panel,.preview-panel{border-radius:18px;padding:16px}.form-grid{gap:13px 9px}.actions{z-index:2;background:#fff;padding-top:8px;position:sticky;bottom:10px}.message-time-row{gap:8px}.code-input-row{gap:6px}.random-code-button{padding-inline:9px;font-size:12px}}.template-note{background:#f8f9fb;border-radius:10px;align-items:center;gap:10px;margin-bottom:20px;padding:13px;display:flex}.template-note-icon{color:#71806d}.template-note strong{font-size:12px;font-weight:500;display:block}.template-note small{color:#9398a1;margin-top:4px;font-size:11px;display:block}button:disabled{cursor:not-allowed;opacity:.5}.preview-inline-button{width:100%;margin-top:12px}.mobile-toolbar{display:none}.preview-dialog{color:#202229;background:#f5f6f8;border:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0}.preview-dialog::backdrop{background:#20222970}.preview-dialog-layout{height:100%;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);flex-direction:column;display:flex}.preview-dialog-header{background:#fff;justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.preview-dialog-header h2{margin:5px 0 0;font-size:19px}.preview-dialog-header button{flex-shrink:0}.preview-dialog-controls{justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;display:flex}.preview-dialog-controls p{color:#777c85;margin:0;font-size:12px}.preview-dialog-image{overscroll-behavior:contain;text-align:center;flex:1;min-height:0;padding:8px 16px;overflow:auto}.preview-dialog-image img{object-fit:contain;width:100%;height:100%;margin:0 auto;display:block}.preview-dialog-image.expanded img{width:100%;max-width:1080px;height:auto}.preview-dialog-footer{background:#fff;padding:12px 16px}.preview-dialog-footer>button{width:100%}.preview-dialog-footer .notice,.preview-dialog-footer .warning{margin:0 0 10px}@media (width<=820px){.app-shell{padding-bottom:calc(100px + env(safe-area-inset-bottom))}.mobile-toolbar{z-index:10;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e7e8ec;gap:12px;display:flex;position:fixed;left:0;right:0;box-shadow:0 -4px 20px #20222909}.mobile-toolbar>button{flex:1;min-width:0}.actions{padding-top:0;position:static}.actions .inline-save-button{display:none}.field-item{scroll-margin-bottom:100px}}