.gf{
  --bg: #ffffff; --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --soft: #f5f5f7;
  --danger: #b3261e; --ok: #1e6b3a; --r: 14px; --r-lg: 30px; --on-ink: #ffffff; --stage: #f5f5f7;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --surface: #f5f5f7; --spring: cubic-bezier(.34, 1.56, .64, 1);
  --lift: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px -10px rgba(20, 24, 31, .22);
}
html.dark .gf{ --bg: #000; --ink: #f5f5f7; --muted: #a1a1a6; --line: #38383a; --soft: #1c1c1e; --surface: #1c1c1e; --on-ink: #000; --stage: #111113; --danger: #ff6961; --ok: #4cd964; }
.gf{ font: 400 17px/1.47 var(--font); letter-spacing: -0.01em; }
.gf h1, .gf h2, .gf h3{ letter-spacing: -0.02em; }
.gf .masthead{ position: sticky; top: calc(10px + env(safe-area-inset-top)); margin: calc(10px + env(safe-area-inset-top)) 10px 0; height: 56px; padding: 0 10px 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: var(--ink); -webkit-backdrop-filter: saturate(185%) blur(26px); backdrop-filter: saturate(185%) blur(26px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--lift); z-index: 30; }
html.dark .gf .masthead{ background: rgba(18, 18, 20, .86); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.gf .masthead .mark{ font-weight: 700; font-size: 17px; }
.gf .masthead .who{ color: var(--muted); }
.gf .masthead .who button#so{ border: 0; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 14px; }
.gf .theme-toggle, .gf .masthead .who .theme-toggle{ width: 40px; height: 40px; border: 0; background: rgba(0, 0, 0, .05); color: var(--ink); }
html.dark .gf .theme-toggle, html.dark .gf .masthead .who .theme-toggle{ background: rgba(255, 255, 255, .1); color: #f5f5f7; }
@media (min-width: 821px){
.gf .body{ grid-template-columns: 236px 1fr; }
.gf .side{ top: 80px; height: calc(100vh - 90px); }
}
.gf .side{ border: 0; padding: 14px 10px; }
.gf .side a{ border: 0; border-radius: 14px; padding: 11px 14px; margin: 2px 0; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 10px; transition: background-color .2s, transform .45s var(--spring); }
.gf .side a svg{ width: 21px; height: 21px; flex: none; }
.gf .side a:hover{ background: var(--surface); }
.gf .side a[aria-current='page']{ background: var(--ink); color: var(--bg); border: 0; }
.gf .side .sep{ margin: 10px 14px; }
.gf main.page{ padding: 26px 24px 120px; max-width: 1000px; }
.gf .sec{ border: 0; background: var(--surface); border-radius: var(--r-lg); padding: 22px 22px 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.gf .sec + .sec{ margin-top: 14px; }
.gf .sec > h2{ font-size: 20px; margin-bottom: 6px; }
.gf .sec > .lede{ font-size: 15px; }
.gf .page-h h1{ font-size: 32px; letter-spacing: -0.03em; }
.gf .page-h p{ font-size: 16px; }
.gf .banner{ border: 0; border-radius: 18px; background: var(--surface); padding: 14px 18px; }
.gf .banner.warn{ background: rgba(255, 159, 10, .14); }
.gf .banner.bad{ background: rgba(179, 38, 30, .1); }
.gf .btn{ border-radius: 999px; min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, #2c2c30, #000); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px -12px rgba(0,0,0,.5); transition: transform .2s var(--spring), box-shadow .2s; }
.gf .btn:active{ transform: scale(.97); }
.gf .btn.ghost{ background: var(--bg); color: var(--ink); border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.gf .sec .btn.ghost{ background: #fff; }
.gf .btn.danger{ background: transparent; color: var(--danger); border: 1.5px solid var(--danger); box-shadow: none; }
.gf .btn.ghost.danger{ background: transparent; }
.gf .btn.sm{ min-height: 38px; padding: 0 14px; font-size: 14px; }
html.dark .gf .btn:not(.ghost):not(.danger){ background: linear-gradient(180deg, #fff, #dcdce1); color: #000; border-color: transparent; }
html.dark .gf .btn.ghost, html.dark .gf .sec .btn.ghost{ background: #2c2c2e; color: var(--ink); border-color: rgba(255,255,255,.08); box-shadow: none; }
.gf .field label, .gf .field .lbl{ font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.gf .field input:not([type=checkbox]):not([type=radio]):not([type=color]), .gf .field select, .gf .field textarea, .gf .copy-box input, .gf .tb-bar select, .gf form .grid input:not([type=checkbox]):not([type=radio]):not([type=color]){
  min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 17px; padding: 12px 15px; }
html.dark .gf .field input:not([type=checkbox]):not([type=radio]):not([type=color]), html.dark .gf .field select, html.dark .gf .field textarea, html.dark .gf .copy-box input{ background: #111113; border-color: #3a3a3c; }
.gf .field input:focus, .gf .field select:focus, .gf .field textarea:focus{ border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); }
.gf .color-row input[type=color]{ width: 52px; height: 52px; border-radius: 14px; }
.gf .check input, .gf .chk input, .gf .tb-switch input{ accent-color: var(--ink); }
.gf .rows > li{ border-color: rgba(0, 0, 0, .06); }
.gf .rows > li:first-child{ border-top: 0; }
.gf table.t th{ border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 13px; }
.gf table.t td{ border-bottom-color: rgba(0, 0, 0, .06); }
html.dark .gf .rows > li, html.dark .gf table.t td{ border-color: rgba(255,255,255,.08); }
html.dark .gf table.t th{ border-color: rgba(255,255,255,.14); }
.gf table.t tr.clickable:hover td{ background: rgba(255, 255, 255, .6); }
.gf .state::before{ border-radius: 50%; }
.gf .figure b{ font-size: 34px; }
.gf .filters{ gap: 8px; }
.gf .filters button, .gf .filters a.btn.ghost, .gf .filters a.btn{ border-radius: 999px; border: 0; background: var(--surface); color: var(--ink); min-height: 38px; padding: 0 16px; font-size: 15px; font-weight: 600; box-shadow: none; }
.gf .filters button[aria-pressed='true'], .gf .filters a.btn:not(.ghost){ background: var(--ink); color: var(--bg); }
.gf .seg, .gf .tb-seg{ background: rgba(118, 118, 128, .14); border: 0; border-radius: 14px; padding: 3px; gap: 3px; }
.gf .seg button{ border: 0; border-radius: 11px; background: transparent; color: var(--ink); min-height: 38px; font-weight: 600; box-shadow: none; }
.gf .seg button[data-state='on'], .gf .seg button[aria-pressed='true']{ background: #fff; color: var(--ink); box-shadow: 0 3px 10px -2px rgba(0,0,0,.18); }
html.dark .gf .seg button[data-state='on'], html.dark .gf .seg button[aria-pressed='true']{ background: #636366; color: #fff; }
.gf .tb-seg span, .gf .tb-seg button{ background: transparent; border-radius: 11px; color: var(--ink); }
.gf .tb-seg input:checked + span, .gf .tb-seg button[aria-pressed='true']{ background: #fff; color: var(--ink); box-shadow: 0 3px 10px -2px rgba(0,0,0,.18); }
html.dark .gf .tb-seg input:checked + span, html.dark .gf .tb-seg button[aria-pressed='true']{ background: #636366; color: #fff; }
.gf .days-pick label{ border-radius: 999px; border: 0; background: #fff; }
html.dark .gf .days-pick label{ background: #2c2c2e; }
.gf .days-pick label:has(input:checked){ background: var(--ink); color: var(--bg); }
.gf .wiz-steps{ border: 0; gap: 6px; }
.gf .wiz-steps li{ border: 0; background: var(--surface); border-radius: 999px; padding: 8px 14px; margin: 0; }
.gf .wiz-steps li.on{ background: var(--ink); color: var(--bg); }
.gf .wiz-foot{ border-top: 0; }
.gf .tb{ border: 0; border-radius: var(--r-lg); background: var(--surface); }
.gf .tb-side{ border-right: 1px solid rgba(0,0,0,.06); }
.gf .tb-group[open] > summary{ background: rgba(255, 255, 255, .6); }
.gf .tb-bar{ background: transparent; border-bottom: 1px solid rgba(0,0,0,.06); }
.gf .tb-stage{ background: #ececf0; }
html.dark .gf .tb-stage{ background: #111113; }
.gf .toast{ border-radius: 999px; padding: 12px 20px; background: rgba(18, 18, 20, .88); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.gf dialog{ border-radius: 30px; padding: 26px; background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.gf .auth{ padding-top: 12vh; }
@media (max-width: 820px){
.gf .masthead{ margin: calc(8px + env(safe-area-inset-top)) 8px 0; }
.gf .side{ top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; padding: 6px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(185%) blur(26px); backdrop-filter: saturate(185%) blur(26px); box-shadow: var(--lift); gap: 2px; }
html.dark .gf .side{ background: rgba(18, 18, 20, .9); border-color: rgba(255, 255, 255, .08); }
.gf .side a{ flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 4px 6px; font-size: 11px; min-width: 62px; border-radius: 18px; border: 0; }
.gf .side a svg{ width: 22px; height: 22px; }
.gf .side a[aria-current='page']{ background: var(--ink); color: var(--bg); border: 0; }
.gf main.page{ padding: 18px 14px calc(110px + env(safe-area-inset-bottom)); }
.gf .sec{ padding: 18px 16px 20px; border-radius: 24px; }
.gf .page-h h1{ font-size: 28px; }
}
.gf .fx{
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .45s var(--spring), box-shadow .3s, background-color .2s, color .2s;
}
.gf .fx::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%);
  opacity: 0; transition: opacity .3s;
}
.gf .fx.dark-fx::after{ background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%); }
@media (hover: hover){
.gf .fx:hover::after{ opacity: 1; }
}
.gf .fx.is-pressed{ transform: scale(.965); }
.gf .fx.is-pressed::after{ opacity: 1; }
.gf .ripple{
  position: absolute; z-index: 3; border-radius: 50%; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; background: rgba(255, 255, 255, .55);
  animation: ripple .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.gf .ripple.on-light{ background: rgba(0, 0, 0, .12); }

@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(18); opacity: 0; } }

@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(18); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
.gf .fx.is-pressed{ transform: none; }
}
html.dark .gf .g-mark{ filter: invert(1); }
.gf .masthead .mark .g-mark{ height: 28px; width: auto; }