dialog{box-sizing:border-box;background:#f6f5ef;color:#173e31;border:1px solid #173e3140;border-radius:0;padding:40px;width:min(600px,calc(100% - 32px));max-height:90svh;overflow:auto;font:14px/1.65 Manrope,Arial,sans-serif}
dialog::backdrop{background:#102a24a8}dialog h2{font:500 32px/1.15 'Clash Display',Manrope,Arial,sans-serif;margin:16px 40px 18px 0}dialog .dialog-close{position:absolute;right:14px;top:12px;width:44px;height:44px;font:32px/1 Manrope,Arial,sans-serif;background:none;border:0;cursor:pointer;color:inherit}dialog form{display:grid;gap:18px}dialog label{display:grid;gap:7px;font-size:13px}dialog input,dialog select,dialog textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #b4bfae;background:transparent;color:inherit;font:14px/1.5 Manrope,Arial,sans-serif}dialog select{appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23173e31' stroke-width='1.5'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}dialog .brief-actions{display:flex;margin-top:4px}dialog #email-draft{display:inline-flex;align-items:center;gap:20px;padding:14px 20px;background:#173e31;color:#f6f5ef;text-decoration:none;border:0;font:13px/1.5 Manrope,Arial,sans-serif}dialog .privacy-note,dialog .form-status{font-size:11px;color:#6b7964}dialog .brief-wechat{margin-top:24px;padding-top:20px;border-top:1px solid #173e3126}dialog .wechat-line{display:grid;grid-template-columns:max-content 28px;align-items:center;justify-content:start;gap:6px 8px}dialog .wechat-line label{grid-column:1 / -1;margin:0}dialog .wechat-id{width:14ch;padding:0;border:0;background:none;font:14px/1.5 Manrope,Arial,sans-serif}dialog .wechat-copy{display:inline-flex;align-items:center;justify-content:center;padding:4px;width:28px;height:28px;min-height:0;border:0;background:none}dialog .copy-icon{width:18px;height:18px}dialog .wechat-status{font-size:11px}dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}dialog .square-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

#brief-dialog{padding:24px 32px;max-height:calc(100svh - 32px)}
#brief-dialog>.eyebrow{margin:0 44px 10px 0;font:10px/1.5 Consolas,monospace}
#brief-dialog h2{margin:0 36px 18px 0}
#brief-dialog .dialog-intro{display:none}
#brief-dialog form{gap:12px}
#brief-dialog label{gap:5px}
#brief-dialog input,#brief-dialog select,#brief-dialog textarea{padding:9px 12px}
#brief-dialog textarea{height:76px;min-height:76px;resize:vertical}
#brief-dialog .brief-actions{margin:0}
#brief-dialog .privacy-note{margin:0;line-height:1.5}
#brief-dialog .form-status:empty,#brief-dialog .wechat-status:empty{display:none}
#brief-dialog .brief-wechat{margin:18px 0 0;padding:14px 16px;border:0;background:#e9eddf}
#brief-dialog .brief-wechat>p{margin:0 0 5px;font-size:12px;line-height:1.5}
#brief-dialog .wechat-line{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
#brief-dialog .wechat-line label{display:block;width:auto;min-width:0;margin:0;font:11px/1.5 Manrope,Arial,sans-serif}
#brief-dialog input.wechat-id{flex:0 0 14ch;width:14ch;padding:0;border:0;font:14px/1.5 Manrope,Arial,sans-serif}
#brief-dialog .wechat-copy{flex:none;width:28px;height:28px;min-height:0;padding:4px}
#brief-dialog .dialog-close{font-size:36px!important}
@media(max-width:560px){#brief-dialog{padding:24px}#brief-dialog h2{font-size:28px!important}}

@media(max-width:480px){.scroll-header .header-inner{gap:10px}.scroll-header .header-inner>a{font-size:15px}.scroll-header nav a:first-child,.scroll-header nav a:nth-child(2),.scroll-header nav a:nth-child(3){display:none}.scroll-header nav a:last-child{white-space:nowrap;display:inline-flex;align-items:center}.scroll-header nav{margin-left:auto;gap:10px}.scroll-header nav svg{margin-left:5px}}

#brief-dialog .wechat-line{align-items:baseline}
#brief-dialog .wechat-copy{align-self:center}

.scroll-header nav [data-open-brief],.shared-site-header nav [data-open-brief]{gap:0}
.scroll-header nav [data-open-brief] .square-arrow,.shared-site-header nav [data-open-brief] .square-arrow{margin-left:4px}

/* One explicit header spacing contract across the homepage and subpages. */
.scroll-header nav a>span,.shared-site-header nav a>span{margin-right:9px}
.scroll-header .header-language>span,.shared-site-header .header-language>span{margin-right:0}
.scroll-header nav .square-arrow,.shared-site-header nav .square-arrow{width:14px!important;height:14px!important}

/* Shared homepage navigation hover, used by every page. */
.header-inner nav a{display:inline-flex;align-items:center;min-height:40px;position:relative;transition:color .15s}
.header-inner nav a:hover,.header-inner nav a:focus-visible{color:#65856c;animation:nav-pixel-flicker .38s steps(1,end) 1}
@keyframes nav-pixel-flicker{0%,100%{opacity:1;mask-image:none}18%,54%{opacity:.75;mask-image:repeating-conic-gradient(#000 0% 25%,transparent 0% 50%);mask-size:4px 4px}32%,72%{opacity:1;mask-image:repeating-conic-gradient(transparent 0% 25%,#000 0% 50%);mask-size:3px 3px}86%{opacity:.9;mask-image:none}}
@media(prefers-reduced-motion:reduce){.header-inner nav a:hover,.header-inner nav a:focus-visible{animation:none}}

/* Keep the contact label and arrow together, with a wider gap before language. */
.scroll-header nav a:has(.square-arrow),.shared-site-header nav a:has(.square-arrow){gap:8px}
.scroll-header nav a:has(.square-arrow)>span,.shared-site-header nav a:has(.square-arrow)>span{margin-right:0}
.scroll-header nav a .square-arrow,.shared-site-header nav a .square-arrow{margin-left:0}
.scroll-header nav+.header-language,.shared-site-header nav+.header-language{margin-left:8px}
