@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');
#credential_picker_container { display: none; } 
.g_id_signin[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } 
.google-btn { transition: opacity 0.3s ease; } 
.google-btn[disabled] { opacity: 0.5; pointer-events: none; } 

:root { font-size: 1.05rem; --text-001: clamp(0.709rem, 0.198vw + 0.671rem, 0.832rem); --text-005: clamp(0.75rem, 0.21vw + 0.71rem, 0.88rem); --text-015: clamp(0.78rem, 0.22vw + 0.74rem, 0.92rem); --text-07: clamp(1.96rem, 1.41vw + 1.68rem, 2.8rem); --space-005: clamp(0.375rem, 0.3542rem + 0.1042vw, 0.4375rem); } 

body { font-family: 'Reddit Mono', monospace; font-optical-sizing: auto; font-style: normal; background-color: var(--neutral-01); font-size: 0.8rem; } 

strong { font-weight: bold; } 
h1 { font-size: 1rem; } 
a { cursor: pointer; } 

.no-decoration { text-decoration: none; } 
.underline { text-decoration: underline; } 
.bold { font-weight: bold; } 
.italic { font-style: italic; } 
.no-border { border: none !important; } 
.right { margin-left: auto; } 
.center { text-align: center; } 

.note { white-space: initial; margin-top: -0.25rem; padding-bottom: 0.15rem; } 
.icon img { width: 2.3rem; height: 2.3rem; min-width: 2.3rem; min-height: 2.3rem; margin-right: 0.4rem; margin-left: -0.1rem; margin-top: 0.1rem;} 
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; } 

.flex-row { flex-flow: row nowrap; } 

.responsive-section { min-width: min(30rem, 100%); max-width: 100%; } 

@media (max-width: 30rem){
 .responsive-section { min-width: 100%; } 
 }

.small-caps { font-variant: small-caps; } 

.gap-005 { gap: var(--space-005); } 

.text-01 { font-size: var(--text-001); } 
.text-05 { font-size: var(--text-005); } 
.text-1 { font-size: var(--text-01); } 
.text-15 { font-size: var(--text-015); } 
.text-2 { font-size: var(--text-02); } 
.text-3 { font-size: var(--text-03); } 
.text-4 { font-size: var(--text-04); } 
.text-5 { font-size: var(--text-05); } 
.text-6 { font-size: var(--text-06); } 
.text-7 { font-size: var(--text-07); } 

/* Margins */
.ml-0125 { margin-left: 0.125rem; } 
.mt-0125 { margin-top: 0.125rem; } 
.mr-0125 { margin-right: 0.125rem; } 
.mb-0125 { margin-bottom: 0.125rem; } 

.ml-025 { margin-left: 0.25rem; } 
.mt-025 { margin-top: 0.25rem; } 
.mr-025 { margin-right: 0.25rem; } 
.mb-025 { margin-bottom: 0.25rem; } 

.ml-05 { margin-left: 0.5rem; } 
.mt-05 { margin-top: 0.5rem; } 
.mr-05 { margin-right: 0.5rem; } 
.mb-05 { margin-bottom: 0.5rem; } 

.ml-075 { margin-left: 0.75rem; } 
.mt-075 { margin-top: 0.75rem; } 
.mr-075 { margin-right: 0.75rem; } 
.mb-075 { margin-bottom: 0.75rem; } 

.ml-1 { margin-left: 1rem; } 
.mt-1 { margin-top: 1rem; } 
.mr-1 { margin-right: 1rem; } 
.mb-1 { margin-bottom: 1rem; } 

.ml-125 { margin-left: 1.25rem; } 
.mt-125 { margin-top: 1.25rem; } 
.mr-125 { margin-right: 1.25rem; } 
.mb-125 { margin-bottom: 1.25rem; } 

.none { display: none; } 

.w-100 { width: 100%; } 

input::placeholder,
textarea::placeholder { opacity: 0.4; } 
input { height: 1.6rem; } 

/* DURATION BUTTONS */
.duration-button { font-size: 1rem; padding: 0.4rem 0.6rem; font-weight: normal; border-radius: var(--rounded-sm); transition: background-color 0.3s, color 0.3s; } 

