/* Question-first percentage calculator — purpose-built for fast comprehension. */
.percentage-workspace{margin-top:4px;border-top:1px solid var(--ink)}
.percentage-question{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);grid-template-areas:"index answer" "body answer";column-gap:36px;row-gap:8px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.percentage-question-index{grid-area:index;align-self:end;padding:0;margin:0;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--accent)}
.percentage-question-body{grid-area:body;min-width:0}
.percentage-question-line{display:flex;align-items:center;align-content:flex-start;flex-wrap:nowrap;gap:8px 9px;color:var(--ink);font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.34;letter-spacing:-.03em}
.percentage-question-line .q-word{white-space:nowrap}
.percentage-question:nth-child(3) .percentage-question-line{flex-wrap:wrap;row-gap:4px}
.percentage-question:nth-child(3) .percentage-question-line>.q-word:first-child{flex-basis:100%}
/* Keep terminal punctuation visually attached to the final editable value. */
.percentage-question-line>span:last-child:not(.q-word){flex:0 0 0;width:0;overflow:visible;white-space:nowrap;margin-left:-.3em}
.percentage-inline-input{width:4ch;min-width:38px;max-width:200px;height:46px;border:0;border-bottom:2px solid #aaa69d;border-radius:0!important;background:transparent!important;padding:0 4px!important;color:var(--ink);font-size:inherit!important;font-weight:700!important;line-height:1!important;letter-spacing:-.03em!important;text-align:center;outline:none;box-shadow:none!important;transition:border-color .14s ease,background .14s ease,width .08s ease!important}
.percentage-inline-input.wide{width:6ch}.percentage-inline-input:hover{border-color:#68645d}.percentage-inline-input:focus{border-color:var(--accent)!important;background:rgba(255,255,255,.65)!important;box-shadow:none!important}.percentage-inline-input::selection{background:#cfd7ff}
.percentage-question-help{margin:9px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.percentage-answer{grid-area:answer;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:108px;padding:17px 19px;background:var(--dark);color:#fff;border-left:3px solid var(--accent)}
.percentage-answer-label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#aaa9a4}
.percentage-answer-value{margin-top:6px;font-size:clamp(30px,3.1vw,42px);font-weight:780;line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}
.percentage-answer-note{margin-top:8px;color:#c1c1bc;font-size:12px;line-height:1.45}
.percentage-answer-value .answer-direction{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:#aeb7ff}
.percentage-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.percentage-guide-item{padding:24px 24px 26px 0;border-right:1px solid var(--line)}.percentage-guide-item+ .percentage-guide-item{padding-left:24px}.percentage-guide-item:last-child{border-right:0}
.percentage-guide-kicker{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}.percentage-guide-item strong{display:block;font-size:15px;letter-spacing:-.018em;margin-bottom:7px}.percentage-guide-item code{display:block;font-family:var(--mono);font-size:11.5px;line-height:1.55;color:#4d4a45;white-space:normal}
.percentage-page .content-stack{margin-top:48px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.percentage-question{grid-template-columns:1fr;grid-template-areas:"index" "body" "answer";gap:10px;padding:24px 0}.percentage-question-index{font-size:10px;margin-bottom:1px}.percentage-question-line{font-size:clamp(23px,3.8vw,29px);line-height:1.32}.percentage-inline-input{height:47px;max-width:190px}.percentage-answer{min-height:auto;align-self:auto;padding:18px 20px;margin-top:3px}.percentage-answer-value{font-size:clamp(34px,6vw,44px)}.percentage-answer-note{max-width:620px}.percentage-guide{grid-template-columns:1fr;margin-top:38px}.percentage-guide-item,.percentage-guide-item+ .percentage-guide-item{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}.percentage-guide-item:last-child{border-bottom:0}.percentage-page .content-stack{margin-top:38px}}
@media(max-width:620px){.percentage-question{display:block;padding:20px 0}.percentage-question-index{padding:0;margin:0 0 10px;font-size:10px}.percentage-question-line{font-size:21px;line-height:1.36;gap:8px 7px;letter-spacing:-.03em;flex-wrap:wrap}.percentage-question-line .q-word{white-space:normal}.percentage-inline-input{min-width:34px;max-width:155px;height:42px;padding:0 3px!important}.percentage-question-help{font-size:12px;line-height:1.5;margin-top:8px}.percentage-answer{margin-top:17px;padding:16px 17px;border-left-width:3px}.percentage-answer-value{font-size:34px}.percentage-answer-note{font-size:11.5px}.percentage-guide{margin-top:32px}.percentage-guide-item,.percentage-guide-item+ .percentage-guide-item{padding:16px 0}.percentage-guide-item strong{font-size:14px}.percentage-guide-item code{font-size:11px}.percentage-page .content-stack{margin-top:32px}}
@media(max-width:390px){.percentage-question-line{font-size:20px}.percentage-inline-input{max-width:138px}.percentage-answer-value{font-size:32px}}