:root{--pui-m:1.4;--pui-tsp:1.3;--pui-blur:26px;--pui-alpha:60%;--pui-sat:180%;--pui-rs:1.1;--pui-ts:1.25;--pui-space:1;--pui-hue:350;--pui-gap-base:24px;}/* ══════════════════════════════════════════════════════════════════
   PRODUCT UI v1.0 ─ 基盤層（スキンより下、ページより上）
   すべて html[data-pui="1"] の配下。属性を変えるだけで全停止できる。
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. トークン：動き・材質・角・影 ─────────────────────────── */
html[data-pui="1"]{
  /* 動き：iOSの標準カーブと、スプリング（対応ブラウザはlinear()で本物の減衰） */
  --pui-ease:cubic-bezier(.32,.72,0,1);
  --pui-out:cubic-bezier(.16,1,.3,1);
  --pui-spring:cubic-bezier(.34,1.3,.64,1);
  --pui-d1:calc(150ms * var(--pui-m));
  --pui-d2:calc(320ms * var(--pui-m));
  --pui-d3:calc(620ms * var(--pui-m));
  /* 角：連続した角丸のスケール（--pui-rs は 0〜1.6） */
  --pui-r-xs:calc(6px * var(--pui-rs));
  --pui-r-s:calc(10px * var(--pui-rs));
  --pui-r:calc(16px * var(--pui-rs));
  --pui-r-l:calc(22px * var(--pui-rs));
  --pui-r-xl:calc(30px * var(--pui-rs));
  /* 材質 */
  --pui-glass:color-mix(in srgb, var(--dz-surface,#fff) calc(var(--pui-alpha) * 1%), transparent);
  --pui-glass-strong:color-mix(in srgb, var(--dz-surface,#fff) calc(var(--pui-alpha) * 1% + 18%), transparent);
  --pui-line:color-mix(in srgb, var(--dz-text,#000) 12%, transparent);
  --pui-line-soft:color-mix(in srgb, var(--dz-text,#000) 7%, transparent);
  /* 影：多層。上から「密着」「浮き」「深い浮き」 */
  --pui-sh-1:0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px var(--pui-line-soft);
  --pui-sh-2:0 1px 2px rgba(0,0,0,.05), 0 6px 18px -6px rgba(0,0,0,.14), 0 0 0 .5px var(--pui-line-soft);
  --pui-sh-3:0 2px 4px rgba(0,0,0,.05), 0 12px 34px -8px rgba(0,0,0,.22), 0 28px 60px -20px rgba(0,0,0,.18), 0 0 0 .5px var(--pui-line-soft);
  --pui-sh-sheet:0 -1px 0 var(--pui-line-soft), 0 -24px 60px -20px rgba(0,0,0,.28);
  --pui-accent-glow:color-mix(in srgb, var(--dz-accent,#3366ff) 28%, transparent);
  --dz-gap:calc(var(--pui-gap-base) * var(--pui-space)) !important;
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@supports (animation-timing-function: linear(0, 1)){
  html[data-pui="1"]{ --pui-spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55.6%,1.017 63.6%,1.001); }
}
/* 動きの全停止（設定0／OSの設定） */
html[data-pui="1"][data-pui-motion="off"]{ --pui-m:0; }
@media (prefers-reduced-motion: reduce){
  html[data-pui="1"]{ --pui-m:0; scroll-behavior:auto; }
  html[data-pui="1"] *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
html[data-pui="1"] body{ overscroll-behavior-x:none; }
html[data-pui="1"] ::selection{ background:color-mix(in srgb, var(--dz-accent,#3366ff) 24%, transparent); }
html[data-pui="1"] :focus-visible{ outline:2px solid var(--dz-accent,#3366ff); outline-offset:3px; border-radius:var(--pui-r-xs); }
html[data-pui="1"] img,html[data-pui="1"] video,html[data-pui="1"] iframe{ user-select:none; -webkit-user-drag:none; }

/* ── 1. 文字：OSの書体・見出しの詰め・拡縮 ───────────────────── */
html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="system"] body,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="system"] input,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="system"] button,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="system"] select,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="system"] textarea{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Segoe UI",system-ui,sans-serif !important;
  font-feature-settings:"palt" 1,"kern" 1;
}
html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="rounded"] body,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="rounded"] input,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="rounded"] button,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="rounded"] select,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-font="rounded"] textarea{
  font-family:"SF Pro Rounded",-apple-system,"Hiragino Maru Gothic ProN","Zen Maru Gothic","M PLUS Rounded 1c","Noto Sans JP",system-ui,sans-serif !important;
  font-feature-settings:"palt" 1,"kern" 1;
}
html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h1,html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h2,html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h3,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-hero-over h1,html[data-pui="1"]:not([data-pui-skin="brand"]) .hz-head,html[data-pui="1"]:not([data-pui-skin="brand"]) .bar,html[data-pui="1"]:not([data-pui-skin="brand"]) .official-bar,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-sec h2{
  text-wrap:balance; overflow-wrap:anywhere;
}
html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .main-col h1,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .main-col h2,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .main-col h3,
html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .pu-hero-over h1,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .gh-logotype,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .bar,html[data-pui="1"]:not([data-pui-skin="brand"])[data-pui-tracking="tight"] .pu-sec h2{
  letter-spacing:-.022em !important; font-weight:700;
}
html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h1,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-hero-over h1{ font-size:calc(clamp(24px, 1.4vw + 17px, 36px) * var(--pui-ts)) !important; line-height:1.18 !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h2:not(.bar):not(.official-bar){ font-size:calc(clamp(19px, .9vw + 14px, 26px) * var(--pui-ts)) !important; line-height:1.25 !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col h3{ font-size:calc(17px * var(--pui-ts)) !important; line-height:1.3 !important; }

/* ── 2. ヘッダー：ガラス材質・縮む・隠れる ────────────────────── */
html[data-pui="1"][data-pui-header]:not([data-pui-header="static"]) .gh{
  position:sticky !important; top:0 !important;
  background:var(--pui-glass) !important;
  -webkit-backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)) !important;
  backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)) !important;
  border-bottom:.5px solid var(--pui-line) !important;
  box-shadow:none !important;
  transition:transform var(--pui-d2) var(--pui-ease), box-shadow var(--pui-d2) var(--pui-ease), background var(--pui-d2) var(--pui-ease);
  will-change:transform;
}
html[data-pui="1"][data-pui-header]:not([data-pui-header="static"]) .gh.scrolled{ box-shadow:0 1px 0 var(--pui-line-soft), 0 10px 30px -18px rgba(0,0,0,.25) !important; }
html[data-pui="1"][data-pui-header="compact"] .gh-in{ transition:height var(--pui-d2) var(--pui-ease); }
html[data-pui="1"][data-pui-header="compact"] .gh.scrolled .gh-in{ height:48px; }
html[data-pui="1"][data-pui-header="compact"] .gh.scrolled .gh-logo img{ max-height:28px; transition:max-height var(--pui-d2) var(--pui-ease); }
html[data-pui="1"][data-pui-header="compact"] .gh.scrolled .gh-chips{ max-height:0; opacity:0; overflow:hidden; pointer-events:none; }
html[data-pui="1"][data-pui-header="compact"] .gh-chips{ transition:max-height var(--pui-d2) var(--pui-ease), opacity var(--pui-d1) var(--pui-ease); max-height:80px; }
html[data-pui="1"][data-pui-header="hide"].pui-hide .gh{ transform:translateY(-100%); }
html[data-pui="1"][data-pui-header="hide"].pui-hide .gh{ box-shadow:none !important; }
html[data-pui="1"] .gh-chips a{ position:relative; transition:background var(--pui-d1) var(--pui-ease), color var(--pui-d1) var(--pui-ease), transform var(--pui-d1) var(--pui-ease); }
html[data-pui="1"] .gh-search input{ transition:border-color var(--pui-d1) var(--pui-ease), box-shadow var(--pui-d2) var(--pui-ease), background var(--pui-d1) var(--pui-ease); }
html[data-pui="1"] .gh-search input:focus{ box-shadow:0 0 0 4px var(--pui-accent-glow) !important; }
html[data-pui="1"] .gh-sug{ border-radius:var(--pui-r) !important; box-shadow:var(--pui-sh-3) !important; overflow:hidden;
  background:var(--pui-glass-strong) !important; -webkit-backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)); backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)); }
