/* natane のロゴ（ひとつのロゴ）。2026-10-23 に翼が確定した形。
   オーブの玉の直径 = natane の字の 1.55 倍。倍率を変えたときは字を小さくする（オーブの大きさは前のまま）。
   玉と natane の字の間 = 玉の直径の 0.51。natane の字の間 0.125em。
   タグライン = natane の字の 0.4 倍、字の間 0.01em、natane の字の下からタグラインの上まで natane の字の 0.36、色 #797E8C。
   上下は、見えている字のかたまりの真ん中を、玉の真ん中にそろえる。
   --nu は natane の字の大きさ。オーブの絵（canvas）は --nu の 2.203 倍で、玉はその 0.7036。
   タグラインが 7.5px より小さくなる幅では、タグラインを出さない。
   このファイルを書きかえるときは、/home/claude/deploy/build_logo.py（作り方）とデザインの決まりの資料をそろえる。 */


@keyframes nlGrow{from{transform:scale(.84)}to{transform:none}}
@keyframes nlFade{from{opacity:0}to{opacity:1}}


/* WebGL が使えないときの簡易の玉も、玉の大きさ（絵の 0.7036）にそろえる */
html body canvas.natane-orb[data-orb-fallback]{clip-path:circle(35.18% at 50% 50%)}


/* オーブの絵 44px：natane 19.9732px、タグライン 7.9893px */
html body .logo{--nu:19.9732px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .logo canvas.natane-orb{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .logo-txt{gap:0!important;transform:translateY(calc(var(--nu)*-0.1135))}
html body .logo-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .logo-tg,html body.hero-done .hd .logo-tg{font-size:calc(var(--nu)*0.4)!important;letter-spacing:0.01em!important;line-height:1!important;font-weight:400!important;white-space:nowrap;margin:calc(var(--nu)*0.165) 0 0 calc(var(--nu)*0.057)!important;color:#797E8C!important}
/* オーブの絵 36px：natane 16.3417px、タグライン なし */
@media (max-width:900px){
html body .logo{--nu:16.3417px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .logo canvas.natane-orb{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .logo-txt{gap:0!important;transform:translateY(calc(var(--nu)*-0.04))}
html body .logo-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .logo-tg,html body.hero-done .hd .logo-tg{display:none!important}
}
/* オーブの絵 40px：natane 18.1574px、タグライン なし */
@media (max-width:640px){
html body .logo{--nu:18.1574px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .logo canvas.natane-orb{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .logo-txt{gap:0!important;transform:translateY(calc(var(--nu)*-0.04))}
html body .logo-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .logo-tg,html body.hero-done .hd .logo-tg{display:none!important}
}

/* 開いたときの画面 */
html body .op-lockup{--nu:calc(clamp(84px,7.4vw,104px)*0.4539);gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .op-seed{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .op-word{gap:0!important;transform:translateY(calc(var(--nu)*-0.1135))}
html body .op-word b{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .op-word s{font-size:calc(var(--nu)*0.4)!important;letter-spacing:0.01em!important;line-height:1!important;font-weight:400!important;white-space:nowrap;margin:calc(var(--nu)*0.165) 0 0 calc(var(--nu)*0.057)!important;color:#797E8C!important}
html body .op-lockup{flex-direction:row!important;animation:nlGrow 1.4s var(--ease,cubic-bezier(.22,1,.36,1)) .25s both}
html body .op-seed{opacity:0;animation:nlFade 1.4s var(--ease,cubic-bezier(.22,1,.36,1)) .25s forwards!important}
html body .op-word b,html body .op-word s{text-align:left!important;display:block}
@media (prefers-reduced-motion:reduce){html body .op-lockup{animation:none!important}html body .op-seed{animation:none!important;opacity:1!important}}

/* natane AI のカードの小さなロゴ：natane 5.9012〜7.263px、タグラインなし */
html body .bn-logo{--nu:calc(clamp(13px,3.6vw,16px)*0.4539);gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .bn-logo img{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .bn-lt{gap:0!important;transform:translateY(calc(var(--nu)*-0.04))}
html body .bn-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .bn-tg{display:none!important}