.kg-block,
.kg-test { --kg-ink: #002B3F;
--kg-petrol: #114162;
--kg-indigo: #464B7A;
--kg-berry: #8E4F8E;
--kg-coral: #F56267; --kg-orange: #FF803C;
--kg-amber: #FF9C19;
--kg-paper: #FBFAF7;
--kg-surface: #FFFFFF;
--kg-muted: #5A6B75;
--kg-line: #E3E0D8;
--kg-rail: #EDEBE4; --kg-t-fine: 13px;
--kg-t-body: 16px;
--kg-t-lead: 20px;
--kg-t-section: 25px;
--kg-t-page: 31px;
--kg-radius: 16px;
--kg-radius-sm: 10px; --kg-gap-outer: 32px;
} .kg-block { padding-block: var(--kg-gap-outer); } .kg-block.kg-block--flush { --kg-gap-outer: 0px; }
.kg-test {
max-width: 680px;
margin: 0 auto;
padding: 24px 18px;
background: var(--kg-surface);
border: 1px solid var(--kg-line);
border-radius: var(--kg-radius);
color: var(--kg-ink);
font-size: var(--kg-t-body);
line-height: 1.6;
box-sizing: border-box;
}
.kg-test *,
.kg-test *::before,
.kg-test *::after { box-sizing: border-box; } .kg-test [hidden] { display: none !important; } .kg-test .kg-test-heading {
margin: 0 0 10px;
font-size: clamp(23px, 5vw, 31px);
line-height: 1.2;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--kg-ink);
}
.kg-test .kg-test-intro {
margin: 0 0 22px;
font-size: var(--kg-t-body);
line-height: 1.6;
color: var(--kg-muted);
}
.kg-alert {
margin: 0 0 20px;
padding: 12px 16px;
border-radius: var(--kg-radius-sm);
background: #FDEAEA;
color: #A83A3E;
font-size: var(--kg-t-body);
font-weight: 600;
} .kg-progress { margin: 0 0 26px; }
.kg-progress-bar {
height: 6px;
border-radius: 999px;
background: #EEF1F0;
overflow: hidden;
}
.kg-progress-bar span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--kg-petrol) 0%, var(--kg-amber) 100%);
transition: width 0.25s ease-out;
}
.kg-progress-text {
margin: 8px 0 0;
font-size: var(--kg-t-fine);
color: var(--kg-muted);
} .kg-questions {
list-style: none;
margin: 0 0 28px;
padding: 0;
}
.kg-question {
padding: 20px 0;
border-top: 1px solid var(--kg-line);
}
.kg-question:first-child { border-top: 0; padding-top: 0; }
.kg-question-text {
display: flex;
gap: 10px;
align-items: baseline;
margin: 0 0 16px;
font-size: var(--kg-t-body);
font-weight: 600;
line-height: 1.45;
cursor: pointer;
}
.kg-question-no {
flex: 0 0 auto;
min-width: 26px;
font-size: var(--kg-t-fine);
font-weight: 700;
color: var(--kg-muted);
font-variant-numeric: tabular-nums;
} .kg-test.is-paged .kg-questions { margin-bottom: 22px; }
.kg-test.is-paged .kg-question {
padding: 0;
border-top: 0;
min-height: 190px;
}
.kg-test.is-paged .kg-question-text {
display: block;
margin-bottom: 26px;
font-size: clamp(20px, 4.2vw, 25px);
line-height: 1.35;
}
.kg-test.is-paged .kg-question-no {
display: block;
margin-bottom: 8px;
font-size: var(--kg-t-fine);
letter-spacing: 0.1em;
} .kg-question-tag {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--kg-muted);
} .kg-question-lead {
margin: -8px 0 12px;
font-size: var(--kg-t-body);
color: var(--kg-muted);
}
.kg-test.is-paged .kg-question-lead { margin-top: -16px; margin-bottom: 14px; }
.kg-triggers {
list-style: none;
margin: 0 0 18px;
padding: 0;
font-size: 15px;
line-height: 1.5;
color: var(--kg-ink);
}
.kg-triggers li { position: relative; padding-left: 16px; }
.kg-triggers li + li { margin-top: 4px; }
.kg-triggers li::before {
content: "\00B7";
position: absolute;
left: 2px;
top: 0;
font-weight: 700;
color: var(--kg-muted);
} .kg-textarea {
width: 100%;
min-height: 140px;
padding: 13px 14px;
font: inherit;
font-size: 16px;
line-height: 1.5;
color: var(--kg-ink);
background: var(--kg-paper);
border: 1px solid var(--kg-line);
border-radius: var(--kg-radius-sm);
resize: vertical;
}
.kg-textarea:focus-visible {
outline: 3px solid var(--kg-petrol);
outline-offset: 1px;
border-color: var(--kg-petrol);
}
.kg-note-hint { margin-top: 10px; } .kg-user {
margin: 0 0 20px;
padding: 14px 16px;
background: var(--kg-paper);
border-radius: var(--kg-radius-sm);
font-size: 15px;
line-height: 1.5;
color: var(--kg-ink);
}
.kg-notice {
margin: 0 0 20px;
padding: 12px 16px;
border-left: 3px solid var(--kg-petrol);
background: var(--kg-paper);
font-size: 15px;
line-height: 1.5;
color: var(--kg-ink);
}
.kg-notice a { color: var(--kg-petrol); }
.kg-slider {
display: flex;
align-items: center;
gap: 14px;
}
.kg-range-value {
flex: 0 0 auto;
min-width: 46px;
padding: 5px 0;
text-align: center;
font-size: var(--kg-t-lead);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--kg-muted);
background: #F3F1EC;
border-radius: var(--kg-radius-sm);
transition: background-color 0.2s ease, color 0.2s ease;
}
.kg-scale-labels {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-right: 60px;
font-size: var(--kg-t-fine);
color: var(--kg-muted);
} .kg-range {
--kg-f: 0;
--kg-fill: transparent;
flex: 1 1 auto;
width: 100%;
min-width: 0;
margin: 0;
height: 44px;
background: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer; touch-action: pan-y;
}
.kg-range:focus { outline: none; } .kg-range::-webkit-slider-runnable-track {
height: 10px;
border-radius: 999px;
background:
linear-gradient(90deg,
var(--kg-fill) 0 calc(15px + ((100% - 30px) * var(--kg-f))),
transparent calc(15px + ((100% - 30px) * var(--kg-f))) 100%),
var(--kg-rail);
}
.kg-range::-moz-range-track {
height: 10px;
border-radius: 999px;
background:
linear-gradient(90deg,
var(--kg-fill) 0 calc(15px + ((100% - 30px) * var(--kg-f))),
transparent calc(15px + ((100% - 30px) * var(--kg-f))) 100%),
var(--kg-rail);
} .kg-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -10px;
width: 30px;
height: 30px;
border: 3px solid var(--kg-surface);
border-radius: 50%;
background: var(--kg-ink);
box-shadow: 0 1px 4px rgba(0, 43, 63, 0.3);
}
.kg-range::-moz-range-thumb {
width: 30px;
height: 30px;
box-sizing: border-box;
border: 3px solid var(--kg-surface);
border-radius: 50%;
background: var(--kg-ink);
box-shadow: 0 1px 4px rgba(0, 43, 63, 0.3);
} .kg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--kg-petrol); }
.kg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--kg-petrol); } .kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="low"] .kg-range { --kg-fill: var(--kg-petrol); }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="mid"] .kg-range { --kg-fill: var(--kg-berry); }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="high"] .kg-range { --kg-fill: var(--kg-coral); }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="low"] .kg-range-value { background: #E7EDF2; color: #114162; }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="mid"] .kg-range-value { background: #F2EAF2; color: #6E3C6E; }
.kg-test[data-kg-scale="strain"] .kg-question[data-touched][data-level="high"] .kg-range-value { background: #FDEAEA; color: #A83A3E; }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="low"] .kg-range { --kg-fill: var(--kg-coral); }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="mid"] .kg-range { --kg-fill: var(--kg-berry); }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="high"] .kg-range { --kg-fill: var(--kg-petrol); }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="low"] .kg-range-value { background: #FDEAEA; color: #A83A3E; }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="mid"] .kg-range-value { background: #F2EAF2; color: #6E3C6E; }
.kg-test[data-kg-scale="benefit"] .kg-question[data-touched][data-level="high"] .kg-range-value { background: #E7EDF2; color: #114162; } .kg-nav {
display: flex;
gap: 12px;
align-items: center;
margin: 0 0 20px;
}
.kg-nav [data-kg-next] { margin-left: auto; } @media (max-width: 599px) {
.kg-nav .kg-btn.kg-btn { flex: 1 1 0; text-align: center; }
}
.kg-final-lead {
margin: 0 0 20px;
font-size: clamp(19px, 3.6vw, 22px);
font-weight: 700;
line-height: 1.3;
} .kg-fields { margin: 0 0 20px; }
.kg-field { margin: 0 0 18px; }
.kg-field label {
display: block;
margin-bottom: 6px;
font-size: 15px;
font-weight: 600;
}
.kg-req {
font-weight: 400;
font-size: 13px;
color: var(--kg-muted);
}
.kg-test .kg-field input {
width: 100%;
padding: 13px 14px;
font: inherit;
font-size: 16px; color: var(--kg-ink);
background: var(--kg-paper);
border: 1px solid var(--kg-line);
border-radius: var(--kg-radius-sm);
}
.kg-test .kg-field input:focus-visible {
outline: 3px solid var(--kg-petrol);
outline-offset: 1px;
border-color: var(--kg-petrol);
}
.kg-hint {
display: block;
margin-top: 6px;
font-size: 14px;
color: var(--kg-muted);
} .kg-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .kg-consents {
margin: 0 0 24px;
padding: 18px;
background: var(--kg-paper);
border-radius: var(--kg-radius-sm);
}
.kg-consent {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 15px;
line-height: 1.5;
cursor: pointer;
}
.kg-consent + .kg-consent { margin-top: 16px; }
.kg-consent input {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 1px 0 0;
accent-color: var(--kg-petrol);
}
.kg-consent em { font-style: normal; color: var(--kg-muted); } .kg-submit { margin: 0 0 18px; }
.kg-test .kg-btn.kg-btn {
display: inline-block;
padding: 15px 26px;
font: inherit;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--kg-ink);
background: var(--kg-orange);
border: 0;
border-radius: var(--kg-radius-sm);
box-shadow: none;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.kg-test .kg-btn.kg-btn:hover { background: var(--kg-amber); color: var(--kg-ink); }
.kg-test .kg-btn.kg-btn:focus-visible {
outline: 3px solid var(--kg-petrol);
outline-offset: 2px;
}
.kg-test .kg-btn.kg-btn--ghost {
background: transparent;
color: var(--kg-muted);
border: 1px solid var(--kg-line);
}
.kg-test .kg-btn.kg-btn--ghost:hover { background: #F3F1EC; color: var(--kg-ink); }
.kg-submit .kg-btn { width: 100%; }
.kg-disclaimer {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--kg-muted);
}
.kg-done { text-align: center; padding: 12px 0; }
@media (min-width: 600px) {
.kg-block { --kg-gap-outer: 64px; }
.kg-test { padding: 36px 32px; }
.kg-submit .kg-btn { width: auto; }
}