:root {
  color-scheme: light dark;
  --page: #f5f5f5; --text: #000; --muted: #8a8a8a;
  --bubble: rgb(255 255 255 / .5); --bubble-text: rgb(67 67 67 / .85);
  --overlay: rgb(255 255 255 / .8); --glass: rgb(0 0 0 / .07);
  --source: #e1e1e1; --menu: rgb(222 222 222 / .92); --accent: #32b4f5;
  --line: rgb(0 0 0 / .12); --inverse: #fff; --focus: #000;
  --ease-out: cubic-bezier(.23,1,.32,1); --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  font-family: Helvetica, Arial, sans-serif; font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root { --page:#000; --text:#f5f5f5; --muted:#a1a1a1; --bubble:rgb(77 77 77 / .5); --bubble-text:rgb(255 255 255 / .85); --overlay:rgb(12 12 14 / .88); --glass:rgb(255 255 255 / .1); --source:#29292c; --menu:rgb(42 42 45 / .95); --line:rgb(255 255 255 / .16); --inverse:#000; --focus:#f5f5f5; }
  .identity-label { background:var(--accent)!important; color:#000; }
  .mono-icon { filter:none!important; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; color:inherit; -webkit-tap-highlight-color:transparent; }
button,a,[role="button"] { touch-action:manipulation; }
button { transition:transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
button:active { transform:scale(.97); }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
a { color:var(--accent); text-decoration:none; }
[hidden] { display:none!important; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app-shell { width:402px; max-width:100%; min-height:100dvh; margin-inline:auto; position:relative; }
.identity { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:76px; height:88px; z-index:3; pointer-events:none; }
.identity-photo { position:absolute; top:0; left:6px; width:64px; height:64px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 150px 180px rgb(173 191 241 / .12); }
.portrait-bg { position:absolute; width:142.895px; height:80.421px; object-fit:cover; left:-62.835px; top:-4.65px; filter:blur(13.964px); }
.portrait { position:absolute; width:72.145px; height:72.145px; left:-1.16px; top:3.49px; object-fit:cover; }
.identity-label { position:absolute; top:54px; left:0; width:76px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:20px; font-size:16px; line-height:20px; font-weight:700; background:rgb(0 0 0 / .09); backdrop-filter:blur(24px); }
.messages { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:40px 16px 32px; }
.home-bubble { position:relative; max-width:100%; padding:12px 16px; border-radius:22.5px; background:var(--bubble); color:var(--bubble-text); box-shadow:15px 12px 20px rgb(0 0 0 / .06); font-size:18px; line-height:22.5px; font-weight:700; cursor:pointer; transform-origin:bottom left; outline-offset:5px; }
.home-bubble p { margin:0; overflow-wrap:anywhere; }
.home-bubble[data-message="hello"] { width:139px; }
.home-bubble[data-message="intro"] { width:262px; }
.home-bubble[data-message="work"] { width:298px; }
.home-bubble[data-message="contact"] { width:324px; letter-spacing:-.12px; }
.home-bubble[data-message="farewell"] { width:298px; }
.home-bubble.has-comments { padding-bottom:8px; }
.greeting-cat { position:fixed; width:96.97px; height:96.97px; padding:0; background:none; border:0; border-radius:24px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:none; z-index:4; }
.greeting-cat { transform-origin:center; }
.greeting-cat.is-dragging { cursor:grabbing; opacity:.5; outline:none; border:0; }
.greeting-cat:focus:not(:focus-visible) { outline:none; }
.greeting-cat img,.greeting-cat canvas { width:100%; height:100%; object-fit:contain; transform:scaleX(-1); pointer-events:none; }
.greeting-cat canvas { display:none; }
.comment-summary { display:flex; align-items:center; margin-top:8px; height:24px; isolation:isolate; }
.comment-summary .avatar { width:24px; height:24px; margin-left:-8px; font-size:12px; line-height:24px; box-shadow:0 0 0 1px var(--bubble); flex:0 0 24px; }
.comment-summary .avatar:nth-child(2) { z-index:3; } .comment-summary .avatar:nth-child(3) { z-index:2; } .comment-summary .avatar:nth-child(4) { z-index:1; }
.comment-count { z-index:4; border-radius:50%; height:24px; min-width:24px; padding:0 3px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#666eed 6%,#d08fdd 45%,#fe9f11 100%); font-size:14px; font-variant-numeric:tabular-nums; line-height:17px; }
.avatar { position:relative; display:grid; place-items:center; border-radius:50%; overflow:hidden; font:600 18px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#fff; background:var(--accent); flex-shrink:0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.is-blurred::after { content:""; position:absolute; inset:0; backdrop-filter:blur(4px); background:rgb(255 255 255 / .16); }
.typing-bubble { display:flex; align-items:center; gap:4px; width:69px; height:41px; padding:12px 16px; border-radius:24px 24px 24px 0; background:var(--bubble); box-shadow:15px 12px 20px rgb(0 0 0 / .06); transform-origin:bottom left; }
.typing-bubble i { width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.45; animation:typing 900ms ease-in-out infinite alternate; }
.typing-bubble i:nth-child(2) { animation-delay:120ms; } .typing-bubble i:nth-child(3) { animation-delay:240ms; }
@keyframes typing { to { opacity:.8; transform:translateY(-3px); } }
.connection-error,.no-script { margin:20px 26px; font-size:14px; line-height:1.4; color:var(--muted); }
.upload-status { margin:8px 16px 0 78px; font-size:13px; color:var(--muted); }
.thread-dialog { padding:0; border:0; margin:0 auto; top:0; bottom:auto; width:402px; max-width:100vw; height:100dvh; max-height:100dvh; background:transparent; color:var(--text); overflow:visible; }
.thread-dialog::backdrop { background:var(--overlay); backdrop-filter:blur(12px); opacity:0; transition:opacity 200ms var(--ease-out); }
.thread-dialog[open]:not(.is-closing)::backdrop { opacity:1; }
@starting-style { .thread-dialog[open]::backdrop { opacity:0; } }
.thread-dialog .morph-surface { position:absolute; inset:0; background:var(--overlay); border-radius:0; transform-origin:top left; clip-path:inset(0px 0px 0px 0px round 0px); pointer-events:none; }
.thread-dialog.is-morphing .morph-surface { will-change:clip-path,opacity; }
.thread-content { position:absolute; inset:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; font-weight:500; }
.circle-button { display:flex; align-items:center; justify-content:center; width:64px; height:64px; flex:0 0 64px; background:var(--glass); border-radius:50%; backdrop-filter:blur(20px); padding:0; }
.close-button { position:absolute; top:20px; right:20px; z-index:6; }
.mono-icon { filter:brightness(0); }
.thread-view { position:absolute; inset:0; }
.thread-scroll { position:absolute; inset:130px 0 0; overflow-y:auto; overscroll-behavior:contain; padding:0 26px 220px; scrollbar-width:thin; }
.source-message { background:var(--source); border-radius:20px; padding:13.85px 18.46px; font-size:18px; line-height:24px; font-weight:510; overflow-wrap:anywhere; }
.source-message p { margin:0; }
.comments { display:flex; flex-direction:column; gap:32px; margin-top:18px; }
.comment { display:flex; align-items:flex-start; gap:4px; width:100%; padding-left:8px; position:relative; }
.comment.has-drawing { margin-top:80px; }
.comment-body { min-width:0; flex:1; position:relative; }
.comment-bubble { position:relative; border-radius:20px; padding:13.85px 18.46px; background:var(--accent); color:#fff; font-size:18px; line-height:24px; font-weight:510; overflow-wrap:anywhere; white-space:pre-wrap; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.comment-meta { margin:5px 0 0; font-size:14px; line-height:17px; color:var(--muted); text-align:right; overflow-wrap:anywhere; font-weight:400; }
.comment > .avatar { width:47px; height:47px; }
.comment.is-context-active { z-index:15; }
.comment-bubble.is-sticker-only { background:transparent; padding:0; }
.comment-bubble .standalone-art { position:relative; inset:auto; }
.drawing-art { position:absolute; left:0; top:0; width:100%; aspect-ratio:350 / 300; transform:translateY(-43.333%); overflow:visible; pointer-events:none; z-index:1; }
.placed-sticker { position:absolute; height:auto; aspect-ratio:1; object-fit:contain; transform:translate(-50%,-50%) rotate(var(--rotation,0deg)); pointer-events:none; z-index:2; }
.thread-status { font-size:14px; color:var(--muted); text-align:center; margin:24px 0; }
.thread-status:empty { display:none; }
.composer { position:absolute; bottom:max(27px,env(safe-area-inset-bottom)); left:26px; right:26px; z-index:5; }
.composer-row { display:flex; gap:8px; align-items:flex-start; }
.composer-side { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 64px; }
.input-wrap { position:relative; flex:1; min-width:0; border-radius:20px; background:var(--glass); backdrop-filter:blur(24px); }
.input-wrap:focus-within { outline:2px solid var(--focus); outline-offset:-2px; }
#comment-input { display:block; position:relative; z-index:2; width:100%; height:64px; min-height:64px; max-height:220px; resize:none; padding:22px 78px 18px 15px; border:0; border-radius:20px; background:transparent; color:var(--text); outline:0; font-size:16px; font-weight:510; line-height:20px; }
#comment-input::placeholder { color:var(--muted); opacity:.75; }
#comment-input.has-text { padding-top:12px; padding-bottom:12px; }
.send-button { position:absolute; bottom:8px; right:8px; display:grid; place-items:center; width:64px; height:48px; padding:0; border-radius:24px; background:var(--accent); color:#fff; z-index:3; }
.draft-art { position:absolute; inset:0; pointer-events:none; z-index:4; }
.avatar-preview { width:38px; height:38px; border-radius:50%; padding:0; overflow:hidden; position:relative; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; }
.avatar-preview::after { content:'×'; position:absolute; inset:0; background:rgb(0 0 0 / .3); color:#fff; display:grid; place-items:center; opacity:0; }
.avatar-preview:focus-visible::after { opacity:1; }
.attachment-actions { display:flex; gap:12px; justify-content:flex-end; padding-top:10px; }
.attachment-actions button { font-size:12px; padding:4px 0; background:transparent; color:var(--muted); }
.edit-status { display:flex; justify-content:space-between; padding:6px 2px 10px 72px; font-size:13px; color:var(--muted); }
.edit-status button { color:var(--accent); background:transparent; padding:0; }
.form-error { color:#e63d3d; font-size:13px; line-height:18px; margin:10px 0 0; }
.dropdown { position:fixed; inset:auto; margin:0; width:258px; padding:20px 24px; border:0; border-radius:20px; color:var(--text); background:var(--menu); backdrop-filter:blur(16px); box-shadow:0 12px 40px rgb(0 0 0 / .05); transform-origin:bottom left; overflow:visible; }
.dropdown:popover-open { display:flex; flex-direction:column; gap:16px; }
.dropdown button { display:flex; align-items:center; gap:12px; width:100%; min-height:32px; padding:0; text-align:left; white-space:nowrap; background:none; font-size:16px; font-weight:510; }
.dropdown button img { object-fit:contain; flex-shrink:0; }
.dropdown button[data-add="avatar"] img { transform:scale(1.1); }
.context-menu { width:246px; transform-origin:top right; }
.editor-view { position:absolute; inset:0; }
.editor-footer { position:absolute; bottom:max(27px,env(safe-area-inset-bottom)); left:16px; right:27px; display:flex; flex-direction:column; gap:22px; }
.pill-button { height:68px; border-radius:999px; padding:0 24px; width:100%; font-size:16px; font-weight:510; }
.neutral-button { background:var(--text); color:var(--inverse); }
.primary-button { background:var(--accent); color:#fff; }
.danger-button { background:#fe3030; color:#fff; }
.drawing-colors { display:flex; gap:12px; padding-left:11px; }
.drawing-history { display:grid; grid-template-columns:68px minmax(0,1fr) 68px; align-items:center; gap:12px; }
.history-button { display:grid; place-items:center; width:68px; height:68px; aspect-ratio:1; border-radius:50%; padding:0; background:var(--glass); }
.color-button { width:48px; height:48px; flex:0 0 48px; padding:0; border-radius:50%; display:grid; place-items:center; }
.color-button img { display:none; }
.color-button[aria-pressed="true"] img { display:block; }
.drawing-stage { position:absolute; left:26px; right:26px; top:50%; height:300px; transform:translateY(-65%); }
.art-message { background:var(--accent); color:#fff; border-radius:20px; padding:14px 18px; font-size:18px; line-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; }
.drawing-stage .art-message { position:absolute; top:130px; left:0; right:0; max-height:210px; overflow:auto; }
#drawing-canvas { width:100%; height:300px; position:absolute; inset:0; touch-action:none; cursor:crosshair; z-index:3; }
.drawing-tools { position:absolute; top:130px; left:26px; right:26px; display:flex; justify-content:flex-end; z-index:4; }
.text-button { font-size:13px; font-weight:500; padding:8px 0; background:transparent; color:var(--muted); }
.drawing-pen { position:absolute; width:160px; height:160px; object-fit:contain; top:0; left:0; transform:translate(-6.25px,-149.06px); pointer-events:none; z-index:5; transition:none; }
.editor-hint { position:absolute; top:135px; left:30px; right:30px; font-size:13px; color:var(--muted); text-align:center; }
.sticker-stage { position:absolute; top:50%; left:16px; right:16px; transform:translateY(-50%); border:3px dashed var(--source); border-radius:16px; padding:40px; min-height:168px; touch-action:none; }
.sticker-stage .art-message { font-size:14px; line-height:18.5px; padding:11px 15px; border-radius:16px; pointer-events:none; }
.sticker-drawing { position:absolute; inset:40px; pointer-events:none; }
.sticker-handle { position:absolute; width:80px; height:80px; padding:0; background:transparent; outline:1px solid var(--accent); border:0; transform:translate(-50%,-50%) rotate(var(--rotation,0deg)); cursor:grab; touch-action:none; transition:none; }
.sticker-handle:active { cursor:grabbing; transform:translate(-50%,-50%) rotate(var(--rotation,0deg)); }
.sticker-handle img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.sticker-transform-handle { position:absolute; width:24px; height:24px; padding:0; border:0; background:transparent; transform:translate(-50%,-50%); touch-action:none; transition:none; }
.sticker-transform-handle:active { transform:translate(-50%,-50%); }
.sticker-resize { z-index:3; }
.sticker-resize::after { content:''; position:absolute; inset:8px; background:#fff; border:1px solid var(--accent); }
.sticker-rotate { z-index:2; cursor:url('/assets/rotate-cursor.svg') 16 16, crosshair; color:var(--accent); }
.sticker-rotate img { opacity:0; }
.sticker-rotate:focus-visible img { opacity:1; }
@media (hover:hover) and (pointer:fine) { .sticker-rotate:focus:not(:focus-visible) { outline:none; } .sticker-rotate:hover img,.sticker-rotate.is-active img { opacity:0; } }
@media (pointer:coarse) { .sticker-rotate[data-rotate="tr"] img { opacity:.7; } .sticker-rotate:not([data-rotate="tr"]) { visibility:hidden; } .sticker-transform-handle { width:30px; height:30px; } .sticker-resize::after { inset:11px; } }
.sticker-settings { display:flex; gap:20px; padding:0 10px; }
.sticker-settings label { display:flex; flex-direction:column; gap:8px; width:50%; font-size:12px; color:var(--muted); }
.sticker-settings input { width:100%; accent-color:var(--accent); }
.name-center { position:absolute; top:50%; left:16px; right:16px; transform:translateY(-34px); }
#author-name { width:100%; height:68px; border:2px solid var(--focus); border-radius:20px; padding:0 14px; font-size:16px; font-weight:510; color:var(--text); background:transparent; outline:none; }
#author-name::placeholder { color:var(--muted); }
.captcha-widget { display:flex; justify-content:center; margin-top:20px; }
.captcha-status { color:var(--muted); font-size:12px; line-height:17px; text-align:center; margin:8px 0; }
.confirm-dialog { padding:24px; width:350px; max-width:calc(100vw - 32px); border:0; border-radius:24px; color:var(--text); background:var(--page); }
.confirm-dialog::backdrop { background:rgb(0 0 0 / .3); backdrop-filter:blur(8px); }
.confirm-dialog h2 { margin:0 0 8px; font-size:20px; }
.confirm-dialog p { font-size:15px; color:var(--muted); margin:0 0 24px; }
.confirm-actions { display:flex; gap:10px; } .confirm-actions button { height:48px; padding:0 18px; }
.toast { position:fixed; left:50%; bottom:24px; max-width:calc(100vw - 40px); padding:12px 20px; border-radius:18px; background:var(--text); color:var(--inverse); font-size:14px; line-height:20px; text-align:center; opacity:0; transform:translate(-50%,8px); transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out); pointer-events:none; z-index:100; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.load-more { display:block; margin:20px auto; }
@media (hover:hover) and (pointer:fine) { .home-bubble:hover { box-shadow:10px 10px 24px rgb(0 0 0 / .08); } .dropdown button:hover { color:var(--accent); } .avatar-preview:hover::after { opacity:1; } }
@media (max-width:390px) { .drawing-colors { gap:8px; padding-left:0; justify-content:space-between; } .color-button { width:44px; height:44px; flex-basis:44px; } }
@media (prefers-reduced-motion:reduce) { button { transition:opacity 160ms var(--ease-out); } button:active { transform:none; } .sticker-transform-handle:active { transform:translate(-50%,-50%); } .typing-bubble i { animation:none; } .toast { transform:translate(-50%,0); transition:opacity 160ms var(--ease-out); } }

@media (prefers-reduced-motion:reduce) { .greeting-cat img { display:none; } .greeting-cat canvas { display:block; } }