/* Outside guides identify the real controls without painting over app UI. */
.demo-widget { max-width:470px; }
.demo-map { position:relative;padding-inline:36px; }
.demo-map>.demo-phone { width:min(100%,390px);margin-inline:auto; }
.demo-outside-pin { position:absolute;transform:translateY(-50%);color:var(--app-accent);font-size:1rem;font-weight:600;line-height:24px;white-space:nowrap;pointer-events:none; }
.demo-outside-pin.left { left:0; }.demo-outside-pin.right { right:0; }
.demo-outside-pin[hidden] { display:none; }
.demo-outside-guides { width:100%;max-width:390px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px; }
.demo-outside-guides button { min-width:0;min-height:44px;padding:4px 2px;border:0;border-radius:6px;background:var(--mint);font-size:.875rem;overflow-wrap:anywhere;line-height:1.5; }
.demo-outside-guides button>span { display:block;font-size:1rem;line-height:1; }
.demo-calendar-content { flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.demo-calendar-content[hidden],.demo-tab-content[hidden] { display:none; }
.demo-tab-content { flex:1;min-height:0;overflow:auto;padding:14px 22px 24px;overscroll-behavior:contain;scrollbar-width:thin; }
.demo-bottom { flex:none; }
.demo-bottom button { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:3px 1px;border:0;background:none;border-radius:24px;font-size:.625rem;overflow-wrap:anywhere;line-height:1.3; }
.demo-bottom button[aria-pressed="true"] { background:var(--app-control); }
.demo-bottom button>span { min-width:0; }
.demo-widget .demo-app-title { margin:0 0 16px;font-family:inherit;font-size:1.75rem;line-height:1.4;font-weight:500;letter-spacing:0;text-align:left;text-wrap:initial; }
.demo-receive-row { display:flex;align-items:center;gap:10px;padding:12px;margin-block:12px;min-height:44px;border-radius:14px;background:#fff;font-size:.875rem; }
.demo-receive-row>span:first-of-type { flex:1;min-width:0; }
.demo-widget .demo-new-marker { font-size:.75rem;margin:18px 0 12px;color:var(--app-accent); }
.demo-activity-card { margin:0 0 12px;padding:14px;border-radius:16px;background:#fff; }
.demo-widget .demo-activity-card>p { font-size:.6875rem;margin:0 0 6px; }
.demo-activity-card>strong { display:block;font-size:.875rem;font-weight:500; }
.demo-activity-card>div { display:flex;flex-direction:column;gap:6px;padding:12px;margin-top:10px;border-radius:12px;background:var(--app-canvas);font-size:.875rem;color:var(--app-accent); }
.demo-activity-card small { font-size:.6875rem;color:var(--app-ink); }
.demo-reactions { display:block;margin-top:10px;font-size:.75rem; }
.demo-alarm-head { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px; }
.demo-widget .demo-alarm-head h2 { margin:0;font-family:inherit;font-size:1.375rem;line-height:1.4;font-weight:500;letter-spacing:0; }
.demo-alarm-head>span { font-size:.875rem;flex:none; }
.demo-widget .demo-alarm-caption { font-size:.875rem;margin:18px 0 5px; }
.demo-alarm-row { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:120px;padding:16px 0;border-bottom:1px solid #dfe6e8; }
.demo-alarm-row>div { min-width:0; }
.demo-alarm-row strong { font-size:2.5rem;font-weight:400;line-height:1.25; }
.demo-widget .demo-alarm-row p { margin:0;font-size:.6875rem; }
.demo-switch { flex:none;display:flex;align-items:center;justify-content:center;width:56px;min-height:44px;position:relative; }
.demo-switch input { appearance:none;position:absolute;inset:0;margin:0;width:100%;height:100%;border:0;z-index:1;cursor:pointer;background:transparent;border-radius:12px; }
.demo-switch>span { width:50px;height:30px;background:#becaca;border-radius:18px;padding:3px; }
.demo-switch>span::before { content:"";display:block;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #354c5420; }
.demo-switch input:checked+span { background:var(--app-accent); }.demo-switch input:checked+span::before { margin-left:auto; }
.demo-widget .demo-settings-title { margin:22px 0 8px;font-size:.75rem;color:#4a565c; }
.demo-profile { display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#fff; }
.demo-profile>div { min-width:0; }
.demo-profile strong { display:block;font-size:.875rem;font-weight:500; }
.demo-widget .demo-profile p { margin:4px 0 0;font-size:.6875rem;color:#4a565c; }
.demo-profile-avatar { flex:none;display:block;width:36px;height:36px;border-radius:50%;background:#dce9e1;position:relative; }
.demo-profile-avatar::before { content:"";position:absolute;width:9px;height:9px;left:14px;top:7px;border-radius:50%;background:#536c65; }.demo-profile-avatar::after { content:"";position:absolute;width:20px;height:12px;left:8px;top:19px;border-radius:12px 12px 3px 3px;background:#536c65; }
.demo-settings-group { background:#fff;border-radius:14px;padding-inline:14px; }
.demo-settings-row { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding-block:12px;font-size:.875rem; }
.demo-settings-row+.demo-settings-row { border-top:1px solid var(--app-control); }
.demo-settings-row>span { min-width:0; }.demo-settings-row>span:last-child { display:flex;align-items:center;gap:6px;flex:none;font-size:.6875rem;color:#4a565c;max-width:45%; }
.demo-settings-row i { font-style:normal;color:var(--app-accent); }
.creation-demo-section { display:grid;gap:2rem;align-items:center;padding-block:3rem 4rem;border-top:1px solid var(--line); }
.creation-demo-copy { min-width:0; }.creation-demo-copy>p { color:var(--secondary); }
.creation-demo-copy h2 { max-width:18ch; }.creation-demo-copy .demo-section-number { font-size:.875rem;font-weight:600;color:var(--action); }
.create-widget { width:100%;margin-inline:auto; }
.create-choice { position:absolute;bottom:82px;right:30px;width:116px;height:56px;display:flex;align-items:center;justify-content:space-between;z-index:1; }
.create-choice button { position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--app-accent);color:#fff; }
.create-choice .demo-icon { filter:brightness(0) invert(1);width:24px;height:24px; }
.create-choice .choice-guidance { position:absolute;inset:-21px;overflow:visible;width:86px;height:86px;pointer-events:none; }
.create-choice .choice-guidance text { fill:var(--app-accent);font-size:10.5px;font-weight:600; }
.create-widget .create-topbar { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-bottom:12px; }
.create-widget .create-topbar>span { font-size:.875rem; }
.create-widget .create-topbar>button { flex:none;min-height:44px;padding:8px;border:0;background:var(--mint);border-radius:8px;font-size:.8125rem; }
.create-panel { inset:7px 0 0;height:calc(100% - 7px);padding:12px 18px;background:var(--app-canvas); }
.create-panel[open] { gap:10px; }
.create-app-header { flex:none;display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr) minmax(44px,auto);gap:6px;align-items:center;min-height:52px; }
.create-app-header button { min-height:44px;min-width:44px;padding:6px 0;border:0;background:none;font-size:.8125rem; }
.create-app-header h3 { margin:0;font-family:inherit;font-size:1.125rem;font-weight:500;text-align:center;line-height:1.5;letter-spacing:0; }
.create-bulk-month { display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:1.25rem;color:var(--app-heading); }
.create-bulk-month>span:first-child,.create-bulk-month>span:last-child { flex:none;width:26px;text-align:center; }
.create-bulk-calendar { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain; }
.create-bulk-calendar .demo-month-grid { min-height:310px;grid-auto-rows:minmax(62px,1fr);padding-inline:0; }
.create-bulk-calendar .demo-day { min-height:62px; }
.create-bulk-calendar .demo-day[aria-pressed="true"] { background:#e0efeb;box-shadow:inset 0 0 0 1px var(--app-accent); }
.create-presets { display:flex;gap:8px;overflow:auto;padding-block:5px;scrollbar-width:thin; }
.create-presets button { flex:none;min-width:112px;min-height:48px;padding:6px 10px;border:1px solid #176d7355;border-radius:12px;background:var(--app-paper);text-align:left;font-size:.75rem; }
.create-presets button span { display:block;font-size:.6875rem; }
.create-presets button[aria-pressed="true"] { background:var(--app-accent);color:#fff; }
.create-bulk-actions { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px; }
.create-bulk-actions>span { color:var(--app-accent);font-size:1.125rem;letter-spacing:16px; }
.create-bulk-actions button { min-height:44px;min-width:44px;padding:8px 14px;border:0;border-radius:24px;background:var(--app-accent);color:#fff;font-size:.8125rem; }
.create-bulk-actions button:disabled { opacity:.45;cursor:default; }
.create-event-form { min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px; }
.create-event-title { width:100%;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid var(--app-line);background:none;color:var(--app-ink);font-size:1rem!important; }
.create-form-card { margin-top:18px;padding:14px;border-radius:14px;background:#fff; }
.create-field { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-block:8px;font-size:.875rem; }
.create-field input[type="date"],.create-field input[type="time"] { min-width:0;max-width:100%;min-height:44px;padding:4px;border:0;border-radius:6px;background:var(--app-control);color:var(--app-ink);font-size:1rem; }
.create-field input[type="checkbox"] { width:24px;height:24px;accent-color:var(--app-accent); }
.create-swatches { display:flex;flex-wrap:wrap;gap:9px;margin-top:18px; }.create-swatches span { width:14px;height:14px;border-radius:50%; }
.create-choices-guide { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px; }
.create-choices-guide button { min-height:44px;min-width:0;border:0;border-radius:8px;background:var(--mint);padding:6px;font-size:.875rem;overflow-wrap:anywhere; }
.create-form-error { font-size:.8125rem;color:#8c2f3a;margin-top:6px!important; }
.create-confirmation { margin-top:8px!important;font-size:.8125rem;text-align:center;color:var(--app-accent); }
@media(min-width:1024px) { .creation-demo-section { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem; }.creation-demo-copy { max-width:32rem; } }
@media(max-width:600px) { .demo-map { padding-inline:0; }.demo-outside-pin { display:none; }.demo-outside-guides { gap:3px; }.demo-outside-guides button { font-size:.875rem; }.demo-widget { max-width:410px; }.creation-demo-section { padding-block:2rem 3rem; } }

.create-choice[hidden] { display:none; }

.create-widget[data-large-text="true"] .create-app-header { grid-template-columns:repeat(2,minmax(0,1fr)); }
.create-widget[data-large-text="true"] .create-app-header h3 { grid-column:1/-1;grid-row:1; }
.create-widget[data-large-text="true"] .create-app-header button:first-child { grid-column:1;grid-row:2;text-align:left; }
.create-widget[data-large-text="true"] .create-app-header button:last-child { grid-column:2;grid-row:2;text-align:right; }
.create-widget[data-large-text="true"] .create-app-header button { overflow-wrap:anywhere;max-width:100%; }

.demo-widget[data-large-text="true"] .demo-map { padding-inline:0; }