.memo-dialog{width:min(490px,calc(100vw - 1.5rem));height:auto;max-height:calc(var(--viewport-height,100dvh) - 1.5rem);margin:clamp(.75rem,8vh,5rem) auto 0;padding:1.8rem;overflow:auto;overscroll-behavior:contain}
.memo-dialog[open]{display:flex;flex-direction:column;gap:1rem}
.memo-dialog h2{font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1;letter-spacing:-.035em;font-weight:600;margin:.5rem 0 0;text-wrap:balance;outline:none}
.memo-dialog p{font-size:1rem;line-height:1.5;margin:0;color:var(--ink)}
.memo-dialog .memo-promise{padding:.9rem 0;color:var(--muted)}
.memo-dialog .button{justify-content:center;min-height:44px;padding:.8rem 1rem}
.memo-text-button{min-height:44px;text-decoration:underline;text-underline-offset:4px;font-size:.9rem}
.memo-dialog .memo-footnote{font-size:.75rem;color:var(--muted);text-align:center}
.memo-close{align-self:flex-end}.memo-close+h2{margin-top:-.3rem;font-size:clamp(1.45rem,4.5vw,2rem);max-width:20ch}
#memo-preview{width:100%;height:190px;object-fit:contain;background:var(--field);border-radius:8px}
#memo-preview:not([src]){display:none}
#memo-social{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
#share-status{font-size:.8rem;min-height:2.4em;color:var(--muted)}
.memo-finish{display:flex;gap:.6rem}.memo-finish>*{flex:1}
#private-memo-actions{display:flex;align-items:center;gap:.6rem;margin-top:.65rem;flex-wrap:wrap}
#private-memo-actions[hidden],#my-memo[hidden]{display:none}
#memo-privacy{font-size:.75rem;color:var(--muted);margin-right:auto}
#private-memo-actions .button{min-height:40px;font-size:.8rem;padding:.5rem .7rem}
@media(max-width:600px){.memo-dialog{padding:1.2rem;margin:.75rem auto 0}#memo-preview{height:160px}.memo-finish{flex-direction:column}.header-actions{gap:.35rem}#private-memo-actions{gap:.4rem}#memo-privacy{flex-basis:100%}}
@media(prefers-reduced-motion:no-preference){#first-memo[open]{animation:memo-arrive .25s cubic-bezier(.16,1,.3,1)}@keyframes memo-arrive{from{transform:translateY(12px);opacity:.65}to{transform:translateY(0);opacity:1}}}
/* Help: a miniature and its invitation, in the player's material language. */
#welcome-memo{width:min(900px,calc(100vw - 2rem));height:auto;max-height:calc(var(--viewport-height,100dvh) - 2rem);top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh)/2);transform:translateY(-50%);margin:0 auto;padding:2rem;gap:0;border:1px solid var(--metal-rim);border-radius:18px;text-align:left;scrollbar-color:var(--muted) var(--shell);scrollbar-width:thin;box-shadow:inset 0 1px var(--highlight),0 2px 0 var(--metal-edge),0 20px 60px #0004}
#welcome-memo[open]{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"toy intro" "toy signup" "footer footer";column-gap:2rem}
.welcome-header{grid-area:intro;min-width:0;padding-top:1.5rem}
#welcome-heading{font-size:2rem;margin:0;line-height:1.12;letter-spacing:-.035em;font-weight:600;max-width:14ch;text-wrap:initial}
#welcome-close{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;min-width:2.75rem;padding:.65rem;background:transparent;border:0;box-shadow:none;color:var(--muted);cursor:pointer}
#welcome-close svg{width:1.25rem;height:1.25rem}
#welcome-close:hover,#welcome-close:active{color:var(--ink);background:transparent;box-shadow:none;transform:none}
#welcome-close:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:6px}
#welcome-description{margin:.85rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--muted);max-width:32ch;text-wrap:balance}
.welcome-free{display:block;margin-top:.35rem;font-size:.8125rem;color:var(--muted)}
.welcome-toy{grid-area:toy;min-width:0}
#welcome-flip{display:block;width:100%;height:340px;padding:0;border:0;border-radius:12px;background:transparent;perspective:1100px;overflow:clip}
.welcome-flipper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 750ms cubic-bezier(.16,1,.3,1)}
#welcome-flip.is-turned .welcome-flipper{transform:rotateY(180deg)}
.welcome-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:12px;backface-visibility:hidden;background:var(--field)}
.welcome-photo{background:#171b1d}
.welcome-face img,.welcome-face canvas{display:block;width:100%;height:100%}
.welcome-face img{object-fit:cover;object-position:63% 48%}
.welcome-world{transform:rotateY(180deg);box-shadow:inset 0 1px 3px #00000016}
.welcome-caption{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.75rem .125rem 0;font-size:.75rem;line-height:1.4}
.welcome-caption>span:first-child{font-weight:600}
.welcome-place{font-weight:400;color:var(--muted);margin-left:.25rem}
#welcome-hint{color:var(--muted);text-align:right}
#welcome-beta-form{grid-area:signup;display:flex;flex-direction:column;gap:.75rem;align-self:end;min-width:0;margin:1.75rem 0 1.6rem}
#welcome-beta-heading{font-size:1.125rem;line-height:1.4;font-weight:500;letter-spacing:-.015em;margin:0;max-width:25ch;text-wrap:balance}
.welcome-email-row{display:flex;gap:.375rem;min-width:0;align-items:stretch;padding:4px;border:1px solid var(--metal-rim);border-radius:9px;background:var(--field);box-shadow:inset 0 1px 2px var(--metal-dent)}
.welcome-email-row:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.welcome-email-row[hidden]{display:none}
#welcome-beta-email{width:100%;min-width:0;min-height:44px;padding:.55rem .6rem;border:0;border-radius:5px;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:1.4;caret-color:var(--focus);box-shadow:none;outline:none}
#welcome-beta-email::placeholder{color:var(--muted);opacity:1}
#welcome-beta-submit{flex:0 0 auto;min-width:6rem;min-height:44px;padding:.65rem .8rem;font-size:.8125rem;white-space:nowrap;border-radius:5px;box-shadow:inset 0 1px var(--metal-hi),0 1px 2px var(--metal-shadow)}
#welcome-beta-submit:disabled{cursor:wait;opacity:.7}
#welcome-memo #welcome-beta-status{font-size:.75rem;line-height:1.5;margin:0;color:var(--muted)}
#welcome-beta-form[data-error=true] #welcome-beta-status{color:var(--ink);font-weight:500}
.welcome-footer{grid-area:footer;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding-top:.9rem;border-top:1px solid var(--metal-rim)}
.welcome-actions{display:flex;align-items:center;gap:1.5rem}
#welcome-start,#welcome-skip{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;min-height:44px;padding:0;color:var(--ink);white-space:nowrap;text-decoration:none}
#welcome-start{font-weight:600}
#welcome-skip{color:var(--muted)}
#welcome-start [data-icon]{display:flex;width:.875rem;height:.875rem}
#welcome-start:hover,#welcome-skip:hover{text-decoration:underline;text-underline-offset:4px}
#welcome-memo .welcome-instructions{font-size:.75rem;line-height:1.5;color:var(--muted);margin:0;white-space:nowrap}
#welcome-memo ::selection{background:var(--blue);color:#fff}
@media(max-width:760px){
#welcome-memo{width:min(480px,calc(100vw - 1.5rem));padding:1.5rem;max-height:calc(var(--viewport-height,100dvh) - 1.5rem)}
#welcome-memo[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"intro" "toy" "signup" "footer"}
.welcome-header{padding:0 0 1.25rem}
#welcome-heading{font-size:1.75rem;line-height:1.13;max-width:none;padding-right:1.25rem}
#welcome-description{margin:.65rem 0 0;max-width:none;font-size:.875rem;text-wrap:initial}
#welcome-flip{height:228px}
#welcome-beta-form{margin:1.4rem 0 0;gap:.7rem}
#welcome-beta-heading{font-size:1.0625rem;max-width:none;text-wrap:balance}
.welcome-footer{display:block;margin-top:1.1rem;padding-top:.4rem}
.welcome-actions{justify-content:space-between;gap:.5rem}
#welcome-memo .welcome-instructions{font-size:.6875rem;text-align:center;margin:.15rem 0 0}
}
@media(max-width:760px) and (max-height:720px){#welcome-memo{padding:1.1rem 1.25rem}.welcome-header{padding-bottom:1rem}#welcome-heading{font-size:1.6rem}#welcome-description{margin:.5rem 0 0}#welcome-flip{height:190px}#welcome-beta-form{margin:1rem 0 0}.welcome-footer{margin-top:.8rem}}
@media(prefers-reduced-motion:reduce){.welcome-flipper{transition:none}}
.alpha-help{font-size:13px;min-width:44px;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#memo-regenerate[hidden]{display:none}