.ss-set-over { display: contents; }
.ss-set { font-family: var(--ss-font-body, var(--ob-font)); color: var(--ss-card-ink, #16171d); text-align: left; }
.ss-set button, .ss-set-nav button { font: inherit; color: inherit; cursor: pointer; }
.ss-set button:disabled, .ss-set-nav button:disabled { cursor: default; opacity: .55; }
.ss-set button:focus-visible, .ss-set a:focus-visible, .ss-set input:focus-visible,
.ss-set-nav button:focus-visible, .ss-set-nav a:focus-visible { outline: 2px solid var(--ss-ring, #5146e8); outline-offset: 2px; }
.ss-set-nav { display: flex; flex-direction: column; gap: 4px; }
.ss-set-nav h1 { margin: 0 0 18px 12px; font-family: var(--ss-font-display); font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.02em; color: var(--ss-title-ink); }
.ss-set-nav .ss-set-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-col-ink);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}
.ss-set-tab svg { flex: none; }
.ss-set-nav .ss-set-tab:hover { background: var(--ss-faded-bg); color: var(--ss-col-ink); text-decoration: none; }
.ss-set-nav .ss-set-tab[aria-current="page"] { background: var(--ss-tab-on-bg); box-shadow: var(--ss-tab-on-sh); color: var(--ss-tab-on-label); font-weight: 600; }
.ss-set-signout { margin-top: auto; }
.ss-set-main { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 40px 32px; }
.ss-set-main > [widget="page"] { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 760px; }
.ss-set-main > [widget="page"] > .ss-set-page { flex: 1 0 auto; }
.ss-set-page h2 { margin: 0 0 22px; font-family: var(--ss-font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 36px; }
.ss-set-page h3 { margin: 30px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-range-off); }
.ss-set-page p { margin: 0; }
.ss-set-muted { color: var(--ss-range-off); font-size: 14px; }
.ss-set-titlerow { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
.ss-set-titlerow h2 { flex: 1 1 auto; padding-right: 0; }
.ss-set-grow { flex: 1 1 auto; }
.ss-set-group { border-radius: 18px; padding: 4px 18px; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-row { display: flex; align-items: center; gap: 10px 14px; min-height: 58px; padding: 8px 0; flex-wrap: wrap; box-sizing: border-box; width: 100%; }
button.ss-set-row { border: 0; background: transparent; text-align: left; }
.ss-set-rowmain { flex: 1 1 180px; min-width: 0; }
.ss-set-rowmain b { display: block; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ss-set-rowmain small { display: block; margin-top: 2px; font-size: 13px; color: var(--ss-range-off); overflow-wrap: anywhere; }
.ss-set-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-set-sure { font-size: 14px; font-weight: 600; }
.ss-set-link { color: var(--ss-tab-on-label); text-decoration: none; font-weight: 600; }
.ss-set-link:hover { text-decoration: underline; }
button.ss-set-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
button.ss-set-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
.ss-set-btn { border: 0; min-height: 40px; padding: 0 18px; border-radius: 12px; font-size: 14px !important; font-weight: 600; white-space: nowrap; }
.ss-set-btn.sm { min-height: 36px; padding: 0 14px; border-radius: 11px; font-size: 13.5px !important; }
.ss-set-btn.main { background: var(--ss-btn-bg); color: var(--ss-btn-fg) !important; box-shadow: var(--ss-btn-sh); }
.ss-set-btn.soft { background: var(--ss-soft-bg); color: var(--ss-soft-fg) !important; }
.ss-set-btn.danger-solid { background: #d9343f; color: #fff !important; }
.ss-set-btn.soft:hover { filter: brightness(.97); }
.ss-set-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ss-set-chip.warn { background: var(--ss-fail-bg); color: var(--ss-fail-ink); }
.ss-set-chip.plain { background: var(--ss-soft-bg); color: var(--ss-card-ink); }
.ss-set-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ss-soft-bg); }
.ss-set-av.lg { width: 40px; height: 40px; }
.ss-set-av > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ss-set-av .badge { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ss-card-bg); background: #fff; }
.ss-set-billing .ss-set-titlerow { margin-bottom: 4px; }
.ss-set-billing .ob-planblock { text-align: left; }
.ss-set-billing .ob-planblock .ob-pagehead { margin: 0 0 18px; padding: 0; text-align: left; }
.ss-set-billing .ob-planblock .ob-h1 { font-family: var(--ss-font-display); font-size: 20px; line-height: 1.3; margin: 0; }
.ss-set-billing .ob-planblock .ob-pagehead .ob-subhead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--ss-range-off); }
.ss-set-billing .ob-planset { margin: 0; max-width: none; }
.ss-set-billing .ob-plans { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; max-width: none; }
.ss-set-billing .ob-plan { margin: 0; border-radius: 18px; }
.ss-set-billing .ob-plan:not(.lit) { box-shadow: none; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-photo { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--ss-soft-bg); }
.ss-set-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-set-photorow.over { margin: 0 -10px; padding: 8px 10px; width: calc(100% + 20px); border-radius: 14px; background: var(--ob-accent-bg); box-shadow: inset 0 0 0 2px var(--ob-accent); }
.ss-set-label { display: block; margin: 0 0 6px; font-size: 14.5px; font-weight: 600; }
.ss-set-editrow { row-gap: 8px; padding: 12px 0 14px; }
.ss-set-editrow .ss-set-label { flex: 1 1 100%; margin: 0; }
.ss-set-editrow .ss-set-hint { flex: 1 1 100%; margin-top: -4px; font-size: 13px; color: var(--ss-range-off); overflow-wrap: anywhere; }
.ss-set-editrow .ss-set-input { flex: 1 1 160px; background: var(--ss-card-bg); }
.ss-set-err { flex: 1 1 100%; font-size: 13px; font-weight: 500; color: var(--ss-fail-ink); }
.ss-set-pcard > .ss-set-err { padding-left: 54px; }
.ss-set-pcards > .ss-set-err { padding: 0 18px; }
.ss-set-under { display: block; }
.ss-set-danger .ss-set-under { margin: 12px 0 0 !important; }
.ss-set-agents > .ss-set-pnote { margin: 0 0 14px; }
.ss-set-input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ss-card-ink); box-shadow: inset 0 0 0 1px rgba(23, 25, 45, .12); transition: background .15s, box-shadow .15s; }
.ss-set-input::placeholder { color: var(--ss-range-off); font-weight: 400; }
.ss-set-input:hover { box-shadow: inset 0 0 0 1px rgba(23, 25, 45, .2); }
.ss-set-details { --ss-set-btnw: 76px; }
.ss-set-details .ss-set-row > .ss-set-btn.sm { box-sizing: border-box; min-width: var(--ss-set-btnw); }
.ss-set .ss-set-input:focus, .ss-set .ss-set-input:focus-visible { outline: none; background: var(--ss-card-bg); box-shadow: inset 0 0 0 2px var(--ss-ring); }
.ss-set-details .ss-set-group + .ss-set-group { margin-top: 16px; }
.ss-set-value { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-set-promise { display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; margin: 2px 0 16px; padding: 14px 16px; border: 1.5px dotted color-mix(in srgb, var(--ss-range-off) 55%, transparent); border-radius: 12px; }
.ss-set-promise > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ss-tab-on-label); }
.ss-set-promise b { display: block; font-size: 13.5px; font-weight: 600; }
.ss-set-promise small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ss-range-off); }
.ss-set-promise a { color: var(--ss-tab-on-label); font-weight: 600; text-decoration: none; }
.ss-set-promise a:hover { text-decoration: underline; }
.ss-set-details { display: flex; flex-direction: column; }
.ss-set-foot { margin-top: auto; padding-top: 40px; }
.ss-set-deleteway { justify-content: flex-end; }
.ss-set-btn.faint { background: transparent; color: var(--ss-range-off) !important; opacity: .28; transition: opacity .15s, background .15s, color .15s; }
.ss-set-btn.faint:hover, .ss-set-btn.faint:focus-visible { opacity: 1; background: var(--ss-fail-bg); color: var(--ss-fail-ink) !important; }
.ss-set-danger { border-radius: 18px; padding: 18px 20px; background: var(--ss-fail-bg); color: var(--ss-fail-text); }
.ss-set-danger ul { margin: 0 0 14px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.ss-set-security .ob-passkeys,
.ss-set-security .ob-devices,
.ss-set-security .ob-history { margin: 0; padding: 4px 18px; border: 0; border-radius: 18px; box-shadow: none; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-security .ob-psect.ob-history { padding: 16px 18px 12px; }
.ss-set-security .ob-history .ob-hday { margin: 20px 0 4px; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ss-range-off); }
.ss-set-security .ob-history .ob-hrow .act { font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
    .ss-set-security .ob-history .ob-hrow { grid-template-columns: 22px auto minmax(0, 1fr) 44px; }
    .ss-set-security .ob-history .ob-hrow .dev { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.ss-set-security .ob-passkeys .row,
.ss-set-security .ob-devices .row { min-height: 54px; border: 0; flex-wrap: wrap; }
.ss-set-security .row .ss-set-acts { margin-left: auto; }
.ss-set-security .ss-set-under { margin: -6px 0 12px 50px; }
.ss-set-security .row.add.busy { opacity: .6; cursor: default; }
.ss-set-titlerow:has(> .ss-set-count) h2 { flex: none; }
.ss-set-titlerow .ss-set-count { margin-top: 3px; min-height: 26px; padding: 0 10px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); color: var(--ss-range-off); }
.ss-set-titlerow .ss-set-count.over { box-shadow: inset 0 0 0 1.5px var(--ss-fail-ink); }
.ss-set-agents .ss-set-rowmain code { font-size: 12.5px; font-family: var(--ob-mono); }
.ss-set-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: var(--ss-card-bg); color: var(--ss-range-off); }
.ss-set-tile svg { width: 19px; height: 19px; }
.ss-set-tile img { width: 24px; height: 24px; object-fit: contain; display: block; }
.ss-set-tile.plus { background: var(--ss-soft-bg); color: var(--ss-tab-on-label); }
.ss-set-tile.plus svg { transition: transform .15s ease; }
.ss-set-padd.open .ss-set-tile.plus svg { transform: rotate(45deg); }
.ss-set-connopen { border-radius: 18px; padding: 14px; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-pcards { display: flex; flex-direction: column; gap: 10px; }
.ss-set-pcard { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; box-sizing: border-box; width: 100%; min-height: 72px; padding: 14px 18px; border-radius: 18px; background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-pcard .ss-set-acts { margin-left: auto; }
button.ss-set-pcard { border: 0; text-align: left; }
.ss-set-padd { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ss-chip-track); transition: background .15s; }
.ss-set-padd:hover { background: color-mix(in srgb, var(--ss-soft-bg) 55%, var(--ss-card-bg)); }
.ss-set-pnote { margin: 4px 2px 0; font-size: 14px; color: var(--ss-tab-off-label); }
.ss-set-av.plus { display: flex; align-items: center; justify-content: center; color: var(--ss-tab-on-label); }
.ss-set-profiles { --ss-set-no: #8a8fa0; --ss-set-no-ink: #5c6070; --ss-set-auto: #b0358c; --ss-set-auto-ink: #8c2670; }
.ss-set-profiles .ss-set-pcards { container-type: inline-size; }
.ss-set-gr { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; }
.ss-set-grwho { font-size: 12.5px; font-weight: 600; color: var(--ss-range-off); white-space: nowrap; }
.ss-set-grpill { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: 11px; background: var(--ss-soft-bg); font-size: 13.5px !important; font-weight: 600; white-space: nowrap; }
.ss-set-grpill:hover { filter: brightness(.97); }
.ss-set-grpill svg { flex: none; color: var(--ss-col-ink2); transition: transform .15s; }
.ss-set-grpill[aria-expanded="true"] svg { transform: rotate(180deg); }
.ss-set-gr .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-set-no); }
.ss-set-gr [data-mode="ask"] .dot { background: var(--ss-dot); }
.ss-set-gr [data-mode="auto"] .dot { background: var(--ss-set-auto); }
.ss-set .ss-set-gr [data-mode="no"] .w, .ss-set-gr [data-mode="no"] b { color: var(--ss-set-no-ink); }
.ss-set .ss-set-gr [data-mode="ask"] .w, .ss-set-gr [data-mode="ask"] b { color: var(--ss-tab-on-label); }
.ss-set .ss-set-gr [data-mode="auto"] .w, .ss-set-gr [data-mode="auto"] b { color: var(--ss-set-auto-ink); }
.ss-set-grmenu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: 320px; max-width: calc(100vw - 48px); box-sizing: border-box; padding: 6px; border-radius: 16px; background: var(--ss-card-bg); box-shadow: 0 2px 6px rgba(23, 25, 45, .06), 0 18px 44px rgba(40, 30, 120, .2); animation: ss-set-fade .12s ease-out; }
.ss-set-gropt { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; text-align: left; }
.ss-set-gropt:hover, .ss-set-gropt:focus-visible { background: var(--ss-soft-bg); }
.ss-set-gropt .dot { margin-top: 6px; }
.ss-set-gropt .t { flex: 1 1 auto; min-width: 0; }
.ss-set-gropt b { display: block; font-size: 14px; font-weight: 600; }
.ss-set-gropt small { display: block; margin-top: 2px; font-size: 13px; color: var(--ss-range-off); }
.ss-set-gropt svg { flex: none; margin-top: 1px; color: var(--ss-dot); }
@media (prefers-reduced-motion: reduce) { .ss-set-grpill svg, .ss-set-grmenu { transition: none; animation: none; } }
@container (max-width: 640px) {
    .ss-set-profiles .ss-set-pcard .ss-set-acts { flex: 1 1 100%; margin-left: 0; padding-left: 54px; }
    .ss-set-grmenu { left: 0; right: auto; width: 320px; max-width: calc(100cqw - 54px); }
}
@media (max-width: 1399px) {
    .ss-set-main { padding: 24px 28px 32px; }
}
@media (max-width: 1199px) {
    .ss-set-main { padding: 22px 22px 32px; }
}
@media (max-width: 860px) {
    .ss-col.ss-set-nav { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 8px 12px; scrollbar-width: none; }
    .ss-set-nav::-webkit-scrollbar { display: none; }
    .ss-set-nav h1 { display: none; }
    .ss-set-nav .ss-set-tab { flex: none; min-height: 40px; }
    .ss-set-signout { margin: 0 0 0 16px; }
    .ss-set-main { min-height: 0; padding: 22px 20px 48px; }
    .ss-set-input { font-size: 16px; }
}
@media (max-width: 600px) {
    .ss-set-nav .ss-set-tab { justify-content: center; min-width: 42px; gap: 0; padding: 0 10px; }
    .ss-set-tab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ss-set-signout { margin-left: 12px; }
    .ss-set-editrow .ss-set-input { flex-basis: 100px; }
    .ss-set-rowmain { flex-basis: 110px; }
    .ss-set-agents .ss-set-rowmain { flex-basis: 150px; }
    .ss-set-main { padding: 20px 16px 48px; }
    .ss-set-pcard { padding: 12px 14px; }
}
.ss-pop-col { padding-bottom: 60px; }
.ss-pop-opens { margin: 0 14px 14px; }
.ss-pop-opens .row { display: flex; align-items: baseline; font-size: 13px; color: var(--ss-col-ink2); }
.ss-pop-opens .row .grow { flex: 1; }
.ss-pop-opens .row b { font-weight: 600; color: var(--ss-ink); }
.ss-pop-opens .row b.full { color: var(--ss-tab-on-label); }
.ss-pop-opens .bar { margin-top: 7px; height: 4px; border-radius: 2px; background: rgba(81,70,232,.14); overflow: hidden; }
.ss-pop-opens .bar i { display: block; height: 100%; border-radius: 2px; background: var(--ss-dot); }
.ss-pop-who { display: flex; align-items: center; gap: 10px; margin: 0 14px 10px; font-size: 13px; font-weight: 600; color: var(--ss-tab-on-label); }
.ss-pop-who .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pop-list { display: flex; flex-direction: column; gap: 2px; }
.ss-pop-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--ss-ink); text-decoration: none; transition: background .15s; }
.ss-pop-row:hover { background: rgba(255,255,255,.55); color: var(--ss-ink); text-decoration: none; }
.ss-pop-row.current { background: var(--ss-card-bg); box-shadow: var(--ss-tab-on-sh); }
.ss-pop-row.opened:not(.current) { opacity: .55; }
.ss-pop-row .b { flex: 1; min-width: 0; display: block; }
.ss-pop-row .top { display: flex; align-items: center; gap: 8px; }
.ss-pop-row .n { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pop-row.current .n { color: var(--ss-tab-on-label); }
.ss-pop-row .t { flex: none; font-size: 12.5px; font-weight: 600; color: #6f7487; }
.ss-pop-row .w { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #4a4e5e; overflow-wrap: anywhere; }
.ss-pop-row .mk { flex: none; display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.ss-pop-empty, .ss-pop-loading { margin: 10px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ss-col-ink2); }
.ss-pop-sentinel { height: 1px; }
.ss-pop-face { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #e3e4ee; color: #5c6070; font-size: 14px; font-weight: 700; }
.ss-pop-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-pop-face.xs { width: 20px; height: 20px; font-size: 10px; }
.ss-pop-face.md { width: 40px; height: 40px; font-size: 16px; }
.ss-pop-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.ss-pop-mark svg { width: 13px; height: 13px; }
.ss-pop-mark.agent { background: var(--ss-wait-bg); color: var(--ss-dot); }
.ss-pop-mark.waiting { background: var(--ss-dot); color: #ffffff; }
.ss-pop-mark.gone { background: var(--ss-sent-bg); color: var(--ss-sent-ink); }
.ss-pop-main { padding-top: 26px; }
.ss-pop-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.ss-pop-view { flex: 1 1 420px; min-width: 0; max-width: 720px; }
.ss-pop-side { flex: 0 0 276px; margin-left: auto; }
.ss-pop-h1 { margin: 4px 0 0 14px; font-family: var(--ss-font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.ss-pop-lede { margin: 8px 0 0 14px; max-width: 540px; font-size: 15px; line-height: 1.5; color: #4a4e5e; }
.ss-pop-quiet { margin: 18px 14px; font-size: 14.5px; line-height: 1.5; color: #6f7487; }
.ss-pop-note { margin: 4px 0; padding: 16px 18px; border-radius: 16px; background: var(--ss-soft-bg); font-size: 15px; line-height: 1.5; }
.ss-pop-sec { margin-top: 26px; }
.ss-pop-sec h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px 14px; font-size: 13.5px; font-weight: 600; color: #6f7487; }
.ss-pop-sec h2 .c { font-weight: 500; color: #9a9eb0; }
.ss-pop-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--ss-ink); text-decoration: none; transition: background .15s; }
.ss-pop-item:hover { background: #f1f1f8; color: var(--ss-ink); text-decoration: none; }
.ss-pop-item .m { flex: none; margin-top: 1px; }
.ss-pop-item .b { flex: 1; min-width: 0; display: block; }
.ss-pop-item .mine { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.45; }
.ss-pop-item .mine.idea { font-style: italic; }
.ss-pop-item .theirs { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: #6f7487; }
.ss-pop-item .theirs .tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pop-item .theirs b { font-weight: 600; color: #4a4e5e; }
.ss-pop-item .t { flex: none; font-size: 12.5px; font-weight: 600; color: #6f7487; }
.ss-pop-about { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 12px; font-size: 14px; color: #6f7487; }
.ss-pop-about .grow { flex: 1; min-width: 0; }
.ss-pop .ss-pop-fav { display: inline-flex; align-items: center; gap: 8px; border: 0; min-height: 40px; padding: 0 12px; border-radius: 12px; background: transparent; color: #5c6070; font-size: 14px; font-weight: 600; }
.ss-pop .ss-pop-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ss-pop .ss-pop-fav.on { color: var(--ss-tab-on-label); }
.ss-pop .ss-pop-fav.on svg { fill: var(--ss-dot); stroke: var(--ss-dot); }
.ss-pop .ss-pop-fav:hover { background: #eeeef5; }
.ss-pop-post { display: flex; gap: 12px; box-sizing: border-box; padding: 18px 18px 10px 20px; border-radius: 22px; background: var(--ss-card-bg); box-shadow: var(--ss-card-sh); }
.ss-pop-post > .b { flex: 1; min-width: 0; }
.ss-pop-post .who { font-size: 15px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pop-post .who b { font-weight: 600; }
.ss-pop-post .who span { color: #6f7487; }
.ss-pop-post .words { margin: 3px 0 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ss-pop-post .words a { color: var(--ss-tab-on-label); text-decoration: none; }
.ss-pop-post .words a:hover { text-decoration: underline; }
.ss-pop-post .words.gone, .ss-pop-quoted .words.gone { color: #6f7487; font-style: italic; }
.ss-pop-post .pics { display: grid; gap: 4px; margin-top: 12px; border-radius: 16px; overflow: hidden; }
.ss-pop-post .pics.n2, .ss-pop-post .pics.n3, .ss-pop-post .pics.n4 { grid-template-columns: 1fr 1fr; }
.ss-pop-post .pic { position: relative; display: block; background: var(--ss-soft-bg); }
.ss-pop-post .pic img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.ss-pop-post .pics.n2 .pic img, .ss-pop-post .pics.n3 .pic img, .ss-pop-post .pics.n4 .pic img { aspect-ratio: 4 / 3; max-height: none; }
.ss-pop-post .pic .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ss-pop-post .pic .play svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(22,23,29,.6); fill: #ffffff; box-sizing: border-box; }
.ss-pop-quoted { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #e3e4ee; background: #fbfbfd; }
.ss-pop-quoted .who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ss-pop-quoted .who .t { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #6f7487; }
.ss-pop-quoted .who > b, .ss-pop-quoted .who > span:not([class]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-pop-quoted .who .t, .ss-pop-quoted .who .ss-pop-face { flex: none; }
.ss-pop-quoted .words { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ss-pop-quoted .words a { color: var(--ss-tab-on-label); text-decoration: none; }
.ss-pop-quoted.unread { display: block; padding: 10px 14px; border-style: dashed; border-color: #d6d8e4; background: transparent; color: #6f7487; text-decoration: none; transition: background .15s; }
a.ss-pop-quoted.unread:hover { background: #f6f6fa; color: #4a4e5e; text-decoration: none; }
.ss-pop-quoted.unread .what { font-weight: 600; }
.ss-pop-quoted.unread .t { display: inline-flex; }
.ss-pop-quoted.unread .t svg { width: 15px; height: 15px; }
.ss-pop-face.blank { background: #eceef4; }
.ss-pop-face.blank svg { width: 100%; height: 100%; fill: #c9ccd8; }
.ss-pop-post .foot { display: flex; align-items: center; gap: 2px; margin-top: 18px; }
.ss-pop-post .foot .t { font-size: 13.5px; font-weight: 600; color: #6f7487; }
.ss-pop-post .foot .grow { flex: 1; }
.ss-pop .ss-pop-flag { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 10px; background: transparent; color: #8b8fa3; }
.ss-pop-flag svg { width: 14px; height: 14px; }
.ss-pop .ss-pop-flag:hover { background: #eeeef5; color: var(--ss-ink); }
.ss-pop-out { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border-radius: 10px; color: #5c6070; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ss-pop-out svg { width: 15px; height: 15px; }
.ss-pop-out:hover { background: #eeeef5; color: var(--ss-ink); text-decoration: none; }
.ss-pop-under { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ss-pop-card { box-sizing: border-box; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed #c4bff0; color: #2b2670; }
.ss-pop-card.gone, .ss-pop-card.reply, .ss-pop-card.quote { border: 2px dotted #6cc08f; background: #f0f9f3; color: #1d3a2b; }
.ss-pop-card.undone { opacity: .55; }
.ss-pop-card .h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.ss-pop-card .h .grow { flex: 1; }
.ss-pop-card .h .s { font-weight: 500; color: #5c6070; }
.ss-pop-card p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ss-pop-card p.idea { font-style: italic; }
.ss-pop-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #ffffff; }
.ss-pop-reply p { margin: 0 0 8px; font-style: normal; }
.ss-pop-write { --ob-ground: var(--ob-card); --ob-badge-ring: var(--ob-card); position: relative; box-sizing: border-box; background: var(--ob-card); border: var(--ob-frame-line) solid var(--ob-accent-ring); border-radius: var(--ob-radius-row); transition: background .12s, border-color .12s, box-shadow .12s; }
.ss-pop-write.over { background: var(--ob-accent-bg); border-color: var(--ob-accent); box-shadow: 0 0 0 6px var(--ob-accent-halo-1); }
.ss-pop-write > .slot { display: flex; flex-direction: column; }
.ss-pop-write .ob-compose { padding: 18px 18px 12px 16px; }
.ss-pop-write .ob-compose .ob-srow .body { padding-right: 0; }
.ss-pop-write .ob-compose .ob-srow .text { font-size: 16px; }
.ss-pop-write .ob-compose .bar .go { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ss-pop-write .ob-compose .bar .ob-pill { padding: 0 14px; }
.ss-pop-write .ob-compose .bar .ob-pill.primary { padding: 0 17px; }
@media (max-width: 699px) {
    .ss-pop-write .ob-compose .bar .go { flex: 1 1 100%; }
    .ss-pop-write .ob-compose .bar .go .ob-pill { flex: 1 1 auto; }
}
.ss-pop-said { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ss-fail-ink); }
.ss-pop-card .ss-pop-undo { margin: 6px 0 -4px -12px; }
.ss-pop .ob-pill.text.sm { padding: 0 10px; }
.ss-pop-faces-head { display: flex; align-items: center; min-height: 22px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #6f7487; }
.ss-pop-faces-head .grow { flex: 1; }
.ss-pop-grid { display: grid; grid-template-columns: repeat(5, 44px); justify-content: space-between; gap: 16px 0; margin-bottom: 26px; }
.ss-pop .ss-pop-fb { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #e3e4ee; color: #5c6070; font-size: 16px; font-weight: 700; transition: opacity .15s; }
.ss-pop-fb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-pop-fb.on { overflow: visible; box-shadow: 0 0 0 2.5px var(--ss-page), 0 0 0 5px var(--ss-dot); }
.ss-pop-fb.on img { border-radius: 50%; }
.ss-pop-fb.dim { opacity: .4; }
.ss-pop-safe { box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: #f1f0ff; color: #2b2670; font-size: 13.5px; line-height: 1.5; }
.ss-pop-safe .h { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ss-tab-on-label); }
.ss-pop-safe .h svg { width: 16px; height: 16px; }
.ss-pop-safe p { margin: 6px 0 0; }
.popup .modal.ss-pop-modal { position: relative; max-width: none; width: min(480px, calc(100vw - 32px)); box-sizing: border-box; padding: 26px 24px 20px; border-radius: 22px; font-family: var(--ss-font-body); color: var(--ss-ink); }
.popup .modal.ss-pop-modal.wide { width: min(640px, calc(100vw - 32px)); padding: 26px 26px 22px; }
.ss-pop-modal .modal-close { position: absolute; top: 16px; right: 16px; }
.ss-pop-mh { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.ss-pop-mh .tick { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ss-sent-bg); color: var(--ss-sent-ink); }
.ss-pop-mh .tick svg { width: 20px; height: 20px; }
.ss-pop-mh h2, .ss-pop-mt { margin: 0; padding-right: 40px; font-family: var(--ss-font-display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.ss-pop-mp { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #4a4e5e; }
.ss-pop-mfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ss-pop-mfoot .grow { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.45; color: #6f7487; }
.ss-pop-mfoot .grow:empty { min-width: 0; }
.ss-pop-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ss-pop-choices { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; border: 0; }
.ss-pop-choices label { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #e3e4ee; background: #ffffff; cursor: pointer; }
.ss-pop-choices label.on { border-color: #a59bff; background: #f6f5ff; }
.ss-pop-choices label:has(input:focus-visible) { outline: 2px solid var(--ss-ring); outline-offset: 2px; }
.ss-pop-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-pop-choices .dot { flex: none; width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box; border-radius: 50%; border: 2px solid #c4c7d4; background: #ffffff; }
.ss-pop-choices label.on .dot { border: 6px solid var(--ss-dot); }
.ss-pop-choices b { display: block; font-size: 15px; font-weight: 600; }
.ss-pop-choices span span, .ss-pop-choices label > span:last-child { font-size: 13.5px; line-height: 1.4; color: #6f7487; }
.ss-pop-choices label > span:last-child b { color: var(--ss-ink); }
.ss-pop-notel { display: block; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: #4a4e5e; }
.ss-pop-notel span { font-weight: 500; color: #8b8fa3; }
.ss-pop-notet { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #e3e4ee; border-radius: 14px; resize: none; font: inherit; font-size: 15px; line-height: 1.5; }
.ss-pop-notet:focus { outline: none; border-color: #a59bff; }
.popup .modal.ss-pop-modal.pro { padding: 0; overflow: hidden; width: min(460px, calc(100vw - 32px)); }
.ss-pop-modal.pro .top { position: relative; padding: 26px 24px; background: radial-gradient(120% 90% at 92% 8%, rgba(255,255,255,.22), transparent 55%), linear-gradient(160deg, #6359f0, #5146e8 45%, #3d33c4); color: #ffffff; }
.ss-pop-modal.pro .top .modal-close { background: rgba(255,255,255,.18); color: #ffffff; }
.ss-pop-modal.pro h2 { margin: 0; padding-right: 40px; font-family: var(--ss-font-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.ss-pop-modal.pro .top p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.ss-pop-modal.pro .bottom { padding: 22px 24px 24px; }
.ss-pop-modal.pro .price { display: flex; align-items: baseline; gap: 8px; }
.ss-pop-modal.pro .price b { font-family: var(--ss-font-display); font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.ss-pop-modal.pro .price span { font-size: 14px; font-weight: 600; color: #6f7487; }
.ss-pop-modal.pro ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-pop-modal.pro li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: #2a2c35; }
.ss-pop-modal.pro li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ss-wait-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235146e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ss-pop-modal.pro .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.popup .modal.ss-pop-modal.walk { width: min(460px, calc(100vw - 32px)); }
.ss-pop-modal.walk .ss-pop-mh h2 { padding-right: 0; font-size: 22px; }
.ss-pop-walk { position: relative; width: 100%; height: 266px; margin: 20px 0 0; border-radius: 16px; background: var(--ss-soft-bg); overflow: hidden; }
.ss-pop-walk .ss-pop-stage { position: absolute; top: 8px; left: 50%; margin-left: -132px; background: none; transform: scale(1.14); transform-origin: 50% 0; }
.ss-pop-steps { position: relative; height: 22px; margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 22px; color: #4a4e5e; }
.ss-pop-steps span { position: absolute; inset: 0; }
.ss-pop-steps b { font-weight: 600; color: var(--ss-ink); }
.walk-reply { animation: walk-reply 14s infinite; }
.walk-quote { animation: walk-quote 14s infinite; }
@keyframes walk-reply { 0%, 48% { opacity: 1; } 50%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes walk-quote { 0%, 48% { opacity: 0; } 50%, 98% { opacity: 1; } 100% { opacity: 0; } }
.ss-pop-stage { position: relative; width: 264px; max-width: 100%; height: 228px; margin: 0 auto; border-radius: 16px; background: var(--ss-soft-bg); overflow: hidden; }
.ss-pop-stage i, .ss-pop-stage b, .ss-pop-stage span, .ss-pop-stage .box, .ss-pop-stage .menu { position: absolute; display: block; }
.ss-pop-stage .card { position: absolute; left: 14px; top: 14px; width: 236px; height: 96px; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 3px rgba(23,25,45,.08); }
.ss-pop-stage .card .av { left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: #c9c4f3; }
.ss-pop-stage .card .b1 { left: 48px; top: 14px; width: 66px; height: 8px; border-radius: 4px; background: #2a2c35; }
.ss-pop-stage .card .b2 { left: 120px; top: 14px; width: 46px; height: 8px; border-radius: 4px; background: #c9ccd8; }
.ss-pop-stage .card .l1 { left: 48px; top: 30px; width: 170px; height: 6px; border-radius: 3px; background: #d9dbe6; }
.ss-pop-stage .card .l2 { left: 48px; top: 42px; width: 150px; height: 6px; border-radius: 3px; background: #d9dbe6; }
.ss-pop-stage .card .l3 { left: 48px; top: 54px; width: 108px; height: 6px; border-radius: 3px; background: #d9dbe6; }
.ss-pop-stage .card .acts { left: 48px; top: 72px; display: flex; gap: 32px; }
.ss-pop-stage .card .acts svg { width: 16px; height: 16px; fill: none; stroke: #8b8fa3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-pop-stage .box { left: 14px; top: 120px; width: 236px; height: 92px; box-sizing: border-box; border-radius: 12px; background: #ffffff; border: 1.5px solid #d9dbe6; }
.ss-pop-stage .box.q { height: 98px; }
.ss-pop-stage .box .me { left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #8b7fff, #5146e8); }
.ss-pop-stage .box .ph { left: 38px; top: 13px; font-size: 11px; line-height: 14px; font-weight: 500; color: #9aa0b5; white-space: nowrap; }
.ss-pop-stage .box .tx { left: 38px; top: 14px; width: 180px; height: 20px; }
.ss-pop-stage .box .tx .x1 { left: 0; top: 0; width: 170px; height: 6px; border-radius: 3px; background: #9aa0b5; }
.ss-pop-stage .box .tx .x2 { left: 0; top: 12px; width: 128px; height: 6px; border-radius: 3px; background: #9aa0b5; }
.ss-pop-stage .box .qt { left: 38px; top: 40px; width: 128px; height: 30px; box-sizing: border-box; border-radius: 8px; border: 1px solid #e3e4ee; }
.ss-pop-stage .box .press { left: 176px; top: 60px; width: 50px; height: 22px; border-radius: 11px; background: #2a2c35; color: #ffffff; font-size: 10.5px; font-weight: 700; line-height: 22px; text-align: center; }
.ss-pop-stage .box.q .press { top: 66px; }
.ss-pop-stage .box .ok { right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #2e9e62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ss-pop-stage .menu { left: 104px; top: 100px; width: 104px; box-sizing: border-box; padding: 6px; border-radius: 10px; background: #ffffff; box-shadow: 0 6px 18px rgba(23,25,45,.18); font-size: 11.5px; font-weight: 600; color: #2a2c35; }
.ss-pop-stage .menu span { position: static; height: 24px; padding: 0 6px; line-height: 24px; border-radius: 6px; }
.ss-pop-stage .chip { left: 92px; top: 150px; height: 22px; padding: 0 8px; border-radius: 6px; background: #2a2c35; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 22px; letter-spacing: .02em; }
.ss-pop-stage .cur { left: 0; top: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.6L10 19z' fill='%2316171d' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tl-rcur { animation: tl-rcur 7s ease-in-out infinite; }
.tl-qcur { animation: tl-qcur 7s ease-in-out infinite; }
.tl-rbox { animation: tl-rbox 7s infinite; }
.tl-qbox { animation: tl-qbox 7s infinite; }
.tl-menu { animation: tl-menu 7s infinite; }
.tl-pick { animation: tl-pick 7s infinite; }
.tl-ph { animation: tl-ph 7s infinite; }
.tl-text { animation: tl-text 7s infinite; }
.tl-chip { animation: tl-chip 7s infinite; }
.tl-press { animation: tl-press 7s infinite; }
.tl-tick { animation: tl-tick 7s infinite; }
@keyframes tl-rcur { 0% { transform: translate(206px,200px); } 16% { transform: translate(80px,132px); } 19% { transform: translate(80px,132px) scale(.8); } 22% { transform: translate(80px,132px); } 36% { transform: translate(124px,166px); } 56% { transform: translate(124px,166px); } 66% { transform: translate(211px,189px); } 69% { transform: translate(211px,189px) scale(.8); } 72%, 100% { transform: translate(211px,189px); } }
@keyframes tl-qcur { 0% { transform: translate(206px,200px); } 14% { transform: translate(114px,92px); } 17% { transform: translate(114px,92px) scale(.8); } 20% { transform: translate(114px,92px); } 30% { transform: translate(136px,140px); } 33% { transform: translate(136px,140px) scale(.8); } 36% { transform: translate(136px,140px); } 46% { transform: translate(124px,176px); } 56% { transform: translate(124px,176px); } 66% { transform: translate(211px,195px); } 69% { transform: translate(211px,195px) scale(.8); } 72%, 100% { transform: translate(211px,195px); } }
@keyframes tl-rbox { 0%, 20% { border-color: #d9dbe6; } 23%, 94% { border-color: #8b7fff; } 100% { border-color: #d9dbe6; } }
@keyframes tl-qbox { 0%, 34% { opacity: 0; transform: translateY(6px); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tl-menu { 0%, 18% { opacity: 0; transform: scale(.96); } 22%, 34% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; } }
@keyframes tl-pick { 0%, 31% { background: transparent; } 32%, 36% { background: #ebe9ff; } 37%, 100% { background: transparent; } }
@keyframes tl-ph { 0%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tl-text { 0%, 49% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes tl-chip { 0%, 44% { opacity: 0; transform: translateY(4px); } 47%, 55% { opacity: 1; transform: none; } 59%, 100% { opacity: 0; } }
@keyframes tl-press { 0%, 68% { transform: none; } 70% { transform: scale(.9); } 73%, 100% { transform: none; } }
@keyframes tl-tick { 0%, 72% { opacity: 0; transform: scale(.6); } 76%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .tl-rcur, .tl-qcur, .tl-rbox, .tl-qbox, .tl-menu, .tl-pick, .tl-ph, .tl-text, .tl-chip, .tl-press, .tl-tick { animation: none; }
    .tl-rcur, .tl-qcur, .tl-menu, .tl-ph, .tl-chip { opacity: 0; }
    .walk-reply, .walk-quote { animation: none; opacity: 1; }
    .ss-pop-walk .walk-quote { display: none; }
    .ss-pop-steps { height: auto; }
    .ss-pop-steps span { position: static; display: block; }
}
@media (max-width: 860px) {
    .ss-pop .ss-pop-col { position: static; height: auto; max-height: 60vh; }
    .ss-pop-main { padding: 18px 16px 40px; }
    .ss-pop-wrap { gap: 28px; }
    .ss-pop-side { flex: 1 1 100%; }
}
.ob-atomsheet {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 28px 80px;
    font-family: var(--ob-font);
    color: var(--ob-ink);
    background: var(--ob-canvas);
    .ob-sheet-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
    .ob-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ob-ink); }
    .ob-sheet-sec { margin-bottom: 34px; }
    .ob-sheet-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .glyphs { display: flex; flex-wrap: wrap; gap: 8px; }
    .glyphs .one { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 12px; background: var(--ob-card); border: 1px solid var(--ob-line); }
    .glyphs .pair { display: flex; align-items: center; gap: 7px; }
    .glyphs .nm { font-size: 10px; line-height: 1.3; color: var(--ob-muted); text-align: center; }
    .glyphs .mk { display: inline-flex; align-items: center; justify-content: center; background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .glyphs .mk.md { width: 32px; height: 32px; border-radius: 10px; }
    .glyphs .mk.xs { width: 18px; height: 18px; border-radius: 6px; }
    .glyphs .mk > svg { width: 56%; height: 56%; }
    .ob-sheet-row > .ob-circle { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
    .sw { width: 84px; height: 56px; border-radius: 12px; display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11px; font-weight: 700; }
}
body:not(.ob-app) .ob-atomsheet { min-height: 100vh; }
.card {
    position: relative;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: var(--button-height-md);
    padding: 0 var(--spacing-6);
    border: none;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-bounce);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}
.btn:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}
.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--accent-primary);
    outline-offset: var(--focus-ring-offset);
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-xs {
    height: var(--button-height-xs);
    padding: 0 var(--spacing-3);
    font-size: var(--font-xs);
}
.btn-sm {
    height: var(--button-height-sm);
    padding: 0 var(--spacing-4);
    font-size: var(--font-sm);
}
.btn-primary {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
    background: var(--action-primary-bg-hover);
}
.btn-primary:active:not(:disabled) {
    background: var(--action-primary-bg-active);
    box-shadow: var(--shadow-xs);
}
.btn-secondary {
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    border: none;
    box-shadow: 0 0 28px var(--action-secondary-glow) inset;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--action-secondary-bg-hover);
}
.btn-secondary:active:not(:disabled) {
    background: var(--action-secondary-bg-active);
}
 .brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    position: relative;
    z-index: 1;
}
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    pointer-events: none;
}
.site-footer a {
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    padding: var(--spacing-1) var(--spacing-1);
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default);
}
.site-footer a:hover {
    opacity: 1;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-footer a:focus-visible {
    opacity: 1;
    outline: var(--focus-ring-width) solid var(--accent-500);
    outline-offset: 2px;
}
.site-footer span {
    opacity: 0.5;
}
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'Fira Code', JetBrains Mono, Consolas, monospace;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);
    --font-4xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    --font-regular: 400;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --neutral-0: #ffffff;
    --neutral-200: #ebe7e0;
    --neutral-300: #ddd7cd;
    --neutral-400: #b5ada1;
    --neutral-600: #635d56;
    --neutral-700: #4a453f;
    --neutral-900: #1f1c19;
    --delight-50: #fff5f0;
    --delight-600: #e85a2a;
    --info-100: #e0f2fe;
    --info-500: #0ea5e9;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --radius-sm: 0.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    --shadow-xs: 0 0 3px 0 rgb(31 28 25 / 0.04);
    --shadow-sm: 0 0 8px -2px rgb(31 28 25 / 0.08);
    --shadow-md: 0 0 20px -4px rgb(31 28 25 / 0.1);
    --shadow-lg: 0 0 25px -5px rgb(31 28 25 / 0.11);
    --duration-fast: 150ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;
    --accent-50: #f5f3f9;
    --accent-100: #ebe5f3;
    --accent-200: #d4c8e6;
    --accent-300: #b8a4d4;
    --accent-400: #9a7ec0;
    --accent-500: #7c5dac;
    --accent-600: #6b4d9a;
    --accent-700: #5a4082;
    --accent-800: #4a3469;
    --bg-surface: var(--neutral-0);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-400);
    --text-link: var(--accent-600);
    --text-link-hover: var(--accent-700);
    --accent-primary: var(--accent-600);
    --accent-hover: var(--accent-700);
    --accent-active: var(--accent-800);
    --accent-contrast: var(--neutral-0);
    --action-primary-bg: var(--accent-primary);
    --action-primary-bg-hover: var(--accent-hover);
    --action-primary-bg-active: var(--accent-active);
    --action-primary-text: var(--accent-contrast);
    --action-secondary-bg: #e7e6ea;
    --action-secondary-bg-hover: #d8d6de;
    --action-secondary-bg-active: #cbc8d3;
    --action-secondary-glow: #d8d5e4;
    --action-secondary-text: var(--neutral-700);
    --button-height-xs: 1.75rem;
    --button-height-sm: 2.25rem;
    --button-height-md: 2.75rem;
    --canvas-bg: #f7f7f7;
    --table-header-border: rgba(90, 90, 180, 0.10);
    --interactive-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--canvas-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse 120% 60% at 20% 95%,
            rgba(230, 210, 235, 0.45) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 100% 50% at 80% 95%,
            rgba(255, 220, 210, 0.40) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 80% 40% at 50% 95%,
            rgba(255, 200, 220, 0.35) 0%,
            transparent 50%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(250, 245, 250, 0.4) 70%,
            rgba(245, 240, 248, 0.6) 100%
        );
}
#Main {
    margin-top: 4rem;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
html {
    overflow-y: scroll;
    scrollbar-color: var(--neutral-300) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}
h1 {
    font-size: var(--font-4xl);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tighter);
}
h2 {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
}
h3 {
    font-size: var(--font-2xl);
}
h4 {
    font-size: var(--font-xl);
}
h5 {
    font-size: var(--font-lg);
}
h6 {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}
p {
    margin: 0;
}
a {
    color: var(--text-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-default);
}
a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s var(--easing-default); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: var(--font-sm); }
.page { max-width: 1000px; margin: 0 auto; padding: var(--spacing-8); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-6); }
.label-light {
    font-size: var(--font-xs);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}
.card {
    border-bottom-color: var(--table-header-border);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--interactive-focus-ring);
}
.ob-tk {
    --tk-glyph: #6b7080;
    --tk-tile: #eef0f4;
    --tk-said: #2a2c35;
    padding: 64px 0 80px;
    font-family: var(--ob-font);
    color: var(--ob-ink);
    svg.g { flex: none; color: var(--tk-glyph); }
}
.ob-tk.ob-tk-index { padding-bottom: 0; }
.ob-tk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.ob-tk-intro { max-width: 660px; }
.ob-tk-h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}
.ob-tk-sub {
    margin: 14px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ob-ink-2);
    text-wrap: pretty;
}
.ob-pill.ob-tk-cta {
    height: 54px;
    padding: 0 26px;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(81, 70, 232, .28);
    & svg { width: 20px; height: 20px; }
}
.ob-tk-tabs {
    margin: 40px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    & button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: var(--ob-ink-2);
        cursor: pointer;
        --cut: var(--ob-canvas);
        & svg.g { width: 16px; height: 16px; color: currentColor; }
    }
    & button:hover { background: var(--ob-grey-bg); color: var(--ob-ink); }
    & button.on { background: var(--ob-ink); color: #fff; --cut: var(--ob-ink); }
    & button:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
}
.ob-tk-open {
    margin-top: 40px;
    padding: 30px 0 34px;
    background: var(--ob-grey-bg);
}
.ob-tk-closed {
    padding: 52px 0 56px;
    background: var(--ob-card);
}
.ob-tk-h2 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.ob-tk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ob-tk-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 9px 0;
    color: var(--ob-ink);
    text-decoration: none;
    & .av {
        position: relative;
        flex: none;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--ob-card);
        display: grid;
        place-items: center;
        & svg.g { width: 20px; height: 20px; }
    }
    & .badge {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ob-card);
        display: grid;
        place-items: center;
        --cut: var(--ob-card);
        & svg { width: 17px; height: 17px; }
    }
    & .badge.done { color: var(--ob-mint-ink); }
    & .badge.notnow { color: var(--ob-muted); }
    & .words { flex: 1; min-width: 0; }
    & .t {
        display: block;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.01em;
        line-height: 1.35;
        text-wrap: pretty;
        overflow-wrap: anywhere;
        & svg.lock { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px; }
    }
    & .when {
        display: block;
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
        color: var(--ob-mint-ink);
    }
    & .why {
        display: block;
        margin-top: 2px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--tk-glyph);
        overflow-wrap: anywhere;
        & b { font-weight: 700; }
    }
    &:hover { text-decoration: none; }
    &:hover .t { color: var(--ob-accent-ink); }
    &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 8px; }
}
.ob-tk-closed .ob-tk-row .av { background: var(--ob-grey-bg); }
.ob-tk-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 16px;
    color: var(--ob-ink-2);
}
.ob-tk-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ob-accent-ink);
    cursor: pointer;
}
.ob-tk.ob-tk-item { max-width: 820px; padding-top: 48px; }
.ob-tk-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ob-ink-2);
    text-decoration: none;
    & svg { width: 16px; height: 16px; }
    &:hover { color: var(--ob-ink); text-decoration: none; }
}
.ob-tk-title {
    margin: 22px 0 10px;
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    overflow-wrap: anywhere;
    & svg.g { display: inline-block; width: 28px; height: 28px; margin-left: 12px; vertical-align: -1px; }
}
.ob-tk-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-glyph);
    --cut: var(--ob-canvas);
    & svg.g { width: 16px; height: 16px; }
}
.ob-tk-hero {
    display: block;
    margin-top: 22px;
    & img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 1px solid var(--ob-line);
        box-shadow: 0 2px 6px rgba(23, 25, 45, .04), 0 16px 40px rgba(60, 50, 140, .08);
    }
}
.ob-tk-said {
    margin: 22px 0 0;
    max-width: 65ch;
    font-size: 18px;
    line-height: 1.6;
    color: var(--tk-said);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.ob-tk-ask {
    margin-top: 28px;
    display: flex;
    gap: clamp(16px, 3vw, 28px);
    align-items: flex-start;
    &.after { margin-top: 56px; }
    & .shot { flex: none; }
    & .shot img {
        display: block;
        width: clamp(104px, 24vw, 200px);
        aspect-ratio: 16 / 10;
        border-radius: 12px;
        border: 1px solid var(--ob-line);
        object-fit: cover;
        object-position: left top;
    }
    & .words { min-width: 0; }
    & .by {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 700;
        color: var(--tk-glyph);
    }
    & .d {
        margin: 0;
        max-width: 65ch;
        font-size: 15px;
        line-height: 1.6;
        color: var(--tk-said);
        white-space: pre-line;
        overflow-wrap: anywhere;
    }
}
.ob-tk.ob-tk-suggest { max-width: 720px; padding-top: 48px; }
.ob-tk-lede {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ob-ink-2);
}
.ob-tk-suggest > .ob-tk-cta { margin-bottom: 8px; }
.ob-tk-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
    &[hidden] { display: none; }
    & .field { display: flex; flex-direction: column; gap: 8px; }
    & .lbl { font-size: 15px; font-weight: 800; color: var(--ob-ink); }
    & .ob-input {
        height: 52px;
        padding: 0 16px;
        font-size: 16px;
        font-weight: 600;
    }
    & textarea.ob-input {
        height: auto;
        min-height: 140px;
        padding: 14px 16px;
        font-weight: 500;
        line-height: 1.55;
        resize: vertical;
    }
    & .ob-input.has-error { border-color: var(--ob-rose-ink); }
    & .err {
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-rose-ink);
    }
    & .err:empty { display: none; }
}
.ob-tk-kinds {
    align-self: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--tk-tile);
    & button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        padding: 0 20px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: var(--ob-ink-2);
        cursor: pointer;
        & svg.g { width: 16px; height: 16px; }
    }
    & button.on {
        background: var(--ob-card);
        color: var(--ob-ink);
        box-shadow: 0 1px 2px rgba(23, 25, 45, .06), 0 6px 16px rgba(60, 50, 140, .10);
    }
    & button:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
}
.ob-tk-shot {
    & .row { display: flex; flex-wrap: wrap; gap: 12px; }
    & .pic {
        position: relative;
        width: 180px;
        max-width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 12px;
        border: 1px solid var(--ob-line);
        overflow: hidden;
        background: var(--ob-grey-bg);
        & img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
        &.busy img { animation: ob-tk-pulse 1.2s ease-in-out infinite; }
    }
    & .x {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 0;
        background: rgba(22, 24, 29, .72);
        color: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
        & svg { width: 13px; height: 13px; }
    }
    & .zone {
        flex: 1 1 220px;
        min-height: 112px;
        border-radius: 12px;
        border: 1.5px dashed var(--ob-faint-2);
        background: var(--ob-card);
        color: var(--ob-ink-2);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        & svg { width: 18px; height: 18px; flex: none; }
    }
    & .zone:hover, & .zone.over { border-color: var(--ob-accent); background: var(--ob-accent-tint); color: var(--ob-accent-ink); }
    & .note { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ob-rose-ink); }
}
@keyframes ob-tk-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .ob-tk-shot .pic.busy img { animation: none; opacity: .6; }
}
@media (max-width: 640px) {
    .ob-tk { padding: 40px 0 64px; }
    .ob-tk.ob-tk-item, .ob-tk.ob-tk-suggest { padding-top: 32px; }
    .ob-tk-tabs { margin-top: 28px; }
    .ob-tk-tabs button { height: 38px; padding: 0 14px; font-size: 14px; }
    .ob-tk-sub { font-size: 16px; }
    .ob-tk-open { margin-top: 28px; padding: 18px 0 22px; }
    .ob-tk-closed { padding: 36px 0 40px; }
    .ob-tk-h2 { font-size: 24px; }
    .ob-tk-row { gap: 12px; }
    .ob-tk-row .av { width: 38px; height: 38px; }
    .ob-tk-row .av svg.g { width: 18px; height: 18px; }
    .ob-tk-row .t { font-size: 16px; }
    .ob-tk-said { font-size: 16px; }
}
:root {
    --ob-canvas: #fbfbfd;
    --ob-card: #ffffff;
    --ob-card-head: #f9fafc;
    --ob-line: #e8eaf0;
    --ob-line-in: #eef0f4;
    --ob-ink: #16181d;
    --ob-ink-2: #5f6472;
    --ob-muted: #9a9fad;
    --ob-faint-1: #bcc1cc;
    --ob-faint-2: #c5c8d2;
    --ob-faint-3: #ccd0d9;
    --ob-accent: #5146e8;
    --ob-accent-ink: #3d33c4;
    --ob-accent-bg: #ebe9ff;
    --ob-accent-ring: #cdc8fb;
    --ob-accent-lift: #6359f0;
    --ob-accent-halo-0: rgba(81, 70, 232, 0);
    --ob-accent-halo-1: rgba(81, 70, 232, .13);
    --ob-butter-bg: #fff3cf;  --ob-butter-ink: #8a5a00;
    --ob-rose-bg: #ffe4e6;    --ob-rose-ink: #b91c1c;
    --ob-rose-card: #fff1f2;  --ob-rose-edge: #f6d7da;  --ob-rose-chip: #f5d2d6;
    --ob-mint-bg: #d9f5e5;    --ob-mint-ink: #157347;
    --ob-butter-edge: #f2e2b0;
    --ob-accent-tint: #fbfbff;
    --ob-grey-bg: #f3f4f7;
    --ob-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ob-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --ob-term-ink: #e8eaf1;
    --ob-term-bar: #23262e;
    --ob-term-bar-ink: #a3a8b8;
    --ob-term-btn: #30343e;
    --ob-term-prompt: #6b7184;
    --ob-term-key: #9fe3bd;
    --ob-stage-gap: 18px;
    --ob-stage-face: 44px;
    --ob-stage-av: 44px;
    --ob-stage-row-gap: 12px;
    --ob-stage-spine-gap: 16px;
    --ob-frame-radius: 22px;
    --ob-frame-line: 1.5px;
    --ob-frame-pad-x: 20px;
    --ob-frame-pad-y: 26px;
    --ob-frame-pad-b: 16px;
    --ob-flabel-h: 26px;
    --ob-proposed: #fbfcff;
    --ob-editing: #f5f6fe;
    --ob-editing-spine: #c8cfe4;
    --ob-skel: #e4e7ee;
    --ob-skel-2: #edeff4;
    --ob-skel-face-2: #e0e4ed;
    --ob-spine: #d5d9e3;
    --ob-home-card-gap: 16px;
    --ob-log-h: 38px;
    --ob-log-gap: 11px;
    --ob-on-accent: #ffffff;
    --ob-shadow-on-accent: 0 6px 18px rgba(22, 24, 80, .18);
    --ob-radius: 18px;
    --ob-radius-row: 22px;
    --ob-radius-panel: 16px;
    --ob-radius-tile: 14px;
    --ob-radius-sq: 10px;
    --ob-pill-h: 38px;
    --ob-shadow-modal: 0 24px 80px rgba(22, 24, 29, .35);
    --ob-shadow-menu: 0 18px 44px rgba(22, 24, 29, .14);
    --ob-shade: rgba(22, 24, 29, .55);
}
:root {
    --ob-site-w: 1360px;
    --ob-site-pad: 32px;
    --ob-site-gap: 20px;
    --ob-site-sect: 80px;
    --ob-site-nav-h: 68px;
    --ob-site-nav-bg: rgba(243, 244, 247, .86);
    --ob-site-prose-w: 760px;
    --ob-site-docs-nav-w: 240px;
    --ob-site-dark: #16181d;
    --ob-site-grey: #f3f4f7;
    --ob-site-lav: #58547a;
    --ob-accent-wash: #f1f0fb;
    --ob-site-good: #f5f7ff;
}
.ob-stage {
    container-type: inline-size;
    font-family: var(--ob-font);
}
.ob-stage.labelled { padding-top: calc(var(--ob-flabel-h) / 2 + 2px); }
.ob-stage > .subject {
    padding: 0 calc(var(--ob-frame-pad-x) + var(--ob-frame-line));
}
.ob-srow {
    display: flex;
    gap: var(--ob-stage-row-gap);
    min-width: 0;
    > .col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 var(--ob-stage-face);
        align-self: stretch;
    }
    .body { min-width: 0; flex: 1 1 auto; }
    .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .name { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .handle { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rto { margin-top: 1px; font-size: 13px; font-weight: 500; color: var(--ob-muted); }
    .text {
        margin-top: 3px;
        font-size: 15.5px;
        line-height: 1.5;
        color: var(--ob-ink);
        white-space: pre-wrap;
        word-break: break-word;
    }
    &.dim .name, &.dim .text { color: var(--ob-ink-2); }
    &.dim .text { font-size: 14.5px; }
    .spine { width: 2px; flex: 1 1 auto; min-height: 14px; margin: 8px 0 -2px; background: var(--ob-spine); border-radius: 1px; }
}
.ob-srow .ob-badged > .badge { width: 40%; height: 40%; right: -2px; bottom: -2px; }
.ob-srow.post .body > .text:first-child { margin-top: 11px; }
.ob-srow .sent { margin-top: 6px; font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.ob-srow .sent.ok { color: var(--ob-mint-ink); }
.ob-srow .sent.bad { color: var(--ob-rose-ink); }
.ob-srow .sent.warn { color: var(--ob-butter-ink); }
.ob-srow .sent.off { color: var(--ob-muted); }
.ob-srow .sent a { color: var(--ob-accent-ink); font-weight: 600; text-decoration: none; }
.ob-srow .sent a:hover { text-decoration: underline; }
.ob-srow.post.anon > .col { display: none; }
.ob-srow + .ob-srow { margin-top: var(--ob-stage-gap); }
.ob-srow:has(.spine) + .ob-srow { margin-top: 0; }
.ob-srow:has(.spine):not(:last-child) .body { padding-bottom: var(--ob-stage-spine-gap); }
.ob-srow.skel {
    .face {
        width: var(--ob-stage-av);
        height: var(--ob-stage-av);
        border-radius: 50%;
        background: var(--ob-skel-face-2);
        flex: 0 0 auto;
    }
    .who { gap: 8px; padding-top: 6px; }
    & i {
        display: block;
        height: 8px;
        border-radius: 4px;
        background: var(--ob-skel);
    }
    & i.hd { background: var(--ob-skel-2); }
    & i.ln { height: 9px; margin-top: 8px; background: var(--ob-skel); }
    & i.ln:first-of-type { margin-top: 11px; }
    .spine { background: var(--ob-skel); }
}
.ob-frame {
    --ob-ground: var(--ob-proposed);
    --ob-badge-ring: var(--ob-ground);
    position: relative;
    padding: var(--ob-frame-pad-y) var(--ob-frame-pad-x) var(--ob-frame-pad-b);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    border-radius: var(--ob-frame-radius);
    background: var(--ob-ground);
    transition: background-color .18s ease, border-color .18s ease;
}
.ob-flabel {
    position: absolute;
    top: calc(-1 * var(--ob-flabel-h) / 2);
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ob-flabel-h);
    padding: 0 11px 0 8px;
    border-radius: 999px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-ink);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    max-width: calc(100% - 36px);
    & svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.ob-frame.done {
    --ob-ground: var(--ob-card);
    border-color: var(--ob-line);
    .ob-flabel { background: var(--ob-card); color: var(--ob-ink-2); border-color: var(--ob-line); }
}
.ob-frame.now {
    border-color: var(--ob-accent);
    animation: ob-frame-attention 2.8s ease-in-out infinite;
    .ob-flabel { border-color: var(--ob-accent); }
}
@keyframes ob-frame-attention {
    0%, 100% { box-shadow: 0 0 0 0 var(--ob-accent-halo-0); }
    50%      { box-shadow: 0 0 0 6px var(--ob-accent-halo-1); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-frame.now { animation: none; }
}
.ob-sfoot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    .tools {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 18px;
        margin-left: 14px;
    }
    .tools:first-child { margin-left: 0; }
    .tool {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 2px;
        border: 0;
        background: none;
        font-family: var(--ob-font);
        font-size: 13px;
        font-weight: 700;
        color: var(--ob-ink-2);
        white-space: nowrap;
        & svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--ob-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    }
}
.ob-frame.editing {
    --ob-ground: var(--ob-editing);
    border-color: var(--ob-accent);
    .ob-flabel { border-color: var(--ob-accent); }
    .ob-srow .spine { background: var(--ob-editing-spine); }
}
.ob-srow .text.ob-ed {
    outline: none;
    cursor: text;
    min-height: 23px;
    -webkit-user-modify: read-write-plaintext-only;
}
.ob-srow .body > .left {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ob-faint-1);
    font-variant-numeric: tabular-nums;
    &.over { color: var(--ob-butter-ink); }
}
.ob-srow .ob-facepick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    .ob-circle { display: flex; transition: box-shadow .12s; }
    &:hover .ob-circle, &.open .ob-circle { box-shadow: 0 0 0 3px var(--ob-ground, var(--ob-card)), 0 0 0 4.5px var(--ob-accent); }
    &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 3px; }
    .grip { display: flex; flex-direction: column; gap: 3px; padding: 3px 0; }
    .grip i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ob-faint-1); transition: background .12s; }
    &:hover .grip i, &.open .grip i { background: var(--ob-accent); }
}
.ob-frame .ob-ederr {
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ob-rose-ink);
}
@media (max-width: 760px) {
    .ob-frame { padding: 24px 14px 14px; }
    .ob-stage > .subject { padding: 0 calc(14px + var(--ob-frame-line)); }
    .ob-srow .text { font-size: 15px; }
    .ob-srow > .col { flex-basis: 36px; }
    .ob-srow .ob-circle.lg { width: 36px; height: 36px; font-size: 15px; }
    .ob-srow.skel .face { width: 36px; height: 36px; }
}
.ob-media { margin-top: 12px; display: grid; gap: 8px; }
.ob-media .m { position: relative; min-height: 0; background: var(--ob-canvas); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ob-line-in); }
.ob-media .m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-media.n1 { grid-template-columns: minmax(0, 1fr); }
.ob-media.n1 .m { border-radius: 16px; aspect-ratio: 16 / 10; }
.ob-media.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 200px; }
.ob-media.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 230px; }
.ob-media.n3 .m:first-child { grid-row: 1 / 3; }
.ob-media.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 250px; }
.ob-media .m.small { width: 96px; height: 72px; aspect-ratio: auto; justify-self: start; align-self: start; border-radius: 10px; }
.ob-media .x {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(15, 17, 22, .66); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    & svg { width: 12px; height: 12px; }
}
.ob-media .x:hover { background: var(--ob-rose-ink); }
.ob-media .x:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob-media .gif { position: absolute; left: 8px; bottom: 8px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(15, 17, 22, .72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 20px; }
.ob-media .m.up { animation: ob-media-up 0.9s ease-in-out infinite alternate; }
@keyframes ob-media-up { from { opacity: .95; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ob-media .m.up { animation: none; opacity: .6; } }
.ob-dropchip { display: none; }
.ob-stage.over .ob-dropchip { display: inline-flex; z-index: 2; }
.ob-stage.over .ob-flabel:not(.ob-dropchip) { visibility: hidden; }
.ob-dropchip svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-stage.over > .ob-frame { border-color: var(--ob-accent); --ob-ground: var(--ob-editing); }
.ob-stage.over > .ob-frame .ob-dropchip { background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); }
.ob-stage > .subject { position: relative; }
.ob-stage.over > .subject { border-radius: 16px; background: var(--ob-editing); box-shadow: 0 0 0 1.5px var(--ob-accent), 0 0 0 8px var(--ob-editing); }
.ob-stage.over > .subject .ob-dropchip { top: calc(-8px - var(--ob-flabel-h) / 2); left: 10px; background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); }
body.ob-site {
    background: var(--ob-canvas);
    font-family: var(--ob-font);
    color: var(--ob-ink);
    -webkit-font-smoothing: antialiased;
}
body.ob-site::before { display: none; }
body.ob-site :is(.ob-h1, .ob-h2, .ob-h3, h1, h2, h3) { text-wrap: balance; }
body.ob-site :is(.ob-copy, .ob-site-sub, .ob-lead, .ob-prose p, .ob-prose li, .sub, .fine) { text-wrap: pretty; }
:is(.ob-plan .promise b, .ob-qa summary) { text-wrap: balance; }
:is(.ob-freewhy li, .ob-srow .text) { text-wrap: pretty; }
html body.ob-site .site-footer { display: none; }
html body.ob-site #Main {
    position: static;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
html body.ob-site {
    max-width: none;
    margin: 0;
    padding: 0;
}
.ob-site {
    max-width: var(--ob-site-w);
    margin: 0 auto;
    padding: 0 var(--ob-site-pad);
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
.ob-sitewrap > [widget="nav"] { display: contents; }
.ob-sitenav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ob-site-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ob-line);
    .inner {
        max-width: var(--ob-site-w);
        margin: 0 auto;
        padding: 0 var(--ob-site-pad);
        height: var(--ob-site-nav-h);
        display: flex;
        align-items: center;
        gap: 26px;
    }
    .links {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .links a {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 13px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-decoration: none;
    }
    .links a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; }
    .links a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; }
    .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .ob-pill.face {
        padding-left: 4px;
        gap: 9px;
    }
}
.ob-sitelogo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    --mk-ink: #0f1542;
    --mk-face: #ffffff;
    --mk-sticker: none;
    color: var(--mk-ink);
    .mk {
        display: block;
        flex: none;
        width: 38px;
        height: 36.4px;
        overflow: visible;
        color: var(--mk-ink);
    }
    .name {
        font-family: 'Fredoka', var(--ob-font);
        font-size: 23px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1;
        color: var(--mk-ink);
    }
    &:hover { color: var(--mk-ink); text-decoration: none; }
}
.ob-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-accent-ink);
}
.ob-h1 {
    margin: 0 0 18px;
    font-family: var(--ob-font);
    font-size: 60px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.02;
    color: var(--ob-ink);
    text-wrap: balance;
}
.ob-h2 {
    margin: 0 0 14px;
    font-family: var(--ob-font);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--ob-ink);
    text-wrap: balance;
}
.ob-h3 {
    margin: 0 0 8px;
    font-family: var(--ob-font);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--ob-ink);
}
.ob-lead {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ob-ink-2);
    max-width: 600px;
}
.ob-copy {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ob-ink-2);
}
.ob-copy + .ob-copy { margin-top: 10px; }
.ob-copy b, .ob-lead b { font-weight: 700; color: var(--ob-ink); }
.ob-copy a, .ob-lead a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; }
.ob-copy a:hover, .ob-lead a:hover { text-decoration: underline; }
.ob-site-sub {
    margin: 0 0 40px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ob-ink-2);
    max-width: 640px;
}
.ob-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
    padding: 104px 0 80px;
}
.ob-hero.stack {
    display: block;
    padding: 96px 0 24px;
    .words { max-width: 1120px; margin: 0 auto; text-align: center; }
    .ob-h1 { font-size: 72px; margin-bottom: 14px; }
    .ob-subhead { margin: 0 auto; max-width: 760px; font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ob-ink-2); }
    .ob-ctas { justify-content: center; }
    .ob-shot { max-width: min(var(--w, 1120px), 1120px); margin: 64px auto 0; }
}
.ob-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}
.ob-ctas .ob-pill { height: 46px; padding: 0 24px; font-size: 15px; }
.ob-ctas .ob-pill svg { width: 16px; height: 16px; }
.ob-ideas { text-align: center; }
.ob-flow { max-width: 1216px; margin: 36px auto 0; }
.ob-flow-lbls {
    display: grid;
    grid-template-columns: 32fr 300fr 56fr 404fr 56fr 336fr 32fr;
    text-align: left;
    .l { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bandl-ink-2); }
    .a { grid-column: 2; }
    .b { grid-column: 4; }
    .c { grid-column: 6; }
    .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bandl-n-bg); color: var(--bandl-n-ink); font-size: 13px; letter-spacing: 0; }
}
.ob-ideas .ob-shot { margin: 0 auto; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 760px) {
    .ob-flow-lbls { display: none; }
}
.ob-sect {
    padding: var(--ob-site-sect) 0;
    border-top: 1px solid var(--ob-line);
}
.ob-sect.tight { padding: 40px 0; }
.ob-sect.first { border-top: 0; }
.ob-belt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px 34px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ob-muted);
    .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-faint-1); margin-right: 6px; }
    .name { color: var(--ob-ink-2); }
    .or { font-weight: 600; color: var(--ob-muted); }
}
.ob-shot {
    position: relative;
    margin: 0;
    max-width: var(--w, none);
    border-radius: 14px;
    background: var(--ob-card);
    box-shadow:
        0 0 0 1px rgba(22, 24, 29, .07),
        0 28px 60px -24px rgba(22, 24, 29, .26),
        0 10px 22px -12px rgba(22, 24, 29, .12);
    & img { display: block; width: 100%; height: auto; border-radius: inherit; }
}
.ob-asks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 40px;
    > .ob-decide { display: flex; }
    > .ob-decide > .ob-stage { flex: 1 1 auto; display: flex; }
    > .ob-decide > .ob-stage > .ob-frame { flex: 1 1 auto; display: flex; flex-direction: column; --ob-ground: var(--ob-card); }
    > .ob-decide > .ob-stage > .ob-frame > .ob-sfoot { margin-top: auto; padding-top: 18px; }
}
.ob-asks.waiting > .ob-decide { opacity: 0; }
.ob-chapter {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
    align-items: center;
    .words .ob-copy.lg { margin-top: 4px; }
    > .ob-shot { width: 100%; justify-self: center; }
}
.ob-chapter.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ob-checks {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    & li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ob-ink); }
    & svg { width: 18px; height: 18px; color: var(--ob-mint-ink); flex: 0 0 auto; }
}
.ob-code {
    border-radius: 16px;
    background: var(--ob-site-dark);
    box-shadow: 0 30px 60px -28px rgba(22, 24, 29, .55), 0 0 0 1px rgba(22, 24, 29, .08);
    overflow: hidden;
    .bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .bar .t { font-size: 13.5px; font-weight: 700; color: #fff; }
    & pre {
        margin: 0;
        padding: 20px 22px 24px;
        font-family: var(--ob-mono);
        font-size: 13.5px;
        line-height: 1.75;
        color: #e8eaf1;
        white-space: pre;
        overflow-x: auto;
    }
    .k { color: #a9b6ff; }
    .s { color: #8fe3b0; }
    .p { color: #6b7180; }
}
@media (max-width: 640px) {
    .ob-code pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; font-size: 12.5px; }
}
.ob-planset { max-width: 1080px; margin: 0 auto var(--ob-site-sect); }
.ob-planfoot { margin: 18px 0 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ob-ink-2); }
.ob-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: var(--ob-site-gap);
}
.ob-plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-left: auto; margin-right: auto; }
.ob-older.two { max-width: 940px; margin-left: auto; margin-right: auto; }
.ob-pagehead.mid { max-width: 1120px; margin: 0 auto; text-align: center; }
.ob-pagehead.mid .ob-subhead { margin: 0 auto; max-width: 900px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ob-ink-2); text-wrap: balance; }
.ob-pagehead.mid .ob-subhead a { color: var(--ob-accent-ink); text-decoration: none; }
.ob-pagehead.mid .ob-subhead a:hover { text-decoration: underline; }
.ob-pagehead.wait { visibility: hidden; }
.ob-plan .ob-pill.wait { visibility: hidden; }
.ob-older {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px 24px;
    border-radius: var(--ob-radius);
    background: linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink));
    color: #fff;
    .w { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
    .t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
    .n { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); }
    .ob-pill { flex: 0 0 auto; background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
    &.quiet {
        background: var(--ob-card);
        border: 1px solid var(--ob-line);
        color: var(--ob-ink);
        .n { color: var(--ob-ink-2); }
        .ob-pill { border-color: var(--ob-faint-2); color: var(--ob-ink); }
    }
}
.ob-plan .promise {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ob-radius-tile);
    background: var(--ob-grey-bg);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ob-ink-2);
}
.ob-plan .promise svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ob-accent-ink); }
.ob-plan .promise b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; color: var(--ob-ink); }
.ob-freewhy {
    text-align: center;
    .glyph { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: rgba(205, 200, 251, .12); color: var(--ob-accent-ring); }
    .glyph svg { width: 26px; height: 26px; }
    & ul { max-width: 640px; margin: 30px auto 0; padding: 0; list-style: none; text-align: left; }
    & li { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 17px; font-weight: 500; line-height: 1.55; color: rgba(255, 255, 255, .86); }
    & li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    & li a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
    & li a:hover { text-decoration-color: #fff; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
@media (max-width: 640px) {
    .ob-freewhy li { font-size: 15.5px; padding: 14px 0; }
}
.ob-card.ob-plan {
    position: relative;
    border: 0;
    display: flex;
    flex-direction: column;
    padding: 34px 34px 30px;
    border-radius: 26px;
    background: var(--ob-card);
    box-shadow: 0 0 0 1px var(--ob-line);
    .top { display: flex; align-items: center; gap: 10px; }
    .tier { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ob-ink); }
    .chip { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
    .price .n { font-size: 48px; font-weight: 800; letter-spacing: -.03em; color: var(--ob-ink); font-variant-numeric: tabular-nums; line-height: 1; }
    .price .per { font-size: 15px; font-weight: 600; color: var(--ob-muted); }
    .say { margin: 12px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ob-ink-2); }
    .grp { margin-top: 26px; }
    .grp h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); }
    .ticks { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
    .ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ob-ink); }
    .ticks li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ob-mint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .ticks li i { font-style: normal; font-weight: 500; color: var(--ob-ink-2); }
    &:not(.free) .ticks li svg { stroke: var(--ob-accent); }
    .promise { margin-top: 26px; }
    .ob-pill { margin-top: auto; }
    .grp:last-of-type, .promise { margin-bottom: 30px; }
    .ob-pill svg { width: 16px; height: 16px; }
    &.lit { box-shadow: 0 0 0 2px var(--ob-accent), 0 24px 60px rgba(60, 50, 140, .14); }
}
.ob-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    max-width: 1080px;
    margin: calc(-1 * var(--ob-site-sect) + 40px) auto var(--ob-site-sect);
    .fact { flex: 0 1 320px; display: flex; align-items: flex-start; gap: 12px; }
    .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ob-accent-wash); color: var(--ob-accent); }
    .ic svg { width: 18px; height: 18px; }
    b { display: block; margin-top: 1px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); }
    p { margin: 3px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ob-ink-2); }
}
@media (max-width: 960px) {
    .ob-facts .fact { flex-basis: 100%; }
}
.ob-qaprice {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 72px;
    align-items: start;
    .qa .ob-h2 { margin-bottom: 26px; }
}
.ob-qaprice.solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.ob-qa {
    max-width: 880px;
    border-bottom: 1px solid var(--ob-line);
    .q { border-top: 1px solid var(--ob-line); }
    & summary {
        list-style: none;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 0;
        line-height: 1.4;
        cursor: pointer;
        user-select: none;
        font-size: 16.5px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--ob-ink);
        transition: color .15s ease;
    }
    & summary::-webkit-details-marker { display: none; }
    & summary:hover { color: var(--ob-accent); }
    & summary:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 6px; }
    .tog {
        position: relative;
        flex: 0 0 14px;
        height: 1.4em;
        color: var(--ob-muted);
        transition: color .15s ease;
    }
    .tog::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .2s ease;
    }
    & summary:hover .tog { color: var(--ob-accent); }
    .q[open] .tog { color: var(--ob-ink); }
    .q[open] .tog::before { transform: translateY(-25%) rotate(225deg); }
    .a { padding: 0 24px 22px 28px; }
    .ob-copy { font-size: 15px; max-width: 640px; }
}
.ob-qa { interpolate-size: allow-keywords; }
.ob-qa .q::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.ob-qa .q[open]::details-content { block-size: auto; }
.ob-asked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 72px;
    align-items: start;
    > .ob-h2 { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); margin: 0; }
}
.ob-beside {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.ob-sitefoot {
    border-top: 1px solid var(--ob-line);
    margin-top: 24px;
    padding: 36px 0 48px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 26px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-muted);
    --foot-row: 31px;
    .links { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--foot-row); gap: 4px 20px; }
    .links a { color: var(--ob-ink-2); text-decoration: none; }
    .links a:hover { color: var(--ob-ink); text-decoration: none; }
    .co {
        margin-left: auto; font-weight: 500; font-size: 12px; color: var(--ob-muted); text-align: right;
        line-height: 18px; margin-top: calc((var(--foot-row) - 18px) / 2);
    }
    .co span { display: block; }
    .ob-sitelogo .name { font-size: 19px; }
    .ob-sitelogo .mk { width: 32px; height: 30.7px; }
}
.ob-pagehead {
    padding: 64px 0 36px;
    max-width: 960px;
}
.ob-docs {
    display: grid;
    grid-template-columns: var(--ob-site-docs-nav-w) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding-bottom: 40px;
}
.ob-docconnect {
    container-type: inline-size;
    max-width: var(--ob-site-prose-w);
    margin: 6px 0 18px;
    .ob-connectbox .split { border-color: var(--ob-line); }
}
@container (min-width: 560px) {
    .ob-docconnect .ob-connectbox .split { box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px rgba(22, 24, 29, .05); }
    .ob-docconnect .ob-connectbox .side { background: var(--ob-card-head); }
}
@container (max-width: 559px) {
    .ob-docconnect > div { padding: 14px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-panel); }
}
.ob-prose:has(+ .ob-docconnect) { padding-bottom: 0; }
.ob-docconnect + .ob-prose > h2:first-child { margin-top: 24px; }
.ob-docbody { container-type: inline-size; }
.ob-prose .ob-docshot {
    width: min(var(--w, 100%), 100cqi);
    margin: 22px 0 30px;
    border-radius: 14px;
    background: var(--ob-card);
    box-shadow:
        0 0 0 1px rgba(22, 24, 29, .07),
        0 22px 48px -24px rgba(22, 24, 29, .22),
        0 8px 18px -12px rgba(22, 24, 29, .10);
    & img { display: block; width: 100%; height: auto; border-radius: inherit; }
    &.box { box-shadow: 0 0 0 1px var(--ob-line); }
}
.ob-docsnav {
    position: sticky;
    top: calc(var(--ob-site-nav-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    & a {
        display: block;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-decoration: none;
    }
    & a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; }
    & a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; }
    .kids {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 4px 0 10px 12px;
        padding-left: 10px;
        border-left: 1px solid var(--ob-line);
    }
    .kids a {
        padding: 5px 10px;
        font-family: var(--ob-mono);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: -.01em;
    }
}
.ob-prose {
    max-width: var(--ob-site-prose-w);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ob-ink-2);
    padding-bottom: 40px;
    > *:first-child { margin-top: 0; }
    & h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ob-ink); margin: 0 0 18px; }
    & h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ob-ink); margin: 40px 0 12px; }
    & h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); margin: 28px 0 8px; }
    & p { margin: 0 0 14px; }
    & ul, & ol { margin: 0 0 14px; padding-left: 22px; }
    & li { margin-bottom: 6px; }
    & li::marker { color: var(--ob-muted); }
    & strong { font-weight: 700; color: var(--ob-ink); }
    & a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; }
    & a:hover { text-decoration: underline; }
    & a code { color: inherit; }
    & hr { border: 0; border-top: 1px solid var(--ob-line); margin: 34px 0; }
    & blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--ob-accent-ring); color: var(--ob-ink-2); }
    & code {
        font-family: var(--ob-mono);
        font-size: .84em;
        font-weight: 500;
        background: var(--ob-card);
        box-shadow: inset 0 0 0 1px var(--ob-line);
        border-radius: 6px;
        padding: .12em .42em;
        color: var(--ob-ink);
    }
    & a code { background: var(--ob-accent-bg); box-shadow: none; }
    & pre {
        margin: 0 0 16px;
        padding: 14px 16px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-ink);
        color: #e8eaf1;
        font-family: var(--ob-mono);
        font-size: 12.5px;
        line-height: 1.55;
        overflow-x: auto;
    }
    & pre code { background: none; box-shadow: none; padding: 0; color: inherit; font-size: inherit; }
    & table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 18px;
        font-size: 14px;
    }
    & th {
        text-align: left;
        padding: 0 12px 8px 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ob-muted);
        border-bottom: 1px solid var(--ob-line);
    }
    & td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ob-line-in); vertical-align: top; }
    & tr:last-child td { border-bottom: 0; }
    & td:first-child { color: var(--ob-ink); font-weight: 700; white-space: nowrap; }
    .ob-tablewrap { overflow-x: auto; margin: 0 0 18px; }
    .ob-tablewrap > table { margin: 0; }
    &.legal td:first-child { white-space: normal; font-weight: 600; }
    &.legal table { table-layout: fixed; }
    &.legal th:first-child { width: 50%; }
    > p:first-child > em:only-child { color: var(--ob-muted); font-size: 13.5px; font-style: normal; font-weight: 600; }
}
.ob-prose-loading { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-muted); }
.ob-prose-error { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-rose-ink); }
@media (min-width: 1800px) {
    :root { --ob-site-w: 1520px; --ob-site-sect: 96px; --ob-site-prose-w: 840px; --ob-site-docs-nav-w: 260px; }
    .ob-h1 { font-size: 68px; }
    .ob-h2 { font-size: 42px; }
    .ob-lead { font-size: 20px; max-width: 640px; }
    .ob-hero { padding: 128px 0 96px; gap: 96px; }
}
@media (max-width: 960px) {
    :root { --ob-site-pad: 24px; --ob-site-sect: 56px; }
    .ob-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; }
    .ob-h1 { font-size: 42px; }
    .ob-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; }
    .ob-older { max-width: 440px; margin-left: auto; margin-right: auto; }
    .ob-plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .ob-older.two { max-width: 760px; }
    .ob-beside { grid-template-columns: minmax(0, 1fr); }
    .ob-docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ob-docsnav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .ob-docsnav .kids { flex-direction: row; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; border-left: 0; }
}
@media (max-width: 699px) {
    .ob-sitefoot .links a { display: inline-flex; align-items: center; min-height: 24px; }
    .ob-prose .ob-tablewrap td:first-child a { display: inline-flex; align-items: center; min-height: 24px; }
}
@media (max-width: 640px) {
    :root { --ob-site-pad: 18px; --ob-site-gap: 14px; --ob-site-sect: 44px; }
    .ob-plans.two { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
    .ob-older.two { max-width: 440px; }
    .ob-h1 { font-size: 36px; }
    .ob-h2 { font-size: 28px; }
    .ob-hero { padding: 36px 0 32px; }
    .ob-sect { padding: 40px 0; }
    .ob-sitenav .inner { gap: 12px; }
    .ob-sitenav .links a { height: 40px; padding: 0 9px; font-size: 13px; }
    .ob-sitenav .links a.legal { display: none; }
    .ob-sitenav .right .ob-pill { height: 40px; }
    .ob-sitenav .ob-pill.face { padding-left: 5px; }
    .ob-sitelogo .name { display: none; }
    .ob-sitefoot .co { margin-left: 0; margin-top: 0; text-align: left; }
    .ob-sitefoot .links { gap: 0 8px; margin: 0 -6px; }
    .ob-sitefoot .links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
    @media (max-width: 400px) { .ob-sitefoot .links { display: grid; grid-template-columns: repeat(3, max-content); } }
    .ob-docsnav a { display: flex; align-items: center; min-height: 40px; }
    .ob-sitenav .ob-sitelogo { min-height: 40px; padding: 0 8px; margin: 0 -8px; }
    .ob-sitefoot .ob-sitelogo { min-height: 40px; padding: 0 10px; margin: 0 -10px; }
    .ob-prose:not(.legal) .ob-tablewrap > table,
    .ob-prose:not(.legal) .ob-tablewrap > table > tbody,
    .ob-prose:not(.legal) .ob-tablewrap tr,
    .ob-prose:not(.legal) .ob-tablewrap td { display: block; }
    .ob-prose:not(.legal) .ob-tablewrap thead { display: none; }
    .ob-prose:not(.legal) .ob-tablewrap tr { padding: 10px 0; border-bottom: 1px solid var(--ob-line-in); }
    .ob-prose:not(.legal) .ob-tablewrap tr:last-child { border-bottom: 0; }
    .ob-prose:not(.legal) .ob-tablewrap td { padding: 2px 0; border-bottom: 0; }
    .ob-prose:not(.legal) .ob-tablewrap td:first-child { white-space: normal; padding-bottom: 4px; }
    .ob-prose:not(.legal) .ob-tablewrap td:first-child a { display: inline-flex; align-items: center; min-height: 32px; margin: -4px 0; }
    .ob-prose:not(.legal) .ob-tablewrap td[data-th]::before { content: attr(data-th); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); }
}
@media (max-width: 440px) {
    .ob-sitenav .ob-pill.face > span:not(.ob-circle) { display: none; }
    .ob-sitenav .ob-pill.face { padding: 0 4px; }
}
.ob-contacthero > [widget="card"] { display: contents; }
.ob-joincard {
    width: 100%;
    max-width: 460px;
    justify-self: end;
    padding: 34px 34px 30px;
    box-shadow: 0 20px 60px rgba(22, 24, 29, .10);
    .ob-cstep .title { font-size: 30px; }
    .ob-cstep .controls { margin-top: 24px; }
}
.ob-cstep .acts { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.ob-cstep .acts .ob-pill.primary { flex: 1 1 auto; }
.ob-band {
    background: var(--ob-site-dark);
    padding: 72px 0 76px;
    .head { max-width: 740px; margin-bottom: 44px; }
    .ob-h2 { color: #fff; }
    .ob-copy { color: var(--ob-faint-1); font-size: 14.5px; }
}
.ob-copy.lg { font-size: 16px; max-width: 560px; }
.ob-copy.lg.wide { max-width: 760px; }
@media (max-width: 960px) {
    .ob-joincard { max-width: none; justify-self: stretch; padding: 26px 22px 22px; box-shadow: none; }
    .ob-band, .ob-bandl, .ob-bandg { padding: 48px 0 52px; }
    .ob-band .head { margin-bottom: 28px; }
}
.ob-contacthero { padding: 96px 0 88px; align-items: start; }
.ob-contacthero .ob-h1 { font-size: 56px; }
.ob-ways {
    margin-top: 36px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .way {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 14px 14px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        color: var(--ob-ink);
        text-decoration: none;
    }
    & a.way { padding-right: 16px; transition: border-color .12s; }
    & a.way:hover { border-color: var(--ob-accent-ring); text-decoration: none; }
    .ic {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .ic.quiet { background: var(--ob-canvas); color: var(--ob-ink-2); }
    .ic svg { width: 18px; height: 18px; }
    .w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .n { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); }
    .t { font-size: 16px; font-weight: 700; color: var(--ob-ink); text-decoration: none; overflow-wrap: anywhere; }
    & a.t:hover { text-decoration: underline; }
    .ob-pill { flex: 0 0 auto; height: 34px; padding: 0 14px; font-size: 13px; }
    .go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-faint-3); }
}
.ob-contactcard {
    .ob-cstep .controls { gap: 18px; }
    .err:empty { display: none; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .lbl { font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
    & textarea.ob-input.lg {
        height: auto;
        min-height: 150px;
        padding: 14px 18px;
        font-weight: 600;
        line-height: 1.55;
        resize: vertical;
    }
}
.ob-sentmark {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ob-mint-bg);
    color: var(--ob-mint-ink);
    & svg { width: 22px; height: 22px; }
}
.ob-topic {
    position: relative;
    .pick {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 14px 0 10px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        font-family: var(--ob-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--ob-ink);
        text-align: left;
        cursor: pointer;
        outline: none;
        transition: border-color .12s, box-shadow .12s;
    }
    .pick.none { padding-left: 18px; font-weight: 600; color: var(--ob-muted); }
    .pick:focus-visible, &.open .pick { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .now { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
    .chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ob-muted); transition: transform .12s; }
    &.open .chev { transform: rotate(180deg); }
    .ic {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .ic svg { width: 16px; height: 16px; }
    .menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        background: var(--ob-card);
        border-radius: var(--ob-radius-tile);
        box-shadow: 0 0 0 1px var(--ob-line), var(--ob-shadow-menu);
    }
    .menu button {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px 0 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ob-ink);
        text-align: left;
        cursor: pointer;
        outline: none;
    }
    .menu button:hover, .menu button:focus-visible { background: var(--ob-canvas); }
    .menu button.on { background: var(--ob-site-good); }
    .menu .w { flex: 1 1 auto; min-width: 0; }
    .menu .tick { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-accent); }
}
@media (max-width: 960px) {
    .ob-contacthero { padding: 48px 0 40px; }
    .ob-contacthero .ob-h1 { font-size: 40px; }
    .ob-ways { max-width: none; }
}
.ob-bandw {
    background: var(--ob-card);
    padding: 76px 0 80px;
}
.ob-bandl {
    --bandl-ink: var(--ob-ink);
    --bandl-ink-2: var(--ob-ink-2);
    --bandl-n-bg: #ffffff;
    --bandl-n-ink: var(--ob-accent-ink);
    background: var(--ob-site-lav);
    padding: 72px 0 76px;
    .ob-h2, .ob-h3 { color: var(--bandl-ink); }
    .ob-copy { color: var(--bandl-ink-2); }
}
.ob-home { background: var(--ob-site-grey); }
.ob-bandg {
    background: var(--ob-site-grey);
    padding: 72px 0 76px;
}
.ob-bandl[data-tone="dark"] {
    --bandl-ink: #ffffff;
    --bandl-ink-2: rgba(255, 255, 255, .8);
    --bandl-n-bg: rgba(255, 255, 255, .16);
    --bandl-n-ink: #ffffff;
}
.head.mid,
.ob-band .head.mid,
.ob-bandw .head.mid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.head.mid .ob-site-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; }
.ob-ctas.mid { justify-content: center; margin-top: 38px; }
.ob-band .ob-site-sub { color: var(--ob-faint-1); }
.ob-belt .glyph {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 9px;
    flex: 0 0 auto;
    object-fit: contain;
}
.ob-belt { align-items: center; }
.ob-belt .name { display: inline-flex; align-items: center; }
.ob-beside.mid { align-items: center; }
.ob-ledger {
    position: relative;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    .r { position: relative; display: flex; align-items: flex-start; gap: 18px; }
    .r:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 17px;
        top: 36px;
        bottom: -26px;
        width: 2px;
        background: var(--ob-accent-bg);
    }
    .n {
        flex: 0 0 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
    }
    .r > div { padding-top: 6px; }
    .ob-h3 { margin: 0 0 4px; }
    .ob-copy { font-size: 14.5px; }
}
.ob-price1 {
    padding: var(--ob-site-sect) 0;
    text-align: center;
    .n { margin: 0 0 12px; font-size: 38px; font-weight: 800; letter-spacing: -.028em; color: var(--ob-ink); }
    .ob-copy { max-width: 560px; margin: 0 auto; }
    .ob-ctas { margin-top: 26px; }
}
.ob-price1.ink {
    .n { color: #fff; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
.ob-band.costs { padding: 80px 0 84px; }
.ob-band.closer {
    padding: 84px 0 88px;
    .ob-h2 { font-size: 44px; }
    .ob-pill.primary { background: var(--ob-accent); color: #fff; }
    .ob-pill.primary:hover { background: var(--ob-accent-lift); }
}
@media (max-width: 1280px) {
    .ob-chapter { gap: 48px; }
}
@media (max-width: 960px) {
    .ob-bandw { padding: 52px 0 56px; }
    .ob-band.closer { padding: 56px 0 60px; }
    .ob-band.closer .ob-h2 { font-size: 32px; }
    .ob-band.costs { padding: 52px 0 56px; }
    .ob-price1 .n { font-size: 30px; }
    .ob-price1.ink { padding-top: 48px; margin-top: 44px; }
    .ob-chapter, .ob-chapter.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ob-asks { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .ob-qaprice { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ob-asked { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ob-asked > .ob-h2 { position: static; }
    .ob-chapter.flip > .ob-shot { order: 2; }
    .ob-hero.stack { padding: 48px 0 16px; }
    .ob-hero.stack .ob-h1 { font-size: 46px; }
    .ob-hero.stack .ob-subhead { font-size: 21px; }
    .ob-hero.stack .ob-shot { margin-top: 36px; }
}
@media (max-width: 640px) {
    .ob-hero.stack { padding: 36px 0 12px; }
    .ob-hero.stack .ob-h1 { font-size: 38px; }
    .ob-hero.stack .ob-subhead { font-size: 19px; }
    .ob-pagehead.mid .ob-subhead { font-size: 18px; }
    .ob-shot { border-radius: 10px; }
}
:root {
    --ss-rail-w: 64px;
    --ss-rail-bg: #0f1542;
    --ss-rail-ink: rgba(255, 255, 255, .75);
    --ss-rail-ink-hover: rgba(255, 255, 255, .95);
    --ss-rail-hover: rgba(255, 255, 255, .08);
    --ss-rail-on: rgba(255, 255, 255, .13);
    --ss-rail-hover-solid: #222851;
    --ss-rail-on-solid: #2e335b;
    --ss-rail-dot: #a59bff;
    --ss-rail-track: rgba(255, 255, 255, .16);
    --ss-rail-glyph: 36px;
    --ss-rail-row: 64px;
    --ss-rail-face: 48px;
    --ss-rail-photo-at: 4.5px;
    --ss-rail-under-mark: 38px;
}
.ss-railslot { display: contents; }
.ss-rail {
    flex: 0 0 var(--ss-rail-w);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 4;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 20px 0 18px;
    background: var(--ss-rail-bg);
    --ss-usage: var(--ss-rail-dot);
}
.ss-rail .ss-rail-mark { align-self: center; display: flex; align-items: center; height: 44px; margin-bottom: var(--ss-rail-under-mark); color: var(--ss-rail-bg); --mk-face: #ffffff; --mk-sticker: inline; }
.ss-rail .ss-rail-mark:hover { color: var(--ss-rail-bg); text-decoration: none; }
.ss-rail-mark .mk { display: block; width: 44px; height: 42px; overflow: visible; }
.ss-rail .ss-rail-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: var(--ss-rail-row);
    color: var(--ss-rail-ink);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ss-rail .ss-rail-go:hover { background: var(--ss-rail-hover); color: var(--ss-rail-ink-hover); text-decoration: none; }
.ss-rail .ss-rail-go[aria-current="page"] { background: var(--ss-rail-on); color: #ffffff; }
.ss-rail .ss-rail-go:focus-visible { outline: 2px solid var(--ss-rail-dot); outline-offset: -2px; }
.ss-rail-go .g { position: relative; display: block; flex: none; width: var(--ss-rail-glyph); height: var(--ss-rail-glyph); }
.ss-rail-go .g svg { display: block; width: 100%; height: 100%; }
.ss-rail-go .dot { position: absolute; top: -3px; right: -5px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--ss-rail-dot); border: 2px solid var(--ss-rail-bg); }
.ss-rail .ss-rail-go:hover .dot { border-color: var(--ss-rail-hover-solid); }
.ss-rail .ss-rail-go[aria-current="page"] .dot { border-color: var(--ss-rail-on-solid); }
@media (prefers-reduced-motion: reduce) { .ss-rail .ss-rail-go { transition: none; } }
.ss-rail-gap { flex: 1 1 auto; }
.ss-rail .ss-rail-me { height: calc(var(--ss-rail-face) + 18px); }
.ss-rail-me .face { position: relative; display: block; flex: none; width: var(--ss-rail-face); height: var(--ss-rail-face); border-radius: 50%; }
.ss-rail-me img, .ss-rail-me .lt { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ss-rail-me .lt { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8b7fff, #5146e8); color: #ffffff; font-size: 18px; font-weight: 700; }
.ss-rail-me img + .lt { display: none; }
.ss-rail-me.ringed .face::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ucol) 0 var(--pct), var(--ss-rail-track) var(--pct) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.ss-rail-me.ringed img, .ss-rail-me.ringed .lt { position: absolute; top: var(--ss-rail-photo-at); left: var(--ss-rail-photo-at); width: calc(var(--ss-rail-face) - 2 * var(--ss-rail-photo-at)); height: calc(var(--ss-rail-face) - 2 * var(--ss-rail-photo-at)); font-size: 16px; }
@media (max-width: 1199px) { :root { --ss-rail-under-mark: 36px; } }
@media (max-width: 1023px) { :root { --ss-rail-under-mark: 34px; } }
@media (max-width: 860px) {
    .ss-rail { position: static; flex: none; width: 100%; height: auto; flex-direction: row; gap: 2px; padding: 0 12px;
        --ss-rail-glyph: 28px; --ss-rail-face: 40px; --ss-rail-photo-at: 4px; }
    .ss-rail .ss-rail-mark { flex: none; height: auto; margin: 0 8px 0 0; }
    .ss-rail-mark .mk { width: 34px; height: 33px; }
    .ss-rail .ss-rail-go { flex: 0 1 56px; min-width: 42px; height: 60px; }
    .ss-rail .ss-rail-me { flex: none; width: 56px; }
}
.ss-viewing { position: fixed; z-index: 2100; left: 50%; bottom: 16px; transform: translateX(-50%); box-sizing: border-box;
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 999px;
    background: var(--ss-rail-bg); color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.2;
    box-shadow: 0 6px 24px rgba(15, 21, 66, .28); transition: background-color .2s ease; }
.ss-viewing .eye { flex: none; width: 18px; height: 18px; color: var(--ss-rail-dot); }
.ss-viewing .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-viewing .w b { font-weight: 800; }
.ss-viewing button { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(255, 255, 255, .14); color: #ffffff;
    font: inherit; cursor: pointer; }
.ss-viewing button:hover { background: rgba(255, 255, 255, .24); }
.ss-viewing button:disabled { opacity: .5; cursor: default; }
.ss-viewing.refused { background: #5146e8; }
.ss-viewing.refused .eye { color: #ffffff; }
body.ob-app {
    background: var(--ob-canvas);
    font-family: var(--ob-font);
    color: var(--ob-ink);
    -webkit-font-smoothing: antialiased;
}
body.ob-app::before { display: none; }
body.ob-app .site-footer { display: none; }
body.ob-app #Main {
    position: static;
    margin: 0;
    min-height: 100vh;
}
.ss-op-main { display: flex; flex-direction: column; }
.ss-op {
    --cols: 3;
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(var(--cols) * 430px + (var(--cols) - 1) * 22px);
    margin: 0 auto;
}
.ss-op-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 14px -6px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ob-muted);
    font: 600 14px var(--ob-font);
    cursor: pointer;
    & svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    &:hover { color: var(--ob-ink); background: var(--ob-grey-bg); }
}
.ss-op-h1 { margin: 0 0 12px; font-family: var(--ss-font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ss-title-ink); }
.ss-op-say { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ob-muted); }
.ss-op-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 40px;
    font-size: 14.5px;
    color: var(--ob-ink-2);
    .n { font-weight: 700; color: var(--ob-ink); }
    .w { color: var(--ob-muted); }
}
.ss-op-wait { min-height: 220px; display: grid; place-items: center; color: var(--ob-muted); }
.ss-op-wait::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    animation: ob-spin .8s linear infinite, ss-wait-in .2s .5s both;
}
.ss-op-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 34px 22px;
}
.ss-op-card {
    --ob-ground: var(--ob-card);
    --ob-badge-ring: var(--ob-card);
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--ob-card);
    border: var(--ob-frame-line) solid var(--ob-line);
    border-radius: var(--ob-radius-row);
    box-shadow: var(--ss-card-sh);
    transition: border-color .12s, box-shadow .12s;
    &:hover, &.busy { border-color: var(--ob-accent-ring); }
    > .ob-compose { flex: 1 0 auto; }
    > .ob-compose > .write { flex: 1 0 auto; }
}
@media (max-width: 1199px) {
    .ss-op[style*="--cols: 3"] { --cols: 2 !important; }
}
@media (max-width: 860px) {
    .ss-op, .ss-op[style] { --cols: 1 !important; max-width: 560px; }
    .ss-op-h1 { font-size: 24px; }
    .ss-op-who { margin-bottom: 34px; }
}
.ob-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ob-font);
    .shade {
        position: absolute;
        inset: 0;
        background: var(--ob-shade);
        cursor: pointer;
        animation: ob-shade-in .25s ease-out;
    }
    &.settled .shade, &.settled .ob-modal { animation: none; }
}
@keyframes ob-shade-in { from { opacity: 0; } }
.ob-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ob-card);
    border-radius: var(--ob-radius-row);
    box-shadow: var(--ob-shadow-modal);
    overflow: hidden;
    transform-origin: 0 0;
    animation: ob-expand .32s cubic-bezier(.2, .8, .2, 1);
    .x {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .x > svg { width: 14px; height: 14px; }
    .x:hover { background: var(--ob-line); color: var(--ob-ink); }
    .slot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
}
@keyframes ob-expand {
    from { transform: translateY(24px) scale(.96); opacity: .5; }
}
.ss-md-main { display: flex; flex-direction: column; }
.ss-md {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 24px;
    transition: background .12s, box-shadow .12s;
}
.ss-md.over { background: var(--ob-accent-bg); box-shadow: 0 0 0 10px var(--ob-accent-bg), 0 0 0 12px var(--ob-accent-ring); }
.ss-md-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin: 6px 0 28px;
    .acts { display: flex; align-items: center; gap: 14px; }
    .room { font-size: 13.5px; color: var(--ob-muted); white-space: nowrap; }
}
.ss-md-h1 { margin: 0 0 8px; font-family: var(--ss-font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ss-title-ink); }
.ss-md-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ob-ink-2); }
.ss-md-note { margin: -12px 0 18px; font-size: 14px; color: var(--ss-fail-ink, var(--ob-rose-ink)); }
.ss-md-empty { margin: 8px 2px; font-size: 15px; line-height: 1.5; color: var(--ss-range-off, var(--ob-muted)); }
.ss-md-wait { min-height: 220px; display: grid; place-items: center; color: var(--ob-muted); }
.ss-md-wait::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    animation: ob-spin .8s linear infinite, ss-wait-in .2s .5s both;
}
.ss-md-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 18px;
}
.ss-md-tile {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    background: var(--ob-grey-bg);
    box-shadow: var(--ss-card-sh);
    > .pic {
        display: block;
        width: 100%;
        height: 100%;
        & img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--fade, 1); transition: opacity .2s, transform .25s; }
    }
    &::before, &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 42%;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
    }
    &::before { top: 0; background: linear-gradient(to bottom, rgba(12, 12, 30, .55), rgba(12, 12, 30, 0)); }
    &::after { bottom: 0; background: linear-gradient(to top, rgba(12, 12, 30, .7), rgba(12, 12, 30, 0)); }
    > .ref, > .foot { position: absolute; z-index: 1; opacity: 0; transition: opacity .15s; pointer-events: none; }
    > .ref {
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px 0 8px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font: 600 12.5px var(--ob-mono);
        letter-spacing: .03em;
        cursor: pointer;
        backdrop-filter: blur(6px);
        & svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        &:hover { background: rgba(255, 255, 255, .28); }
    }
    > .foot {
        left: 12px;
        right: 10px;
        bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #fff;
        .when { min-width: 0; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
        .clear {
            flex: 0 0 auto;
            height: 30px;
            padding: 0 12px;
            border: 0;
            border-radius: 999px;
            background: #fff;
            color: var(--ss-fail-ink, var(--ob-rose-ink));
            font: 700 12.5px var(--ob-font);
            cursor: pointer;
            &:hover { background: var(--ob-rose-bg); }
        }
    }
    &:hover, &.open, &:focus-within {
        &::before, &::after, > .ref, > .foot { opacity: 1; }
        > .ref, > .foot { pointer-events: auto; }
        > .pic img { transform: scale(1.03); }
    }
    &.fading > .foot .when { color: #ffd2d8; }
    &.arriving > .pic img { animation: ss-md-pulse 1.1s ease-in-out infinite alternate; }
}
@keyframes ss-md-pulse { from { opacity: .45; } to { opacity: .9; } }
@media (max-width: 860px) {
    .ss-md-h1 { font-size: 24px; }
    .ss-md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ss-md.over { box-shadow: none; }
}
.ob-ceremony {
    --ob-cer-col: 400px;
    display: flex;
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    font-family: var(--ob-font);
    color: var(--ob-ink);
    .brand {
        flex: 0 0 40%;
        max-width: 560px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 40px;
        border-radius: var(--ob-radius);
        background: #ebf0fe;
        box-sizing: border-box;
        .ob-sitelogo { align-self: flex-start; }
    }
    .art {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .art .robot {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 760px;
        object-fit: contain;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
        mask-composite: intersect;
    }
    .stage {
        flex: 1;
        position: relative;
        display: flex;
        min-width: 0;
    }
    .corner {
        position: absolute;
        top: 24px;
        right: 32px;
        min-height: 20px;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--ob-muted);
    }
    .corner .ob-clink { margin-left: 4px; }
    .body {
        margin: auto;
        width: var(--ob-cer-col);
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    .foot {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 22px;
        font-size: 12.5px;
        font-weight: 600;
    }
    .foot a { color: var(--ob-muted); text-decoration: none; }
    .foot a:hover { color: var(--ob-ink); }
}
.ob-clink {
    color: var(--ob-accent-ink);
    font-weight: 700;
    text-decoration: none;
}
.ob-clink:hover { text-decoration: underline; }
.ob-cstep {
    display: flex;
    flex-direction: column;
    width: 100%;
    .title {
        margin: 0;
        font-size: 40px;
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.05;
        color: var(--ob-ink);
    }
    .title.sm { font-size: 30px; }
    .sub {
        margin-top: 12px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--ob-ink-2);
    }
    .sub strong { color: var(--ob-ink); font-weight: 700; }
    .sub .ob-clink { margin-left: 6px; font-size: 13.5px; }
    .controls {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .err {
        min-height: 1.5em;
        line-height: 1.5em;
        font-size: 13px;
        font-weight: 600;
        color: var(--ob-rose-ink);
        text-align: center;
    }
    .err.ok { color: var(--ob-mint-ink); }
    .err.note { color: var(--ob-ink-2); }
    .ob-addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
    .err.under:empty { display: none; }
    .alt {
        margin-top: 20px;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
    }
    .fine {
        margin-top: 22px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.6;
        text-align: center;
        color: var(--ob-muted);
    }
    .fine a { color: var(--ob-ink-2); font-weight: 600; text-decoration: none; }
    .fine a:hover { text-decoration: underline; }
    .ob-or {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 14px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ob-muted);
        &::before, &::after { content: ''; flex: 1; height: 1px; background: var(--ob-line); }
    }
    .ob-otherways {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ob-way {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        & svg { width: 18px; height: 18px; flex: none; }
    }
    .ob-way[hidden] { display: none; }
    .ob-input.lg {
        height: 50px;
        padding: 0 18px;
        font-size: 16px;
        border-radius: var(--ob-radius-tile);
    }
    .ob-input.has-error { border-color: var(--ob-rose-ink); box-shadow: 0 0 0 3px var(--ob-rose-bg); }
    .choices {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .choice {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-tile);
        background: var(--ob-card);
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        transition: border-color .12s, background .12s;
    }
    .choice:hover { border-color: var(--ob-accent-ring); background: var(--ob-accent-tint); }
    .choice .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .choice .icon svg { width: 18px; height: 18px; }
    .choice .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .choice .t { font-size: 14px; font-weight: 700; color: var(--ob-ink); }
    .choice .n { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ob-muted); }
    .choice .go { flex: 0 0 auto; color: var(--ob-faint-3); }
    .choice .go svg { width: 16px; height: 16px; }
    .benefits {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
    }
    .benefit .icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .benefit .icon svg { width: 14px; height: 14px; }
}
.ob-pill.lg { height: 50px; font-size: 15px; }
.ob-pill.lg svg { width: 20px; height: 20px; }
.ob-otp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 4px;
    .real {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: text;
        border: none;
        background: transparent;
        font-size: 16px;
    }
    .digit {
        flex: 1 1 0;
        min-width: 0;
        max-width: 40px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ob-line);
        border-radius: 12px;
        background: var(--ob-card);
        font-family: var(--ob-font);
        font-size: 22px;
        font-weight: 800;
        color: var(--ob-ink);
        transition: border-color .12s, box-shadow .12s;
        user-select: none;
        pointer-events: none;
    }
    .sep { width: 10px; height: 2px; border-radius: 2px; background: var(--ob-faint-2); }
    .digit.is-active { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .digit.is-active::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 22px;
        border-radius: 2px;
        background: var(--ob-accent);
        animation: ob-otp-blink 1s step-end infinite;
    }
    .digit.has-value { border-color: var(--ob-accent-ring); }
    .digit.has-value::after { display: none; }
    &.has-error .digit { border-color: var(--ob-rose-ink); background: var(--ob-rose-card); }
    &.is-disabled .digit { background: var(--ob-canvas); color: var(--ob-muted); }
}
.ob-otp ~ .status,
.ob-unlock {
    .status {
        margin: 0 0 14px;
        min-height: 1.5em;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--ob-ink-2);
    }
    [widget-dom="passkey_status"]:empty { display: none; }
    .err {
        min-height: 1.5em;
        line-height: 1.5em;
        font-size: 13px;
        font-weight: 600;
        color: var(--ob-rose-ink);
        text-align: center;
    }
    .err.ok { color: var(--ob-mint-ink); }
}
.ob-tzpick {
    .ob-input.lg { height: 50px; padding: 0 18px; font-size: 16px; border-radius: var(--ob-radius-tile); }
    .tzwrap { display: contents; }
    .tzlist {
        margin-top: 12px;
        height: 46vh;
        min-height: 240px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .tzrow {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: var(--ob-radius-tile);
        background: transparent;
        text-align: left;
        cursor: pointer;
        font-family: var(--ob-font);
    }
    .tzrow:hover { background: var(--ob-canvas); }
    .tzrow.on { background: var(--ob-accent-bg); }
    .tzrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--ob-ink); }
    .tzrow .hm { font-size: 13.5px; font-weight: 600; color: var(--ob-muted); font-variant-numeric: tabular-nums; }
    .tzrow.on .nm,
    .tzrow.on .hm { color: var(--ob-accent-ink); }
}
@keyframes ob-otp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.ob-signedin {
    > .ob-circle { margin-bottom: 22px; }
    .ob-circle img { width: 100%; height: 100%; object-fit: cover; }
}
.ob-passkeys {
    padding: 8px 22px 16px;
    .row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ob-line-in);
    }
    .row .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
    }
    .row .icon svg { width: 18px; height: 18px; }
    .row .text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .row .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
    .row .n { font-size: 12.5px; font-weight: 500; color: var(--ob-muted); }
    .grow { flex: 1; }
    .row.add {
        border-bottom: 0;
        color: var(--ob-ink-2);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .row.add .icon { background: var(--ob-canvas); color: var(--ob-ink-2); }
    .row.add:hover .icon { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
}
.ob-psect {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--ob-line-in);
}
.ob-psect.first { margin-top: 0; padding-top: 0; border-top: 0; }
.ob-devices {
    .row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ob-line-in);
    }
    .row:last-of-type { border-bottom: 0; }
    .icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    .icon svg { width: 18px; height: 18px; }
    .row.here .icon { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
    .n { font-size: 12.5px; font-weight: 500; color: var(--ob-muted); }
    .n .here { font-weight: 700; color: var(--ob-accent-ink); }
    .grow { flex: 1; }
}
.ob-hrow {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 44px;
    gap: var(--ob-log-gap);
    align-items: center;
    min-height: var(--ob-log-h);
    padding: 0 8px;
    margin: 0 -8px;
    border-radius: 10px;
    color: var(--ob-ink);
    .ico {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    .ico svg { width: 12px; height: 12px; }
    .ico.ok { background: var(--ob-mint-bg); color: var(--ob-mint-ink); }
    .ico.bad { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    .ico.key { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .act {
        min-width: 0;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dev { font-size: 12px; font-weight: 500; color: var(--ob-faint-1); white-space: nowrap; text-align: right; }
    .when { font-size: 12px; font-weight: 600; color: var(--ob-faint-1); text-align: right; font-variant-numeric: tabular-nums; }
    &.fail .act { color: var(--ob-rose-ink); }
}
.ob-history .more {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.ob-psect.ob-history { padding-top: 0; border-top: 0; }
.ob-hday {
    margin: 14px 0 2px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-faint-1);
}
@media (max-width: 900px) {
    .ob-ceremony {
        padding: 0;
        gap: 0;
    }
    .ob-ceremony { position: relative; }
    .ob-ceremony .brand { position: absolute; top: 12px; left: 16px; z-index: 2; flex: none; max-width: none; padding: 0; gap: 0; background: none; border-radius: 0; }
    .ob-ceremony .brand .art { display: none; }
    .ob-ceremony .stage { padding: 64px 20px; }
    .ob-ceremony .corner { top: 10px; right: 16px; }
    .ob-ceremony .corner .ob-clink { display: inline-block; padding: 10px 0; }
    .ob-ceremony .body { width: 100%; max-width: 440px; }
    .ob-cstep .title { font-size: 32px; }
    .ob-otp .digit { max-width: 34px; height: 44px; font-size: 19px; }
}
.ob-cstep .ob-connectacts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ob-grantstep {
    .ob-meets {
        display: flex;
        flex-direction: column;
        margin-top: 22px;
        padding: 4px 16px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius);
        background: var(--ob-card);
        .side {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
        }
        .ob-square, .ob-circle { width: 36px; height: 36px; }
        .ob-square img { width: 20px; height: 20px; object-fit: contain; }
        .ob-square svg { width: 18px; height: 18px; }
        .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .t { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); overflow-wrap: anywhere; }
        .n { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); overflow-wrap: anywhere; }
        .side.unknown {
            margin: 6px -10px;
            padding: 12px 10px;
            border-radius: 12px;
            background: var(--ob-butter-bg);
        }
        .side.unknown .ob-square { background: var(--ob-butter-edge); color: var(--ob-butter-ink); }
        .side.unknown .n { font-weight: 700; color: var(--ob-butter-ink); }
        .to {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ob-muted);
            & svg { flex: none; width: 36px; height: 14px; }
            &::after { content: ""; flex: 1; height: 1px; background: var(--ob-line-in); }
        }
    }
    .ob-warnacts { margin-top: 28px; }
    > .ob-lbl { margin: 26px 0 0; }
    .choices { margin-top: 10px; gap: 8px; }
    .choice { padding: 11px 14px; gap: 12px; }
    .choice .dot {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid var(--ob-line);
        background: var(--ob-card);
    }
    .choice.on { border-color: var(--ob-accent-ring); background: var(--ob-accent-tint); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    .choice.on .dot { border: 5px solid var(--ob-accent); }
    .ob-namefield { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
    .ob-namefield .ob-lbl { margin: 0; }
    .err { margin-top: 10px; }
    .ob-connectacts { margin-top: 6px; }
}
.ob-cstep .ob-connectcancel { margin-top: 26px; }
:root {
    --ss-idea-edge: #bdb7f4;
    --ss-idea-edge-hover: #8f86ee;
    --ss-idea-ground: rgba(255,255,255,.5);
    --ss-bulb-bg: #f0eff8;
    --ss-bulb-ring: #e4e2f3;
    --ss-bulb-ink: #6b66a6;
    --ss-bulb-text: #4b4690;
    --ss-bulb-faint: #9893c9;
}
.ss-idea .bulb svg,
.ss-post.idea .ib svg,
.ss-bulbg svg,
.ss-usedpop .ib svg,
.ob-srow .ob-bulb svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ss-idea-pulse { from { opacity: .45; } to { opacity: .8; } }
.ss-ip-main { display: flex; flex-direction: column; }
.ss-ip { flex: 1 0 auto; width: 100%; max-width: 680px; margin: 0 auto; }
.ss-ip-h1 { margin: 6px 0 26px; font-family: var(--ss-font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ss-title-ink); }
.ss-ip-write {
    --ob-ground: var(--ob-card);
    --ob-badge-ring: var(--ob-card);
    position: relative;
    margin: 0 0 30px;
    box-sizing: border-box;
    background: var(--ob-card);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    border-radius: var(--ob-radius-row);
    box-shadow: var(--ss-card-sh);
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.ss-ip-write.over { background: var(--ob-accent-bg); border-color: var(--ob-accent); box-shadow: 0 0 0 6px var(--ob-accent-halo-1); }
.ss-ip-write > .slot { display: flex; flex-direction: column; }
.ss-ip-write .ob-compose .ob-srow .text { font-size: 16px; }
.ss-ip-cards { display: flex; flex-direction: column; gap: 12px; }
.ss-ip-cards:empty { display: none; }
.ss-ip-empty { margin: 2px 4px; font-size: 14.5px; line-height: 1.5; color: var(--ss-range-off); }
@media (max-width: 860px) {
    .ss-ip-h1 { margin: 4px 0 22px; font-size: 24px; }
}
.ss-idea {
    padding: 10px 10px 14px 16px;
    border: 1.5px dashed var(--ss-idea-edge);
    border-radius: 20px;
    background: var(--ss-idea-ground);
    transition: background .15s, border-color .15s;
}
.ss-idea:hover { background: var(--ss-card-bg); border-color: var(--ss-idea-edge-hover); }
.ss-idea.over { background: var(--ss-wait-bg); border-style: solid; border-color: var(--ss-ring); }
.ss-idea.busy .body { animation: ss-idea-pulse 1s ease-in-out infinite alternate; }
.ss-idea .head { display: flex; align-items: center; gap: 8px; }
.ss-idea .bulb { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ss-wait-bg); color: var(--ss-dot); }
.ss-idea .bulb svg { width: 15px; height: 15px; }
.ss-idea .tag { font-size: 13px; font-weight: 600; color: var(--ss-sched-ink); white-space: nowrap; }
.ss-idea .tag.timed { color: var(--ss-tag-wait); }
.ss-idea .to { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-col-ink2); --x-ring: var(--ss-page); }
.ss-idea:hover .to { --x-ring: var(--ss-card-bg); }
.ss-idea .to .tw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-idea .seen { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--ss-sent-bg); color: var(--ss-sent-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ss-idea .seen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ss-idea .del { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ss-range-off); }
.ss-idea .del:hover { background: var(--ss-wait-bg); color: var(--ss-ink); }
.ss-idea .del svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-idea .body { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 0 6px 0 0; border: 0; background: none; text-align: left; }
.ss-idea .body:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 3px; border-radius: 6px; }
.ss-idea .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ss-idea .ims { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-idea .text + .ims { margin-top: 10px; }
.ss-idea .ims img { display: block; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.ss-idea .note { margin: 8px 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ss-tag-fail); }
.ss-idea .ask { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-right: 6px; }
.ss-idea .ask .q { margin-right: auto; font-size: 14px; font-weight: 600; color: var(--ss-tag-fail); }
.ss-idea .ask .ss-btn { min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.ss-btn.danger { background: var(--ss-fail-bg); color: var(--ss-fail-ink); }
.ss-btn.danger:hover { background: #ffd6da; }
.ss-post.idea { background: rgba(255,255,255,.4); border: 1.5px dashed var(--ss-idea-edge); transition: background .15s, border-color .15s; }
.ss-post.idea:hover { background: var(--ss-card-bg); border-color: var(--ss-idea-edge-hover); }
.ss-post.idea.over { background: var(--ss-wait-bg); border-style: solid; border-color: var(--ss-ring); }
.ss-post.idea.busy p { animation: ss-idea-pulse 1s ease-in-out infinite alternate; }
.ss-post.idea p { color: var(--ss-wait-text); }
.ss-post.idea p .w { font-style: italic; }
.ss-post.idea .t { color: var(--ss-tag-wait); }
.ss-post.idea .ib { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ss-wait-bg); color: var(--ss-dot); }
.ss-post.idea .ib svg { width: 15px; height: 15px; }
.ss-cal.compact .ss-post.idea .ib { width: 22px; height: 22px; }
.ss-cal.compact .ss-post.idea .ib svg { width: 13px; height: 13px; }
.ss-post.idea .dn { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ss-tag-fail); }
.ss-day { position: relative; }
.ss-dh .ss-bulbg {
    align-self: baseline;
    position: relative;
    top: 1px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ss-bulb-faint);
    transition: background .15s;
}
.ss-dh .ss-bulbg:hover { background: var(--ss-bulb-bg); }
.ss-dh .ss-bulbg:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 1px; }
.ss-dh .ss-bulbg svg { width: 14px; height: 14px; }
.ss-usedpop {
    position: absolute;
    top: 40px;
    z-index: 6;
    width: min(300px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px 8px 8px;
    border-radius: 16px;
    background: var(--ss-card-bg);
    box-shadow: 0 2px 6px rgba(23,25,45,.06), 0 22px 50px rgba(20,16,70,.18);
}
.ss-usedpop.start { left: 0; }
.ss-usedpop.end { right: 0; }
.ss-usedpop.mid { left: 50%; transform: translateX(-50%); }
.ss-cal.compact .ss-usedpop { top: 34px; }
.ss-usedpop .hd { padding: 0 8px 8px; font-size: 12.5px; font-weight: 600; color: var(--ss-day-name); }
.ss-usedpop .row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}
.ss-usedpop .row + .row { margin-top: 2px; }
.ss-usedpop .row:hover { background: var(--ss-bulb-bg); }
.ss-usedpop .row:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: -2px; }
.ss-usedpop .ib { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ss-bulb-bg); box-shadow: inset 0 0 0 1px var(--ss-bulb-ring); color: var(--ss-bulb-ink); }
.ss-usedpop .ib svg { width: 15px; height: 15px; }
.ss-usedpop .tx { flex: 1 1 auto; min-width: 0; }
.ss-usedpop .w { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 13.5px; line-height: 19px; color: var(--ss-card-ink); }
.ss-usedpop .n { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ss-day-name); }
.ob-compose.idea > .rim.r-idea-used { background: var(--ss-bulb-bg); color: var(--ss-bulb-text); border-color: var(--ss-bulb-ring); }
.ob-compose.idea.used { padding-bottom: 24px; }
.ob-srow .ob-bulb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ob-accent-bg); color: var(--ob-accent); }
.ob-compose.idea.used .ob-srow .ob-bulb { background: var(--ss-bulb-bg); color: var(--ss-bulb-ink); }
.ob-srow .ob-bulb svg { width: 22px; height: 22px; }
.ob-compose.idea .ob-srow .text.ob-ed:empty::before { content: "What's the idea?"; }
.ob-compose.idea:not(.used) .ob-srow .text.ob-ed { min-height: 7.5em; }
.ob-compose.idea .ob-srow .body > .left { text-align: right; }
.ob-compose.idea .ob-srow .body > .left.over { color: var(--ss-tag-fail); }
.ob-srow .text.cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.ob-compose.idea button.more { align-self: flex-start; margin: 6px 0 0 58px; padding: 4px 0; border: 0; background: none; color: var(--ob-accent-ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ob-compose.idea button.more:hover { text-decoration: underline; }
.ob-compose.idea button.more:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; border-radius: 4px; }
.ob-compose.idea .from { margin: 20px 34px 0 58px; font-size: 13px; font-weight: 600; color: var(--ob-ink-2); }
.ob-compose.idea .posts { display: flex; flex-direction: column; gap: 8px; margin: 8px 34px 0 58px; }
.ob-compose.idea .posts > .post {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: var(--ss-sched-bg);
    box-shadow: inset 0 0 0 1px var(--ob-line);
    color: var(--ss-sched-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .12s;
}
.ob-compose.idea .posts > .post.t-wait { background: var(--ss-wait-bg); box-shadow: none; color: var(--ss-wait-text); }
.ob-compose.idea .posts > .post.t-went { background: var(--ss-sent-bg); box-shadow: none; color: var(--ss-sent-text); }
.ob-compose.idea .posts > .post.t-stop { background: var(--ss-fail-bg); box-shadow: none; color: var(--ss-fail-text); }
.ob-compose.idea .posts > .post.t-held { background: var(--ob-butter-bg); box-shadow: none; color: var(--ob-butter-ink); }
.ob-compose.idea .posts > .post:hover { box-shadow: 0 0 0 1.5px var(--ob-accent); }
.ob-compose.idea .posts > .post:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob-compose.idea .posts > .post .pw { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-compose.idea .posts > .post .pt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.ob-compose.idea .posts > .post .ps { font-size: 12.5px; font-weight: 700; color: var(--ss-sched-ink); }
.ob-compose.idea .posts > .post.t-wait .ps { color: var(--ss-tag-wait); }
.ob-compose.idea .posts > .post.t-went .ps { color: var(--ss-sent-ink); }
.ob-compose.idea .posts > .post.t-stop .ps { color: var(--ss-fail-ink); }
@media (max-width: 699px) {
    .ob-srow .ob-bulb { width: 36px; height: 36px; }
    .ob-compose.idea button.more { margin-left: 0; }
    .ob-compose.idea .from, .ob-compose.idea .posts { margin-left: 0; margin-right: 0; }
}
.ob-reconnect {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 var(--ob-home-card-gap);
    .box {
        --ob-badge-ring: var(--ob-on-accent);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 18px 18px 18px 22px;
        border-radius: var(--ob-radius-row);
        background: var(--ob-accent);
        color: var(--ob-on-accent);
        font-family: var(--ob-font);
    }
    .words {
        position: relative;
        z-index: 1;
        flex: 1 1 260px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    & b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
    .why { font-size: 14px; font-weight: 600; line-height: 1.5; opacity: .9; }
    .ob-pill {
        position: relative;
        z-index: 1;
        flex: none;
        background: var(--ob-on-accent);
        color: var(--ob-accent-ink);
        font-weight: 800;
        box-shadow: var(--ob-shadow-on-accent);
    }
    .ob-pill:hover { background: var(--ob-accent-bg); }
}
.ob-confirmconn {
    .ob-keytile {
        position: relative;
        z-index: 1;
        flex: none;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .16);
        box-shadow: inset 0 0 0 2px var(--ob-on-accent);
        & svg { width: 22px; height: 22px; }
    }
    .acts {
        position: relative;
        z-index: 1;
        flex: none;
        display: flex;
        gap: 8px;
    }
    .ob-pill.quiet {
        background: transparent;
        color: var(--ob-on-accent);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
    }
    .ob-pill.quiet:hover { background: rgba(255, 255, 255, .12); }
}
.ob-decide { min-width: 0; }
.ob-decide.pop { animation: ob-card-in .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ob-card-in {
    0%   { opacity: 0; transform: scale(.94); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-decide.pop { animation: none; }
}
.popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--ob-font);
    .shade {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: var(--ob-shade);
        cursor: pointer;
        animation: ob-shade-in .25s ease-out;
    }
    .modal {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 440px;
        background: var(--ob-card);
        border-radius: var(--ob-radius-row);
        box-shadow: var(--ob-shadow-modal);
        animation: ob-dialog-in .28s cubic-bezier(.2, .8, .2, 1);
    }
    &.settled .shade, &.settled .modal { animation: none; }
    &.handed .shade { animation: none; }
    .modal-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 22px 22px 0;
        & h4 {
            margin: 0;
            flex: 1;
            min-width: 0;
            font-size: 17px;
            font-weight: 800;
            line-height: 1.3;
            color: var(--ob-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .modal-tone {
            flex: 0 0 auto;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--ob-accent-bg);
            color: var(--ob-accent-ink);
            & svg { width: 16px; height: 16px; }
        }
    }
    &.tone-warn .modal-tone { background: var(--ob-butter-bg); color: var(--ob-butter-ink); }
    &.tone-error .modal-tone { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    .modal-close {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .12s, color .12s;
        & svg { width: 13px; height: 13px; }
        &:hover { background: var(--ob-line); color: var(--ob-ink); }
        &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
    }
    .modal-content {
        display: flex;
        flex-direction: column;
        padding: 16px 22px 22px;
        & p {
            margin: 0;
            font-size: 13.5px;
            font-weight: 500;
            line-height: 1.55;
            color: var(--ob-ink-2);
        }
        & p + p { margin-top: 10px; }
        & p a { color: var(--ob-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
        & p a:hover { color: var(--ob-accent); }
    }
    .modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 18px;
        .ob-pill { flex: 1 1 auto; }
        &.stack {
            flex-direction: column;
            gap: 8px;
            margin-top: 14px;
        }
        &.stack .ob-pill.text { align-self: center; }
    }
}
@keyframes ob-dialog-in {
    from { transform: translateY(10px) scale(.97); opacity: 0; }
}
@media (max-width: 600px) {
    .popup {
        padding: 16px;
        .modal-header { padding: 18px 16px 0; }
        .modal-content { padding: 14px 16px 18px; }
    }
    .popup .ob-otp { gap: 6px; }
}
.popup.ob-connect {
    .modal {
        max-width: 470px;
        box-sizing: border-box;
        padding: 52px 40px 30px;
        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 30px 80px rgba(20, 16, 60, .28), 0 2px 8px rgba(20, 16, 60, .08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-family: var(--ss-font-body);
        color: var(--ss-ink);
    }
    .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        background: var(--ss-soft-bg);
        color: var(--ss-more-fg);
        & svg { width: 15px; height: 15px; }
    }
    .cn-pics { display: flex; align-items: center; }
    .cn-us, .cn-them { position: relative; flex: none; width: 100px; height: 100px; border-radius: 50%; }
    .cn-us {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #efedff;
        box-shadow: 0 12px 28px rgba(81, 70, 232, .18);
        & img { display: block; width: 64%; height: auto; }
    }
    .cn-them {
        box-shadow: 0 12px 28px rgba(22, 23, 29, .22);
        .net { display: block; width: 100%; height: 100%; border-radius: 50%; }
        .pic { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .lt {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #8b7fff, #5146e8);
            color: #ffffff;
            font-family: var(--ss-font-display);
            font-size: 42px;
            font-weight: 700;
        }
        .badge { position: absolute; z-index: 2; right: -2px; bottom: -2px; width: 32px; height: 32px; box-sizing: border-box; border: 3px solid #ffffff; border-radius: 50%; background: #ffffff; }
    }
    .cn-join {
        --cn-line: #b9b3f5;
        position: relative;
        flex: none;
        width: 84px;
        height: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: repeating-linear-gradient(90deg, var(--cn-line) 0 6px, transparent 6px 12px);
        .chip {
            position: absolute;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: var(--ss-tab-on-num);
            box-shadow: 0 0 0 1.5px #e3e1fb, 0 4px 10px rgba(60, 50, 140, .12);
            & svg { width: 16px; height: 16px; }
        }
        &.linked { height: 3px; background: var(--cn-line); }
        &.linked .chip { width: 38px; height: 38px; background: #ebe9ff; box-shadow: 0 0 0 4px #ffffff, 0 4px 10px rgba(60, 50, 140, .14); }
        &.warn { --cn-line: #f0c56b; }
        &.warn .chip { width: 36px; height: 36px; background: #fff4d6; color: #8a5a00; box-shadow: 0 0 0 4px #ffffff, 0 4px 10px rgba(138, 90, 0, .16); }
        &.warn .chip svg { width: 18px; height: 18px; }
        &.ok { height: 3px; background: #2fbf7a; }
        &.ok .chip { width: 46px; height: 46px; background: #1f9d5c; color: #ffffff; box-shadow: 0 0 0 5px #ffffff, 0 8px 20px rgba(31, 157, 92, .40); animation: cn-pop .5s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
        &.ok .chip svg { width: 24px; height: 24px; }
        &.error { --cn-line: #f3a3a6; }
        &.error .chip { width: 40px; height: 40px; background: #e5484d; color: #ffffff; box-shadow: 0 0 0 4px #ffffff, 0 6px 14px rgba(229, 72, 77, .32); }
        &.error .chip svg { width: 18px; height: 18px; }
        &.off { --cn-line: #c9cad4; }
        &.off .chip { width: 36px; height: 36px; background: var(--ss-soft-bg); color: var(--ss-col-ink2); box-shadow: 0 0 0 4px #ffffff; }
    }
    .cn-title { margin: 34px 0 0; font-family: var(--ss-font-display); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ss-ink); }
    .cn-line {
        margin: 10px 0 0;
        max-width: 360px;
        font-size: 15px;
        line-height: 1.5;
        color: var(--ss-col-ink2);
        overflow-wrap: anywhere;
        & b { font-weight: 600; color: var(--ss-ink); }
    }
    .cn-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
    .cn-pick {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 36px;
        padding: 0 12px 0 6px;
        border: 0;
        border-radius: 999px;
        background: var(--ss-soft-bg);
        font: 600 13.5px var(--ss-font-body);
        color: var(--ss-ink);
        cursor: pointer;
        & img { width: 24px; height: 24px; border-radius: 50%; }
        &.on { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--ss-tab-on-num); color: var(--ss-tab-on-label); }
        &:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 2px; }
    }
    .cn-pages { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 22px; max-height: 320px; overflow-y: auto; }
    .cn-page {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 60px;
        padding: 10px 14px 10px 10px;
        border: 0;
        border-radius: 16px;
        background: var(--ss-soft-bg);
        font: 600 15px var(--ss-font-body);
        color: var(--ss-ink);
        text-align: left;
        cursor: pointer;
        &:hover:not(:disabled) { background: #ebe9ff; }
        &.on { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--ss-tab-on-num); }
        &:disabled { cursor: default; }
        &.here { opacity: .55; }
        &:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 2px; }
        .pg-face { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
        .pg-face .lt { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #8b7fff, #5146e8); color: #ffffff; font: 700 17px var(--ss-font-display); }
        .pg-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .pg-words { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        .pg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pg-handle { font-size: 13px; font-weight: 500; color: var(--ss-col-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pg-here { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ss-col-ink2); }
    }
    .cn-refused {
        margin: 14px 0 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--ss-tag-fail);
        & a { color: inherit; font-weight: 700; }
    }
    .cn-go {
        margin-top: 30px;
        width: 100%;
        min-height: 52px;
        border: 0;
        border-radius: 16px;
        background: var(--ss-btn-bg);
        color: var(--ss-btn-fg);
        font: 600 16px var(--ss-font-body);
        box-shadow: 0 8px 20px rgba(81, 70, 232, .30);
        cursor: pointer;
        transition: filter .12s;
        &:hover { filter: brightness(1.06); }
        &[disabled] { opacity: .6; cursor: default; filter: none; }
        &:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 3px; }
    }
    .cn-alt {
        margin-top: 6px;
        min-height: 44px;
        padding: 0 16px;
        border: 0;
        background: none;
        font: 600 14.5px var(--ss-font-body);
        color: var(--ss-col-ink2);
        cursor: pointer;
        &:hover { color: var(--ss-ink); }
        &[disabled] { opacity: .6; cursor: default; }
    }
    .modal.choose {
        max-width: 440px;
        padding: 30px 22px 16px;
        align-items: stretch;
        text-align: left;
        .modal-close { top: 18px; right: 18px; width: 32px; height: 32px; }
        .cn-title { margin: 0 44px 14px 10px; font-size: 22px; line-height: 1.25; white-space: nowrap; }
    }
    .cn-nets { display: flex; flex-direction: column; gap: 2px; }
    .cn-net {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 60px;
        padding: 10px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        font: 700 16px var(--ss-font-body);
        color: var(--ss-ink);
        text-align: left;
        cursor: pointer;
        & img { flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px #e1e3ec; }
        &:hover:not(:disabled), &.on { background: #f5f6fe; }
        &:disabled { cursor: default; }
        &:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 2px; }
        .cn-going { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ss-col-ink2); }
        .cn-going i { width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ob-accent-bg); border-top-color: var(--ob-accent); animation: ob-landing-turn .9s linear infinite; }
    }
    @media (prefers-reduced-motion: reduce) { .cn-net .cn-going i { animation: none; } }
}
@keyframes cn-pop {
    from { transform: scale(.4); }
}
@media (prefers-reduced-motion: reduce) {
    .popup.ob-connect .cn-join.ok .chip { animation: none; }
}
@media (max-width: 600px) {
    .popup.ob-connect {
        .modal { padding: 48px 22px 22px; }
        .cn-us, .cn-them { width: 84px; height: 84px; }
        .cn-them .lt { font-size: 36px; }
        .cn-join { width: 56px; }
        .cn-title { margin-top: 28px; font-size: 24px; }
    }
}
.ob-landing {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--ob-font);
    .spin {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 3px solid var(--ob-accent-bg);
        border-top-color: var(--ob-accent);
        animation: ob-landing-turn .9s linear infinite;
    }
    .what { font-size: 14px; font-weight: 700; color: var(--ob-ink-2); }
}
@keyframes ob-landing-turn {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-landing .spin { animation: none; }
}
.popup .ob-planchange {
    width: 460px;
    .modal-header {
        display: block;
        padding: 22px 22px 24px;
        border-radius: var(--ob-radius-row) var(--ob-radius-row) 0 0;
        background: linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink));
        color: #fff;
        .row { display: flex; align-items: center; gap: 12px; }
        & h4 { color: #fff; }
        .modal-close { background: rgba(255, 255, 255, .18); color: #fff; }
        .modal-close:hover { background: rgba(255, 255, 255, .28); color: #fff; }
        .modal-close:focus-visible { outline-color: #fff; }
        .modal-close.gone { visibility: hidden; }
    }
    .prices { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; font-variant-numeric: tabular-nums; }
    .prices .old { position: relative; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .62); }
    .prices .old::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 1.5px solid rgba(255, 255, 255, .7); transform: rotate(-14deg); }
    .prices .mid { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
    .prices .mid svg { width: 15px; height: 15px; }
    .prices .mid.busy svg { animation: ob-planchange-nudge 1.1s ease-in-out infinite; }
    .prices .mid.done { background: #fff; color: var(--ob-accent-ink); }
    .prices .mid.done svg { width: 16px; height: 16px; }
    .prices .new { display: flex; align-items: baseline; gap: 6px; }
    .prices .new b { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
    .prices .new.words b { font-size: 26px; letter-spacing: -.02em; }
    .prices .new small { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
    .modal-content { position: relative; display: grid; gap: 16px; padding-top: 22px; }
    .modal-actions { margin-top: 2px; }
    .modal-content.busy > :not(.loading) { visibility: hidden; }
    .loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; }
    .loading .what { font-size: 14px; font-weight: 700; color: var(--ob-ink-2); }
    .wait { display: grid; place-items: center; min-height: 120px; }
    .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ob-accent-bg); border-top-color: var(--ob-accent); animation: ob-landing-turn .9s linear infinite; }
    .done { display: grid; gap: 4px; }
    .done .t { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--ob-ink); }
    .stage { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
    .stage .h { font-weight: 800; }
    .stage.bank { background: var(--ob-butter-bg); border: 1px solid var(--ob-butter-edge); color: var(--ob-butter-ink); }
    .stage.declined { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    .fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .fact .l { color: var(--ob-ink-2); font-weight: 600; font-size: 14px; }
    .fact .v { color: var(--ob-ink); font-weight: 800; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
    .fact.big .v { font-size: 26px; letter-spacing: -.02em; }
    .sum { display: grid; gap: 6px; padding: 12px 14px; background: var(--ob-accent-bg); border-radius: 12px; font-size: 13px; color: var(--ob-accent-ink); font-variant-numeric: tabular-nums; }
    .sum div { display: flex; justify-content: space-between; gap: 12px; }
    .sum div span:last-child { white-space: nowrap; font-weight: 700; }
    .sum .parts { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
    .sum .parts > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
    .sum .parts svg { width: 14px; height: 14px; transition: transform .15s ease; }
    .sum.open .parts svg { transform: rotate(180deg); }
    .sum .parts > span:last-child { white-space: nowrap; font-weight: 700; }
    .sum .parts:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 3px; border-radius: 4px; }
    .sum div.part { display: none; padding-left: 14px; font-size: 12px; opacity: .8; }
    .sum.open div.part { display: flex; }
    .sum div.part span:last-child { font-weight: 600; }
    .say { margin: 0; color: var(--ob-ink-2); font-size: 14px; line-height: 1.55; white-space: pre-line; }
    .say b { color: var(--ob-ink); font-weight: 700; }
    .warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: var(--ob-butter-bg); color: var(--ob-butter-ink); border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
    .warn svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
    .modal-actions .ob-pill { flex: 1; }
    .modal-actions .ob-pill.wide { flex: 1.5; }
}
@keyframes ob-planchange-nudge {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .popup .ob-planchange .spin,
    .popup .ob-planchange .prices .mid.busy svg { animation: none; }
}
.popup .ob-sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.popup .ob-planstarted {
    .modal-header {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(120% 90% at 92% 8%, rgba(255, 255, 255, .22), transparent 55%),
            linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink));
    }
    .modal-header .row, .prices { position: relative; z-index: 1; }
    .prices .mid.done { width: 34px; height: 34px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .16); }
    .prices .mid.done svg { width: 18px; height: 18px; }
    .prices .new { flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
    .prices .new b { font-size: 34px; }
    .prices .new small { color: rgba(255, 255, 255, .8); }
    .glitter { position: absolute; inset: 0; pointer-events: none; }
    .glitter i { position: absolute; display: block; width: 9px; height: 4px; border-radius: 1.5px; background: rgba(255, 255, 255, .7); }
    .glitter i:nth-child(1)  { left: 58%; top: 58%; transform: rotate(-24deg); background: #ffd76a; }
    .glitter i:nth-child(2)  { left: 66%; top: 30%; width: 6px; height: 6px; border-radius: 50%; }
    .glitter i:nth-child(3)  { left: 72%; top: 70%; transform: rotate(38deg); background: #7fe3b4; }
    .glitter i:nth-child(4)  { left: 79%; top: 46%; transform: rotate(-62deg); }
    .glitter i:nth-child(5)  { left: 86%; top: 76%; width: 6px; height: 6px; border-radius: 50%; background: #ff9fb0; }
    .glitter i:nth-child(6)  { left: 90%; top: 54%; transform: rotate(20deg); background: #b9c4ff; }
    .glitter i:nth-child(7)  { left: 63%; top: 84%; transform: rotate(70deg); background: #ff9fb0; }
    .glitter i:nth-child(8)  { left: 83%; top: 26%; transform: rotate(12deg); background: #ffd76a; }
    .glitter i:nth-child(9)  { left: 95%; top: 36%; width: 6px; height: 6px; border-radius: 50%; background: #7fe3b4; }
    .glitter i:nth-child(10) { left: 70%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #b9c4ff; }
    .glitter i:nth-child(11) { left: 76%; top: 88%; transform: rotate(-10deg); }
    .glitter i:nth-child(12) { left: 52%; top: 82%; width: 6px; height: 6px; border-radius: 50%; }
    .room { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .room div { display: grid; gap: 2px; align-content: start; padding: 12px 12px 11px; border-radius: 14px; background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .room b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
    .room span { font-size: 12px; font-weight: 600; line-height: 1.3; opacity: .85; }
    .facts { display: grid; }
    .fact { padding: 9px 0; }
    .fact + .fact { border-top: 1px solid var(--ob-line); }
    .fact .v small { display: block; font-size: 12px; font-weight: 600; color: var(--ob-muted); }
    .wait { min-height: 220px; }
    &.arrive .prices .mid.done { animation: ob-started-pop .55s cubic-bezier(.2, 1.7, .45, 1) both; }
    &.arrive .prices .new { animation: ob-started-rise .45s .08s cubic-bezier(.2, .8, .2, 1) both; }
    &.arrive .room div { animation: ob-started-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
    &.arrive .room div:nth-child(1) { animation-delay: .14s; }
    &.arrive .room div:nth-child(2) { animation-delay: .19s; }
    &.arrive .room div:nth-child(3) { animation-delay: .24s; }
    &.arrive .room div:nth-child(4) { animation-delay: .29s; }
    &.arrive .glitter i { animation: ob-started-fall .7s .1s ease-out both; }
}
@keyframes ob-started-pop { from { transform: scale(0) rotate(-40deg); } }
@keyframes ob-started-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ob-started-fall { from { opacity: 0; translate: 0 -14px; scale: .4; } }
@media (prefers-reduced-motion: reduce) {
    .popup .ob-planstarted.arrive .prices .mid.done,
    .popup .ob-planstarted.arrive .prices .new,
    .popup .ob-planstarted.arrive .room div,
    .popup .ob-planstarted.arrive .glitter i { animation: none; }
}
:root {
    --ss-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --ss-font-body: 'Geist', var(--ob-font), system-ui, sans-serif;
    --ss-page: #fbfbfd;
    --ss-ink: #16171d;
    --ss-col-bg: radial-gradient(420px 260px at 20% 0%, rgba(214,208,255,.7) 0%, rgba(214,208,255,0) 70%), linear-gradient(180deg, #ecebfa 0%, #f0eff8 100%);
    --ss-col-ink: #16171d;
    --ss-col-ink2: #5c6070;
    --ss-logo-ink: #0f1542;
    --ss-mk-ink: #0f1542;
    --ss-mk-face: #ffffff;
    --ss-mk-sticker: none;
    --ss-tab-on-bg: #ffffff;
    --ss-tab-on-sh: 0 1px 2px rgba(23,25,45,.06), 0 6px 16px rgba(60,50,140,.10);
    --ss-tab-on-num: #5146e8;
    --ss-tab-on-label: #3d33c4;
    --ss-tab-off-num: #2a2c35;
    --ss-tab-off-label: #5c6070;
    --ss-card-bg: #ffffff;
    --ss-card-sh: 0 2px 6px rgba(23,25,45,.04), 0 16px 40px rgba(60,50,140,.11);
    --ss-card-ink: #16171d;
    --ss-faded-bg: rgba(255,255,255,.5);
    --ss-faded-ink: #16171d;
    --ss-faded-ring: #f6f5fc;
    --ss-op1: .6;
    --ss-op2: .38;
    --ss-soft-bg: #f1f2f7;
    --ss-soft-fg: #16171d;
    --ss-more-fg: #4a4e5e;
    --ss-tag-wait: #3d33c4;
    --ss-tag-held: #8a5a00;
    --ss-tag-fail: #a3212e;
    --ss-link-bg: #f7f6ff;
    --ss-link-line: #ebe9ff;
    --ss-btn-bg: linear-gradient(180deg, #5f55f2 0%, #4a40e0 100%);
    --ss-btn-fg: #ffffff;
    --ss-btn-sh: 0 6px 16px rgba(81,70,232,.28);
    --ss-btn-alt-bg: #16171d;
    --ss-btn-alt-fg: #ffffff;
    --ss-dot: #5146e8;
    --ss-ring: #5146e8;
    --ss-usage: #5146e8;
    --ss-today: #5146e8;
    --ss-chip-track: #e3e4ee;
    --ss-title-ink: #16171d;
    --ss-range-on: #16171d;
    --ss-range-off: #6f7487;
    --ss-chev: #6f7487;
    --ss-day-num: #16171d;
    --ss-day-name-today: #16171d;
    --ss-day-name: #5c6070;
    --ss-now-ink: #176640;
    --ss-now-fade: rgba(46,158,98,.45);
    --ss-add-bg: rgba(255,255,255,.55);
    --ss-add-bg-hover: #ffffff;
    --ss-net-x: #16171d;
    --ss-net-threads: #000000;
    --ss-net-instagram: #d6249f;
    --ss-net-facebook: #0866ff;
    --ss-net-other: #8a8fa0;
    --ss-arc-len: 12;
    --ss-arc-w: 1px;
    --ss-arc-gap: 1.5px;
    --ss-col-scroll: rgba(23,25,45,.09);
    --ss-col-scroll-hover: rgba(23,25,45,.2);
    --ss-scroll: rgba(23,25,45,.16);
    --ss-scroll-hover: rgba(23,25,45,.32);
    --ss-sent-bg: #e3f4e9;
    --ss-sent-ink: #176640;
    --ss-sent-text: #1d3a2b;
    --ss-sched-bg: #ffffff;
    --ss-sched-sh: 0 1px 2px rgba(23,25,45,.05), 0 4px 14px rgba(23,25,45,.06);
    --ss-sched-ink: #6f7487;
    --ss-sched-text: #2a2c35;
    --ss-wait-bg: #ebe9ff;
    --ss-drop-tint: rgba(81,70,232,.07);
    --ss-wait-ink: #3d33c4;
    --ss-wait-text: #2b2670;
    --ss-fail-bg: #ffe6e8;
    --ss-fail-ink: #a3212e;
    --ss-fail-text: #5b1d25;
    --ss-notice-bg: #ffffff;
    --ss-foot-ink: #9a9eae;
    --ss-foot-rule: rgba(23,25,45,.06);
}
body.ob-app:has(.ss-app) { background: var(--ss-page); }
.ss-colslot { display: contents; }
.ss-part { display: contents; }
.ss-app { display: flex; min-height: 100vh; font-family: var(--ss-font-body); color: var(--ss-ink); -webkit-font-smoothing: antialiased; }
.ss-app button { font: inherit; cursor: pointer; color: inherit; }
.ss-app button:focus-visible, .ss-app a:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 2px; }
.ss-col { --ss-col-gutter: 6px; flex: 0 0 clamp(320px, 28vw, 420px); box-sizing: border-box; padding: 24px calc(26px - var(--ss-col-gutter)) 40px 26px; background: var(--ss-col-bg); color: var(--ss-col-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto;
    scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: auto; }
.ss-col::-webkit-scrollbar { width: var(--ss-col-gutter); }
.ss-col::-webkit-scrollbar-track { background: transparent; }
.ss-col::-webkit-scrollbar-button { display: none; }
.ss-col::-webkit-scrollbar-thumb { background-color: var(--ss-col-scroll); border: 1px solid transparent; border-radius: 3px; background-clip: padding-box; }
.ss-col:hover::-webkit-scrollbar-thumb { background-color: var(--ss-col-scroll-hover); }
@supports not selector(::-webkit-scrollbar) {
    .ss-col { --ss-col-gutter: 8px; scrollbar-width: thin; scrollbar-color: var(--ss-col-scroll) transparent; }
    .ss-col:hover { scrollbar-color: var(--ss-col-scroll-hover) transparent; }
}
.ss-main { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 24px 40px 32px; }
.ss-notices { display: flex; flex-direction: column; gap: 8px; }
.ss-notices:has(> :not(:empty)) { margin-bottom: 20px; }
.ss-notice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ss-notice-bg); box-shadow: var(--ss-tab-on-sh); font-size: 13.5px; line-height: 1.4; }
.ss-notice .nt { flex: 1; min-width: 0; }
.ss-notice .nt b { font-weight: 600; }
.ss-notice .ss-btn { min-height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.ss-tabs { display: flex; gap: 6px; margin: 0 0 16px; }
.ss-tab { flex: 1 1 0; border: 0; min-height: 68px; border-radius: 18px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ss-tab .n { font-family: var(--ss-font-display); font-size: 26px; line-height: 1; font-weight: 700; color: var(--ss-tab-off-num); font-variant-numeric: tabular-nums; }
.ss-tab .l { font-size: 12.5px; font-weight: 600; color: var(--ss-tab-off-label); }
.ss-tab[aria-selected="true"] { background: var(--ss-tab-on-bg); box-shadow: var(--ss-tab-on-sh); }
.ss-tab[aria-selected="true"] .n { color: var(--ss-tab-on-num); }
.ss-tab[aria-selected="true"] .l { color: var(--ss-tab-on-label); }
.ss-colhead { display: flex; justify-content: flex-end; margin: -16px -14px 0 0; }
.ss-col .ss-shut { width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--ss-chev); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.ss-col .ss-shut:hover { background: rgba(255,255,255,.7); color: var(--ss-ink); }
.ss-shut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-col.folded { flex: 0 0 76px; padding: 20px 7px 24px; overflow: hidden; scrollbar-gutter: auto; }
.ss-col.folded .ss-tabs { flex-direction: column; gap: 4px; margin: 0; }
.ss-col.folded .ss-tab { flex: none; min-height: 0; padding: 12px 0; border-radius: 16px; transition: background .15s; }
.ss-col.folded .ss-tab .n { font-size: 22px; }
.ss-col.folded .ss-tab .l { font-size: 10.5px; white-space: nowrap; }
.ss-col.folded .ss-tab:hover { background: rgba(255,255,255,.7); }
@media (max-width: 860px) { .ss-colhead { display: none; } }
.ss-app.to-held .ss-tab[data-tab="held"], .ss-app.to-notsent .ss-tab[data-tab="notsent"] { outline: 2px dashed var(--ss-ring); outline-offset: -2px; }
.ss-tab.drop { background: var(--ss-wait-bg); outline-style: solid; }
.ss-col.drop { background: linear-gradient(var(--ss-drop-tint), var(--ss-drop-tint)), var(--ss-col-bg); box-shadow: inset 0 0 0 3px var(--ss-ring); }
.ss-card.dragging, .ss-faded.dragging { opacity: .35; }
.ss-list { display: flex; flex-direction: column; gap: 10px; }
.ss-card { position: relative; z-index: 2; border-radius: 22px; padding: 20px; background: var(--ss-card-bg); color: var(--ss-card-ink); box-shadow: var(--ss-card-sh); --x-ring: var(--ss-card-bg); }
.ss-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-name { flex: 0 1 auto; font-size: 15px; font-weight: 600; min-width: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tag { flex: 0 0 auto; margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ss-tag.wait { color: var(--ss-tag-wait); }
.ss-tag.held { color: var(--ss-tag-held); }
.ss-tag.fail { color: var(--ss-tag-fail); }
.ss-tag.going, .ss-tag.gone { color: var(--ss-sched-ink); }
.ss-tag.went { color: var(--ss-sent-ink); }
.ss-card .text { margin: 12px 0 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.ss-card .text:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 3px; border-radius: 6px; }
.ss-card .text.cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.ss-card .thread { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ss-col-ink2); }
.ss-card .reply { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ss-col-ink2); }
.ss-card .reply + .text { margin-top: 4px; }
.ss-card .ims { display: flex; gap: 6px; margin-top: 12px; }
.ss-card .ims .im { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--ss-faded-bg); flex: 0 0 auto; }
.ss-card .ims img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-card .ims b { position: absolute; left: 4px; bottom: 4px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #ffffff; font-size: 10px; font-weight: 700; }
.ss-card .ims .more { align-self: center; font-size: 13px; font-weight: 600; color: var(--ss-col-ink2); }
.ss-card .ims[role="button"] { cursor: pointer; border-radius: 10px; }
.ss-card .ims[role="button"]:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: 3px; }
.ss-card .reply + .ims { margin-top: 8px; }
.ss-card .link { margin: 16px -20px -20px; border-top: 1px solid var(--ss-link-line); border-radius: 0 0 22px 22px; background: var(--ss-link-bg); color: var(--ss-col-ink2); font-size: 13px; font-weight: 500; line-height: 1.4; }
.ss-card .link .say { display: flex; align-items: center; gap: 8px; padding: 11px 20px 12px; border-radius: inherit; list-style: none; cursor: pointer; }
.ss-card .link .say::-webkit-details-marker { display: none; }
.ss-card .link .say:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: -2px; }
.ss-card .link svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: var(--ss-dot); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ss-card .link .n { font-weight: 700; color: var(--ss-card-ink); }
.ss-card .link .ask { flex: 0 0 auto; margin-left: auto; font-weight: 600; color: var(--ss-tag-wait); }
.ss-card .link .say:hover .ask { text-decoration: underline; }
.ss-card .link .reason { margin: 0; padding: 0 20px 12px 42px; }
.ss-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ss-btn { border: 0; min-height: 46px; padding: 0 26px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.ss-btn[disabled] { opacity: .55; cursor: default; }
.ss-btn svg.out { width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ss-btn.main { background: var(--ss-btn-bg); color: var(--ss-btn-fg); box-shadow: var(--ss-btn-sh); }
.ss-btn.alt { background: var(--ss-btn-alt-bg); color: var(--ss-btn-alt-fg); }
.ss-btn.soft { background: var(--ss-soft-bg); color: var(--ss-soft-fg); padding: 0 18px; }
.ss-btn.dots { width: 46px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--ss-soft-bg); color: var(--ss-more-fg); }
.ss-faded { display: block; width: 100%; text-align: left; border: 0; padding: 16px 20px; border-radius: 22px; background: var(--ss-faded-bg); color: var(--ss-faded-ink); --x-ring: var(--ss-faded-ring); }
.ss-faded.n1 { opacity: var(--ss-op1); }
.ss-faded.n2 { opacity: var(--ss-op2); }
.ss-faded:hover { opacity: 1; }
.ss-faded .ss-name { font-size: 14.5px; }
.ss-faded .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ss-faded .text.bare { color: var(--ss-col-ink2); }
.ss-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 12px; color: var(--ss-col-ink2); font-size: 14.5px; font-weight: 500; text-align: center; }
.ss-empty .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--ss-faded-bg); display: flex; align-items: center; justify-content: center; color: var(--ss-col-ink2); }
.ss-firsts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ss-first-head { display: flex; align-items: center; gap: 12px; }
.ss-first-head .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ss-wait-bg); color: var(--ss-tab-on-num); display: flex; align-items: center; justify-content: center; }
.ss-first-head h2 { min-width: 0; margin: 0; font-family: var(--ss-font-display); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.ss-first-block { margin-top: 16px; }
.ss-first-wait { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ss-tag-wait); }
.ss-first-wait .dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-dot); }
.ss-first-wait .dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; color: var(--ss-dot); animation: ssping 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .ss-first-wait .dot::before { animation: none; } }
.ss-email-say { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ss-tab-off-label); }
.ss-email-say b { color: var(--ss-card-ink); font-weight: 600; overflow-wrap: anywhere; }
.ss-email-row { display: flex; gap: 8px; margin-top: 12px; }
.ss-email-input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 14px; background: var(--ss-soft-bg); color: var(--ss-card-ink); font: inherit; font-size: 15px; }
.ss-email-input:focus { outline: none; border-color: var(--ss-ring); }
.ss-email-row .ss-btn { flex: none; padding: 0 18px; }
.ss-col .ss-email-back { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ss-tag-wait); font-size: 13px; font-weight: 600; cursor: pointer; }
.ss-email-err { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ss-tag-fail); }
.ss-av { position: relative; display: inline-block; vertical-align: middle; flex: none; border-radius: 50%; }
.ss-av img, .ss-av .lt { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ss-av .lt { display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; background: linear-gradient(135deg, #8b7fff, #5146e8); }
.ss-av img + .lt { display: none; }
.ss-av .nb { position: absolute; right: -3px; bottom: -3px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--x-ring, #ffffff); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ss-net-x);
    transform: scale(.3); opacity: 0; transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .18s; }
.ss-av .nb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ss-av:hover .nb { transform: scale(1); opacity: 1; }
.ss-av .arc { --o: calc(var(--ss-arc-gap) + var(--ss-arc-w)); position: absolute; left: calc(-1 * var(--o)); top: calc(-1 * var(--o)); width: calc(100% + 2 * var(--o)); height: calc(100% + 2 * var(--o)); overflow: visible; pointer-events: none; transition: opacity .2s, transform .3s ease-out; }
.ss-av .arc circle { cx: 50%; cy: 50%; r: calc(50% - var(--ss-arc-w) / 2); fill: none; stroke-width: var(--ss-arc-w); stroke-linecap: round; stroke-dasharray: var(--ss-arc-len) 100;
    transform: rotate(calc(45deg - var(--ss-arc-len) * 1.8deg)); transform-origin: 50% 50%; }
.ss-av:hover .arc { opacity: 0; transform: rotate(50deg); }
.ss-av.badged .nb { transform: none; opacity: 1; }
.ss-av.badged .arc { display: none; }
@media (prefers-reduced-motion: reduce) { .ss-av .nb, .ss-av .arc { transition: none; } }
.ss-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 26px; }
.ss-title { margin: 0 10px 0 0; font-family: var(--ss-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--ss-title-ink); white-space: nowrap; }
.ss-title .ss-titlebtn { display: inline-flex; align-items: center; gap: 6px; border: 0; margin: 0; padding: 2px 8px 2px 0; border-radius: 14px; background: none; letter-spacing: inherit; white-space: nowrap; transition: background .15s, color .15s; }
.ss-titlebtn svg { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--ss-chev); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.ss-titlebtn:hover svg { stroke: var(--ss-ink); }
.ss-title .ss-titlebtn.on { margin-left: -12px; padding: 2px 12px; background: var(--ss-wait-bg); color: var(--ss-wait-text); }
.ss-titlebtn.on svg { stroke: var(--ss-ring); }
.ss-chev { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ss-chev); display: flex; align-items: center; justify-content: center; }
.ss-chev:hover { background: var(--ss-soft-bg); }
.ss-range { display: flex; margin-left: 10px; }
.ss-range button { border: 0; background: none; min-height: 36px; padding: 0 8px; font-size: 14px; font-weight: 500; color: var(--ss-range-off); white-space: nowrap; }
.ss-range button[aria-pressed="true"] { font-weight: 600; color: var(--ss-range-on); }
.ss-range button:disabled { opacity: .4; cursor: default; }
.ss-fit { font-size: 13px; font-weight: 500; color: var(--ss-range-off); white-space: nowrap; padding: 0 6px; }
.ss-today { border: 0; background: none; min-height: 36px; padding: 0 8px; font-size: 14px; font-weight: 500; color: var(--ss-range-off); }
.ss-faces { display: flex; align-items: center; gap: 4px; margin-left: auto; --x-ring: var(--ss-page); }
.ss-face { width: 42px; height: 42px; border: 0; padding: 0; background: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.ss-face.dim { opacity: .4; }
.ss-face.on .ss-av { box-shadow: 0 0 0 2px var(--ss-page), 0 0 0 4px var(--ss-ring); }
.ss-faces .ss-addp { width: 34px; height: 34px; margin: 0 4px 0 8px; padding: 0; border: 1.5px solid #d5d8e2; border-radius: 50%; background: transparent; color: var(--ss-chev); display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; }
.ss-faces .ss-addp:hover { border-color: var(--ss-ring); color: var(--ss-ring); }
.ss-addp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ss-cal-wrap { flex: 1 0 auto; display: flex; flex-direction: column; overflow-x: auto; margin: -8px -8px 0; padding: 8px 8px 0;
    scrollbar-width: thin; scrollbar-color: var(--ss-scroll) transparent; }
.ss-cal-wrap:hover { scrollbar-color: var(--ss-scroll-hover) transparent; }
.ss-cal-wrap::-webkit-scrollbar { height: 10px; }
.ss-cal-wrap::-webkit-scrollbar-track { background: transparent; }
.ss-cal-wrap::-webkit-scrollbar-thumb { background-color: var(--ss-scroll); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }
.ss-cal-wrap:hover::-webkit-scrollbar-thumb { background-color: var(--ss-scroll-hover); }
.ss-cal { flex: 1 0 auto; display: grid; gap: 26px; align-items: stretch; }
.ss-cal.d2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-cal.d3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-cal.d5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ss-cal.d7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.ss-cal.d3.compact { gap: 10px; }
.ss-day { min-width: 0; padding-bottom: 100px; border-radius: 18px; transition: background .15s; }
.ss-day.drop, .ss-day.over { background: var(--ss-wait-bg); }
.ss-dh { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 14px; }
.ss-dh .num { font-family: var(--ss-font-display); font-size: 26px; font-weight: 700; color: var(--ss-day-num); }
.ss-dh .dn { font-size: 14.5px; font-weight: 600; color: var(--ss-day-name); }
.ss-dh.today .num { color: var(--ss-today); }
.ss-dh.today .dn { color: var(--ss-day-name-today); }
.ss-dh.past .num, .ss-dh.past .dn { opacity: .55; }
.ss-cal.compact .ss-dh { gap: 6px; padding-bottom: 12px; }
.ss-cal.compact .ss-dh .num { font-size: 22px; }
.ss-cal.compact .ss-dh .dn { font-size: 13px; }
.ss-posts { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.ss-cal.compact .ss-posts { gap: 8px; }
.ss-post { position: relative; display: flex; gap: 10px; padding: 12px; border-radius: 16px; width: 100%; box-sizing: border-box; border: 0; text-align: left; font: inherit; cursor: pointer; }
.ss-post.dragging { opacity: .35; }
.ss-post p { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.ss-post p .w { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; font-size: 14px; line-height: 20px; }
.ss-post p .ft { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 6px; margin-top: 1px; }
.ss-post p .ims { display: flex; align-items: center; gap: 3px; min-width: 0; margin-top: 5px; }
.ss-post p .ims img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; display: block; flex: 0 0 auto; }
.ss-post p .ims b { font-size: 11px; font-weight: 600; opacity: .7; }
.ss-post p .t { margin-left: auto; font-size: 12px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-cal.compact .ss-post p .ims img { width: 20px; height: 20px; border-radius: 5px; }
.ss-post p .rp { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.ss-cal.compact .ss-post { padding: 9px 10px; gap: 8px; border-radius: 14px; }
.ss-cal.d7 .ss-post, .ss-cal.d3.compact .ss-post, .ss-cal.d2 .ss-post { flex-direction: column; gap: 6px; }
.ss-post > .hd { display: contents; }
.ss-post > .hd .t { display: none; }
.ss-cal.d7 .ss-post > .hd, .ss-cal.d3.compact .ss-post > .hd, .ss-cal.d2 .ss-post > .hd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-cal.d7 .ss-post > .hd .t, .ss-cal.d3.compact .ss-post > .hd .t, .ss-cal.d2 .ss-post > .hd .t { display: block; margin-left: auto; font-size: 11.5px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-cal.d7 .ss-post p .ft .t, .ss-cal.d3.compact .ss-post p .ft .t, .ss-cal.d2 .ss-post p .ft .t { display: none; }
.ss-cal.compact .ss-post p .w { font-size: 13px; line-height: 18px; -webkit-line-clamp: 4; }
.ss-cal.compact .ss-post p .t { font-size: 11.5px; }
.ss-cal.d5 .ss-post { padding: 10px 11px; gap: 9px; }
.ss-cal.d5 .ss-post p .w { font-size: 13.5px; line-height: 19px; }
.ss-post.went { background: var(--ss-sent-bg); --x-ring: var(--ss-sent-bg); }
.ss-post.went .t { color: var(--ss-sent-ink); }
.ss-post.went p { color: var(--ss-sent-text); }
.ss-post.went.self { background: #f9fdfb; --x-ring: #f9fdfb; outline: 1.5px dotted #6cc08f; outline-offset: -1.5px; }
.ss-post.going, .ss-post.gone { background: var(--ss-sched-bg); box-shadow: var(--ss-sched-sh); --x-ring: var(--ss-sched-bg); }
.ss-post.going .t, .ss-post.gone .t { color: var(--ss-sched-ink); }
.ss-post.going p { color: var(--ss-sched-text); }
.ss-post.gone p { color: var(--ss-sched-ink); text-decoration: line-through; }
.ss-post.wait { background: var(--ss-wait-bg); --x-ring: var(--ss-wait-bg); }
.ss-post.wait .t { color: var(--ss-wait-ink); }
.ss-post.wait p { color: var(--ss-wait-text); }
.ss-post.stop { background: var(--ss-fail-bg); --x-ring: var(--ss-fail-bg); }
.ss-post.stop .t { color: var(--ss-fail-ink); }
.ss-post.stop p { color: var(--ss-fail-text); }
.ss-mw { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; }
.ss-mw::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ss-dot); color: var(--ss-dot); animation: ssping 2.2s ease-out infinite; }
.ss-mw::after { content: ''; position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%; border: 2.5px solid var(--ss-page); background: radial-gradient(circle, #ffffff 0 2.5px, var(--ss-dot) 3px); }
.ss-mf { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: #e5484d; border: 2.5px solid var(--ss-page); color: #ffffff; font-size: 10px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; }
@keyframes ssping { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .55; } 75%, 100% { box-shadow: 0 0 0 8px currentColor; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-mw::before { animation: none; } }
.ss-now { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.ss-now span { font-size: 12px; font-weight: 700; color: var(--ss-now-ink); white-space: nowrap; }
.ss-now b { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ss-now-fade) 0%, transparent 100%); }
.ss-now b:first-child { background: linear-gradient(270deg, var(--ss-now-fade) 0%, transparent 100%); }
.ss-cal .ss-add { width: 100%; box-sizing: border-box; border: 0; border-radius: 16px; padding: 12px; background: var(--ss-add-bg); font-size: 13px; font-weight: 600; color: var(--ss-range-off); text-align: center; opacity: var(--near, 0); transition: opacity .12s, background .15s, box-shadow .15s, color .15s; }
.ss-cal.compact .ss-add { padding: 9px 10px; border-radius: 14px; }
.ss-cal .ss-add:focus-visible { opacity: 1; }
@media (hover: none) { .ss-cal .ss-add { opacity: 1; min-height: 36px; } .ss-day { padding-bottom: 0; } }
.ss-cal .ss-add:hover { background: var(--ss-add-bg-hover); box-shadow: var(--ss-sched-sh); color: var(--ss-ink); }
.ss-mwrap { flex: 1 0 auto; container-type: inline-size; }
.ss-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 48px; align-content: start; }
.ss-months.m12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 36px; }
@container (max-width: 1000px) {
    .ss-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .ss-months.m12 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}
@container (max-width: 680px) { .ss-months, .ss-months.m12 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@container (max-width: 440px) { .ss-months, .ss-months.m12 { grid-template-columns: minmax(0, 1fr); } }
.ss-month .mn { margin: 0; padding: 0 6px; font-family: var(--ss-font-display); font-size: 18px; font-weight: 700; line-height: 30px; color: var(--ss-ink); }
.ss-month .mn.now { color: var(--ss-today); }
.ss-months.m12 .ss-month .mn { padding: 0 4px; font-size: 15px; line-height: 24px; }
.ss-month .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 2px 0 4px; font-size: 11.5px; font-weight: 600; color: #9a9eae; text-align: center; }
.ss-months.m12 .ss-month .wk { margin: 0 0 2px; font-size: 10.5px; }
.ss-month .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; }
.ss-months.m12 .ss-month .grid { row-gap: 2px; }
.ss-month .c { position: relative; height: 49px; border: 0; padding: 6px 0 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: #2a2c35; }
.ss-months.m12 .ss-month .c { height: 31px; padding-top: 3px; gap: 2px; font-size: 12px; }
.ss-month .c.blank { visibility: hidden; }
.ss-month .c .d { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-months.m12 .ss-month .c .d { width: 20px; height: 20px; }
.ss-month .c.past { color: #8a8fa0; }
.ss-month .c.today .d { background: var(--ss-today); color: #ffffff; font-weight: 700; }
.ss-month .c.inr { background: var(--ss-wait-bg); color: var(--ss-wait-text); }
.ss-month .c.rs { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.ss-month .c.re { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.ss-month .c.hb { --hl: #c9c3fa; background: #f7f6ff; box-shadow: inset 0 1.5px var(--hl), inset 0 -1.5px var(--hl); }
.ss-month .c.hb.hs { border-top-left-radius: 14px; border-bottom-left-radius: 14px; box-shadow: inset 0 1.5px var(--hl), inset 0 -1.5px var(--hl), inset 1.5px 0 var(--hl); }
.ss-month .c.hb.he { border-top-right-radius: 14px; border-bottom-right-radius: 14px; box-shadow: inset 0 1.5px var(--hl), inset 0 -1.5px var(--hl), inset -1.5px 0 var(--hl); }
.ss-month .c.hb.hs.he { box-shadow: inset 0 0 0 1.5px var(--hl); }
.ss-months.m12 .ss-month .c.rs, .ss-months.m12 .ss-month .c.hb.hs { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.ss-months.m12 .ss-month .c.re, .ss-months.m12 .ss-month .c.hb.he { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.ss-month .c:focus-visible { outline: 2px solid var(--ss-ring); outline-offset: -2px; border-radius: 10px; }
.ss-month .dots { display: flex; gap: 3px; height: 5px; }
.ss-month .dots i { display: block; width: 5px; height: 5px; border-radius: 50%; }
.ss-months.m12 .ss-month .dots { gap: 2px; height: 4px; }
.ss-months.m12 .ss-month .dots i { width: 4px; height: 4px; }
.ss-month .dots i.g { background: #2e9e62; }
.ss-month .dots i.s { background: #a9adbb; }
.ss-month .dots i.w { background: var(--ss-dot); }
.ss-month .dots i.f { background: #e5484d; }
.ss-fold { min-height: 100vh; display: flex; flex-direction: column; }
.ss-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--ss-foot-rule); font-size: 12.5px; }
.ss-foot a { color: var(--ss-foot-ink); text-decoration: none; transition: color .15s; }
.ss-foot a:hover { color: var(--ss-ink); }
@media (max-width: 699px) { .ss-foot a { display: inline-flex; align-items: center; min-height: 24px; } }
@media (max-width: 1399px) {
    .ss-main { padding: 24px 28px 32px; }
    .ss-col .ss-btn { min-height: 42px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
    .ss-col .ss-btn.soft { padding: 0 12px; }
    .ss-col .ss-btn.dots { width: 40px; padding: 0; }
}
@media (max-width: 1199px) {
    .ss-cal.d3 { gap: 16px; }
    .ss-col { flex-basis: 320px; padding: 22px calc(20px - var(--ss-col-gutter)) 36px 20px; }
    .ss-main { padding: 22px 22px 32px; }
    .ss-title { font-size: 24px; }
}
@media (max-width: 1023px) and (min-width: 861px) {
    .ss-col { flex-basis: 300px; padding: 20px calc(16px - var(--ss-col-gutter)) 32px 16px; }
    .ss-col .ss-acts { gap: 6px; }
    .ss-col .ss-card { padding: 16px; }
    .ss-col .ss-card .link { margin: 14px -16px -16px; }
    .ss-col .ss-card .link .say { padding: 10px 16px 11px; }
    .ss-col .ss-card .link .reason { padding: 0 16px 11px 38px; }
    .ss-main { padding: 20px 18px 32px; }
    .ss-bar { gap: 2px; }
    .ss-title { font-size: 22px; margin-right: 6px; }
    .ss-chev { width: 32px; }
    .ss-range { margin-left: 4px; }
    .ss-range button { padding: 0 6px; }
    .ss-tab .l { white-space: nowrap; font-size: 12px; }
}
@media (max-width: 860px) {
    .ss-app { flex-direction: column; }
    .ss-col { position: static; height: auto; flex-basis: auto; padding: 20px 16px 28px; scrollbar-gutter: auto; }
    .ss-bar { gap: 4px; }
    .ss-title { font-size: 22px; width: 100%; margin: 0 0 4px; }
    .ss-range { margin-left: 0; }
    .ss-chev { width: 44px; height: 44px; }
    .ss-main { padding: 20px 16px 32px; }
    .ss-fold { min-height: 0; }
    .ss-app.on-cal .ss-colslot, .ss-app.on-col .ss-main { display: none; }
    .ss-app.on-col .ss-col { flex: 1 0 auto; }
    .ss-app.on-cal .ss-main { flex: 1 0 auto; display: flex; flex-direction: column; }
    .ss-app.on-cal .ss-fold { flex: 1 0 auto; }
    .ss-email-input { font-size: 16px; }
}
.ob-popup.compose {
    align-items: flex-start;
    padding: clamp(16px, 11vh, 120px) 16px 40px;
    overflow-y: auto;
    background: var(--ob-shade);
    animation: ob-ground-in .25s ease-out;
    scrollbar-width: auto;
    scrollbar-color: auto;
    > .shade { position: fixed; background: transparent; animation: none; }
    &.settled { animation: none; }
    &::-webkit-scrollbar { width: 10px; }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-button { display: none; }
    &::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .4); border: 3px solid transparent; border-radius: 5px; background-clip: padding-box; }
    &:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .6); }
}
@supports not selector(::-webkit-scrollbar) {
    .ob-popup.compose { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .5) transparent; }
}
@keyframes ob-ground-in { from { background-color: transparent; } }
.ob-modal.compose {
    --ob-ground: var(--ob-card);
    --ob-badge-ring: var(--ob-card);
    width: min(100%, 640px);
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
    background: var(--ob-card);
    border: var(--ob-frame-line) solid var(--ob-accent-ring);
    border-radius: var(--ob-radius-row);
    transition: background .12s, border-color .12s, box-shadow .12s;
    &:focus { outline: none; }
    > .x { top: 12px; right: 12px; width: 40px; height: 40px; background: transparent; color: var(--ob-muted); }
    > .x:hover { background: var(--ob-accent-bg); color: var(--ob-ink); }
    > .x:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
    > .slot { flex: 0 0 auto; }
    &.over {
        background: var(--ob-accent-bg);
        border-color: var(--ob-accent);
        box-shadow: 0 0 0 6px var(--ob-accent-halo-1), var(--ob-shadow-modal);
    }
    > .dropsay {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 3;
        display: none;
        align-items: center;
        gap: 7px;
        height: 32px;
        padding: 0 16px;
        border-radius: 999px;
        background: var(--ob-accent);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        box-shadow: var(--ob-shadow-on-accent);
        pointer-events: none;
        & svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    }
    &.over > .dropsay { display: inline-flex; }
    &.over .rim { visibility: hidden; }
}
.ob-compose {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 28px 14px 22px;
    font-family: var(--ob-font);
    > .rim {
        position: absolute;
        top: calc(-1 * var(--ob-flabel-h) / 2 - var(--ob-frame-line));
        left: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: calc(100% - 92px);
        height: var(--ob-flabel-h);
        box-sizing: border-box;
        padding: 0 11px 0 8px;
        border-radius: 999px;
        border: var(--ob-frame-line) solid var(--ob-accent-ring);
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .01em;
        white-space: nowrap;
        & svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
        .dot { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 2px 0 3px; border-radius: 50%; background: currentColor; }
        .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        &.r-going { background: var(--ss-soft-bg, var(--ob-grey-bg)); color: var(--ss-sched-text, var(--ob-ink)); border-color: var(--ob-line); }
        &.r-held { background: var(--ob-butter-bg); color: var(--ob-butter-ink); border-color: var(--ob-butter-edge); }
        &.r-went { background: var(--ss-sent-bg, var(--ob-mint-bg)); color: var(--ss-sent-ink, var(--ob-mint-ink)); border-color: color-mix(in srgb, currentColor 25%, transparent); }
        &.r-stop { background: var(--ss-fail-bg, var(--ob-rose-bg)); color: var(--ss-fail-ink, var(--ob-rose-ink)); border-color: var(--ob-rose-chip); }
        &.r-gone { background: var(--ob-card); color: var(--ob-ink-2); border-color: var(--ob-line); }
    }
    .ob-stage > .subject { padding: 0; }
    .ob-srow .body { padding-right: 34px; }
    .ob-srow .text { margin-top: 9px; font-size: 18px; line-height: 1.5; }
    .ob-srow .text.ob-ed:empty::before { content: "What do you want to post?"; color: var(--ob-muted); pointer-events: none; }
    .ob-ederr { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--ob-rose-ink); }
    .ob-empty { padding: 8px 0 4px; font-size: 14px; font-weight: 600; color: var(--ob-muted); }
    .linknote {
        margin: 14px -28px -14px -22px;
        border-top: 1px solid var(--ob-accent-bg);
        border-radius: 0 0 calc(var(--ob-radius-row) - var(--ob-frame-line)) calc(var(--ob-radius-row) - var(--ob-frame-line));
        background: color-mix(in srgb, var(--ob-accent-bg) 40%, var(--ob-card));
        color: var(--ob-ink-2);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        &[hidden] { display: none; }
        .say {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 28px 12px 22px;
            border-radius: inherit;
            list-style: none;
            cursor: pointer;
        }
        .say::-webkit-details-marker { display: none; }
        .say:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: -2px; }
        .ic {
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            width: 26px;
            height: 26px;
            margin-left: 9px;
            border-radius: 50%;
            background: var(--ob-accent-bg);
            color: var(--ob-accent);
        }
        .t { min-width: 0; margin-left: 7px; }
        .n { font-weight: 700; color: var(--ob-ink); }
        .ask { flex: 0 0 auto; margin-left: auto; font-weight: 700; color: var(--ob-accent-ink); }
        .say:hover .ask { text-decoration: underline; }
        .reason { margin: 0; padding: 0 28px 13px 74px; }
    }
    .acctmenu {
        position: absolute;
        top: 90px;
        left: 14px;
        z-index: 5;
        width: 300px;
        padding: 6px;
        background: var(--ob-card);
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-panel);
        box-shadow: var(--ob-shadow-menu);
    }
    .acctmenu[hidden] { display: none; }
    .acct {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 6px 10px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
        --x-ring: var(--ob-card);
        &:hover { background: var(--ob-editing); --x-ring: var(--ob-editing); }
        &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: -2px; }
        .any { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ob-grey-bg); }
        .any svg { width: 16px; height: 16px; fill: none; stroke: var(--ob-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
        .nm b { font-size: 13.5px; font-weight: 700; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nm i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ob-muted); }
        .ck { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--ob-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    }
    .bar {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        row-gap: 10px;
        margin-top: 16px;
    }
    .bar.bare { margin-top: 0; }
    .bar .grow { flex: 1 1 auto; }
    .bar .ask { padding-left: 6px; font-size: 15px; font-weight: 700; color: var(--ob-rose-ink); }
    .bar .go {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }
    .bar button:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
    .bar .ic {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--ob-accent);
        cursor: pointer;
        transition: background .12s;
        & svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        &:hover, &.open { background: var(--ob-accent-bg); }
        &:disabled { opacity: .4; cursor: default; background: transparent; }
    }
    .bar button.where {
        flex: 0 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 12px 0 8px;
        border: 0;
        border-radius: 999px;
        background: var(--ob-accent-bg);
        color: var(--ob-accent-ink);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        --x-ring: var(--ob-accent-bg);
        .wl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cv { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
        .gl { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        &.open { box-shadow: 0 0 0 1.5px var(--ob-accent); }
        &:disabled { opacity: .5; cursor: default; }
    }
    .bar .acctmenu.where { top: calc(100% + 8px); left: 0; }
    .bar .acctmenu.where.up { top: auto; bottom: calc(100% + 8px); }
    .when {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        height: 40px;
        padding: 0 6px 0 2px;
        border-radius: 999px;
        background: var(--ob-accent-bg);
        &:has(.w.open) { box-shadow: 0 0 0 1.5px var(--ob-accent); }
        .w {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 40px;
            padding: 0 4px 0 10px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            color: var(--ob-accent-ink);
            white-space: nowrap;
            cursor: pointer;
        }
        .w svg { width: 18px; height: 18px; fill: none; stroke: var(--ob-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .clear {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--ob-accent);
            cursor: pointer;
        }
        .clear:hover { background: var(--ob-card); }
        .clear svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
        & button:disabled { opacity: .5; cursor: default; }
    }
    .when.pending {
        box-sizing: border-box;
        background: transparent;
        border: 1.5px dashed var(--ob-accent);
    }
    .when.struck {
        padding-right: 8px;
        background: var(--ob-grey-bg);
        .w { color: var(--ob-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
        .w svg { stroke: var(--ob-muted); }
    }
    .bar .send { height: 42px; padding: 0 22px; font-size: 14.5px; }
    .pickpop {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 5;
        width: 320px;
        padding: 14px 16px 16px;
        background: var(--ob-card);
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius);
        box-shadow: var(--ob-shadow-menu);
    }
    .pickpop.up { top: auto; bottom: calc(100% + 8px); }
    .pickpop[hidden] { display: none; }
    .pickpop .ob-calpicker .pk-head { padding-right: 0; margin-bottom: 8px; }
    .pickpop .tm {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--ob-line-in);
    }
    .pickpop .tm label { font-size: 13px; font-weight: 700; color: var(--ob-ink-2); }
    .pickpop .tm input {
        height: 38px;
        padding: 0 10px;
        border: 1px solid var(--ob-line);
        border-radius: var(--ob-radius-sq);
        background: var(--ob-canvas);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        color: var(--ob-ink);
    }
    .pickpop .tm input:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 1px; }
    .pickpop .tm .grow { flex: 1 1 auto; }
    .pickpop .err { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ob-rose-ink); }
}
@media (max-width: 699px) {
    .ob-popup.compose { padding: 22px 12px 32px; }
    .ob-compose { padding: 22px 16px 12px 14px; }
    .ob-compose .linknote { margin: 12px -16px -12px -14px; }
    .ob-compose .linknote .say { padding: 10px 16px 11px 14px; }
    .ob-compose .linknote .reason { padding: 0 16px 12px 66px; }
    .ob-compose .ob-srow .text { font-size: 17px; }
    .ob-compose .pickpop { left: 0; width: 100%; box-sizing: border-box; }
    .ob-compose .when .clear { width: 36px; height: 36px; }
    .ob-compose .pickpop .tm input { font-size: 16px; }
    .ob-compose .pickpop .pk-head .b { width: 36px; height: 36px; }
    .ob-compose .linknote { margin: 10px 0 0; }
}
.ob-modal.compose.reading {
    border-color: var(--ob-line);
}
.ob-compose > .wait { min-height: 96px; display: grid; place-items: center; color: var(--ob-muted); }
.ob-compose > .wait::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    animation: ob-spin .8s linear infinite, ss-wait-in .2s .5s both;
}
.ob-postview {
    .ob-srow .who { padding-top: 3px; }
    .ob-srow .name { font-size: 15.5px; font-weight: 800; }
    .ob-srow .handle { font-size: 14.5px; }
    .ob-srow .text { margin-top: 5px; }
    > .ob-empty { padding: 18px 0 8px; }
    .why {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 14px 34px 0 58px;
        padding: 10px 12px;
        border-radius: 12px;
        background: var(--ob-rose-card);
        border: 1px solid var(--ob-rose-edge);
        color: var(--ob-rose-ink);
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
    .bar .ob-pill { height: 42px; padding: 0 20px; font-size: 14.5px; }
    .bar .ob-pill.primary { padding: 0 22px; }
    .bar .ob-pill.text { padding: 0 14px; color: var(--ob-ink); }
    .bar .ob-pill.text:hover { background: var(--ob-accent-bg); }
}
@keyframes ss-wait-in { from { opacity: 0; } to { opacity: 1; } }
.ob-compose .linknote .ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ob-postview .why svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 699px) {
    .ob-postview .why { margin: 12px 0 0; }
}
.ob-calpicker {
    font-family: var(--ob-font);
    .pk-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        padding-right: 88px;
    }
    .pk-head .m { flex: 0 0 auto; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); white-space: nowrap; }
    .pk-head .grow { flex: 1 1 auto; }
    .pk-head .nav { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
    .pk-head .b {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 9px;
        background: var(--ob-canvas);
        color: var(--ob-muted);
        cursor: pointer;
    }
    .pk-head .b:hover { background: var(--ob-accent-bg); color: var(--ob-accent-ink); }
    .pk-head .b svg { width: 14px; height: 14px; }
    .pk-dow {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-bottom: 4px;
    }
    .pk-dow span {
        text-align: center;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--ob-faint-1);
    }
    .pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 1px; }
    .pk-day {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 39px;
        padding: 4px 0;
        border: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
        border-radius: 0;
    }
    .pk-day .n {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 24px;
        height: 22px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ob-ink);
        font-variant-numeric: tabular-nums;
        line-height: 1;
        padding: 1px 1px 0 0;
    }
    .pk-day.other .n { color: var(--ob-faint-2); }
    .pk-day.past .n { color: var(--ob-muted); }
    .pk-day.other.past .n { color: var(--ob-faint-2); }
    .pk-day:not(.in):hover { background: var(--ob-canvas); border-radius: 9px; }
    .pk-day.off { opacity: .32; pointer-events: none; }
    .pk-head .b[disabled] { opacity: .32; pointer-events: none; }
    &.pending .pk-day .n { opacity: .45; }
    &.fresh .pk-dots i { animation: ob-dot-in .32s ease-out both; }
    .pk-day.in { background: var(--ob-accent); }
    .pk-day.in .n { color: #fff; }
    .pk-day.in.past .n { color: rgba(255, 255, 255, .72); }
    .pk-day.in:hover { background: var(--ob-accent-lift); }
    .pk-day.in.first, .pk-day.in:nth-child(7n + 1) { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
    .pk-day.in.last, .pk-day.in:nth-child(7n) { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
    .pk-day.today .n {
        color: var(--ob-accent-ink);
        box-shadow: inset 0 0 0 1.5px var(--ob-accent-ring);
    }
    .pk-day.today.in .n { background: #fff; color: var(--ob-accent); box-shadow: none; }
    .pk-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 5px;
    }
    .pk-dots i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--ob-faint-2);
    }
    .pk-dots i.went { background: var(--ob-mint-ink); }
    .pk-dots i.going { background: var(--ob-accent); }
    .pk-dots i.wait { background: var(--ob-butter-ink); }
    .pk-dots i.stop { background: var(--ob-rose-ink); opacity: .55; }
    .pk-dots i.more { background: var(--ob-faint-1); width: 3px; height: 3px; }
    .pk-day.in .pk-dots i { background: rgba(255, 255, 255, .92); }
    .pk-day.in .pk-dots i.stop { background: rgba(255, 255, 255, .5); opacity: 1; }
    .pk-day.in .pk-dots i.more { background: rgba(255, 255, 255, .7); }
}
@keyframes ob-dot-in { from { opacity: 0; transform: scale(.5); } }
.ob-slot { display: contents; }
.ob-card {
    background: var(--ob-card);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius);
    padding: 20px 22px;
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
.ob-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--ob-pill-h);
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--ob-font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    background: var(--ob-card);
    color: var(--ob-ink);
    transition: background .12s, color .12s, border-color .12s, transform .12s;
    & svg { width: 16px; height: 16px; flex: 0 0 auto; }
    &.primary { background: var(--ob-accent); color: #fff; }
    &.primary:hover { background: var(--ob-accent-ink); }
    &.ghost { background: var(--ob-card); border-color: var(--ob-line); color: var(--ob-ink); }
    &.ghost:hover { background: var(--ob-canvas); }
    & svg.out { width: 13px; height: 13px; margin-right: -3px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    &.text { background: transparent; color: var(--ob-ink-2); padding: 0 12px; }
    &.text:hover { color: var(--ob-ink); }
    &.danger { background: var(--ob-rose-bg); color: var(--ob-rose-ink); }
    &.danger:hover { background: #ffd5d9; }
    &.full { width: 100%; }
    &.sm { height: 30px; padding: 0 13px; font-size: 12.5px; }
    &:active { transform: translateY(1px); }
    &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
    &:disabled { opacity: .5; cursor: default; }
    &.busy, &.busy:disabled { opacity: 1; transform: none; }
    &:hover { text-decoration: none; }
}
.ob-spin {
    flex: 0 0 auto;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    animation: ob-spin .8s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ob-spin { animation-duration: 2.4s; }
}
.ob-lbl {
    font-family: var(--ob-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ob-muted);
    margin: 0 0 10px;
}
.ob-square,
.ob-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: var(--ob-font);
    font-weight: 700;
    overflow: hidden;
    background: var(--ob-canvas);
    color: var(--ob-ink-2);
    vertical-align: middle;
    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
.ob-square {
    border-radius: var(--ob-radius-sq);
    & svg { width: 56%; height: 56%; }
    &.bot {
        background: var(--ob-ink);
        border-radius: 50%;
    }
    &.bot:has(img) { background: transparent; }
    &.bot::after {
        content: "";
        width: 100%;
        height: 100%;
        background: #fff;
        -webkit-mask: url(/images/logo/sendstory-face-mono.svg) center / contain no-repeat;
        mask: url(/images/logo/sendstory-face-mono.svg) center / contain no-repeat;
    }
    &.bot:has(img)::after { content: none; }
    &.md { width: 32px; height: 32px; }
}
.ob-circle {
    border-radius: 50%;
    & svg { width: 50%; height: 50%; }
    &.md { width: 30px; height: 30px; font-size: 12px; }
    &.lg { width: 44px; height: 44px; font-size: 18px; }
    &.xl { width: 56px; height: 56px; font-size: 22px; }
}
.ob-badged {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
    > .badge {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 46%;
        height: 46%;
        border-radius: 50%;
        background: var(--ob-badge-ring, var(--ob-card));
        box-shadow: 0 0 0 2px var(--ob-badge-ring, var(--ob-card));
    }
    &:has(> .ob-circle.xl) > .badge { width: 40%; height: 40%; right: -2px; bottom: -2px; }
}
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ob-empty {
    font-family: var(--ob-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ob-muted);
    padding: 34px 0;
    max-width: 52ch;
}
.ob-note {
    margin: 10px 0 0;
    font-family: var(--ob-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ob-muted);
    & code {
        font-family: var(--ob-mono);
        font-size: 11.5px;
        padding: 1px 5px;
        border-radius: 5px;
        background: var(--ob-canvas);
        color: var(--ob-ink-2);
    }
    &.mint {
        padding: 9px 12px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-mint-bg);
        color: var(--ob-mint-ink);
    }
    &.rose {
        padding: 9px 12px;
        border-radius: var(--ob-radius-tile);
        background: var(--ob-rose-bg);
        color: var(--ob-rose-ink);
    }
}
.ob-card .acts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    .grow { flex: 1 1 auto; }
}
.ob-input {
    width: 100%;
    height: var(--ob-pill-h);
    padding: 0 13px;
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius-tile);
    background: var(--ob-card);
    font-family: var(--ob-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ob-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    &::placeholder { color: var(--ob-faint-2); font-weight: 600; }
    &:focus { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); }
    &:disabled { background: var(--ob-canvas); color: var(--ob-muted); }
}
.ob-connectbox {
    container-type: inline-size;
    font-family: var(--ob-font);
    .split {
        display: grid;
        grid-template-columns: 184px minmax(0, 1fr);
        border: 1px solid var(--ob-line-in);
        border-radius: var(--ob-radius-panel);
        background: var(--ob-card);
        overflow: hidden;
    }
    .side {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px;
        background: var(--ob-canvas);
        border-right: 1px solid var(--ob-line-in);
    }
    .h {
        display: flex;
        align-items: center;
        gap: 11px;
        height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ob-ink-2);
        text-align: left;
        cursor: pointer;
        & img, & svg { flex: 0 0 auto; width: 18px; height: 18px; filter: grayscale(1); opacity: .55; color: var(--ob-ink); }
        &:hover { color: var(--ob-ink); }
        &:hover img, &:hover svg { filter: none; opacity: 1; }
        &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 1px; }
        &.on { background: var(--ob-card); color: var(--ob-ink); font-weight: 700; box-shadow: 0 0 0 1px var(--ob-line); cursor: default; }
        &.on img, &.on svg { filter: none; opacity: 1; }
    }
    .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 20px 20px; }
    .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--ob-line-in); margin-bottom: 4px; }
    .tabs button {
        padding: 0 0 11px;
        margin-bottom: -1px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        font-family: var(--ob-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--ob-ink-2);
        cursor: pointer;
        &:hover { color: var(--ob-ink); }
        &.on { color: var(--ob-ink); font-weight: 700; border-bottom-color: var(--ob-accent); cursor: default; }
    }
    .win {
        border-radius: var(--ob-radius-tile);
        background: var(--ob-ink);
        color: var(--ob-term-ink);
        font-family: var(--ob-mono);
        font-size: 13px;
        line-height: 1.6;
        overflow: hidden;
    }
    .win + .win { margin-top: -4px; }
    .bar {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 8px 0 16px;
        background: var(--ob-term-bar);
        font-size: 12px;
        font-weight: 500;
        color: var(--ob-term-bar-ink);
        & svg { flex: 0 0 auto; width: 15px; height: 15px; }
        .where { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }
    .wcopy {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 28px;
        padding: 0 11px;
        border: 0;
        border-radius: 8px;
        background: var(--ob-term-btn);
        font-family: var(--ob-font);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ob-term-ink);
        cursor: pointer;
        & svg { width: 14px; height: 14px; }
        &:hover { background: var(--ob-ink-2); }
    }
    .body { padding: 14px 18px 16px; }
    .ln { padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; overflow-wrap: anywhere; }
    .pr { color: var(--ob-term-prompt); user-select: none; }
    .key { color: var(--ob-term-key); }
    .alt { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ob-ink-2); }
    .alt code { font-family: var(--ob-mono); font-size: 12.5px; font-weight: 500; color: var(--ob-ink); background: var(--ob-canvas); border-radius: 6px; padding: 2px 7px; }
    .ob-note { margin: 0; }
    .main > .ob-pill { align-self: flex-start; }
}
@container (max-width: 559px) {
    .ob-connectbox .split { display: block; border: 0; border-radius: 0; background: transparent; overflow: visible; }
    .ob-connectbox .side { flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 0 0 16px; background: transparent; border: 0; }
    .ob-connectbox .h {
        justify-content: center;
        gap: 7px;
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        background: var(--ob-canvas);
        font-size: 13px;
        .nm { display: none; }
        &.on { padding: 0 10px 0 8px; background: var(--ob-card); box-shadow: inset 0 0 0 1.5px var(--ob-accent-ring); }
        &.on .nm { display: inline; }
    }
    .ob-connectbox .main { padding: 0; gap: 12px; }
    .ob-connectbox .tabs { gap: 20px; }
    .ob-connectbox .tabs button { font-size: 13.5px; min-height: 36px; min-width: 36px; padding: 10px 0; }
    .ob-connectbox .win { font-size: 12px; border-radius: 12px; }
    .ob-connectbox .bar { height: 44px; padding: 0 4px 0 14px; font-size: 11.5px; }
    .ob-connectbox .wcopy { height: 36px; padding: 0 12px; font-size: 12.5px; }
    .ob-connectbox .body { padding: 12px 14px 14px; }
    .ob-connectbox .alt { font-size: 12.5px; }
}
.ob-keyonce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-mint-ink);
}
.ob-secthead {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 26px 0 10px;
    .t { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); }
}