.duration-gap { gap: var(--space-01); } 

.duration-button:focus,
.duration-button.selected { color: var(--neutral-01); } 

.duration-button[data-group='smallest']:focus,
.duration-button[data-group='smallest'].selected { background-color: var(--orange); } 
.duration-button[data-group='small']:focus,
.duration-button[data-group='small'].selected { background-color: var(--teal); } 
.duration-button[data-group='medium']:focus,
.duration-button[data-group='medium'].selected { background-color: var(--green); } 
.duration-button[data-group='large']:focus,
.duration-button[data-group='large'].selected { background-color: var(--indigo); } 
.duration-button[data-group='largest']:focus,
.duration-button[data-group='largest'].selected { background-color: var(--pink); } 

section { --gap: var(--space-01); position: relative; overflow: visible; } 
section .title { margin: 1em 0 0; font-weight: bold; } 
.wallet { /* CHANGED CLASS */
 position: relative; align-items: center; justify-content: center; width: 100%; margin-bottom: 0.75rem; padding: 0.75rem 1rem 0.5rem 1rem; border: 0.0625rem solid var(--neutral-04); border-radius: var(--rounded-sm); transition: border-color 0.24s var(--fluid); min-height: 7.2rem; } 
.wallet span { padding-left: 0.375rem; font-size: 0.625rem; } 
.wallet code { width: -moz-fit-content; width: fit-content; } 
.wallet:hover { border-color: var(--neutral-05); } 
.blockquote { position: relative; width: 100%; margin: var(--space-01) 0 0 0; padding: var(--space-01) var(--space-01); border: 0.0625rem solid var(--neutral-04); border-radius: var(--rounded-sm); } 
.blockquote,
.blockquote .icon { background-color: var(--neutral-01); /* CHANGED FROM --neutral-02 */
 transition: border-color 0.24s var(--fluid); } 
.blockquote .icon { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; transform: translate(-50%, -50%); border: 0.0625rem solid var(--neutral-04); border-radius: 100%; font-size: 0.95rem; /* CHANGED FROM 1em */ } 
.blockquote blockquote { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 0.5em; } 
.blockquote:hover,
.blockquote:hover .icon { border-color: var(--neutral-05); } 

.sticky-container { position: sticky; top: 0; z-index: 1000; background: var(--neutral-01); padding-top: 0.5rem; padding-bottom: 0rem; } 

.wallet-item.disabled { opacity: 0.3; } 
.wallet.disabled [id^='editButton'] { opacity: 1; } 

.btn-disabled { pointer-events: none; opacity: 0.5; } 
.btn-disabled-override { pointer-events: none; opacity: 0.5; } 

/* Add to your existing CSS */
.box { position: relative; } 

.element1,
.element2 { transition: opacity 0.4s ease-in-out; position: absolute; width: 100%; top: 0; left: 0; } 

.element1 { opacity: 1; visibility: visible; position: relative; /* Initial state */ } 
.element2 { opacity: 0; visibility: hidden; z-index: 1; } 

.box.editing .element1 { opacity: 0; visibility: hidden; position: absolute; } 
.box.editing .element2 { opacity: 1; visibility: visible; position: relative; } 

.minimal { border: 0.025rem solid var(--neutral-07); padding: 0.25rem; line-height: 2.05rem; border-radius: 0.25em; display: inline; margin-right: 0.75rem; } 

.action-mm { cursor: pointer; transition: background-color 0.24s var(--fluid); } 
.action-mm:hover { background-color: var(--neutral-03); text-decoration: underline; text-decoration-color: var(--neutral-08); } 

/* .progress-bar { background: var(--neutral-04); height: 0.25rem; border-radius: 0.25rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } 
.progress { height: 100%; border-radius: 0.25rem; } */


