/* App mock: geometry, palette and component structure follow the app sources. */
.hero-art[data-ready="true"] { aspect-ratio:auto;overflow:visible;background:none;border-radius:0; }
.demo-widget { --app-canvas:#f3f7f8;--app-ink:#354c54;--app-heading:#183b44;--app-accent:#176d73;--app-control:#e6eff0;--app-line:#e2e8e5;--app-paper:#f6f4ed;max-width:410px;margin-inline:auto;font-family:"Hiragino Sans","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--app-ink);line-height:1.5; }
.demo-widget button,.demo-widget input,.demo-widget textarea { font:inherit;letter-spacing:inherit; }
.demo-widget button { -webkit-tap-highlight-color:transparent;cursor:pointer;color:var(--app-accent); }
.demo-widget button:focus-visible,.demo-widget input:focus-visible,.demo-widget textarea:focus-visible,.demo-scroll:focus-visible { outline:3px solid var(--app-accent);outline-offset:2px; }
.demo-widget .demo-eyebrow { margin:0 0 .55rem;text-align:center;font-size:.875rem;font-weight:600; }
.demo-modes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin-bottom:1rem;border:1px solid var(--line);border-radius:12px; }
.demo-modes button { min-height:44px;min-width:0;padding:6px;border:0;border-radius:8px;background:transparent;font-size:.875rem;overflow-wrap:anywhere; }
.demo-modes button[aria-pressed="true"] { background:var(--app-accent);color:#fff;font-weight:600; }
.demo-phone { position:relative;isolation:isolate;width:100%;height:680px;background:var(--app-canvas);border:1px solid #ccd9d8;border-radius:28px;overflow:hidden;box-shadow:0 14px 30px -24px #354c5480; }
.demo-base { display:flex;flex-direction:column;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.demo-status { display:flex;justify-content:space-between;align-items:center;padding:14px 25px 10px;font-size:.75rem;color:#142f36;line-height:1.2; }
.demo-status b { font-weight:600; }
.demo-status>span { letter-spacing:2px; }
.demo-calendar-head { padding:0 18px; }
.demo-scope-line { display:flex;align-items:center;justify-content:space-between;min-height:42px;font-size:.8125rem; }
.demo-avatars { display:flex;align-items:center;padding-right:5px; }
.demo-avatars i { width:27px;height:27px;background:#dce9e1;border-radius:50%;position:relative;border:1px solid var(--app-canvas); }
.demo-avatars i+i { background:#eeded6;margin-left:-5px; }
.demo-avatars i::before { content:"";position:absolute;left:10px;top:5px;width:7px;height:7px;border-radius:50%;background:#536c65; }
.demo-avatars i::after { content:"";position:absolute;left:6px;top:13px;width:15px;height:9px;border-radius:9px 9px 3px 3px;background:#536c65; }
.demo-month-row { display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:4px; }
.demo-month { display:flex;align-items:center;gap:12px;min-width:0;font-size:1.25rem;font-weight:500;color:var(--app-heading); }
.demo-icon { display:block;width:24px;height:24px;flex:none; }
.demo-month .demo-icon { width:16px;height:16px; }
.demo-icon-button { display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:0;border-radius:12px;background:none; }
.demo-todo-open { background:var(--app-control); }
.demo-weekdays { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:8px 12px;font-size:.6875rem;text-align:center;color:#55666b; }
.demo-weekdays span:nth-child(6),.demo-day.saturday { color:#347fc4; }
.demo-weekdays span:last-child,.demo-day.sunday { color:#9b4e55; }
.demo-month-grid { flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(74px,1fr);padding-inline:12px;min-height:370px; }
.demo-day { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:74px;padding:5px 0;border:0;border-top:1px solid var(--app-line);border-radius:0;background:none;text-align:center;font-size:.875rem; }
.demo-day .demo-date { position:relative;display:grid;place-items:center;min-width:24px;min-height:26px;line-height:1.1; }
.demo-date.today { background:var(--app-accent);color:#fff;border-radius:50%; }
.demo-date i { position:absolute;right:-3px;top:0;width:4px;height:4px;border-radius:50%;background:var(--app-ink); }
.demo-day.muted { color:#7e8889; }
.demo-event { display:block;align-self:stretch;margin:0 1px;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#d3e5e5;border-radius:3px;color:#27656a;font-size:.625rem;line-height:1.4; }
.demo-plus { display:grid;place-items:center;align-self:flex-end;margin:-48px 26px 12px 0;width:48px;height:48px;position:relative;pointer-events:none;border-radius:50%;background:var(--app-accent); }
.demo-plus .demo-icon { filter:brightness(0) invert(1); }
.demo-bottom { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 12px 10px;padding:5px;border:1px solid #dfe6e7;border-radius:30px;background:#fffdfdd9; }
.demo-bottom>span { display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 1px;font-size:.625rem;text-align:center;overflow-wrap:anywhere; }
.demo-bottom .selected { background:var(--app-control);border-radius:25px; }
.demo-bottom .demo-icon { width:21px;height:21px; }
.demo-scrim { position:absolute;inset:0;background:#0000001a;z-index:1; }
.demo-scrim[hidden] { display:none; }
.demo-panel { position:absolute;z-index:2;inset:7px 0 0;margin:0;width:100%;height:calc(100% - 7px);max-width:none;max-height:none;padding:22px 22px 14px;border:0;border-radius:24px 24px 0 0;background:#fff;color:var(--app-ink);overflow:hidden; }
.demo-panel[open] { display:flex;flex-direction:column;gap:14px;animation:demo-todo-enter 160ms ease-out; }
.demo-panel::backdrop { background:transparent; }
.demo-panel-head { display:flex;align-items:center;justify-content:space-between;gap:4px;flex:none; }
.demo-widget .demo-panel h2 { flex:1;min-width:0;max-width:none;margin:0;font-family:inherit;font-size:1.5rem;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--app-heading);text-wrap:initial; }
.demo-filters { display:flex;gap:8px;flex:none;overflow-x:auto;padding:3px 2px 5px;scrollbar-width:thin; }
.demo-filters button { flex:none;min-width:44px;min-height:44px;max-width:100%;padding:6px 14px;border:0;border-radius:22px;background:var(--app-control);color:var(--app-accent);font-size:.8125rem;white-space:normal; }
.demo-filters button[aria-pressed="true"] { background:var(--app-accent);color:#fff; }
.demo-todo-form { display:flex;align-items:center;gap:4px;flex:none;margin:0;padding:4px 8px;border-radius:12px;background:var(--app-canvas); }
.demo-todo-form>span { font-size:1.4rem; }
.demo-todo-form input { min-width:0;flex:1;width:100%;min-height:44px;padding:8px 4px;border:0;background:none;color:var(--app-ink);font-size:1rem; }
.demo-todo-form input::placeholder { color:#65757a;opacity:1; }
.demo-todo-form button { flex:none;min-width:44px;min-height:44px;padding:4px;border:0;background:none;font-size:.8125rem; }
.demo-scroll { flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b5c9c7 transparent;padding:3px; }
.demo-task-list { margin:0;padding:0;list-style:none; }
.demo-task-list li { margin:0;padding:0;border-bottom:1px solid var(--app-line); }
.demo-task-list label { display:flex;align-items:flex-start;gap:12px;min-height:60px;padding:14px 0;cursor:pointer; }
.demo-task-list input { appearance:none;flex:none;width:26px;height:26px;margin:0;border:1.7px solid var(--app-accent);border-radius:50%;background:#fff; }
.demo-task-list input:checked { background:var(--app-accent);box-shadow:inset 0 0 0 5px #fff; }
.demo-task-list span { min-width:0;padding-top:1px;font-size:.9375rem;overflow-wrap:anywhere; }
.demo-task-list input:checked+span { color:#69777a;text-decoration:line-through; }
.demo-back { flex:none;min-height:44px;padding:8px 0;border:0;background:none;text-align:left;font-size:.875rem; }
.demo-memo-panel { inset:auto 0 0;height:78%;padding-top:8px; }
.demo-memo-panel[open] { gap:10px;animation:demo-memo-enter 160ms ease-out; }
.demo-widget .demo-memo-panel h2 { font-size:1.4375rem; }
.demo-grabber { flex:none;align-self:center;width:42px;height:4px;margin:0 0 5px;border-radius:4px;background:var(--app-line); }
.demo-widget .demo-event-count { margin:8px 0 18px;font-size:.75rem;color:#55676d; }
.demo-day-event { display:flex;align-items:flex-start;gap:12px;min-height:54px;margin-bottom:12px;font-size:.875rem; }
.demo-day-event time { flex:none; }
.demo-day-event>span { color:var(--app-accent);overflow-wrap:anywhere; }
.demo-memo-card { margin-bottom:14px;padding:18px;border-radius:16px;background:var(--app-paper); }
.demo-memo-card label { display:block;margin-bottom:10px;font-size:.875rem;font-weight:500; }
.demo-memo-card textarea { display:block;width:100%;min-height:160px;resize:vertical;padding:2px;border:0;background:none;color:var(--app-ink);font-size:1rem;line-height:1.9;overflow-wrap:anywhere; }
.demo-widget .demo-hint { margin:1rem 0 .5rem;font-size:.875rem;text-align:center; }
.demo-widget .demo-disclaimer { margin:0;font-size:.75rem;line-height:1.7;text-align:center;color:var(--secondary); }
.demo-visually-hidden { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;padding:0!important;margin:0!important;border:0!important; }
@keyframes demo-todo-enter { from { transform:translateX(18px);opacity:.7; } to { transform:none;opacity:1; } }
@keyframes demo-memo-enter { from { transform:translateY(16px);opacity:.7; } to { transform:none;opacity:1; } }
@media(max-width:420px) { .demo-phone { height:640px;border-radius:24px; }.demo-calendar-head { padding-inline:12px; }.demo-month { gap:5px;font-size:1.125rem; }.demo-panel { padding-inline:16px; }.demo-month-grid { padding-inline:6px; }.demo-weekdays { padding-inline:6px; } }
@media(prefers-reduced-motion:reduce) { .demo-panel[open] { animation:none;scroll-behavior:auto; }.demo-widget * { transition:none!important; } }