/* Opt-in additions to v2.9.0: hero entry, viewer and mobile actions only. */
.hero-introduction { position:absolute; z-index:7; top:var(--hero-intro-top,calc(50% + 7vw + 24px)); left:50%; width:var(--hero-intro-width,min(56.6vw,1210px)); transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:32px; pointer-events:none; }
.hero-introduction p { margin:0; color:#c4c4c4; font:500 clamp(15px,1.05vw,18px)/1.7 var(--font-ui); letter-spacing:.055em; white-space:nowrap; }
.hero-browse { display:inline-flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:22px; min-height:44px; padding:0; color:#dedede; text-decoration:none; font:500 clamp(14px,1vw,16px)/1 var(--font-ui); pointer-events:auto; transition:color .16s; }
.hero-browse:hover,.hero-browse:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:6px; }
.hero-browse span { font-size:24px; line-height:1; }
.fab-actions { display:flex; flex-direction:column; align-items:center; gap:12px; }
.fab-actions .fab { font-family:var(--font-ui); }
.fab-label,.fab-toggle { display:none; }
body.lb-open > .fab-box { display:none; }
#lb { --lb-top-space:76px; --lb-bottom-space:82px; background:#080808; touch-action:pan-x pan-y pinch-zoom; }
#lb .lb-info { top:26px; }
#lb #lb-close { top:22px; right:24px; width:40px; height:40px; }
#lb::after { content:""; display:block!important; position:fixed; inset:0 0 auto; height:76px; background:#080808; z-index:9019; pointer-events:none; transition:none; }
#lb.active::after { opacity:1; }
#lb.long-mode #lb-content { padding:var(--lb-top-space) 0 var(--lb-bottom-space); }
#lb .lb-nav { top:calc(50% - 24px); bottom:auto; width:48px; min-width:48px; height:48px; padding:0; background:none; border:0; }
#lb .lb-prev { left:20px; }
#lb .lb-next { right:20px; }
#lb .lb-nav::before { display:none; }
#lb .lb-nav span { opacity:.8; margin:0; flex-shrink:0; }
#lb.active .lb-strip { opacity:.8; }
#lb .lb-strip button { opacity:.65; }
#lb .lb-strip button.active { opacity:1; }
#lb.long-mode .lb-strip,#lb.kata-mode .lb-strip,#lb.kata-mode .lb-nav { display:flex; }
.viewer-tools { position:fixed; z-index:9030; top:22px; right:80px; display:flex; gap:8px; }
.viewer-tools button { min-height:36px; padding:0 14px; border:1px solid #454545; border-radius:99px; color:#ddd; background:#181818; font:500 12px var(--font-ui); cursor:pointer; }
.viewer-tools button[hidden] { display:none; }
.viewer-tools button:focus-visible,.fab-toggle:focus-visible,.fab:focus-visible,.hero-browse:focus-visible { outline:2px solid #ccc; outline-offset:4px; }
#lb-status { position:fixed; top:50%; left:50%; transform:translate(-50%,30px); z-index:9015; font:400 13px/1.6 var(--font-ui); color:#ccc; text-align:center; pointer-events:none; }
#lb-status:empty { display:none; }
#lb[data-zoomed="true"] #lb-content { align-items:flex-start; overflow:visible; width:max-content; min-width:100%; }
#lb[data-zoomed="true"] { overflow:auto; justify-content:flex-start; align-items:flex-start; }
#lb.kata-mode { overflow-y:auto; justify-content:flex-start; }
#lb[data-zoomed="true"] #img-s { max-width:none!important; max-height:none!important; margin:0 auto; cursor:zoom-out; }
#lb:not([data-zoomed="true"]) #img-s { cursor:zoom-in; }
#lb #lb-video { width:min(96vw,1280px); height:calc(100svh - var(--lb-top-space) - var(--lb-bottom-space)); max-height:none; aspect-ratio:auto; object-fit:contain; }
#lb.kata-mode #lb-content { height:auto; min-height:100%; justify-content:flex-start; padding:var(--lb-top-space) 0 var(--lb-bottom-space); }
#lb.kata-mode #lb-content,#lb.long-mode #lb-content,#lb[data-zoomed="true"] #lb-content { flex:0 0 auto; transform-origin:50% 0; }
#lb .kata-container { flex-shrink:0; }
#lb .kata-container { height:auto; max-height:none; overflow:visible; mask-image:none; -webkit-mask-image:none; }
.kata-opening__video { transition:opacity .22s ease-out; }
.kata-opening__assist .kata-opening__skip { opacity:.75; transform:none; pointer-events:auto; }
@media(max-width:700px) {
  #home .hero-introduction { width:var(--hero-intro-width,calc(100% - 48px)); top:var(--hero-intro-top,calc(50% + 11vw + 56px)); flex-direction:column; align-items:flex-start; gap:10px; }
  .hero-introduction p { font-size:13px; letter-spacing:.045em; }
  .hero-browse { font-size:14px; gap:22px; }
  body .fab-box { right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); gap:10px; align-items:flex-end; }
  .fab-toggle { display:flex; width:46px; height:46px; border:1px solid #555; border-radius:50%; align-items:center; justify-content:center; background:#171717; color:#ddd; padding:0; cursor:pointer; }
  .fab-toggle svg { width:22px; height:22px; fill:currentColor; }
  .fab-actions { align-items:stretch; gap:4px; padding:8px; border:1px solid #404040; border-radius:20px; background:#181818; box-shadow:0 10px 32px #0005; }
  .fab-actions[hidden] { display:none; }
  .fab-actions .fab { display:flex; justify-content:flex-start; gap:12px; width:146px; height:44px; border:0; border-radius:12px; padding:0 12px; background:transparent; color:#ddd; box-shadow:none; opacity:1!important; transform:none!important; }
  .fab-actions .fab:active { background:#303030; }
  .fab-actions .fab svg { width:21px; height:21px; }
  .fab-actions .fab-like__icon { position:static; flex:0 0 21px; display:flex; }
  .fab-actions .fab-label { display:inline; font:500 13px var(--font-ui); }
  .fab-actions .like-count { position:static; width:auto; height:auto; min-width:0; border:0; background:none; color:inherit; font-size:11px; padding:0; margin-left:auto; }
  #lb { --lb-top-space:calc(64px + env(safe-area-inset-top)); --lb-bottom-space:calc(74px + env(safe-area-inset-bottom)); border-radius:0; }
  #lb::after { height:calc(64px + env(safe-area-inset-top)); }
  #lb .lb-info { top:calc(20px + env(safe-area-inset-top)); left:16px; }
  #lb.active .lb-info { transform:none; max-width:calc(100% - 162px); padding:8px 0; border:0; background:none; gap:8px; }
  #lb .lb-info span { letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; }
  #lb #lb-close { top:calc(12px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; }
  .viewer-tools { top:calc(16px + env(safe-area-inset-top)); right:64px; }
  .viewer-tools button { min-height:36px; padding:0 10px; }
  #lb .lb-nav { display:flex; top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:9030; width:44px; min-width:44px; height:44px; }
  #lb .lb-prev { left:12px; } #lb .lb-next { right:12px; }
  #lb .lb-strip { display:flex; bottom:calc(12px + env(safe-area-inset-bottom)); left:66px; right:66px; width:auto; max-width:none; height:48px; }
  #lb.active .lb-strip { transform:none; }
  #lb .lb-strip button { width:36px; height:36px; flex:0 0 36px; }
  #lb.long-mode #lb-content { padding:var(--lb-top-space) 0 var(--lb-bottom-space); }
  #lb .long-container { width:100%!important; max-width:100%!important; border-radius:0; box-shadow:none; }
  #lb .kata-track { columns:1; padding:0 8px; }
  #lb.kata-mode .lb-strip { display:flex; }
  #lb .kata-card { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-browse,.kata-opening__video,.fab-actions { transition:none; }
}