:root{--gw-ar:1.924779;/* 窗内图片宽高比，加载后由 JS 按真实尺寸校准 */
  --gw-h:min(88vh,calc(101vw/var(--gw-ar)));
  --gw-w:100vw}/* 画窗宽度：撑满全屏，雾化最边缘贴两侧 */
#gw-slot{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--gw-w);height:var(--gw-h);
  --gwfx:140px;--gwfy:68px;
  transition:opacity .5s ease,visibility .5s ease,filter .45s ease}
#gw-slot.gw-off{opacity:0;visibility:hidden;pointer-events:none}
#gw-slot.gw-exit{opacity:0;filter:blur(3px);pointer-events:none;
  transition:opacity .32s ease-out,filter .32s ease-out}

#gw-pane{position:absolute;inset:0;border-radius:28px;overflow:hidden;cursor:crosshair;
  /* 缓出式羽化（S 形衰减）：左右深、上下浅，边缘逐级融进页面背景图 */
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.34),rgba(0,0,0,.62) calc(var(--gwfx)*.42),rgba(0,0,0,.86) calc(var(--gwfx)*.72),#000 var(--gwfx),#000 calc(100% - var(--gwfx)),rgba(0,0,0,.86) calc(100% - var(--gwfx)*.72),rgba(0,0,0,.62) calc(100% - var(--gwfx)*.42),rgba(0,0,0,.34)),
                     linear-gradient(to bottom,transparent,rgba(0,0,0,.22) calc(var(--gwfy)*.45),rgba(0,0,0,.68) calc(var(--gwfy)*.78),#000 var(--gwfy),#000 calc(100% - var(--gwfy)),rgba(0,0,0,.68) calc(100% - var(--gwfy)*.78),rgba(0,0,0,.22) calc(100% - var(--gwfy)*.45),transparent);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(to right,rgba(0,0,0,.34),rgba(0,0,0,.62) calc(var(--gwfx)*.42),rgba(0,0,0,.86) calc(var(--gwfx)*.72),#000 var(--gwfx),#000 calc(100% - var(--gwfx)),rgba(0,0,0,.86) calc(100% - var(--gwfx)*.72),rgba(0,0,0,.62) calc(100% - var(--gwfx)*.42),rgba(0,0,0,.34)),
             linear-gradient(to bottom,transparent,rgba(0,0,0,.22) calc(var(--gwfy)*.45),rgba(0,0,0,.68) calc(var(--gwfy)*.78),#000 var(--gwfy),#000 calc(100% - var(--gwfy)),rgba(0,0,0,.68) calc(100% - var(--gwfy)*.78),rgba(0,0,0,.22) calc(100% - var(--gwfy)*.45),transparent);
  mask-composite:intersect;mask-repeat:no-repeat}
.gw-ly{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gw-img{z-index:1;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;filter:saturate(0.92) brightness(0.97)}
#gw-slot.gw-has-img .gw-img{opacity:1}
/* 雨波画布：位于 gw-img 之上(同 z,DOM 在后),色调与 gw-img 一致,渲染后整层接管画面 */
#gw-ripple{z-index:1;opacity:0;transition:opacity 1.1s ease}
#gw-slot.gw-rippling #gw-ripple{opacity:1}
#gw-slot.gw-gloss #gw-ripple{mix-blend-mode:overlay}
#gw-ripple-bg{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
#gw-ripple-bg.on{opacity:1}
#splash.dissolving #gw-ripple-bg{opacity:0}
.gw-grade-c{z-index:2;background:#3a5587;mix-blend-mode:color;opacity:0;transition:opacity 1.2s ease}
#gw-slot.gw-has-img .gw-grade-c{opacity:0.34}
.gw-grade-s{z-index:2;background:linear-gradient(168deg,rgba(198,218,248,0.16) 0%,rgba(14,26,50,0.30) 80%);mix-blend-mode:soft-light;opacity:0;transition:opacity 1.2s ease}
#gw-slot.gw-has-img .gw-grade-s{opacity:1}
.gw-frost{z-index:3;opacity:var(--gw-frost-o,0.55);transition:opacity .4s ease;background:
  linear-gradient(rgba(16,28,54,0.06),rgba(16,28,54,0.06)),
  linear-gradient(150deg,rgba(184,204,236,0.07) 0%,rgba(112,136,178,0.04) 52%,rgba(86,108,150,0.07) 100%)}
.gw-noise{z-index:3;mix-blend-mode:overlay;opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>")}
.gw-depth{z-index:3;background:radial-gradient(130% 160% at 50% 46%,rgba(12,22,44,0) 46%,rgba(12,22,44,0.18) 76%,rgba(12,22,44,0.34) 100%)}
#gw-fogwipe{z-index:4}
#gw-draw{position:absolute;inset:0;z-index:6;width:100%;height:100%;touch-action:none;display:block}

.gw-ctrl{position:absolute;right:calc(var(--gwfx) + 14px);top:calc(var(--gwfy) + 12px);z-index:8;display:flex;gap:8px}
.gw-cbtn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
  border:1px solid rgba(190,212,244,0.16);color:rgba(232,242,255,0.78);
  background:rgba(160,190,235,0.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.10);
  transition:all .35s ease}
.gw-cbtn:hover{color:#fff;border-color:rgba(212,230,252,0.34);
  background:rgba(190,214,248,0.20);
  box-shadow:0 0 12px rgba(170,205,250,0.25),inset 0 1px 0 rgba(255,255,255,0.18)}
.gw-cbtn.active{color:rgba(255,255,255,0.95);border-color:rgba(212,230,252,0.34);
  background:rgba(190,214,248,0.18);
  box-shadow:0 0 12px rgba(170,205,250,0.25),inset 0 1px 0 rgba(255,255,255,0.18)}
.gw-cbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}


#gw-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:10px;vertical-align:-5px;
  width:32px;height:32px;padding:0;border:1px solid rgba(200,220,245,0.22);border-radius:8px;cursor:pointer;pointer-events:auto;position:relative;z-index:10;
  background:rgba(200,220,245,0.07);color:rgba(214,229,249,0.6);
  filter:drop-shadow(0 1px 5px rgba(0,0,0,0.30));
  transition:color .35s ease,filter .35s ease,background .35s ease,border-color .35s ease}
#gw-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#gw-toggle:hover{color:rgba(240,247,255,0.95);filter:drop-shadow(0 0 7px rgba(170,205,250,0.45));background:rgba(200,220,245,0.14);border-color:rgba(220,235,255,0.38)}
#gw-toggle.off{color:rgba(202,218,241,0.26);background:transparent;border-color:rgba(200,220,245,0.12)}
#gw-toggle.off:hover{color:rgba(214,229,249,0.50);background:rgba(200,220,245,0.07);border-color:rgba(200,220,245,0.22)}


.gw-therms{position:absolute;right:calc(var(--gwfx) + 18px);bottom:calc(var(--gwfy) + 16px);
  z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.gw-therm{display:flex;align-items:center;gap:11px;pointer-events:auto;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;touch-action:none}
.gw-therm-label{width:46px;text-align:right;
  font-family:'Raleway','Noto Sans SC',sans-serif;font-weight:400;font-size:9px;letter-spacing:0.24em;
  color:rgba(225,238,252,0.55);text-shadow:0 1px 5px rgba(8,16,34,0.5)}
.gw-therm-body{position:relative;width:152px;height:16px;filter:drop-shadow(0 1px 4px rgba(8,16,34,0.35))}
/* 球泡：温度计左端的圆头，亮度随数值变化 */
.gw-therm-bulb{position:absolute;left:0;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;
  border:1px solid rgba(198,220,250,0.32);
  background:radial-gradient(circle at 36% 32%,rgba(235,246,255,0.85),rgba(186,216,252,0.55) 55%,rgba(150,185,235,0.35));
  box-shadow:0 0 9px rgba(178,212,255,0.5),inset 0 -1px 2px rgba(20,40,80,0.25);
  transition:opacity .2s ease}
/* 玻璃管：细长管身 + 等距刻度 */
.gw-therm-tube{position:absolute;left:12px;right:0;top:50%;height:6px;transform:translateY(-50%);
  border-radius:0 3px 3px 0;border:1px solid rgba(190,212,244,0.24);border-left:none;
  background:rgba(150,180,225,0.10);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.10),inset 0 -1px 1px rgba(0,0,0,0.10);overflow:hidden}
.gw-therm-tube::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 27px,rgba(228,242,255,0.30) 27px 28px)}
/* 水银柱：从球泡向右延伸的发光填充，长度即当前数值 */
.gw-therm-fill{position:absolute;left:0;top:0;bottom:0;width:35%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,rgba(186,218,255,0.50),rgba(228,243,255,0.88));
  box-shadow:0 0 8px rgba(178,212,255,0.65)}
