*,*:before,*:after{box-sizing:border-box}::-webkit-scrollbar{display:none}*{margin:0;list-style:none;padding:0}html{font-size:16px;line-height:1.5;color:#1f212a;font-family:sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{position:relative;width:100vw;height:100vh}body{margin:0}@property --canvasColor1{syntax: "<color>"; initial-value: #dffffc; inherits: false;}@property --canvasColor2{syntax: "<color>"; initial-value: #88d4ff; inherits: false;}.canvas{background:linear-gradient(180deg,var(--canvasColor1) 0%,var(--canvasColor2) 100%);transition:--canvasColor1 .5s ease-in-out,--canvasColor2 .5s ease-in-out;&.color-red{--canvasColor1: #ffbcbd;--canvasColor2: #ffb2a9}&.color-yellow{--canvasColor1: #fffadd;--canvasColor2: #ffef97}&.color-green{--canvasColor1: #f7ffeb;--canvasColor2: #d9ffa1}&.color-blue{--canvasColor1: #e8f0ff;--canvasColor2: #8e96ff}&.color-purple{--canvasColor1: #f8f0ff;--canvasColor2: #d4aaff}}.hr{margin:20px 0;border:none;&:before{content:"";display:block;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.01) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.01) 100%)}}h1{font-size:32px}h5{font-size:12px;margin-bottom:8px}.flex-1{flex:1}.select,.icon-button{height:40px;border-radius:8px;cursor:pointer}.select{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;border:1px solid #ccc;background:#fff;padding:0 12px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;background-color:#000;border:1px solid #000;transition:all .3s ease;img,svg {display: block; width: 18px; height: 18px; object-fit: contain;} &.red {background: #FF4D4F; border-color: #e83336; svg path{fill: #fff;} &:hover {background: #e83336;}} &.green {background: #B4FD4F; border-color: #a6e949; svg path{fill: #1F212A;} &:hover {background: #a6e949;}}}.members-list{font-size:12px;text-align:right}.ui-box{position:fixed;z-index:2;width:320px;height:100%;top:0;left:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:20px 0 0;background:linear-gradient(19deg,rgba(213,234,255,.7) 0%,rgba(255,252,253,.7) 100%);backdrop-filter:blur(30px) saturate(180%);.ui-box-left-right-space {padding-left: 20px; padding-right: 20px;} .project-title {.company-name {.logo {display: block; height: 9px;}} .project-name {font-size: 12px; margin-top: 4px;}} .control-area {display: flex; gap: 12px; .icon-button {flex-shrink: 0;}} .speech-area {flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 0 20px 20px; margin-top: 16px; .speech-bubble {font-size: 12px; background-color: #B4FD4F; padding: 12px; border-radius: 8px; line-height: 2; font-weight: 500; border: 1px solid #a6e949; &:nth-child(2) {opacity: .8; filter: blur(1px) saturate(.8);} &:nth-child(n + 3) {opacity: .5; filter: blur(2px) saturate(.5);} &:nth-child(n + 4) {opacity: .5; filter: blur(5px) saturate(.3);}}}}.subtitle{position:fixed;z-index:3;display:flex;align-items:center;justify-content:center;bottom:0;left:0;width:100%;padding:60px 20px;font-size:60px;line-height:1.2;font-weight:800;color:#fff;background:rgba(0,0,0,.3);text-align:center;backdrop-filter:blur(20px) saturate(120%)}.bubble-transition-enter{opacity:0;transform:translate(-20px)}.bubble-transition-enter-active{opacity:1;transform:translate(0);transition:opacity .5s ease-in,transform .5s linear}.bubble-transition-exit{opacity:1;transform:translate(0)}.bubble-transition-exit-active{opacity:0;transform:translate(-20px);transition:opacity .5s ease-in,transform .5s linear}.subtitle-transition-enter{opacity:0;transform:translateY(100px);filter:blur(100px)}.subtitle-transition-enter-active{opacity:1;transform:translate(0);filter:blur(0);transition:opacity .5s linear,transform .5s linear,filter .5s linear}.subtitle-transition-exit{opacity:1;transform:translate(0);filter:blur(0)}.subtitle-transition-exit-active{opacity:0;transform:translateY(100px);filter:blur(100px);transition:opacity .5s linear,transform .5s linear,filter .5s linear}