.hero { padding: 0 1rem; text-align: center; } 
.hero h2 { font-size: 1.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 
.hero p { font-size: 1.05rem; } 
.text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 

.features { padding: 0 1rem; display: grid; gap: 1.5rem; } 
.feature-card { padding: 1rem; background: var(--neutral-02); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } 
.feature-card:hover { transform: translateY(-5px); } 
.feature-card h3 { color: var(--neutral-10); margin-bottom: 0.5rem; } 

@media (max-width: 768px){
 .hero h1 { font-size: 1.8rem; } 
 .hero p { font-size: 1rem; } 
 .features { grid-template-columns: 1fr; } 
 }

.milestones { margin: 0 auto; } 

.summary-card { background: #2a2a2a; padding: 1rem; border-radius: 8px; margin: 1rem 0; text-align: center; } 
button { background: #6a0dad; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1em; } 
button:hover { background: #7b1fa2; } 
.categories { display: flex; gap: 0.75rem; margin: 0 auto; } 
.category-container { text-align: center; } 
.category-title { font-size: 0.85rem; margin-bottom: 0.5rem; } 
.category { padding: 2px 5px; cursor: pointer; background: var(--neutral-01); border-radius: 5px; border: 1px solid var(--neutral-04); transition: background 0.3s; } 
.category:hover { background-color: var(--neutral-03); } 
.category.active { border: 1.2px solid #444; background: var(--neutral-01); } 
.category img { width: 5rem; opacity: 1; transition: opacity 0.2s ease; } 
.category img.dim { filter: grayscale(75%) brightness(120%); opacity: 0.5; transition: opacity 0.2s ease; } 

.category-content { display: none; width: 100%; } 
.category-content.active { display: block; } 

.milestone-card { padding: 1rem; margin: 1rem 0; border: 1px solid var(--neutral-04); border-radius: 8px; background: var(--neutral-02); } 
.milestone-card img { float: left; margin: 0px 15px 15px 0px; width: 4rem; margin-right: 1rem; margin-bottom: 0.5rem; } 
.milestone-card img.gray { filter: grayscale(75%); } 
.milestone-card h3 { margin-top: -0.3rem; font-size: 1.05rem; } 

.tip { font-size: 0.75rem; color: var(--neutral-09); margin-top: 0.5rem; } 

.community,
.milestone-path { margin-top: 1rem; background: var(--neutral-02); padding: 10px 20px; border-radius: 10px; border: 1px solid var(--neutral-06); } 
.recent-milestones p { margin: 5px 0; font-size: 0.9em; } 
.timeline { display: flex; flex-direction: column; gap: 20px; } 

.milestone { padding-left: 1rem; } 
.milestone-purple { border-left: 3px solid var(--purple); } 
.milestone-green { border-left: 3px solid var(--green); } 
.milestone-red { border-left: 3px solid var(--red); } 
.milestone-orange { border-left: 3px solid var(--orange); } 

.milestone h3 { margin: 0; font-size: 0.9rem; } 
.milestone p { margin: 0.125rem 0; font-size: 0.8rem; } 

footer { text-align: center; margin-top: 40px; padding: 20px; background: #222; } 
footer a { color: #f28c38; margin: 0 10px; text-decoration: none; } 
footer a:hover { text-decoration: underline; } 

.compact-switch { vertical-align: -0.175rem; } 

.action-nav { margin: 0; padding: 0.42rem 0.64rem; gap: 0.1rem; border: 1.2px solid var(--neutral-04); border-radius: var(--rounded-sm); background-color: var(--neutral-01); color: var(--neutral-09); line-height: 1; cursor: pointer; width: 3.75rem; box-sizing: border-box; text-align: center; } 
.action-nav:hover { background-color: var(--neutral-03); border-color: var(--neutral-06); } 
.action-nav img { width: 2.5rem; } 
.action-nav img.dim { filter: grayscale(80%) brightness(125%); } 
.border-action { border-color: #444; } 

.action-nav-wrapper { display: flex; flex-direction: column; align-items: center; width: 4rem; position: relative; } 
.action-nav-label { font-weight: 500; margin-bottom: -0.05rem; font-size: 0.75rem; color: var(--neutral-09); } 

/* .nav-extra-title { font-weight: 500; text-align: right; margin-bottom: 0; top: 1.3rem; font-size: 0.75rem; line-height: 0; }  */