:root{font-family:'DM Sans',sans-serif;color:#000;background:#fff6d8;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{box-sizing:border-box}
body{margin:0;background:#fff6d8}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
main{min-height:100svh;height:100svh;min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(42px,10.3svh,90px) 20px;margin:auto}
.brand{font-size:18px;font-weight:400;margin:0}
.poem{position:relative;width:min(100%,370px);height:350px;padding:0;text-align:left;outline-offset:14px;-webkit-tap-highlight-color:transparent}
.line{position:absolute;display:block;font-family:'Instrument Serif',serif;font-weight:400;font-size:36px;letter-spacing:-.02em;line-height:1.3;white-space:nowrap;transition:opacity 650ms ease,translate 650ms ease,transform 650ms ease}
.line:nth-child(1){left:18px;top:42px;transform:rotate(-17.35deg)}
.line:nth-child(2){left:0;top:177px;transform:rotate(4.93deg)}
.line:nth-child(3){right:0;top:310px;transform:rotate(-5.27deg)}
.poem.changing .line{opacity:0}
.poem.changing .line:nth-child(2){transition-delay:90ms}
.poem.changing .line:nth-child(3){transition-delay:180ms}
.question{position:relative;font-size:18px;width:44px;height:44px;margin:-10px;transition:transform .3s}
.question::before{content:"";position:absolute;inset:-15px;border-radius:50%}
.question:hover{transform:rotate(12deg)}
button:focus-visible{outline:1px solid #555;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body{transition:background 650ms ease,color 650ms ease}
body.context-open{background:#000;color:#fff6d8}
.context{width:min(370px,100%);font-size:16px;line-height:1.65}
.context[hidden]{display:none}
.context p{margin:0 0 22px}
.context p:last-child{margin-bottom:0}
.context-open button:focus-visible{outline-color:#fff6d8}
.poem[hidden]{display:none}
@media(min-width:700px){.poem{width:460px;height:350px}
.line:nth-child(1){left:20px}
.line:nth-child(2){left:40px}
.line:nth-child(3){right:0}
}
@media(max-width:380px){.line{font-size:clamp(27px,8.5vw,36px)}
.line:nth-child(1){left:12px}
.line:nth-child(3){right:2px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}


.line{will-change:translate,rotate,opacity;max-width:calc(100% - 24px);white-space:normal;text-wrap:balance}

.context-open .brand,.context-open .question{flex-shrink:0}

.context{min-height:0;overflow-y:auto;margin-block:20px}

@media(hover:hover) and (pointer:fine){body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23000'/%3E%3C/svg%3E") 8 8,auto}
body.context-open{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff6d8'/%3E%3C/svg%3E") 8 8,auto}
body button{cursor:inherit}
}

.poem-status { text-align: center; }
.poem-status:not([hidden]) { display: grid; place-items: center; height: 100%; }