.ti-font-dialog { width:min(680px,calc(100% - 32px));max-height:min(820px,90dvh);padding:0;border:1px solid #ded6c8;border-radius:24px;background:#fffdf8;color:#302f2a;box-shadow:0 30px 90px #1c211c40;overflow:hidden; }
.ti-font-dialog[open] { display:flex;flex-direction:column; }
.ti-font-dialog::backdrop { background:#25271d75;backdrop-filter:blur(5px); }
.ti-font-dialog__head { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid #e7dfd1; }
.ti-font-dialog__head h2 { font:600 22px/1.3 'Noto Sans',sans-serif;margin:0; }
.ti-font-dialog__head p { margin:6px 0 0;color:#69665e;font-size:13px; }
.ti-font-dialog__close { display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid #d8d0c2;border-radius:50%;background:#fffdf8;color:inherit;cursor:pointer; }
.ti-font-dialog__list { overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.ti-font-option { display:block;text-align:left;min-width:0;padding:18px 16px;border:1px solid #ddd6ca;border-radius:16px;color:inherit;background:#fffefa;cursor:pointer; }
.ti-font-option[aria-pressed="true"] { border-color:#66734c;box-shadow:inset 0 0 0 1px #66734c;background:#f4f6ed; }
.ti-font-option__meta { display:flex;justify-content:space-between;gap:8px;font:600 14px/1.3 'Noto Sans',sans-serif; }
.ti-font-option small { display:block;margin-top:5px;color:#706b60;font:11px/1.5 'Noto Sans',sans-serif; }
.ti-font-sample { display:grid;gap:8px;margin-top:18px;overflow-wrap:anywhere;text-align:center; }
.ti-font-sample b { font:inherit;font-size:clamp(23px,5.8vw,32px);line-height:1.4; }
.ti-font-sample>span { font-size:18px;line-height:1.5; }
.ti-font-dialog :is(button):focus-visible,.invite-font-trigger:focus-visible { outline:3px solid #66734c;outline-offset:3px; }
@media(max-width:600px) {
  .ti-font-dialog { width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0; }
  .ti-font-dialog__head { padding:20px; }
  .ti-font-dialog__list { grid-template-columns:1fr;padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}