/* 前台共用樣式：薄霧 + 毛玻璃卡片、一幕一幕。預設淺色，data-theme="dark" 是夜間。
   動畫只有短淡入加 12px 位移，不做視差、不做連動。 */
:root{--bg:#eceff4;--wash-a:#f8f9fb;--wash-b:#e6e9f0;--fg:#1d1d1f;--mute:#62666f;--line:#0000001a;--accent:#0066cc;--warn:#b25e00;
  --glass:#ffffff94;--glass-edge:#ffffffe6;--glass-hi:#ffffff;--glass-solid:#fffffff5;--rim-lo:#1d2a5a1f;--rim-glow:#ffffff4d;
  --shadow:#2a335022;--nav-shadow:#2a33501f;--btn-bg:#1d1d1f;--btn-fg:#fff;
  --mist-a:#8fb4ff4d;--mist-b:#d2b6ff45;--mist-c:#8aeadb40;
  --drop-bg:#ffffff14;--drop-contact:#1d2a5a26;--drop-cast:#1d2a5a1a;--drop-thick:#1d2a5a1f;--drop-spec:#ffffffcc;
  --frost-bg:#ffffff2e;--frost-edge:#ffffff80;--frost-grain:.5;color-scheme:light}
:root[data-theme="dark"]{--bg:#1e2026;--wash-a:#2a2d35;--wash-b:#191b20;--fg:#f5f5f7;--mute:#b8bbc4;--line:#ffffff24;--accent:#7cc0ff;--warn:#ffb340;
  --glass:#ffffff17;--glass-edge:#ffffff33;--glass-hi:#ffffff47;--glass-solid:#2b2e36f2;--rim-lo:#00000052;--rim-glow:#ffffff0f;
  --shadow:#0006;--nav-shadow:#0005;--btn-bg:#f5f5f7;--btn-fg:#111;
  --mist-a:#6b97ff55;--mist-b:#b28af055;--mist-c:#3fcfc34a;
  --drop-bg:#ffffff0d;--drop-contact:#0000004d;--drop-cast:#00000038;--drop-thick:#0000004d;--drop-spec:#ffffff70;
  --frost-bg:#ffffff14;--frost-edge:#ffffff2e;--frost-grain:.35;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.7 system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;overflow-wrap:anywhere}
a{color:inherit}

/* 薄霧：固定在背景的幾團柔光（靜止不動），底下是淡淡的灰階漸層，讓玻璃有東西可以透出來 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55% 40% at 18% 12%,var(--mist-a),#0000 72%),
  radial-gradient(45% 45% at 88% 32%,var(--mist-b),#0000 72%),
  radial-gradient(55% 40% at 55% 92%,var(--mist-c),#0000 72%),
  linear-gradient(180deg,var(--wash-a),var(--wash-b))}

/* 毛玻璃：半透明、背景模糊、上緣一道高光 */
.glass,.cols>div,.specs,.price,.disclose{background:var(--glass);border:1px solid var(--glass-edge);
  /* 亮緣（左上亮、右下暗）＋內側光暈，像玻璃有厚度、邊緣會彎曲 */
  box-shadow:inset 1px 1px 0 var(--glass-hi),inset -1px -1px 0 var(--rim-lo),inset 0 0 22px var(--rim-glow),0 18px 48px var(--shadow);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.cols>div,.specs,.price,.disclose,.pill{background:var(--glass-solid)}}
@media(prefers-reduced-transparency:reduce){
  .glass,.cols>div,.specs,.price,.disclose,.pill{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 頂端：兩顆分開的玻璃膠囊——左邊品牌、右邊日夜開關；整條本身不上底色 */
.top{position:fixed;inset:12px 12px auto 12px;z-index:5;max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.top>*{pointer-events:auto}
/* 水滴膠囊：像螢幕上滴了一滴水。幾乎透明、沒有邊框；只有三樣東西——
   ①左上一小點高光（只有這一個反光）②貼著螢幕的暗影（下緣一圈薄薄的暗＋底下一小片投影）③邊緣折射（lens.js，Chromium） */
.pill{position:relative;isolation:isolate;display:flex;align-items:center;min-height:44px;border-radius:999px;
  background:var(--drop-bg);border:0;
  box-shadow:0 1px 1.5px var(--drop-contact),0 5px 12px var(--drop-cast),inset 0 -1px 1.5px var(--drop-thick);
  -webkit-backdrop-filter:blur(2px) saturate(125%);backdrop-filter:blur(2px) saturate(125%)}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 30% 15% at 58% 14%,var(--drop-spec),#fff0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pill{background:var(--glass-solid)}}
@media(prefers-reduced-transparency:reduce){.pill{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* 以上是「水滴」款（data-glass="drop"）：單一高光、沒有亮邊、Chromium 上有邊緣折射（lens.js）。
   下面是「霧面」款（data-glass="frost"，預設）：整片一個平均的半透明底＋輕模糊＋細顆粒，沒有反光層次，
   所以不會有一塊突然變亮變暗；後面的東西像隔著霧面玻璃隱約透過來，模糊刻意不要太強。 */
:root[data-glass="frost"] .pill{background:var(--frost-bg);border:1px solid var(--frost-edge);
  box-shadow:0 6px 20px var(--nav-shadow);
  -webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%)}
:root[data-glass="frost"] .pill::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");opacity:var(--frost-grain)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-glass="frost"] .pill{background:var(--glass-solid)}}
@media(prefers-reduced-transparency:reduce){:root[data-glass="frost"] .pill{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
.brand{gap:12px;padding:0 24px 0 14px;text-decoration:none}
/* 字標：沒有外部字型（安全政策不允許），靠粗細對比和一顆小圓標做質感 */
.mark{flex:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,#fffffff2 0 10%,#fff0 38%),linear-gradient(140deg,#7aa7ff,#b48cf5 58%,#5fdccb);
  box-shadow:inset 0 -2px 4px #0000002e,0 2px 8px #6b97ff66}
.wordmark{font:16px/1 "Inter","SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.11em;color:var(--fg)}
.wordmark b{font-weight:700}
.wordmark i{font-style:normal;font-weight:300;margin-left:.16em}

.scene{min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:104px 20px 64px;scroll-snap-align:start}
.wrap{max-width:920px;margin:0 auto;width:100%}

.kicker{margin:0 0 12px;color:var(--mute);font-size:15px;letter-spacing:.08em}
h1{margin:0;font-size:clamp(2.4rem,9vw,5.2rem);line-height:1.08;font-weight:600;letter-spacing:-.02em}
h2{margin:0 0 28px;font-size:clamp(1.8rem,5vw,3rem);line-height:1.15;font-weight:600;letter-spacing:-.01em}
h3{margin:0 0 8px;font-size:15px;color:var(--mute);font-weight:500;letter-spacing:.06em}
.lead{margin:20px 0 32px;color:var(--mute);font-size:clamp(1.05rem,3vw,1.4rem);line-height:1.5}
.big{margin:0 0 28px;font-size:clamp(1.2rem,3.4vw,1.75rem);line-height:1.55}
.sample{display:inline-block;margin:0 0 20px;padding:6px 12px;border:1px solid var(--warn);border-radius:999px;background:#ff9f0a1a;color:var(--warn);font-size:14px}

.btn{display:inline-block;min-height:48px;padding:12px 26px;margin:0 8px 10px 0;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass);text-decoration:none;font-size:16px;line-height:1.5;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn:focus-visible,.more:focus-visible,.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 手機點下去時不要出現瀏覽器預設的方形藍框；改成跟自己形狀一樣的短短按壓回饋（輕輕縮一下＋亮一點） */
a,button{-webkit-tap-highlight-color:transparent}
.brand,.btn,.more,.card{transition:transform .16s ease-out,filter .16s ease-out}
.brand:active,.btn:active,.more:active{transform:scale(.97);filter:brightness(1.08)}
.card:active{transform:scale(.985)}
:root[data-glass="frost"] .brand:active{filter:none}
@media(prefers-reduced-motion:reduce){.brand,.btn,.more,.card{transition:none}.brand:active,.btn:active,.more:active,.card:active{transform:none}}
.more{display:inline-block;padding:12px 8px;color:var(--accent);text-decoration:none}

ul{margin:0;padding-left:1.1em}
li{margin:6px 0}
.cols{display:grid;gap:16px;grid-template-columns:1fr}
.cols>div{padding:22px 22px 18px;border-radius:22px}
.specs{display:grid;gap:0;margin:0;padding:6px 22px;border-radius:22px;grid-template-columns:1fr}
.specs>div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.specs>div:last-child{border-bottom:0}
.specs dt{color:var(--mute);flex:none}
.specs dd{margin:0;text-align:right}

.price{display:grid;gap:4px;margin:0 0 20px;padding:22px;border-radius:22px}
.price strong{font-size:clamp(2rem,7vw,3rem);font-weight:600;letter-spacing:-.01em}
.price span,.note,.foot{color:var(--mute);font-size:15px}
.stale{color:var(--warn)!important}
.disclose{margin:24px 0 12px;padding:16px 18px;border-radius:16px;font-size:15px;line-height:1.7}
.disclose p{margin:0}
.disclose p+p{margin-top:8px}
.disclose b,.note b{display:inline-block;margin-right:.5em}

@media(min-width:680px){.cols{grid-template-columns:1fr 1fr}.scene{padding-left:24px;padding-right:24px}}
@media(min-width:900px){.big{max-width:20em}.hero .wrap>*{max-width:540px}.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}}   /* 桌面版文字收窄，留右邊給 3D 展示；品名長也不會蓋到耳機 */

/* 「站長實際使用過」標記與使用心得 */
.badge{display:inline-block;margin:0 0 20px;padding:6px 12px;border:1px solid var(--accent);border-radius:999px;background:#0066cc14;color:var(--accent);font-size:14px}
:root[data-theme="dark"] .badge{background:#7cc0ff1a}
.badge.sm{margin:0;padding:2px 10px;font-size:12px;justify-self:start}
/* 站長自己拍的實物照片：玻璃邊框＋說明；有照片時首屏文字在左、照片在右（手機上下排） */
.photo{margin:0;border-radius:26px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:0 18px 48px var(--shadow)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{padding:10px 16px 12px;font-size:13px;color:var(--mute);letter-spacing:.04em}
.hero.has-img .wrap{display:grid;gap:28px;align-items:center}
.hero.has-img .photo{max-width:360px;width:100%;justify-self:center}
@media(min-width:900px){.hero.has-img .wrap{grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:56px}.hero.has-img .wrap>*{max-width:none}.hero.has-img .photo{max-width:400px}}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px;align-items:start}
.pad.exp p{margin:0 0 16px;font-size:clamp(1.05rem,2.4vw,1.2rem);line-height:1.85}
.pad.exp p:last-child{margin-bottom:0}

/* 首頁：商品卡片與說明卡片 */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.pad{padding:22px;border-radius:22px}
.pad p{margin:0;font-size:16px;line-height:1.7}
.card{display:grid;align-content:start;gap:6px;padding:22px;border-radius:22px;text-decoration:none;color:inherit}
.card .kick{margin:0;color:var(--mute);font-size:14px;letter-spacing:.04em}
.card .name{margin:2px 0 4px;font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.25;color:var(--fg);font-weight:600;letter-spacing:0}
.card .tag{margin:0;color:var(--mute);font-size:15px;line-height:1.65}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 0}
.card .px{font-size:1.25rem;font-weight:600}
.card .go{color:var(--accent);font-size:15px}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){.card{transition:transform .3s ease-out}.card:hover{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* 外觀開關（從 ERP 搬來）：iOS 風格圓球、三個停靠點——左＝淺色、中＝跟隨系統、右＝深色。
   白天軌道是淡杏橘；夜晚是灰藍的「夜色」像薄紗從右邊滑進來，帶幾顆小星星 */
.themesw{--w:70px;--h:30px;--k:26px;--step:calc((var(--w) - 4px - var(--k)) / 2);display:none;position:relative;flex:none;width:var(--w);height:var(--h);padding:0;margin:0;border:0;border-radius:999px;box-shadow:0 4px 14px var(--nav-shadow);background:none;color:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.js .themesw{display:block}
@media(min-width:680px){.themesw{--w:56px;--h:24px;--k:20px}}   /* 桌面版小一點，手機維持大顆好點 */
.themesw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-track{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#80808042}
.sw-track::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1.5px 4px #0000003d,inset 0 0 0 .5px #0000001a;transition:box-shadow .4s}
/* 中間（跟隨系統）時軌道是透明的：只給一點點水滴感——輕模糊、一個小高光、薄薄的貼附暗影，折射在 Chromium 由 lens.js 加（更輕）。
   淺色／深色時軌道被杏橘或夜色蓋住，這些幾乎看不到。 */
.sw-track{-webkit-backdrop-filter:blur(1.5px) saturate(125%);backdrop-filter:blur(1.5px) saturate(125%)}
.sw-track::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse 30% 24% at 62% 18%,var(--drop-spec),#fff0)}
.themesw[data-state=auto] .sw-track::before{opacity:.85}
.themesw[data-state=auto] .sw-track::after{box-shadow:inset 0 -1px 1.5px var(--drop-thick)}
.sw-day{position:absolute;inset:0;background:linear-gradient(135deg,#ffeccb 0%,#ffd1a3 100%);opacity:0;transition:opacity .5s ease}
.themesw[data-state=light] .sw-day{opacity:1}
.sw-night{position:absolute;top:0;bottom:0;left:-22px;width:calc(100% + 22px);
  background:radial-gradient(circle at 74% 30%,#fffc 0 .8px,#0000 1.3px),radial-gradient(circle at 88% 66%,#ffffffa6 0 .7px,#0000 1.2px),radial-gradient(circle at 60% 72%,#ffffff8c 0 .6px,#0000 1.1px),linear-gradient(135deg,#6f84bf 0%,#3d4d84 100%);
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 24px);mask-image:linear-gradient(90deg,#0000 0,#000 24px);
  transform:translateX(calc(var(--w) * 1.6));transition:transform .6s cubic-bezier(.3,.9,.3,1)}
.themesw[data-state=dark] .sw-night{transform:translateX(0)}
.sw-knob{position:absolute;top:2px;left:2px;width:var(--k);height:var(--k);border-radius:50%;background:#fff;box-shadow:0 2px 5px #00000047,0 0 0 .5px #0000001a;display:flex;align-items:center;justify-content:center;z-index:1;transition:transform .5s cubic-bezier(.3,1.2,.4,1),background-color .4s}
.themesw[data-state=auto] .sw-knob{transform:translateX(var(--step))}
.themesw[data-state=dark] .sw-knob{transform:translateX(calc(var(--step) * 2));background:#f1f4ff}
.sw-i svg{width:calc(var(--k) * .58);height:calc(var(--k) * .58)}
.sw-i{position:absolute;display:flex;opacity:0;transform:rotate(-50deg) scale(.5);transition:opacity .25s,transform .4s}
.themesw[data-state=light] .sw-sun,.themesw[data-state=auto] .sw-auto,.themesw[data-state=dark] .sw-moon{opacity:1;transform:none}
.sw-sun{color:#f0a04b}
.sw-auto{color:#6b7280}
.sw-moon{color:#4a5a94}
/* 日夜切換：整頁慢慢淡入淡出（約 0.6 秒），不是瞬間跳掉 */
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:ease}

/* 3D 展示（stage.js 建立）：固定在內容後面的一組耳機，只有「介紹區」會隨捲動變換，購買那一幕前淡出、完全不動。
   沒有商品圖時先用 CSS 組出來；用滾動位置推動（不是自己一直轉），一次只動這一個東西。 */
:root{--bud-a:#ffffff;--bud-b:#eceef3;--bud-c:#b9bfcc;--bud-edge:#1d2a5a2e;--ring:#7aa7ffd9;--ground:#ffffffd9;--gshadow:#1d2a5a47}
:root[data-theme="dark"]{--bud-a:#8b90a3;--bud-b:#454a5c;--bud-c:#1a1c24;--bud-edge:#ffffff2e;--ring:#9ec5ffd9;--ground:#ffffff26;--gshadow:#00000080}
main{position:relative;z-index:1}
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--rx:-16deg;--ry:-30deg;--rz:0deg;--s:1;--sp:56px;--ang:0deg;--ox:0px;--oy:0px;--rot:0deg}
.s3d{position:absolute;inset:0;perspective:1100px}
.obj{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(var(--ox),var(--oy),0) scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}
.obj i{position:absolute;display:block}
/* 地面與光環：真的平躺在 3D 空間裡的圓盤，轉動時會有透視 */
.ground,.ring,.gs{left:0;top:0;border-radius:50%}
.ground{width:460px;height:460px;margin:-230px;background:radial-gradient(circle,var(--ground) 0,#fff0 68%);transform:translateY(150px) rotateX(90deg)}
.ring{--r:130px;--y:150px;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1);
  background:conic-gradient(var(--ring),#0000 38%,var(--ring) 100%);   /* 漸層固定不動，轉動靠 transform（不用每一格重畫） */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px));
  transform:translateY(var(--y)) rotateX(90deg) rotate(var(--rot))}
.ring.r2{--r:190px;--y:136px}.ring.r3{--r:250px;--y:122px}
.gs{width:120px;height:120px;margin:-60px;background:radial-gradient(circle,var(--gshadow) 0,#0000 70%)}
.gs.l{transform:translate3d(calc(var(--sp) * -1),149px,calc(var(--sp) * .35)) rotateX(90deg)}
.gs.r{transform:translate3d(var(--sp),149px,calc(var(--sp) * -.35)) rotateX(90deg)}
/* 耳機：球體與圓柱從任何角度看都是同樣的圓與膠囊，所以做成「永遠面向鏡頭」的看板，
   位置在 3D 裡移動（遠近、前後遮擋都是真的），外觀不會因為轉動而走樣 */
.bud{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.bud.l{transform:translate3d(calc(var(--sp) * -1),-10px,calc(var(--sp) * .35))}
.bud.r{transform:translate3d(var(--sp),-10px,calc(var(--sp) * -.35))}
.bb{position:absolute;left:-120px;top:-130px;width:240px;height:320px;transform-origin:120px 130px; /* 容器留大一點，影子才不會被容器邊界切成方框 */
  transform:rotateZ(calc(var(--rz) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)) rotateZ(var(--ang))}
.bud.r .bb{transform:rotateZ(calc(var(--rz) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)) rotateZ(calc(var(--ang) * -1))}
.stem{left:107px;top:122px;width:26px;height:104px;border-radius:13px;transform-origin:50% 0;
  background:linear-gradient(90deg,var(--bud-c),var(--bud-a) 38%,var(--bud-b) 62%,var(--bud-c));box-shadow:0 0 0 1px var(--bud-edge),0 12px 22px var(--gshadow)}
.bud.l .stem{transform:rotate(9deg)}.bud.r .stem{transform:rotate(-9deg)}
.head{left:72px;top:60px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 31% 25%,#fff 0 5%,#fff0 20%),radial-gradient(circle at 42% 38%,var(--bud-a),var(--bud-b) 62%,var(--bud-c));
  box-shadow:inset -8px -12px 20px #0000002e,inset 5px 7px 12px #ffffffa6,0 0 0 1px var(--bud-edge),0 16px 30px var(--gshadow)}
.head::after{content:"";position:absolute;left:50%;bottom:16%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle,#1d2a5a40 0 30%,#0000 32%),radial-gradient(circle at 40% 35%,#ffffff55,#0000 60%);box-shadow:inset 0 0 0 1px var(--bud-edge)}

/* 淡入：沒開 JS 時不隱藏，內容照樣看得到 */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}
  .sw-day,.sw-night,.sw-knob,.sw-i{transition:none}}