/* v3 — a handwritten letter for the visitor, with fixed owner branding. */
.visitor-note{position:relative;margin-top:26px;max-width:440px}
.visitor-open{display:flex;align-items:center;gap:9px;padding:3px 0 7px;border:0;background:none;color:var(--terra);font-size:23px;transform:rotate(-2deg);transition:transform .24s ease}
.visitor-open:hover{transform:rotate(0) translateX(3px)}
.visitor-open>svg:first-child{width:30px;height:29px;stroke:currentColor;stroke-width:1.7;transform:rotate(-9deg)}
.visitor-open .visitor-arrow{width:35px;height:25px;stroke:currentColor;stroke-width:1.8;transform:rotate(7deg)}
.visitor-open.has-letter .visitor-arrow{transform:rotate(-4deg) scaleX(-1)}
.visitor-caption{display:block;font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 5px;transform:rotate(1deg);transform-origin:left}
.visitor-editor{margin-top:14px;background:var(--paper-white);padding:22px 20px 19px;border:1.8px solid var(--ink);border-radius:4% 6% 3% 5% / 7% 4% 5% 3%;box-shadow:5px 6px 0 var(--shadow);transform:rotate(-1.2deg);display:flex;flex-direction:column;gap:11px}
.visitor-editor[hidden],.visitor-letter[hidden],.sky-transition[hidden]{display:none!important}
.visitor-editor>label{font-size:24px;color:var(--ink)}
.visitor-form-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.visitor-form-row input{min-width:0;flex:1 1 150px;font:19px/1.3 system-ui,sans-serif;color:var(--ink);background:var(--paper);border:1.6px solid var(--line);padding:10px 13px;outline-offset:2px;border-radius:2px;max-width:265px}
.visitor-form-row input::placeholder{color:var(--ink-soft);opacity:.78}
.visitor-form-row button{background:var(--ink);color:var(--paper-white);border:0;padding:8px 16px 10px;transform:rotate(2deg);border-radius:37% 42% 36% 40% / 29% 30% 24% 33%;font-size:22px;box-shadow:3px 4px 0 var(--terra)}
.visitor-form-row button:hover{transform:rotate(-1deg) translateY(-2px)}
#visitor-privacy{font:12px/1.55 system-ui,sans-serif;color:var(--ink-soft)}
.visitor-letter{position:relative;margin:27px 9px 8px 4px;padding:38px 23px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--paper-white);border:1.5px solid var(--line);border-radius:2% 5% 3% 4%/4% 3% 5% 3%;box-shadow:4px 6px 0 var(--shadow);transform:rotate(-2deg);isolation:isolate}
.visitor-letter:before{content:"";position:absolute;inset:15px 12px;z-index:-1;opacity:.38;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,var(--line) 31px,transparent 32px)}
.visitor-tape{position:absolute;top:-12px;left:43%;width:78px;height:22px;transform:rotate(4deg);background:color-mix(in srgb,var(--mint) 70%,transparent);border:1px solid color-mix(in srgb,var(--line) 40%,transparent)}
.visitor-line{font-size:clamp(20px,2.4vw,29px);line-height:1.5;max-width:100%}
.visitor-line#visitor-greeting{color:var(--terra);font-size:30px}
.visitor-sign{font-size:20px;margin-left:auto;margin-right:27px;color:var(--ink-soft);transform:rotate(3deg)}
.visitor-heart{width:45px;height:37px;stroke:var(--terra);stroke-width:2;position:absolute;right:14px;bottom:55px;transform:rotate(12deg)}
.visitor-again{font-size:18px;background:transparent;color:var(--terra);border:0;border-bottom:1.5px dashed var(--terra);padding:5px 2px;margin-top:5px;transform:rotate(2deg)}
.visitor-letter.letter-arrived{animation:note-lands .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes note-lands{from{opacity:0;transform:rotate(7deg) translateY(22px) scale(.92)}to{opacity:1;transform:rotate(-2deg) translateY(0) scale(1)}}
/* v3 — hand-sketched sun/moon icons and an illustrated full-page sky transition. */
.theme-toggle{position:relative;overflow:visible;transition:transform .26s ease}
.theme-toggle svg{position:absolute;left:6px;top:5px;width:34px;height:34px;transition:opacity .38s ease,transform .65s cubic-bezier(.2,.7,.25,1)}
.theme-toggle .theme-sun{opacity:1;transform:rotate(-10deg) scale(1)}
.theme-toggle .theme-moon{opacity:0;transform:translateY(11px) rotate(32deg) scale(.52)}
body.dark .theme-toggle .theme-sun{opacity:0;transform:translateY(11px) rotate(65deg) scale(.4)}
body.dark .theme-toggle .theme-moon{opacity:1;transform:translateY(0) rotate(-7deg) scale(1)}
.theme-toggle:disabled{cursor:default}
.moon-doodle,body.dark .sun-doodle:not(.moon-doodle){display:none}
body.dark .moon-doodle{display:block}
.sky-transition{position:fixed;inset:0;z-index:2000;overflow:hidden;pointer-events:none;isolation:isolate}
.sky-base,.sky-wash{position:absolute;inset:0}
.sky-transition[data-to="dark"] .sky-base{background:radial-gradient(circle at 65% 35%,#fff5db 0%,#f3e3c5 46%,#dfb989 100%)}
.sky-transition[data-to="dark"] .sky-wash{background:radial-gradient(circle at 74% 24%,#4c6274 0%,#273b4a 36%,#172b36 72%,#101d2a 100%)}
.sky-transition[data-to="light"] .sky-base{background:radial-gradient(circle at 60% 30%,#3b5164 0%,#263846 55%,#172733 100%)}
.sky-transition[data-to="light"] .sky-wash{background:radial-gradient(circle at 66% 28%,#fff3d8 0%,#f8dfaf 40%,#ebc38d 76%,#e5b88d 100%)}
.sky-orb{position:absolute;top:0;left:0;width:144px;height:144px;overflow:visible;transform-origin:72px 72px;will-change:transform,opacity;opacity:0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sky-sun{color:#f7c773;filter:drop-shadow(0 0 23px #ffb55c75)}
.sky-moon{color:#fff2ce;filter:drop-shadow(0 0 18px #fffcda6e)}
.sky-orb .orb-fill{fill:currentColor;stroke:#7c674c;stroke-width:2.7;fill-opacity:.96}
.sky-moon .orb-fill{stroke:#e8dcbd}
.sky-orb .orb-lines{stroke:currentColor;stroke-width:4}
.sky-stars{position:absolute;left:0;top:0;width:100%;height:42%;opacity:0;color:#e8dfbb;stroke:currentColor;stroke-width:1.6;pointer-events:none;filter:drop-shadow(0 0 7px #fbebca5a)}
.sky-horizon{position:absolute;bottom:-13px;left:0;width:100%;height:34%;color:#f2c682;stroke:currentColor;stroke-width:2;opacity:0;pointer-events:none}
@media(max-width:570px){.theme-toggle svg{left:5px;top:5px;width:29px;height:29px}.visitor-note{max-width:100%}.visitor-line{font-size:23px}.visitor-editor{padding:18px 14px}.visitor-letter{padding:35px 17px 25px;margin-right:3px}.visitor-line#visitor-greeting{font-size:26px}.visitor-caption{font-size:16px}}
@media(prefers-reduced-motion:reduce){.visitor-letter.letter-arrived{animation:none}}