/* 读数：MIST 显示当前玻璃温度 ℃ / BRUSH 显示当前画笔大小 °F */
.gw-therm-val{min-width:42px;
  font-family:'Raleway','Noto Sans SC',sans-serif;font-weight:300;font-size:11px;letter-spacing:0.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(231,242,255,0.78);text-shadow:0 1px 6px rgba(8,16,34,0.55),0 0 12px rgba(160,200,255,0.18)}
.gw-therm:hover .gw-therm-bulb{box-shadow:0 0 13px rgba(186,218,255,0.75),inset 0 -1px 2px rgba(20,40,80,0.25)}
.gw-therm:hover .gw-therm-tube{border-color:rgba(212,230,252,0.38)}

@media (max-width:900px){#gw-slot,#gw-toggle{display:none}.splash-left{margin-left:clamp(36px,9%,110px)}}

/* Huibao welcome integration */
#splash{z-index:9000}
#gw-slot{z-index:1}
#gw-img{background-image:url('../image/hb-fog-window.jpg')!important;opacity:1!important}
#gw-slot.gw-has-img .gw-img{opacity:1}
.splash-content{position:relative;z-index:9;width:100%;min-height:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left;pointer-events:none}
.splash-copy{width:min(440px,calc(100% - 48px));margin-left:clamp(40px,11vw,176px);color:rgba(239,247,255,.95);text-shadow:0 2px 13px rgba(6,18,40,.72);pointer-events:auto}
.splash-sign{color:rgba(220,234,253,.82);font-family:'Cormorant Garamond',serif;font-size:.79rem;font-style:italic;letter-spacing:.08em;text-transform:uppercase}
.splash-sign span{color:#fff;font-size:1.32rem}.splash-sign i{margin:0 5px;opacity:.55}
.splash-copy .splash-rule{margin:20px 0 27px}.splash-copy .splash-kicker{margin-bottom:22px;font-size:.78rem;letter-spacing:.2em}.splash-copy .splash-kicker strong{color:#fff;font-weight:400}
.splash-title{margin-bottom:18px;color:#fff;font-family:'Noto Serif SC',serif;font-size:clamp(1.45rem,3vw,2rem);font-weight:500;letter-spacing:.1em}
.splash-lead{margin-bottom:14px;color:rgba(248,252,255,.98);font-family:'Noto Serif SC',serif;font-size:1.07rem;font-weight:600;line-height:1.8}
.splash-copy .splash-description{display:block;margin:0;color:rgba(232,241,253,.9);font-family:'Noto Sans SC',sans-serif;font-size:.86rem;font-weight:300;line-height:2.05}.splash-copy .splash-description p+p{margin-top:7px}
.splash-enter{margin-top:29px;padding:10px 27px;color:rgba(242,248,255,.98);border:1px solid rgba(210,230,254,.52);border-radius:8px;background:rgba(190,218,249,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(8,21,47,.18);cursor:pointer;font-family:'Noto Serif SC',serif;font-size:.84rem;letter-spacing:.14em;transition:background .3s,border-color .3s,transform .3s}.splash-enter:hover{background:rgba(205,229,253,.27);border-color:rgba(235,246,255,.82);transform:translateY(-2px)}.splash-enter:disabled{cursor:default}
.splash-hint{margin-top:18px;color:rgba(213,229,250,.7);font-family:'Raleway',sans-serif;font-size:.66rem;letter-spacing:.05em}
#splash.dissolving .splash-copy{opacity:0;transform:translateY(-12px) scale(.985);filter:blur(3px);transition:opacity .85s ease,transform .85s ease,filter .85s ease}
@media(max-width:900px){#gw-slot{display:block;width:100vw;height:100vh;--gwfx:32px;--gwfy:36px}.gw-ctrl{right:48px;top:38px}.gw-therms{right:42px;bottom:35px}}
@media(max-width:560px){.splash-copy{width:calc(100% - 42px);margin-left:21px}.splash-copy .splash-description{font-size:.78rem}.splash-lead{font-size:.98rem}}