*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light;--sky: #cdeef2;--sand: #f6e9c8;--sand-deep: #e9d4a0;--sea-deep: #0f6e77;--sea: #17908a;--sea-light: #6fcdc2;--coral: #ec8b6f;--coral-deep: #d97456;--parchment: #f4e8c9;--ink-brown: #3d2b1a;--text-deep: #0d4a52}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--sky: #0c2b39;--sand: #b99e6c;--sand-deep: #8a7350;--sea-deep: #06262a;--sea: #0d4a4a;--sea-light: #3f8f89;--coral: #e08a63;--coral-deep: #c76a48;--parchment: #e9d9ac;--ink-brown: #2c1c10;--text-deep: #cdeef2}}body{min-height:100dvh;background:var(--sand)}.page{max-width:80ch;margin-inline:auto;padding:2rem;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,var(--sky) 0%,var(--sand) 100%);color:var(--text-deep);font-family:Quicksand,system-ui,sans-serif;text-align:center}.whine{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1rem 2rem;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky) 35%,var(--sand) 72%,var(--sand-deep) 100%);color:var(--text-deep)}.whine__title{font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.5px;text-align:center;color:var(--coral-deep);text-shadow:0 2px 6px rgba(61,43,26,.12);margin-top:.5rem}.diary{position:relative;z-index:2;width:min(560px,92vw);flex:1;display:flex;padding:10px;background:#ffffff59;border:2px solid var(--sea-light);border-radius:14px;box-shadow:0 12px 30px #0f6e772e;transition:opacity .5s ease}.diary__page{flex:1;min-height:40vh;width:100%;resize:none;border:none;outline:none;padding:2rem 1.75rem;background:repeating-linear-gradient(to bottom,transparent 0,transparent 38px,rgba(61,43,26,.15) 39px,transparent 40px),radial-gradient(circle at 15% 25%,rgba(61,43,26,.05) 0,transparent 3%),radial-gradient(circle at 80% 70%,rgba(61,43,26,.05) 0,transparent 3%),var(--parchment);color:var(--ink-brown);font-family:Caveat,cursive;font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:40px;transform:rotate(-.6deg);border-radius:10px;transform-origin:center;transition:opacity .15s ease}.diary__page::placeholder{color:#3d2b1a73}.diary__page--writing{animation:settle-in .5s ease-out}.diary__page--crumpling{animation:crumple-paper .65s ease-in forwards;pointer-events:none}@keyframes settle-in{0%{opacity:0;transform:rotate(-.6deg) translateY(10px)}to{opacity:1;transform:rotate(-.6deg) translateY(0)}}@keyframes crumple-paper{0%{transform:rotate(-.6deg) scale(1);border-radius:10px;filter:brightness(1) saturate(1)}45%{transform:rotate(-6deg) scale(.55);border-radius:45% 55% 60% 40%/50% 45% 55% 50%;filter:brightness(.92) saturate(.9)}to{transform:rotate(10deg) scale(.08);border-radius:50%;filter:brightness(.85) saturate(.8);opacity:.85}}.whine__cork-button{position:relative;z-index:2;font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:clamp(.9rem,2.4vw,1.1rem);color:#fff8ee;background:var(--coral);border:none;border-radius:999px;padding:.9rem 2rem;cursor:pointer;box-shadow:0 8px 20px #d9745659;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.whine__cork-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px #d9745673;background:var(--coral-deep)}.whine__cork-button:active{transform:translateY(0) scale(.97)}.scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.scene__bottle{position:absolute;left:50%;bottom:18%;width:clamp(60px,14vw,96px);height:auto;opacity:0;transform:translate(-50%,20px) scale(.85) rotate(0)}.scene__bottle-glass{fill:#fff6;stroke:var(--sea-deep);stroke-width:3;filter:drop-shadow(0 4px 6px rgba(15,110,119,.35))}.scene__bottle-cork{fill:var(--coral-deep)}.scene__note{fill:var(--parchment);stroke:#3d2b1a40;stroke-width:1;opacity:0;transform:translateY(-60px);transform-box:fill-box;transform-origin:center}.scene__bottle--crumpling{opacity:1;animation:bottle-wait .65s ease-out forwards}.scene__bottle--bottling{opacity:1;animation:bottle-appear .5s ease-out forwards}.scene__bottle--bottling .scene__note{animation:note-insert .55s ease-in .12s forwards}.scene__bottle--flinging{opacity:1;animation:bottle-fling 1.5s ease-in-out forwards}.scene__bottle--flinging .scene__note{opacity:1;transform:translateY(0)}.scene__bottle--peace{opacity:0;transform:translate(120vw,-30vh) scale(.4) rotate(140deg)}@keyframes bottle-wait{0%{opacity:0;transform:translate(-50%,20px) scale(.7) rotate(0)}to{opacity:1;transform:translate(-50%,10px) scale(.8) rotate(0)}}@keyframes bottle-appear{0%{opacity:1;transform:translate(-50%,10px) scale(.8) rotate(0)}to{opacity:1;transform:translate(-50%) scale(1) rotate(0)}}@keyframes note-insert{0%{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:translateY(0)}}@keyframes bottle-fling{0%{opacity:1;transform:translate(-50%) scale(1) rotate(0)}35%{opacity:1;transform:translate(5vw,-30vh) scale(.9) rotate(80deg)}75%{opacity:1;transform:translate(60vw,-8vh) scale(.6) rotate(220deg)}to{opacity:.9;transform:translate(120vw,6vh) scale(.35) rotate(280deg)}}.scene__waves{position:absolute;inset:auto 0 0;height:30%;z-index:1}.scene__wave{position:absolute;left:-10%;width:120%;height:100%;border-radius:45% 45% 0 0;opacity:.7}.scene__wave--back{bottom:0;background:linear-gradient(180deg,#0f6e7759,#0f6e77e6);animation:wave-drift 10s ease-in-out infinite}.scene__wave--mid{bottom:-6%;background:linear-gradient(180deg,#6fcdc266,#0f6e77d9);animation:wave-drift 7.5s ease-in-out infinite reverse}.scene__wave--front{bottom:-12%;background:linear-gradient(180deg,rgba(23,144,138,.35),var(--sea-deep));animation:wave-drift 5.5s ease-in-out infinite}@keyframes wave-drift{0%,to{transform:translate(-3%) scaleY(1)}50%{transform:translate(3%) scaleY(1.05)}}.scene__sun{position:absolute;top:8%;right:10%;width:clamp(48px,9vw,76px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff3d4 0%,var(--coral) 70%,transparent 100%);box-shadow:0 0 30px 12px #ec8b6f59;opacity:.75;transition:opacity 1.2s ease}.whine--peace .scene__sun{opacity:.95}.whine--peace .scene__wave--back,.whine--peace .scene__wave--mid,.whine--peace .scene__wave--front{animation-duration:14s}.peace{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;text-align:center;animation:peace-fade-in 1.6s ease-out}.peace__message{font-family:Caveat,cursive;font-size:clamp(2.2rem,6vw,3.2rem);color:var(--sea-deep)}.peace__reset{font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:.95rem;color:var(--sea-deep);background:transparent;border:2px solid var(--sea-deep);border-radius:999px;padding:.8rem 1.6rem;cursor:pointer;transition:transform .2s ease,background .2s ease}.peace__reset:hover{transform:translateY(-2px);background:#0f6e771a}@keyframes peace-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.diary__page--writing,.diary__page--crumpling,.scene__bottle--crumpling,.scene__bottle--bottling,.scene__bottle--bottling .scene__note,.scene__bottle--flinging,.scene__wave--back,.scene__wave--mid,.scene__wave--front,.peace{animation:none!important}.diary__page--crumpling{opacity:0;transition:opacity .2s ease}.scene__bottle--crumpling,.scene__bottle--bottling,.scene__bottle--flinging{opacity:1;transform:translate(-50%) scale(1)}.scene__bottle--bottling .scene__note,.scene__bottle--flinging .scene__note{opacity:1;transform:translateY(0)}.scene__bottle--peace{opacity:0}}