:root{--web-bg:#07060c;--web-panel:#100e19;--web-line:#ffffff14;--web-text:#f2effb;--web-muted:#9b95b5;--web-accent:#b79cff;--web-primary-from:#5b4bd6;--web-primary-to:#b257d8;--web-success:#7ef0c2;--web-warning:#ffa25c;--web-danger:#ff7a7a;--web-love:#ff6fae;--ink:#0a0b16;--wordmark:linear-gradient(90deg, #b8f5e4, #cdb5ff, #ffb0db);--primary:linear-gradient(135deg, var(--web-primary-from), var(--web-primary-to));--listen:linear-gradient(135deg, #ff6fae, #ffb36f);--radius-card:16px;--radius-input:12px;--radius-full:9999px;--gutter:16px;--max-width:480px;--control:48px;--tab-bar:56px;--font:-apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif;--title:800 1.375rem/1.3 var(--font);--body:400 1rem/1.6 var(--font);--label:600 .9375rem/1.4 var(--font);--meta:400 .8125rem/1.5 var(--font);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--web-bg);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}body{background:var(--web-bg);min-height:100vh;color:var(--web-text);font:var(--body);overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit}:focus-visible{outline:2px solid var(--web-accent);outline-offset:2px}.app{min-height:100vh}.page,.login{width:100%;max-width:var(--max-width);padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) calc(var(--tab-bar) + env(safe-area-inset-bottom,0px) + 24px);flex-direction:column;gap:16px;margin:0 auto;display:flex}.title{font:var(--title)}.label{font:var(--label)}.meta{font:var(--meta);color:var(--web-muted)}.warning{color:var(--web-warning)}.error{font:var(--meta);color:var(--web-danger)}.pending{color:var(--web-warning)}.intro{margin-top:-4px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.offline{z-index:20;padding:calc(env(safe-area-inset-top,0px) + 8px) var(--gutter) 8px;background:var(--web-panel);border-bottom:1px solid var(--web-line);color:var(--web-warning);font:var(--label);text-align:center;position:sticky;top:0}.tab-bar{z-index:10;min-height:calc(var(--tab-bar) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--web-bg);border-top:1px solid var(--web-line);justify-content:center;display:flex;position:fixed;inset:auto 0 0}.tab{max-width:calc(var(--max-width) / 3);min-height:var(--tab-bar);font:var(--label);color:var(--web-muted);flex:1;justify-content:center;align-items:center;text-decoration:none;display:flex}.tab[aria-current=page]{color:var(--web-accent)}.tab-badge{border-radius:var(--radius-full);background:var(--web-accent);min-width:20px;height:20px;color:var(--ink);font:600 .75rem/20px var(--font);font-variant-numeric:tabular-nums;text-align:center;margin-left:4px;padding:0 6px}.pull-hint{justify-content:center;align-items:flex-end;display:flex;overflow:hidden}.device-switch{align-items:center;gap:8px;display:flex}.device-switch .select{flex:1}.page-header{flex-direction:column;gap:4px;display:flex}.back{min-height:44px;font:var(--label);color:var(--web-muted);align-self:flex-start;align-items:center;text-decoration:none;display:inline-flex}.card{background:var(--web-panel);border:1px solid var(--web-line);border-radius:var(--radius-card);flex-direction:column;gap:12px;padding:16px;display:flex}.health{font:var(--label)}.sep{color:var(--web-muted)}.miss-you{position:relative}.button-love{border-radius:var(--radius-full);background:var(--web-love);width:100%;min-height:72px;color:var(--ink);font:var(--title);cursor:pointer;touch-action:manipulation;border:0;padding:12px 24px}.button-love:active{transform:scale(.98)}.hearts{pointer-events:none;width:0;height:0;position:absolute;top:0;left:50%}.heart{left:calc(var(--size) / -2);top:calc(var(--size) / -4);width:var(--size);height:var(--size);color:var(--web-love);opacity:0;animation:heart-up 1.2s ease-out var(--delay) forwards;position:absolute}@keyframes heart-up{0%{opacity:0;transform:translateY(24px)scale(.6)}20%{opacity:1}to{opacity:0;transform:translate(var(--dx), -72px) scale(1.1)}}@media (prefers-reduced-motion:reduce){.heart{display:none}}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border-radius:var(--radius-full);border:1px solid var(--web-line);background:var(--web-panel);min-height:40px;color:var(--web-text);font:var(--label);text-align:left;cursor:pointer;align-items:center;gap:4px;margin:2px 0;padding:6px 16px;display:inline-flex;position:relative}button.chip:after{content:"";position:absolute;inset:-2px 0}.chip[aria-pressed=true]{background:var(--web-accent);border-color:var(--web-accent);color:var(--ink)}.chip:disabled{opacity:.6;cursor:default}.chip-edit{cursor:default;padding-right:4px}.chip-remove{border-radius:var(--radius-full);width:44px;height:44px;color:var(--web-muted);font:400 1.25rem/1 var(--font);cursor:pointer;background:0 0;border:0;margin:-8px -4px -8px 0}.card-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.text-button{min-height:44px;color:var(--web-accent);font:var(--label);cursor:pointer;background:0 0;border:0;padding:0 4px}.sys{text-align:center}.empty{color:var(--web-muted);text-align:center;padding:16px 0}.thread{overscroll-behavior:contain;flex-direction:column;gap:12px;max-height:55vh;margin:0 -8px;padding:4px 8px;list-style:none;display:flex;overflow-y:auto}.msg{flex-direction:column;gap:4px;max-width:85%;display:flex}.msg-out{align-self:flex-end;align-items:flex-end}.msg-in{align-self:flex-start;align-items:flex-start}.msg-line{align-items:center;gap:8px;display:flex}.bubble{overflow-wrap:anywhere;min-width:0;padding:8px 12px}.bubble-out{background:var(--primary);color:var(--ink);border-radius:16px 16px 4px}.bubble-in{background:var(--web-panel);border:1px solid var(--web-line);color:var(--web-text);border-radius:16px 16px 16px 4px}.bubble-caption{border-top:1px solid var(--web-line);margin-top:4px;padding-top:4px}.msg-focus .bubble{animation:2.4s ease-out relay-focus}@keyframes relay-focus{0%,60%{outline:2px solid var(--web-accent);outline-offset:3px}to{outline-offset:3px;outline:2px solid #0000}}.voice{align-items:center;gap:8px;display:flex}.voice-play{border-radius:var(--radius-full);width:44px;height:44px;color:inherit;cursor:pointer;background:#ffffff24;border:0;flex:none;justify-content:center;align-items:center;margin:-6px 0 -6px -6px;display:inline-flex}.voice-play:disabled{opacity:.5;cursor:default}.voice-len{font:var(--label);font-variant-numeric:tabular-nums}.wave{align-items:center;gap:2px;height:20px;display:flex}.wave i{opacity:.7;background:currentColor;border-radius:2px;width:3px;display:block}.unheard-dot{border-radius:var(--radius-full);background:var(--web-love);flex:none;width:10px;height:10px}.tag{font:var(--meta)}.tag-muted{color:var(--web-muted)}.tag-success{color:var(--web-success)}.tag-warning{color:var(--web-warning)}.tag-danger{color:var(--web-danger)}.tag-button{cursor:pointer;background:0 0;border:0;min-height:44px;padding:0;text-decoration:underline}.tag-button:disabled{opacity:.6;cursor:default}.phrase-add{gap:8px;display:flex}.phrase-add .input{flex:1;min-width:0}.count{font-variant-numeric:tabular-nums;align-self:flex-end}p.warning.count{font:var(--meta)}.composer{align-items:center;gap:8px;display:flex;position:relative}.composer-input{flex:1;min-width:0}.composer-send{flex:none;padding:8px 16px}.composer .record-active{background:var(--listen);border-color:#0000}.record-float{z-index:5;border-radius:var(--radius-full);background:var(--web-panel);border:1px solid var(--web-line);font:var(--label);font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 16px;position:absolute;bottom:calc(100% + 12px);right:0}.record-float-cancel{color:var(--web-danger);border-color:var(--web-danger)}.privacy{text-align:center}.report-level{font:var(--title)}.report-stats{flex-direction:column;gap:8px;display:flex}.report-stat{grid-template-columns:4.5em 1fr;align-items:center;gap:12px;display:grid}.report-stat-value{align-items:center;gap:12px;display:flex}.report-pct{min-width:3.2em;font:var(--label);font-variant-numeric:tabular-nums;text-align:right}.report-bar{border-radius:var(--radius-full);background:var(--web-line);flex:1;height:6px;overflow:hidden}.report-bar-fill{border-radius:var(--radius-full);background:var(--web-accent);height:100%;display:block}.mood{flex-direction:column;gap:4px;display:flex}.mood-chart{width:100%;height:auto;display:block;overflow:visible}.mood-grid{stroke:var(--web-line);stroke-width:1px;vector-effect:non-scaling-stroke}.mood-axis{fill:var(--web-muted);font:400 11px/1 var(--font);font-variant-numeric:tabular-nums}.mood-value{fill:var(--web-text);font:600 12px/1 var(--font)}.mood-line{fill:none;stroke:var(--web-accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.mood-dot{fill:var(--web-accent);stroke:var(--web-panel);stroke-width:2px}.mood-hit{fill:#0000}.row{flex-direction:column;gap:4px;padding:4px 0;display:flex}.row+.row{border-top:1px solid var(--web-line);padding-top:12px}.row-main{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.row-stacked .row-main{flex-direction:column;align-items:stretch}.row-control{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row-stacked .row-control{flex-direction:column;align-items:stretch}.value{font:var(--label)}.list{gap:0;padding:0}.list-item{min-height:var(--control);font:var(--label);align-items:center;gap:8px;padding:12px 16px;text-decoration:none;display:flex}.list-item+.list-item{border-top:1px solid var(--web-line)}.list-item>span:first-child{flex:1}.chevron{color:var(--web-muted)}.button{min-height:var(--control);border-radius:var(--radius-full);font:var(--label);text-align:center;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;padding:8px 24px;text-decoration:none;display:inline-flex}.button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:default}.button-primary{background:var(--primary);color:var(--ink)}.button-secondary{background:var(--web-panel);border-color:var(--web-line);color:var(--web-text)}.button-danger{background:var(--web-danger);color:var(--ink)}.button-danger-text{color:var(--web-danger)}.button-small{min-height:44px;padding:6px 16px}.actions{flex-direction:column;gap:12px;display:flex}.input,.select{width:100%;min-height:var(--control);background:var(--web-bg);border:1px solid var(--web-line);border-radius:var(--radius-input);color:var(--web-text);padding:10px 14px}.select{width:auto;min-width:6.5em}.textarea{resize:vertical;line-height:1.6}.input-time{width:auto;min-width:7.5em}.time-range,.month-day,.anniversary-date{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.switch{text-align:left;width:100%;min-height:44px;font:var(--label);cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:0;display:flex}.switch-label{flex:1}.switch-track{border-radius:var(--radius-full);background:var(--web-bg);border:1px solid var(--web-line);flex:none;width:52px;height:32px;transition:background .15s ease-out;position:relative}.switch-thumb{border-radius:var(--radius-full);background:var(--web-muted);width:24px;height:24px;transition:transform .15s ease-out;position:absolute;top:3px;left:3px}.switch[aria-checked=true] .switch-track{background:var(--web-accent)}.switch[aria-checked=true] .switch-thumb{background:var(--web-text);transform:translate(20px)}.segmented{border-radius:var(--radius-full);background:var(--web-bg);border:1px solid var(--web-line);gap:4px;padding:4px;display:flex}.segment{border-radius:var(--radius-full);min-width:3.5em;min-height:44px;color:var(--web-muted);font:var(--label);cursor:pointer;background:0 0;border:0;flex:1;padding:4px 12px}.segment[aria-checked=true]{background:var(--web-accent);color:var(--ink)}.memories{flex-direction:column;list-style:none;display:flex}.memory{flex-direction:column;gap:4px;padding:8px 0;display:flex}.memory+.memory{border-top:1px solid var(--web-line)}.memory-link{flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;display:flex}.anniversaries{flex-direction:column;gap:16px;display:flex}.anniversary{border-bottom:1px solid var(--web-line);flex-direction:column;gap:8px;padding-bottom:16px;display:flex}.releases{flex-direction:column;list-style:none;display:flex}.release{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 0;display:flex}.release+.release{border-top:1px solid var(--web-line);padding-top:12px}.release .button{margin-top:4px}.restore-boards{flex-direction:column;margin-top:8px;list-style:none;display:flex}.restore-board{border-top:1px solid var(--web-line);flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0 4px;display:flex}.restore-actions{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.restore-progress{flex-direction:column;gap:4px;margin-top:4px;display:flex}.restore-progress progress{width:100%;accent-color:var(--primary)}.record-row{align-items:center;gap:16px;display:flex}.record{border-radius:var(--radius-full);border:1px solid var(--web-line);background:var(--web-panel);width:56px;height:56px;color:var(--web-text);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.record-active{background:var(--primary);color:var(--ink)}.record:disabled{opacity:.4;cursor:default}.recorded{flex-direction:column;gap:12px;display:flex}.player{width:100%}.login{justify-content:center;min-height:100vh;padding-bottom:32px}.wordmark{font:800 2.75rem/1.2 var(--font);text-align:center;background:var(--wordmark);color:#0000;-webkit-background-clip:text;background-clip:text}.login-form{gap:12px}.overlay{z-index:30;padding:var(--gutter);background:#07060ccc;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{width:100%;max-width:calc(var(--max-width) - 2 * var(--gutter));background:var(--web-panel);border:1px solid var(--web-line);border-radius:var(--radius-card);flex-direction:column;gap:16px;padding:24px 16px 16px;display:flex}.dialog-message{font:var(--label)}.dialog-actions{flex-wrap:wrap;gap:12px;display:flex}.dialog-actions .button{flex:8em}.skeleton{flex-direction:column;gap:8px;display:flex}.skeleton-line{background:var(--web-line);border-radius:4px;height:1em}.skeleton-line:last-child{width:60%}
