@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Use the visitor's shared appearance tokens; an OS preference must not override
   a light theme that the visitor explicitly selected. */
:root{color-scheme:light;--bg:var(--page-background,#f3ecdf);--fg:var(--text-primary,#262b28);--panel:var(--surface-primary,#fffaf0);--line:var(--control-border,#928673);--accent:var(--action-background,#163d30)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--interface-font,'DM Sans',system-ui,sans-serif)}
header,main,footer{max-width:960px;margin:auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px}
header>a{font-family:Manrope,'DM Sans',sans-serif;font-size:24px;font-weight:700;text-decoration:none}
header small{font-size:14px}
nav{display:flex;align-items:center;gap:20px}
nav label{font-size:12px}
nav select{margin:0}
h1{font:700 clamp(32px,5vw,52px)/1.15 Manrope,'DM Sans',sans-serif;letter-spacing:-.025em;max-width:700px}
.eyebrow{letter-spacing:.18em;font-size:12px}
.intro{font-size:19px;max-width:760px}
form,section{padding:24px;border-radius:18px;background:var(--panel);margin:24px 0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
label{display:block;margin:14px 0}
input:not([type=checkbox]),select{width:100%;min-width:0;max-width:100%;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);font:inherit}
fieldset{min-width:0;border:0;padding:12px 0;margin:10px 0}
legend{font-weight:700}
.check{display:flex;align-items:flex-start;gap:10px}
.check input{margin-top:6px;accent-color:var(--action-background,var(--accent));flex:none}
button{border:0;border-radius:24px;padding:14px 25px;background:var(--accent);color:var(--action-text,#fffdf9);font:600 16px var(--interface-font,'DM Sans',system-ui,sans-serif);cursor:pointer}
button:disabled{opacity:.6}
a{color:inherit;text-underline-offset:3px}
progress{width:100%}
img{max-width:160px;max-height:160px;border-radius:12px;object-fit:contain}
audio{max-width:100%}
.honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#guest-message:empty{display:none}
#guest-message{padding:16px;border-left:3px solid var(--line)}
[hidden]{display:none!important}
#guest-result{overflow-wrap:anywhere}
footer{font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus-ring,#163d30);outline-offset:3px}

/* The form is a quiet, translucent surface. Emerald is reserved for its action,
   while field borders and keyboard focus remain visible in every appearance. */
#guest-song{background:var(--panel);background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--fg);box-shadow:var(--surface-shadow,0 16px 48px #6b4c2212)}
#guest-song :is(label,legend,p){color:var(--fg)}
#guest-song :is(input:not([type=checkbox]),select){background:var(--panel);color:var(--fg);border-color:var(--line)}
#guest-song input::placeholder{color:var(--text-secondary,#58615b);opacity:1}
#guest-song input::file-selector-button{font:inherit;color:inherit;background:var(--surface-secondary,#e9e1d3);border:1px solid var(--line);border-radius:7px;padding:8px 12px;margin-right:12px;cursor:pointer}
#guest-song button[type=submit]{background:var(--action-background,var(--accent));color:var(--action-text,#fffdf9)}
#guest-song button[type=submit]:hover:not(:disabled){filter:brightness(.94)}
html[data-contrast=more] #guest-song{background:var(--panel)}

@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#101414;--fg:#f0f2ec;--panel:#191e1e;--line:#7d8c84;--accent:#c3edc5;--action-text:#143c31;--text-secondary:#a1aaa6;--surface-secondary:#222828;--focus-ring:#c3edc5;--surface-shadow:0 16px 48px #0003}}
@media(max-width:600px){header{align-items:flex-start}header,main,footer{padding:18px}.grid{grid-template-columns:1fr}nav{align-items:flex-start;flex-direction:column;gap:8px}form,section{padding:18px}button{width:100%}}