@font-face {
    font-family: face;
    src: url("https://cdn.hackclub.com/01a09f6d-388e-7b00-bc97-f496aba42ac6/safiro-medium-webfont%20(2).ttf");
}

* {
    font-family: inherit;
}

body {
    font-family: face, sans-serif;
    margin-top: 0;
    margin: 0;
    background-color: var(--page);
    background-image: linear-gradient(var(--page-pattern-tint), var(--page-pattern-tint)), var(--page-pattern);
    background-size: 100% 100%, 360px 650px;
    background-repeat: repeat;
    color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
    html,
    body,
    html body * {
        cursor: none !important;
    }
}

.skiplink {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 2147483646;
    padding: .6rem 1rem;
    background: var(--brand);
    color: var(--on-brand);
    border-radius: 0 0 .4rem 0;
    text-decoration: none;
}

/* Off-screen until tabbed to, then above the sticky nav. */
.skiplink:focus {
    left: 0;
}

/* #main only ever takes focus from the skip link, so skip the ring
   that would otherwise outline the whole page. */
#main:focus {
    outline: none;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    width: 64px;
    height: 64px;
    pointer-events: none;
    user-select: none;
    transform: translate3d(-100px, -100px, 0);
}

.topnav {
    --nav-gap: .8rem;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .55rem 2rem .55rem 11rem;
    background: var(--page-veil);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

.topnav__links {
    display: flex;
    align-items: center;
    gap: 2.1rem;
    margin: 0 auto;
}

.topnav__tools {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-left: auto;
}

.navlink,
.navgroup__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem 0;
    font-size: .95rem;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: color .15s ease;
}

.navgroup__trigger::-webkit-details-marker { display: none; }
.navgroup__trigger::marker { content: ""; }

.navlink:hover,
.navgroup__trigger:hover,
.navgroup[open] .navgroup__trigger { color: var(--ink); }

.navlink[aria-current],
.navgroup[data-current] .navgroup__trigger { color: var(--ink); font-weight: 600; }

.navlink::after,
.navgroup__trigger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-ink);
    transition: width .22s ease;
}

.navlink:hover::after,
.navgroup__trigger:hover::after { width: 100%; }
.navlink[aria-current]::after,
.navgroup[data-current] .navgroup__trigger::after { width: 100%; }

.navgroup__chev {
    width: .75rem;
    height: .75rem;
    opacity: .6;
    transition: transform .2s ease;
}

.navgroup[open] .navgroup__chev { transform: rotate(180deg); }

.navgroup { position: relative; }

/* The gap under the trigger is a dead zone the pointer has to cross, and
   crossing it would close a hover-opened menu. This bridges it. */
.navgroup__menu::before,
.topnav__account-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--nav-gap) + 2px);
}

.navgroup__menu {
    position: absolute;
    top: calc(100% + var(--nav-gap));
    left: 50%;
    transform: translateX(-50%);
    z-index: 130;
    display: grid;
    gap: .15rem;
    min-width: 15rem;
    padding: .45rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

.navgroup__menu a {
    display: grid;
    gap: .1rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}

.navgroup__menu a:hover { background: var(--surface-2); }
.navgroup__menu a[aria-current] { background: var(--surface-2); }
.navgroup__menu a::after { display: none; }

.navgroup__title { font-size: .92rem; font-weight: 600; }
.navgroup__blurb { font-size: .76rem; color: var(--ink-soft); }

.navicon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    color: var(--ink-soft);
}

.navicon svg { width: 1.15rem; height: 1.15rem; }
.navicon:hover { background: var(--surface-2); color: var(--ink); }
.navicon::after { display: none; }

