.widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.widget-card{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:16px}.widget-card h3{margin:0 0 6px}.widget-card .widget-meta{font-size:13px;color:var(--muted);margin-bottom:14px}.weather-widget{width:100%;height:100%;min-height:220px;box-sizing:border-box;border-radius:18px;background:linear-gradient(135deg,#18212b,#0e151d);color:#fff;padding:clamp(18px,4vw,42px);display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:Inter,Arial,sans-serif}.weather-widget-main{min-width:0}.weather-widget-city{font-size:clamp(14px,2vw,24px);opacity:.72;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weather-widget-temp{font-size:clamp(52px,10vw,126px);font-weight:800;letter-spacing:-.07em;line-height:.9}.weather-widget-desc{font-size:clamp(16px,2.2vw,30px);margin-top:14px;opacity:.9}.weather-widget-icon{font-size:clamp(72px,12vw,150px);line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));flex:0 0 auto}.weather-widget-error{width:100%;height:100%;min-height:180px;display:grid;place-items:center;text-align:center;padding:20px;box-sizing:border-box;color:#fff;background:#111;border-radius:16px}.clock-widget{width:100%;height:100%;min-height:220px;box-sizing:border-box;border-radius:18px;background:linear-gradient(135deg,#15191f,#080a0d);color:#fff;padding:clamp(18px,4vw,42px);display:flex;align-items:center;justify-content:center;font-family:Inter,Arial,sans-serif}.clock-widget-main{min-width:0}.clock-widget-time{font-size:clamp(58px,12vw,160px);font-weight:800;letter-spacing:-.065em;line-height:.9;white-space:nowrap}.clock-widget-date{font-size:clamp(14px,2.4vw,30px);margin-top:18px;opacity:.72;text-transform:capitalize}.message-widget{width:100%;height:100%;min-height:120px;box-sizing:border-box;border-radius:18px;color:#fff;padding:clamp(14px,3vw,34px);overflow:hidden;font-family:Inter,Arial,sans-serif}.message-widget-track{width:100%;min-width:0}.message-widget-text{font-size:clamp(24px,4vw,64px);font-weight:700;line-height:1.15;white-space:pre-line}.message-widget-fade .message-widget-text{animation:messageFade 7s ease-in-out infinite}.message-widget-scroll{align-items:center!important;justify-content:flex-start!important}.message-widget-scroll .message-widget-track{width:max-content;min-width:100%;animation:messageScroll 20s linear infinite;will-change:transform}.message-widget-scroll .message-widget-text{white-space:nowrap;width:max-content;padding-left:100%}.widget-preview-wrap{width:min(900px,90vw);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}.widget-preview-wrap>div{width:100%;height:100%}
@keyframes messageFade{0%,15%{opacity:0}30%,70%{opacity:1}85%,100%{opacity:0}}@keyframes messageScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.design-zone-preview{container-type:size}.design-zone-preview .weather-widget{min-height:0;border-radius:0;padding:clamp(6px,5cqw,32px);gap:clamp(6px,4cqw,24px);overflow:hidden}.design-zone-preview .weather-widget-city{font-size:clamp(8px,min(5cqw,8cqh),24px);margin-bottom:clamp(2px,1cqh,8px)}.design-zone-preview .weather-widget-temp{font-size:clamp(18px,min(24cqw,34cqh),126px);line-height:.88}.design-zone-preview .weather-widget-desc{font-size:clamp(8px,min(6cqw,9cqh),30px);margin-top:clamp(2px,1.5cqh,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-zone-preview .weather-widget-icon{font-size:clamp(20px,min(28cqw,42cqh),150px)}.design-zone-preview .weather-widget-error{min-height:0;border-radius:0;padding:clamp(5px,4cqw,20px);font-size:clamp(8px,min(4.5cqw,6cqh),18px)}.design-zone-preview .clock-widget{min-height:0;border-radius:0;padding:clamp(5px,5cqw,32px);overflow:hidden}.design-zone-preview .clock-widget-time{font-size:clamp(16px,min(27cqw,38cqh),150px);line-height:.88}.design-zone-preview .clock-widget-date{font-size:clamp(7px,min(5.5cqw,8cqh),28px);margin-top:clamp(2px,2cqh,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-zone-preview .message-widget{min-height:0;border-radius:0;padding:clamp(5px,4cqw,24px)}.design-zone-preview .message-widget-text{font-size:clamp(10px,min(8cqw,14cqh),60px)}
@container (max-width:260px){.weather-widget{gap:4px;padding:7px}.weather-widget-icon{font-size:min(34cqw,48cqh)}.weather-widget-city{font-size:min(7cqw,8cqh)}.weather-widget-desc{font-size:min(7cqw,8cqh)}.clock-widget{padding:7px}.clock-widget-time{font-size:min(28cqw,42cqh)}.clock-widget-date{font-size:min(6cqw,9cqh);margin-top:3px}.message-widget{padding:6px}.message-widget-text{font-size:min(9cqw,16cqh)}}
@container (max-height:150px){.weather-widget{padding:6px 10px;align-items:center}.weather-widget-city{margin-bottom:1px}.weather-widget-desc{margin-top:2px}.weather-widget-temp{font-size:min(21cqw,40cqh)}.weather-widget-icon{font-size:min(24cqw,48cqh)}.clock-widget{padding:5px 10px}.clock-widget-time{font-size:min(24cqw,50cqh)}.clock-widget-date{font-size:min(5cqw,11cqh);margin-top:2px}.message-widget{padding:4px 8px}.message-widget-text{font-size:min(8cqw,20cqh)}}
@media(max-width:700px){.widget-preview-wrap .weather-widget{align-items:flex-end}.widget-preview-wrap .weather-widget-icon{font-size:72px}}