@charset "UTF-8";
:root { color-scheme: light; --ink:#33263e; --paper:#fcf6df; --blue:#607987; --sage:#92a477; --gold:#e8ba60; --wood:#ac7955; font-family:"Avenir Next", "Trebuchet MS", sans-serif; color:var(--ink); background:#e9e3d1; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 50% 10%,#f9f4df 0,transparent 65%); min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; border:0; background:transparent; touch-action:manipulation; }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,h1[tabindex]:focus-visible { outline:3px solid #326f98; outline-offset:4px; }
button:not(:disabled):active { transform:translateY(2px); }
p { line-height:1.5; }
h1,h2,p { margin-top:0; }
h1 { font:normal clamp(1.7rem,4vw,2.7rem)/1.15 Georgia,serif; letter-spacing:-.045em; }
h2 { font:normal 1.45rem/1.2 Georgia,serif; letter-spacing:-.025em; }
small { font-size:.82rem; line-height:1.5; }
.topbar { max-width:1120px; padding:22px 26px 19px; margin:auto; display:flex; align-items:center; gap:25px; }
.wordmark { font:bold 1.7rem Georgia,serif; color:var(--ink); text-decoration:none; white-space:nowrap; }
.title-sprig { display:inline-block; color:#728359; font-size:1.5rem; margin-left:8px; }
.tagline { font-size:.8rem; opacity:.75; }
.header-actions { display:flex; margin-left:auto; gap:20px; align-items:center; }
.languages { display:flex; padding:3px; border:1px solid #b7b19f; border-radius:5px; }
.languages button { padding:5px 8px; font-size:.72rem; font-weight:bold; min-height:30px; }
.languages button[aria-pressed=true] { background:var(--ink); color:var(--paper); border-radius:2px; }
.notebook-button { font-size:.85rem; border-bottom:2px solid var(--wood); padding:7px 0; }
main { max-width:1032px; margin:0 auto; padding:0 24px; }
.intro { text-align:center; padding:12px 0 14px; }
.intro h1 { margin-bottom:10px; }
.intro p { font-size:.93rem; margin-bottom:10px; }
.scene { position:relative; width:100%; aspect-ratio:16/9; isolation:isolate; overflow:hidden; background:#cbaa7b; border:5px solid var(--ink); box-shadow:0 5px 0 #b7ac97; }
.backdrop { display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; position:absolute; inset:0; z-index:-3; }
.scene-light { position:absolute; inset:0; pointer-events:none; z-index:3; background:transparent; transition:background .4s; mix-blend-mode:multiply; }
.scene.evening .scene-light { background:#d8b1c925; }
.location-label { position:absolute; left:18px; top:15px; padding:5px 10px; background:#fcf6dfde; font-size:.75rem; box-shadow:3px 3px 0 #33263e30; z-index:5; }
.capacity-note { position:absolute; right:12px; bottom:12px; background:#33263ee8; color:var(--paper); padding:6px 10px; font-size:.7rem; z-index:5; }
.sprite { display:inline-block; width:86px; height:118px; background-size:contain; background-position:center bottom; background-repeat:no-repeat; image-rendering:pixelated; flex-shrink:0; }
.person { position:absolute; width:12%; height:31%; transform:translate(-50%,-100%); z-index:2; }
.person .sprite { width:100%; height:100%; animation:breathe 3.2s steps(2,end) infinite; }
.person button { padding:0; width:100%; height:100%; display:block; }
.person-name { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:.66rem; padding:2px 7px; background:#fcf6dfe6; white-space:nowrap; border-radius:2px; }
.person-you { z-index:4; }
.at-work .sprite { animation:chop .65s steps(2,end) infinite; }
.scene-object { position:absolute; width:7%; height:12%; padding:0; transform:translate(-50%,-50%); z-index:1; overflow:visible; }
.scene-object { display:grid; place-items:center; }
button.scene-object { min-width:32px; min-height:32px; z-index:5; }
.scene-object img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(2px 3px 0 #33263e33); pointer-events:none; }
.scene-object:focus-visible { outline-offset:1px; background:#f8eeca88; }
.scene-object:not(:disabled):active { transform:translate(-50%,-45%); }
.object-label { opacity:0; position:absolute; bottom:105%; left:50%; transform:translateX(-50%); white-space:nowrap; padding:6px 9px; color:var(--paper); background:var(--ink); pointer-events:none; font-size:.72rem; z-index:7; transition:opacity .15s; }
.scene-object:hover,.scene-object:focus-visible { z-index:6; }
.scene-object:hover .object-label,.scene-object:focus-visible .object-label { opacity:1; }
.object-cratesEmpty,.object-cratesFull { width:13%; height:18%; }
.object-paper { width:5%; height:10%; }
.object-photo,.object-expoPhoto { width:7%; height:12%; }
.object-ticket { width:4%; height:8%; }
.object-keys { width:5%; height:8%; }
.object-dish,.object-noraDish,.object-partyDish,.object-dish2 { width:6%; height:10%; }
.object-envelope { width:4.5%; height:9%; }
.object-envelope .object-label { left:auto; right:0; transform:none; }
.save-notice { background:#f4ddba; border:2px solid #946342; padding:12px 16px; font-size:.86rem; line-height:1.5; }
.helper-note { border-left:3px solid var(--sage); padding-left:10px; font-size:.8rem; }
.spark { position:absolute; top:-12px; right:-2px; color:var(--ink); background:var(--gold); font:bold .8rem/22px Georgia,serif; width:22px; height:22px; border:2px solid var(--ink); border-radius:50%; animation:beckon 1.8s steps(2,end) infinite; }
.calling img { animation:wiggle 3s steps(2,end) infinite; }
.steam { position:absolute; left:34%; top:48%; display:flex; gap:9px; z-index:4; pointer-events:none; }
.steam i { width:4px; height:18px; background:#fcf6df99; border-radius:50%; animation:steam 1.6s infinite; }
.steam i:nth-child(2) { animation-delay:.5s; }.steam i:nth-child(3) { animation-delay:1s; }
.timebar { display:flex; gap:18px; align-items:center; padding:8px 4px 15px; }
.week-label { font-size:.75rem; white-space:nowrap; }
.day-strip { display:flex; gap:10px; margin:auto; }
.day { display:flex; flex-direction:column; gap:5px; align-items:center; font-size:.72rem; padding:5px 10px; min-width:42px; border-bottom:2px solid transparent; }
.day.current { border-color:var(--ink); font-weight:bold; background:#fcf6df; }.day.past { opacity:.45; }
.day-dots { display:flex; gap:4px; }.day-dots i { display:block; width:7px; height:7px; border:1px solid #9c9a8b; border-radius:2px; }.day-dots i.busy { background:var(--wood); border-color:var(--wood); }.day-dots i.now { outline:2px solid var(--ink); outline-offset:2px; }
.cash { font-size:.95rem; font-weight:bold; white-space:nowrap; padding:8px; }.cash span { color:#b18230; font-size:1.2rem; }.cash-changed { animation:cash .7s ease-out; }
.below-scene { padding:22px 0 0; }
.moment { display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:start; }
.moment-date { font-size:.8rem; padding-top:8px; color:#716559; }
.speech { background:var(--paper); border:1px solid #c7baa0; border-radius:0 10px 10px; padding:13px 18px; position:relative; box-shadow:3px 3px 0 #c7baa055; }
.speech:before { content:""; position:absolute; top:-7px; left:20px; width:12px; height:12px; border-left:1px solid #c7baa0; border-top:1px solid #c7baa0; background:var(--paper); transform:rotate(45deg); }
.speech p { font-size:.88rem; margin:0; }.speech p+p { margin-top:7px; padding-top:7px; border-top:1px solid #c7baa044; }
.room-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 16px; }
.room-actions:empty { margin:4px 0; }
.invitation { background:#f8f0d6; border:1px solid #c4b695; text-align:left; padding:12px 14px; display:flex; align-items:center; gap:12px; flex:1 1 230px; min-height:68px; box-shadow:0 3px 0 #c4b695; }
.invitation strong { display:block; font-size:.86rem; }.invitation small { display:block; font-size:.7rem; color:#716559; margin-top:3px; }.invitation-icon { font-size:1.8rem; color:#607987; }.action-corner { margin-left:auto; font-size:1.3rem; color:var(--wood); }
.invitation:hover { background:#fff7df; border-color:var(--ink); }
.time-action { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0 0; }
.time-action p { font-size:.75rem; max-width:380px; margin:0; color:#716559; }
.primary { background:var(--ink); color:var(--paper); padding:13px 20px; font-weight:bold; font-size:.86rem; box-shadow:0 4px 0 #1d1426; border-radius:3px; min-height:46px; }
.primary:hover:not(:disabled) { background:#4c3756; }.secondary { background:#e0ddbd; padding:13px 18px; border:1px solid #b9b295; border-radius:3px; min-height:46px; font-size:.85rem; }
.quiet-button { padding:12px 4px; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; min-height:44px; }
.advance-button { flex-shrink:0; max-width:65%; }
.payment-button { padding:13px 18px; background:#e9c86b; border:1px solid #a38a45; box-shadow:0 3px 0 #b49b51; font-size:.85rem; font-weight:bold; }
.keys-button { padding:12px 16px; background:#dde2ce; border:1px solid #9da68b; font-size:.8rem; }
.action-error { margin:14px 0 0; color:#8b3f38; font-size:.82rem; }
.starting-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:20px; align-items:center; }
.starting-choices { display:grid; grid-template-columns:1fr; gap:12px; margin:0; }
.starting-choice { padding:16px 20px 19px; background:#fcf6dfe6; border:1px solid #bfb397; border-top:4px solid var(--sage); }
.starting-choice:first-child { border-top-color:var(--blue); }.starting-choice h2 { margin:8px 0 10px; font-size:1.4rem; }.starting-choice p { font-size:.84rem; margin-bottom:10px; }.starting-choice small { display:block; margin-bottom:15px; font-size:.73rem; }.starting-choice .sprite { float:right; width:62px; height:83px; margin:0 0 0 10px; }.starting-choice .primary { width:100%; }
.invitation.is-closed { background:#e3dfd0; box-shadow:none; border-style:dashed; }.invitation.is-closed strong { color:#73695d; }.invitation.is-closed .invitation-icon { opacity:.4; }.keys-status { font-size:.73rem; align-self:center; padding:7px 10px; border-left:3px solid var(--sage); }
.setup-scene { aspect-ratio:16/9; }.setup-scene .backdrop { object-position:center 62%; }.setup-scene .person { height:31%; top:86%!important; }.setup-scene .location-label { display:none; }
.start-hint { text-align:center; font-size:.8rem; margin:22px 0 15px; }.seed-entry { max-width:360px; margin:0 auto; font-size:.75rem; text-align:center; }.seed-entry summary { cursor:pointer; padding:8px; }.seed-entry input { width:100%; padding:9px; background:var(--paper); border:1px solid #b9b295; margin:8px 0; color:var(--ink); }.seed-entry label,.seed-entry small { display:block; }.coming-soon { text-align:center; font-size:.72rem; color:#716559; margin:14px 0 0; }
footer { text-align:center; padding:25px 15px; font-size:.65rem; color:#716559; }
dialog { border:3px solid var(--ink); background:var(--paper); color:var(--ink); width:min(550px,calc(100% - 30px)); max-height:calc(100dvh - 40px); padding:25px 26px; box-shadow:7px 8px 0 #1d142655; overflow-y:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#25213699; backdrop-filter:blur(2px); }
.close-dialog { display:block; margin:0 0 0 auto; padding:4px 0 9px 12px; font-size:.75rem; text-decoration:underline; text-underline-offset:3px; min-height:34px; }
.dialog-person { display:flex; align-items:center; gap:15px; margin:0 0 12px; }.dialog-person .sprite { width:62px; height:90px; }.dialog-person h2 { margin:7px 0 0; }.status-tag { display:inline-block; color:#5e6e45; border-bottom:2px solid var(--sage); padding:2px 0; font-size:.7rem; }.dialog-speech { font-size:.96rem; margin:0 0 18px; }
.scope-switch { display:flex; gap:6px; padding:4px; background:#e6dfc7; border-radius:4px; }.scope-switch button { flex:1; padding:9px; font-size:.8rem; min-height:40px; }.scope-switch small { display:block; font-size:.65rem; font-weight:normal; margin-top:4px; color:#8b3f38; }
.scope-switch button[aria-pressed=true] { background:var(--paper); box-shadow:0 2px 1px #b5ad92; border-radius:2px; font-weight:bold; }
.offer-size { font-size:1.25rem; font-weight:bold; padding:17px 0 10px; }.offer-size span { display:block; font-size:.7rem; color:#716559; font-weight:normal; margin-top:4px; }
.preview { margin:0; }.preview>div { padding:11px 0; border-bottom:1px solid #c7baa070; }.preview dt { font-size:.78rem; line-height:1.5; }.preview dd { font-size:.85rem; margin:5px 0 0; }.date-chip { display:inline-block; margin:2px 4px 2px 0; background:#dce1cd; color:#39482d; font-size:.73rem; padding:4px 7px; }.preview .tradeoff { background:#e9dfcc; padding:10px 12px; margin-top:10px; border:0; }.tradeoff dt { font-weight:bold; }.tradeoff dd { font-size:.75rem; line-height:1.5; }.modal-buttons { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin:15px 0 0; }.modal-error { font-size:.8rem; color:#8b3f38; margin:12px 0 0; }.modal-error:empty { display:none; }.key-warning { padding:9px 12px; background:#e9c86b55; font-size:.78rem; margin-bottom:0; }
dialog details { border-bottom:1px solid #c7baa0; padding:14px 0; }dialog details summary { font-size:.85rem; cursor:pointer; }.notebook-jobs { padding:7px 0; }.notebook-job { display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-bottom:1px dotted #c7baa0; padding:10px 0; }.notebook-job>span { flex:1; }.notebook-job strong { font-size:.82rem; }.notebook-job small { display:block; font-size:.7rem; }.notebook-job>small { width:100%; }.notebook-job button { border:1px solid #b9b295; padding:8px; font-size:.7rem; }.memory-list p,.end-memories p { display:flex; align-items:center; gap:12px; font-size:.78rem; margin:10px 0; }.memory-list .sprite,.end-memories .sprite { width:38px; height:54px; }.ledger { padding:0; list-style:none; }.ledger li { display:flex; justify-content:space-between; gap:15px; font-size:.78rem; padding:8px 0; border-bottom:1px dotted #c7baa0; }.loan-note { font-size:.8rem; padding-top:15px; }.seed-code { font-size:.75rem; }.seed-code strong { display:inline-block; letter-spacing:1px; padding:5px 8px; background:#e6dfc7; margin-left:7px; }.trace-image { display:block; height:150px; max-width:80%; object-fit:contain; image-rendering:pixelated; margin:20px auto; }
.ending .scene { max-height:430px; }.end-card { max-width:640px; margin:22px auto; padding:22px 28px; background:var(--paper); border:1px solid #c7baa0; }.end-card>p { font-size:.85rem; }.end-card h2 { margin-top:24px; font-size:1.25rem; }.end-card .other-life { padding-left:14px; border-left:3px solid var(--sage); font-size:.8rem; }.end-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.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; }
@keyframes breathe { 50% { transform:translateY(-2px); } }@keyframes chop { 50% { transform:translateX(2px); } }@keyframes beckon { 50% { transform:translateY(-4px); } }@keyframes wiggle { 0%,85%,100% { transform:rotate(0); }90% { transform:rotate(-6deg); }95% { transform:rotate(6deg); } }@keyframes steam { 0% { transform:translateY(8px); opacity:0; }40% { opacity:.7; }100% { transform:translateY(-20px); opacity:0; } }@keyframes cash { 20% { transform:translateY(-6px); color:#51683a; } }
@media(min-width:1300px) { main { max-width:1100px; }.topbar { max-width:1190px; } }
@media(max-width:700px) { .topbar { padding:15px 18px; gap:10px; }.tagline { display:none; }.wordmark { font-size:1.5rem; }.header-actions { gap:13px; }main { padding:0 14px; }.intro { padding:7px 0; }.intro p { font-size:.83rem; }.scene { border-width:3px; aspect-ratio:16/9; }.backdrop { object-fit:cover; object-position:center; }.setup-scene { aspect-ratio:16/9; }.setup-scene .person { height:31%; }.location-label { font-size:.64rem; padding:4px 6px; left:9px; top:9px; }.capacity-note { font-size:.6rem; padding:4px 6px; right:6px; top:7px; bottom:auto; }.person { width:16%; height:31%; }.person-name { font-size:.6rem; bottom:-15px; padding:1px 4px; }.scene-object { width:9%; }.object-cratesEmpty,.object-cratesFull { left:63%!important; width:16%; }.object-paper { width:7%; }.object-ticket { width:6%; }.object-keys { width:7%; }.object-keys img { max-width:24px; max-height:22px; }.object-photo,.object-expoPhoto { width:9%; }.object-label { font-size:.6rem; max-width:160px; white-space:normal; min-width:85px; }.spark { width:17px; height:17px; font-size:.65rem; line-height:14px; top:-6px; }.timebar { flex-wrap:wrap; gap:4px; padding-bottom:10px; }.week-label { font-size:.65rem; }.day-strip { gap:2px; }.day { font-size:.65rem; padding:5px 5px; min-width:31px; }.day-dots { gap:3px; }.day-dots i { width:6px; height:6px; }.cash { padding:5px 2px; font-size:.78rem; }.cash span { font-size:.9rem; }.moment { display:block; }.moment-date { display:block; font-size:.7rem; padding:0 0 9px; }.speech { padding:12px 13px; }.speech p { font-size:.8rem; }.below-scene { padding-top:15px; }.room-actions { gap:8px; margin:14px 0; }.invitation { flex-basis:100%; min-height:54px; padding:8px 12px; }.invitation strong { font-size:.8rem; }.invitation small { font-size:.66rem; margin-top:1px; }.invitation-icon { font-size:1.45rem; }.time-action { flex-direction:column; align-items:stretch; gap:12px; }.time-action p { font-size:.7rem; }.advance-button { max-width:100%; width:100%; }.starting-stage { display:flex; flex-direction:column; gap:16px; }.starting-choices { gap:12px; grid-template-columns:1fr; width:100%; margin-top:0; }.starting-choice { padding:12px 15px 15px; }.starting-choice h2 { font-size:1.25rem; margin:3px 0 7px; }.starting-choice p { font-size:.8rem; margin-bottom:7px; }.starting-choice small { font-size:.7rem; margin-bottom:12px; }.starting-choice .sprite { height:80px; width:58px; }.start-hint { font-size:.75rem; margin:18px 0 8px; }.coming-soon { font-size:.66rem; }dialog { padding:15px 18px; max-height:calc(100dvh - 24px); width:calc(100% - 24px); }.dialog-speech { font-size:.86rem; }.dialog-person .sprite { width:48px; height:70px; }.dialog-person h2 { font-size:1.3rem; }.preview>div { padding:9px 0; }.offer-size { padding-top:12px; }.end-card { padding:18px 16px; }.end-buttons { flex-direction:column; }.ending .scene { max-height:none; }.end-memories p { font-size:.75rem; }.end-card h2 { font-size:1.2rem; }.languages button { min-height:32px; padding:5px 6px; }.notebook-button { font-size:.75rem; }footer { padding:22px 12px; } }
@media(max-width:390px) { .week-label { width:100%; margin-bottom:2px; }.day-strip { margin-left:0; margin-right:auto; }.topbar { padding-left:14px; padding-right:14px; }.header-actions { gap:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }