/* Account and contribution controls. Shared colors come from style.css. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.message-copy{white-space:pre-wrap;overflow-wrap:anywhere}
.story-editor{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.story-editor h3{margin:0}.editor-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:10px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px 10px 0 0;margin-top:20px}
.editor-toolbar button{min-width:36px;min-height:36px;border-radius:6px;padding:4px 10px;font-size:14px;border:1px solid transparent;color:var(--ink)}
.editor-toolbar button:hover,.editor-toolbar button:focus-visible{background:var(--surface);border-color:var(--line)}
.editor-toolbar [data-format=bold]{font-weight:800}.editor-toolbar [data-format=italic]{font-family:Georgia,serif;font-style:italic}.editor-toolbar [data-story-preview]{margin-left:auto;font-size:12px}
.story-document{font-size:15px;line-height:1.85;overflow-wrap:anywhere;text-align:left}
.story-document p{margin:0 0 15px}.story-document h3{font-family:var(--font-heading);font-size:25px;line-height:1.3;color:var(--ink);margin:28px 0 16px}.story-document blockquote{margin:20px 0;padding:12px 20px;border-left:3px solid var(--ink);background:var(--surface-soft);font-family:Georgia,serif;font-size:20px}
.story-document a{text-decoration:underline;text-underline-offset:3px}.story-bullet{padding-left:22px;position:relative}.story-bullet:before{content:'•';position:absolute;left:5px}
#story-editor,#story-preview{min-height:210px;padding:22px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--surface);outline:none}
#story-editor:focus{box-shadow:inset 0 0 0 1px var(--ink)}#story-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.product-story{padding:20px 0;border-top:1px solid var(--line);margin-top:22px}
.post-comments{margin-bottom:35px;padding-bottom:30px;border-bottom:1px solid var(--line)}.post-comments h3{margin:0}.post-comments #comment-form{display:grid;gap:10px;margin-top:20px}.post-comments #comment-form .btn{justify-self:end}.comment-empty{display:flex;gap:15px;align-items:center;color:var(--muted);padding:20px 0}.comment-empty>span{font-size:35px}.post-comments .text-btn{font-size:11px;margin-right:14px}.post-comments .discussion-message{padding:17px 0}
.messages-intro{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:65px 30px 45px}.messages-intro h1,.terms-heading h1{font-family:var(--font-heading);font-size:clamp(35px,4.5vw,64px);line-height:1.08;letter-spacing:-2.5px;font-weight:500;margin:20px 0}.messages-intro h1 em,.terms-heading h1 em{font-family:Georgia,serif;font-weight:400}.messages-intro p,.terms-heading p{color:var(--muted);font-size:14px}.messages-intro img{width:310px;height:240px;object-fit:contain}.inbox-panel{max-width:900px}
.inbox-row{display:flex;align-items:center;gap:17px;width:100%;padding:23px 8px;border-bottom:1px solid var(--line);text-align:left;transition:background .2s}.inbox-row:hover{background:var(--surface-soft)}.inbox-row>span:nth-child(2){flex:1;min-width:0;display:grid;gap:5px}.inbox-row strong{font-size:14px}.inbox-row strong small{font-weight:400}.inbox-row span>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inbox-row small,.inbox-row time{font-size:10px;color:var(--muted)}
dialog[data-kind=chat]{width:min(700px,calc(100% - 24px));padding:28px}.chat-heading{display:flex;align-items:center;gap:15px;padding-right:30px}.chat-heading h2{font-size:22px;margin:0}.chat-heading p{font-size:11px;margin:4px 0;color:var(--muted)}.chat-heading>div{flex:1}.chat-heading>.text-btn{font-size:12px}
#chat-log{height:min(47vh,450px);min-height:180px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 12px;background:var(--surface-soft);border-radius:13px;border:1px solid var(--line)}
.chat-message{max-width:86%;padding:13px 17px;background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 3px;animation:chat-in .2s ease-out}.chat-message.own{align-self:flex-end;background:var(--ink);color:var(--surface);border-color:var(--ink);border-radius:16px 16px 3px 16px}.chat-message p{margin:0;font-size:13px;line-height:1.7}.chat-message>div{display:flex;gap:15px;justify-content:space-between;margin-top:8px;opacity:.7}.chat-message time,.chat-message .text-btn{font-size:9px;color:inherit}.chat-message .text-btn{padding:0}#chat-form{display:flex!important;align-items:flex-end;gap:10px!important;margin-top:12px!important}#chat-form textarea{flex:1;resize:vertical;min-width:0;max-height:150px}#chat-form .btn{flex-shrink:0}
.terms-heading{padding:65px 20px 50px}.terms-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:45px;align-items:start}.terms-layout>aside{position:sticky;top:115px;padding-top:15px}.terms-layout>aside a{display:flex;align-items:center;gap:12px;text-decoration:none;padding:13px 0;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}.terms-layout>aside a:hover{color:var(--ink)}.terms-layout>aside a span{font-size:10px}.terms-layout .page-panel{margin:0;max-width:none;padding:36px}.terms-layout article section{scroll-margin-top:110px;border-bottom:1px solid var(--line);padding:20px 0}.terms-layout article h2{font-size:22px}.terms-layout article p{font-size:13px;line-height:1.9;color:var(--muted)}
@keyframes chat-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.header-inner{gap:16px;padding:0 22px}nav button{padding:10px!important}.header-inner .brand{font-size:25px}.header-inner .actions .btn{font-size:11px}}
@media(max-width:800px){.terms-layout{grid-template-columns:1fr;gap:15px}.terms-layout>aside{position:static;display:none}.terms-layout .page-panel{padding:24px}.messages-intro{padding:40px 0 25px}.messages-intro img{width:230px;height:200px}.header-inner nav{overflow-x:auto}.story-editor{padding:16px}}
@media(max-width:520px){.messages-intro{align-items:flex-start;gap:0}.messages-intro img{width:120px;height:130px;margin-left:-25px;opacity:.8}.messages-intro>div{position:relative;z-index:1}.messages-intro h1{font-size:37px;letter-spacing:-1.5px}.messages-intro p{font-size:12px;max-width:250px}.inbox-row{gap:10px}.inbox-row strong small{display:block}.inbox-row>time{display:none}dialog[data-kind=chat]{padding:20px 14px}.chat-heading{gap:9px}.chat-heading h2{font-size:18px}.chat-message{max-width:92%}.terms-heading{padding:40px 0 25px}.terms-heading h1{letter-spacing:-1.5px}.story-document h3{font-size:21px}.editor-toolbar{gap:2px;padding:6px}.editor-toolbar button{padding:4px 6px;min-width:30px}.post-comments .badge{font-size:8px}.header-inner .actions .btn span{display:none}}
@media(prefers-reduced-motion:reduce){.chat-message{animation:none}}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.settings-grid .page-panel,.studio-panel{width:100%;max-width:none}.settings-actions{display:grid;gap:11px;margin-top:24px}.settings-actions .btn{justify-content:flex-start;padding-left:16px}.auth-divider{text-align:center;margin:24px 0;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:12px}.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}.google-signin{width:100%;margin-top:16px}#email-form,#code-form,#profile-form,#feedback-form,#modal form{display:grid;gap:18px;margin-top:20px}.rules-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.7;font-weight:500}.rules-check input{width:18px;min-height:18px;accent-color:var(--accent);flex:0 0 18px;margin-top:2px}fieldset{border:1px solid var(--line);border-radius:11px;padding:18px;display:grid;gap:10px}legend{font-size:12px;padding:0 8px}.example-details{margin-top:20px}.example-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.example-grid img{width:100%;border-radius:8px;transition:transform .3s}.example-grid img:hover{transform:scale(1.035)}.upload-zone{display:grid;gap:14px;border:1px dashed var(--muted);border-radius:12px;padding:25px;background:var(--surface-soft);cursor:pointer;margin:20px 0}.upload-zone input{background:var(--surface);font-size:12px!important}.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px;overflow-wrap:anywhere}.file-row span{min-width:0}.file-row small{display:block;color:var(--muted);font-size:10px}.rules-page li{margin:14px 0;line-height:1.8;color:var(--muted);font-size:13px}.rules-page h3{margin-top:30px;font-family:var(--font-heading);font-size:20px;font-weight:500}.profile-launch{display:grid;gap:7px;width:100%;border:0;border-bottom:1px solid var(--line);padding:19px 0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}.profile-launch:hover strong{color:var(--accent)}.profile-launch>span{color:var(--muted);font-size:12px}.setup-key{display:block;padding:18px;overflow-wrap:anywhere;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;user-select:all}.recovery-codes{font-size:13px;line-height:1.8;user-select:all;white-space:pre-wrap}input,select,textarea{font-size:16px!important}button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:800px){.settings-grid{grid-template-columns:1fr}.launch-gallery img,.launch-gallery video{max-height:300px}}@media(max-width:520px){.example-grid{grid-template-columns:1fr}.dialog-actions .btn{flex:1}}@media(prefers-reduced-motion:reduce){.example-grid img{transition:none}.example-grid img:hover{transform:none}}

@media(max-width:520px){.header-inner nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:100%;overflow:visible}.header-inner nav button{justify-content:center;gap:5px;padding:9px 4px!important;font-size:10px;min-width:0}.header-inner nav button .ui-icon{width:14px;height:14px;flex-shrink:0}}
/* A quiet, tactile reaction. Color and count change only after the server
   confirms the write; reduced-motion users get the same state without motion. */
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.post-like{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;transition:color .18s,background .18s,border-color .18s;isolation:isolate}
.post-like .like-heart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.post-like .ui-icon{width:18px;height:18px;display:block;flex-shrink:0}
.post-like svg{overflow:visible;transition:fill .18s;fill:transparent}
.post-like.is-liked{color:#ce3659;background:color-mix(in srgb,#e5476c 8%,var(--surface));border-color:color-mix(in srgb,#e5476c 25%,var(--line))}
.post-like.is-liked svg{fill:currentColor}
.post-like .like-count{min-width:1ch;font-variant-numeric:tabular-nums;color:inherit}
.post-like:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.post-like:disabled{cursor:wait;opacity:.65}
.post-like.like-confirmed .like-heart{animation:like-heart-pop .48s cubic-bezier(.2,.7,.3,1)}
.post-like.like-confirmed .like-count{animation:like-count-rise .32s ease-out}
.post-like.unlike-confirmed .like-heart{animation:like-heart-release .22s ease-out}
.post-like.like-confirmed .like-heart::after{content:"";position:absolute;inset:7px;border-radius:50%;background:transparent;box-shadow:0 -15px 0 -1px #e5476c,13px -8px 0 -1px #efb469,13px 8px 0 -1px #e5476c,0 15px 0 -1px #efb469,-13px 8px 0 -1px #e5476c,-13px -8px 0 -1px #efb469;pointer-events:none;animation:like-sparks .5s ease-out both}
.detail-reactions{margin:0 0 16px}
@media(hover:hover){.post-like:not(:disabled):hover{color:#ce3659;background:color-mix(in srgb,#e5476c 6%,var(--surface));border-color:color-mix(in srgb,#e5476c 30%,var(--line))}.post-like:not(:disabled):hover .like-heart{transform:scale(1.1)}}
@keyframes like-heart-pop{0%{transform:scale(.8)}38%{transform:scale(1.35) rotate(-9deg)}68%{transform:scale(.96) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes like-count-rise{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes like-heart-release{50%{transform:scale(.85)}100%{transform:scale(1)}}
@keyframes like-sparks{0%{opacity:0;transform:scale(.35)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@media(max-width:680px){.post-meta{gap:8px}.post-like{min-height:40px;padding:7px 9px}.post-footer{flex-wrap:wrap}.post-meta .task-duration{font-size:9px}.post-like .like-label{display:none}.detail-reactions .like-label{display:inline}}
@media(max-width:400px){.post-meta{width:100%;justify-content:space-between}.post-footer .post-actions{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.post-like,.post-like svg,.post-like .like-heart,.post-like .like-count,.post-like .like-heart::after{animation:none!important;transition:none!important;transform:none!important}.post-like .like-heart::after{display:none}}