@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-interactive.min.css

@@ -0,0 +1,138 @@
+.fanui-command{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--fanui-z-modal) + 10);display:flex;justify-content:center;align-items:flex-start;padding:12vh var(--fanui-space-4) var(--fanui-space-4);opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s,visibility 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-command.is-open{opacity:1;visibility:visible}
+.fanui-command__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--fanui-backdrop-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
+.fanui-command__dialog{position:relative;width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-2xl);background-color:var(--fanui-color-overlay);box-shadow:var(--fanui-shadow-2xl);transform:translateY(-12px) scale(0.98);transition:transform 300ms cubic-bezier(0.34,1.56,0.64,1) 0s,opacity 300ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-command.is-open .fanui-command__dialog{transform:translateY(0) scale(1)}
+.fanui-command--glass .fanui-command__dialog{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-command--glass .fanui-command__dialog{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-command--glass .fanui-command__dialog{background-image:linear-gradient(color-mix(in srgb,var(--fanui-color-overlay) 55%,transparent),color-mix(in srgb,var(--fanui-color-overlay) 70%,transparent))}
+.fanui-command--glass .fanui-command__group-title,.fanui-command--glass .fanui-command__item-desc,.fanui-command--glass .fanui-command__item-hint,.fanui-command--glass .fanui-command__item-icon,.fanui-command--glass .fanui-command__foot{color:var(--fanui-color-text-muted)}
+.fanui-command__head{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-4);border-bottom:1px solid var(--fanui-color-border-subtle)}
+.fanui-command__icon{color:var(--fanui-color-text-subtle);flex:0 0 auto}
+.fanui-command__input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--fanui-font-size-md);color:var(--fanui-color-text)}
+.fanui-command__input:focus{outline:none}
+.fanui-command__input::placeholder{color:var(--fanui-color-text-subtle)}
+.fanui-command__body{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:var(--fanui-space-2);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-command__body::-webkit-scrollbar{width:6px;height:6px}
+.fanui-command__body::-webkit-scrollbar-track{background:transparent}
+.fanui-command__body::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-command__body::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-command__group-title{padding:var(--fanui-space-3) var(--fanui-space-3) var(--fanui-space-1);font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wider);text-transform:uppercase;color:var(--fanui-color-text-subtle)}
+.fanui-command__item{display:flex;align-items:center;gap:var(--fanui-space-3);padding:9px var(--fanui-space-3);border-radius:var(--fanui-radius-md);color:var(--fanui-color-text);cursor:pointer;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-command__item[aria-selected=true],.fanui-command__item.is-active{background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink)}
+.fanui-command__item:active{transform:scale(0.995)}
+.fanui-command__item[aria-disabled=true]{opacity:0.45;pointer-events:none}
+.fanui-command__item-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border-radius:var(--fanui-radius-sm);background-color:var(--fanui-color-surface-sunken);color:var(--fanui-color-text-muted);font-size:var(--fanui-font-size-sm)}
+.fanui-command__item-body{flex:1 1 auto;min-width:0}
+.fanui-command__item-title{display:block;font-size:var(--fanui-font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-command__item-desc{display:block;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-command__item-hint{flex:0 0 auto;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-command__empty{display:grid;place-items:center;gap:var(--fanui-space-2);padding:var(--fanui-space-10) var(--fanui-space-4);text-align:center;color:var(--fanui-color-text-subtle);font-size:var(--fanui-font-size-sm)}
+.fanui-command__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);padding:var(--fanui-space-2) var(--fanui-space-4);border-top:1px solid var(--fanui-color-border-subtle);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-command__keys{display:inline-flex;align-items:center;gap:var(--fanui-space-1)}
+.fanui-command__mark{padding:0 1px;border-radius:3px;background-color:var(--fanui-warning-soft-2);color:var(--fanui-warning-ink)}
+.fanui-dock{display:inline-flex;align-items:flex-end;gap:var(--fanui-space-2);padding:var(--fanui-space-2) var(--fanui-space-3);border-radius:var(--fanui-radius-2xl)}
+.fanui-dock__item{--fanui-dock-scale:1;position:relative;display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;color:var(--fanui-color-text);text-decoration:none;border-radius:var(--fanui-radius-lg);transform:scale(var(--fanui-dock-scale)) translateY(calc((var(--fanui-dock-scale) - 1) * -8px));transform-origin:bottom center;transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,box-shadow 200ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-dock__item:focus-visible{outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-dock__item:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-dock__item:hover{--fanui-dock-scale:1.42}
+.fanui-dock__item:hover + .fanui-dock__item,.fanui-dock__item:has(+ .fanui-dock__item:hover){--fanui-dock-scale:1.24}
+.fanui-dock__item:hover + .fanui-dock__item + .fanui-dock__item,.fanui-dock__item:has(+ .fanui-dock__item + .fanui-dock__item:hover){--fanui-dock-scale:1.1}
+.fanui-dock__label{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);padding:3px 8px;font-size:var(--fanui-font-size-xs);white-space:nowrap;color:var(--fanui-color-text-inverse);background-color:var(--fanui-color-text-strong);border-radius:var(--fanui-radius-sm);opacity:0;pointer-events:none;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-dock__item:hover .fanui-dock__label{opacity:1;transform:translateX(-50%) translateY(0)}
+.fanui-dock__item.is-active::after{content:"";position:absolute;bottom:-5px;width:4px;height:4px;border-radius:var(--fanui-radius-full);background-color:currentColor}
+.fanui-dock--sm .fanui-dock__item{width:38px;height:38px}
+.fanui-dock--vertical{flex-direction:column;align-items:center}
+.fanui-dock--vertical .fanui-dock__label{bottom:auto;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px)}
+.fanui-dock--vertical .fanui-dock__item:hover .fanui-dock__label{transform:translateY(-50%) translateX(0)}
+.fanui-carousel{position:relative}
+.fanui-carousel__viewport{display:flex;gap:var(--fanui-carousel-gap,var(--fanui-space-4));overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none}
+.fanui-carousel__viewport::-webkit-scrollbar{width:0;height:0;display:none}
+.fanui-carousel__viewport>*{flex:0 0 var(--fanui-carousel-slide,100%);scroll-snap-align:start}
+.fanui-carousel--peek .fanui-carousel__viewport>*{--fanui-carousel-slide:calc(100% - 48px)}
+.fanui-carousel--2 .fanui-carousel__viewport>*{--fanui-carousel-slide:calc((100% - var(--fanui-carousel-gap,16px)) / 2)}
+.fanui-carousel--3 .fanui-carousel__viewport>*{--fanui-carousel-slide:calc((100% - var(--fanui-carousel-gap,16px) * 2) / 3)}
+.fanui-carousel__nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-overlay);color:var(--fanui-color-text);box-shadow:var(--fanui-shadow-md);cursor:pointer;transform:translateY(-50%);transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-carousel__nav:hover{background-color:var(--fanui-color-hover);transform:translateY(-50%) scale(1.06)}
+.fanui-carousel__nav:disabled{opacity:0.35;cursor:not-allowed}
+.fanui-carousel__nav--prev{inset-inline-start:-8px}
+.fanui-carousel__nav--next{inset-inline-end:-8px}
+.fanui-carousel__dots{display:flex;align-items:center;justify-content:center;gap:var(--fanui-space-2);margin-top:var(--fanui-space-4)}
+.fanui-carousel__dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-border-strong);cursor:pointer;transition:width 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,background-color 200ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-carousel__dot.is-active{width:22px;background-color:var(--fanui-primary)}
+.fanui-carousel__progress{height:3px;margin-top:var(--fanui-space-4);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-border);overflow:hidden}
+.fanui-carousel__progress-bar{height:100%;border-radius:inherit;background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid));transform-origin:left center;transform:scaleX(var(--fanui-carousel-progress,0));transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-fab{position:fixed;inset-block-end:var(--fanui-space-6);inset-inline-end:var(--fanui-space-6);z-index:var(--fanui-z-fixed);display:flex;flex-direction:column-reverse;align-items:center;gap:var(--fanui-space-3)}
+.fanui-fab__trigger{display:grid;place-items:center;width:54px;height:54px;border:0;border-radius:var(--fanui-radius-full);background-image:var(--fanui-brand-grad);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 10px 24px -8px var(--fanui-primary-glow);transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,box-shadow 200ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-fab__trigger:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 32px -10px var(--fanui-primary-glow)}
+.fanui-fab__trigger:active{transform:scale(0.96)}
+.is-open .fanui-fab__trigger{transform:rotate(45deg)}
+.fanui-fab__list{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--fanui-space-3);margin:0;padding:0;list-style:none}
+.fanui-fab__item{display:flex;align-items:center;gap:var(--fanui-space-2);opacity:0;transform:translateY(10px) scale(0.9);pointer-events:none;transition:opacity 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,transform 200ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.is-open .fanui-fab__item{opacity:1;transform:none;pointer-events:auto}
+.fanui-fab__action{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-overlay);color:var(--fanui-color-text);box-shadow:var(--fanui-shadow-md);cursor:pointer}
+.fanui-fab__text{padding:3px 8px;font-size:var(--fanui-font-size-xs);white-space:nowrap;color:var(--fanui-color-text-inverse);background-color:var(--fanui-color-text-strong);border-radius:var(--fanui-radius-sm)}
+.fanui-fab__list .fanui-fab__item:nth-child(1){transition-delay:0ms}
+.fanui-fab__list .fanui-fab__item:nth-child(2){transition-delay:40ms}
+.fanui-fab__list .fanui-fab__item:nth-child(3){transition-delay:80ms}
+.fanui-fab__list .fanui-fab__item:nth-child(4){transition-delay:120ms}
+.fanui-fab__list .fanui-fab__item:nth-child(5){transition-delay:160ms}
+.fanui-fab--glass .fanui-fab__trigger{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-fab--glass .fanui-fab__trigger{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-fab--glass .fanui-fab__trigger{background-image:var(--fanui-brand-grad)}
+.fanui-scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;z-index:calc(var(--fanui-z-fixed) + 1);height:3px;background-color:transparent;pointer-events:none}
+.fanui-scroll-progress__bar{height:100%;background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-accent));transform-origin:left center;transform:scaleX(var(--fanui-scroll-progress,0));transition:transform 150ms linear 0s}
+.fanui-scroll-progress--thin{height:2px}
+.fanui-scroll-progress--thick{height:4px}
+.fanui-scroll-progress--glow .fanui-scroll-progress__bar{box-shadow:0 0 12px var(--fanui-primary-glow)}
+.fanui-spotlight{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-xl);background-color:var(--fanui-color-surface);transition:border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-spotlight::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--fanui-spot-x,50%) var(--fanui-spot-y,0%),var(--fanui-primary-soft-2,var(--fanui-primary-soft)),transparent 68%);transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-spotlight::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1px;opacity:0;background:radial-gradient(200px circle at var(--fanui-spot-x,50%) var(--fanui-spot-y,0%),var(--fanui-primary),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-spotlight:hover::before,.fanui-spotlight:hover::after{opacity:1}
+.fanui-spotlight>*{position:relative;z-index:2}
+.fanui-spotlight:hover{transform:translateY(-2px);box-shadow:var(--fanui-shadow-lg)}
+.fanui-spotlight--static::before,.fanui-spotlight--static::after{opacity:0.55}
+.fanui-cursor-glow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px circle at var(--fanui-cursor-x,50%) var(--fanui-cursor-y,30%),var(--fanui-brand-aura-a),transparent 62%);opacity:0.9}
+html[data-fanui-glass=off] .fanui-cursor-glow{opacity:0.5}
+.fanui-studio{position:fixed;inset-block-end:var(--fanui-space-5);inset-inline-end:var(--fanui-space-5);z-index:calc(var(--fanui-z-fixed) + 20);display:flex;flex-direction:column;align-items:flex-end;gap:var(--fanui-space-3);font-size:var(--fanui-font-size-sm)}
+.fanui-studio__trigger{display:inline-flex;align-items:center;gap:var(--fanui-space-2);height:44px;padding:0 var(--fanui-space-4);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-overlay);color:var(--fanui-color-text);box-shadow:var(--fanui-shadow-lg);cursor:pointer;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-studio__trigger{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-studio__trigger{box-shadow:var(--fanui-shadow-lg);transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-studio__trigger:hover{transform:translateY(-2px)}
+.fanui-studio__trigger-dot{width:14px;height:14px;border-radius:var(--fanui-radius-full);background-image:var(--fanui-brand-grad);box-shadow:0 0 0 3px var(--fanui-primary-ring)}
+.fanui-studio__panel{width:300px;max-height:min(74vh,620px);overflow-y:auto;padding:var(--fanui-space-5);border-radius:var(--fanui-radius-2xl);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-studio__panel::-webkit-scrollbar{width:6px;height:6px}
+.fanui-studio__panel::-webkit-scrollbar-track{background:transparent}
+.fanui-studio__panel::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-studio__panel::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-studio__panel{position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-studio__panel::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-studio__panel{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-studio__panel{--fanui-glass-radius:var(--fanui-radius-2xl);opacity:0;visibility:hidden;transform:translateY(12px) scale(0.97);transform-origin:bottom right;transition:opacity 300ms cubic-bezier(0.34,1.56,0.64,1) 0s,transform 300ms cubic-bezier(0.34,1.56,0.64,1) 0s,visibility 300ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-studio.is-open .fanui-studio__panel{opacity:1;visibility:visible;transform:none}
+.fanui-studio__title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fanui-space-4);font-size:var(--fanui-font-size-md);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-studio__section{padding-block:var(--fanui-space-3);border-top:1px solid var(--fanui-glass-divider)}
+.fanui-studio__section:first-of-type{border-top:0;padding-top:0}
+.fanui-studio__label{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fanui-space-2);font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wide);color:var(--fanui-color-text-subtle);text-transform:uppercase}
+.fanui-studio__value{font-variant-numeric:tabular-nums;font-weight:var(--fanui-font-weight-normal);color:var(--fanui-primary-ink);text-transform:none;letter-spacing:0}
+.fanui-studio__accents{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--fanui-space-2)}
+.fanui-studio__accent{position:relative;aspect-ratio:1;padding:0;border:1px solid rgba(2,6,23,0.14);border-radius:var(--fanui-radius-md);background-image:linear-gradient(135deg,var(--fanui-studio-c1),var(--fanui-studio-c2));cursor:pointer;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-studio__accent:hover{transform:translateY(-2px) scale(1.05)}
+.fanui-studio__accent[aria-pressed=true]{box-shadow:0 0 0 2px var(--fanui-color-overlay),0 0 0 4px var(--fanui-primary)}
+.fanui-studio__accent[aria-pressed=true]::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:5px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5))}
+.fanui-studio__row{display:flex;align-items:center;gap:var(--fanui-space-2)}
+.fanui-studio__hint{margin-top:var(--fanui-space-2);font-size:var(--fanui-font-size-xs);line-height:var(--fanui-line-height-normal);color:var(--fanui-color-text-subtle)}
+.fanui-studio__kbd{display:inline-block;padding:0 5px;font-family:var(--fanui-font-mono);font-size:11px;line-height:18px;color:var(--fanui-color-text-muted);background-color:var(--fanui-glass-divider);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-sm)}
+.fanui-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--fanui-z-modal);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s,visibility 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-sheet.is-open{opacity:1;visibility:visible}
+.fanui-sheet__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--fanui-backdrop-bg)}
+.fanui-sheet__panel{position:relative;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;padding:var(--fanui-space-3) var(--fanui-space-5) var(--fanui-space-6);border-radius:var(--fanui-radius-2xl) var(--fanui-radius-2xl) 0 0;position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-sheet__panel::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-sheet__panel{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-sheet__panel{--fanui-glass-radius:var(--fanui-radius-2xl);transform:translateY(100%);transition:transform 300ms cubic-bezier(0,0,0.2,1) 0s}
+.fanui-sheet.is-open .fanui-sheet__panel{transform:translateY(0)}
+.fanui-sheet__handle{width:40px;height:4px;margin:0 auto var(--fanui-space-4);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-border-strong);flex:0 0 auto}
+.fanui-sheet__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fanui-space-3)}
+.fanui-sheet__body{flex:1 1 auto;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0)}
+.fanui-bottom-nav{position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--fanui-z-fixed);display:flex;padding-bottom:env(safe-area-inset-bottom,0)}
+.fanui-bottom-nav__item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--fanui-space-2) 0;border:0;background:transparent;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);text-decoration:none;cursor:pointer;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-bottom-nav__item[aria-current=page],.fanui-bottom-nav__item.is-active{color:var(--fanui-primary)}
+.fanui-bottom-nav__item:hover{color:var(--fanui-color-text)}
+.fanui-bottom-nav__icon{display:grid;place-items:center;width:24px;height:24px;font-size:18px}
+.fanui-bottom-nav__badge{position:absolute;transform:translate(12px,-6px)}@supports (padding:env(safe-area-inset-bottom)){.fanui-fab{inset-block-end:calc(var(--fanui-space-6) + env(safe-area-inset-bottom,0px))}}@media (prefers-reduced-motion:reduce){.fanui-dock__item{transform:none !important}
+.fanui-carousel__viewport{scroll-behavior:auto}
+.fanui-spotlight:hover{transform:none}}