.navicon__dot {
    position: absolute;
    top: .1rem;
    right: .05rem;
    min-width: 1rem;
    padding: 0 .2rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.accountmenu__who {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: .45rem .65rem .6rem;
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
    color: var(--ink-soft);
}

.accountmenu__who strong { color: #2a1a10; font-size: .9rem; }

.accountmenu__rule {
    margin: .3rem .4rem;
    border: 0;
    border-top: 1px solid var(--line);
}

.topnav a,
.topnav .settings-link {
    font-size: .95rem;
    color:#2a1a10 ;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}


.topnav form { margin: 0; }

.topnav__search { display: inline-flex; }

.verify-banner {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .7rem 2rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.verify-banner form { margin: 0; }

@media (max-width: 60rem) {
    .topnav { gap: 1rem; padding: .8rem 1rem; }
    .topnav a, .topnav .settings-link { font-size: .85rem; }
    .verify-banner { padding: .7rem 1rem; }
    .topnav { flex-wrap: wrap; }
}

.logo {
    height: 6rem;
    width: auto;
    padding-top: 0.2rem;
    position: absolute;
    left: 2%;
    user-select: none;
}

.topnav a {
    position: relative;
    text-decoration: none;
    color: var(--ink);
}

.topnav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;

    width: 0;
    height: 3px;

    background-color: var(--brand-ink);
    border-radius: 999px;

    transition: width 0.3s ease;
}

.topnav a:hover::after {
    width: 100%;
}

/* The two second-step pages - the admin passcode and the 2FA code prompt.
   They live in app.css rather than admin.css because the login-side page
   never loads the admin stylesheet. */

.gate { max-width: 26rem; margin: 4rem auto; padding: 0 1rem; }
.gate h1 { margin: 0 0 .3rem; font-size: 1.3rem; }
.gate--wide { max-width: 32rem; }
.gate__sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.2rem; }
.gate__error { background: var(--surface-2); border: 1px solid #f3b7bf; border-radius: 8px;
    padding: .55rem .75rem; font-size: .9rem; margin: 0 0 1rem; }
.gate form { display: flex; gap: .5rem; }
.gate__input { flex: 1; padding: .55rem .7rem; font: inherit;
    border: 1px solid var(--line-strong); border-radius: 8px; }
.gate__input:disabled { background: var(--surface-2); }
.gate__foot { margin-top: 1.4rem; font-size: .85rem; }
.gate button { padding: .55rem 1rem; font: inherit; cursor: pointer;
    background: var(--brand); color: var(--on-brand); border: none; border-radius: 8px; }
.gate button:hover { background: var(--brand-press); }
.gate button:disabled { opacity: .55; cursor: default; }

/* Drawn server-side, so the secret never reaches a third-party QR service. */
.qr { display: grid; place-items: center; background: var(--surface); padding: 1rem;
    border: 1px solid var(--line); border-radius: 12px; margin: 0 0 1rem; }
.qr svg { width: 12rem; height: 12rem; }
.qr__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-3); padding: .15rem .4rem; border-radius: 6px;
    letter-spacing: .05em; }

