:root{font-family:Inter,"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#483816;background:#fff7d6;font-synthesis:none;line-height:1.6}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ad6831;outline-offset:4px}a{color:inherit}button{transition:background .15s,transform .15s}button:hover{transform:translateY(-1px)}[hidden]{display:none!important}.topbar{max-width:1120px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:700;font-size:14px}.brand-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e5ad20;color:white;font-size:23px}.divider{color:#c0c8bd;margin:0 3px}.muted{color:#847343;font-weight:500}.demo-tag{font-size:10px;letter-spacing:1.7px;color:#847343;border:1px solid #e7d8a6;border-radius:30px;padding:5px 11px}main{max-width:960px;padding:28px 28px 0;margin:auto}.intro{text-align:center;padding:12px 0 30px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;margin:0 0 13px;color:#8b7437}.intro .eyebrow{letter-spacing:2px}.eyebrow>span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d6a426;margin-right:8px}h1{font-size:clamp(34px,5vw,52px);line-height:1.35;letter-spacing:-1.8px;margin:0 0 18px;font-weight:750}.accent{color:#b77a00}p{margin-top:0}.lede{font-size:15px;color:#8b7a4e;line-height:1.9;margin-bottom:25px}.lede strong{font-weight:600;color:#9d6c00}.typo{text-decoration:underline wavy #ccac8d;text-underline-offset:4px}.flow{display:flex;justify-content:center;align-items:center;gap:18px;color:#8b7741;font-size:12px}.flow b{font-size:10px;background:#f8e9ac;border-radius:50%;display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;color:#8f6c0e}.flow i{font-style:normal;color:#c9b46c}.demo-card{background:#fff;border:1px solid #ecdda9;border-radius:22px;padding:30px 34px 20px;max-width:724px;margin:0 auto;box-shadow:0 12px 45px #97740b12}.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.card-heading .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:5px}h2{font-size:23px;letter-spacing:-.5px;margin:0}.mail-icon{display:grid;place-items:center;width:47px;height:47px;border-radius:15px;background:#fff1bd;color:#ba8b18;font-size:26px}label{font-size:13px;font-weight:650}.field-help{font-size:12px;color:#8a7d59;margin:4px 0 10px}.input-row{display:flex;gap:10px}input{min-width:0;width:100%;border:1px solid #dfcc8c;border-radius:9px;padding:12px 14px;color:#49391c;background:#fff;font-size:15px}input::placeholder{color:#aaa080}input:focus{outline:3px solid #fff0ac;border-color:#c79824}input[aria-invalid=true]{border-color:#b65a47}.primary{flex-shrink:0;border:0;border-radius:9px;background:#f3c643;color:#fff;padding:12px 18px;font-size:13px;font-weight:600}.primary:hover,.accept:hover{background:#e7b62c}.primary span{margin-left:14px}.result{margin-top:16px;border-radius:10px;background:#fff9e8;padding:15px 17px;font-size:13px;color:#87764a;border:1px solid transparent}.result p{margin:0}.result[data-state=suggestion]{background:#fff0ae;border-color:#e9cb6c;color:#78591e}.result[data-state=error]{background:#fcf0eb;color:#9a4434}.result[data-state=accepted]{background:#fff1bc;color:#795a0e}.suggestion-line{padding-top:7px;overflow-wrap:anywhere}.suggestion-line strong{color:#59400f}.actions{display:flex;gap:10px;margin-top:13px}.actions button{font-size:12px;font-weight:600;padding:7px 13px;border-radius:6px}.accept{background:#f3c643;border:1px solid #f3c643;color:white}.secondary{background:transparent;color:#82601e;border:1px solid #d8b457}.examples{margin-top:23px}.examples>p{font-size:12px;color:#8a7d59;margin-bottom:11px}.examples>p span{margin-left:5px}.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chips button{border:1px solid #eee2b7;background:#fff;text-align:left;border-radius:8px;padding:9px 12px;color:#796339;font-size:11px}.chips button:hover{background:#fff5cf;border-color:#ddc272}.chips button span{display:block;color:#9a895e;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;margin-top:2px}.privacy{font-size:10px;color:#97865a;margin:22px 0 0;padding-top:15px;border-top:1px solid #f3eacb}.privacy span{margin-right:5px;color:#b59a43}.notes{max-width:724px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:29px auto 35px}.note-number{font-size:8px;letter-spacing:1.5px;color:#ae974f}h3{font-size:13px;margin:7px 0}.notes p{font-size:11px;color:#958156;line-height:1.9;margin-bottom:0}footer{max-width:1056px;border-top:1px solid #e7d7a0;display:flex;justify-content:space-between;gap:12px;margin:auto;padding:20px 0 25px;font-size:10px;color:#9c8650}footer a{text-underline-offset:3px}.noscript{color:#9a4434;font-size:13px}@media(max-width:600px){.topbar{padding:20px}.demo-tag{display:none}main{padding:16px 18px 0}.intro{padding-bottom:25px}h1{font-size:36px}.lede{font-size:13px}.flow{gap:8px;font-size:10px}.flow b{width:20px;height:20px;margin-right:3px}.demo-card{padding:23px 20px 18px;border-radius:16px}.input-row{flex-direction:column}.primary{min-height:45px}.chips{grid-template-columns:repeat(2,1fr)}.notes{grid-template-columns:1fr;gap:17px;margin:25px 6px}.notes article{border-bottom:1px solid #eddeaa;padding-bottom:13px}.notes article:last-child{border:0}.notes p{font-size:12px}footer{margin:0 24px;flex-wrap:wrap}.privacy{line-height:1.8}}

/* Warm yellow theme: dark labels maintain contrast on golden buttons. */
.primary,.accept{color:#4b3709}.brand-icon{color:#4b3709}.result[data-state=suggestion]{border-left:3px solid #d4a00b}.suggestion-line strong{overflow-wrap:anywhere}
/* Inline combobox: suggestions overlay the form without moving its controls. */
.email-control{position:relative;flex:1;min-width:0}
.email-control input{height:100%}
.suggestion-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;padding:7px;background:#fffdf3;border:1px solid #e4bf4f;border-radius:10px;box-shadow:0 8px 22px #86620e24}
.dropdown-label{font-size:10px;color:#8b7134;margin:3px 8px 5px}
.suggestion-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;border-radius:6px;padding:11px 10px;background:#fff0b4;color:#59400f;text-align:left;font-size:14px}
.suggestion-option:hover,.suggestion-option[aria-selected=true]{background:#f9da72;transform:none}
#suggestion-email{overflow-wrap:anywhere;min-width:0}
.option-hint{flex-shrink:0;font-size:10px;color:#826619}
.result[data-state=suggestion]{background:#fff9e8;border-color:transparent;color:#87764a}
@media(max-width:600px){.email-control input{min-height:48px}.suggestion-option{font-size:13px}.option-hint{font-size:9px}}
.result{min-height:94px;display:flex;align-items:center}
.result[data-state=suggestion]{background:transparent;border:0}
.result[data-state=suggestion] #result-message{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}