@font-face { font-family:"Roboto"; src:url("assets/Roboto-300.woff2") format("woff2"); font-style:normal; font-weight:300; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("assets/Roboto-400.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("assets/Roboto-500.woff2") format("woff2"); font-style:normal; font-weight:500 600; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("assets/Roboto-700.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap; }

/* Sculpted type -> immersive dashboard. Wording is preserved; hero punctuation is intentionally omitted. */
.vt-hero {
  box-sizing:border-box; position:relative; isolation:isolate; width:100%; background:#08090b;
}
.vt-hero-stage { position:relative; min-height:100svh; overflow:clip; }
.vt-hero-content {
  box-sizing:border-box; position:relative; z-index:1; width:100%; max-width:1920px;
  margin:auto; padding:132px 32px 80px;
}
vt-hero-ambient { position:absolute; inset:0; z-index:0; display:block; overflow:hidden; pointer-events:none; contain:strict; background:radial-gradient(ellipse at 0% 36%,#0b5e574a,transparent 58%),radial-gradient(ellipse at 100% 45%,#2949a85c,transparent 62%),radial-gradient(ellipse at 54% 12%,#1a695b4a,transparent 56%),#08090b; mask-image:linear-gradient(#000 76%,transparent 100%); }
.vt-hero-copy {
  --vt-display-size:clamp(42px,min(5.4vw,7.6svh),94px);
  --vt-display-weight:575;
  position:relative; z-index:1; max-width:1360px; margin:0 auto; text-align:left;
  font-family:'Roboto','PingFang TC','Microsoft JhengHei',sans-serif;
}
.vt-hero h1 { position:relative; margin:0; font-family:inherit; font-weight:500; text-wrap:balance; }
.vt-hero h1 span { display:block; font-size:clamp(22px,2.15vw,34px); line-height:1.45; font-weight:400; color:#a8bdbb; letter-spacing:.16em; text-indent:.16em; transform:scaleY(1.08); }
.vt-hero h1 strong { display:block; margin-top:18px; font-size:var(--vt-display-size); line-height:1.16; font-weight:var(--vt-display-weight); color:#edf6f2; letter-spacing:.08em; text-indent:.08em; transform:scaleY(1.1); }
@supports (background-clip:text) {
  .vt-hero h1 strong { background:linear-gradient(180deg,#ffffff 15%,#eaf6f0 62%,#aec9c2 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
}
.vt-hero-underlay { position:relative; margin-top:22px; }
.vt-hero-description { margin:0; color:#bdd4d1; font-size:calc(var(--vt-display-size) * .86); font-weight:var(--vt-display-weight); line-height:1.16; letter-spacing:.08em; text-indent:.08em; opacity:.36; filter:blur(.7px); transform:scaleY(1.1); transform-origin:50% 0; pointer-events:none; mask-image:linear-gradient(#000 48%,#000d 100%); }
.vt-hero-description span { display:block; }
.vt-hero-cta { position:absolute; z-index:1; top:33%; left:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:34px; padding:15px 26px; border:1px solid #c3ddd4; border-radius:6px; background:#d5eee5; color:#08221c!important; font-size:15px; font-weight:600; white-space:nowrap; box-shadow:0 4px 14px #0003; transition:box-shadow .2s,border-color .2s; }
.vt-hero-cta:hover { background:#e5f5ee; border-color:#e5f5ee; box-shadow:0 4px 14px #0003; }
.vt-hero-cta:focus-visible { outline:2px solid #93d7ca; outline-offset:5px; }
vt-hero-demo { display:block; min-width:0; }
.vt-hero-content > vt-hero-demo { position:relative; z-index:2; width:min(82%,1280px); margin:-40px auto 0; }

/* One left baseline and a clear hierarchy; retain the compact layout for now. */
@media (min-width:768px) {
  .vt-hero-copy { width:min(82%,1280px); max-width:none; --vt-display-weight:600; }
  .vt-hero h1 { width:fit-content; max-width:100%; text-wrap:wrap; }
  .vt-hero h1 span { font-size:clamp(1.5rem,1.8vw,1.75rem); line-height:1.4; letter-spacing:.07em; text-indent:0; transform:scaleY(1.03); transform-origin:0 0; }
  .vt-hero h1 strong { line-height:1.14; letter-spacing:.04em; text-indent:0; transform:scaleY(1.04); transform-origin:0 0; }
  .vt-hero-underlay { margin-top:20px; }
  .vt-hero-description { font-size:calc(var(--vt-display-size) * .73); font-weight:500; line-height:1.15; letter-spacing:.04em; text-indent:0; opacity:.56; filter:blur(.3px); transform:scaleY(1.04); transform-origin:0 0; mask-image:none; }
  .vt-hero-cta { position:relative; top:auto; left:auto; transform:none; margin-top:clamp(18px,2.2svh,26px); gap:28px; padding:13px 24px; font-weight:500; line-height:1.4; box-shadow:0 4px 14px #0003; }
  .vt-hero-cta:hover { box-shadow:0 4px 14px #0003; }
  .vt-hero-content > vt-hero-demo { margin-top:clamp(24px,3svh,36px); }
}
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  .vt-hero-description { pointer-events:auto; cursor:default; transition:opacity .3s ease,color .3s ease,filter .3s ease; }
  .vt-hero-description:hover { color:#e5f5f1; opacity:.92; filter:blur(0); }
}

/* Only enabled after the scroll controller is ready. No broken no-JS state. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference) {
  .vt-hero.has-scroll-scene { height:220svh; }
  .vt-hero.has-scroll-scene .vt-hero-stage { position:sticky; top:0; height:100svh; min-height:0; }
  .vt-hero.has-scroll-scene .vt-hero-content { height:100%; padding:0; }
  .vt-hero.has-scroll-scene .vt-hero-copy {
    position:absolute; top:clamp(112px,12svh,148px);
    left:calc(50% - var(--vt-copy-width,1100px)/2);
    right:auto; width:var(--vt-copy-width,1100px); max-width:none; margin:0;
    opacity:var(--vt-copy-opacity,1);
    transform:translate3d(0,var(--vt-copy-y,0px),0);
    filter:blur(var(--vt-copy-blur,0px));
    will-change:transform,opacity,filter;
  }
  .vt-hero.has-scroll-scene .vt-hero-content > vt-hero-demo {
    position:absolute; left:50%; top:var(--vt-device-y,58svh);
    width:var(--vt-device-width,1100px); margin:0;
    transform:translateX(-50%) scale(var(--vt-device-scale,.7)); transform-origin:50% 0;
    will-change:transform,top;
  }
}
@media(max-width:767px) {
  .vt-hero-content { padding:116px 24px 70px; }
  .vt-hero-copy { --vt-display-size:clamp(37px,5.15vw,50px); }
  .vt-hero h1 span { font-size:clamp(14px,2.1vw,19px); letter-spacing:.12em; text-indent:.12em; }
  .vt-hero-content > vt-hero-demo { width:calc(100% - 40px); margin-top:-24px; }
}
@media(max-width:767px) {
  .vt-hero-content { padding:112px 16px 54px; }
  .vt-hero-copy { --vt-display-size:clamp(26px,6.4vw,40px); }
  .vt-hero h1 span { font-size:clamp(12px,2.87vw,16px); letter-spacing:.1em; text-indent:.1em; }
  .vt-hero h1 strong { margin-top:16px; letter-spacing:.055em; text-indent:.055em; }
  .vt-hero-underlay { margin-top:14px; }
  .vt-hero-description { line-height:1.28; opacity:.36; filter:blur(.4px); letter-spacing:.055em; text-indent:.055em; }
  .vt-hero-cta { top:38%; padding:12px 22px; font-size:14px; }
  .vt-hero-content > vt-hero-demo { width:calc(100% - 26px); margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) { .vt-hero-cta { transition:none; } }

/* Flat product surfaces. No imitation stand, chin, or laptop keyboard. */
:host { display:block; min-width:0; color:#edf1f7; font-family:'Roboto','PingFang TC','Microsoft JhengHei',sans-serif; }
:host * { box-sizing:border-box; font-family:'Roboto','PingFang TC','Microsoft JhengHei',sans-serif !important; }
.vt-demo { min-width:0; }
.vt-demo-heading { display:none; }
.vt-demo-heading small { font-size:12px; color:#81909f; }
.vt-devices { position:relative; display:block; }
.vt-monitor { position:relative; z-index:2; min-width:0; }
.vt-console { box-sizing:border-box; position:relative; inset:auto; margin:0; padding:0; width:100%; max-width:none; max-height:none; border:0; background:transparent; color:#edf1f7; overflow:visible; }
.vt-console:not([open]) { display:none; }
.vt-console::backdrop { background:rgba(3,6,10,.76); backdrop-filter:blur(9px) saturate(.7); }
.vt-toolbar { display:none; }
.vt-toolbar strong { font-size:14px; letter-spacing:.08em; font-weight:500; color:#93a1b1; }
.vt-toolbar strong > span:first-child { color:#445264; margin:0 7px; }
.vt-selected-name { letter-spacing:0; }
.vt-action { display:inline-flex; align-items:center; gap:7px; border:1px solid #3a4551; border-radius:6px; padding:8px 13px; font:500 14px/1.4 system-ui,sans-serif; background:#0c141cbd; color:#d8e0e9; cursor:pointer; }
.vt-action:hover { background:#1a242f; border-color:#617182; }
.vt-hardware { padding:5px; border:1px solid #35414b; border-radius:8px; background:#0b1118; box-shadow:0 14px 36px #0004; overflow:hidden; }
.vt-console:not(.is-expanded) .vt-hardware { border-top-color:#6faaa0; border-left-color:#456e68; border-right-color:#566680; box-shadow:0 -1px 6px #baffed33,2px 0 8px #89a8ff20,0 14px 36px #0004; }
.vt-viewport { position:relative; width:100%; aspect-ratio:16/9; background:#080c14; overflow:hidden; border-radius:4px; }
.vt-viewport iframe { position:absolute; top:0; left:0; width:1920px; height:1080px; border:0; transform-origin:0 0; }
.vt-scene-enter { display:none !important; pointer-events:none; }
:host([data-intro]) .vt-console:not(.is-expanded) .vt-scene-enter { display:block; position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.vt-scene-enter:focus-visible { outline:2px solid #a0f2d9; outline-offset:-5px; }
.vt-chin,.vt-stand,.vt-base { display:none; }
.vt-action:focus-visible,.vt-phone-button:focus-visible { outline:2px solid #9addd0; outline-offset:4px; }
.vt-demo-help { margin:23px 0 0; font-size:12px; line-height:1.9; color:#8595a7; }
.vt-demo-help br { display:none; }
.vt-console.is-expanded { position:fixed; inset:0; margin:auto; padding:0; display:block; width:min(96vw,1720px,calc(94dvh * 16 / 9)); max-height:94dvh; overflow:hidden; border:1px solid #ffffff1c; border-radius:6px; background:#080c14; box-shadow:0 16px 48px #0005; }
.vt-console.is-expanded .vt-toolbar,.vt-console.is-expanded .vt-screen-footer { display:none; }
.vt-console.is-expanded .vt-hardware { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.vt-console.is-expanded .vt-viewport { border-radius:0; }
.vt-console.is-expanded .vt-chin,.vt-console.is-expanded .vt-stand,.vt-console.is-expanded .vt-base { display:none; }

/* A quiet, front-facing companion to the desktop dashboard. */
.vt-phone { position:absolute; z-index:3; width:204px; right:-96px; top:40px; padding:4px; border:1px solid #384451; border-radius:22px; background:#0b1118; box-shadow:0 14px 28px #0005; margin:0; opacity:var(--vt-phone-opacity,1); filter:none; transform:none; transition:opacity .18s ease; }
.vt-phone-screen { position:relative; border:0; border-radius:17px; padding:34px 14px 12px; background:#0b1220; min-height:400px; display:flex; flex-direction:column; }
.vt-phone-notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:8px; border-radius:5px; background:#03060b; }
.vt-phone-brand { font-size:12px; line-height:1.4; font-weight:500; color:#a9b8ce; letter-spacing:.14em; margin:0 0 7px; }
.vt-phone-title { font-size:18px; font-weight:500; line-height:1.3; letter-spacing:0; margin:0 0 6px; overflow-wrap:normal; }
.vt-phone-status { font-size:12px; line-height:1.5; color:#96a5ba; margin:0 0 16px; }
.vt-phone dl { display:grid; gap:8px; margin:0; }
.vt-phone dl > div { padding:10px; border-radius:4px; border:1px solid #26334a; }
.vt-phone .vt-energy-card { background:#172c9e24; border-color:#354576; }
.vt-phone .vt-event-card { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#101b2c; padding-block:9px; }
.vt-phone dt { font-size:12px; font-weight:400; color:#b7c4d6; line-height:1.4; }
.vt-phone dt small { font-size:12px; color:#96a5ba; margin-left:3px; }
.vt-phone dd { margin:5px 0 0; font-size:28px; font-weight:500; line-height:1.2; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:#1ac99c; }
.vt-phone .vt-event-card dd { font-size:23px; color:#e1e8f4; margin:0; white-space:nowrap; }
.vt-phone dd small { font-size:12px; font-weight:400; letter-spacing:0; color:#96a5ba; }
.vt-summary-text { font-size:12px; line-height:1.6; color:#a9b8ce; margin:12px 0 7px; }
.vt-event-track { height:2px; flex-shrink:0; overflow:hidden; background:#233047; border-radius:1px; }
.vt-event-track span { display:block; width:0; height:100%; background:#1ac99c; }
.vt-phone-button { width:100%; margin:14px 0 12px; padding:9px 2px; border:1px solid #354576; border-radius:4px; background:#172c9e30; font:500 12px/1.4 system-ui,sans-serif; color:#dce5f3; cursor:pointer; }
.vt-phone-button:hover { background:#172c9e60; border-color:#687dc1; }
.vt-phone-home { width:40px; height:3px; flex-shrink:0; border-radius:2px; background:#69768a; margin:auto auto 0; }
.vt-phone-screen > * { flex-shrink:0; }
@media(min-width:768px) {
  .vt-phone { width:var(--vt-phone-width,204px); right:calc(0px - var(--vt-phone-outset,100px)); top:calc(var(--vt-screen-top,0px) + var(--vt-phone-drop,41px)); }
  .vt-phone-screen { min-height:calc(var(--vt-phone-height,410px) - 10px); }
}
@media(min-width:1px) and (max-width:0px) {
  .vt-phone { right:-20px; width:190px; top:36px; }
}
@media(max-width:767px) {
  .vt-phone { width:184px; right:-18px; top:24px; transform:scale(.68); transform-origin:100% 0; }
  .vt-toolbar { gap:8px; }
  .vt-toolbar strong,.vt-action,.vt-select,.vt-screen-footer label { font-size:12px; }
}
.vt-phone[aria-hidden="true"] { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .vt-phone,.vt-toolbar,.vt-screen-footer { transition:none; } }

/* Light mobile dashboard; the device shell remains dark. */
.vt-phone-screen { background:#f5f7fc; color:#17223a; color-scheme:light; }
.vt-phone-brand { color:#52627c; }
.vt-phone-title { color:#17223a; }
.vt-phone-status { color:#65748c; }
.vt-phone dl > div { border-color:#dce3ef; }
.vt-phone .vt-energy-card { background:#eaf0ff; border-color:#cbd6f3; }
.vt-phone .vt-event-card { background:#fff; border-color:#dce3ef; }
.vt-phone dt { color:#475974; }
.vt-phone dt small,.vt-phone dd small { color:#65748c; }
.vt-phone dd { color:#172c9e; }
.vt-phone .vt-event-card dd { color:#17223a; }
.vt-summary-text { color:#52627c; }
.vt-event-track { background:#dce3ef; }
.vt-event-track span { background:#d83d46; }
.vt-phone-button { background:#172c9e; border-color:#172c9e; color:#fff; }
.vt-phone-button:hover { background:#243eb0; border-color:#243eb0; }
.vt-phone-home { background:#8793a7; }

/* VT ONE: an edge-to-edge product view with a compact mobile companion. */
.vtone-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr); }
.vtone-description > span { display:block; white-space:nowrap; }
.vtone-static-preview { position:relative; min-width:0; width:100%; margin:0; transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1); }
.vtone-static-devices { position:relative; display:block; min-height:0; padding:12px clamp(40px,5vw,72px) clamp(40px,5vw,72px) 0; isolation:isolate; }
.vtone-static-devices::before { content:''; position:absolute; inset:8% 0 12%; z-index:-1; background:radial-gradient(ellipse at 58% 40%,#172c9e30,transparent 70%); pointer-events:none; }
.vtone-static-monitor { position:relative; min-width:0; padding:5px; border:1px solid #3a475c; border-radius:9px; background:#0b111b; box-shadow:0 22px 48px #0004; }
.vtone-static-toolbar { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px 10px; color:#91a0b6; font:400 12px/1.5 'Roboto','PingFang TC',sans-serif; letter-spacing:.025em; }
.vtone-static-toolbar strong { color:#c4cedd; font-weight:500; }
.vtone-static-toolbar span { flex:none; color:#91a0b6; }
.vtone-static-hardware { position:relative; padding:0; overflow:hidden; border:1px solid #ffffff0a; border-radius:4px; background:#080e18; }
.vtone-static-viewport { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#071019; }
.vtone-static-viewport iframe { display:block; }
.vtone-static-shield { position:absolute; inset:0; z-index:2; cursor:default; background:transparent; }
.vtone-static-phone { position:absolute; z-index:3; right:0; bottom:0; width:196px; margin:0; padding:4px; border:1px solid #435066; border-radius:22px; background:#0b111b; box-shadow:0 18px 36px #0007; }
.vtone-static-phone-screen { position:relative; min-height:390px; display:flex; flex-direction:column; padding:34px 14px 14px; border:0; border-radius:17px; background:#0b1220; color:#e4edf2; font-family:'Roboto','PingFang TC',sans-serif; }
.vtone-static-phone-notch { position:absolute; top:10px; left:50%; width:38px; height:8px; transform:translateX(-50%); border-radius:5px; background:#03060b; }
.vtone-static-phone h3 { margin:0 0 7px; color:#edf2fa; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:0; }
.vtone-static-phone-status { display:flex; align-items:center; gap:6px; }
.vtone-static-phone-status span { width:4px; height:4px; flex:none; border-radius:50%; background:#1ac99c; }
.vtone-static-phone dl { display:grid; gap:8px; margin:0; }
.vtone-static-phone dl > div { padding:11px 10px; border:1px solid #26334a; border-radius:4px; }
.vtone-static-energy { background:#172c9e24; border-color:#354576!important; }
.vtone-static-events { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#101b2c; }
.vtone-static-phone dt { color:#b7c4d6; font-size:12px; font-weight:400; line-height:1.5; }
.vtone-static-phone dt small { margin-left:3px; color:#96a5ba; font-size:12px; }
.vtone-static-phone dd { margin:6px 0 0; color:#1ac99c; font:500 28px/1.2 'Roboto','PingFang TC',sans-serif; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.vtone-static-events dd { margin:0; color:#e1e8f4; font-size:23px; white-space:nowrap; }
.vtone-static-phone dd small { color:#96a5ba; font-size:12px; letter-spacing:0; }
.vtone-static-track { height:2px; margin-bottom:20px; overflow:hidden; background:#233047; }
.vtone-static-track span { display:block; width:72%; height:100%; background:#1ac99c; }
.vtone-static-home { width:40px; height:3px; margin:auto auto 0; border-radius:2px; background:#69768a; }
.vtone-static-preview figcaption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:22px; padding-top:14px; border-top:1px solid #ffffff10; color:#8e9bb0; font:400 12px/1.6 'Roboto','PingFang TC',sans-serif; letter-spacing:.06em; }

@media(max-width:767px) {
  .vtone-static-devices { padding:0; display:flex; flex-direction:column; gap:18px; min-height:0; }
  .vtone-static-phone { position:relative; right:auto; bottom:auto; align-self:flex-end; width:190px; }
  .vtone-static-toolbar { padding-inline:7px; gap:8px; }
  .vtone-static-preview figcaption { align-items:flex-start; flex-direction:column; gap:5px; }
}

/* ===== Hero glass surfaces — values come from the glass tokens in site-system.css ===== */
.vt-f-in { position:relative; }
/* Phone keeps its own position:absolute from the base .vt-phone rule — never set position here. */
.vt-f-in, .vt-devices .vt-phone {
  overflow:hidden; isolation:isolate;
  background:rgba(var(--vt-glass-tint),var(--g-fill));
  --g-blur-now:calc(var(--g-blur) * var(--vt-mat,1) * (1 - var(--vt-float-out,0)));
  backdrop-filter:blur(var(--g-blur-now)) var(--vt-glass-filter); -webkit-backdrop-filter:blur(var(--g-blur-now)) var(--vt-glass-filter);
  border:1px solid var(--vt-glass-border); box-shadow:var(--vt-glass-shadow);
}
.vt-f-in::before, .vt-devices .vt-phone::before { content:''; position:absolute; inset:0; z-index:-2; pointer-events:none; border-radius:inherit; background:rgba(var(--vt-glass-scrim),var(--g-scrim)); }
/* No grain — frosted glass is carried by blur + fill + scrim only. */
.vt-f-in { --g-fill:var(--vt-glass-mid-fill); --g-blur:var(--vt-glass-mid-blur); --g-scrim:var(--vt-glass-mid-scrim); --g-grain:0; border:0!important; }
.vt-devices .vt-phone { --vt-float-out:0; --g-fill:var(--vt-glass-mid-fill); --g-blur:var(--vt-glass-mid-blur); --g-scrim:var(--vt-glass-mid-scrim); --g-grain:var(--vt-glass-mid-grain); }

/* Floating notices over the intro dashboard; fade out as it zooms, scale with it. */
.vt-floats { position:absolute; inset:0; z-index:4; pointer-events:none; }
.vt-console.is-expanded ~ .vt-floats { display:none; }
.vt-float { position:absolute; /* size variety, floored so the smallest title stays ≥ ~8px */ scale:max(calc(var(--vt-ui-scale,1) * var(--k,1)), calc(var(--k,1) * .4 + .26)); animation:vtFloatIn .9s var(--vt-ease-out) backwards;
  /* Exit along the same path, pushed outward by the expanding dashboard. */
  translate:calc(var(--fx,0) * var(--vt-float-out,0) * 56px) calc(var(--fy,0) * var(--vt-float-out,0) * 56px); }
.vt-f-in { display:flex; align-items:flex-start; gap:12px; padding:15px 18px; border-radius:10px; color:#f4f7fc;
  font:400 13.5px/1.55 Roboto,'PingFang TC',sans-serif; white-space:nowrap; animation:vtFloatBob 11s cubic-bezier(.45,0,.55,1) infinite; }
.vt-f-in b { display:block; font-weight:500; font-size:15px; color:#fff; letter-spacing:.02em; }
.vt-f-in b em { font-style:normal; color:#A9C5FF; font-weight:500; margin-left:6px; }
.vt-f-in p { margin:4px 0 0; color:rgba(236,242,252,.78); font-size:13.5px; }
.vt-f-in small { color:rgba(236,242,252,.6); font-size:12px; margin-left:6px; }
.vt-f-col { flex-direction:column; gap:10px; }
.vt-f-tag { display:inline-block; margin-top:8px; padding:2px 8px; border-radius:4px; font-size:12px; }
.vt-f-tag.is-red { color:#ffd9d8; background:rgba(239,83,80,.2); border:1px solid rgba(255,160,158,.35); }
.vt-f-axis { align-self:stretch; display:flex; justify-content:space-between; font-size:11px; color:rgba(236,242,252,.6); }
.vt-f-dot { flex:none; width:10px; height:10px; margin-top:7px; border-radius:50%; }
.vt-f-dot.is-red { background:#ef5350; box-shadow:0 0 0 3px rgba(239,83,80,.22); animation:vtFloatPulse 1.8s ease-out infinite; }
.vt-f-dot.is-mint { background:rgb(var(--vt-light-mint)); box-shadow:0 0 0 4px rgba(var(--vt-light-mint),.16); }
.vt-f2 ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; color:rgba(236,242,252,.78); }
.vt-f2 li { display:flex; align-items:center; gap:8px; }
.vt-f2 li i { position:relative; width:14px; height:14px; border-radius:3px; background:rgba(255,255,255,.1); border:1px solid rgba(169,197,255,.8); }
.vt-f2 li i::after { content:''; position:absolute; left:4px; top:1px; width:3px; height:7px; border:solid rgb(var(--vt-light-mint)); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.vt-f-bars { display:flex; align-items:flex-end; gap:5px; height:52px; }
.vt-f-bars s { display:block; width:13px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3)); }
.vt-f-bars s:last-child { background:linear-gradient(180deg,#A9C5FF,#1D62EB); }
.vt-f1 { left:-8%; top:9%; transform-origin:0 0; animation-delay:.5s; --fx:-1; --fy:-.35; }
.vt-f2 { left:-10%; top:50%; transform-origin:0 50%; animation-delay:.58s; --fx:-1; --fy:.3; }
.vt-f3 { right:24%; top:-7%; transform-origin:50% 100%; animation-delay:.66s; --fx:.2; --fy:-1; }
.vt-f4 { right:18%; bottom:-4%; transform-origin:100% 100%; animation-delay:.74s; --fx:.6; --fy:1; }
.vt-f2 .vt-f-in { animation-delay:-3.5s; } .vt-f3 .vt-f-in { animation-delay:-7s; } .vt-f4 .vt-f-in { animation-delay:-5s; }
/* Materialize: blur, scale and opacity arrive together — glass forming, not a plain fade. */
/* Panels emerge from the dashboard outward (opposite of their --fx/--fy push direction). */
@keyframes vtFloatIn { from { opacity:0; transform:translate(calc(var(--fx,0) * -28px), calc(var(--fy,0) * -28px)) scale(.9); --vt-mat:0; } to { opacity:1; transform:none; --vt-mat:1; } }
@keyframes vtGlassIn { from { opacity:0; --vt-mat:0; } to { opacity:1; --vt-mat:1; } }
.vt-devices .vt-phone { animation:vtGlassIn .7s var(--vt-ease-out) .35s backwards; }
@keyframes vtFloatBob { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-3px,0); } }
@keyframes vtFloatPulse { 0% { box-shadow:0 0 0 0 rgba(239,83,80,.45); } 100% { box-shadow:0 0 0 9px rgba(239,83,80,0); } }
@media (max-width:767px) {
  .vt-f2,.vt-f3 { display:none; }
  .vt-f1 { left:4%; top:5%; } .vt-f4 { right:4%; bottom:5%; }
  .vt-float { scale:max(calc(var(--vt-ui-scale,.6) * var(--k,1)), calc(var(--k,1) * .4 + .26)); }
}

/* Phone — mid-level glass, island + home bar, scales with the dashboard. */
.vt-devices .vt-phone { padding:0; border-radius:calc(22px * var(--vt-phone-k,1)); }
.vt-phone-screen { background:transparent; border-radius:16px; padding:34px 16px 14px; color:#e6ecf7; color-scheme:dark; zoom:var(--vt-phone-k,1); min-height:400px; }
.vt-phone-notch, .vt-phone-home { display:none; }
.vt-devices .vt-phone .vt-phone-notch { display:block; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:56px; height:15px; border-radius:10px; background:rgba(6,10,18,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.vt-devices .vt-phone .vt-phone-notch::after { content:''; position:absolute; right:7px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3a4a70,#0b1222 70%); }
.vt-devices .vt-phone .vt-phone-home { display:block; width:44px; height:3px; border-radius:2px; background:rgba(255,255,255,.4); margin:auto auto 2px; }
.vt-phone-brand { display:flex; align-items:center; gap:8px; color:rgba(236,242,252,.8); }
.vt-phone-brand::before { content:''; width:8px; height:8px; border-radius:50%; background:rgb(var(--vt-light-mint)); box-shadow:0 0 0 4px rgba(var(--vt-light-mint),.16); }
.vt-phone-status, .vt-phone dt, .vt-summary-text { color:rgba(236,242,252,.8); }
.vt-phone dt small, .vt-phone dd small { color:rgba(236,242,252,.62); }
.vt-phone-title, .vt-phone .vt-event-card dd { color:#fff; }
.vt-phone dd { color:#ffffff; }
.vt-phone dl > div, .vt-phone .vt-event-card, .vt-phone .vt-energy-card { border-radius:10px; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); box-shadow:none; }
.vt-phone-button { border-radius:8px; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:#fff; box-shadow:none; }
.vt-phone-button { transition:background .2s ease, transform .14s var(--vt-ease-out); }
.vt-phone-button:active { transform:var(--vt-press); }
@media (hover:hover) and (pointer:fine) { .vt-phone-button:hover { background:rgba(255,255,255,.18); } }
.vt-event-track { background:rgba(255,255,255,.18); }
.vt-event-track span { background:#ef5350; }

@media (prefers-reduced-motion:reduce) { .vt-float,.vt-f-in,.vt-f-dot,.vt-devices .vt-phone { animation:none!important; } .vt-float { translate:none; } }
@media (prefers-reduced-transparency:reduce) {
  .vt-f-in, .vt-devices .vt-phone { background:#1d2333; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .vt-f-in::after, .vt-devices .vt-phone::after { display:none; }
}

/* Depth variety — bigger = closer (stronger shadow), smaller = sits nearer the screen. */
.vt-f1 { --k:1; }   .vt-f1 .vt-f-in { box-shadow:0 22px 44px -18px rgba(0,0,0,.6); }
.vt-f3 { --k:.86; } .vt-f3 .vt-f-in { box-shadow:0 16px 34px -18px rgba(0,0,0,.5); }
.vt-f2 { --k:.78; } .vt-f2 .vt-f-in { box-shadow:0 12px 28px -16px rgba(0,0,0,.45); }
.vt-f4 { --k:.7; }  .vt-f4 .vt-f-in { box-shadow:0 10px 24px -16px rgba(0,0,0,.4); }

/* Backdrop fix: an ancestor with an opacity effect (a filled opacity animation, or the scroll fade on .vt-floats)
   becomes the backdrop root, so the panels blurred "nothing" and looked clear. The entrance now uses fill:backwards
   (no lingering opacity effect) and the scroll fade lives on the glass element itself. */
.vt-f-in { opacity:var(--vt-float-opacity,1); }

/* v77 — hero floating glass (notices + phone): ~30% bluer tint, 30% bluer; fill + scrim halved again (×.35 of base) */
.vt-f-in, .vt-devices .vt-phone { --vt-glass-tint:214,228,252!important; --g-fill:calc(var(--vt-glass-mid-fill) * .35)!important; --g-scrim:calc(var(--vt-glass-mid-scrim) * .35)!important; }

/* Interaction hint — appears once the dashboard fills the screen, gone after the first interaction. */
.vt-viewport { container-type:inline-size; }
.vt-hint { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:none;
  opacity:var(--vt-hint-on,1); transition:opacity .45s var(--vt-ease-out,ease); }
.vt-hint.is-done, .vt-console.is-expanded .vt-hint { opacity:0!important; transition-duration:.3s; }
.vt-hint-bar { display:flex; align-items:center; gap:clamp(10px,1.4cqi,20px); padding:clamp(8px,.9cqi,12px) clamp(14px,1.7cqi,22px);
  border-radius:999px; background:rgba(10,14,24,.42); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 14px 36px -16px rgba(0,0,0,.7);
  font:500 clamp(11px,1.05cqi,14.5px)/1 'Roboto','PingFang TC',sans-serif; letter-spacing:.06em; color:#eef2fa; white-space:nowrap;
  transform:translateY(calc((1 - var(--vt-hint-on,1)) * 8px)); transition:transform .45s var(--vt-ease-out,ease); }
.vt-hint-item { display:inline-flex; align-items:center; gap:.6em; }
.vt-hint-sep { width:1px; height:1.1em; background:rgba(255,255,255,.18); }
.vt-hint-ico { width:1.25em; height:1.25em; flex:none; color:#A9C5FF; }
.vt-hint-drag { position:relative; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(169,197,255,.45); }
.vt-hint-drag i { position:absolute; top:50%; left:50%; width:.36em; height:.36em; margin:-.18em; border-radius:50%; background:#A9C5FF; animation:vtHintDrag 2.4s cubic-bezier(.45,0,.55,1) infinite; }
.vt-hint-wheel { position:relative; width:.85em; height:1.25em; border-radius:.45em; box-shadow:inset 0 0 0 1px rgba(169,197,255,.55); }
.vt-hint-wheel i { position:absolute; left:50%; top:.22em; width:2px; height:.3em; margin-left:-1px; border-radius:1px; background:#A9C5FF; animation:vtHintWheel 1.6s ease-in-out infinite; }
.vt-hint kbd { display:inline-flex; align-items:center; justify-content:center; min-width:1.6em; height:1.6em; padding:0 .35em; box-sizing:border-box; border-radius:4px;
  font:inherit; font-size:.9em; letter-spacing:0; color:#fff; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.08); }
.vt-hint-plus { margin:0 -.25em; color:#8e9bb0; }
.vt-hint-touch { display:none; }
@media (pointer:coarse) { .vt-hint-zoom { display:none; } .vt-hint-touch { display:inline-flex; } }
@keyframes vtHintDrag { 0%,100% { transform:translateX(-.32em); } 50% { transform:translateX(.32em); } }
@keyframes vtHintWheel { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(.32em); opacity:0; } 100% { transform:translateY(0); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .vt-hint-drag i, .vt-hint-wheel i { animation:none; } .vt-hint, .vt-hint-bar { transition:none; } }

/* v80 — hint is class-driven (is-on), independent of scroll vars */
.vt-hint { opacity:0!important; transition:opacity .5s var(--vt-ease-out,ease)!important; }
.vt-hint.is-on { opacity:1!important; }
.vt-console.is-expanded .vt-hint { opacity:0!important; }
.vt-hint .vt-hint-bar { transform:translateY(8px) scale(.98); transition:transform .5s var(--vt-ease-out,ease); }
.vt-hint.is-on .vt-hint-bar { transform:none; }

/* v82 — hint: plain text line; icons and keycaps removed */
.vt-hint .vt-hint-ico, .vt-hint .vt-hint-plus { display:none!important; }
.vt-hint kbd { min-width:0!important; height:auto!important; padding:0!important; background:none!important; box-shadow:none!important; font-size:inherit!important; color:inherit!important; }
.vt-hint-item { gap:.35em!important; }
.vt-hint-sep { width:3px!important; height:3px!important; border-radius:50%; background:rgba(255,255,255,.35)!important; }

/* v82 — interaction hints: one quiet line, no icons */
.vt-hint .vt-hint-bar { gap:10px!important; padding:7px 13px!important; border-radius:6px!important; background:rgba(12,16,26,.66)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px -14px rgba(0,0,0,.7)!important; font-weight:400!important; font-size:clamp(11px,.9cqi,13px)!important; letter-spacing:.04em!important; color:#d9e0ec!important; }


/* v84 — interaction cue 3b: a ghost cursor demos drag + click once, no text */
.vt-hint .vt-hint-bar { display:none!important; }
.vt-hint { display:block!important; }
.vt-ghost { position:absolute; left:34%; top:40%; width:clamp(16px,1.9cqi,26px); height:clamp(16px,1.9cqi,26px); opacity:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.vt-ghost-ripple { position:absolute; left:-55%; top:-55%; width:130%; height:130%; border-radius:50%; border:2px solid #A9C5FF; opacity:0; }
.vt-hint.is-on .vt-ghost { animation:vtGhost 3.2s cubic-bezier(.45,0,.25,1) forwards; }
.vt-hint.is-on .vt-ghost-ripple { animation:vtGhostR 3.2s ease-out forwards; }
@keyframes vtGhost{0%{left:34%;top:40%;opacity:0;transform:scale(1)}8%{opacity:1}30%{left:34%;top:40%;transform:scale(1)}36%{transform:scale(.86)}62%{left:47%;top:42%;transform:scale(.86)}68%{left:47%;top:42%;transform:scale(1)}82%{left:57%;top:56%;transform:scale(1)}87%{transform:scale(.86)}91%{transform:scale(1);opacity:1}100%{left:57%;top:56%;opacity:0}}
@keyframes vtGhostR{0%,84%{transform:scale(.2);opacity:0}88%{opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce) { .vt-hint.is-on .vt-ghost, .vt-hint.is-on .vt-ghost-ripple { animation:none; } }

/* v90 — ghost cursor: larger, glows, stays on the last spot with a looping pulse until the hint ends */
.vt-ghost { width:clamp(20px,2.3cqi,32px)!important; height:clamp(20px,2.3cqi,32px)!important; filter:drop-shadow(0 0 10px rgba(169,197,255,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.55))!important; }
.vt-ghost-ripple { border-width:2px!important; box-shadow:0 0 12px rgba(169,197,255,.5); }
.vt-hint.is-on .vt-ghost { animation:vtGhost2 3s cubic-bezier(.45,0,.25,1) forwards!important; }
.vt-hint.is-on .vt-ghost-ripple { animation:vtGhostP 1.5s ease-out 2.6s infinite!important; }
.vt-hint:not(.is-on) .vt-ghost { opacity:0; transition:opacity .4s ease; }
@keyframes vtGhost2{0%{left:34%;top:40%;opacity:0;transform:scale(1)}8%{opacity:1}26%{left:34%;top:40%;transform:scale(1)}32%{transform:scale(.86)}58%{left:47%;top:42%;transform:scale(.86)}64%{left:47%;top:42%;transform:scale(1)}84%{left:55%;top:54%;transform:scale(1)}90%{transform:scale(.86)}100%{left:55%;top:54%;transform:scale(1);opacity:1}}
@keyframes vtGhostP{0%{transform:scale(.3);opacity:.95}100%{transform:scale(2.4);opacity:0}}

/* v104 — intro: ghost cursor + ripple visible from first load, whatever the scroll scale */
.vt-hint.is-intro { opacity:1!important; }
.vt-hint.is-intro:not(.is-on) .vt-hint-bar { opacity:0; }
.vt-hint.is-intro:not(.is-on) .vt-ghost { animation:vtGhost2 3s cubic-bezier(.45,0,.25,1) forwards!important; }
.vt-hint.is-intro:not(.is-on) .vt-ghost-ripple { animation:vtGhostP 1.5s ease-out 2.6s infinite!important; }
.vt-console.is-expanded .vt-hint.is-intro { opacity:0!important; }
@media (prefers-reduced-motion:reduce) { .vt-hint.is-intro .vt-ghost, .vt-hint.is-intro .vt-ghost-ripple { animation:none!important; } }

/* v107 — expanded = true full screen; closing returns to the hero */
.vt-console.is-expanded { width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; inset:0!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.vt-console.is-expanded::backdrop { background:#05070b; }
.vt-console.is-expanded .vt-hardware, .vt-console.is-expanded .vt-screen { height:100%!important; }
.vt-console.is-expanded .vt-viewport { aspect-ratio:auto!important; width:100%!important; height:100dvh!important; }