@font-face{font-family:Tiny5;src:url('assets/fonts/Tiny5.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:Tiny5,monospace;color:#503c42;background:#f9d9b7;font-synthesis:none;color-scheme:light;--ink:#503c42;--accent:#5455a1}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:url('assets/background.png') center/768px auto repeat;min-height:100svh}
::selection{background:#c9c6f8;color:#30294b}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer}
#scene{width:min(100%,560px);min-height:100svh;margin:auto;padding: max(32px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;outline:none}
p{margin:0;text-wrap:pretty}
.intro{font-size:clamp(26px,6.8vw,32px);line-height:1.16;max-width:430px;margin-bottom:32px}
.question,.farewell,.final-message{font-size:clamp(34px,8.8vw,44px);line-height:1.09;max-width:470px;text-wrap:balance}
.question{margin-bottom:32px}
.note{font-size:24px;line-height:1.15;margin-top:20px;max-width:390px}
.options{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.sprite{border:0;padding:0;background:transparent;width:min(100%,330px);display:block;transition:transform .16s ease-out;position:relative}
.sprite img{display:block;width:100%;height:auto;image-rendering:auto}
.sprite:hover{transform:translateY(-3px)}
.sprite:active{transform:translateY(2px) scale(.98)}
.sprite:focus-visible,.social:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.binary{flex-direction:row;gap:18px;max-width:430px}
.binary .sprite{width:calc(50% - 9px)}
.rose{width:min(65vw,240px);height:auto;max-height:38svh;object-fit:contain;margin-bottom:26px}
.farewell{font-size:clamp(31px,8vw,40px)}
.socials{width:min(100%,360px);display:flex;flex-direction:column;gap:12px;margin-top:32px}
.social{background:#5556a0;color:#fff7ee;display:flex;align-items:center;gap:16px;padding:17px 22px;min-height:62px;text-decoration:none;font-size:27px;line-height:1;transition:background .15s,transform .15s}
.social:hover{background:#41427f;transform:translateY(-2px)}
.social img{width:24px;height:24px;filter:brightness(0) invert(96%) sepia(11%) saturate(472%) hue-rotate(324deg) brightness(102%) contrast(102%)}
.social span{flex:1;text-align:left}
.social::after{content:'↗';font-family:Arial,sans-serif;font-size:23px}
.final-message{font-size:clamp(32px,8.5vw,42px)}
.scene-enter{animation:page-in .32s cubic-bezier(.16,1,.3,1)}
@keyframes page-in{from{transform:translateY(9px)}to{transform:translateY(0)}}
.noscript{padding:40px;font-size:30px}
@media(min-width:700px){#scene{padding-top:56px;padding-bottom:56px}.intro{margin-bottom:38px}.question{margin-bottom:36px}.options:not(.binary){gap:16px}}
@media(max-height:620px){#scene{padding-top:24px;padding-bottom:24px}.intro{margin-bottom:24px}.question{margin-bottom:24px}.options{gap:10px}.sprite{max-width:280px}.rose{max-height:30svh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}