html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
:root {
    --ink: #202326;
    --muted: #9a5325; /*//#71777b;*/
    --line: #e5e8e7;
    --accent: #a6e36e;
    --paper: #fffc9e;
}
body { background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
h1, h2, h3 {
    font-family: 'Libre Caslon Condensed';
    letter-spacing: -.035em;
}
article:has(.home-page-background) {
    padding-left: 2rem !important;
    padding-right: 0 !important;
}
.page main { background: var(--paper); }
    .page main:has(.home-page-background) {
        --paper: #006b14;
        background: var(--paper);                      
    }
        .page main:has(.home-page-background) .top-row {
            background-color: #05163d;
            border-bottom-color: #343a34;
            color: white;            
        }
        .page main:has(.home-page-background) > .top-row {
            padding-right: 1.5rem !important;
        }
            .page main:has(.home-page-background) .top-row a {
                color: white;
                padding-right: 1.5rem;
            }


        .page main:has(.home-page-background) > article {
            display: flex;
            flex: 1;
            min-height: 0;
            padding: 0;
            padding-right: 0 !important;
       
        }
.home-page-background { display: flex; flex: 1; min-height: 0; }
.home-page-background .home-hero { flex: 1; min-height: 0; }
.page main .top-row { height: 3.5rem; justify-content: flex-end; color: var(--muted); font-size: .85rem; }
.survey-shell { width: min(100%, 790px); margin: 3.25rem auto; padding: 0 1.25rem 4rem; }
.eyebrow { color: #638943; font-size: .72rem; font-weight: 700; letter-spacing: .16em; margin-bottom: .7rem; }
.survey-shell h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin: 0; }
.intro { color: var(--muted); margin: .65rem 0 2rem; }
.field { display: grid; gap: .5rem; margin: 1.1rem 0; }
.field label { font-size: .87rem; font-weight: 700; }
.field input:not([type=file]), .field textarea, .field select, .registration select, .option-row input { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: white; padding: .8rem .9rem; color: var(--ink); outline: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #91c75f; box-shadow: 0 0 0 3px #a6e36e33; }
.field input[type=file] { padding: .3rem 0; font-size: .85rem; }
.field audio, .survey-question audio { display: block; width: min(100%, 420px); margin-top: .7rem; }
.question-card, .quest-panel { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.5rem; margin: 1.1rem 0; box-shadow: 0 8px 30px #22220808; }
.mass-copy-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mass-copy-heading h2 { margin: 0; }
.mass-copy-toggle { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.mass-copy-toggle:hover, .mass-copy-toggle:focus-visible { border-color: var(--accent); outline: none; }
.about-developer { display: flex; align-items: center; gap: 1.5rem; }
.about-portrait { width: 144px; height: 144px; flex: 0 0 144px; object-fit: cover; border-radius: 50%; }
.about-projects { margin-top: 1.5rem; }
.about-project-links { display: grid; gap: .75rem; max-width: 640px; margin: 1.1rem auto .2rem; }
.about-project-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; padding: .85rem 1.35rem; border: 1px solid #d9e8cb; border-radius: 999px; background: linear-gradient(110deg, #f5faef, #fff); color: var(--ink); text-decoration: none; box-shadow: 0 5px 16px #334d1b0d; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.about-project-link:hover, .about-project-link:focus-visible { transform: translateY(-2px); border-color: #a6c985; box-shadow: 0 9px 22px #334d1b1c; color: var(--ink); outline: none; }
.about-project-link > span:first-child { display: grid; gap: .15rem; }
.about-project-link strong { font-size: 1rem; }
.about-project-link small { color: var(--muted); font-size: .82rem; }
.about-project-arrow { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: 50%; background: var(--accent); color: #26341e; font-size: 1.2rem; transition: transform .18s ease; }
.about-project-link:hover .about-project-arrow { transform: translate(2px, -2px); }
@media (max-width: 640px) {
    .about-developer { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
    .about-portrait { width: 128px; height: 128px; flex-basis: 128px; }
}
.question-heading { display: flex; justify-content: space-between; align-items: center; }
.question-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: .75rem 0; }
.sub-label { color: var(--muted); font-size: .8rem; font-weight: 600; margin-top: .35rem; }
.storage-note { color: #9b6833; font-size: .8rem; }
.question-heading h2, .saved-list h2, .quest-panel h2 { font-size: 1.2rem; font-weight: 750; }
.option-row { display: flex; gap: .5rem; margin: .45rem 0; }
.icon-button { border: 0; background: transparent; font-size: 1.5rem; color: var(--muted); cursor: pointer; }
.text-button {
    border: 0;
    background: transparent;
    color: #9f4216;
    font-size: .85rem;
    font-weight: 700;
    padding: .45rem 0;
    cursor: pointer;
}
.danger-button { color: #a22; }
.danger-button:hover, .danger-button:focus-visible { color: #761717; text-decoration: underline; }
.primary-button, .secondary-button { border: 0; border-radius: 10px; padding: .85rem 1.15rem; font-weight: 700; cursor: pointer; }
.primary-button {
    background: #fedd8d;
    color: #571d1d;
}
.primary-button:hover { background: #95d65d; }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.secondary-button {
    background: #e9f2e0;
    color: #571d1d;
}
.actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.create-survey-action { justify-content: flex-start; margin: 0 0 1.25rem; }
.create-survey-action a { color: #571d1d; text-decoration: none; }
.success-message { color: #376c32; background: #e7f4df; border-radius: 10px; padding: .9rem 1rem; }
.google-signin-button { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 48px; padding: .7rem 1rem; border: 1px solid #dadce0; border-radius: 8px; color: #3c4043; background: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px #00000012; }
.google-signin-button:hover, .google-signin-button:focus-visible { background: #f8faff; border-color: #b8c7e8; color: #202124; }
.google-mark { color: #4285f4; font-size: 1.25rem; font-weight: 800; font-family: Arial, sans-serif; }
.login-divider { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--muted); font-size: .85rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.saved-list { background: white; border: 1px solid var(--line); border-radius: 16px; margin-top: 1.1rem; padding: 1.3rem 1.5rem; box-shadow: 0 8px 30px #22220808; }
.saved-list p { margin: .55rem 0; font-weight: 600; }
.managed-survey { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; border-top: 1px solid var(--line); padding: .65rem 0; }
.admin-dashboard .saved-list { background: transparent; border: 0; box-shadow: none; padding: 0; }
.admin-dashboard .managed-survey { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; margin: .65rem 0; }
.share-link-message { overflow-wrap: anywhere; color: var(--muted); font-size: .82rem; }
.managed-survey p { flex: 1 1 100%; margin: 0; }
.results-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.25rem 0; }
.results-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.results-summary article { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.results-summary strong { font-size: 1.7rem; }
.results-summary span, .participant-report h3 span { color: var(--muted); font-size: .85rem; font-weight: 400; }
.distribution-chart-wrap { display: flex; justify-content: center; margin: 1rem 0 1.25rem; }
.distribution-pie { width: 176px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(35, 27, 49, .12); }
.distribution-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.distribution-row > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.distribution-swatch { display: inline-block; width: .8rem; height: .8rem; flex: 0 0 .8rem; border-radius: 50%; }
.question-average-rating { margin: .4rem 0; }
.question-average-rating strong { color: var(--accent); }
.question-average-rating span { color: var(--muted); font-size: .9rem; }
.audio-field-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.audio-toggle { width: 1.65rem; height: 1.65rem; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.audio-toggle:hover, .audio-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
.distribution-question, .participant-report { border-top: 1px solid var(--line); padding: 1rem 0; }
.distribution-question h3, .participant-report h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.participant-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; margin: .35rem 0 .75rem; }
.participant-score strong { color: var(--accent); font-size: 1.35rem; }
.participant-score span { color: var(--muted); font-size: .9rem; }
.participant-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.participant-heading h3 { margin: 0; }
.participant-navigation { display: flex; flex-wrap: wrap; gap: .4rem; }
.participant-nav-button { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .75rem; border: 1px solid #d9e8cb; border-radius: 999px; background: #f5faef; color: #40572c; font-size: .8rem; font-weight: 700; text-decoration: none; }
a.participant-nav-button:hover, a.participant-nav-button:focus-visible { border-color: #a6c985; background: #eaf5de; color: #26341e; }
.participant-nav-button.disabled { opacity: .45; }
.participant-report { scroll-margin-top: 1.5rem; }
#participant-responses { scroll-margin-top: 1rem; }
.distribution-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid #f0f1ed; }
.participant-answer { display: grid; gap: .25rem; padding: .55rem 0; }
.participant-answer > span { color: var(--muted); }
.participant-answer small { color: var(--muted); }
.participant-answer audio { display: block; width: min(100%, 420px); margin-top: .35rem; }
.report-audio-filename { display: block; color: var(--muted); margin: .35rem 0; }
.distribution-question audio { display: block; width: min(100%, 420px); margin: .35rem 0 .75rem; }
.saved-list span, .empty-state { color: var(--muted); font-weight: 400; }
.registration { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.registration .field { margin: 0; }
.survey-picker-title { margin: 1.6rem 0 .8rem; font-size: 1.35rem; }
.survey-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.survey-picker-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px #22220808; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.survey-picker-card:hover { transform: translateY(-2px); border-color: #91c75f; box-shadow: 0 12px 32px #22220812; }
.survey-picker-card.selected { border: 2px solid #75a943; }
.survey-picker-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f0f1ed; }
.survey-picker-copy { display: grid; gap: .45rem; padding: 1rem 1.1rem 1.2rem; }
.survey-picker-copy strong { font-size: 1.08rem; }
.survey-picker-copy > span { color: var(--muted); white-space: pre-line; }
.survey-picker-card { text-decoration: none; }
.survey-picker-card:focus-visible { outline: 3px solid #75a943; outline-offset: 3px; }
.survey-completion h2 { margin-top: 0; }
#invite-other-surveys { display: inline-flex; align-items: center; gap: .45rem; margin: .8rem 0 1rem; padding: .75rem 1.15rem; color: #fff; font-weight: 700; background: linear-gradient(110deg, #568d32, #79b84b); border: 1px solid #6da642; border-radius: 999px; box-shadow: 0 5px 14px #568d3240; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; animation: invite-surveys-pulse 2.8s ease-in-out infinite; }
#invite-other-surveys::before { content: "♫"; font-size: 1.1em; }
#invite-other-surveys a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
#invite-other-surveys:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #568d3255; filter: brightness(1.06); }
#invite-other-surveys a:hover { text-decoration: underline; }
#invite-other-surveys:focus-within { outline: 3px solid #91c75f; outline-offset: 3px; }
@keyframes invite-surveys-pulse { 0%, 100% { box-shadow: 0 5px 14px #568d3240; } 50% { box-shadow: 0 7px 20px #568d3266; } }
@media (prefers-reduced-motion: reduce) { #invite-other-surveys { animation: none; transition: none; } }
.review-toggle { margin: .4rem 0 .8rem; font-weight: 700; }
.answer-review-list { display: grid; gap: .7rem; }
.answer-review-item { display: grid; gap: .3rem; padding: .85rem 1rem; border-radius: 10px; border-left: 4px solid #8b8b8b; background: #f5f5f2; }
.answer-review-item.correct { border-color: #3d8b45; background: #edf7ed; }
.answer-review-item.incorrect { border-color: #c64b45; background: #fff0ee; }
.answer-review-item.ungraded { border-color: #8b8b8b; }
.answer-review-item > span { color: var(--muted); }
.other-surveys { margin-top: 1.6rem; }
.cover-image-field { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #ffffff80; }
.cover-image-preview { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.cover-image-preview img { width: min(100%, 320px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.survey-question { border-top: 1px solid var(--line); padding: 1rem 0; }
.survey-question h3 { font-size: 1.02rem; font-weight: 700; }
.answer-option { display: flex; gap: .65rem; align-items: center; justify-content: flex-start; padding: .6rem .75rem; margin: .4rem 0; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.answer-option:has(input:checked) { border-color: #91c75f; background: #f5faef; }
.answer-option input { accent-color: #73ae43; }
.field .answer-option input[type=radio] { width: auto; flex: 0 0 auto; }
.audio-hint { color: var(--muted); font-size: .82rem; margin: .35rem 0 .75rem; }
.rating-toggle { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .2rem; font-size: .9rem; font-weight: 600; }
.rating-toggle input { accent-color: #73ae43; }
.rating-field { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.rating-options { display: flex; gap: .5rem; }
.rating-option { display: flex; align-items: center; gap: .25rem; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; cursor: pointer; color: var(--ink); }
.rating-option:has(input:checked) { border-color: #91c75f; background: #f5faef; }
.rating-option input { accent-color: #73ae43; }
.sidebar { background: #222622; }
.navbar-brand { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.03em; }
.nav-link { color: #d9dfd5; }
.nav-link.active { color: var(--accent); }
.nav-button { border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.account-shell { max-width: 560px; }
.account-shell form { margin: 1.5rem 0; }
.error-message { padding: .8rem 1rem; border-radius: 9px; background: #ffeded; color: #963b3b; }
.home-hero {
    position: relative;
    min-height: min(760px, calc(100vh - 4rem));
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 7vw, 6rem);
    border-radius: 24px;
    background: radial-gradient(ellipse at 78% 48%, #006b14 0, #1f1b39 39%, #006b14 72%);
    color: #f4f5ef;
}
.hero-content {
    position: relative;
    z-index: 2;
    width: min(590px, 62%);
}
.home-page-background { background: var(--paper); }
.hero-note { display: inline-block; padding: .55rem .8rem; border: 1px solid #ffffff25; border-radius: 99px; color: #b6e88c; font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.hero-content h1 { margin: 1.5rem 0 .8rem; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .98; font-weight: 600; letter-spacing: -.07em; }
.hero-content h1 span { color: #b2e780; }
.hero-content > p { max-width: 430px; color: #c0c7be; font-size: 1.05rem; line-height: 1.7; }
.home-actions { display: grid; gap: .8rem; max-width: 440px; margin-top: 2rem; }
.home-action { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid #ffffff25; border-radius: 13px; color: #f4f5ef; background: #ffffff09; text-decoration: none; transition: transform .2s, border-color .2s, background .2s; }
.home-action:hover { transform: translateY(-2px); border-color: #b2e780; color: #fff; background: #ffffff12; }
.home-action-primary { border-color: #b2e78066; background: #b2e780; color: #1d2619; }
.home-action-primary:hover { color: #1d2619; background: #c0f28f; }
.action-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #ffffff16; font-size: 1.25rem; }
.home-action-primary .action-icon { background: #25351d18; }
.home-action strong, .home-action small { display: block; }
.home-action strong { font-size: .94rem; }
.home-action small { margin-top: .18rem; opacity: .72; font-size: .75rem; }
.action-arrow { margin-left: auto; font-size: 1.2rem; opacity: .7; }
.hero-footnote { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; color: #a8afa6; font-size: .8rem; }
.sound-bars { display: flex; height: 16px; align-items: center; gap: 3px; }
.sound-bars i { width: 3px; border-radius: 3px; background: #b2e780; }
.sound-bars i:nth-child(1), .sound-bars i:nth-child(5) { height: 6px; }.sound-bars i:nth-child(2), .sound-bars i:nth-child(4) { height: 11px; }.sound-bars i:nth-child(3) { height: 16px; }
.hero-art { position: absolute; width: min(46vw, 510px); aspect-ratio: 1; right: 2%; top: 50%; transform: translateY(-50%); }
.vinyl { position: absolute; inset: 6%; border-radius: 50%; background: repeating-radial-gradient(circle, #111511 0 2px, #1b211c 3px 5px, #111511 6px 7px); box-shadow: 0 35px 90px #0008, inset 0 0 0 1px #ffffff16; }
.vinyl::before { content: ''; position: absolute; inset: 19%; border: 1px solid #ffffff0d; border-radius: 50%; }
.vinyl-label { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #d2f3a7, #8ac65f); color: #24311d; font-size: clamp(2rem, 6vw, 4rem); box-shadow: 0 0 0 5px #111511; }
.floating-note { position: absolute; z-index: 1; color: #b2e780; font-family: serif; text-shadow: 0 8px 30px #0007; }
.note-one { top: 7%; left: 9%; font-size: 4rem; transform: rotate(-12deg); }.note-two { right: 2%; top: 28%; font-size: 3.2rem; transform: rotate(12deg); }.note-three { bottom: 9%; left: 20%; font-size: 5rem; }
@media (max-width: 640px) { .survey-shell { margin-top: 2rem; } .registration { grid-template-columns: 1fr; } .question-card, .quest-panel { padding: 1rem; } }
@media (max-width: 520px) { .results-summary { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .home-hero { min-height: 700px; align-items: flex-end; padding: 2rem 1.35rem; }.hero-content { width: 100%; }.hero-art { width: 300px; top: 0; right: -35px; transform: none; opacity: .48; }.hero-content h1 { font-size: clamp(3rem, 13vw, 5rem); } }
@media (max-width: 800px) { .home-page-background .home-hero { min-height: 0; } }