#onboarding[hidden]{display:none!important}#onboarding{position:fixed;inset:0;z-index:100;background:#f8f2dc;background-image:radial-gradient(#e8ddbc80 1.5px,transparent 1.5px);background-size:28px 28px;color:#756244;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:28px 32px 22px}
.onboarding-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:18px}.onboarding-brand{color:#699a51;font-size:27px;letter-spacing:3px}.onboarding-brand small{display:inline-block;color:#a39471;font-size:12px;letter-spacing:1px;margin-left:16px}#onboarding-skip{font-size:12px;padding:10px 16px;background:#fffbee;box-shadow:0 3px 0 #e4d8b6}
.onboarding-content{flex:1;display:flex;align-items:center;justify-content:center;gap:64px;width:min(920px,100%);padding:35px 0}.onboarding-character{position:relative;flex:0 0 220px;height:340px;display:flex;align-items:center;justify-content:center}.onboarding-character>img{max-width:195px;height:310px;object-fit:contain;position:relative;z-index:1;animation:monica-welcome 3.4s ease-in-out infinite}.onboarding-shadow{position:absolute;bottom:8px;width:160px;height:30px;border-radius:50%;background:#c6b88644;filter:blur(5px)}.onboarding-orbit{position:absolute;top:5px;right:0;font-size:36px;color:#e5b94e;transform:rotate(10deg)}
.onboarding-paper{position:relative;background:#fffdf0;border:4px solid #fffef7;border-radius:40px 44px 34px 40px;box-shadow:0 8px 0 #e0d2ae;padding:38px 34px 28px;max-width:540px;width:100%}.onboarding-name{position:absolute;left:28px;top:-21px;background:#edbd5c;color:#76501f;transform:rotate(-3deg);padding:9px 24px;border:3px solid #fff9de;border-radius:17px;font-size:16px}#onboarding-copy h1{font-size:25px;line-height:1.5;margin:0 0 20px}.onboarding-dialogue{font-size:18px;line-height:1.9;margin:0 0 18px}.onboarding-detail{font-size:14px;line-height:1.9;color:#96835f}.onboarding-note{padding:16px 18px;background:#f1eedc;border-radius:20px}.onboarding-note strong{color:#7e7754}.onboarding-note p{margin:7px 0 0}#onboarding-next{margin-top:24px;min-height:46px;padding:12px 24px;background:#80b361;color:#fffef1;box-shadow:0 4px 0 #609148;font-size:14px}.onboarding-progress{display:flex;gap:9px;padding:18px}.onboarding-progress span{height:9px;width:9px;border-radius:50%;background:#ded4b4;transition:background .3s,width .3s}.onboarding-progress span.active{background:#8bad67;width:22px;border-radius:8px}
.onboarding-reference{display:flex;align-items:center;gap:16px;background:#f0efda;padding:12px;margin-top:18px;border:2px dashed #d3c6a1;border-radius:22px;transition:transform .35s,border-color .35s}.onboarding-reference>img{width:105px;height:105px;object-fit:contain;border-radius:14px}.onboarding-reference p{font-size:11px;line-height:1.7;margin:7px 0}.onboarding-reference small{font-size:10px;color:#a2977b}.onboarding-reference strong{font-size:14px}.onboarding-reference.chosen{border:2px solid #91b56b;transform:rotate(-1deg);background:#edf2dd}
#onboarding-restart{position:absolute;bottom:24px;left:20px;z-index:4;display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:18px;background:#fffbeddb;font-size:12px;color:#9a855d;box-shadow:0 3px 0 #e2d5b4}#onboarding-restart>span{font-size:22px;line-height:22px}.help{bottom:80px}body.monica-open #onboarding-restart{display:none!important}
body.onboarding-open>header,body.onboarding-open .scene-top,body.onboarding-open .room-launchers,body.onboarding-open .help,body.onboarding-open #fox-bubble,body.onboarding-open #fox-thought,body.onboarding-open #onboarding-restart{visibility:hidden}body.onboarding-open main{height:100dvh;position:fixed;inset:0}body.onboarding-open #layouts-panel,body.onboarding-open #layout-details{display:none!important}
#onboarding.is-building{background:transparent;pointer-events:none}#onboarding.is-building .onboarding-top{pointer-events:auto}.is-building .onboarding-content{align-items:flex-end;width:min(640px,100%);padding:10px 0;gap:0}.is-building .onboarding-character{display:none}.is-building .onboarding-paper{pointer-events:auto;padding:24px 28px 18px;max-width:640px;background:#fffdf0f2;backdrop-filter:blur(8px);border-radius:28px}.is-building #onboarding-copy h1{font-size:20px;margin-bottom:8px}.is-building .onboarding-dialogue{font-size:14px;line-height:1.75;margin-bottom:8px}.onboarding-disclosure{font-size:11px;color:#a39475}.is-building .onboarding-progress{padding:14px}.is-building #onboarding-next{margin-top:12px}.is-building .onboarding-name{font-size:13px;padding:6px 18px;top:-19px}
@keyframes monica-welcome{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@media(max-width:700px){#onboarding{padding:18px 16px 12px}.onboarding-brand{font-size:22px}.onboarding-brand small{display:none}.onboarding-content{flex-direction:column;gap:10px;padding:12px 0 18px}.onboarding-character{flex:0 0 auto;height:150px;width:150px}.onboarding-character>img{height:145px;max-width:110px}.onboarding-shadow{bottom:0;width:90px;height:17px}.onboarding-orbit{font-size:25px;right:5px}.onboarding-paper{padding:30px 22px 20px;border-radius:30px;max-width:470px}.onboarding-name{font-size:13px;padding:6px 19px;top:-17px}#onboarding-copy h1{font-size:20px;margin-bottom:12px}.onboarding-dialogue{font-size:15px;line-height:1.8;margin-bottom:12px}.onboarding-detail{font-size:12px}.onboarding-note{padding:12px}#onboarding-next{font-size:13px;margin-top:18px;min-height:42px}.onboarding-reference{gap:12px;padding:8px;margin-top:12px}.onboarding-reference>img{width:80px;height:80px}.onboarding-progress{padding:10px}.is-building .onboarding-content{justify-content:flex-end;padding:0}.is-building .onboarding-paper{padding:23px 18px 16px}.is-building .onboarding-dialogue{font-size:13px}#onboarding-restart{left:12px;bottom:20px;padding:9px 12px;font-size:11px}.help{display:none}}
@media(prefers-reduced-motion:reduce){.onboarding-character>img{animation:none}.onboarding-reference{transition:none}}
/* Match the room's green controls; automatic focus must not draw a second pill. */
#onboarding-next{border:0;border-radius:16px;background:#6cba52;color:#fff;box-shadow:0 4px 0 #4a8f38;outline:none;transform:none;transition:background .18s,transform .12s,box-shadow .12s}
#onboarding-next:hover{background:#7cc861;transform:translateY(-1px)}
#onboarding-next:active{transform:translateY(3px);box-shadow:0 1px 0 #4a8f38}
#onboarding-next:focus-visible{outline:none}
#onboarding.keyboard-nav #onboarding-next:focus-visible{outline:2px solid #688d4e;outline-offset:4px}
/* Replay controls and a quiet, user-paced feature tour. */
#feature-guide{position:absolute;left:156px;bottom:24px;z-index:4;padding:10px 16px;min-height:42px;border-radius:18px;background:#fffbeddb;font-size:12px;color:#9a855d;box-shadow:0 3px 0 #e2d5b4}
body.monica-open #feature-guide,body.onboarding-open #feature-guide{display:none!important}
#feature-tour{position:fixed;inset:0;z-index:1100;overflow:hidden;isolation:isolate}#feature-tour[hidden]{display:none}
.tour-spotlight{position:fixed;border:3px solid #fff7d4;border-radius:26px;box-shadow:0 0 0 200vmax #39372b8c,0 0 24px #ffefaa;pointer-events:none;z-index:-1}
.tour-paper{position:fixed;width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:32px 24px 20px;background:#fffbed;border:3px solid #fffef7;border-radius:30px;box-shadow:0 7px 0 #c8b888;color:#766344}
.tour-name{position:absolute;top:-17px;left:20px;background:#efc566;border:3px solid #fff6d8;border-radius:16px;padding:6px 14px;font-size:12px;font-weight:700;transform:rotate(-2deg)}
.tour-progress{display:block;text-align:right;color:#a49577;font-size:11px}.tour-paper h2{font-size:22px;margin:4px 0 12px}.tour-paper p{font-size:15px;line-height:1.9;margin:0}.tour-note{display:block;color:#a49577;font-size:11px;margin-top:10px}.tour-note:empty{display:none}.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px}.tour-actions button{font-size:13px;border-radius:18px;padding:10px 17px}.tour-actions .tour-skip{background:transparent;box-shadow:none;color:#9c8a68}.tour-actions .tour-next{background:#6cb64f;color:white;box-shadow:0 4px 0 #4d8c36}
@media(max-width:700px){#feature-guide{left:133px;bottom:20px;font-size:11px;padding:9px 12px;min-height:40px}.tour-paper{padding:28px 20px 16px}.tour-paper p{font-size:13px}.tour-paper h2{font-size:19px}}
/* Left corner: shared spacing and equal-weight entry points. */
.home-corner{position:absolute;left:20px;bottom:24px;z-index:4;display:flex;flex-direction:column;gap:16px;width:244px}
body:not(.arranging):not(.monica-open):not(.onboarding-open) .home-corner .help{position:static;display:grid;gap:7px;max-width:none;width:100%;font-size:11px;line-height:1.5;margin:0;padding:0 4px;color:#99886c}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.help-row strong{font-size:11px;font-weight:600;color:#887655}.help-row strong:before{content:'→';padding-right:9px;color:#b6a88b}
.home-corner-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-corner #onboarding-restart,.home-corner #feature-guide{position:static;display:flex;justify-content:center;align-items:center;gap:6px;width:100%;height:42px;min-height:42px;margin:0;padding:0 10px;font-size:12px;line-height:1;letter-spacing:0;border-radius:17px;background:#fffbedee;box-shadow:0 3px 0 #e2d5b4}
.home-corner #onboarding-restart>span{font-size:19px;line-height:1;font-weight:500}
body.onboarding-open .home-corner,body.monica-open .home-corner,body.arranging .home-corner{display:none!important}
.clock{width:192px;padding:16px;gap:6px 12px;border-radius:24px;box-shadow:0 4px 0 #dfd2af}
.clock #clock-time{font-size:30px;letter-spacing:.5px;line-height:1.15}.clock #clock-date{font-size:10px;line-height:1.5;color:#9c8b68}
.clock-weather{gap:3px;min-width:33px;align-self:center}.clock-weather svg{width:26px;height:26px}.clock .clock-weather span{font-size:10px;line-height:1.2}
.clock-location{align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:6px;margin-top:6px;padding-top:11px;border-top:1px solid #e6dcc3}.clock .clock-location span:first-child{font-size:10px;line-height:1.5;white-space:nowrap}.clock .clock-location span:last-child{font-size:10px;line-height:1.5;background:#eee6cd;color:#8e7952;border-radius:7px;padding:2px 6px;font-variant-numeric:tabular-nums}
.clock .tod{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;padding:3px;border-radius:16px;background:#f0e9d4}.clock .tod button{padding:7px 4px;font-size:11px;line-height:1.2;border-radius:12px;background:transparent;box-shadow:none}.clock .tod button.active{background:#e6aaa0;box-shadow:0 2px 0 #ce8e83}
@media(max-width:700px){.home-corner{left:12px;bottom:20px;width:216px;gap:12px}.home-corner #onboarding-restart,.home-corner #feature-guide{height:38px;min-height:38px;font-size:11px;border-radius:15px}.home-corner-actions{gap:8px}body:not(.arranging):not(.monica-open):not(.onboarding-open) .home-corner .help{font-size:10px;gap:6px}.help-row strong{font-size:10px}.help-row strong:before{padding-right:5px}.clock{width:154px;padding:12px;gap:4px 8px;border-radius:20px}.clock #clock-time{font-size:25px}.clock #clock-date{font-size:9px}.clock-weather svg{width:22px;height:22px}.clock-location{gap:4px;padding-top:8px;margin-top:4px}.clock .clock-location span:first-child,.clock .clock-location span:last-child{font-size:9px}.clock .clock-location span:last-child{padding:2px 4px}.clock .tod button{font-size:10px;padding:6px 3px}}
/* Consistent text origins and compact gesture labels. */
.home-corner .help-row{justify-content:flex-start;gap:9px}
.home-corner .help-row strong{white-space:nowrap}
.home-corner .help-row strong:before{padding-right:9px}
.clock #clock-time,.clock #clock-date{justify-self:start;text-align:left;padding:0;margin:0;text-indent:0;letter-spacing:0}
.clock #clock-time{margin-left:-1px;font-kerning:normal}
.clock-location{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px;width:100%}
.clock .clock-location span:first-child{justify-self:start;text-align:left;margin:0;padding:0}
.clock .clock-location span:last-child{justify-self:end;text-align:right;margin:0;padding:0;background:none;border-radius:0;white-space:nowrap;font-size:10px;color:#8f7d5b}
@media(max-width:700px){.clock .clock-location span:last-child{font-size:9px}.clock-location{gap:4px}.home-corner .help-row{gap:7px}.home-corner .help-row strong:before{padding-right:7px}}
.tour-actions .tour-skip[hidden]{display:none}.tour-actions .tour-next{margin-left:auto}
/* Reserve the action row even while the room reveal is playing. */
#onboarding-next{display:block;margin-left:auto;margin-right:0}
#onboarding-next[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.is-building #onboarding-copy{min-height:108px}
@media(max-width:700px){.is-building #onboarding-copy{min-height:125px}}
.onboarding-note strong{display:inline}
#onboarding[data-step="2"]:not(.is-building) .onboarding-content{gap:30px;width:min(1050px,100%)}
#onboarding[data-step="2"]:not(.is-building) .onboarding-paper{max-width:660px}
.onboarding-upload{margin-top:20px}.photo-slots,.photo-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.photo-slots{margin-bottom:20px}.photo-slot,.photo-source{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px;border-radius:16px;font-size:11px;line-height:1.4}.photo-slot{height:132px;background:#f1efdc;border:2px dashed #c8bb93;box-shadow:none}.photo-slot b{font-size:29px;color:#b5a47b}.photo-slot.filled{border-style:solid;border-color:#98b477;background:#edf2dd}.photo-source{background:#fffdf5;border:2px solid #eee3c3;box-shadow:0 4px 0 #dfd2ae;touch-action:none;position:relative;user-select:none}.photo-source img,.photo-slot img{height:85px;width:100%;object-fit:contain;border-radius:9px;pointer-events:none}.photo-source.selected{border-color:#87ae65}.photo-source.dragging{z-index:5;transition:none;box-shadow:0 12px 20px #74613c30}.photo-source:disabled{opacity:.35}.photo-status{display:block;font-size:11px;line-height:1.6;color:#9b8a66;margin-top:14px}#onboarding-next:disabled{opacity:.55;cursor:default}
@media(max-width:700px){#onboarding[data-step="2"]:not(.is-building) .onboarding-character{display:none}.photo-slots,.photo-sources{gap:7px}.photo-slot{height:104px}.photo-source img,.photo-slot img{height:62px}.photo-slot,.photo-source{font-size:10px;padding:6px}.onboarding-upload{margin-top:14px}}

.photo-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;min-height:145px;padding:16px;margin-bottom:20px;border:2px dashed #c8bb93;border-radius:20px;background:#f1efdc;box-shadow:none;font-size:15px}.photo-dropzone>small{font-size:11px;color:#a18d65}.photo-received{display:flex;gap:10px;justify-content:center}.photo-received:empty{display:none}.photo-received img{width:68px;height:60px;object-fit:contain;border:2px solid #fffdf0;background:#edf2dd;border-radius:10px}.photo-disclaimer{display:block;font-size:10px;line-height:1.6;color:#a59574;margin-top:6px}
/* Compact build dialogue, with a reserved bottom-right action row. */
#onboarding.is-building .onboarding-paper{padding:23px 26px 18px}
#onboarding.is-building #onboarding-copy{min-height:72px}
#onboarding.is-building #onboarding-next{margin-top:8px;min-height:40px;padding:9px 20px}
@media(max-width:700px){#onboarding.is-building .onboarding-paper{padding:23px 18px 16px}#onboarding.is-building #onboarding-copy{min-height:88px}}
.photo-received{flex-wrap:wrap;max-height:180px;overflow-y:auto;width:100%}
#onboarding-next:disabled{background:#dfdacb;color:#aaa18c;box-shadow:0 3px 0 #cbc4b3;opacity:1;transform:none}
.onboarding-loading{display:flex;justify-content:center;gap:10px;padding:24px 0}.onboarding-loading i{width:12px;height:12px;background:#8eb46b;border-radius:50%;animation:onboarding-loading-hop 1s ease-in-out infinite}.onboarding-loading i:nth-child(2){animation-delay:.15s}.onboarding-loading i:nth-child(3){animation-delay:.3s}@keyframes onboarding-loading-hop{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-8px);opacity:1}}@media(prefers-reduced-motion:reduce){.onboarding-loading i{animation:none;opacity:.8}}
#onboarding.is-building .onboarding-paper{padding-top:32px}
#onboarding.is-building #onboarding-copy{min-height:58px;display:flex;align-items:center}
#onboarding.is-building .onboarding-dialogue{font-size:16px;line-height:1.9;margin:0}
@media(max-width:700px){#onboarding.is-building #onboarding-copy{min-height:80px}#onboarding.is-building .onboarding-dialogue{font-size:14px}}
.home-progress{height:15px;background:#e9e4cb;border:3px solid #fffdf0;border-radius:20px;overflow:hidden;margin-top:26px;box-shadow:0 2px 0 #ddd1af}.home-progress>span{display:block;height:100%;width:0;background:#8bb565;border-radius:16px}.home-progress-caption{display:flex;justify-content:space-between;margin-top:9px;color:#a08d67;font-size:11px}.home-progress-value{font-variant-numeric:tabular-nums}

.onboarding-location{margin-top:20px;padding:20px;background:#f1efdc;border:2px solid #e4dfc4;border-radius:24px;text-align:center}.location-marker{margin:0 auto 10px;font-size:36px;color:#7ca55e}.onboarding-location>strong{display:block;font-size:16px;line-height:1.6}.onboarding-location p{font-size:13px;line-height:1.7;margin:10px 0}.onboarding-location small{font-size:11px;color:#a08e69}.location-address{display:flex;align-items:center;gap:12px;text-align:left}.location-address>span:first-child{font-size:32px;color:#88ad65}.location-address strong{display:block;margin-top:5px;font-size:17px}.location-check{margin-left:auto;color:#77a452;font-size:24px}.location-floor{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid #dfd6b5;font-size:14px}.location-floor select{font:inherit;color:#756244;background:#fffdf0;border:2px solid #d8cda9;border-radius:13px;padding:9px 20px;min-width:110px}.location-floor select:focus-visible{outline:3px solid #8db568;outline-offset:3px}.onboarding-location .location-home{text-align:right;font-size:12px;color:#9a855f}
.onboarding-location[hidden]{display:none}
.location-floor-fixed{font:inherit;color:#756244;background:#fffdf0;border:2px solid #d8cda9;border-radius:13px;padding:9px 20px;min-width:110px;box-shadow:none}
.onboarding-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;background:#fffbed;color:#786344;padding:12px 22px;border-radius:22px;box-shadow:0 4px 0 #ddcfaa;font-size:13px;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}.onboarding-toast[hidden]{display:none}
#feature-tour.tour-fallback{background:#39372b8c}.tour-fallback-avatar{width:64px;height:70px;object-fit:contain;margin:4px auto 12px;display:block}.tour-fallback-avatar[hidden]{display:none}
/* A small envelope beside the replay controls opens a readable, folded letter. */
.home-corner-actions #about-letter-button{flex:0 0 42px;width:42px;min-width:42px;height:42px;padding:10px;align-self:center;border-radius:14px;background:#fffbeddb;color:#9a855d;box-shadow:0 3px 0 #e2d5b4;display:grid;place-items:center}
#about-letter-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#about-letter-button:hover{transform:translateY(-3px) rotate(-5deg)}
dialog.about-letter{box-sizing:border-box;width:min(650px,calc(100vw - 32px));max-width:none;height:min(780px,calc(100dvh - 64px));max-height:none;padding:0;border:0;background:transparent;overflow:visible;color:#756346;box-shadow:none}
.about-letter::backdrop{background:#433c2e70;backdrop-filter:blur(5px)}
.letter-envelope{position:absolute;inset:30px -9px -9px;border-radius:24px;background:#e4cc95;box-shadow:0 12px 45px #42351f40;transform:rotate(-1.5deg)}
.letter-paper{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fffbeb;border:3px solid #fffef5;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #d8c69c;transform-origin:50% 100%}
.about-letter[open] .letter-paper{animation:unfold-letter .65s cubic-bezier(.2,.8,.2,1) both}
.about-letter[open] .letter-envelope{animation:envelope-arrive .35s ease-out both}
.letter-paper .letter-header{display:flex;position:static;flex:none;justify-content:space-between;align-items:center;height:auto;padding:16px 24px;background:#f3e6c6;border:0;color:#9a7b45;font-size:13px;letter-spacing:2px;gap:12px}
.letter-close{width:34px;height:34px;padding:0;border-radius:50%;background:#fff9e8;color:#927a50;box-shadow:0 2px 0 #dfcda4;font-size:24px;line-height:1}
.letter-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:24px 38px 30px;line-height:1.95;font-size:15px;scrollbar-color:#d9c69e transparent;scrollbar-width:thin}
.letter-scroll h1{font-size:27px;margin:0 0 3px}.letter-scroll h2{font-size:17px;margin:28px 0 12px;color:#7d955e}.letter-scroll p{margin:0 0 18px}.letter-welcome{font-weight:bold}.letter-note{font-size:13px;color:#9b8b6e;border-left:3px solid #dfceaa;padding-left:14px}.letter-signoff{text-align:right;font-weight:bold;padding-top:12px}.letter-signoff span{display:block;color:#cb9c78;font-size:26px}
@keyframes unfold-letter{from{opacity:0;transform:perspective(1200px) translateY(65px) rotateX(-35deg) scale(.85)}to{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0) scale(1)}}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:rotate(-1.5deg)}}
@media(max-width:700px){.letter-scroll{padding:20px 22px;font-size:14px}.letter-paper .letter-header{padding:12px 18px;font-size:12px}.home-corner-actions #about-letter-button{flex-basis:34px;min-width:34px;width:34px;height:34px;padding:6px}}
@media(prefers-reduced-motion:reduce){.about-letter[open] .letter-paper,.about-letter[open] .letter-envelope{animation:none}}
.home-corner-actions{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)}
@media(max-width:700px){.home-corner{width:min(266px,calc(100vw - 24px))}.home-corner-actions{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:701px){.home-corner{width:296px}}

/* The creator's letter is a game prop delivered beneath the clock. */
.clock{position:relative}
.clock #about-letter-button{position:absolute;top:calc(100% + 10px);left:5px;width:88px;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:0;transform:rotate(-6deg);transition:transform .2s}
.clock #about-letter-button svg{width:88px;height:74px;fill:initial;stroke:none;overflow:visible}
.clock #about-letter-button>span{font-size:10px;line-height:1.5;color:#88734d;letter-spacing:1px;background:#fffbe6d9;padding:2px 8px;border-radius:9px}
.clock #about-letter-button:hover{transform:translateY(-4px) rotate(-2deg)}
.mail-paper{transition:transform .25s}.clock #about-letter-button:hover .mail-paper{transform:translateY(-5px)}
body.arranging #about-letter-button,body.monica-open #about-letter-button,body.onboarding-open #about-letter-button,body.feature-guide-open #about-letter-button,body.layouts-browsing #about-letter-button{display:none!important}
.home-corner-actions{grid-template-columns:1fr 1fr}.home-corner{width:244px}
@media(max-width:700px){.home-corner{width:216px}.clock #about-letter-button{width:70px}.clock #about-letter-button svg{width:70px;height:60px}}
@media(prefers-reduced-motion:reduce){.mail-paper,.clock #about-letter-button{transition:none}}