.browser-help { max-width: 720px; margin: 18px auto; padding: 14px 18px; border: 1px solid #dddeda; border-radius: 12px; background: #fff; color: #383e42; text-align: left; font-size: 14px; line-height: 1.5; }
.browser-help summary { cursor: pointer; font-weight: bold; }
.browser-help[hidden] { display: none; }
#discovery-help-link { position: fixed; bottom: 48px; right: 20px; z-index: 10003; width: 42px; height: 42px; border: 1px solid #dddeda; border-radius: 50%; background: white; color: #383e42; font-size: 24px; font-weight: bold; box-shadow: 0 3px 12px #0003; cursor: pointer; }
body.has-project-ideas #discovery-help-link { bottom: calc(25vh + 12px); bottom: calc(25dvh + 12px); }
.browser-help#browser-help { position: fixed; inset: 0; z-index: 10002; max-width: none; margin: 0; padding: 32px 16px; border: 0; border-radius: 0; background: #0006; box-sizing: border-box; overflow: auto; }
.browser-help-panel { max-width: 720px; margin: 0 auto; padding: 20px; border-radius: 14px; background: white; box-shadow: 0 12px 45px #0004; }
#discovery-help-close { display: block; margin: 0 0 16px auto; }
#discovery-help-link:focus-visible { outline: 3px solid #1769aa; outline-offset: 4px; }
#browser-help { scroll-margin-top: 16px; }
.browser-help p { margin: 10px 0; }
.browser-help details details { margin: 12px 0; }
.browser-help a { color: #1769aa; text-decoration: underline; }
.browser-help button { background: #383e42; color: white; border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; font: inherit; }
.browser-help :focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
.browser-help [hidden] { display: none !important; }
.light-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 16px 0 0; border-bottom: 1px solid #e2b99c; }
.browser-help .light-choices button { display: flex; align-items: center; justify-content: center; min-width: 0; height: 80px; padding: 0; background: #f1f2f0; color: #383e42; border-radius: 8px 8px 0 0; border-bottom: 4px solid transparent; }
.browser-help .light-choices button:hover { background: #e4e7e4; }
.browser-help .light-choices button[aria-selected="true"] { position: relative; z-index: 1; background: #fff0e6; border: 1px solid #e2b99c; border-top: 4px solid #e25303; border-bottom: 0; margin-bottom: -1px; height: 81px; }
.browser-help [data-light-path] { padding: 16px 20px; margin: 0 0 18px; background: #fff0e6; border: 1px solid #e2b99c; border-top: 0; border-radius: 0 0 10px 10px; }
.browser-help [data-light-path] > :first-child { margin-top: 0; }
.browser-help [data-light-path] > :last-child { margin-bottom: 0; }
.light-choices .status-light-demo { flex: 0 0 56px; width: 56px; transform: rotate(90deg); margin: 0; }
.direct-address-fallback { border-top: 1px solid #dddeda; padding-top: 14px; }
.status-light-row { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0; }
.status-light-row > div { min-width: 0; }
.status-light-row code { overflow-wrap: anywhere; }
.status-light-demo { display: flex; gap: 4px; flex: 0 0 56px; box-sizing: border-box; padding: 10px 7px; margin-top: 2px; border-radius: 8px; background: #383e42; }
.status-light-demo > span { flex: 1; height: 20px; border-radius: 4px; background: var(--light-color, #fff); box-shadow: 0 0 7px var(--light-color, #fff); animation: status-light-breathe 3s ease-in-out infinite; }
.status-light-orange { --light-color: #ff8500; }
.status-light-green, .status-light-combined > span:first-child { --light-color: #50db64; }
.status-light-combined > span:last-child { animation-delay: -1.5s; }
.light-guide-note { font-size: 12px; color: #656b70; }
@keyframes status-light-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .status-light-demo > span { animation: none; } }