:root{--ink:#1b1a1f;--ink-2:#6d6a75;--ink-3:#9a97a2;--hair:#1b1a1f24;--panel:#fbfafa;--stage:#efedeb;--accent:#e2486a;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;--panel-w:320px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{grid-template-columns:minmax(0, 1fr) var(--panel-w);background:var(--stage);color:var(--ink);font:13px/1.4 var(--sans);grid-template-rows:minmax(0,1fr);display:grid;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--hair);background:#fff;border-radius:8px;padding:5px 10px;transition:transform .16s,background-color .16s}button:active{transform:scale(.97)}button.primary{background:var(--ink);color:#fff;border-color:#0000}button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#preview-column{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;display:grid}#stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);place-items:center;row-gap:20px;min-width:0;min-height:0;padding:32px 32px 28px;transition:background-color .2s;display:grid;position:relative}#orb-area{place-items:center;width:100%;height:100%;min-height:0;padding:8px;display:grid;position:relative;container-type:size}.sun-handle{z-index:2;color:#705011;cursor:grab;touch-action:none;background:#fff3ce;border:1px solid #5b440f66;border-radius:50%;width:44px;height:44px;padding:0;font-size:25px;transition:none;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 12px #1b1a1f29}.sun-handle:active{cursor:grabbing;transform:translate(-50%,-50%)}.sun-help{background:var(--panel);color:var(--ink-2);pointer-events:none;border-radius:6px;margin:0;padding:4px 9px;font-size:11px;position:absolute;bottom:0}#stage[data-backdrop=dark]{color:#eceaf0;background:#16131a}#stage[data-backdrop=checker]{background:repeating-conic-gradient(#e3e1df 0% 25%,#f7f6f4 0% 50%) 50%/24px 24px}#orb{aspect-ratio:1;width:min(100cqw,100cqh,560px);position:relative}#notice{color:var(--ink-2);margin:0;position:absolute;top:16px}#dock{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;width:100%;display:flex}#states{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip{border-radius:99px;padding:5px 12px;position:relative}.chip[data-live]:before{content:"";background:var(--accent);vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.chip .remove{color:var(--ink-3);margin-left:6px}.chip .remove:hover{color:var(--accent)}.add{border:1px dashed var(--hair);background:0 0;border-radius:99px;padding:5px 12px}#level{align-items:center;gap:8px;display:flex}#level label{color:var(--ink-2);align-items:center;gap:6px;display:flex}#stage[data-backdrop=dark] #level label,#stage[data-backdrop=dark] #notice{color:#a7a3b0}.segmented{display:inline-flex}.segmented button{border-radius:0;margin-left:-1px}.segmented button:first-child{border-radius:8px 0 0 8px}.segmented button:last-child{border-radius:0 8px 8px 0}#stage[data-backdrop=dark] button:not([aria-pressed=true]){background:#221e27;border-color:#ffffff29}#stage[data-backdrop=dark] button[aria-pressed=true]{color:#16131a;background:#eceaf0;border-color:#eceaf0}#stage[data-backdrop=dark] .add{border-color:#ffffff38}#panel{border-left:1px solid var(--hair);background:var(--panel);flex-direction:column;min-height:0;display:flex}#panel header{justify-content:space-between;align-items:center;gap:8px;padding:14px 14px 8px;display:flex}#panel h1{margin:0;font-size:15px;font-weight:600}.actions{gap:6px;display:flex}.hist{display:inline-flex;position:relative}.hist-bar{background:#fff;border:1px solid #1b1a1f2e;border-radius:9px;align-items:center;gap:1px;padding:2px;display:inline-flex}.hist-btn{width:30px;height:26px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative}.hist-btn:hover:not(.is-disabled){background:#1b1a1f14}.hist-btn.is-disabled{cursor:default;color:var(--ink-3)}.hist-btn.is-disabled:active{transform:none}.hist-btn.is-active{border-color:color-mix(in srgb, var(--accent) 40%, transparent);background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}.hist-btn[data-tip]:after{content:attr(data-tip);z-index:30;opacity:0;pointer-events:none;background:var(--ink);color:#fff;white-space:nowrap;border-radius:6px;padding:4px 8px;font-size:10.5px;transition:opacity .12s,translate .12s;position:absolute;top:calc(100% + 7px);left:50%;translate:-50% -3px}.hist-btn[data-tip]:hover:after,.hist-btn[data-tip]:focus-visible:after{opacity:1;translate:-50%}.hist-btn.is-active:after{display:none}.hist-panel{z-index:20;border:1px solid var(--hair);-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);background:#fffffff0;border-radius:12px;flex-direction:column;width:248px;max-height:min(56vh,400px);display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 16px 44px -16px #1b1a1f73}.hist-panel[hidden]{display:none}.hist-head{border-bottom:1px solid var(--hair);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px 7px 12px;font-size:9.5px;font-weight:600;display:flex}.hist-clear{color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;background:0 0;border-radius:6px;padding:2px 8px;font-size:9.5px}.hist-clear:hover{color:var(--ink);background:#1b1a1f12}.hist-clear.is-disabled{opacity:.4;pointer-events:none}.hist-list{flex:auto;margin:0;padding:4px;list-style:none;overflow-y:auto}.hist-row{text-align:left;background:0 0;border:0;border-radius:7px;align-items:center;gap:9px;width:100%;padding:4px 7px;transition:background-color .1s;display:flex}.hist-row:hover{background:#1b1a1f0f}.hist-row:active{transform:none}.hist-row.is-current{background:color-mix(in srgb, var(--accent) 12%, transparent)}.hist-thumb{background:#1b1a1f0f 50%/contain no-repeat;border-radius:50%;flex:none;width:28px;height:28px}.hist-row.is-current .hist-thumb{box-shadow:0 0 0 1.5px var(--accent)}.hist-label{text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}.hist-time{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none;font-size:10.5px}.hist-empty{color:var(--ink-3);padding:10px 12px}#editing{color:var(--ink-2);margin:0;padding:0 14px 10px}#contents-tools{padding:0 14px 10px}.tool{gap:6px;display:grid}.tool h2{color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.tool input[type=url]{border:1px solid var(--hair);background:#fff;border-radius:8px;width:100%;padding:6px 8px}.tool .row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}#panel-body{flex:1;min-height:0;overflow-y:auto}#pane{--tp-base-background-color:transparent;--tp-base-shadow-color:transparent;--tp-container-background-color:#1b1a1f0d;--tp-container-background-color-hover:#1b1a1f17;--tp-container-background-color-focus:#1b1a1f1f;--tp-container-background-color-active:#1b1a1f26;--tp-container-foreground-color:var(--ink);--tp-input-background-color:#1b1a1f0f;--tp-input-background-color-hover:#1b1a1f1a;--tp-input-background-color-focus:#1b1a1f21;--tp-input-background-color-active:#1b1a1f29;--tp-input-foreground-color:var(--ink);--tp-label-foreground-color:var(--ink-2);--tp-base-font-family:var(--sans);--tp-button-background-color:#1b1a1f14;--tp-button-background-color-hover:#1b1a1f1f;--tp-button-background-color-focus:#1b1a1f24;--tp-button-background-color-active:#1b1a1f2e;--tp-button-foreground-color:var(--ink);--tp-groove-foreground-color:#1b1a1f1a;padding:0 8px 16px}dialog{border:1px solid var(--hair);border-radius:14px;width:min(720px,92vw);padding:0;box-shadow:0 24px 60px #0000002e}dialog::backdrop{background:#1b1a1f4d}dialog header,dialog footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px;display:flex}dialog footer{border-top:1px solid var(--hair);justify-content:flex-start}dialog pre{border-top:1px solid var(--hair);max-height:55vh;font:12px/1.5 var(--mono);background:#f6f5f3;margin:0;padding:14px;overflow:auto}#toast{bottom:20px;left:calc((100vw - var(--panel-w)) / 2);opacity:0;pointer-events:none;background:var(--ink);color:#fff;border-radius:99px;padding:8px 14px;transition:opacity .16s,translate .16s;position:fixed;translate:-50% 8px}#toast[data-show]{opacity:1;translate:-50%}#code-drawer{border-top:1px solid var(--hair);background:var(--panel);color:var(--ink);flex-direction:column;place-self:stretch stretch;display:flex;position:relative}#code-drawer[hidden]{display:none}.code-grip{cursor:ns-resize;touch-action:none;height:8px;position:absolute;top:-4px;left:0;right:0}#code-drawer[data-open=false] .code-grip{cursor:default}.code-head{align-items:center;gap:14px;padding:10px 20px;display:flex}.code-toggle{background:0 0;border:0;align-items:center;gap:6px;padding:2px 0;font-weight:600;display:inline-flex}.code-toggle:before{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:6px;height:6px;transition:rotate .16s;translate:0 -2px;rotate:45deg}#code-drawer[data-open=false] .code-toggle:before{translate:0 2px;rotate:-135deg}.code-toggle:active{transform:none}.code-status{color:var(--ink-2);font-size:12px}.code-status[data-state=ok]:before,.code-status[data-state=error]:before{content:"";background:#2f9e6a;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.code-status[data-state=error]{color:#a3123a}.code-status[data-state=error]:before{background:#d0342c}.code-hint{color:var(--ink-3);margin-left:auto;font-size:12px}.code-editor{height:min(var(--code-height,260px), 42vh);border-top:1px solid var(--hair);min-height:0;overflow:hidden}#code-drawer[data-open=false] .code-editor{display:none}@media (max-height:640px) and (min-width:761px){#stage{row-gap:14px;padding:20px 28px}.code-editor{height:min(var(--code-height,260px), 34vh)}}@media (max-width:760px){html,body{height:auto}html{scroll-padding-top:calc(min(460px,55svh) + 12px)}body{min-height:100svh;display:block;overflow:visible}#preview-column{display:contents}#stage{z-index:10;background:var(--stage);border-bottom:1px solid var(--hair);row-gap:10px;height:min(460px,55svh);padding:12px 16px;position:sticky;top:0}#orb-area{padding:4px}#orb{width:min(100cqw,100cqh,360px)}#stage #orb[data-weather-view=sky],#stage #orb[data-weather-view=overlay]{width:min(100cqw,177.778cqh,900px)}#dock{gap:8px 12px}#level{flex-wrap:wrap;justify-content:center;max-width:100%}#level-slider{width:90px}.code-head{flex-wrap:wrap;gap:6px 12px;padding-inline:16px}#panel{border-left:0;border-top:1px solid var(--hair)}#panel-body{overflow:visible}#toast{left:50%}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.color-launch{width:100%;height:22px;font:11px var(--mono);background:#eae8e8;border:0;border-radius:4px;align-items:center;gap:7px;padding:0 4px;display:flex}.color-launch canvas{border:1px solid var(--hair);border-radius:3px;width:34px;height:16px}.color-launch span{text-overflow:ellipsis;overflow:hidden}.color-editor{border:1px solid var(--hair);background:var(--panel);width:328px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);color:var(--ink);font:12px/1.4 var(--sans);border-radius:12px;margin:0;padding:14px;position:fixed;inset:auto;overflow:auto;box-shadow:0 8px 32px #1b1a1f33}.color-heading{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.color-heading button{background:0 0;border:0;padding:0 6px;font-size:20px}.color-editor select{border:1px solid var(--hair);width:100%;color:var(--ink);background:#fff;border-radius:6px;margin-bottom:12px;padding:6px 8px}.color-field{border:1px solid var(--hair);touch-action:none;cursor:crosshair;border-radius:8px;height:174px;margin:0 8px 12px;position:relative}.color-field canvas{border-radius:7px;width:100%;height:100%;display:block}.color-point{touch-action:none;cursor:grab;border:2px solid #fff;border-radius:50%;width:20px;height:20px;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0000008c}.color-point:active{cursor:grabbing;transform:translate(-50%,-50%)}.color-point[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.color-row{align-items:center;gap:7px;margin-bottom:12px;display:flex}.color-row input[type=color]{border:1px solid var(--hair);background:0 0;border-radius:4px;width:36px;height:28px;padding:0}.color-hex{border:1px solid var(--hair);width:100%;min-width:0;font:12px var(--mono);border-radius:5px;padding:5px 7px}.color-row button{padding:3px 8px}.color-controls{grid-template-columns:1fr 1fr;gap:8px 12px;display:grid}.color-controls label{color:var(--ink-2);flex-direction:column;gap:3px;display:flex}.color-controls input{border:1px solid var(--hair);width:100%;font:12px var(--mono);background:#fff;border-radius:5px;padding:5px 7px}.color-help{color:var(--ink-2);margin:12px 0 0;font-size:11px}#orb[data-weather-view=sky],#orb[data-weather-view=overlay]{aspect-ratio:16/9;width:min(100cqw,900px)}