@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{--ink:#f1eedc;--muted:#c2cbb8;--water:#243f38}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--water);font:13px 'DM Sans',sans-serif}button,a,textarea{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer;background:none;border:0}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #eacb8c;outline-offset:5px}button:hover{color:#fff6cb}#pond{height:100svh;min-height:620px;position:relative;overflow:hidden}#world,.grain{position:absolute;inset:0;width:100%;height:100%}.grain{pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:absolute;top:35px;left:4.3%;right:4.3%;display:flex;justify-content:space-between;align-items:center}.wordmark{font:35px Georgia,serif;letter-spacing:-5px;text-decoration:none}.wordmark span{font:10px 'DM Sans',sans-serif;letter-spacing:1px;margin-left:22px;vertical-align:middle;color:var(--muted)}header button{font-size:11px}.intro{position:absolute;left:10%;top:22%;pointer-events:none}.intro button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.1px;color:var(--muted)}h1{font:400 clamp(76px,8vw,122px)/.94 'Playfair Display',Georgia,serif;letter-spacing:-5px;margin:28px 0 24px;position:relative}h1 em{font-weight:400;padding-left:32px}.star{font:42px Georgia,serif;position:absolute;top:103px;left:275px;color:#d9b68b}.intro p{font-size:14px;line-height:1.85;color:#d6deca}.invite{padding:14px 0 12px;font-size:15px;border-bottom:1px solid #b6c4a88c;margin-top:15px;min-width:185px;text-align:left}.invite span{float:right;font-size:24px}.aside{font:italic 12px Georgia,serif;margin-top:13px;color:#bbc5b0}.pond-caption{position:absolute;left:65%;top:71%;font:italic 14px/1.8 Georgia,serif;color:#e2d9bd;pointer-events:none;transform:rotate(-5deg)}.pond-caption span{opacity:.65;font-size:12px}footer{position:absolute;bottom:30px;left:4.3%;right:4.3%;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;color:var(--muted)}.time-control>span{font-size:8px;letter-spacing:1.7px}.time-control>div{display:flex;gap:13px;margin-top:12px;align-items:center}.time-control button{font-size:19px;padding:2px 5px;opacity:.5}.time-control button:last-child{font-size:10px}.time-control button.active{opacity:1;border-bottom:1px solid}.footer-center{font:italic 13px Georgia,serif}#mode{font-size:10px}.paper{background:#eeead9;color:#34473d;border:0;border-radius:2px;padding:35px;width:min(400px,90vw);box-shadow:8px 18px 50px #081e2330;font-family:'DM Sans',sans-serif}.paper::backdrop{background:#152e2520;backdrop-filter:blur(2px)}.paper:before{content:'';position:absolute;inset:7px;border:1px solid #83907825;pointer-events:none}.paper h2{font:28px Georgia,serif;margin:21px 0}.paper-label{font-size:8px;letter-spacing:1.5px}.close{position:absolute;right:13px;top:10px;font-size:22px}.paper button:hover{color:#92704a}.paper p{line-height:1.7}.paper textarea{width:100%;height:125px;resize:none;border:0;border-bottom:1px solid #7c897b50;background:transparent;color:#33483c;outline:none;font:20px/1.6 Georgia,serif;padding:5px 0}.paper textarea:focus{border-bottom-color:#34473d}.note-meta{display:flex;justify-content:space-between;font-size:9px;margin-top:9px;opacity:.7}.privacy{font-size:10px;opacity:.8}.release{width:100%;text-align:left;border-bottom:1px solid #7c897b70;padding:13px 0;font:italic 23px Georgia,serif}.release span{float:right}#drag-note{margin-top:20px;text-align:right;font-size:10px;cursor:grab;touch-action:none;padding:12px 0}#error{color:#943a30;font-size:11px}#found{position:absolute;z-index:5;transform:rotate(-3deg);width:280px}#found-text{font:22px/1.5 Georgia,serif;overflow-wrap:anywhere}#report,#clear{font-size:10px;text-decoration:underline;padding:8px 0}#status{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);font:italic 18px Georgia,serif;text-align:center;pointer-events:none}#bubble{position:fixed;width:24px;height:24px;border:1px solid #ecf4e880;border-radius:48% 52% 55% 45%;background:radial-gradient(circle at 28% 24%,#fff9 0 3%,#d8e8d815 17%,#bfd6c511 60%);pointer-events:none;z-index:20;display:none;box-shadow:inset -2px -2px 5px #e9ffe41a}.toss{position:fixed;z-index:30;pointer-events:none;background:#eeead9;color:#34473d;padding:18px;font:15px Georgia,serif;width:180px;overflow:hidden;max-height:90px;box-shadow:0 8px 24px #0002}.toss.sink{transition:transform .85s,opacity .85s;transform:translateY(65px) rotate(18deg) scale(.1);opacity:0}@media(pointer:fine){body.water-cursor,body.water-cursor button,body.water-cursor a{cursor:none}body.water-cursor #bubble{display:block}body.cursor-text #bubble{display:none}}@media(max-width:700px){#pond{min-height:580px}header{top:22px;left:7%;right:7%}.wordmark span{display:none}header button{font-size:10px}.intro{left:9%;top:18%}h1{font-size:79px;margin-top:20px;letter-spacing:-4px}.star{top:66px;left:200px;font-size:30px}.eyebrow{font-size:7px}.intro p{font-size:12px}.aside{font-size:10px}.invite{font-size:13px;width:165px;min-width:0}.pond-caption{left:45%;top:78%;font-size:12px}.pond-caption span{font-size:10px}.footer-center{display:none}footer{bottom:22px;left:7%;right:7%}#status{bottom:100px;width:80%}.paper{padding:30px}#found{width:250px}.time-control>div{gap:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Quieter composition and accessible targets for the message-carrying koi. */
.header-description{margin:0;font-size:12px;line-height:1.75;color:#d6deca;letter-spacing:.1px}
header{align-items:flex-start;z-index:3}header button{padding-top:4px}
.intro{z-index:2}h1{margin-top:28px;margin-bottom:30px}.invite{margin-top:4px}
.fish-thought{position:absolute;width:64px;height:50px;margin:-25px 0 0 -32px;border-radius:50%;padding:0}
.fish-thought:before{content:'';position:absolute;inset:2px;border:1px solid #f2e6bd00;border-radius:50%;transition:border-color .3s,box-shadow .3s}
.fish-thought:hover:before,.fish-thought:focus-visible:before{border-color:#f2e6bd40;box-shadow:0 0 16px #e5d6a113}
.fish-thought:hover:after,.fish-thought:focus-visible:after{content:'a thought swims here';position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#eee8d3}
@media(max-width:700px){.header-description{font-size:10px;max-width:58%}header button{max-width:105px;text-align:right;line-height:1.6}.intro{top:22%}h1{margin-top:0;margin-bottom:25px}.invite{margin-top:2px}.fish-thought{width:54px;margin-left:-27px}}

/* One-line description and a single entrance to the unchanged pond information. */
.grain{opacity:.012}
.header-description{white-space:nowrap;max-width:none;letter-spacing:0;font-size:12px}
header{gap:20px;align-items:center}header button{white-space:nowrap;max-width:none;padding:8px 0;flex-shrink:0}
@media(max-width:700px){header{left:5%;right:5%;display:grid;grid-template-columns:1fr;gap:7px}.header-description{font-size:clamp(9px,2.5vw,12px);max-width:none}header button{justify-self:end;font-size:10px;min-height:36px}.intro{top:22%}}

/* Shared left edge for title and invitation; ornament belongs to the second line. */
h1{line-height:1;letter-spacing:-.045em;margin-bottom:30px}.title-line{display:block}.title-second{display:flex;align-items:center;gap:26px}h1 em{padding-left:0;margin-left:-.025em}.star{position:static;font-size:.32em;line-height:1;letter-spacing:0;margin-top:.13em}
.invite{display:inline-flex;align-items:center;justify-content:flex-start;gap:18px;line-height:1.25;padding:12px 0;min-height:48px}
.invite span{float:none}.invite .invite-label{font-size:inherit;line-height:inherit}.invite .invite-arrow{font-family:Arial,sans-serif;font-size:23px;line-height:1;display:inline-block;transform:translateY(-1px)}
@media(max-width:700px){.title-second{gap:20px}.star{font-size:.32em}.invite{gap:16px}.invite .invite-arrow{font-size:21px}}

/* A small, tilted writing slip. All controls keep their native keyboard behavior. */
#composer{width:min(440px,calc(100vw - 42px));max-height:calc(100svh - 42px);padding:39px 34px 35px;background:#f4f0e3;transform:rotate(-1.15deg);border-radius:0;box-shadow:5px 15px 40px #0d262426;overflow:auto}
#composer:before{display:none}#composer::backdrop{background:#153c3520;backdrop-filter:blur(2px)}
#composer .paper-label{font-size:8px;letter-spacing:2px;color:#53645b}
#composer h2{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-1.2px;line-height:1.2;margin:24px 0 29px;white-space:nowrap}
#composer textarea{height:163px;padding:0 0 3px;font:24px/40px 'Playfair Display',Georgia,serif;letter-spacing:-.6px;border:0;border-bottom:1px solid #7c897b24;background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#7c897b19 39px,#7c897b19 40px);border-radius:0}
#composer textarea::placeholder{color:#8d9385;opacity:1}#composer textarea:focus{outline:none;border-bottom-color:#7c897b65}
#composer .note-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px;min-height:45px}
#composer #count{font-size:10px;letter-spacing:1px;color:#788479}
#composer .release{display:inline-flex;align-items:center;gap:7px;width:auto;margin:0;padding:10px 0 10px 16px;border:0;font:24px/1.2 'Playfair Display',Georgia,serif;letter-spacing:-.7px;color:#9e6449}
#composer .release span{float:none;font:20px/1 Arial,sans-serif}#composer .release:hover{color:#73472f}
#composer .privacy{font-size:10px;line-height:1.65;color:#798176;opacity:1;margin:20px 0 0}
#composer .close{width:38px;height:38px;right:8px;top:7px;font-size:21px;color:#7b8a80}
#composer #drag-note{position:absolute;right:0;bottom:0;margin:0;padding:0;width:28px;height:28px;background:linear-gradient(135deg,transparent 49%,#e1ddcf 50%,#ece8dc 72%);cursor:grab}
#composer #drag-note:hover{background:linear-gradient(135deg,transparent 49%,#c9c9b6 50%,#e1ddcf 72%)}
#composer #error:empty{display:none}#composer #error{margin:10px 0 0;font-size:11px}
.time-control{position:relative;color:#e1e4d0;text-shadow:0 1px 3px #0b292650}.time-control button{opacity:.75}.time-control button.active{opacity:1}
@media(max-width:480px){#composer{padding:34px 25px 30px;transform:rotate(-.8deg)}#composer h2{font-size:27px;margin:22px 0 25px;letter-spacing:-1px}#composer textarea{font-size:22px}#composer .privacy{font-size:9px}}
@media(max-height:560px){#composer{padding-top:25px;padding-bottom:25px}#composer h2{margin:15px 0}#composer textarea{height:123px}#composer .privacy{margin-top:10px}}

.header-description{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:12px;line-height:1.75;color:#bbc5b0}
#composer .close{width:44px;height:44px;right:6px;top:5px;z-index:2;display:grid;place-items:center;padding:0;line-height:1;color:#45594f}
#composer .close:hover,#composer .close:focus-visible{color:#253d32;background:#34473d0a;border-radius:50%}
@media(pointer:fine){
 body.water-cursor .paper,body.water-cursor .paper button,body.water-cursor .paper a,body.water-cursor .paper [role=button]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='9' fill='%2334473d' fill-opacity='.15' stroke='%232b4438' stroke-width='1.5'/%3E%3Cpath d='M8 12a6 6 0 0 1 5-4' fill='none' stroke='%236d8272' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='14' r='1.2' fill='%232b4438'/%3E%3C/svg%3E") 14 14,pointer}
 body.water-cursor .paper textarea{cursor:text}
 body.cursor-paper #bubble,body.cursor-text #bubble{display:none}
}
@media(max-width:700px){.header-description{font-size:clamp(9px,2.5vw,12px)}}

/* A clear invitation, with an authored atmosphere for each hour of the pond. */
body{--paper:#f4f0e3;--paper-ink:#34473d;--accent:#9e6449;--button:#eeead8;--button-ink:#2d493c;--button-border:#ebe6cf}
body[data-theme=dusk]{--paper:#f2e4d4;--paper-ink:#54443d;--accent:#9e523d;--button:#dfb397;--button-ink:#493c33;--button-border:#f0d0b6;--ink:#f5e4cd;--muted:#d5bfaa}
body[data-theme=night]{--paper:#e0e7e3;--paper-ink:#30444d;--accent:#536b78;--button:#d9e5dd;--button-ink:#263e47;--button-border:#edf2e5;--ink:#e2ebe4;--muted:#b3c8ca}
.invite{background:var(--button);color:var(--button-ink);border:1px solid var(--button-border);border-radius:3px 13px 3px 13px;padding:15px 19px;min-width:204px;gap:22px;box-shadow:0 5px 15px #102d2422,inset 0 0 0 3px #ffffff20;font-weight:500;font-size:15px;transition:background .5s,color .5s,box-shadow .2s,transform .2s}
.invite:hover{color:var(--button-ink);transform:translateY(-2px);box-shadow:0 7px 20px #102d2438,inset 0 0 0 3px #ffffff35}.invite:active{transform:translateY(0)}
.invite:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
body[data-theme=night] .invite{border-radius:28px;box-shadow:0 0 0 4px #c5dbd008,0 4px 16px #071b2b50}
body[data-theme=dusk] .invite{border-radius:4px 12px 4px 12px;box-shadow:3px 5px 0 #211b1925}
.star{color:#e1d298;font-family:Georgia,serif;font-style:normal;font-size:.3em;transition:color .6s}
body[data-theme=dusk] .star{color:#e4b090;transform:rotate(-15deg)}body[data-theme=night] .star{color:#cbded9;transform:rotate(-12deg);font-size:.38em}
.header-description,.pond-caption{color:var(--muted)}
.paper,#composer{background:var(--paper);color:var(--paper-ink);transition:background .5s,color .5s}
#composer textarea{color:var(--paper-ink)}#composer .release{color:var(--accent)}
body[data-theme=dusk] #composer{box-shadow:7px 14px 40px #28171940}
body[data-theme=night] #composer{box-shadow:0 0 0 1px #e7f2ed55,7px 14px 45px #06142160}
body[data-theme=night] #composer .paper-label,body[data-theme=night] #composer .privacy,body[data-theme=night] #composer #count{color:#596e74}
body[data-theme=night] .time-control{color:#c9dce0}body[data-theme=dusk] .time-control{color:#e6cbb3}
.fish-thought{width:64px;height:54px;margin:-27px 0 0 -32px;touch-action:manipulation}
@media(max-width:700px){.invite{min-width:190px;width:auto;padding:14px 17px;font-size:14px}.fish-thought{width:56px;margin-left:-28px}}

body .invite,body[data-theme] .invite{position:relative;justify-content:center;min-width:206px;padding:18px 27px 20px;border:0;border-radius:1px;background:var(--paper);color:var(--paper-ink);font:italic 23px/1.2 Georgia,serif;letter-spacing:-.6px;transform:rotate(-2deg);box-shadow:2px 5px 0 #132e2b22,0 9px 20px #10252118;transition:transform .25s,background .5s,box-shadow .25s}
body .invite::before{content:'';position:absolute;inset:6px;border:1px solid currentColor;opacity:.14;pointer-events:none}
body .invite::after{content:'';position:absolute;right:0;bottom:0;width:14px;height:14px;background:linear-gradient(135deg,#a8b1a366 49%,#ffffff99 50%);pointer-events:none}
body .invite:hover,body[data-theme] .invite:hover{transform:rotate(0deg) translateY(-3px);box-shadow:2px 8px 0 #132e2b18,0 13px 24px #10252125}
body[data-theme=dusk]{--muted:#e8d2c5;--ink:#fff0dc}body[data-theme=night]{--muted:#c0d0df;--ink:#e2eaf1}
@media(max-width:700px){body .invite,body[data-theme] .invite{min-width:190px;font-size:22px;padding:16px 23px 18px}}
@media(prefers-reduced-motion:reduce){body .invite,body[data-theme] .invite{transition:none}}

/* Mobile header shares a single top edge; desktop stays unchanged. */
@media(max-width:700px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;top:23px;left:5%;right:5%}.header-description{white-space:normal;font-size:11px;line-height:1.5;max-width:245px}header button{justify-self:end;min-height:44px;line-height:1.5;padding:0 0 20px;font-size:11px;text-align:right}}
body .invite::before{display:none}body .invite::after{width:9px;height:9px;opacity:.5}body .invite,body[data-theme] .invite{box-shadow:1px 4px 0 #132e2b13,0 8px 18px #10252118}
.toss{transform-origin:50% 75%;background:var(--paper);color:var(--paper-ink);backface-visibility:hidden}
@media(max-width:700px){header button{display:flex;align-items:flex-start;justify-content:flex-end}}
/* Compact notes carried by koi. */
#found{width:min(236px,calc(100vw - 40px));padding:23px 22px 13px;transform:rotate(-1deg);border-radius:1px;box-shadow:2px 7px 22px #081e2326;max-height:calc(100svh - 120px);overflow:auto}
#found:before{display:none}
#found .paper-label{font-size:7px;letter-spacing:1.3px;opacity:.65;padding-right:20px}
#found-text{font:18px/1.5 Georgia,serif;margin:15px 0 10px;overflow-wrap:anywhere}
#found .close{top:0;right:0;width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:19px;opacity:.7}
#found .close:hover,#found .close:focus-visible{opacity:1}
#found #report{font-size:9px;padding:10px 0;opacity:.55;text-decoration:none}
#found #report:hover,#found #report:focus-visible{opacity:1;text-decoration:underline}

#about{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
#found-text{margin:9px 0 13px;padding-right:9px}
.thought-actions{display:flex;justify-content:space-between;border-top:1px solid #34473d14;padding-top:3px}
#found .thought-actions button{display:grid;place-items:center;width:44px;height:44px;padding:11px;opacity:.7;text-decoration:none}
.thought-actions svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
#found #favourite[aria-pressed=true]{color:#9d722f;opacity:1}
#favourite[aria-pressed=true] svg{fill:#d8ac59;stroke:#956c2b}
#found .thought-actions button:hover{opacity:1}
#info{max-height:calc(100svh - 40px);overflow:auto}

/* A single clear invitation, below and left of the old caption. */
.pond-caption{left:55%;top:80%;font-size:18px;line-height:1.5;color:#f5ebcd;text-shadow:0 1px 4px #102f2870;transform:rotate(-3deg)}
body[data-theme=dusk] .pond-caption{color:#fff0d9}
body[data-theme=night] .pond-caption{color:#e8f2ee}
@media(max-width:700px){.pond-caption{left:29%;top:83%;font-size:16px;white-space:nowrap}}
@media(max-height:650px) and (max-width:700px){.pond-caption{top:76%}}

#about{display:inline-flex;gap:7px;align-items:center;text-decoration:none}#about span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}#about svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;flex-shrink:0}
@media(max-width:700px){#about{align-items:baseline}#about svg{align-self:flex-start;margin-top:2px}}

.verification{max-width:350px;z-index:50}.verification-cancel{margin-top:16px;min-height:44px;text-decoration:underline}button:disabled{opacity:.55;cursor:wait}#status{max-width:min(540px,85vw)}