.countdown-date,
.countdown-time{
width:100%;
height:58px;
padding:0 14px;
border:1px solid #d9e4f2;
border-radius:16px;
font-size:1.15rem;
font-weight:800;
background:#fff;
font-family:inherit;
color:#101828;
box-sizing:border-box;
}

.countdown-time{
max-width:180px;
}

.countdown-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:16px 0 18px;
}

.count-box{
background:#fff;
border:1px solid #dceeff;
border-radius:16px;
padding:12px 8px;
text-align:center;
}

.count-number{
font-size:1.6rem;
font-weight:900;
line-height:1.1;
color:#2563eb;
}

.count-label{
font-size:.88rem;
color:#667085;
margin-top:4px;
}

.countdown-summary-title{
font-size:1.25rem;
font-weight:900;
color:#2563eb;
text-align:center;
margin:18px 0 10px;
}

.countdown-summary{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.countdown-summary div{
background:#fff;
border:1px solid #dceeff;
border-radius:16px;
padding:12px 8px;
text-align:center;
}

.countdown-summary b{
display:block;
font-size:1.25rem;
line-height:1.2;
color:#2563eb;
}

.countdown-summary span{
display:block;
font-size:.88rem;
margin-top:4px;
color:#667085;
}

@media(max-width:768px){

.countdown-date,
.countdown-time{
height:56px;
font-size:1.08rem;
}

.countdown-time{
max-width:100%;
}

.countdown-grid{
grid-template-columns:repeat(2,1fr);
gap:9px;
}

.count-number{
font-size:1.35rem;
}

.count-box{
padding:11px 8px;
}

.countdown-summary{
grid-template-columns:repeat(2,1fr);
gap:9px;
}

.countdown-summary b{
font-size:1.1rem;
}

}
/* Warm input/output hierarchy */
.percent-card.card-1{--accent:#d97706;border-color:#f6e1c8;border-top-color:#d97706}
.percent-card.card-1 .card-num{box-shadow:0 4px 10px rgba(217,119,6,.45)}
.percent-card.card-1 .percent-input:focus,.percent-card.card-1 .date-select:focus,.percent-card.card-1 .countdown-time:focus{outline:none;border-color:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.14)}
body .percent-card.card-1 .result-coffee.result-coffee{background:#fbf1e6;border:1px solid #f4d9b9;color:#4a3524;box-shadow:none}
.yield-title,.yield-main,.countdown-summary-title{color:#9a5a16}.count-box,.countdown-summary div{background:#fffaf5;border-color:#e8cfb7}.count-number,.countdown-summary b{color:#c96f05}