:root{--bg-warm: #F5F3EE;--blue-dot: rgba(33, 75, 164)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#fff;color:#1b3a5c}.app{display:grid;grid-template-columns:1fr auto 1fr;height:100vh;overflow:hidden}.canvas-panel{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;background:var(--bg-warm);container-type:size}.art-container{width:min(70cqw,70cqh);aspect-ratio:1;overflow:hidden}.art-container canvas{width:100%;height:100%;display:block}.art-container>div{width:100%;height:100%}.nav-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px}.switcher{display:flex;flex-direction:column;gap:8px}.switcher button{width:8px;height:8px;border-radius:50%;border:1.5px solid #1B3A5C;background:transparent;padding:0;cursor:pointer;transition:background .3s}.switcher button.active{background:#1b3a5c}.poem-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(1rem,3vh,3rem);overflow:hidden}.poem{width:100%;max-width:360px}.poem h2{font-size:clamp(.85rem,1.2vw + .3rem,1.3rem);font-weight:600;letter-spacing:.04em;margin-bottom:1.5rem;color:#2e5c8a}.poem p{font-size:clamp(.8rem,1vw + .2rem,1.1rem);line-height:1.8;color:#2e5c8a;white-space:pre-line}.poem p+p{margin-top:.8em}@media(max-width:1024px){.app{grid-template-columns:1fr;grid-template-rows:40vh 1fr}.canvas-panel{grid-row:1;grid-column:1}.nav-column{grid-row:1;grid-column:1;align-self:end;justify-self:center;z-index:10;padding:0 0 8px}.switcher{flex-direction:row}.poem-panel{grid-row:2;padding:1rem 1.5rem;justify-content:flex-start}.poem p{line-height:1.4}}