@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/dm-sans-400.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/dm-sans-500.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/dm-sans-600.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/dm-sans-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/space-grotesk-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/space-grotesk-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/space-grotesk-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/space-grotesk-700.ttf) format('truetype');
}
:root {
  --bg:#f4f3ee;
  --ink:#242a26;
  --muted:#737a72;
  --line:#dcded5;
  --green:#315b45;
  --lime:#e8efbc;
  --orange:#b45b35;
  --white:#fffefa
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px 'DM Sans',system-ui,-apple-system,'Microsoft Yahei',sans-serif
}
button,input {
  font:inherit
}
button,a,input,summary {
  touch-action:manipulation
}
button,a {
  transition:background .18s,color .18s
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:7px;
  padding:12px 18px;
  background:transparent;
  color:var(--ink);
  font-weight:600
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
button:hover:not(:disabled) {
  background:#e8eadf
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #94b98c;
  outline-offset:4px
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
[hidden] {
  display:none!important
}
.shell {
  max-width:1180px;
  margin:auto;
  padding:0 40px
}
header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font:600 28px 'Space Grotesk','Segoe UI',sans-serif;
  letter-spacing:-1.5px
}
.brand-one {
  color:#73896c
}
.brand-mark {
  height:36px;
  width:36px;
  display:grid;
  place-content:center;
  border-radius:50%;
  background:var(--ink);
  color:white;
  font-size:25px;
  position:relative
}
.brand-mark span {
  font-size:11px;
  position:absolute;
  right:5px;
  top:4px;
  color:#dce6be
}
nav {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:12px
}
button.dark {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
  min-width:155px
}
.dark span {
  margin-left:15px
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:62px 0 48px
}
.eyebrow {
  font:500 10px 'Space Grotesk','Segoe UI',sans-serif;
  letter-spacing:1.8px;
  color:var(--muted)
}
h1 {
  font:500 clamp(35px,4.5vw,55px)/1.13 'Space Grotesk','Segoe UI',sans-serif;
  letter-spacing:-2.3px;
  margin:19px 0
}
h1 em {
  font-style:normal;
  color:#6d825e
}
.intro p {
  line-height:1.9;
  color:var(--muted);
  font-size:13px
}
.intro-stamp {
  width:180px;
  height:180px;
  border:1px solid #c5ccbb;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin-right:40px;
  position:relative
}
.intro-stamp:before {
  content:'';
  position:absolute;
  inset:8px;
  border:1px dashed #d0d6c7;
  border-radius:50%
}
.stamp-number {
  font:400 87px/.95 'Space Grotesk','Segoe UI',sans-serif;
  color:#6d825e
}
.intro-stamp>span:last-of-type {
  font-size:9px;
  letter-spacing:2px;
  margin:12px 0 7px
}
.intro-stamp small {
  font-size:8px;
  color:var(--muted);
  letter-spacing:1px
}
.warning {
  background:#f5e8d3;
  color:#855020;
  border:1px solid #e9d5b5
}
.warning button {
  white-space:nowrap;
  border-color:#c9a579;
  font-size:12px
}
.position-card {
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 12px 30px #27342504
}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 30px;
  border-bottom:1px solid #e8e9e1
}
.status-pill {
  border-radius:30px;
  background:#edf0e8;
  color:#5c6b55;
  font-size:11px;
  padding:7px 12px
}
.status-pill.ready {
  background:#e5efce;
  color:#416330
}
.status-pill.underfunded {
  background:#faecd8;
  color:#97602b
}
.position-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:34px 30px 32px;
  gap:40px
}
.pending-main {
  padding-right:25px;
  border-right:1px solid #e5e6de
}
.metric-label {
  font-size:11px;
  color:var(--muted);
  display:block
}
.metric-label span {
  margin-left:8px;
  font-size:10px;
  opacity:.8
}
.reward-number {
  display:flex;
  align-items:baseline;
  gap:15px;
  margin:18px 0 12px;
  flex-wrap:wrap
}
.reward-number>span:first-child {
  font:500 clamp(38px,5vw,62px)/1.1 'Space Grotesk','Segoe UI',sans-serif;
  letter-spacing:-2px;
  overflow-wrap:anywhere
}
.unit {
  color:var(--muted);
  font:400 17px 'Space Grotesk','Segoe UI',sans-serif
}
.pending-main p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  min-height:40px;
  margin:0
}
.next-reward {
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:28px
}
.tiny-sun {
  display:grid;
  place-content:center;
  background:#f0f2e6;
  width:43px;
  height:43px;
  border-radius:50%;
  font-size:29px;
  color:#89966d
}
.next-reward div {
  display:grid;
  gap:5px
}
.next-reward div>span {
  font-size:10px;
  color:var(--muted)
}
.next-reward strong {
  font:500 18px 'Space Grotesk','Segoe UI',sans-serif
}
.next-reward small {
  font-size:9px;
  color:var(--muted)
}
.position-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:27px 20px;
  align-content:start
}
.metric strong {
  display:block;
  font:500 25px 'Space Grotesk','Segoe UI',sans-serif;
  margin:11px 0 4px;
  overflow-wrap:anywhere
}
.metric strong small {
  font-size:11px;
  color:var(--muted);
  font-weight:400
}
.hint {
  font-size:9px;
  color:#8c9387
}
.position-start {
  grid-column:1/-1;
  border-top:1px solid #e5e6de;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:10px
}
.action-area {
  background:#f7f8f2;
  border-top:1px solid var(--line);
  padding:0 30px
}
.action-tabs {
  display:flex;
  gap:28px;
  border-bottom:1px solid var(--line)
}
.action-tab {
  padding:18px 0;
  border:none;
  border-radius:0;
  font-size:12px;
  color:#92988c;
  border-bottom:2px solid transparent
}
.action-tab.selected {
  border-bottom-color:var(--green);
  color:var(--green)
}
.action-tab:hover {
  background:transparent!important;
  color:var(--green)
}
.action-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  padding:26px 0 22px;
  align-items:center
}
h2 {
  font-size:19px;
  font-weight:500;
  margin:0 0 12px;
  letter-spacing:-.3px
}
.action-copy p {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  margin:0;
  max-width:345px
}
.action-controls {
  display:grid;
  gap:9px
}
.action-controls label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted)
}
.action-controls label span {
  font-size:9px
}
.amount-field {
  display:flex;
  align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0 13px;
  height:44px;
  gap:12px
}
.amount-field input {
  min-width:0;
  width:100%;
  background:none;
  border:0;
  color:var(--ink);
  font-family:'Space Grotesk','Segoe UI',sans-serif;
  font-size:17px;
  outline:none
}
.amount-field>span {
  font-size:10px;
  color:var(--muted)
}
.action-controls>small {
  font-size:9px;
  color:var(--muted);
  line-height:1.6
}
button.primary {
  background:var(--green);
  border-color:var(--green);
  color:white;
  margin-top:3px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:44px;
  font-size:12px
}
.primary:hover:not(:disabled) {
  background:#244533
}
.gas-note {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#8b9286;
  border-top:1px solid #e4e6dd;
  margin:0;
  padding:14px 0;
  gap:15px;
  line-height:1.6
}
summary {
  cursor:pointer;
  list-style:none;
  padding:15px 0;
  display:flex;
  justify-content:space-between;
  font:500 12px 'Space Grotesk','Segoe UI',sans-serif
}
summary::-webkit-details-marker {
  display:none
}
summary small {
  font:400 10px 'DM Sans',sans-serif;
  color:var(--muted);
  margin-left:12px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:25px
}
.section-heading h2 {
  margin:10px 0 0;
  font-size:20px
}
.section-heading>span {
  font-size:9px;
  color:var(--muted)
}
.section-heading .dot {
  margin-right:7px
}
.protocol-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius:8px;
  overflow:hidden
}
.protocol-grid>div {
  padding:23px 25px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.protocol-grid strong {
  display:block;
  font:500 27px 'Space Grotesk','Segoe UI',sans-serif;
  margin:13px 0 7px;
  overflow-wrap:anywhere
}
.protocol-grid strong small {
  font-size:11px
}
.protocol-grid>div>small {
  font-size:9px;
  color:var(--muted)
}
.principles {
  margin:55px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.principles>div>span {
  font:400 11px 'Space Grotesk','Segoe UI',sans-serif;
  color:#9ca28e
}
.principles h3 {
  font-size:13px;
  font-weight:500;
  margin:13px 0 10px
}
.principles p {
  font-size:11px;
  color:var(--muted);
  line-height:1.9;
  margin:0
}
footer {
  border-top:1px solid var(--line);
  padding:28px 0 35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.footer-brand {
  font:600 21px 'Space Grotesk','Segoe UI',sans-serif;
  letter-spacing:-1px
}
footer p {
  font-size:10px;
  line-height:1.9;
  color:var(--muted);
  flex:1
}
footer p span {
  font-size:9px
}
footer>a:last-child {
  font-size:10px
}
dialog {
  max-width:470px;
  width:calc(100% - 32px);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  padding:30px;
  color:var(--ink)
}
dialog::backdrop {
  background:#17251fcc;
  backdrop-filter:blur(3px)
}
dialog h2 {
  margin-top:18px
}
dialog p {
  font-size:13px;
  line-height:1.9;
  white-space:pre-line
}
.dialog-note {
  color:var(--muted)
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:25px
}
.danger {
  color:white;
  background:#9b4f37;
  border-color:#9b4f37
}
.danger:hover {
  background:#7d3e2a!important
}
@media(max-width:700px) {
  .shell {
  padding:0 20px
}
header {
  height:90px
}
nav {
  gap:12px
}
nav>a {
  display:none
}
button.dark {
  min-width:130px;
  padding:11px 12px;
  font-size:11px
}
.intro {
  padding:35px 0 28px
}
.intro-stamp {
  display:none
}
h1 {
  font-size:39px
}
.intro .eyebrow {
  font-size:8px;
  letter-spacing:1.1px
}
.position-body {
  grid-template-columns:1fr;
  padding:25px 22px;
  gap:28px
}
.pending-main {
  border-right:0;
  border-bottom:1px solid var(--line);
  padding:0 0 25px
}
.pending-main p {
  min-height:0
}
.reward-number>span:first-child {
  font-size:52px
}
.next-reward {
  margin-top:20px
}
.card-top {
  padding:20px
}
.action-area {
  padding:0 20px
}
.action-content {
  grid-template-columns:1fr;
  gap:20px
}
.action-tabs {
  gap:25px
}
.gas-note {
  flex-direction:column;
  gap:5px
}
.protocol-grid {
  grid-template-columns:repeat(2,1fr)
}
.protocol-grid>div {
  padding:20px 16px
}
.protocol-grid strong {
  font-size:23px
}
.section-heading>span {
  max-width:130px;
  text-align:right;
  line-height:1.6
}
.principles {
  grid-template-columns:1fr;
  gap:25px;
  margin:35px 0
}
.principles h3 {
  margin-top:8px
}
footer {
  flex-wrap:wrap;
  gap:15px
}
footer>a:last-child {
  width:100%;
  text-align:right
}
.test-strip {
  font-size:8px;
  letter-spacing:.8px
}

}
@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important
}

}


.account-row  {
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:12px;
   padding:16px 30px 0;
   
}

.account-row p  {
   font:11px monospace;
   overflow-wrap:anywhere;
   min-width:0;
   color:var(--muted);
   
}

.account-row>div  {
   display:flex;
   gap:8px;
   flex-shrink:0;
   
}

.account-row button,select  {
   font:11px inherit;
   padding:8px 10px;
   border:1px solid var(--line);
   border-radius:6px;
   background:var(--white);
   color:var(--ink);
   
}

select  {
   max-width:160px;
   
}

.eligibility-metric p  {
   font-size:12px;
   line-height:1.8;
   color:var(--green);
   margin-top:12px;
   
}

.action-tab span  {
   margin-left:5px;
   font-size:10px;
   
}

.action-copy .action-warning  {
   margin-top:14px;
   padding-left:12px;
   border-left:2px solid #d7b98f;
   color:#855020;
   font-size:11px;
   
}

.action-summary  {
   display:flex;
   align-items:center;
   gap:16px;
   padding:8px 0;
   
}

.action-summary p  {
   line-height:1.8;
   margin:0;
   font-size:13px;
   
}

.action-summary small  {
   font-size:10px;
   color:var(--muted);
   
}

.exit-symbol  {
   font-size:34px;
   color:var(--green);
   padding:0 6px;
   
}

.action-content  {
   min-height:220px;
   animation:panel-in .2s ease-out;
   
}

.statusline  {
   display:flex;
   align-items:baseline;
   gap:15px;
   padding:16px 0;
   margin-bottom:35px;
   font-size:11px;
   line-height:1.8;
   color:var(--muted);
   
}

.statusline p  {
   flex:1;
   margin:0;
   
}

.statusline a  {
   text-decoration:underline;
   flex-shrink:0;
   
}

.statusline[data-error=true]  {
   color:#9b4f37;
   
}

.contract-details  {
   border-top:1px solid var(--line);
   margin-bottom:35px;
   
}

.contract-details summary span  {
   font-size:10px;
   color:var(--muted);
   
}

.contract-details dl  {
   font-size:11px;
   line-height:1.8;
   
}

.contract-details dt  {
   color:var(--muted);
   margin-top:15px;
   
}

.contract-details dd  {
   margin:6px 0;
   font-family:monospace;
   overflow-wrap:anywhere;
   
}

.contract-details p  {
   font-size:11px;
   line-height:1.8;
   color:var(--muted);
   
}

.footer-network  {
   font-size:10px;
   color:var(--muted);
   
}

.mono  {
   font:11px monospace;
   overflow-wrap:anywhere;
   
}

dialog .warning  {
   padding:12px;
   border-radius:6px;
   font-size:12px;
   
}

.amount-field:focus-within  {
   border-color:var(--green);
   box-shadow:0 0 0 3px #315b4510;
   
}

button  {
   transition:background .18s, transform .18s;
   
}

button:active:not(:disabled)  {
   transform:translateY(1px);
   
}

button.dark:hover:not(:disabled)  {
   background:#3a493d;
   
}

.sr-only  {
   position:absolute;
   width:1px;
   height:1px;
   overflow:hidden;
   clip:rect(0,0,0,0);
   
}

@keyframes panel-in  {
   from  {
   opacity:0;
   transform:translateY(5px);
   
}
 to  {
   opacity:1;
   transform:translateY(0);
   
}
 
}

@media(max-width:700px)  {
 .account-row  {
   padding:16px 20px 0;
   flex-wrap:wrap;
   
}

 .account-row>div  {
   width:100%;
   
}

 .account-row select  {
   flex:1;
   max-width:none;
   
}

 .action-tabs  {
   gap:20px;
   
}

 .action-tab  {
   font-size:12px;
   
}

 .action-tab span  {
   display:block;
   margin:5px 0 0;
   
}

 .action-content  {
   min-height:0;
   
}

 .statusline  {
   flex-wrap:wrap;
   
}

 .statusline p  {
   min-width:100%;
   
}

 .protocol-grid  {
   grid-template-columns:1fr;
   
}

 .protocol-grid>div  {
   padding:20px;
   
}

 .dialog-actions  {
   flex-wrap:wrap;
   
}

 .dialog-actions button  {
   flex:1;
   
}

 .contract-details summary  {
   gap:12px;
   
}


}

@media(prefers-reduced-motion:reduce)  {
   *,*::before,*::after  {
   animation:none!important;
   transition:none!important;
   scroll-behavior:auto!important;
   
}
 
}


/* The pending number changes every second without a network request. */
#pending, #eth-balance { font-variant-numeric: tabular-nums; }

/* Keep the wallet control compact at desktop and mobile widths. */
header #connect { min-width:0; padding:11px 12px; white-space:nowrap; }

/* UI v2: issuance is the focal point; wallet selection lives in a dialog. */
.position-body { display:block; padding:36px 48px 16px; }
.pending-main { border:0; padding:0 0 34px; text-align:center; }
.reward-number { display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0; }
.reward-number>span:first-child { font-size:clamp(96px,8vw,112px); line-height:1.1; width:100%; letter-spacing:-4px; }
.reward-number .unit { font-size:18px; letter-spacing:2px; }
.pending-main .issuance-caption { font-size:13px; min-height:0; color:var(--green); margin:16px 0 8px; }
.pending-main #claimable { font-size:11px; min-height:0; }
.position-metrics { border-top:1px solid var(--line); padding:28px 0; max-width:720px; margin:auto; gap:28px 48px; }
.position-metrics .metric strong { font-size:28px; }
.qualification { display:flex; justify-content:space-between; gap:16px; max-width:720px; margin:auto; padding:0 0 24px; color:var(--green); font-size:12px; line-height:1.8; }
.qualification p { margin:0; }
.qualification strong { font-weight:500; }
.position-start { align-items:center; }
.position-start button { font-size:11px; padding:7px 10px; }
.protocol-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#next-epoch { font-size:22px; }
#wallet-menu { max-width:420px; padding:28px; box-shadow:0 24px 80px #17251f25; }
.wallet-menu-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.wallet-menu-heading h2 { margin:16px 0; }
#wallet-close { border:0; padding:0 5px; font-size:26px; font-weight:400; line-height:1; }
#wallet-list { display:grid; gap:10px; }
.wallet-choice { display:flex; justify-content:space-between; text-align:left; padding:16px 18px; border-radius:8px; background:#f7f8f2; }
.wallet-choice:hover:not(:disabled) { border-color:#9cae92; background:#edf0e5; }
#wallet-feedback { font-size:12px; color:var(--muted); margin:8px 0 18px; min-height:24px; }
#wallet-menu .wallet-menu-note { font-size:10px; color:var(--muted); margin:18px 0 0; }
#connected-wallet { border-top:1px solid var(--line); padding-top:18px; }
#full-account { font:12px/1.9 monospace; user-select:all; }
#copy-address { padding:8px 12px; font-size:11px; }
.wallet-switch-label { border-top:1px solid var(--line); padding-top:18px; margin-bottom:8px; font-size:12px; }
@media(max-width:700px) {
 .position-body { padding:28px 22px 12px; }
 .pending-main { padding-bottom:28px; }
 .reward-number>span:first-child { font-size:64px; letter-spacing:-2.5px; }
 .stamp-number { font-size:48px; }
 .position-metrics { gap:24px 18px; }
 .position-metrics .metric strong { font-size:22px; }
 .qualification { flex-direction:column; gap:6px; }
 .protocol-grid>div { padding:20px 16px; }
 .protocol-grid strong { font-size:23px; }
 #next-epoch { font-size:18px; }
 .section-heading>span { max-width:140px; }
 .card-top { gap:12px; flex-wrap:wrap; }
 #wallet-menu { padding:24px; }
}