html[data-pui="1"] .gh-sug a{ transition:background var(--pui-d1) var(--pui-ease); }

/* ── 3. ボタン・ピル：手ごたえ・触れる大きさ ─────────────────── */
html[data-pui="1"] .btn,html[data-pui="1"] .pu-btn,html[data-pui="1"] .blk-btn,html[data-pui="1"] .gh-pill,html[data-pui="1"] .oz-more,html[data-pui="1"] .rx-rbtn,html[data-pui="1"] .to-top,html[data-pui="1"] .fab-post,html[data-pui="1"] .cart-fab,html[data-pui="1"] .hb-link,html[data-pui="1"] .holy-an-item,html[data-pui="1"] .gh-chips a,html[data-pui="1"] .gh-iconbtn,html[data-pui="1"] .gh .hb-btn,html[data-pui="1"] button.primary,html[data-pui="1"] .ec-btn{
  transition:transform var(--pui-d1) var(--pui-ease), background var(--pui-d1) var(--pui-ease), color var(--pui-d1) var(--pui-ease), box-shadow var(--pui-d2) var(--pui-ease), border-color var(--pui-d1) var(--pui-ease), opacity var(--pui-d1) var(--pui-ease);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
html[data-pui="1"][data-pui-press="1"] .btn:active,html[data-pui="1"][data-pui-press="1"] .pu-btn:active,html[data-pui="1"][data-pui-press="1"] .blk-btn:active,html[data-pui="1"][data-pui-press="1"] .gh-pill:active,html[data-pui="1"][data-pui-press="1"] .oz-more:active,html[data-pui="1"][data-pui-press="1"] .rx-rbtn:active,html[data-pui="1"][data-pui-press="1"] .to-top:active,html[data-pui="1"][data-pui-press="1"] .fab-post:active,html[data-pui="1"][data-pui-press="1"] .cart-fab:active,html[data-pui="1"][data-pui-press="1"] .hb-link:active,html[data-pui="1"][data-pui-press="1"] .holy-an-item:active,html[data-pui="1"][data-pui-press="1"] .gh-chips a:active,html[data-pui="1"][data-pui-press="1"] .gh-iconbtn:active,html[data-pui="1"][data-pui-press="1"] .gh .hb-btn:active,html[data-pui="1"][data-pui-press="1"] button.primary:active,html[data-pui="1"][data-pui-press="1"] .ec-btn:active{ transform:scale(.96) !important; transition-duration:60ms; }
html[data-pui="1"][data-pui-touch="1"] .btn,html[data-pui="1"][data-pui-touch="1"] .pu-btn,html[data-pui="1"][data-pui-touch="1"] .blk-btn,html[data-pui="1"][data-pui-touch="1"] .gh-pill,html[data-pui="1"][data-pui-touch="1"] .oz-more,html[data-pui="1"][data-pui-touch="1"] .gh-chips a,html[data-pui="1"][data-pui-touch="1"] .hb-link,html[data-pui="1"][data-pui-touch="1"] .gh-iconbtn,html[data-pui="1"][data-pui-touch="1"] .ec-btn{ min-height:40px; }
@media (pointer:coarse){ html[data-pui="1"][data-pui-touch="1"] .btn,html[data-pui="1"][data-pui-touch="1"] .pu-btn,html[data-pui="1"][data-pui-touch="1"] .blk-btn,html[data-pui="1"][data-pui-touch="1"] .gh-pill,html[data-pui="1"][data-pui-touch="1"] .oz-more,html[data-pui="1"][data-pui-touch="1"] .gh-chips a,html[data-pui="1"][data-pui-touch="1"] .hb-link,html[data-pui="1"][data-pui-touch="1"] .gh-iconbtn,html[data-pui="1"][data-pui-touch="1"] .ec-btn{ min-height:44px; } }
html[data-pui="1"]:not([data-pui-skin="brand"]) .btn,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-btn,html[data-pui="1"]:not([data-pui-skin="brand"]) .blk-btn,html[data-pui="1"]:not([data-pui-skin="brand"]) .oz-more,html[data-pui="1"]:not([data-pui-skin="brand"]) .ec-btn{ border-radius:999px !important; }
html[data-pui="1"] .btn.primary,html[data-pui="1"] .blk-btn,html[data-pui="1"] .gh-pill.gh-accent,html[data-pui="1"] .btn.official-primary{ box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 16px -8px var(--dz-accent,#3366ff); }
html[data-pui="1"] .btn.primary:hover,html[data-pui="1"] .blk-btn:hover,html[data-pui="1"] .gh-pill.gh-accent:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.08), 0 10px 22px -8px var(--dz-accent,#3366ff); }
html[data-pui="1"] .to-top{ box-shadow:var(--pui-sh-3) !important; background:var(--pui-glass-strong) !important; -webkit-backdrop-filter:blur(var(--pui-blur)); backdrop-filter:blur(var(--pui-blur)); border:.5px solid var(--pui-line); transition:opacity var(--pui-d2) var(--pui-ease), visibility var(--pui-d2), transform var(--pui-d3) var(--pui-spring), box-shadow var(--pui-d2) !important; }
html[data-pui="1"] .to-top:hover{ transform:translateY(-3px); }

/* ── 4. カード：厚み・浮き・光・傾き ──────────────────────────── */
html[data-pui="1"] .of-card,html[data-pui="1"] .honpen-card,html[data-pui="1"] .media-card,html[data-pui="1"] .zk-card,html[data-pui="1"] .music-item,html[data-pui="1"] .pu-lib-card,html[data-pui="1"] .ch-card,html[data-pui="1"] .mtrk-card,html[data-pui="1"] .bb-pick-card,html[data-pui="1"] .ec-card,html[data-pui="1"] .sr-pcard,html[data-pui="1"] .cl-card,html[data-pui="1"] .xfg-item,html[data-pui="1"] .hh-imgwrap,html[data-pui="1"] .mz-card,html[data-pui="1"] .gm-card,html[data-pui="1"] .sr-item{
  transition:transform var(--pui-d3) var(--pui-spring), box-shadow var(--pui-d2) var(--pui-ease), background var(--pui-d1) var(--pui-ease), outline-color var(--pui-d1) var(--pui-ease);
  position:relative; isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
html[data-pui="1"]:not([data-pui-skin="brand"]) .of-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .honpen-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .media-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .zk-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .music-item,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-lib-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .ch-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .mtrk-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .bb-pick-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .ec-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .sr-pcard,html[data-pui="1"]:not([data-pui-skin="brand"]) .cl-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .xfg-item,html[data-pui="1"]:not([data-pui-skin="brand"]) .hh-imgwrap,html[data-pui="1"]:not([data-pui-skin="brand"]) .mz-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .gm-card,html[data-pui="1"]:not([data-pui-skin="brand"]) .sr-item{ border-radius:var(--pui-r) !important; overflow:hidden; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .of-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .honpen-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .media-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .zk-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .music-item .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-lib-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .ch-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .mtrk-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .bb-pick-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .ec-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .sr-pcard .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .cl-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .xfg-item .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .hh-imgwrap .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .mz-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .gm-card .frame,html[data-pui="1"]:not([data-pui-skin="brand"]) .sr-item .frame{ border-radius:0 !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .of-card .frame img,html[data-pui="1"]:not([data-pui-skin="brand"]) .honpen-card .frame img{ border-radius:0 !important; }
html[data-pui="1"][data-pui-depth="1"] .of-card,html[data-pui="1"][data-pui-depth="1"] .honpen-card,html[data-pui="1"][data-pui-depth="1"] .card,html[data-pui="1"][data-pui-depth="1"] .media-card,html[data-pui="1"][data-pui-depth="1"] .ec-card,html[data-pui="1"][data-pui-depth="1"] .zk-card{ box-shadow:var(--pui-sh-1) !important; }
html[data-pui="1"][data-pui-depth="2"] .of-card,html[data-pui="1"][data-pui-depth="2"] .honpen-card,html[data-pui="1"][data-pui-depth="2"] .card,html[data-pui="1"][data-pui-depth="2"] .media-card,html[data-pui="1"][data-pui-depth="2"] .ec-card,html[data-pui="1"][data-pui-depth="2"] .zk-card{ box-shadow:var(--pui-sh-1) !important; }
html[data-pui="1"][data-pui-depth="3"] .of-card,html[data-pui="1"][data-pui-depth="3"] .honpen-card,html[data-pui="1"][data-pui-depth="3"] .card,html[data-pui="1"][data-pui-depth="3"] .media-card,html[data-pui="1"][data-pui-depth="3"] .ec-card,html[data-pui="1"][data-pui-depth="3"] .zk-card{ box-shadow:var(--pui-sh-2) !important; }
html[data-pui="1"][data-pui-depth="1"] .of-card:hover,html[data-pui="1"][data-pui-depth="1"] .honpen-card:hover,html[data-pui="1"][data-pui-depth="1"] .media-card:hover,html[data-pui="1"][data-pui-depth="1"] .zk-card:hover,html[data-pui="1"][data-pui-depth="1"] .music-item:hover,html[data-pui="1"][data-pui-depth="1"] .pu-lib-card:hover,html[data-pui="1"][data-pui-depth="1"] .ch-card:hover,html[data-pui="1"][data-pui-depth="1"] .mtrk-card:hover,html[data-pui="1"][data-pui-depth="1"] .bb-pick-card:hover,html[data-pui="1"][data-pui-depth="1"] .ec-card:hover,html[data-pui="1"][data-pui-depth="1"] .sr-pcard:hover,html[data-pui="1"][data-pui-depth="1"] .cl-card:hover,html[data-pui="1"][data-pui-depth="1"] .xfg-item:hover,html[data-pui="1"][data-pui-depth="1"] .hh-imgwrap:hover,html[data-pui="1"][data-pui-depth="1"] .mz-card:hover,html[data-pui="1"][data-pui-depth="1"] .gm-card:hover,html[data-pui="1"][data-pui-depth="1"] .sr-item:hover{ transform:translateY(-2px); box-shadow:var(--pui-sh-2) !important; outline:none !important; }
html[data-pui="1"][data-pui-depth="2"] .of-card:hover,html[data-pui="1"][data-pui-depth="2"] .honpen-card:hover,html[data-pui="1"][data-pui-depth="2"] .media-card:hover,html[data-pui="1"][data-pui-depth="2"] .zk-card:hover,html[data-pui="1"][data-pui-depth="2"] .music-item:hover,html[data-pui="1"][data-pui-depth="2"] .pu-lib-card:hover,html[data-pui="1"][data-pui-depth="2"] .ch-card:hover,html[data-pui="1"][data-pui-depth="2"] .mtrk-card:hover,html[data-pui="1"][data-pui-depth="2"] .bb-pick-card:hover,html[data-pui="1"][data-pui-depth="2"] .ec-card:hover,html[data-pui="1"][data-pui-depth="2"] .sr-pcard:hover,html[data-pui="1"][data-pui-depth="2"] .cl-card:hover,html[data-pui="1"][data-pui-depth="2"] .xfg-item:hover,html[data-pui="1"][data-pui-depth="2"] .hh-imgwrap:hover,html[data-pui="1"][data-pui-depth="2"] .mz-card:hover,html[data-pui="1"][data-pui-depth="2"] .gm-card:hover,html[data-pui="1"][data-pui-depth="2"] .sr-item:hover{ transform:translateY(-4px); box-shadow:var(--pui-sh-3) !important; outline:none !important; }
html[data-pui="1"][data-pui-depth="3"] .of-card:hover,html[data-pui="1"][data-pui-depth="3"] .honpen-card:hover,html[data-pui="1"][data-pui-depth="3"] .media-card:hover,html[data-pui="1"][data-pui-depth="3"] .zk-card:hover,html[data-pui="1"][data-pui-depth="3"] .music-item:hover,html[data-pui="1"][data-pui-depth="3"] .pu-lib-card:hover,html[data-pui="1"][data-pui-depth="3"] .ch-card:hover,html[data-pui="1"][data-pui-depth="3"] .mtrk-card:hover,html[data-pui="1"][data-pui-depth="3"] .bb-pick-card:hover,html[data-pui="1"][data-pui-depth="3"] .ec-card:hover,html[data-pui="1"][data-pui-depth="3"] .sr-pcard:hover,html[data-pui="1"][data-pui-depth="3"] .cl-card:hover,html[data-pui="1"][data-pui-depth="3"] .xfg-item:hover,html[data-pui="1"][data-pui-depth="3"] .hh-imgwrap:hover,html[data-pui="1"][data-pui-depth="3"] .mz-card:hover,html[data-pui="1"][data-pui-depth="3"] .gm-card:hover,html[data-pui="1"][data-pui-depth="3"] .sr-item:hover{ transform:translateY(-6px) scale(1.01); box-shadow:var(--pui-sh-3), 0 40px 80px -30px rgba(0,0,0,.35) !important; outline:none !important; }
html[data-pui="1"][data-pui-press="1"] .of-card:active,html[data-pui="1"][data-pui-press="1"] .honpen-card:active,html[data-pui="1"][data-pui-press="1"] .media-card:active,html[data-pui="1"][data-pui-press="1"] .zk-card:active,html[data-pui="1"][data-pui-press="1"] .music-item:active,html[data-pui="1"][data-pui-press="1"] .pu-lib-card:active,html[data-pui="1"][data-pui-press="1"] .ch-card:active,html[data-pui="1"][data-pui-press="1"] .mtrk-card:active,html[data-pui="1"][data-pui-press="1"] .bb-pick-card:active,html[data-pui="1"][data-pui-press="1"] .ec-card:active,html[data-pui="1"][data-pui-press="1"] .sr-pcard:active,html[data-pui="1"][data-pui-press="1"] .cl-card:active,html[data-pui="1"][data-pui-press="1"] .xfg-item:active,html[data-pui="1"][data-pui-press="1"] .hh-imgwrap:active,html[data-pui="1"][data-pui-press="1"] .mz-card:active,html[data-pui="1"][data-pui-press="1"] .gm-card:active,html[data-pui="1"][data-pui-press="1"] .sr-item:active{ transform:scale(.985) !important; transition-duration:70ms; }
html[data-pui="1"] .of-card img,html[data-pui="1"] .honpen-card img,html[data-pui="1"] .media-card img,html[data-pui="1"] .zk-card img,html[data-pui="1"] .music-item img,html[data-pui="1"] .pu-lib-card img,html[data-pui="1"] .ch-card img,html[data-pui="1"] .mtrk-card img,html[data-pui="1"] .bb-pick-card img,html[data-pui="1"] .ec-card img,html[data-pui="1"] .sr-pcard img,html[data-pui="1"] .cl-card img,html[data-pui="1"] .xfg-item img,html[data-pui="1"] .hh-imgwrap img,html[data-pui="1"] .mz-card img,html[data-pui="1"] .gm-card img,html[data-pui="1"] .sr-item img{ transition:transform var(--pui-d3) var(--pui-ease), opacity var(--pui-d3) var(--pui-ease); }
html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .of-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .of-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .honpen-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .honpen-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .media-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .media-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .zk-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .zk-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .music-item:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .music-item:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .pu-lib-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .pu-lib-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .ch-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .ch-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .mtrk-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .mtrk-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .bb-pick-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .bb-pick-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .ec-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .ec-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .sr-pcard:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .sr-pcard:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .cl-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .cl-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .xfg-item:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .xfg-item:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .hh-imgwrap:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .hh-imgwrap:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .mz-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .mz-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .gm-card:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .gm-card:hover > img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .sr-item:hover .frame img,html[data-pui="1"][data-pui-motion]:not([data-pui-motion="off"]) .sr-item:hover > img{ transform:scale(1.045); }
html[data-pui="1"] .of-card .frame,html[data-pui="1"] .honpen-card .frame,html[data-pui="1"] .media-card .mc-thumb,html[data-pui="1"] .mtrk-art{ overflow:hidden; }
/* 光：--mx/--my はJSがポインター位置を書き込む */
html[data-pui="1"][data-pui-glow="1"] .of-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .honpen-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .media-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .zk-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .music-item.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .pu-lib-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .ch-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .mtrk-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .bb-pick-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .ec-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .sr-pcard.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .cl-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .xfg-item.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .hh-imgwrap.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .mz-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .gm-card.pui-gl::after,html[data-pui="1"][data-pui-glow="1"] .sr-item.pui-gl::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--dz-accent,#fff) 18%, transparent), transparent 60%);
  opacity:0; transition:opacity var(--pui-d2) var(--pui-ease);
}
html[data-pui="1"][data-pui-glow="1"] .of-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .honpen-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .media-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .zk-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .music-item.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .pu-lib-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .ch-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .mtrk-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .bb-pick-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .ec-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .sr-pcard.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .cl-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .xfg-item.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .hh-imgwrap.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .mz-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .gm-card.pui-gl:hover::after,html[data-pui="1"][data-pui-glow="1"] .sr-item.pui-gl:hover::after{ opacity:1; }
html[data-pui="1"][data-pui-tilt="1"] .pui-tl{ transform-style:preserve-3d; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform var(--pui-d2) var(--pui-ease), box-shadow var(--pui-d2) var(--pui-ease) !important; }

/* ── 5. 器・罫線：ヘアライン ──────────────────────────────────── */
html[data-pui="1"][data-pui-hairline="1"] .of-card,html[data-pui="1"][data-pui-hairline="1"] .card,html[data-pui="1"][data-pui-hairline="1"] .honpen-card,html[data-pui="1"][data-pui-hairline="1"] .side-menu,html[data-pui="1"][data-pui-hairline="1"] .side-mini,html[data-pui="1"][data-pui-hairline="1"] .pu-side-box,html[data-pui="1"][data-pui-hairline="1"] .ec-card,html[data-pui="1"][data-pui-hairline="1"] .zk-card,html[data-pui="1"][data-pui-hairline="1"] .media-card{
  border-color:transparent !important;
}
html[data-pui="1"][data-pui-hairline="1"] .ticker,html[data-pui="1"][data-pui-hairline="1"] .site-top,html[data-pui="1"][data-pui-hairline="1"] .retro-nav,html[data-pui="1"][data-pui-hairline="1"] .login-line,html[data-pui="1"][data-pui-hairline="1"] .site-footer,html[data-pui="1"][data-pui-hairline="1"] .gf{ border-width:.5px !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .side-menu,html[data-pui="1"]:not([data-pui-skin="brand"]) .side-mini,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-side-box,html[data-pui="1"]:not([data-pui-skin="brand"]) .box,html[data-pui="1"]:not([data-pui-skin="brand"]) .panel,html[data-pui="1"]:not([data-pui-skin="brand"]) .pu-panel,html[data-pui="1"]:not([data-pui-skin="brand"]) .of-panel,html[data-pui="1"]:not([data-pui-skin="brand"]) .notice{ border-radius:var(--pui-r) !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col textarea,html[data-pui="1"]:not([data-pui-skin="brand"]) .main-col select{ border-radius:var(--pui-r-s) !important; }
html[data-pui="1"] .main-col input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-pui="1"] .main-col textarea,html[data-pui="1"] .main-col select{ transition:box-shadow var(--pui-d2) var(--pui-ease), border-color var(--pui-d1) var(--pui-ease); }
html[data-pui="1"] .main-col input:focus,html[data-pui="1"] .main-col textarea:focus,html[data-pui="1"] .main-col select:focus{ outline:none; box-shadow:0 0 0 4px var(--pui-accent-glow) !important; border-color:var(--dz-accent,#3366ff) !important; }
html[data-pui="1"]:not([data-pui-skin="brand"]) .dz-slides,html[data-pui="1"]:not([data-pui-skin="brand"]) .hero-slider,html[data-pui="1"]:not([data-pui-skin="brand"]) .hs-viewport,html[data-pui="1"]:not([data-pui-skin="brand"]) .blk-img img,html[data-pui="1"]:not([data-pui-skin="brand"]) .blk-banner img,html[data-pui="1"]:not([data-pui-skin="brand"]) .blk-video iframe{ border-radius:var(--pui-r-l) !important; }

/* ── 6. シート：スマホのメニューを下からのガラスシートに ───────── */
html[data-pui="1"] .hb-scrim{ transition:opacity var(--pui-d2) var(--pui-ease) !important; }
html[data-pui="1"][data-pui-sheet="1"] .hb-scrim{ background:rgba(0,0,0,.34) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
html[data-pui="1"] .hb-panel{ transition:transform var(--pui-d3) var(--pui-spring), opacity var(--pui-d2) var(--pui-ease) !important; box-shadow:var(--pui-sh-sheet) !important; }
html[data-pui="1"][data-pui-sheet="1"] .hb-panel{
  background:var(--pui-glass-strong) !important;
  -webkit-backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)); backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat));
}
@media (max-width:900px){
  html[data-pui="1"][data-pui-sheet="1"] .hb-panel{ border-radius:var(--pui-r-xl) var(--pui-r-xl) 0 0 !important; padding-bottom:max(16px, env(safe-area-inset-bottom)) !important; }
  html[data-pui="1"][data-pui-sheet="1"] .hb-panel::before{ content:""; display:block; width:38px; height:5px; border-radius:99px; background:color-mix(in srgb, var(--dz-text,#000) 22%, transparent); margin:8px auto 4px; }
}
html[data-pui="1"] .hb-link{ border-radius:var(--pui-r-s) !important; }
html[data-pui="1"] .hb-link:active{ background:var(--dz-hover) !important; }

/* ── 7. 下部アプリメニュー（教会版）とFAB：ガラス＋セーフエリア ─── */
html[data-pui="1"] .holy-appnav{
  background:var(--pui-glass) !important;
  -webkit-backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)); backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat));
  border-top:.5px solid var(--pui-line) !important; box-shadow:none !important;
  padding-bottom:env(safe-area-inset-bottom);
}
html[data-pui="1"] .holy-an-item{ transition:transform var(--pui-d2) var(--pui-spring), color var(--pui-d1) var(--pui-ease); }
html[data-pui="1"] .holy-an-item.on svg{ transform:translateY(-1px) scale(1.08); transition:transform var(--pui-d3) var(--pui-spring); }
html[data-pui="1"] .fab-post,html[data-pui="1"] .cart-fab,html[data-pui="1"] .ec-fab{ box-shadow:var(--pui-sh-3) !important; }

/* ── 8. スクロールで現れる（カード）・ページ入場 ───────────────── */
html[data-pui="1"][data-pui-reveal="1"].pui-js .pui-rv{ opacity:0; transform:translateY(calc(12px * var(--pui-m))) scale(.985); }
html[data-pui="1"][data-pui-reveal="1"].pui-js .pui-rv.pui-in{ opacity:1; transform:none; transition:opacity var(--pui-d3) var(--pui-out), transform var(--pui-d3) var(--pui-out); transition-delay:var(--pui-dl,0ms); }
html[data-pui="1"][data-pui-motion="off"] .pui-rv{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){ html[data-pui="1"] .pui-rv{ opacity:1 !important; transform:none !important; } }
/* ══ ページの切り替わり ══
   重要：body には transform も filter も一切かけない。
   body が変形すると、その中の position:fixed（フッター固定メニュー・FAB・
   カート等）が body 基準になり、追従しなくなるうえ、はみ出しで
   ページ下に長い余白が生まれる。演出はすべて html::after の1枚で行う。 */
html[data-pui="1"]{ --pui-td:calc(520ms * var(--pui-m) * var(--pui-tsp)); }
html[data-pui="1"].pui-vtout::after,html[data-pui="1"][data-pui-vtin]::after{
  content:""; position:fixed; inset:0; z-index:9997; pointer-events:none; will-change:clip-path, opacity, transform;
  background:var(--dz-bg,#fff);
}
html[data-pui="1"].pui-vtout::after{ pointer-events:auto; }
/* つなぐ（溶ける） */
html[data-pui="1"][data-pui-trans_style="fade"].pui-vtout::after{ background:var(--dz-bg,#fff); animation:puiFadeIn var(--pui-td) var(--pui-ease) both; }
html[data-pui="1"][data-pui-vtin="fade"]::after{ background:var(--dz-bg,#fff); animation:puiFadeOut var(--pui-td) var(--pui-out) both; }
/* 黒い円・白い円（右上から広がって塗り、次のページで逆に開く） */
html[data-pui="1"][data-pui-trans_style="iris_dark"].pui-vtout::after{ background:#000; animation:puiIrisIn var(--pui-td) var(--pui-ease) both; }
html[data-pui="1"][data-pui-vtin="iris_dark"]::after{ background:#000; animation:puiIrisOut var(--pui-td) var(--pui-out) both; }
html[data-pui="1"][data-pui-trans_style="iris_light"].pui-vtout::after{ background:#fff; animation:puiIrisIn var(--pui-td) var(--pui-ease) both; }
html[data-pui="1"][data-pui-vtin="iris_light"]::after{ background:#fff; animation:puiIrisOut var(--pui-td) var(--pui-out) both; }
@keyframes puiIrisIn{ from{ clip-path:circle(0% at 100% 0%); } to{ clip-path:circle(150% at 100% 0%); } }
@keyframes puiIrisOut{ from{ clip-path:circle(150% at 100% 0%); } to{ clip-path:circle(0% at 100% 0%); } }
@keyframes puiFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes puiFadeOut{ from{ opacity:1; } to{ opacity:0; } }
/* ワープ（中心から抜ける光） */
html[data-pui="1"][data-pui-trans_style="warp"].pui-vtout::after,html[data-pui="1"][data-pui-vtin="warp"]::after{
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--dz-accent,#6f7dff) 92%, #fff) 0 6%, transparent 42%),
    conic-gradient(from 0deg at 50% 50%, transparent 0 3deg, color-mix(in srgb, var(--dz-accent,#6f7dff) 55%, transparent) 4deg 5deg, transparent 6deg 12deg),
    radial-gradient(circle at 50% 50%, #000 0 38%, color-mix(in srgb, var(--dz-text,#000) 92%, transparent) 100%);
}
html[data-pui="1"][data-pui-trans_style="warp"].pui-vtout::after{ animation:puiWarpIn var(--pui-td) cubic-bezier(.5,0,.75,0) both; }
html[data-pui="1"][data-pui-vtin="warp"]::after{ animation:puiWarpOut var(--pui-td) var(--pui-out) both; }
@keyframes puiWarpIn{ from{ opacity:0; transform:scale(.2) rotate(-8deg); } 60%{ opacity:1; } to{ opacity:1; transform:scale(2.6) rotate(6deg); } }
@keyframes puiWarpOut{ from{ opacity:1; transform:scale(2.6) rotate(6deg); } to{ opacity:0; transform:scale(.2) rotate(-8deg); } }
/* スキャン（上から降りる走査線） */
html[data-pui="1"][data-pui-trans_style="scan"].pui-vtout::after,html[data-pui="1"][data-pui-vtin="scan"]::after{
  background:
    linear-gradient(180deg, transparent calc(100% - 4px), color-mix(in srgb, var(--dz-accent,#6f7dff) 90%, #fff) 100%),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--dz-text,#000) 94%, transparent) 0 3px, color-mix(in srgb, var(--dz-text,#000) 82%, transparent) 3px 6px);
}
html[data-pui="1"][data-pui-trans_style="scan"].pui-vtout::after{ animation:puiScanIn var(--pui-td) var(--pui-ease) both; }
html[data-pui="1"][data-pui-vtin="scan"]::after{ animation:puiScanOut var(--pui-td) var(--pui-ease) both; }
@keyframes puiScanIn{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0); } }
@keyframes puiScanOut{ from{ clip-path:inset(0); } to{ clip-path:inset(100% 0 0 0); } }
/* 動きを止める設定・OSの設定では、演出そのものを出さない */
html[data-pui="1"][data-pui-motion="off"].pui-vtout::after,html[data-pui="1"][data-pui-motion="off"][data-pui-vtin]::after,
html[data-pui="1"][data-pui-transition="0"].pui-vtout::after{ content:none; }
@media (prefers-reduced-motion: reduce){ html[data-pui="1"].pui-vtout::after,html[data-pui="1"][data-pui-vtin]::after{ content:none; } }

/* ── 9. 進み（上端の線）・画像のふわり・HUD ───────────────────── */
html[data-pui="1"] #pui-bar{ position:fixed; top:0; left:0; height:2.5px; width:0; z-index:9998; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, var(--dz-accent,#3366ff), color-mix(in srgb, var(--dz-accent,#3366ff) 55%, #fff)); border-radius:0 3px 3px 0;
  box-shadow:0 0 12px var(--pui-accent-glow); transition:width 1.4s cubic-bezier(.2,.8,.2,1), opacity var(--pui-d2) var(--pui-ease); }
html[data-pui="1"] #pui-bar.on{ opacity:1; width:82%; }
html[data-pui="1"] #pui-bar.done{ width:100%; opacity:0; transition:width var(--pui-d1) var(--pui-ease), opacity var(--pui-d3) var(--pui-ease) var(--pui-d1); }
html[data-pui="1"][data-pui-imgfade="1"].pui-js img[loading="lazy"]:not(.pui-ld){ opacity:0; }
html[data-pui="1"][data-pui-imgfade="1"].pui-js img[loading="lazy"]{ transition:opacity var(--pui-d3) var(--pui-ease), transform var(--pui-d3) var(--pui-ease); }
html[data-pui="1"][data-pui-imgfade="1"].pui-js img[loading="lazy"].pui-ld{ opacity:1; }
html[data-pui="1"] #pui-hud{ position:fixed; left:50%; top:max(10px, env(safe-area-inset-top)); transform:translate(-50%, -140%); z-index:9999; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:min(92vw, 420px); padding:10px 18px 10px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--dz-text,#111) 92%, transparent); color:var(--dz-surface,#fff); font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  box-shadow:var(--pui-sh-3); opacity:0; transition:transform var(--pui-d3) var(--pui-spring), opacity var(--pui-d2) var(--pui-ease); will-change:transform; }
html[data-pui="1"] #pui-hud.on{ transform:translate(-50%, 0); opacity:1; }
html[data-pui="1"] #pui-hud i{ width:8px; height:8px; border-radius:50%; background:var(--dz-accent,#3366ff); flex:none; box-shadow:0 0 10px var(--dz-accent,#3366ff); }
html[data-pui="1"] #pui-hud.bad i{ background:#ff5d6c; box-shadow:0 0 10px #ff5d6c; }

/* ── 10. スポットライト検索：⌘K でガラスの検索窓を中央に ──────── */
html[data-pui="1"] #pui-dim{ position:fixed; inset:0; z-index:398; background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
  opacity:0; pointer-events:none; transition:opacity var(--pui-d2) var(--pui-ease); }
html[data-pui="1"].pui-spot #pui-dim{ opacity:1; pointer-events:auto; }
html[data-pui="1"].pui-spot .gh-search{
  position:fixed !important; z-index:399 !important; left:50% !important; top:max(12vh, 64px) !important; margin:0 !important;
  width:min(680px, 92vw) !important; max-width:none !important; height:58px !important; display:flex !important;
  transform:translate(-50%, 0); animation:puiSpotIn var(--pui-d3) var(--pui-spring) both;
}
@keyframes puiSpotIn{ from{ opacity:0; transform:translate(-50%, -10px) scale(.96); } to{ opacity:1; transform:translate(-50%, 0) scale(1); } }
html[data-pui="1"].pui-spot .gh-search input{ font-size:18px !important; padding:0 22px !important; border-radius:var(--pui-r-l) 0 0 var(--pui-r-l) !important;
  background:var(--pui-glass-strong) !important; -webkit-backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat)); backdrop-filter:blur(var(--pui-blur)) saturate(var(--pui-sat));
  border:.5px solid var(--pui-line) !important; box-shadow:var(--pui-sh-3) !important; }
html[data-pui="1"].pui-spot .gh-search button{ width:66px !important; border-radius:0 var(--pui-r-l) var(--pui-r-l) 0 !important; border:.5px solid var(--pui-line) !important; border-left:none !important; box-shadow:var(--pui-sh-3) !important; }
html[data-pui="1"].pui-spot .gh-sug{ top:calc(100% + 10px) !important; }
html[data-pui="1"].pui-spot .gh-sug a{ padding:12px 14px !important; font-size:15px !important; }
html[data-pui="1"].pui-spot{ overflow:hidden; }

/* ── 11. 環境光・粒子・ポインターの光 ─────────────────────────── */
html[data-pui="1"][data-pui-ambient="aurora"],html[data-pui="1"][data-pui-ambient="both"]{ background:var(--dz-bg,#fff); }
html[data-pui="1"][data-pui-ambient="aurora"] body,html[data-pui="1"][data-pui-ambient="both"] body{ background-color:transparent !important; }
html[data-pui="1"] #pui-ambient{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; opacity:.55; filter:blur(60px) saturate(140%); }
html[data-pui="1"] #pui-ambient::before,html[data-pui="1"] #pui-ambient::after{ content:""; position:absolute; width:52vmax; height:52vmax; border-radius:50%; mix-blend-mode:normal;
  background:radial-gradient(circle at 35% 35%, hsl(var(--pui-hue) 90% 68% / .55), transparent 62%); animation:puiAur1 calc(26s / max(var(--pui-m), .25)) ease-in-out infinite alternate; top:-18%; left:-14%; }
html[data-pui="1"] #pui-ambient::after{ background:radial-gradient(circle at 60% 60%, hsl(calc(var(--pui-hue) + 70) 90% 70% / .5), transparent 62%); animation:puiAur2 calc(34s / max(var(--pui-m), .25)) ease-in-out infinite alternate; top:auto; bottom:-14%; right:-10%; left:auto; }
@keyframes puiAur1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(18vw, 12vh) scale(1.18); } }
@keyframes puiAur2{ from{ transform:translate(0,0) scale(1.1); } to{ transform:translate(-16vw, -14vh) scale(.95); } }
html[data-pui="1"][data-pui-motion="off"] #pui-ambient::before,html[data-pui="1"][data-pui-motion="off"] #pui-ambient::after{ animation:none; }
html[data-pui="1"] #pui-grain{ position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size:160px 160px; }
html[data-pui="1"] #pui-cursor{ position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; z-index:1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--dz-accent,#3366ff) 22%, transparent), transparent 62%); mix-blend-mode:soft-light; opacity:0; transition:opacity var(--pui-d3) var(--pui-ease); will-change:transform; }
html[data-pui="1"] #pui-cursor.on{ opacity:1; }
@media (pointer:coarse){ html[data-pui="1"] #pui-cursor{ display:none; } }

/* ── 12. スクロールバー：細く丸く ─────────────────────────────── */
html[data-pui="1"][data-pui-scrollbar="1"]{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--dz-text,#000) 28%, transparent) transparent; }
html[data-pui="1"][data-pui-scrollbar="1"] ::-webkit-scrollbar{ width:9px; height:9px; }
html[data-pui="1"][data-pui-scrollbar="1"] ::-webkit-scrollbar-track{ background:transparent; }
html[data-pui="1"][data-pui-scrollbar="1"] ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--dz-text,#000) 28%, transparent); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
html[data-pui="1"][data-pui-scrollbar="1"] ::-webkit-scrollbar-thumb:hover{ background-color:color-mix(in srgb, var(--dz-text,#000) 45%, transparent); }

/* ── 13. ヒーロー：奥行き（JSが --pui-py を書く） ───────────────── */
html[data-pui="1"][data-pui-hero_depth="1"] .pui-hero{ will-change:transform; }
html[data-pui="1"][data-pui-hero_depth="1"] .pui-hero > *{ transform:translate3d(0, var(--pui-py,0px), 0) scale(var(--pui-ps,1)); transform-origin:50% 0; }
html[data-pui="1"][data-pui-hero_depth="1"] .pui-hero{ opacity:var(--pui-po,1); }

/* ── 14. 細部：タッチ端末の描画負荷、印刷 ─────────────────────── */
@media (max-width:900px), (pointer:coarse){
  html[data-pui="1"][data-pui-tilt="1"] .pui-tl{ transform:none !important; }
  html[data-pui="1"] #pui-ambient{ filter:blur(40px); opacity:.45; }
}
@media print{ html[data-pui="1"] #pui-bar,html[data-pui="1"] #pui-hud,html[data-pui="1"] #pui-dim,html[data-pui="1"] #pui-ambient,html[data-pui="1"] #pui-grain,html[data-pui="1"] #pui-cursor{ display:none !important; } html[data-pui="1"] .pui-rv{ opacity:1 !important; transform:none !important; } }