/* Get Edge dialog (DS 1.1, quiet): title, one line, the prompt, one blue key; the rest behind one quiet line.
   No borders (DS1 rule, Federico 10-23): fill contrast, spacing and soft shadow only; focus rings stay.
   Markup: tools/edge_kit/edge_use.py */
.eu-dialog,.eu-panel{--eu-ink:#16251e;--eu-muted:#59685f;--eu-soft:#f3f5f8;--eu-softer:#f8f9fb;--eu-blue:#154cff;--eu-blue-edge:#0c35ba;--eu-blue-hover:#2a5cff}
.eu-dialog{
  width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:28px;border:0;border-radius:18px;
  background:#fff;color:var(--eu-ink);font:400 15px/1.5 Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,sans-serif;box-shadow:0 24px 64px #16251e2e;overflow:auto}
.eu-dialog::backdrop{background:#16251e66}
.eu-dialog *,.eu-panel *{box-sizing:border-box}
.eu-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.eu-head h2{margin:0;font-size:28px;font-weight:500;letter-spacing:-.035em;line-height:1.05}
.eu-close{flex:none;width:38px;height:38px;border:0;border-radius:9px;background:var(--eu-soft);color:var(--eu-ink);font-size:20px;line-height:1;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 2px 0 #dfe4ec}
.eu-close:hover{background:#e8ecf2}
.eu-close:focus-visible{outline:2px solid var(--eu-blue);outline-offset:2px}
.eu-lead{margin:0 0 10px;font-size:15px;color:var(--eu-muted)}
.eu-code{margin:0;padding:14px 16px;border:0;border-radius:10px;background:var(--eu-soft);font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--eu-ink)}
.eu-code:focus-visible{outline:2px solid var(--eu-blue);outline-offset:2px}
.eu-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:14px}
.eu-inline{display:flex;align-items:stretch;gap:10px}
.eu-inline .eu-code{flex:1;min-width:0;display:flex;align-items:center}
.eu-done{margin:0;font-size:13.5px;font-weight:500;color:var(--eu-blue)}
.eu-done:empty{display:none}
.eu-group .eu-inline+.eu-done{margin-top:10px}
/* keys: the landing's keycaps; the quiet key is a soft fill, no hairline */
.eu-key{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:9px;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,box-shadow .16s ease,background .16s ease}
.eu-key--primary{color:#fff;background:var(--eu-blue);box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 var(--eu-blue-edge),0 8px 18px #154cff33}
.eu-key--primary:hover{background:var(--eu-blue-hover);transform:translateY(-1px)}
.eu-key--quiet{color:var(--eu-ink);background:var(--eu-soft);box-shadow:inset 0 1px 0 #fff,0 3px 0 #dfe4ec,0 6px 12px #16251e0d}
.eu-key--quiet:hover{background:#e8ecf2;transform:translateY(-1px)}
.eu-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--eu-line)}
.eu-key--primary:active{box-shadow:0 1px 0 var(--eu-blue-edge)}
.eu-key:focus-visible{outline:2px solid var(--eu-blue);outline-offset:3px}
/* Copied stays the blue keycap, pressed (Federico 10-24: blue, not black) */
.eu-key.is-copied,.eu-key.is-copied:hover{transform:translateY(2px);color:#fff;background:var(--eu-blue);box-shadow:inset 0 1px 0 #ffffff40,0 1px 0 var(--eu-blue-edge)}
/* what you get, where it works: shared by the dialog and the inline panel */
.eu-perks{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.eu-perks li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--eu-soft);font-size:13px;font-weight:500;color:var(--eu-ink)}
.eu-perks li::before{content:"";width:12px;height:12px;flex:none;background:var(--eu-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.eu-hosts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.eu-host{display:inline-flex;align-items:center;gap:7px;color:var(--eu-ink);font-size:13.5px;font-weight:500;text-decoration:none}
.eu-host:hover{text-decoration:underline;text-underline-offset:3px}
.eu-host:focus-visible{outline:2px solid var(--eu-blue);outline-offset:3px;border-radius:6px}
.eu-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--eu-soft)}
.eu-mark svg,.eu-mark img{width:16px;height:16px}
/* the inline panel (pricing Get started): the dialog's body on one white card */
.eu-panel{max-width:560px;margin:24px auto 0;padding:24px;border-radius:18px;background:#fff;color:var(--eu-ink);text-align:left;
  font:400 15px/1.5 Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,sans-serif;box-shadow:0 18px 48px #16251e1f}
/* the quiet line and what it opens */
.eu-more{margin-top:20px}
.eu-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:var(--eu-muted);font-weight:500;list-style:none;border-radius:6px}
.eu-more summary::-webkit-details-marker{display:none}
.eu-more summary::after{content:"";width:7px;height:7px;margin-left:2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .16s ease}
.eu-more[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.eu-more summary:hover{color:var(--eu-ink)}
.eu-more summary:focus-visible{outline:2px solid var(--eu-blue);outline-offset:3px}
.eu-more .eu-group{margin-top:16px;padding:16px;border-radius:14px;background:var(--eu-softer)}
.eu-more .eu-code{background:#fff}
.eu-more .eu-key--quiet{background:#fff}
.eu-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;align-items:start}
.eu-steps-h{margin:0 0 6px;font-size:14px;font-weight:500}
.eu-steps ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55;color:var(--eu-muted)}
.eu-steps li+li{margin-top:4px}
.eu-steps a{color:var(--eu-blue);font-weight:500;text-decoration:none}
.eu-steps a:hover{text-decoration:underline}
.eu-foot{margin:14px 0 0;font-size:13px;color:var(--eu-muted)}
.eu-foot a{color:var(--eu-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .eu-dialog,.eu-panel{padding:20px;border-radius:16px}
  .eu-head h2{font-size:24px}
  .eu-row .eu-key--primary{width:100%}
  .eu-inline{flex-direction:column}
  .eu-inline .eu-key{width:100%}
  .eu-steps-grid{grid-template-columns:1fr}
}
/* Get Edge dialog v3 (Federico 10-26: "visually simpler", understood in 2 seconds): two rows, each the logos it
   covers, a name and one key; the copied text stays hidden. One quiet line between the rows (asked for, 10-26). */
.eu-dialog .eu-head{margin-bottom:8px}
.eu-dialog .eu-r{padding:16px 0}
.eu-dialog .eu-r+.eu-r{box-shadow:inset 0 1px 0 #16251e14}
.eu-dialog .eu-r .eu-row{margin:0;flex-wrap:nowrap;gap:12px}
.eu-dialog .eu-logos{display:flex;gap:6px;flex:none}
.eu-dialog .eu-logos .eu-mark{width:24px;height:24px;background:none}
.eu-dialog .eu-logos .eu-mark svg{width:22px;height:22px}
.eu-dialog .eu-name{margin:0;flex:1;min-width:0;font-size:16px;font-weight:500;color:var(--eu-ink)}
.eu-dialog .eu-r .eu-key{flex:none;min-width:136px}
.eu-dialog .eu-r .eu-code{margin-top:12px}
.eu-dialog .eu-r .eu-done{margin:8px 0 0;color:var(--eu-muted);font-weight:400}
.eu-dialog .eu-tail{display:flex;justify-content:space-between;gap:16px;margin:8px 0 0;font-size:13px;color:var(--eu-muted)}
.eu-dialog .eu-tail a{color:var(--eu-muted);text-decoration:underline;text-underline-offset:3px}
.eu-dialog .eu-tail a:hover{color:var(--eu-ink)}
.eu-dialog .eu-tail a:focus-visible{outline:2px solid var(--eu-blue);outline-offset:3px;border-radius:4px}
@media(max-width:620px){
  .eu-dialog .eu-r .eu-row{flex-wrap:wrap}
  .eu-dialog .eu-r .eu-key{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.eu-key,.eu-more summary::after{transition:none}.eu-key:hover,.eu-key:active{transform:none}}