/* Two equally weighted windows: authored prompt and its example search terms. */
.mp-prompt-explorer{scroll-margin-top:84px}
.mp-explorer-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.mp-explorer-heading h2{font-size:32px;max-width:19ch}
.mp-explorer-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;align-items:stretch}
.mp-explorer-input,.mp-explorer-output{min-width:0;display:flex;flex-direction:column;padding-top:20px;background:var(--brand-rule-x) left top/100% var(--brand-stroke) no-repeat}
.mp-prompt-explorer h3{font:500 16px/24px var(--font-sans);letter-spacing:0;margin:0 0 20px;text-wrap:initial}
.mp-explorer-prompt,.mp-explorer-results-window{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;background:#fff;padding:28px}
.mp-explorer-results-window{background:#fff}
.mp-explorer-prompt{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.mp-explorer-prompt p{font-size:22px;line-height:1.5;color:var(--text);max-width:30ch;text-wrap:pretty;margin:12px 0 0}
.mp-explorer-composer-tools{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--text)}
.mp-explorer-plus{font-size:24px;font-weight:400;line-height:1}
.mp-explorer-search{display:flex;align-items:center;gap:7px}
.mp-explorer-search svg{width:16px;height:16px}
.mp-explorer-send{display:grid;place-items:center;margin-left:auto;width:32px;height:32px;border-radius:50%;background:#171717;color:#fff}
.mp-explorer-send svg{width:20px;height:20px}
.mp-explorer-terms{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.mp-explorer-terms li{padding:12px 16px;border:1px solid #e7e7e7;border-radius:6px;background:#f7f7f7;font-size:15px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.mp-explorer-picker{position:relative;flex:none;max-width:100%;font:400 14px/20px var(--font-sans);z-index:3}
.mp-explorer-picker summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;list-style:none}
.mp-explorer-picker summary::-webkit-details-marker{display:none}
.mp-explorer-picker summary>span:first-child{color:#666}
.mp-explorer-picker summary>svg{flex:none;margin-left:auto}
.mp-explorer-picker summary:focus-visible,.mp-explorer-choices button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mp-explorer-choices{position:absolute;right:0;top:calc(100% + 8px);width:100%;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 8px 28px #00000012;display:grid;gap:2px}
.mp-explorer-choices button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:44px;padding:10px 12px;border:0;border-radius:5px;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.mp-explorer-choices button:hover,.mp-explorer-choices button[aria-pressed="true"]{background:#f1f1f1}
.mp-explorer-choices button[aria-pressed="true"]::after{content:'✓'}
.mp-explorer-note{margin-top:16px!important;font-size:14px;color:#666;max-width:70ch}
.mp-explorer-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mp-prompt-explorer [hidden]{display:none}
@media(max-width:900px){.mp-explorer-grid{gap:24px}.mp-explorer-prompt,.mp-explorer-results-window{padding:22px}.mp-explorer-prompt p{font-size:20px}.mp-explorer-heading{flex-wrap:wrap;gap:24px}}
@media(max-width:820px){.mp-explorer-grid{grid-template-columns:1fr;gap:28px;margin-top:32px}.mp-explorer-heading h2{font-size:26px}.mp-explorer-prompt{min-height:240px}.mp-explorer-prompt p{font-size:19px}.mp-explorer-results-window{padding:16px}.mp-explorer-terms li{padding:12px}.mp-explorer-picker{width:100%}.mp-explorer-picker summary{gap:8px;padding-inline:10px}}

.mp-explorer-picker:not([open]) .mp-explorer-choices{display:none}

/* Decorative search marks stay consistent when the selected example changes. */
.mp-explorer-terms li{display:flex;align-items:center;gap:10px}

/* Quiet directional connector between the two example windows. */
.mp-explorer-output{position:relative}
.mp-explorer-output::before{content:"";position:absolute;left:-48px;top:calc(50% + 32px);width:48px;height:12px;transform:translateY(-50%);pointer-events:none;background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12' preserveAspectRatio='none' fill='none' stroke='%23949499' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6h48m-5-5 5 5-5 5'/%3E%3C/svg%3E")}
@media(min-width:821px) and (max-width:900px){.mp-explorer-output::before{left:-24px;width:24px}}
@media(max-width:820px){.mp-explorer-output::before{left:50%;top:-14px;transform:translate(-50%,-50%) rotate(90deg);width:20px}}

.mp-explorer-terms .mp-query-icon{display:block;flex:0 0 14px;width:14px;height:14px;color:#949499}
.mp-explorer-terms li>span{min-width:0}