#dref-app {
--dref-teal:         rgb(66, 255, 235);
--dref-teal-2:       rgb(65, 255, 235);
--dref-ink:          rgb(0, 0, 0);
--dref-ink-soft:     rgb(29, 36, 35);
--dref-ink-softer:   rgb(3, 10, 9);
--dref-stroke-dark:  rgb(28, 64, 80);
--dref-muted:        rgb(180, 180, 180);
--dref-white:        #fff;
--dref-error:        #a40000;
--dref-error-bg:     #ffe3e3;
--dref-success:      #0b6b3a;
--dref-success-bg:   #d4f7e7;
--dref-max-w:        1480px;
--dref-pad-x:        clamp(20px, 5vw, 133px);
--dref-grid-gap:     clamp(20px, 2.4vw, 46px);
--dref-h1-size:      clamp(30px, 3.2vw, 48px);
--dref-h2-size:      clamp(26px, 2.3vw, 34px);
--dref-body-size:    clamp(15px, 1.1vw, 19px);
--dref-body-lg:      clamp(16px, 1.15vw, 19px);
--dref-chip-size:    clamp(13px, 0.95vw, 18px);
--dref-meta-size:    clamp(13px, 0.95vw, 18px);
--dref-pill-radius:  999px;
--dref-btn-radius:   999px;
color: var(--dref-ink);
display: block;
}
#dref-app *,
#dref-app *::before,
#dref-app *::after {
box-sizing: border-box;
}
#dref-app .dref-loading {
padding: 2rem;
text-align: center;
color: var(--dref-ink);
}
#dref-app .dref-wrap {
max-width: var(--dref-max-w);
margin: 0 auto;
} #dref-app .dref-top {
background: var(--dref-white);
padding: clamp(40px, 6vw, 96px) var(--dref-pad-x) clamp(48px, 6vw, 104px);
}
#dref-app .dref-top h1 {
font-family: inherit;
font-weight: 700;
font-size: var(--dref-h1-size);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--dref-ink);
margin: 0 0 clamp(28px, 3vw, 56px);
}
#dref-app .dref-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 80px);
margin-bottom: clamp(36px, 4.5vw, 72px);
}
#dref-app .dref-intro h3 {
font-weight: 700;
font-size: var(--dref-body-lg);
color: var(--dref-ink-softer);
margin: 0 0 clamp(12px, 1.2vw, 22px);
line-height: 1.1;
}
#dref-app .dref-intro p,
#dref-app .dref-intro ul,
#dref-app .dref-intro ol {
font-size: var(--dref-body-size);
line-height: 1.35;
color: var(--dref-ink-softer);
margin: 0;
}
#dref-app .dref-intro.dref-intro-options p,
#dref-app .dref-intro.dref-intro-options ul {
color: var(--dref-ink-soft);
font-weight: 400;
}
#dref-app .dref-intro.dref-intro-options ul {
list-style: none;
padding: 0;
}
#dref-app .dref-intro.dref-intro-options ul li {
position: relative;
padding-left: 1.1em;
}
#dref-app .dref-intro.dref-intro-options ul li::before {
content: "–";
position: absolute;
left: 0;
}
#dref-app .dref-intro ol {
padding-left: 1.2em;
margin: 0;
}
#dref-app .dref-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3.5vw, 66px);
align-items: start;
}
#dref-app .dref-fields {
display: flex;
flex-direction: column;
gap: clamp(18px, 1.8vw, 36px);
} #dref-app select.dref-pill {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: var(--dref-white);
border: 4px solid var(--dref-teal-2);
border-radius: var(--dref-pill-radius);
padding: clamp(14px, 1.5vw, 26px) clamp(26px, 2.4vw, 40px);
font-family: inherit;
font-size: var(--dref-body-lg);
line-height: 1;
color: var(--dref-ink);
outline: none;
cursor: pointer;
transition: box-shadow .15s ease;
background-image:
linear-gradient(45deg,  transparent 50%, var(--dref-ink) 50%),
linear-gradient(135deg, var(--dref-ink) 50%, transparent 50%);
background-position:
calc(100% - clamp(30px, 2.6vw, 42px)) 55%,
calc(100% - clamp(22px, 2vw, 34px)) 55%;
background-size: 8px 8px, 8px 8px;
background-repeat: no-repeat;
}
#dref-app select.dref-pill:focus,
#dref-app select.dref-pill:hover {
box-shadow: 0 0 0 4px rgba(65, 255, 235, 0.25);
} #dref-app select.dref-pill:disabled,
#dref-app .choices.is-disabled .choices__inner {
opacity: .55;
cursor: not-allowed;
}
#dref-app select.dref-pill:disabled:hover,
#dref-app select.dref-pill:disabled:focus {
box-shadow: none;
} #dref-app .dref-textarea-wrap {
background: var(--dref-white);
border: 4px solid var(--dref-teal-2);
border-radius: clamp(32px, 2.8vw, 55px);
padding: clamp(18px, 1.5vw, 26px) clamp(26px, 2.2vw, 38px);
min-height: clamp(260px, 26vw, 367px);
height: 100%;
display: flex;
flex-direction: column;
gap: .5rem;
}
#dref-app .dref-textarea-wrap textarea {
flex: 1;
border: 0;
outline: 0;
resize: none;
width: 100%;
background: transparent;
font-family: inherit;
font-size: var(--dref-body-lg);
line-height: 1.35;
color: var(--dref-ink);
padding: 0;
}
#dref-app .dref-textarea-wrap textarea::placeholder {
color: var(--dref-ink);
opacity: 1;
}
#dref-app .dref-char-counter {
text-align: right;
font-size: .85rem;
color: var(--dref-ink);
opacity: .6;
}
#dref-app .dref-char-counter.is-over {
color: var(--dref-error);
opacity: 1;
font-weight: 600;
} #dref-app .dref-submit-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(20px, 3vw, 64px);
align-items: center;
margin-top: clamp(20px, 2.3vw, 44px);
}
#dref-app .dref-legal {
font-size: var(--dref-body-lg);
line-height: 1.2;
color: var(--dref-ink);
max-width: 900px;
display: flex;
gap: .75rem;
align-items: flex-start;
cursor: pointer;
margin: 0;
}
#dref-app .dref-legal input[type="checkbox"] {
margin-top: .35em;
flex-shrink: 0;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
#dref-app .dref-btn {
appearance: none;
border: 4px solid var(--dref-stroke-dark);
background: var(--dref-teal-2);
color: var(--dref-ink);
font-family: inherit;
font-weight: 700;
font-size: var(--dref-body-lg);
line-height: 1;
border-radius: var(--dref-btn-radius);
padding: clamp(18px, 1.5vw, 26px) clamp(30px, 2.6vw, 48px);
cursor: pointer;
white-space: nowrap;
transition: transform .1s ease, box-shadow .15s ease;
text-decoration: none;
display: inline-block;
}
#dref-app .dref-btn:hover {
box-shadow: 0 6px 18px rgba(28, 64, 80, 0.18);
}
#dref-app .dref-btn:active {
transform: translateY(1px);
}
#dref-app .dref-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
#dref-app .dref-btn-secondary {
background: var(--dref-white);
} #dref-app .dref-feedback {
grid-column: 1 / -1;
margin-top: 1rem;
padding: .75rem 1rem;
border-radius: 12px;
font-size: var(--dref-body-size);
}
#dref-app .dref-feedback[hidden] {
display: none;
}
#dref-app .dref-feedback.is-error {
background: var(--dref-error-bg);
color: var(--dref-error);
}
#dref-app .dref-feedback.is-success {
background: var(--dref-success-bg);
color: var(--dref-success);
} #dref-app .dref-bottom {
background: var(--dref-teal);
border-top-left-radius:  clamp(40px, 4vw, 75px);
border-top-right-radius: clamp(40px, 4vw, 75px);
padding: clamp(56px, 7vw, 128px) var(--dref-pad-x) clamp(72px, 8vw, 150px);
} #dref-app .dref-bottom:first-child {
border-top-left-radius:  0;
border-top-right-radius: 0;
}
#dref-app .dref-bottom:not(:last-of-type) {
border-bottom-left-radius:  clamp(40px, 4vw, 75px);
border-bottom-right-radius: clamp(40px, 4vw, 75px);
}
#dref-app .dref-bottom h2 {
font-family: inherit;
font-weight: 700;
font-size: var(--dref-h2-size);
line-height: 1.1;
color: var(--dref-ink);
margin: 0 0 clamp(36px, 4vw, 72px);
}
#dref-app .dref-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dref-grid-gap);
align-items: start;
}
#dref-app .dref-card {
position: relative;
background: var(--dref-white);
border: 4px solid var(--dref-stroke-dark);
border-radius: clamp(32px, 2.8vw, 55px);
padding: clamp(26px, 2.4vw, 44px) clamp(28px, 2.6vw, 48px);
display: flex;
flex-direction: column;
gap: clamp(14px, 1.2vw, 22px);
}
#dref-app .dref-card-label {
font-size: var(--dref-meta-size);
color: var(--dref-ink);
margin: 0;
}
#dref-app .dref-card-body {
font-weight: 700;
font-size: var(--dref-body-lg);
line-height: 1.25;
color: var(--dref-ink);
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
#dref-app .dref-toggle {
background: none;
border: 0;
padding: 0;
font-family: inherit;
font-weight: 700;
font-size: var(--dref-meta-size);
color: var(--dref-muted);
cursor: pointer;
text-align: left;
width: max-content;
}
#dref-app .dref-toggle:hover {
color: var(--dref-stroke-dark);
}
#dref-app .dref-chips {
display: flex;
flex-wrap: wrap;
gap: clamp(18px, 2vw, 36px) clamp(22px, 2.4vw, 44px);
margin-top: clamp(6px, 0.6vw, 10px);
}
#dref-app .dref-chip {
display: inline-flex;
align-items: center;
gap: clamp(10px, 0.8vw, 14px);
font-weight: 700;
font-size: var(--dref-chip-size);
line-height: 1.1;
color: var(--dref-ink);
}
#dref-app .dref-chip-icon {
flex: 0 0 auto;
height: clamp(28px, 2.3vw, 36px);
color: var(--dref-teal-2);
display: inline-flex;
align-items: center;
justify-content: center;
} #dref-app .dref-chip-icon svg {
height: 100%;
width: auto;
display: block;
}
#dref-app .dref-chip-value {
white-space: pre-line; }
#dref-app .dref-meta {
margin-top: clamp(10px, 1vw, 18px);
display: flex;
flex-direction: column;
gap: clamp(4px, 0.4vw, 8px);
}
#dref-app .dref-timestamp {
font-size: var(--dref-meta-size);
color: var(--dref-ink);
margin: 0;
}
#dref-app .dref-firm {
font-weight: 700;
font-size: var(--dref-meta-size);
color: var(--dref-ink);
margin: 0;
}
#dref-app .dref-firm a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
} #dref-app .dref-card-actions {
position: absolute;
top: clamp(18px, 1.6vw, 24px);
right: clamp(20px, 1.8vw, 28px);
display: flex;
gap: .35rem;
z-index: 1;
}
#dref-app .dref-icon-btn {
background: transparent;
border: 0;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
color: var(--dref-stroke-dark);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color .15s ease;
}
#dref-app .dref-icon-btn:hover {
background: rgba(66, 255, 235, 0.35);
}
#dref-app .dref-icon-btn svg {
width: 16px;
height: 16px;
} #dref-app .dref-empty,
#dref-app .dref-gate {
background: var(--dref-white);
border: 4px solid var(--dref-stroke-dark);
border-radius: clamp(32px, 2.8vw, 55px);
padding: clamp(28px, 3vw, 48px);
color: var(--dref-ink);
text-align: center;
font-size: var(--dref-body-size);
margin: clamp(40px, 6vw, 80px) var(--dref-pad-x);
}
#dref-app .dref-gate .dref-btn {
margin-top: 1rem;
} #dref-app .dref-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(28, 64, 81, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 99999;
}
#dref-app .dref-modal {
background: var(--dref-white);
border-radius: clamp(32px, 2.8vw, 55px);
max-width: min(920px, 96vw);
width: 100%;
max-height: 92vh;
overflow-y: auto;
padding: clamp(28px, 3vw, 48px);
}
#dref-app .dref-modal h3 {
font-family: inherit;
font-weight: 700;
font-size: var(--dref-h2-size);
margin: 0 0 clamp(20px, 2vw, 32px);
color: var(--dref-ink);
} #dref-app .dref-modal .dref-form-grid {
grid-template-columns: 1fr;
gap: clamp(18px, 2vw, 32px);
}
#dref-app .dref-modal .dref-textarea-wrap {
min-height: clamp(180px, 22vh, 260px);
}
#dref-app .dref-modal-actions {
display: flex;
gap: .75rem;
justify-content: flex-end;
margin-top: 1.5rem;
} #dref-app .choices {
margin-bottom: 0;
font-size: var(--dref-body-lg);
}
#dref-app .choices__inner {
background: var(--dref-white);
border: 4px solid var(--dref-teal-2);
border-radius: var(--dref-pill-radius); padding: clamp(14px, 1.5vw, 26px) clamp(26px, 2.4vw, 40px);
min-height: 0;
font-size: var(--dref-body-lg);
color: var(--dref-ink);
} #dref-app .choices[data-type*="select-one"] .choices__inner,
#dref-app .choices[data-type*="select-multiple"] .choices__inner {
padding-right: clamp(46px, 4.5vw, 66px);
}
#dref-app .choices__list--single {
padding: 0;
line-height: 1;
}
#dref-app .choices__list--multiple { display: inline;
padding: 0;
margin: 0;
}
#dref-app .choices__list--multiple .choices__item {
background: var(--dref-teal-2);
border: 2px solid var(--dref-stroke-dark);
border-radius: var(--dref-pill-radius);
color: var(--dref-ink);
font-weight: 600;
padding: .2em .75em;
margin: 0 .35em .25em 0;
font-size: .9em;
line-height: 1.2;
}
#dref-app .choices__list--multiple .choices__item.is-highlighted {
background: var(--dref-stroke-dark);
color: var(--dref-white);
border-color: var(--dref-stroke-dark);
} #dref-app .choices__input {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: inherit;
font-size: var(--dref-body-lg) !important;
line-height: 1;
color: var(--dref-ink);
min-width: 10ch; vertical-align: middle;
}
#dref-app .choices__input::placeholder {
color: var(--dref-ink);
opacity: .55;
font-size: var(--dref-body-lg);
}
#dref-app .choices__placeholder {
color: var(--dref-ink);
opacity: .55;
font-size: var(--dref-body-lg);
} #dref-app .choices[data-type*="select-one"]::after,
#dref-app .choices[data-type*="select-multiple"]::after {
border: 0;
content: "";
width: 16px;
height: 16px;
margin-top: -8px;
right: clamp(22px, 2vw, 34px);
background-image:
linear-gradient(45deg,  transparent 50%, var(--dref-ink) 50%),
linear-gradient(135deg, var(--dref-ink) 50%, transparent 50%);
background-position: 0 55%, 8px 55%;
background-size: 8px 8px;
background-repeat: no-repeat;
pointer-events: none;
}
#dref-app .choices[data-type*="select-one"].is-open::after,
#dref-app .choices[data-type*="select-multiple"].is-open::after {
transform: rotate(180deg);
}
#dref-app .choices__list--dropdown,
#dref-app .choices__list[aria-expanded] {
border: 4px solid var(--dref-teal-2);
border-radius: clamp(16px, 1.4vw, 28px);
margin-top: 4px;
background: var(--dref-white);
z-index: 20;
}
#dref-app .choices__list--dropdown .choices__item--selectable,
#dref-app .choices__list[aria-expanded] .choices__item--selectable {
padding: .6rem 1rem;
color: var(--dref-ink);
}
#dref-app .choices__list--dropdown .choices__item--selectable.is-highlighted,
#dref-app .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background: var(--dref-teal-2);
color: var(--dref-ink);
}
#dref-app .choices.is-focused .choices__inner,
#dref-app .choices.is-open .choices__inner {
border-color: var(--dref-teal-2);
box-shadow: 0 0 0 4px rgba(65, 255, 235, 0.25);
} @media (max-width: 960px) {
#dref-app .dref-intro-grid,
#dref-app .dref-form-grid,
#dref-app .dref-cards {
grid-template-columns: 1fr;
}
#dref-app .dref-submit-row {
grid-template-columns: 1fr;
gap: 20px;
}
#dref-app .dref-submit-row .dref-btn {
justify-self: start;
}
#dref-app .dref-textarea-wrap {
min-height: 220px;
}
}
@media (max-width: 520px) {
#dref-app {
--dref-pad-x: 20px;
}
#dref-app .dref-chips {
gap: 14px 20px;
}
#dref-app select.dref-pill,
#dref-app .choices__inner {
padding: 16px 22px;
}
#dref-app .dref-textarea-wrap {
padding: 18px 22px;
border-radius: 28px;
}
#dref-app .dref-card {
padding: 22px 22px;
border-radius: 28px;
}
}