:root{--container-bg: #0f172a;--color: #cbeafe;--poem-bg-1: #19134e;--poem-bg-2: #4e2513;--poem-bg-3: #134e4a;--poem-bg-4: #13444e;--poem-bg-5: #13324e;--poem-bg-6: #131f4e;--poem-text-color: #ffffff}[data-theme=dark]{--container-bg: #0f172a;--color: #cbeafe;--poem-bg-1: #19134e;--poem-bg-2: #4e2513;--poem-bg-3: #134e4a;--poem-bg-4: #13444e;--poem-bg-5: #13324e;--poem-bg-6: #131f4e;--poem-text-color: #ffffff}[data-theme=light]{--container-bg: #fefcfb;--color: #1a237e;--poem-bg-1: #fecaca;--poem-bg-2: #bfdbfe;--poem-bg-3: #bbf7d0;--poem-bg-4: #fef08a;--poem-bg-5: #fed7aa;--poem-bg-6: #ddd6fe;--poem-text-color: #222}.container__poems{font-family:roboto,sans-serif;color:var(--color)}.outer__poem{width:100%;position:relative}.container__card{width:100%;position:relative;background-color:var(--container-bg);box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,320px);gap:1rem;row-gap:2rem;padding:5rem 1rem;margin-top:.5rem;justify-content:space-evenly;align-content:center;border-radius:.75rem}.card-wrapper{padding:4px;display:flex;align-items:center;justify-content:center}.poem-card{position:relative;height:100%;width:300px;border-radius:25px;display:flex;flex-direction:column;box-shadow:0 -4px 12px #00000026;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.poem-card:hover{filter:brightness(.95);transform:scale(1.03);box-shadow:0 6px 18px #0003;color:var(--primary);.open-indicator{fill:var(--primary)}}@media (max-width: 480px){.container__card{grid-template-columns:repeat(auto-fit,300px)}.poem-card{width:280px}}.container__card>.card-wrapper:nth-child(6n+1) .poem-card,.card-wrapper:nth-child(6n+1) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-1)}.container__card>.card-wrapper:nth-child(6n+2) .poem-card,.card-wrapper:nth-child(6n+2) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-2)}.container__card>.card-wrapper:nth-child(6n+3) .poem-card,.card-wrapper:nth-child(6n+3) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-3)}.container__card>.card-wrapper:nth-child(6n+4) .poem-card,.card-wrapper:nth-child(6n+4) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-4)}.container__card>.card-wrapper:nth-child(6n+5) .poem-card,.card-wrapper:nth-child(6n+5) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-5)}.container__card>.card-wrapper:nth-child(6n) .poem-card,.card-wrapper:nth-child(6n) .poem-card .emoji-content .overlay:after{background-color:var(--poem-bg-6)}.emoji-content,.card-content{padding:10px 14px;display:flex;flex-direction:column;align-items:center}.emoji-content{row-gap:5px;position:relative;padding:25px 0}.overlay{position:absolute;left:2%;top:2%;height:96%;width:96%;background-color:var(--container-bg);border-radius:25px 25px 0}.overlay:before,.overlay:after{content:"";position:absolute;right:0;bottom:-40px;height:40px;width:40px;background-color:var(--container-bg)}.overlay:after{border-radius:0 25px 0 0}.card-emoji{position:relative;height:150px;width:150px;padding:3px;display:flex;align-items:center;justify-content:center}.card-emoji .card-emo{font-size:9rem;text-shadow:0 -8px 18px rgba(0,0,0,.15)}.name{text-align:center}.card-indicator{position:relative;margin-left:auto;right:1rem;height:24px}.poem-dialog{width:540px;max-width:90%;height:max-content;max-height:600px;border:3px solid var(--color);border-radius:24px;background-color:var(--container-bg);padding:1.5rem;box-shadow:0 15px 30px #0003;position:fixed;transform:translate(-50%,-50%);overflow:hidden;color:var(--color)}.modal-content{display:flex;flex-direction:column;justify-content:flex-start;height:100%;position:relative}.modal-content>.model-buttons>button.speaker-btn,.modal-content>.model-buttons>button.close{background:none;border:none;padding:0;cursor:pointer;width:48px;height:48px}.modal-content>.model-buttons>button svg{width:44px;height:44px;stroke:var(--color);fill:none}.modal-content>.model-buttons>button:focus{outline:none;box-shadow:none}.modal-content .model-buttons{display:flex;align-items:center;justify-content:space-between}.modal-title{margin-top:1.2rem;font-size:3rem;font-weight:600;text-align:center;color:var(--primary);margin-bottom:0}.lines{line-height:1.6;padding:0 1rem;overflow-y:auto;flex-grow:1;font-size:1.5rem;text-align:center}.lines::-webkit-scrollbar{width:6px}.lines::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}@media (max-width: 480px){.poem-dialog{width:80%;height:max-content;box-sizing:border-box;margin:auto}.modal-title{font-size:1.5rem}.lines{font-size:1rem}.modal-content>.model-buttons>button.speaker-btn,.modal-content>.model-buttons>button.close{width:36px;height:36px}.modal-content>.model-buttons>button svg{width:32px;height:32px}}.bubble__container{margin:0;padding:0;box-sizing:border-box;container-type:inline-size;container-name:bubble}.bubble__board{border-radius:.75rem;width:100%;height:30vh;position:relative}.slot,.context{border-radius:inherit;position:absolute;z-index:10;width:100%;height:100%;display:flex;box-sizing:border-box;flex-direction:column;justify-content:space-evenly;align-items:center}.slot>div{font-size:3rem;position:relative;font-weight:700;color:var(--primary)}@container bubble (max-width: 480px){.bubble__board{height:65vh}}.bubble__area{border-radius:inherit;background:var(--container-bg);width:100%;height:100%}.bubble_square{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden}.bubble_square li{position:absolute;list-style:none;width:20px;height:20px;display:block;background:#fff3;bottom:-150px;animation:animate 25s linear infinite}.bubble_square li:nth-child(1){left:25%;width:80px;height:80px;background:linear-gradient(var(--container-bg),var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#5d069b,#09009f,#00ff95) border-box;border:8px solid transparent;animation-delay:0s}.bubble_square li:nth-child(2){left:10%;width:20px;height:20px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#d4145a,#fbb03b) border-box;border:2px solid transparent;animation-delay:2s;animation-duration:12s}.bubble_square li:nth-child(3){left:70%;width:20px;height:20px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#009245,#fcee21) border-box;border:2px solid transparent;animation-delay:4s}.bubble_square li:nth-child(4){left:40%;width:60px;height:60px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#662d8c,#ed1e79) border-box;border:6px solid transparent;animation-delay:0s;animation-duration:18s}.bubble_square li:nth-child(5){left:65%;width:20px;height:20px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#353a5f,#9ebaf3) border-box;border:2px solid transparent;animation-delay:0s}.bubble_square li:nth-child(6){left:75%;width:110px;height:110px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#c33764,#1d2671) border-box;border:11px solid transparent;animation-delay:3s}.bubble_square li:nth-child(7){left:35%;width:150px;height:150px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#737dfe,#ffcac9) border-box;border:15px solid transparent;animation-delay:7s}.bubble_square li:nth-child(8){left:50%;width:25px;height:25px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#aaffe2,#00d191) border-box;border:2.5px solid transparent;animation-delay:15s;animation-duration:45s}.bubble_square li:nth-child(9){left:20%;width:15px;height:15px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#2fbdff,#ff7582) border-box;border:1.5px solid transparent;animation-delay:2s;animation-duration:35s}.bubble_square li:nth-child(10){left:85%;width:150px;height:150px;background:linear-gradient(var(--container-bg),var(--container-bg)) padding-box,linear-gradient(45deg,#fad126,#ff564e) border-box;border:15px solid transparent;animation-delay:0s;animation-duration:11s}@keyframes animate{0%{transform:translateY(0) rotate(0);border-radius:0}to{transform:translateY(-1000px) rotate(720deg);border-radius:50%}}