/* お客様の画面だけの仕上げ（11/9 TP「まだ安っぽい。もう少し高級感・プロ感」）
   方針：余白を広く・線は細く・色は面で塗らない（墨のボタン、朱は点だけ）・帯は上に固定して、タブを帯の中へ
   動きは色と影の変化だけ（transform・opacity・color）。社内の画面（body.staff）には当てない */
body.cl{--paper:#FFFFFF;--ivory:#FAF8F4;--hair:#E9E5DD;--ink2:#1A1A1A;background:var(--ivory);color:var(--ink2);letter-spacing:.02em}
body.cl main{padding:48px 0 120px}

/* 上の帯：固定。ロゴ・タブ・お名前を1本に */
body.cl .top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair)}
body.cl .top .wrap{min-height:68px;gap:40px}
body.cl .top .logo{font-size:19px;letter-spacing:.1em;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
body.cl .top .tabs{flex:1;align-self:stretch;border:0;margin:0;gap:34px}
body.cl .top .tabs a{padding:0;min-height:68px;font-size:13px;font-weight:700;letter-spacing:.12em;color:#6E6B64;transition:color .2s}
body.cl .top .tabs a:hover{color:var(--ink2)}
body.cl .top .tabs a[aria-current]{color:var(--ink2)}
body.cl .top .tabs a[aria-current]::after{bottom:-1px;height:1px;background:var(--ink2)}
body.cl .who-am-i{flex:0 0 auto;font-size:12.5px;letter-spacing:.08em;gap:18px}
body.cl .who-am-i .linkbtn{min-height:44px;color:#6E6B64;text-decoration:none;border-bottom:1px solid #C9C4BA;padding:0;line-height:1.4;height:auto}
@media(max-width:1023px){body.cl .top .tabs{gap:22px}body.cl .top .wrap{gap:24px}}
@media(max-width:899px){body.cl .top .wrap{min-height:58px}body.cl main{padding-top:28px}}

/* 見出し・本文 */
body.cl h1{font-weight:700;letter-spacing:.06em}
body.cl .h-head h1{font-size:clamp(28px,3.6vw,38px);letter-spacing:.08em}
body.cl .h-head .asof,body.cl .h-sec-head .period{letter-spacing:.08em}
body.cl .h-sec{margin-bottom:72px}
body.cl .h-sec-head{border-bottom:1px solid var(--ink2);padding-bottom:14px}
body.cl .h-sec-head h2{font-size:18px;letter-spacing:.12em}
body.cl .muted{color:#6E6B64}

/* ボタン：墨の面・字は広め。朱やコバルトの塗りは使わない */
body.cl .btn{min-height:50px;padding:12px 28px;border-radius:0;background:var(--ink2);border-color:var(--ink2);font-size:14px;letter-spacing:.14em;transition:background-color .25s,color .25s,border-color .25s}
body.cl .btn:hover{background:#2C2C2C;border-color:#2C2C2C}
body.cl .btn.line{background:transparent;color:var(--ink2);border-color:var(--ink2)}
body.cl .btn.line:hover{background:var(--ink2);color:#fff}
body.cl .btn.sm{min-height:44px;padding:8px 18px;font-size:13px}
body.cl .btn:disabled{opacity:.35;cursor:not-allowed}

/* 入力 */
body.cl input:not([type=checkbox]):not([type=radio]):not([type=file]),body.cl select,body.cl textarea{border-color:#D9D4CA;border-radius:0;background:#fff;padding:13px 14px}
body.cl .check input,body.cl input[type=checkbox],body.cl input[type=radio]{accent-color:var(--ink2)}

/* 「次にやること」と「いま見られる版」（1枚のカード） */
body.cl .h-next{background:#fff;border:1px solid var(--hair);border-left:1px solid var(--hair);padding:34px 40px 32px;margin-bottom:72px;box-shadow:0 1px 2px rgba(17,17,17,.03),0 18px 40px -24px rgba(17,17,17,.12)}
body.cl a.h-next:hover{background:#fff;border-color:#D9D4CA}
body.cl .h-next .owner{font-size:12px;letter-spacing:.14em;color:#6E6B64}
body.cl .h-next b{font-size:clamp(20px,2.4vw,24px);letter-spacing:.06em;line-height:1.7;margin-top:4px}
body.cl .h-next .go{border-top-color:var(--hair);padding-top:16px;margin-top:10px;letter-spacing:.06em}
body.cl .h-next .due{font-size:12.5px;color:#6E6B64;letter-spacing:.08em}
body.cl .h-next .arrow{color:var(--ink2)}
body.cl .h-next.has-v .vbox{margin:22px 0 0;padding:22px 0 0;border:0;border-top:1px solid var(--hair);box-shadow:none;background:none}

body.cl .vbox{border-color:var(--hair);border-left:1px solid var(--hair);box-shadow:0 1px 2px rgba(17,17,17,.03)}
body.cl .vbox .vok{border-top-color:var(--hair)}

/* 進み具合 */
body.cl .track li i{width:11px;height:11px}
body.cl .track li.now i{box-shadow:0 0 0 5px rgba(240,68,42,.12)}
body.cl .track li{letter-spacing:.06em}

/* 下の3つ（サイトの状態・ご契約・月次レポート） */
body.cl .h-strip{background:#fff;border:1px solid var(--hair);border-top:1px solid var(--hair);padding:0 28px}
body.cl .s-item{padding:24px 24px 24px 0}
body.cl .s-label,body.cl .k-label{letter-spacing:.14em;font-size:11.5px;color:#6E6B64}

/* 案件の画面 */
body.cl .next{background:#fff;border:1px solid var(--hair);padding:34px 36px;box-shadow:0 1px 2px rgba(17,17,17,.03)}
body.cl .next .meta{border-top-color:var(--hair)}
body.cl .approve{background:#fff;border:1px solid var(--hair);padding:30px 34px}
body.cl .block{border-top-color:var(--hair)}
body.cl .back{letter-spacing:.06em;color:#6E6B64}
body.cl a{color:var(--ink2)}
body.cl .flash{background:#fff;border:1px solid var(--hair);border-left:2px solid var(--ink2)}
body.cl .drop{background:#fff;border-color:#D9D4CA}

/* スマホ：下のタブも同じ調子で */
@media(max-width:899px){body.cl .botnav a[aria-current]{color:var(--ink2)}}
@media (prefers-reduced-motion: reduce){body.cl *{transition:none!important}}

/* 字の色の上書きをボタンに及ぼさない */
body.cl a.btn{color:#fff}
body.cl a.btn.line{color:var(--ink2)}
body.cl a.btn.line:hover{color:#fff}
/* ログアウト：下線は字のすぐ下に */
body.cl .who-am-i .linkbtn{border:0;text-decoration:underline;text-decoration-color:#C9C4BA;text-underline-offset:5px;display:inline-flex;align-items:center}
/* 下の3つの左右の余白をそろえる */
@media(min-width:760px){body.cl .s-item + .s-item{padding-left:28px}}
@media(max-width:699px){body.cl .vbox b{font-size:17px}body.cl .vbox .vno{font-size:19px}}

/* ---- ボタンの手ざわり（11/9 TP「押したときのエフェクト」）
   1) 乗せると、左から右へ面が満ちる（墨のボタンはコバルト、線のボタンは墨）
   2) 押した瞬間だけ、わずかに沈む
   3) 送ったあとは、下に細い線が流れ続ける（終わるまで二度押しできない）
   どれも transform と色だけ。動きを減らす設定では 1・3 の動きを止める */
body.cl .btn{position:relative;isolation:isolate;overflow:hidden;transition:color .35s,border-color .35s,transform .12s ease-out}
body.cl .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cobalt);transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.65,0,.35,1)}
body.cl .btn:hover{background:var(--ink2);border-color:var(--ink2)}
body.cl .btn:hover::before{transform:scaleX(1);transform-origin:left center}
body.cl .btn:hover{border-color:var(--cobalt)}
body.cl .btn.line::before{background:var(--ink2)}
body.cl .btn.line:hover{background:transparent;color:#fff;border-color:var(--ink2)}
body.cl .btn:active{transform:translateY(1px) scale(.985)}
body.cl .btn:disabled::before{display:none}
/* 確認のチェックを入れると「公開してよい」が墨の面になる（押せる合図） */
body.cl .vok:has(input:checked) .btn.line,body.cl .approve:has(input:checked) .btn{background:var(--ink2);color:#fff;border-color:var(--ink2)}
body.cl .vok:has(input:checked) .btn.line::before{background:var(--cobalt)}
/* 送っています */
body.cl .btn.is-busy{pointer-events:none;color:rgba(255,255,255,.75)}
body.cl .btn.line.is-busy{color:rgba(26,26,26,.6)}
body.cl .btn.is-busy::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:2px;background:var(--gold);animation:cl-busy 1.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cl-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* 文字のリンク：下線が左から伸びる */
body.cl .h-more a,body.cl .back,body.cl .h-sec-head a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s cubic-bezier(.65,0,.35,1)}
body.cl .h-more a:hover,body.cl .back:hover,body.cl .h-sec-head a:hover{background-size:0 1px;background-position:right bottom}
@media (prefers-reduced-motion: reduce){body.cl .btn::before{transition:none}body.cl .btn.is-busy::after{animation:none;width:100%}body.cl .btn:active{transform:none}}

/* ---- インクが垂れる（11/9 TP）。押した所からインクがにじみ、ボタンの下の縁から2〜3本垂れる
   墨のボタンには青のインク、白（線）のボタンには墨のインク。形は transform と opacity だけで動かす */
body.cl .btn{overflow:visible;--inkc:var(--cobalt)}
body.cl .btn.line{--inkc:var(--ink2)}
body.cl .vok:has(input:checked) .btn.line{--inkc:var(--cobalt)}
body.cl .btn.inked{color:#fff;border-color:var(--inkc);transition:color .2s .08s,border-color .2s}
body.cl .ink-fx{position:absolute;inset:-1px;z-index:-1;overflow:hidden;pointer-events:none}
body.cl .ink-blot{position:absolute;border-radius:47% 53% 44% 56%/52% 45% 55% 48%;background:var(--inkc);transform:scale(0) rotate(-12deg);animation:cl-blot .62s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes cl-blot{60%{border-radius:52% 48% 57% 43%/46% 56% 44% 54%}to{transform:scale(1) rotate(0)}}
body.cl .ink-drip{position:absolute;top:calc(100% - 2px);z-index:2;border-radius:0 0 999px 999px;background:var(--inkc);transform-origin:top center;transform:scaleY(0);pointer-events:none;animation:cl-drip 1.15s cubic-bezier(.55,0,.35,1) forwards}
/* 垂れの先にしずく */
body.cl .ink-drip::after{content:"";position:absolute;left:50%;bottom:-3px;width:140%;aspect-ratio:1;border-radius:50%;background:inherit;transform:translateX(-50%)}
@keyframes cl-drip{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1.15)}}
body.cl .ink-out{opacity:0;transition:opacity .45s}
@media (prefers-reduced-motion: reduce){body.cl .ink-fx,body.cl .ink-drip{display:none}}
/* インクを主役にするため、乗せたときの「面が満ちる」はやめて、色を少し変えるだけにする */
body.cl .btn::before{display:none}
body.cl .btn:hover{background:#333;border-color:#333;color:#fff}
body.cl .btn.line:hover{background:#F1EEE7;color:var(--ink2);border-color:var(--ink2)}
body.cl .vok:has(input:checked) .btn.line:hover{background:#333;color:#fff}
body.cl .btn.inked,body.cl .btn.line.inked{color:#fff}
/* 送っている線はボタンの中に収める（インクが外に垂れるので、ボタンは外にはみ出せる作りのため） */
body.cl .btn.is-busy::after{left:0;right:0;width:auto;background:linear-gradient(90deg,transparent 0 35%,var(--gold) 35% 65%,transparent 65% 100%) 0 0/300% 100% no-repeat;animation:cl-busy2 1.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cl-busy2{from{background-position:100% 0}to{background-position:0 0}}
/* 垂れの形：根元を太く、先を細くして、しずくをつける */
body.cl .ink-drip{border-radius:1px 1px 999px 999px}

/* 11/9 TP「公開してよいの下に変な線」：送っている間の金の線はやめる。インクが残ったまま、字がゆっくり明滅するだけにする */
body.cl .btn.is-busy::after{content:none;animation:none}
body.cl .btn.is-busy{color:#fff;animation:cl-wait 1.2s ease-in-out infinite alternate}
@keyframes cl-wait{to{opacity:.86}}

/* ---- 線が描かれる（11/9 TP「各所インクの動きや、線が描かれるようなエフェクト」）
   画面に入ったときに1回だけ。動きのある画面（html.fx-on）のときだけで、動きを減らす設定・自動のブラウザでは線は最初から引いてある */
/* 1) 見出しの下の線：左から右へ引かれる */
html.fx-on body.cl .h-sec-head{position:relative;border-bottom-color:transparent}
html.fx-on body.cl .h-sec-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink2);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
html.fx-on body.cl .h-sec-head.drawn::after{transform:scaleX(1)}
/* 2) 進み具合：終わった段階の線を、順に墨で引く。いまの段階の点は、インクが落ちたように1回にじむ */
html.fx-on body.cl .track li.done::before,html.fx-on body.cl .track li.now::before{transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
html.fx-on body.cl .track.drawn li.done::before,html.fx-on body.cl .track.drawn li.now::before{transform:scaleX(1)}
html.fx-on body.cl .track li i{transition:background-color .3s,border-color .3s}
html.fx-on body.cl .track:not(.drawn) li.done i,html.fx-on body.cl .track:not(.drawn) li.now i{background:#fff;border-color:#C9C5BC;box-shadow:none}
html.fx-on body.cl .track.drawn li.now i{animation:cl-drop .9s cubic-bezier(.2,.75,.25,1) both}
@keyframes cl-drop{0%{transform:scale(0)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(max-width:759px){html.fx-on body.cl .track li.done::before,html.fx-on body.cl .track li.now::before{transform:scaleY(0);transform-origin:center top}html.fx-on body.cl .track.drawn li.done::before,html.fx-on body.cl .track.drawn li.now::before{transform:scaleY(1)}}
/* 3) カードの上の縁：細い墨の線が左から引かれる */
html.fx-on body.cl .h-next,html.fx-on body.cl .next{position:relative}
html.fx-on body.cl .h-next::before,html.fx-on body.cl .next::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--ink2);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.65,0,.35,1) .15s}
html.fx-on body.cl .h-next.drawn::before,html.fx-on body.cl .next.drawn::before{transform:scaleX(1)}
/* 4) 上の帯のタブ：乗せると下線が左から引かれる */
body.cl .top .tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink2);transform:scaleX(0);transform-origin:right center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
body.cl .top .tabs a:hover::after,body.cl .top .tabs a[aria-current]::after{transform:scaleX(1);transform-origin:left center}
/* 5) 確認のチェック：墨がにじんで四角が埋まり、白いチェックが描かれる */
body.cl .check input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:1px solid var(--ink2);border-radius:0;background:#fff center/0 0 no-repeat;transition:background-color .3s ease-out,background-size .25s cubic-bezier(.3,1.6,.5,1) .2s;cursor:pointer}
body.cl .check input[type=checkbox]:checked{background-color:var(--ink2);background-size:14px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.cl .check input[type=checkbox]:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
/* 6) 文字のリンク：乗せると下線が右へ抜けて、左から引き直される */
body.cl .h-more a:hover,body.cl .back:hover,body.cl .h-sec-head a:hover{animation:cl-redraw .7s cubic-bezier(.65,0,.35,1)}
@keyframes cl-redraw{0%{background-size:100% 1px;background-position:right bottom}45%{background-size:0 1px;background-position:right bottom}46%{background-size:0 1px;background-position:left bottom}100%{background-size:100% 1px;background-position:left bottom}}
body.cl .h-more a:hover,body.cl .back:hover,body.cl .h-sec-head a:hover{background-size:100% 1px;background-position:left bottom}
@media (prefers-reduced-motion: reduce){body.cl .btn.is-busy{animation:none}body.cl .top .tabs a::after,body.cl .check input[type=checkbox]{transition:none}}
html.fx-on body.cl .track li::before{transition-delay:var(--d,0s)}
html.fx-on body.cl .track li i{transition-delay:calc(var(--d,0s) + .25s)}
html.fx-on body.cl .track.drawn li.now i{animation-delay:calc(var(--d,0s) + .2s)}

/* ---- 11/9 TP「進み具合もインク感を」「上のタブもぼとっと垂れるように」 */
/* 進み具合：線は筆で引いたように太さ 2px・端は丸く。点はインクのしずくの形で落ちて、いまの段階の点から短く垂れる */
body.cl .track li::before{top:5.5px;height:2px;border-radius:2px}
body.cl .track li.done::before,body.cl .track li.now::before{background:var(--ink2)}
body.cl .track li i{border-radius:48% 52% 46% 54%/53% 47% 53% 47%}
body.cl .track li.done i{border-radius:44% 56% 52% 48%/56% 44% 56% 44%}
body.cl .track li.now i{position:relative;border-radius:50% 50% 47% 53%/45% 52% 48% 55%}
body.cl .track li.now i::after{content:"";position:absolute;left:50%;top:70%;width:3px;height:9px;margin-left:-1.5px;border-radius:0 0 3px 3px;background:var(--shu);transform-origin:top center}
html.fx-on body.cl .track li.now i::after{transform:scaleY(0)}
html.fx-on body.cl .track.drawn li.now i::after{animation:cl-ndrip 1.4s cubic-bezier(.55,0,.35,1) forwards;animation-delay:calc(var(--d,0s) + .9s)}
@keyframes cl-ndrip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(.8)}}
/* 線の先にインクのたまり：引いている間、線の先端に小さなしずくがついて走る */
html.fx-on body.cl .track li.done::before,html.fx-on body.cl .track li.now::before{background:linear-gradient(90deg,var(--ink2) calc(100% - 4px),var(--ink2) 0) }
/* しずくが落ちたときの、にじみの輪 */
html.fx-on body.cl .track.drawn li.done i,html.fx-on body.cl .track.drawn li.now i{animation:cl-drop .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--d,0s) + .3s)}
html.fx-on body.cl .track.drawn li.now i{animation:cl-drop .9s cubic-bezier(.2,.75,.25,1) both,cl-ring 1.6s ease-out both;animation-delay:calc(var(--d,0s) + .3s),calc(var(--d,0s) + .55s)}
@keyframes cl-ring{0%{box-shadow:0 0 0 0 rgba(240,68,42,.35)}70%{box-shadow:0 0 0 9px rgba(240,68,42,0)}100%{box-shadow:0 0 0 4px rgba(240,68,42,.12)}}
@media(max-width:759px){body.cl .track li::before{top:-50%;width:2px;left:5.5px;height:auto}body.cl .track li.now i::after{display:none}}

/* 上のタブ：乗せると下線が引かれ、その線からインクが1滴ぼとっと落ちる */
body.cl .top .tabs{overflow:visible}
body.cl .top .tabs a::before{content:"";position:absolute;left:58%;bottom:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--ink2);opacity:0;transform:scale(0);pointer-events:none}
body.cl .top .tabs a:hover::before{animation:cl-tabdrip 1.1s cubic-bezier(.55,0,.4,1) .3s forwards}
@keyframes cl-tabdrip{0%{opacity:1;transform:translateY(0) scale(0,0)}30%{opacity:1;transform:translateY(1px) scale(.8,1.1)}48%{opacity:1;transform:translateY(3px) scale(.75,1.45)}80%{opacity:1;transform:translateY(24px) scale(.9,1.12)}100%{opacity:0;transform:translateY(34px) scale(.6)}}
@media (prefers-reduced-motion: reduce){body.cl .top .tabs a::before,body.cl .track li.now i::after{animation:none!important;display:none}}
body.cl .top .tabs a::before{width:7px;height:7px;margin-left:-3.5px}

/* 上のタブを押したとき：下線から大きな1滴がふくらみ、ぼとっと落ちて、下で平たくはねる（11/9 TP） */
body.cl .top .tabs a.plopping::before{animation:none;opacity:0}
body.cl .tab-plop{position:absolute;bottom:-4px;width:11px;height:11px;margin-left:-5.5px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--ink2);transform-origin:top center;pointer-events:none;animation:cl-plop .5s cubic-bezier(.6,0,.9,.6) forwards}
@keyframes cl-plop{0%{transform:translateY(0) scale(.2,.2)}35%{transform:translateY(2px) scale(.85,1.5)}55%{transform:translateY(6px) scale(.9,1.35)}92%{transform:translateY(44px) scale(.8,1.25);opacity:1}100%{transform:translateY(48px) scale(1.6,.35);opacity:0}}
body.cl .tab-splash{position:absolute;bottom:-52px;width:0;height:0;pointer-events:none}
body.cl .tab-splash::before{content:"";position:absolute;left:-10px;top:-3px;width:20px;height:6px;border-radius:50%;background:var(--ink2);transform:scale(0);animation:cl-pool .5s cubic-bezier(.2,.75,.25,1) .46s forwards}
@keyframes cl-pool{0%{transform:scale(0,.5)}60%{transform:scale(1.25,1)}100%{transform:scale(1,.8)}}
body.cl .tab-splash i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--ink2);opacity:0;transform:rotate(var(--a)) translateY(0);animation:cl-spl .42s cubic-bezier(.2,.75,.25,1) .47s forwards}
@keyframes cl-spl{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.5)}}
@media (prefers-reduced-motion: reduce){body.cl .tab-plop,body.cl .tab-splash{display:none}}

/* ---- 11/9 TP「スムーズじゃない」：なめらかにする
   1) 上の帯のぼかし（backdrop-filter）はスクロールのたびに描き直しが重いのでやめ、ほぼ白の面にする
   2) 落ちる・垂れる動きは、区切りごとに止まって見えないよう、区切りごとに速さの付け方を分ける（ふくらむ＝だんだん遅く、落ちる＝だんだん速く）
   3) 動くものは前もって別の層に置く（will-change） */
body.cl .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
body.cl .tab-plop,body.cl .tab-splash::before,body.cl .tab-splash i,body.cl .ink-drip,body.cl .ink-blot,body.cl .top .tabs a::before{will-change:transform,opacity}
body.cl .tab-plop{animation:cl-plop2 .56s linear forwards}
@keyframes cl-plop2{
  0%{transform:translateY(0) scale(.25);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  38%{transform:translateY(3px) scale(.9,1.4);animation-timing-function:cubic-bezier(.55,0,.95,.45)}
  90%{transform:translateY(46px) scale(.8,1.3);opacity:1;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  100%{transform:translateY(48px) scale(1.7,.3);opacity:0}}
body.cl .tab-splash::before{animation-delay:.5s}
body.cl .tab-splash i{animation-delay:.5s}
body.cl .top .tabs a:hover::before{animation:cl-tabdrip2 1.05s linear .3s forwards}
@keyframes cl-tabdrip2{
  0%{opacity:1;transform:translateY(0) scale(0);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  45%{opacity:1;transform:translateY(3px) scale(.78,1.4);animation-timing-function:cubic-bezier(.55,0,.95,.45)}
  85%{opacity:1;transform:translateY(26px) scale(.85,1.15);animation-timing-function:linear}
  100%{opacity:0;transform:translateY(34px) scale(.7)}}
body.cl .ink-drip{animation:cl-drip2 1.2s linear forwards}
@keyframes cl-drip2{
  0%{transform:scaleY(0);animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  55%{transform:scaleY(1);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  100%{transform:scaleY(1.12)}}