html,body,#root{margin:0;padding:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;display:flex;flex:1;flex-direction:column}.app{display:flex;width:100%;height:100%;flex-direction:column}.canvas{flex:1}.actions{height:50px;display:flex;padding:1em;column-gap:1em}.actions-separator{width:50px}.genai-actions{display:flex;flex-direction:row;column-gap:1em;padding:.75em 0 .75em .75em;--color-text-1: rgb(255, 255, 255)}.genai-actions button{border-radius:12px;background-color:#8a2be2}.genai-actions .tlui-icon{width:24px;height:24px}.genai-actions-context-cont{transform-origin:top left;transform:translateY(50px);pointer-events:none}.genai-actions-context{display:flex;flex-direction:row;column-gap:1em;padding:.75em;--color-text-1: rgb(255, 255, 255)}.genai-actions-context button{border-radius:8px;background-color:#8a2be2;padding:10px}.genai-actions-context .tlui-icon{margin-right:5px}.notice-banner{background-color:#fffbe6;color:#5d5123;padding:6px 40px 6px 20px;text-align:center;font-size:14px;line-height:1.5;position:relative;border-bottom:1px solid #fff1b8;z-index:1000}.notice-banner a{color:#0052cc;font-weight:700;text-decoration:underline}.notice-banner a:hover{text-decoration:none}.notice-bar-close{position:absolute;top:50%;right:15px;transform:translateY(-50%);background:transparent;border:none;border-radius:50%;width:26px;height:26px;font-size:22px;line-height:1;cursor:pointer;color:#7b714b;padding:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.notice-bar-close:hover{background-color:#00000014;color:#5d5123}.prompt-bar-wrapper{position:fixed;bottom:88px;left:50%;transform:translate(-50%);pointer-events:none;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:8px}.prompt-bar{pointer-events:all;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #e8e8e8;padding:8px;border-radius:999px;box-shadow:0 4px 16px #0000001a;width:100%;transition:background-color .2s,border-color .2s,box-shadow .2s}.prompt-input{flex-grow:1;background:transparent;border:none;color:#333;font-size:14px;outline:none;padding:8px;min-width:100px}.prompt-input::placeholder{color:#888}.prompt-bar-button{background-color:transparent;border:none;border-radius:999px;color:#555;cursor:pointer;height:40px;width:40px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease;flex-shrink:0}.prompt-bar-button svg{width:20px;height:20px}.prompt-bar-button:hover:not(:disabled){background-color:#f0f0f0}.prompt-bar-button.run-button{background-color:#ae3ec9;color:#fff;width:auto;font-weight:500;font-size:14px}.prompt-bar-button.run-button:hover:not(:disabled){background-color:#d880ee}.prompt-bar-button:disabled{opacity:.5;cursor:not-allowed}.prompt-image-preview{position:relative;width:40px;height:40px;flex-shrink:0}.prompt-image-preview img{width:100%;height:100%;object-fit:cover;border-radius:999px}.prompt-image-preview-close{position:absolute;top:-4px;right:-4px;background:#fff;color:#333;border:1px solid #ddd;box-shadow:0 1px 3px #0000001a;border-radius:50%;width:20px;height:20px;font-size:14px;line-height:18px;text-align:center;cursor:pointer;padding:0}.prompt-bar-notice{color:#666;font-size:12px;pointer-events:all;background:transparent;padding:0}.prompt-generate-button-group{position:relative;display:flex}.prompt-bar-button.run-button.main-action{border-top-right-radius:0;border-bottom-right-radius:0;padding-left:24px;padding-right:12px}.prompt-bar-button.run-button.dropdown-trigger{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:8px;padding-right:8px;border-left:1px solid #9d36b4;width:auto}.prompt-bar-button.run-button.dropdown-trigger svg{transition:transform .2s}.prompt-bar-button.run-button.dropdown-trigger[aria-expanded=true] svg{transform:rotate(180deg)}.prompt-dropdown-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:10;display:flex;flex-direction:column;width:max-content;min-width:160px;overflow:hidden;padding:4px 0}.prompt-dropdown-menu button{background:none;border:none;text-align:left;padding:10px 16px;cursor:pointer;font-size:14px;color:#333;width:100%}.prompt-dropdown-menu button:hover{background-color:#f0f0f0}@media (prefers-color-scheme: dark){.prompt-bar{gap:8px;background:#1e1e1ed9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 8px 32px #0000004d}.prompt-input{color:#fff}.prompt-input::placeholder{color:#999}.prompt-bar-button{background-color:#3d3d3d;border-radius:12px;color:#fff}.prompt-bar-button svg{width:22px;height:22px}.prompt-bar-button:hover:not(:disabled){background-color:#555}.prompt-bar-button.run-button{background-color:#8a2be2;color:#fff;font-weight:600}.prompt-bar-button.run-button:hover:not(:disabled){background-color:#9a4dff}.prompt-image-preview img{border-radius:12px}.prompt-image-preview-close{top:-5px;right:-5px;background:#1e1e1e;color:#fff;border:none;box-shadow:none;line-height:20px}.prompt-bar-notice{color:#aaa;background:#1e1e1ed9;padding:4px 12px;border-radius:10px}.prompt-bar-button.run-button.main-action{padding-left:16px;padding-right:12px}.prompt-bar-button.run-button.dropdown-trigger{border-left-color:#fff3}.prompt-dropdown-menu{background:#2d2d2de6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px}.prompt-dropdown-menu button{color:#fff}.prompt-dropdown-menu button:hover{background-color:#ffffff1a}}.getting-started-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;padding:2rem;box-sizing:border-box}.getting-started-content{position:relative;background-color:#fff4e6;padding:1rem 2rem 2rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:800px;width:100%;box-sizing:border-box;text-align:center}.getting-started-content h1{font-family:Permanent Marker,cursive;font-weight:400;color:#1a73e8;margin-top:0;margin-bottom:1.5rem}.getting-started-description{font-style:italic;margin:-1rem 0 1.5rem;color:#c2185b}.getting-started-content video,.getting-started-content img{width:100%;max-width:100%;border-radius:8px;outline:none}.getting-started-close{position:absolute;top:10px;right:15px;background:none;border:none;font-size:32px;line-height:1;cursor:pointer;color:#333;padding:0;font-weight:700}