/* Widget cards: the same renderer in the Studio, the website and (mirrored in SwiftUI) on the Mac desktop. */
.w-card *{box-sizing:border-box;margin:0}
.w-card button{border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
.w-card ul{list-style:none;padding:0}
.w-card{width:100%;height:100%;padding:18px 20px;border-radius:var(--w-radius);background:var(--w-bg);color:var(--w-ink);font-family:var(--w-font);box-shadow:0 18px 40px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden;display:flex;flex-direction:column;gap:6px;font-size:14px;text-align:left}
.w-card.flipin{animation:wflip .8s var(--snap)}
@keyframes wflip{0%{transform:perspective(900px) rotateX(-90deg) scale(.9);opacity:0}60%{transform:perspective(900px) rotateX(10deg)}100%{transform:none;opacity:1}}
.w-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.w-stack{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;scrollbar-width:none}.w-stack::-webkit-scrollbar{display:none}
/* Top-aligned cards hug their content (the scene height is the most they grow to); centred and spread cards fill it. */
.w-card.align-top{height:auto;max-height:100%}
.w-card h4{font-size:calc(20px * var(--k,1));letter-spacing:-.02em;line-height:1.15}
.w-card p{opacity:.85}
.w-card hr{border:0;border-top:1px solid color-mix(in srgb,var(--w-ink) 20%,transparent)}
.w-clock{font-size:min(calc(58px * var(--k,1)),36cqi);font-weight:250;letter-spacing:-.05em;line-height:1}
.w-date{font-size:calc(15px * var(--k,1));opacity:.75}
.w-big{font-size:min(calc(34px * var(--k,1)),30cqi);font-weight:300;letter-spacing:-.04em;line-height:1.05}
.w-bar{height:8px;border-radius:8px;background:color-mix(in srgb,var(--w-ink) 15%,transparent);overflow:hidden}
.w-bar i{display:block;height:100%;background:var(--w-accent);border-radius:inherit}
.w-card textarea{width:100%;flex:1;min-height:60px;border:0;background:color-mix(in srgb,var(--w-ink) 6%,transparent);border-radius:10px;padding:8px;color:inherit;font:inherit;resize:none}
.w-checks{display:grid;gap:6px}
.w-checks label{display:flex;gap:8px;align-items:center}
.w-checks input{accent-color:var(--w-accent)}
.w-actions{display:flex;gap:6px}
.w-actions button{padding:5px 12px;border-radius:999px;background:var(--w-accent);color:var(--w-bg);font-weight:600;font-size:12px}
.wc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.wc-head button{width:24px;height:24px;border-radius:6px;font-size:16px;opacity:.6}.wc-head button:hover{opacity:1;background:color-mix(in srgb,var(--w-ink) 10%,transparent)}
.wc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.wc-grid span{display:grid;place-items:center;aspect-ratio:1.25}
.wc-grid small{opacity:.5}
.wc-grid .today{background:var(--w-accent);color:var(--w-bg);border-radius:6px;font-weight:700}
/* live widget blocks (preview samples) */
.w-events{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.w-events li{display:grid;grid-template-columns:3.6em 1fr;gap:.6em;align-items:baseline;padding-left:.6em;border-left:3px solid var(--w-accent)}
.w-events time{font:500 .78em ui-monospace,monospace;opacity:.65}
.w-events span{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-np{display:flex;align-items:center;gap:.8em}.w-np strong{display:block}.w-np small{opacity:.65}
.w-eq{display:flex;align-items:flex-end;gap:2px;height:1.2em;color:var(--w-accent)}
.w-eq b{width:3px;background:currentColor;border-radius:2px;animation:eq 1s ease-in-out infinite}
.w-eq b:nth-child(2){animation-delay:-.4s}.w-eq b:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.w-batt{display:grid;gap:6px}
.w-meters{display:grid;gap:6px}.w-meters label{display:grid;grid-template-columns:4.5em 1fr 2.8em;gap:.6em;align-items:center;font:500 .78em ui-monospace,monospace}
.w-meters em{font-style:normal;text-align:right;opacity:.75}
/* ---------- widget framework: layout, look and the full block set ---------- */
.w-card{background:linear-gradient(160deg,var(--w-bg),var(--w-bg2,var(--w-bg)))}
.w-card.glass{background:linear-gradient(160deg,color-mix(in srgb,var(--w-bg) 62%,transparent),color-mix(in srgb,var(--w-bg2,var(--w-bg)) 52%,transparent));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.w-stack.grid{display:grid;grid-template-columns:repeat(var(--w-cols),minmax(0,1fr));gap:10px 12px;align-items:start}
.w-block{position:relative;min-width:0;grid-column:span var(--span,1)}
/* size grows the hero (clock, temperature, heading, quote, flip) via --k; captions stay readable */
.w-block.size-s{font-size:.88em;--k:.85}.w-block.size-l{font-size:1.06em;--k:1.3}.w-block.size-xl{font-size:1.1em;--k:2}
.w-flip{font-size:min(calc(1em * var(--k,1)),7.4cqi)}.w-word{font-size:calc(1.5em * var(--k,1)) !important}.w-quote{font-size:calc(1em * var(--k,1))}
/* aesthetic controls: placement, frames and a painted picture behind the content */
.w-card.align-center>.w-stack{flex:1;justify-content:safe center;text-align:center;align-items:center;overflow:auto}.w-card.align-center .w-block{width:100%}
.w-card.align-spread>.w-stack{flex:1;justify-content:space-between;overflow:auto}
.w-card.frame-window{padding-top:0}.w-win{display:flex;align-items:center;gap:5px;flex:none;height:24px;margin:0 -20px 6px;padding:0 10px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--w-ink) 22%,transparent) 0 1px,transparent 1px 3px),color-mix(in srgb,var(--w-bg) 80%,#fff);border-bottom:1px solid color-mix(in srgb,var(--w-ink) 35%,transparent)}
.w-win i{width:10px;height:10px;border-radius:50%;border:1px solid color-mix(in srgb,var(--w-ink) 45%,transparent);background:var(--w-bg)}.w-win span{flex:1;text-align:center;font-size:11px;font-weight:600;margin-right:36px;padding:0 6px;background:color-mix(in srgb,var(--w-bg) 80%,#fff)}
.w-card.frame-pixel{border-radius:0;box-shadow:0 0 0 3px var(--w-ink),6px 6px 0 0 color-mix(in srgb,var(--w-ink) 60%,transparent);clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.w-card.pictured{position:relative;isolation:isolate}.w-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.w-card.pictured::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 0 38%,color-mix(in srgb,var(--w-bg) 70%,transparent) 68%,var(--w-bg) 100%)}
.w-card.pictured.align-center>.w-stack{justify-content:flex-end}
.w-card.pictured .w-stack{text-shadow:0 1px 10px color-mix(in srgb,var(--w-bg) 85%,transparent),0 0 2px color-mix(in srgb,var(--w-bg) 60%,transparent)}
.w-image.pending{display:grid;place-items:center;padding:10px;font-size:.75em;opacity:.6;text-align:center}
.w-symbol{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-bottom:4px;border-radius:.5em;background:color-mix(in srgb,var(--w-accent) 22%,transparent);color:var(--w-accent);font-size:.9em}
.w-analog{width:100%;max-width:150px;aspect-ratio:1;display:block;margin:auto}
.w-analog circle{fill:none;stroke:color-mix(in srgb,var(--w-ink) 22%,transparent);stroke-width:1.5}
.w-analog .tick{stroke:color-mix(in srgb,var(--w-ink) 55%,transparent);stroke-width:1.6;stroke-linecap:round}
.w-analog .h,.w-analog .m{stroke:var(--w-ink);stroke-linecap:round}.w-analog .h{stroke-width:4}.w-analog .m{stroke-width:2.6}
.w-analog .s{stroke:var(--w-accent);stroke-width:1.2}.w-analog .pin{fill:var(--w-accent);stroke:none}
.w-flip{display:flex;gap:4px;align-items:center}
.w-flip b{display:grid;place-items:center;width:1.25em;height:1.6em;border-radius:.18em;font:600 2.2em/1 var(--w-font);background:color-mix(in srgb,var(--w-ink) 10%,transparent);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--w-ink) 18%,transparent);position:relative}
.w-flip b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--w-bg) 70%,transparent)}
.w-flip i{font-style:normal;font-size:1.8em;opacity:.6}
.w-word{font:600 1.5em/1.15 var(--w-font);letter-spacing:-.02em;text-wrap:balance}
.w-ring{position:relative;display:grid;place-items:center;width:min(130px,100%);aspect-ratio:1;margin:auto}
.w-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.w-ring circle{fill:none;stroke:color-mix(in srgb,var(--w-ink) 14%,transparent);stroke-width:3.4}
.w-ring circle.on{stroke:var(--w-accent);stroke-linecap:round}
.w-ring b{font-size:1.5em;font-weight:600}.w-ring small{position:absolute;bottom:22%;opacity:.65;font-size:.72em}
.w-world{display:grid;gap:6px}.w-world div{display:flex;justify-content:space-between;align-items:baseline}.w-world b{font-variant-numeric:tabular-nums;font-size:1.1em}
.w-weather .now{display:grid;grid-template-columns:auto auto 1fr;gap:.5em;align-items:center}.w-wx{font-size:1.8em}.w-weather small{opacity:.7;line-height:1.35}
.w-weather .days{display:flex;justify-content:space-between;margin-top:8px}.w-weather .days span{display:grid;justify-items:center;gap:2px;font-size:.8em}.w-weather em{font-style:normal}
.attrib{display:block;margin-top:6px;font-size:.62em;opacity:.45}
.w-sky{display:flex;justify-content:space-between;gap:6px}.w-sky span{display:grid;gap:2px}.w-sky small{opacity:.65;font-size:.72em}.w-sky b{font-size:1.15em;font-variant-numeric:tabular-nums}
.w-quote{margin:0;font:500 1em/1.4 var(--w-font)}.w-quote.big{font-size:1.35em;font-weight:600;letter-spacing:-.01em}
.w-habits{display:grid;gap:5px}.w-habits .row{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,1.15em);gap:4px;align-items:center}
.w-habits span{font-size:.82em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.w-habits small{text-align:center;font-size:.6em;opacity:.55}
.w-habits button{width:1.15em;height:1.15em;border-radius:.3em;background:color-mix(in srgb,var(--w-ink) 12%,transparent);padding:0}.w-habits button.on{background:var(--w-accent)}
.w-counter .dots{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}.w-counter .dots i{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--w-ink) 14%,transparent)}.w-counter .dots i.on{background:var(--w-accent)}
.w-counter .row{display:flex;align-items:center;justify-content:space-between}.w-counter button{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--w-ink) 12%,transparent);font-size:1.1em;color:inherit}
.w-image{width:100%;border-radius:calc(var(--w-radius) * .6);object-fit:cover;aspect-ratio:4/3;background:color-mix(in srgb,var(--w-ink) 8%,transparent)}
.w-photos{position:relative;height:150px}.w-photos span{position:absolute;inset:8px;border-radius:12px;background:linear-gradient(135deg,var(--w-accent),color-mix(in srgb,var(--w-accent) 30%,#000));box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.w-photos span:nth-child(1){transform:rotate(-6deg);opacity:.5}.w-photos span:nth-child(2){transform:rotate(4deg);opacity:.75}.w-photos small{position:absolute;left:18px;bottom:16px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.w-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.w-links a{display:block;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--w-ink) 9%,transparent);color:inherit;text-decoration:none;font-size:.85em;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-news{margin:0;padding:0;list-style:none;display:grid;gap:6px}.w-news li{font-size:.86em;line-height:1.3;padding-left:.7em;border-left:2px solid var(--w-accent)}
.w-ticker{display:grid;gap:6px}.w-ticker span{display:grid;grid-template-columns:3.2em 1fr auto;align-items:baseline}.w-ticker em{font-style:normal;font-variant-numeric:tabular-nums}.w-ticker .up{color:#34c759}.w-ticker .down{color:#ff453a}
.w-contrib{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:2px;margin:4px 0}.w-contrib i{aspect-ratio:1;border-radius:2px;background:color-mix(in srgb,var(--w-accent) calc(var(--l) * 22% + 6%),color-mix(in srgb,var(--w-ink) 8%,transparent))}
.w-np .w-art{width:40px;height:40px;border-radius:8px;flex:none;background:linear-gradient(135deg,var(--w-accent),#222)}
.w-viz{display:flex;align-items:flex-end;gap:2px;height:22px;margin-left:auto;color:var(--w-accent)}.w-viz b{width:3px;background:currentColor;border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.w-viz b:nth-child(3n){animation-delay:-.3s}.w-viz b:nth-child(3n+1){animation-delay:-.7s}.w-viz b:nth-child(4n){animation-duration:.8s}
/* Blocks adapt to their own width (grid cells can be narrow). */
.w-block{container-type:inline-size}
@container (max-width:210px){.w-weather .now{grid-template-columns:auto 1fr}.w-weather .now small{grid-column:1/-1}.w-weather .days span:nth-child(n+4){display:none}.w-sky{flex-wrap:wrap}.w-links{grid-template-columns:1fr}}