.codes { list-style: none; margin: 0 0 1.4rem; padding: 1rem;
    background: var(--surface-3); border-radius: 12px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
@media (max-width: 30rem) { .codes { grid-template-columns: 1fr; } }

/* Heatmap and badges - used on the dashboard and on profiles, which load
   different stylesheets, so they live here where every page gets them. */

.hm-card, .ach { border: 1px solid var(--line); border-radius: 12px;
    padding: 1rem; margin: 1rem 0; background: var(--surface); }
.hm-card h2, .ach h2 { margin: 0 0 .6rem; font-size: 1rem; }

.hm__grid { display: flex; gap: 3px; overflow-x: auto; padding-bottom: .3rem; }
.hm__col { display: flex; flex-direction: column; gap: 3px; }
.hm__cell { width: 11px; height: 11px; border-radius: 2px; background: var(--surface-3); }
.hm--compact .hm__cell { width: 9px; height: 9px; }
.hm__cell--0 { background: var(--surface-3); }
.hm__cell--1 { background: #e0c9ae; }
.hm__cell--2 { background: #c99a63; }
.hm__cell--3 { background: #a06a2c; }
.hm__cell--4 { background: var(--brand); }
.hm__cell--future { background: transparent; }
.hm__legend { display: flex; justify-content: space-between; align-items: center;
    font-size: .75rem; color: var(--ink-soft); margin: .3rem 0 0; flex-wrap: wrap; gap: .5rem; }
.hm__scale { display: flex; align-items: center; gap: 3px; }

.ach__list { list-style: none; padding: 0; margin: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.ach__item { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; }
.ach__item b { display: block; font-size: .88rem; }
.ach__item small { color: var(--ink-soft); font-size: .75rem; }
.ach__item--consistency { border-color: #d9a441; }
.ach__item--level { border-color: var(--brand-ink); }
.ach__item--range { border-color: #6aa3c8; }
#search {
    border-radius: 12px;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 8rem;
    border: 0.07rem solid var(--line-strong);
    background-color: var(--surface);
    color: var(--ink);
    font: inherit;

}

#search::placeholder { color: var(--ink-muted); }

#search:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px rgba(165, 42, 42, 0.15);
}

.tito {
    text-decoration: none;
    color: black;
}

.point {
    display: flex;
    flex-direction: row;
}

.dashi {
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 50%;
    border: 1.5px solid #77431d;

    display: block;
}

.dashi--blank {
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1rem;
}

.topnav__account {
    position: relative;
    z-index: 110;
}

.topnav__account-trigger {
    display: block;
    list-style: none;
    cursor: pointer;
}

.topnav__account-trigger::-webkit-details-marker { display: none; }
.topnav__account-trigger::marker { content: ""; }
.topnav__account-trigger:focus-visible {
    outline: 3px solid #a06a2c;
    outline-offset: 3px;
    border-radius: 50%;
}

.topnav__account::details-content {
    transition: content-visibility 0.15s allow-discrete,
                opacity 0.15s ease;
}

.topnav__account[open]::details-content {
    opacity: 1;
}

.topnav__account-menu {
    position: absolute;
    top: calc(100% + var(--nav-gap));
    right: 0;
    z-index: 130;
    min-width: 13rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;

    background-color: transparent;
    background-image: url("https://cdn.hackclub.com/01a15185-d9d9-7666-86f5-947a28c62bc6/menu.avif");
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

.topnav__account[open] .topnav__account-menu {
    opacity: 1;
    transform: translateY(0);
}

.topnav .topnav__account-menu a,
.topnav .topnav__account-menu .settings-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .65rem;
    border-radius: 10px;
    color: #2a1a10;
    text-align: left;
    text-decoration: none;
    font-size: .88rem;
}

.topnav .topnav__account-menu a::after { display: none; }

.topnav .topnav__account-menu a:hover,
.topnav .topnav__account-menu .settings-link:hover {
    color: var(--brand);
}

.topnav__account-menu form { margin: 0; }


.rusty__lede {
    margin: 0 0 .8rem;
    color: var(--ink-soft);
    font-size: .85rem;
}

.rusty__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.rusty__row {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    align-items: center;
    gap: .6rem;
}

.rusty__topic {
    color: var(--ink);
    font-weight: 600;
    font-size: .88rem;
    text-transform: capitalize;
}


.rusty__bar {
    position: relative;
    height: .45rem;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.rusty__peak,
.rusty__now {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
}

.rusty__peak { background: var(--line-strong); }
.rusty__now  { background: var(--brand); }

.rusty__meta {
    color: var(--ink-soft);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.editorial { margin: 1.4rem 0; }

.editorial__head {
    cursor: pointer;
    font-weight: 600;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.editorial__body { margin-top: .9rem; }

.editorial--locked {
    padding: .6rem .8rem;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .86rem;
}

@media (max-width: 40rem) {
    .rusty__row { grid-template-columns: 1fr auto; }
    .rusty__bar { grid-column: 1 / -1; }
}

.profile-actions { display: flex; align-items: center; gap: .5rem; }

.profile-share {
    padding: .4rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.profile-share:hover { background: var(--surface-2); }

.profile-embed { margin: 1rem 0 1.6rem; }

.profile-embed > summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: .85rem;
}

.profile-embed__hint { margin: .6rem 0 .4rem; color: var(--ink-soft);
    font-size: .8rem; }

.profile-embed__code {
    margin: 0 0 .8rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    overflow-x: auto;
    font-size: .78rem;
}

.profile-embed__preview {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.navalerts { position: relative; }

.navalerts__trigger { list-style: none; cursor: pointer; }
.navalerts__trigger::-webkit-details-marker { display: none; }
.navalerts__trigger::marker { content: ""; }

.navalerts[open] .navalerts__trigger { background: var(--surface-2); color: var(--ink); }

.navalerts__menu {
    position: absolute;
    top: calc(100% + var(--nav-gap));
    right: 0;
    z-index: 130;
    width: 21rem;
    max-width: calc(100vw - 2rem);
    padding: .45rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

.navalerts__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--nav-gap) + 2px);
}

.navalerts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    padding: .4rem .6rem .55rem;
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
}

.navalerts__count {
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .68rem;
}

.navalerts__list { display: grid; gap: .1rem; padding: .3rem 0; }

.navalerts__state {
    margin: 0;
    padding: 1rem .6rem;
    text-align: center;
    color: var(--ink-soft);
    font-size: .82rem;
}

.topnav .navalerts__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}

.topnav .navalerts__item::after { display: none; }
.topnav .navalerts__item:hover { background: var(--surface-2); }

.navalerts__item[data-unread] { background: var(--surface-2); }

.navalerts__item[data-unread] .navalerts__title::after {
    content: "";
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-left: .35rem;
    border-radius: 50%;
    background: var(--brand);
    vertical-align: middle;
}

.navalerts__icon { font-size: .95rem; line-height: 1.35; }
.navalerts__body { display: grid; gap: .1rem; min-width: 0; }

.navalerts__title {
    font-size: .86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navalerts__meta { font-size: .72rem; color: var(--ink-soft); }

.topnav .navalerts__all {
    display: block;
    padding: .5rem .6rem;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand-ink);
    text-decoration: none;
}

.topnav .navalerts__all::after { display: none; }
.topnav .navalerts__all:hover { text-decoration: underline; }

@media (max-width: 60rem) {
    .navalerts__menu { right: auto; left: 50%; transform: translateX(-50%); }
}

.coinchip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .55rem;
    padding: .1rem .5rem .1rem .4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    vertical-align: middle;
}

.coinchip:hover { border-color: var(--line-strong); }
.coinchip__mark { color: #d9a441; font-size: .7rem; line-height: 1; }

.navlink--staff {
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
}

.navlink--staff::before {
    content: "";
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--brand);
}

.navlink--staff::after { display: none; }
.navlink--staff:hover { background: var(--surface-2); }
.navlink--staff[aria-current] { background: var(--surface-2); border-color: var(--brand); }

.ws__where {
    display: inline-flex;
    align-items: center;
    color: var(--ink-soft);
    font-size: .78rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ws__where[hidden] { display: none; }

.hintdlg {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.hintdlg::backdrop {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.hintdlg__title { margin: 0 0 .4rem; font-size: 1.1rem; }

.hintdlg__lede {
    margin: 0 0 .9rem;
    color: var(--ink-soft);
    font-size: .88rem;
}

.hintdlg__lines {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem .8rem;
    margin: 0 0 1rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: .86rem;
}

.hintdlg__lines dt { margin: 0; color: var(--ink-soft); }
.hintdlg__lines dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hintdlg__error {
    margin: 0 0 .9rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--bad-ink, var(--ink));
    font-size: .85rem;
}

.hintdlg__actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

.hintdlg__actions button { min-height: var(--tap, 2.75rem); }

@media (prefers-reduced-motion: no-preference) {
    .hintdlg[open] { animation: hintdlg-in .16s ease-out; }
    @keyframes hintdlg-in {
        from { opacity: 0; transform: translateY(.4rem) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
}

.skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: .6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--brand);
    border-radius: 0 0 8px 0;
}

.skiplink:focus {
    left: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

#main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .ribbon,
    .fire { display: none; }
}

/* Anything that overflows the viewport on a phone causes the whole page
   to scroll sideways, which is the single most common mobile defect. */
html, body { overflow-x: hidden; }