.infinite-canvas{width:100%;height:100%;min-height:0;position:relative}.infinite-canvas__hint{z-index:2;color:var(--color-text-primary,#ffffffeb);background:color-mix(in srgb, var(--glass-bg,#1414188c) 78%, transparent);border:1px solid var(--glass-border,#ffffff24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:min(720px,100% - 1.6rem);padding:.45rem .6rem;font-size:.82rem;position:absolute;top:.75rem;right:.75rem;overflow:hidden}.infinite-canvas__viewport{border:1px solid var(--color-border,#ffffff1f);clip-path:inset(0 round 18px);isolation:isolate;contain:paint;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:#0c0c0e;border-radius:18px;width:100%;height:100%;position:relative;overflow:hidden}.infinite-canvas__viewport:active{cursor:grabbing}.infinite-canvas__world{transform-origin:0 0;position:absolute;inset:0}.infinite-canvas__item{transform-origin:0 0;width:var(--infinite-canvas-item-width,280px);background:color-mix(in srgb, var(--glass-bg,#1414188c) 70%, transparent);border:1px solid var(--glass-border,#ffffff24);box-shadow:0 18px 42px #00000047, 0 2px 0 color-mix(in srgb, var(--color-text-primary,#fff) 10%, transparent) inset;cursor:pointer;border-radius:18px;position:absolute;overflow:hidden}.infinite-canvas__item img{pointer-events:none;width:100%;height:auto;display:block}.infinite-canvas__delete{background:color-mix(in srgb, var(--color-bg-primary,#0000008c) 65%, transparent);width:26px;height:26px;color:var(--color-text-primary,#ffffffeb);border:1px solid var(--glass-border,#ffffff24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;opacity:0;z-index:10;border-radius:999px;justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:8px;right:8px}.infinite-canvas__item:hover .infinite-canvas__delete{opacity:1}.infinite-canvas__delete:hover{background:color-mix(in srgb, var(--color-accent-warm,#ffc352e6) 85%, transparent);transform:scale(1.1)}
.generation-frame-container{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;min-height:300px;padding:2rem;display:flex}.generation-frame-container--fill{min-height:0;padding:0;display:block}.generation-frame{--bg:#0c0c0e;--border:#a855f73d;--shadow:#08061294;--fx-a:var(--image-loading-fx-a,#a855f7);--fx-b:var(--image-loading-fx-b,#ec4899);--glow-a:color-mix(in srgb, var(--fx-a) 80%, transparent);--glow-b:color-mix(in srgb, var(--fx-b) 65%, transparent);--glow-a-dim:color-mix(in srgb, var(--fx-a) 18%, transparent);--glow-b-dim:color-mix(in srgb, var(--fx-b) 14%, transparent);--tank-bg-top:#22122ef2;--tank-bg-bottom:#100a1cf7;--water-a:color-mix(in srgb, var(--fx-a) 64%, transparent);--water-b:color-mix(in srgb, var(--fx-b) 58%, transparent);--water-c:color-mix(in srgb, color-mix(in srgb, var(--fx-a) 55%, var(--fx-b) 45%) 45%, transparent);border:1px solid var(--border);width:100%;max-width:400px;box-shadow:0 22px 60px var(--shadow);background:#ffffff08;border-radius:22px;transition:aspect-ratio .3s;animation:3s ease-in-out infinite borderBreath;position:relative;overflow:hidden}.generation-frame.light-mode{--bg:#f7f7fb;--border:#171b231f;--shadow:#0f172a1f;--fx-a:var(--image-loading-fx-a,#c084fc);--fx-b:var(--image-loading-fx-b,#f472b6);--tank-bg-top:#faf6fff2;--tank-bg-bottom:#f8f2fff5}.generation-frame--fill{border:none;border-radius:0;max-width:none;height:100%;animation:none}.generation-tank{background:radial-gradient(900px 420px at 20% 10%, var(--glow-a-dim), transparent 62%), radial-gradient(900px 420px at 85% 85%, var(--glow-b-dim), transparent 62%), linear-gradient(180deg, var(--tank-bg-top), var(--tank-bg-bottom));border-radius:22px;position:absolute;inset:0;overflow:hidden}.generation-frame--fill .generation-tank{border-radius:0}.generation-canvas{width:100%;height:100%;display:block}@keyframes borderBreath{0%,to{border-color:var(--border);box-shadow:0 22px 60px var(--shadow), 0 0 0 0 transparent}50%{border-color:var(--glow-a);box-shadow:0 22px 60px var(--shadow), 0 0 30px 2px var(--glow-a-dim), 0 0 15px 1px var(--glow-b-dim)}}.generation-frame--fill{animation:3s ease-in-out infinite borderBreathFill}@keyframes borderBreathFill{0%,to{box-shadow:inset 0 0 20px var(--shadow)}50%{box-shadow:inset 0 0 30px var(--glow-a-dim)}}