:root{--bg-color:#121212;--text-color:#fff;--primary-color:#007aff;--secondary-color:#2c2c2e;--accent-color:#ff3b30;--card-bg:#1c1c1e;--border-radius:8px;--font-size:48px;--line-height:1.5}.theme-light{--bg-color:#f2f2f7;--text-color:#000;--card-bg:#fff;--secondary-color:#e5e5ea}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden;transition:background-color .3s,color .3s}.app-container{display:flex;flex-direction:column;margin:0 auto;max-width:2560px;min-height:100vh;padding:1rem}.section{margin-bottom:1rem}.card{background-color:var(--card-bg);border-radius:var(--border-radius);box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1rem}.card-header{align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:1rem}.button-group,.card-header{display:flex;gap:.5rem}textarea{background:var(--bg-color);border:1px solid var(--secondary-color);border-radius:var(--border-radius);color:var(--text-color);font-size:1rem;height:200px;outline:none;padding:1rem;resize:vertical;width:100%}.app-container.is-playing #input-section{display:none}.app-container.is-playing .control-bar{backdrop-filter:blur(10px);background-color:rgba(28,28,30,.8);box-shadow:0 2px 10px rgba(0,0,0,.2);margin-left:auto;margin-right:auto;max-width:720px;opacity:.3;padding:.4rem 1rem;transition:opacity .3s,transform .3s,background-color .3s}.app-container.is-playing .control-bar:hover{opacity:1}.app-container.is-playing .slider-item label{font-size:.8rem;min-width:unset}.app-container.is-playing .control-group{gap:.5rem}.app-container.is-playing .sliders{flex-direction:row;gap:1rem;min-width:unset}.app-container.is-playing .slider-item{width:auto}.app-container.is-playing .slider-item input[type=range]{width:80px}.app-container.is-playing .icon{height:16px;width:16px}.control-bar{background-color:var(--card-bg);border-radius:var(--border-radius);flex-wrap:wrap;gap:1.5rem;justify-content:space-between;margin-bottom:1rem;padding:1rem;position:sticky;top:0;z-index:100}.control-bar,.control-group{align-items:center;display:flex}.control-group{gap:.75rem}.sliders{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:300px}.slider-item{align-items:center;display:flex;gap:1rem;width:100%}.slider-item label{font-size:.9rem;min-width:100px}input[type=range]{cursor:pointer;flex:1}.display-area{background:#000;border-radius:var(--border-radius);flex:1;height:60vh;overflow:hidden;position:relative}.scroll-container{height:100%;position:relative;width:100%;will-change:transform}.prompt-content{font-size:var(--font-size);left:0;line-height:var(--line-height);padding:30vh 2rem 10vh;position:absolute;right:0;top:0;white-space:pre-wrap;word-wrap:break-word;color:#fff;text-align:center;transform:translateY(0);will-change:transform;z-index:9}.theme-light .display-area{background:#fff}.theme-light .prompt-content{color:#000}.mirrored #scroll-container{transform:scaleX(-1)}.indicator{background:var(--accent-color);height:2px;left:0;opacity:.5;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.btn{align-items:center;border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:flex;font-size:.9rem;justify-content:center;padding:.5rem 1rem;transition:opacity .2s,background-color .2s}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--primary-color)}.btn-secondary{background-color:var(--secondary-color);color:var(--text-color)}.btn-toggle.active{background-color:var(--primary-color)}.icon{fill:currentColor;height:20px;width:20px}.hidden{display:none!important}.toast{animation:fadeIn .3s;background:rgba(0,0,0,.8);border-radius:2rem;bottom:2rem;color:#fff;left:50%;padding:.75rem 2rem;position:fixed;transform:translateX(-50%);z-index:1000}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@media (max-width:768px){.control-bar{align-items:stretch;flex-direction:column}.app-container.is-playing .control-bar{background-color:rgba(28,28,30,.95);border-radius:0;bottom:0;flex-direction:row;flex-wrap:nowrap;gap:.4rem;justify-content:flex-start;max-width:100%;overflow-x:auto;padding:.3rem .5rem;position:fixed;top:auto}.app-container.is-playing .control-group{flex-shrink:0;gap:.3rem}.app-container.is-playing .slider-item label{display:none}.app-container.is-playing .slider-item span{font-size:.75rem;min-width:24px}.app-container.is-playing .slider-item input[type=range]{height:30px;width:60px}.app-container.is-playing .btn{padding:.3rem .5rem}.app-container.is-playing .btn span{display:none}.app-container.is-playing .btn-toggle:before{content:attr(aria-label);display:none}.sliders{min-width:unset}input[type=range]{height:44px}}:fullscreen .display-area{border-radius:0;height:100vh}:-webkit-full-screen .display-area{border-radius:0;height:100vh}:-moz-full-screen .display-area{border-radius:0;height:100vh}:-ms-fullscreen .display-area{border-radius:0;height:100vh}