/* ── 11. Expanding search (website) ──────────────────── */
.s11 { height: 660px; background: var(--gray-0); color: var(--gray-800); font-family: var(--font); }
.s11 button { font: inherit; color: inherit; }
.ab-h { position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 20; background: var(--gray-0); border-bottom: 1px solid var(--gray-60); }
.ab-top { position: absolute; left: 0; right: 0; top: 0; height: 80px; display: flex; align-items: center; padding: 0 28px; }
.ab-logo { display: flex; align-items: center; gap: 6px; color: var(--red-400); font-weight: 550; font-size: 20px; letter-spacing: -0.022em; }
.ab-logo svg { width: 30px; height: 30px; }
.ab-right { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; }
.ab-right > span { padding: 10px 14px; border-radius: 9999px; }
.ab-acct { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 12px !important; border: 1px solid var(--gray-100); box-shadow: var(--e1); }
.ab-acct svg { width: 16px; height: 16px; fill: none; stroke: var(--gray-800); stroke-width: 2.2; stroke-linecap: round; }
.ab-acct i { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-500); display: block; }
.ab-tabs { position: absolute; top: 22px; left: 50%; display: flex; gap: 28px; font-size: 15px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
.ab-tabs span { padding: 8px 0; color: var(--gray-500); }
.ab-tabs span.on { color: var(--gray-800); font-weight: 550; box-shadow: inset 0 -2px 0 var(--gray-800); }
.ab-pill { position: absolute; left: 0; top: 16px; height: 48px; width: 360px; z-index: 22; background: var(--gray-0); border: 1px solid var(--gray-100); border-radius: 9999px; box-shadow: var(--e2); overflow: hidden; }
.ab-l { position: absolute; left: 50%; top: 50%; opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) scale(.94); transition: opacity .14s ease, filter .14s ease, transform .2s ease; pointer-events: none; }
.ab-l.on { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition: opacity .26s ease .06s, filter .32s ease .06s, transform .5s cubic-bezier(.2,.9,.25,1) .03s; }
.ab-small { display: flex; align-items: center; height: 46px; padding-left: 22px; font-size: 13px; font-weight: 550; white-space: nowrap; cursor: default; }
.ab-small i { width: 1px; height: 24px; background: var(--gray-100); margin: 0 16px; }
.ab-small .mut { color: var(--gray-500); font-weight: 400; }
.ab-go { width: 34px; height: 34px; border-radius: 50%; background: var(--red-400); display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--gray-0); margin: 0 7px 0 14px; flex: none; }
.ab-go svg { width: 14px; height: 14px; fill: none; stroke: var(--gray-0); stroke-width: 3.2; stroke-linecap: round; flex: none; }
.ab-big { display: grid; grid-template-columns: 1.5fr 1px 1fr 1px 1fr 1px 1.45fr; align-items: center; height: 64px; border-radius: 9999px; background: var(--gray-0); transition: background .2s; }
.ab-big.act { background: var(--gray-60); }
.ab-hl { position: absolute; left: 0; top: 0; height: 64px; width: 0; border-radius: 9999px; background: var(--gray-0); box-shadow: var(--e2); opacity: 0; }
.ab-seg { position: relative; z-index: 1; height: 64px; border: 0; background: none; text-align: left; padding: 0 0 0 30px; border-radius: 9999px; cursor: default; display: flex; align-items: center; min-width: 0; }
.ab-seg > span, .ab-seg > div { display: block; min-width: 0; }
.ab-seg b { display: block; font-size: 12px; font-weight: 550; }
.ab-seg span span, .ab-seg [data-v] { display: block; font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-seg [data-v].set { color: var(--gray-800); font-weight: 550; }
.ab-div { position: relative; z-index: 1; width: 1px; height: 32px; background: var(--gray-100); transition: opacity .2s; }
.ab-seg4 { justify-content: space-between; padding-right: 8px; }
.ab-go-big { width: 48px; height: 48px; margin: 0; overflow: hidden; border: 0; cursor: default; justify-content: flex-start; padding: 0 17px; }
.ab-go-big svg { width: 16px; height: 16px; }
.ab-go-big em { font-style: normal; font-weight: 550; font-size: 15px; opacity: 0; transition: opacity .2s; }
.ab-go-big.wide em { opacity: 1; transition: opacity .25s .1s; }
.ab-veil { position: absolute; inset: 0; z-index: 15; background: color-mix(in srgb, var(--gray-900) 25%, transparent); opacity: 0; pointer-events: none; }
.ab-pan { position: absolute; left: 0; top: 168px; z-index: 25; width: 400px; height: 0; background: var(--gray-0); border-radius: 32px; box-shadow: var(--e2); overflow: hidden; opacity: 0; pointer-events: none; }
.ab-set { position: absolute; left: 0; top: 0; padding: 30px 32px; opacity: 0; transition: opacity .16s; pointer-events: none; }
.ab-set.on { opacity: 1; transition: opacity .28s .08s; pointer-events: auto; }
.ab-set h5 { margin: 0 0 16px; font-size: 15px; font-weight: 550; }
.ab-reg { display: grid; grid-template-columns: repeat(3, 112px); gap: 12px 12px; }
.ab-reg button { border: 0; background: none; padding: 0; text-align: left; font-size: 13px; cursor: default; }
.ab-reg i { display: block; width: 112px; height: 112px; border-radius: 12px; border: 1px solid var(--gray-100); margin-bottom: 8px; transition: border-color .15s; }
.ab-reg button:is(:hover, [data-hover]) i, .ab-reg button.on i { border-color: var(--gray-800); }
.ab-cal-h { text-align: center; font-weight: 550; font-size: 15px; margin-bottom: 14px; }
.ab-cal { display: grid; grid-template-columns: repeat(7, 44px); row-gap: 2px; }
.ab-cal span { height: 22px; text-align: center; font-size: 12px; color: var(--gray-500); font-weight: 550; }
.ab-cal button { height: 44px; border: 0; background: none; font-size: 13px; font-weight: 550; cursor: default; position: relative; border-radius: 0; }
.ab-cal button:disabled { color: var(--gray-250); text-decoration: line-through; cursor: default; }
.ab-cal button.rng { background: var(--gray-40); }
.ab-cal button.st, .ab-cal button.en { color: var(--gray-0); }
.ab-cal button.st::before, .ab-cal button.en::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gray-800); z-index: -1; }
.ab-cal button.st { background: linear-gradient(90deg, transparent 50%, var(--gray-40) 50%); }
.ab-cal button.en { background: linear-gradient(90deg, var(--gray-40) 50%, transparent 50%); }
.ab-cal button.st.en { background: none; }
.ab-cal button { z-index: 0; isolation: isolate; }
.ab-cal button:not(:disabled):not(.st):not(.en):is(:hover, [data-hover])::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gray-800); }
.ab-g { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--gray-60); width: 336px; }
.ab-g:last-child { border-bottom: 0; }
.ab-g b { display: block; font-size: 15px; font-weight: 550; }
.ab-g small { font-size: 13px; color: var(--gray-500); }
.ab-st { display: flex; align-items: center; gap: 14px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ab-st button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gray-250); background: var(--gray-0); color: var(--gray-500); font-size: 17px; line-height: 1; cursor: default; }
.ab-st button:disabled { opacity: .35; cursor: default; }
.ab-st output { min-width: 14px; text-align: center; }
.ab-cats { position: absolute; left: 0; right: 0; top: 80px; height: 80px; z-index: 10; background: var(--gray-0); }
.ab-cv { position: absolute; left: 28px; right: 28px; top: 0; bottom: 0; overflow: hidden; }
.ab-track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; }
.ab-cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 12px; margin-right: 34px; border: 0; background: none; font-size: 12px; font-weight: 550; color: var(--gray-500); cursor: default; transition: color .15s; }
.ab-cat:is(:hover, [data-hover]), .ab-cat.on { color: var(--gray-800); }
.ab-cat svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: opacity .15s, transform .25s cubic-bezier(.2,.9,.25,1); }
.ab-cat:is(:hover, [data-hover]) svg, .ab-cat.on svg { opacity: 1; }
.ab-cat:is(:hover, [data-hover]) svg { transform: translateY(-2px); }
.ab-und { position: absolute; bottom: 0; height: 2px; left: 0; width: 0; background: var(--gray-800); }
.ab-fade { position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ab-fade.l { left: 28px; background: linear-gradient(90deg, var(--gray-0) 40%, color-mix(in srgb, var(--gray-0) 0%, transparent)); }
.ab-fade.r { right: 28px; background: linear-gradient(270deg, var(--gray-0) 40%, color-mix(in srgb, var(--gray-0) 0%, transparent)); }
.ab-arr { position: absolute; top: 24px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gray-100); background: var(--gray-0); display: grid; place-items: center; cursor: default; opacity: 0; pointer-events: none; transition: opacity .2s, transform .15s; z-index: 2; }
.ab-arr:is(:hover, [data-hover]) { transform: scale(1.06); box-shadow: var(--e1); }
.ab-arr svg { width: 12px; height: 12px; fill: none; stroke: var(--gray-800); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-arr.l { left: 24px; } .ab-arr.r { right: 24px; }
.ab-fade.show, .ab-arr.show { opacity: 1; pointer-events: auto; }
.ab-grid { position: absolute; left: 28px; right: 28px; top: 182px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.ab-card i { display: block; aspect-ratio: 1 / .95; border-radius: 12px; }
.ab-card b { display: block; margin-top: 10px; font-size: 13px; font-weight: 550; }
.ab-card span { display: block; font-size: 13px; color: var(--gray-500); }
.ab-card em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; }
.ab-card em strong { font-weight: 550; }
@container (max-width: 700px) {
  .ab-right, .ab-tabs span:nth-child(2) { display: none; }
  .ab-small i:nth-of-type(2), .ab-small .mut { display: none; }
  .ab-big { grid-template-columns: 1fr 1fr 1.5fr; grid-template-rows: 64px 64px; height: 128px; border-radius: 12px; }
  .ab-big > .ab-seg[data-s="0"] { grid-column: 1 / -1; }
  .ab-div { display: none; }
  .ab-seg { padding-left: 18px; }
  .ab-seg4 { padding-right: 8px; }
  .ab-seg4 { padding-left: 16px; }
  .ab-grid { grid-template-columns: 1fr 1fr; }
  .ab-reg { grid-template-columns: repeat(3, 84px); } .ab-reg i { width: 84px; height: 84px; }
  .ab-cal { grid-template-columns: repeat(7, 38px); }
  .ab-g { width: 270px; }
}