.survey{z-index:9;box-sizing:border-box;background:var(--well);width:min(360px,100vw - 32px);color:var(--fg);border-radius:var(--r-card,12px);box-shadow:var(--shadow-overlay,none);font-family:var(--sans);padding:16px 18px;position:fixed;bottom:24px;right:24px}.survey[hidden],.survey.held{display:none}.survey .q{text-wrap:pretty;margin:0 0 12px;padding-right:28px;font-size:14px;font-weight:600;line-height:1.5}.survey .d{color:var(--soft);margin:-6px 0 12px;font-size:13px;line-height:1.45}.survey button{font:600 14px var(--sans);background:var(--hover,var(--panel));color:var(--fg);cursor:pointer;border:0;border-radius:999px;padding:9px 14px}.survey button:hover:not(:disabled){background:var(--raised,var(--panel))}.survey button.primary,.survey button.primary:hover:not(:disabled){background:var(--fg);color:var(--bg)}.survey button.quiet{color:var(--soft);background:0 0}.survey button.quiet:hover:not(:disabled){background:var(--hover,var(--panel))}.survey .x{width:32px;height:32px;color:var(--soft);background:0 0;place-items:center;padding:0;display:grid;position:absolute;top:8px;right:8px}.survey .x svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:14px;height:14px}.survey .scale{gap:6px;display:flex}.survey .scale button{flex:1 1 0;min-width:0;padding:9px 0}.survey .scale:has(>:nth-child(8)){gap:3px}.survey .ends{color:var(--soft);justify-content:space-between;gap:12px;margin-top:6px;font-size:12px;display:flex}.survey .choices{flex-direction:column;gap:6px;display:flex}.survey .choices button{text-align:left;border-radius:var(--r-control,8px)}.survey textarea{box-sizing:border-box;width:100%;font:16px/1.4 var(--sans);background:var(--panel);color:var(--fg);border-radius:var(--r-control,8px);resize:vertical;border:0;padding:10px 12px;display:block}.survey textarea:focus{box-shadow:inset 0 0 0 1px var(--soft);outline:0}.survey .end{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;display:flex}.survey .end a{text-decoration:none}@media (width<=760px){.survey{bottom:16px;right:16px}}@media (width<=600px){.survey{width:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.survey .x{width:44px;height:44px;top:0;right:0}.survey .scale button,.survey .choices button{min-height:44px}.survey .end{flex-direction:column-reverse;align-items:stretch}.survey .end a button{width:100%}}
