:root{--bg-background:#fff;--bg-border:#000;--foreground-color:#000;--border-width:2px;--border-radius:4px}.dark{--bg-background:#111;--bg-border:#fff;--foreground-color:#fff}*{margin:0;padding:0}html,body,button,input{touch-action:manipulation}button{font:inherit}body{background-color:var(--bg-background);color:var(--foreground-color);padding:0 16px 200px}h2,h3{text-align:center}header{border-bottom:var(--border-width) solid var(--bg-border);justify-content:end;width:100%;display:inline-flex}header .theme-toggle{border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);width:44px;height:44px;color:var(--color-foreground);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex}header .theme-toggle-icon{width:20px;height:20px;-webkit-mask-image:var(--theme-icon);mask-image:var(--theme-icon);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--theme-icon);background-color:currentColor;display:block;-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.form{flex-direction:row;gap:2px;width:100%;display:flex}.form button{border-radius:var(--border-radius);border:var(--border-width) solid var(--bg-border);width:60px;color:var(--foreground-color);cursor:pointer;background-color:#0000;overflow:hidden}.form .gradient-input{border:var(--border-width) solid var(--bg-border);border-radius:var(--border-radius);width:100%;max-width:350px;height:50px;padding:4px 8px}.send-icon{-webkit-mask-image:var(--icon-send);mask-image:var(--icon-send);-webkit-mask-image:var(--icon-send)}.reload-icon{width:20px;height:20px;-webkit-mask-image:var(--icon-reload);mask-image:var(--icon-reload);-webkit-mask-image:var(--icon-reload)}.history-panel{z-index:9;border:var(--border-width) solid var(--bg-border);border-radius:var(--border-radius);background:var(--bg-background);flex-direction:column;width:min(300px,100vw - 32px);min-height:0;padding:10px;display:flex;position:fixed;top:72px;bottom:96px;left:16px}.history-title{text-align:left;flex:none;margin-bottom:8px;font-size:14px;line-height:1.2}.history-list{flex-direction:column;flex:1;gap:6px;min-height:0;list-style:none;display:flex;overflow:auto}.history-item{border:var(--border-width) solid var(--bg-border);border-radius:var(--border-radius);width:100%;min-height:50px;color:var(--foreground-color);cursor:pointer;background:0 0;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:8px;padding:5px;display:grid}.history-item[aria-current=true]{outline:2px solid var(--foreground-color);outline-offset:-5px}.history-gradient-text{text-align:left;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.2;overflow:hidden}.history-gradient-preview{border:1px solid var(--bg-border);border-radius:var(--border-radius);background-position:50%;background-size:cover;width:40px;height:40px}.history-control{justify-content:center;align-items:center;display:inline-flex}.history-control[hidden]{display:none}.history-control:disabled{opacity:.35;cursor:default}.history-control img{width:24px;height:24px;display:block}.history-redo-icon{transform:rotate(180deg)}.draw-area{aspect-ratio:1;border:var(--border-width) solid var(--bg-border);border-radius:var(--border-radius);width:min(100%,240px);height:auto}.gradient-container{width:100%;min-width:0;max-width:240px;position:relative}.gradient-container .title{text-align:center;overflow-wrap:anywhere;color:#fff;mix-blend-mode:difference;width:90%;font-size:clamp(11px,4vw,18px);line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gradient-container .gradient-error{color:#b42318;overflow-wrap:anywhere;min-height:32px;margin-top:6px;font-size:12px;line-height:1.2}.gradient-container[data-state=error] .draw-area{border-color:#b42318}.gradient-container[data-target=css-original]{width:min(100%,260px);min-width:0}.gradient-container[data-target=css-original] .draw-area{aspect-ratio:1;width:100%;height:auto}.container{margin-top:30px}.container.playground{flex-direction:column;justify-content:flex-start;align-items:center;width:min(100%,1200px);margin:0 auto;display:flex}.container.content{flex-direction:column;justify-content:flex-start;align-items:center;gap:24px;width:100%;display:flex}.container.transformer-content{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:4px;width:100%;max-width:736px;display:grid}.svg.text{letter-spacing:0;font-size:52px;font-weight:800}.form{z-index:10;width:min(100% - 24px,520px);display:inline-flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.form .gradient-input{width:100%;min-width:0;max-width:none;font-size:18px}.form button{background:#fff;width:auto;min-width:48px;padding-inline:8px}@media (width<=1080px){.history-panel{width:min(100%,520px);max-height:240px;margin-top:16px;position:static}}