.fill-demo{position:relative;isolation:isolate;aspect-ratio:16 / 11;overflow:hidden;border-radius:1rem;background:var(--secondary);color:var(--foreground)}.fill-demo__image,.fill-demo__scene,.fill-demo__mask{position:absolute;inset:0;width:100%;height:100%}.fill-demo__image{object-fit:cover;-webkit-user-select:none;user-select:none}.fill-demo__after{clip-path:inset(0 0 0 100%)}.fill-demo[data-ready=true] .fill-demo__after{clip-path:inset(0 0 0 50%)}.fill-demo__scene{pointer-events:none}.fill-demo__mask{display:none;color:var(--brand);opacity:0}.fill-demo__mask path{opacity:.32}.fill-demo[data-animated=true] .fill-demo__mask{display:block}.fill-demo__brush{position:absolute;left:43.125%;top:30%;width:6.6%;aspect-ratio:1;transform:translate(-50%,-50%);border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #20163859;background:#ffffff26;opacity:0}.fill-demo__divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;box-shadow:0 0 4px #00000026;opacity:0}.fill-demo__divider>span{position:absolute;top:48%;left:50%;display:grid;width:28px;height:28px;place-items:center;border:1px solid rgb(255 255 255 / 85%);border-radius:50%;background:#ffffffd9;color:var(--foreground);transform:translate(-50%,-50%);font-size:16px}.fill-demo__labels{position:absolute;top:57px;right:14px;left:14px;display:flex;justify-content:space-between;opacity:0}.fill-demo__labels>span{padding:4px 8px;border-radius:5px;background:#1e1a17ad;color:#fff;font-size:10px;font-weight:500}.fill-demo[data-ready=true] :is(.fill-demo__divider,.fill-demo__labels){opacity:1}.fill-demo__topline{position:absolute;top:12px;right:12px;left:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.fill-demo__badge,.fill-demo__controls{display:flex;align-items:center;border:1px solid rgb(255 255 255 / 65%);background:#ffffffe0;box-shadow:0 2px 8px #25190c0a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.fill-demo__badge{gap:5px;min-height:30px;padding:0 10px;border-radius:8px;font-size:10px;font-weight:600}.fill-demo__badge svg{color:var(--brand)}.fill-demo__controls{border-radius:9px}.fill-demo__controls button{display:grid;width:32px;height:32px;place-items:center;border-radius:8px;cursor:pointer}.fill-demo__controls button:hover{background:var(--accent);color:var(--foreground)}.fill-demo__panel{position:absolute;right:14px;bottom:17px;left:14px;padding:11px;border:1px solid rgb(255 255 255 / 85%);border-radius:12px;background:#fffffff0;box-shadow:0 5px 20px #23190f1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}.fill-demo__step{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;font-weight:600;line-height:1.4}.fill-demo__mode{border-radius:4px;background:var(--accent);padding:2px 6px;color:var(--accent-foreground);font-size:9px}.fill-demo__input{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 4px 4px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card)}.fill-demo__text{position:relative;flex:1;min-width:0;font-size:clamp(10px,1.1vw,13px);line-height:1.5}.fill-demo__typed{display:block}.fill-demo__placeholder{display:none;color:var(--muted-foreground)}.fill-demo[data-phase=select] .fill-demo__placeholder{display:block}.fill-demo[data-phase=select] .fill-demo__typed{display:none}.fill-demo__caret{display:none;width:1px;height:12px;margin-left:2px;vertical-align:-2px;background:var(--foreground)}.fill-demo[data-phase=describe] .fill-demo__caret{display:inline-block}.fill-demo__submit{display:grid;flex:0 0 30px;height:30px;place-items:center;border-radius:6px;background:var(--primary);color:var(--primary-foreground)}.fill-demo__spinner,.fill-demo__check{display:none}.fill-demo:is([data-phase=generate],[data-phase=result],[data-phase=compare]) .fill-demo__arrow{display:none}.fill-demo[data-phase=generate] .fill-demo__spinner,.fill-demo:is([data-phase=result],[data-phase=compare]) .fill-demo__check{display:block}.fill-demo__track{position:absolute;right:0;bottom:0;left:0;height:3px;background:#ffffff59}.fill-demo__track span{display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left}.fill-demo[data-animated=false] .fill-demo__track{display:none}@media(max-width:639px){.fill-demo{aspect-ratio:auto;padding-bottom:83px}.fill-demo:before{content:"";display:block;aspect-ratio:16 / 11}.fill-demo__image,.fill-demo__scene{height:calc(100% - 83px)}.fill-demo__panel{right:0;bottom:3px;left:0;height:80px;padding:10px;border:0;border-radius:0;background:var(--card);box-shadow:none}.fill-demo__step{margin-bottom:5px;font-size:10px}.fill-demo__input{min-height:32px;padding:3px 3px 3px 7px}.fill-demo__text{font-size:11px}.fill-demo__submit{flex-basis:26px;height:26px}}