/* Wordspark: the home, a list's page, the editor and sharing, on top of kit/kit.css (play.css has the activities).
   Flat and graphic, like the box's cards: a few clear colours (coral, sunflower, teal, cobalt, deep green, cream), big
   calm type, soft cards; motion is transforms and opacity only. */
:root { --ws: #EE8522; --coral: #F2765B; --sun: #F7C33F; --teal: #3AB3A7; --cobalt: #2A55C6; --deep: #1F6A4B; --cream: #F7EFDD; }
main { max-width: 1180px; }
.ws-h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ws-h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(20px, 2vw, 25px); font-weight: 900; letter-spacing: -.01em; }

/* ---------- home ---------- */
.ws-home { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); padding-bottom: 40px; }
.ws-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-top: clamp(4px, 2vw, 24px); }
.ws-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ws-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.ws-lead { margin: 0; max-width: 46ch; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); font-weight: 750; line-height: 1.5; }
.ws-hero-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ws-points { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.ws-points li { display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-items: baseline; font-size: 15px; font-weight: 700; color: var(--muted); }
.ws-points li::before { content: ""; grid-row: 1 / span 2; align-self: center; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--coral)); transform: rotate(45deg); }
.ws-points li:nth-child(2) { --c: var(--teal); } .ws-points li:nth-child(3) { --c: var(--cobalt); }
.ws-points b { color: var(--fg); font-weight: 900; }

/* the picture beside the words: a word card that turns between a word and its match, on a flat teal ground */
.ws-art { position: relative; aspect-ratio: 1 / .92; border-radius: 36px; background: var(--teal); overflow: hidden; isolation: isolate; }
.ws-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.18), transparent 60%); }
.ws-art-c { position: absolute; border-radius: 22px; }
.ws-art-c1 { left: 13%; top: 22%; width: 40%; height: 46%; background: var(--coral); transform: rotate(-11deg); animation: wsFloat 7s ease-in-out infinite; }
.ws-art-c3 { right: 10%; bottom: 12%; width: 30%; height: 30%; background: var(--cobalt); transform: rotate(9deg); animation: wsFloat 8s ease-in-out -2s infinite; }
.ws-art-c1::after, .ws-art-c3::after { content: ""; position: absolute; left: 16%; right: 30%; top: 22%; height: 9%; border-radius: 99px; background: var(--cream); opacity: .85; box-shadow: 0 2.2em 0 -.1em rgba(247,239,221,.6); }
.ws-art-card { position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 1.45; translate: -50% -50%; perspective: 900px; }
.ws-art-float { position: absolute; inset: 0; animation: wsFloat 6s ease-in-out -1s infinite; }
.ws-art-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.25,.4,1); }
.ws-art.is-back .ws-art-in { transform: rotateY(180deg); }
.ws-art-front, .ws-art-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; border-radius: 24px; background: var(--cream); color: #143E38; font-size: clamp(20px, 3.3vw, 40px); font-weight: 900; letter-spacing: -.01em; text-align: center; backface-visibility: hidden; box-shadow: 0 18px 30px -18px rgba(10,40,36,.6); }
.ws-art-back { transform: rotateY(180deg); background: var(--sun); }
.ws-art-spark { position: absolute; right: 9%; top: 8%; width: 22%; animation: wsSpin 16s linear infinite; }
.ws-art-tag { position: absolute; padding: .45em .9em; border-radius: 99px; background: rgba(247,239,221,.92); color: #143E38; font-size: clamp(11px, 1.2vw, 15px); font-weight: 900; white-space: nowrap; animation: wsFloat 7s ease-in-out infinite; }
.ws-art-t1 { left: 7%; bottom: 14%; animation-delay: -3s; } .ws-art-t2 { right: 8%; top: 40%; animation-delay: -5s; } .ws-art-t3 { left: 10%; top: 9%; animation-delay: -1.5s; }
@keyframes wsFloat { 50% { translate: 0 -6px; } }
@keyframes wsSpin { to { transform: rotate(360deg); } }

/* the shelves: my lists, the ready-made ones */
.ws-shelf { display: flex; flex-direction: column; gap: 14px; }
.ws-shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ws-shelf-note { margin: 0; color: var(--muted); font-size: 14.5px; font-weight: 750; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ws-lcard { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 18px 18px 16px; border-radius: 22px; background: var(--surface); color: var(--fg); text-decoration: none; box-shadow: var(--shadow); overflow: hidden; transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.ws-lcard::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: var(--c, var(--teal)); }
.ws-lcard:hover, .ws-lcard:focus-visible { transform: translateY(-3px); }
.ws-lcard b { font-size: 18px; font-weight: 900; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ws-lcard .ws-lcard-n { color: var(--muted); font-size: 13.5px; font-weight: 800; }
.ws-lcard .ws-lcard-w { margin-top: auto; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-lcard-dot { position: absolute; right: 14px; top: 18px; width: 34px; height: 34px; border-radius: 11px; background: var(--c, var(--teal)); opacity: .18; }
.ws-lcard-new { align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--border-strong); background: transparent; box-shadow: none; color: var(--muted); font: inherit; font-weight: 900; cursor: pointer; }
.ws-lcard-new::before { display: none; }
.ws-lcard-new svg { width: 28px; height: 28px; }

/* ---------- a list's page ---------- */
.ws-list { display: flex; flex-direction: column; gap: 22px; padding-bottom: 48px; }
.ws-got { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--teal) 16%, var(--surface)); }
.ws-got p { flex: 1 1 260px; margin: 0; font-weight: 750; }
.ws-got-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; flex: none; }
.ws-got-ico svg { width: 20px; height: 20px; }
.ws-list-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; }
.ws-back { justify-self: start; }
.ws-list-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-list-meta { margin: 0; color: var(--muted); font-size: 15px; font-weight: 800; }
.ws-list-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ws-list-acts svg, .ws-back svg { width: 18px; height: 18px; }
.ws-board-wrap { position: relative; }
.ws-board-ico svg { display: block; width: 22px; height: 22px; }
.ws-board-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; gap: 2px; width: min(340px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); animation: ddIn .16s ease-out; }
.ws-board-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 16px; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ws-board-item:hover, .ws-board-item:focus-visible { background: var(--hover); }
.ws-board-item-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #DCEBFA; color: #2A55C6; }
.ws-board-item-ico svg { width: 22px; height: 22px; }
.ws-board-item b { display: block; font-size: 15px; font-weight: 900; }
.ws-board-item small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.ws-words { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-words.is-short > .ws-chip:nth-child(n + 9) { display: none; }
.ws-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 0 var(--border); font-size: 14.5px; font-weight: 850; }
.ws-chip i { color: var(--muted); font-style: normal; font-weight: 700; }
.ws-chip img { align-self: center; width: 22px; height: 22px; margin: -3px 0 -3px -4px; }
.ws-more { padding: 6px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--link); font: inherit; font-size: 14.5px; font-weight: 900; cursor: pointer; }
.ws-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ws-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ws-theme-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 12px 5px 5px; border: 0; border-radius: 22px; background: var(--surface-2); color: var(--fg); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.ws-theme-btn:hover { background: var(--hover); }
.ws-theme-sw { width: 54px; height: 34px; border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ws-theme-btn svg { width: 16px; height: 16px; color: var(--muted); }
.ws-new { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--fox); color: var(--on-fox); font-size: 11.5px; font-style: normal; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.ws-act.is-soon { opacity: .62; }
.ws-act.is-soon .ws-act-txt span { color: var(--muted); }
.ws-dir-lbl { color: var(--muted); font-size: 14px; font-weight: 900; }
.ws-dir-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; border-radius: 22px; background: var(--surface-2); }
.ws-dir-seg button { padding: 7px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.ws-dir-seg button[aria-checked="true"] { background: var(--surface-3); box-shadow: 0 2px 6px rgba(20,48,44,.14); }
.ws-cat { display: flex; flex-direction: column; gap: 14px; }
.ws-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ws-cat-head p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 750; }
.ws-cat-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--fg); color: var(--surface); }
.ws-cat-mark svg { width: 20px; height: 20px; }
.ws-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ws-act { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--surface); color: var(--fg); text-decoration: none; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.ws-act:hover, .ws-act:focus-visible { transform: translateY(-3px); }
.ws-act-ico svg { display: block; width: 58px; height: 58px; }
.ws-act-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-act-txt b { font-size: 17px; font-weight: 900; letter-spacing: -.005em; }
.ws-act-txt span { color: var(--muted); font-size: 13.5px; font-weight: 750; line-height: 1.35; }
.ws-act.is-off { opacity: .5; pointer-events: none; box-shadow: none; }
.ws-act.is-off .ws-act-txt span { color: var(--fg); }
#catBoard .ws-act-ico svg { width: 58px; height: 58px; }

/* ---------- the editor ---------- */
.ws-edit { display: flex; flex-direction: column; gap: 18px; max-width: 900px; margin: 0 auto; padding-bottom: 60px; }
.ws-ed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ws-ed-bar-r { display: flex; gap: 8px; }
.ws-ed-title { width: 100%; padding: 10px 0 8px; border: 0; border-bottom: 2px solid var(--border-strong); background: transparent; color: var(--fg); font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); outline: none; }
.ws-ed-title:focus { border-bottom-color: var(--fox); }
.ws-ed-title::placeholder { color: var(--muted); opacity: .6; }
.ws-ed-langs { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ws-ed-langs label { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 1 1 170px; }
.ws-ed-langs select { width: 100%; }
.ws-swap { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface-3); color: var(--fg); cursor: pointer; flex: none; }
.ws-swap svg { width: 20px; height: 20px; }
.ws-paste { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 2px dashed var(--border-strong); border-radius: 22px; background: color-mix(in srgb, var(--sun) 10%, transparent); }
.ws-paste-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ws-paste-head b { font-size: 16px; font-weight: 900; }
.ws-paste-head span { color: var(--muted); font-size: 13.5px; font-weight: 750; }
.ws-paste textarea { min-height: 120px; resize: vertical; font-size: 15px; line-height: 1.5; }
.ws-paste-found { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 800; }
.ws-paste-found .ws-found-n { color: var(--deep); }
:root[data-theme="dark"] .ws-paste-found .ws-found-n { color: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-paste-found .ws-found-n { color: var(--teal); } }
.ws-paste-prev { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: auto; }
.ws-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: row; }
.ws-rows-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ws-rows-head, .ws-row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.ws-rows-head { color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.ws-rows-head span:first-child { grid-column: 3; }
.ws-row { counter-increment: row; }
.ws-row::before { content: counter(row); color: var(--muted); font-size: 13px; font-weight: 900; text-align: right; }
.ws-row .field { min-height: 44px; }
/* a row's picture, and the panel to choose it */
.ws-pic { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 2px solid var(--border); border-radius: 14px; background: var(--surface-3); color: var(--muted); cursor: pointer; transition: transform .15s; }
.ws-pic:hover { border-color: var(--border-strong); color: var(--fg); }
.ws-pic:active { transform: scale(.92); }
.ws-pic svg { width: 22px; height: 22px; opacity: .6; }
.ws-pic img { display: block; width: 34px; height: 34px; }
.ws-row[data-img]:not([data-img=""]) .ws-pic { border-color: transparent; background: var(--surface-2); }
.ws-picker { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 24px)); max-height: min(520px, calc(100dvh - 24px)); padding: 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); overflow: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .16s, transform .22s cubic-bezier(.2,.9,.3,1.2); }
.ws-picker.is-in { opacity: 1; transform: none; }
.ws-picker.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 72dvh; border-radius: 24px 24px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); transform: translateY(30px); }
.ws-picker.is-sheet.is-in { transform: none; }
.ws-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-picker-head b { overflow: hidden; font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ws-picker-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--hover); color: var(--fg); cursor: pointer; }
.ws-picker-x svg { width: 16px; height: 16px; }
.ws-picker-lbl { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ws-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.ws-picker-grid:empty { display: none; }
.ws-picker-pic { display: grid; place-items: center; aspect-ratio: 1; padding: 7px; border: 2px solid transparent; border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: transform .12s; }
.ws-picker-pic:hover { transform: scale(1.07); }
.ws-picker-pic.is-on { border-color: var(--fox); background: color-mix(in srgb, var(--fox) 14%, var(--surface)); }
.ws-picker-pic img { display: block; width: 100%; height: 100%; }
.ws-picker-find { position: relative; display: block; }
.ws-picker-find svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.ws-picker-find input { min-height: 44px; padding: 8px 14px 8px 40px; }
.ws-picker-none { margin: 0; color: var(--muted); font-size: 14px; font-weight: 750; }
.ws-picker-foot { display: flex; justify-content: flex-end; }
.ws-picker-foot:not(:has(> :not([hidden]))) { display: none; }
.ws-row-del { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.ws-row-del:hover { background: var(--hover); color: var(--fg); }
.ws-row-del svg { width: 18px; height: 18px; }
.ws-ed-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ws-ed-count { color: var(--muted); font-weight: 850; }
.ws-ed-err { margin: 0; color: var(--danger); font-weight: 800; }
.ws-ed-foot-end { justify-content: flex-end; }
.ws-paste-open { align-self: flex-start; }
.ws-chip-more { color: var(--muted); }

/* ---------- sharing ---------- */
.ws-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-pop); }
.ws-dialog::backdrop { background: var(--scrim); }
.ws-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 28px; }
.ws-share-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ws-share-d { margin: 0; color: var(--muted); font-weight: 750; line-height: 1.5; }
.ws-share-link { display: flex; gap: 8px; margin-top: 4px; }
.ws-share-link input { flex: 1; min-width: 0; font-size: 13.5px; }
.ws-share-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.ws-qr { width: 220px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #FFFCF4; }
.ws-qr svg { display: block; width: 100%; height: 100%; }
.ws-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hover); color: var(--fg); cursor: pointer; }
.ws-close svg { width: 20px; height: 20px; }
.ws-qrfull { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: var(--bg); cursor: zoom-out; }
.ws-qrfull-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ws-qrfull-t { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 4vw, 52px); text-align: center; }
.ws-qr-big { width: min(70vh, 86vw); border-radius: 24px; }
.ws-qrfull-d { margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 22px); font-weight: 800; }

@media (max-width: 860px) {
  .ws-hero { grid-template-columns: minmax(0, 1fr); }
  .ws-art { order: -1; max-width: 520px; width: 100%; aspect-ratio: 1.5; border-radius: 28px; }
  .ws-list-head { grid-template-columns: minmax(0, 1fr); }
  .ws-list-acts { justify-content: flex-start; }
  .ws-share { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .ws-share-qr { margin-top: 0; }
  .ws-share-qr { order: -1; }
  .ws-qr { width: 180px; }
}
@media (max-width: 560px) {
  .ws-rows-head { display: none; }
  .ws-row { grid-template-columns: 46px minmax(0, 1fr) 36px; grid-template-rows: auto auto; row-gap: 4px; padding: 8px 10px; border-radius: 16px; background: var(--surface); }
  .ws-row::before { display: none; }
  .ws-pic { grid-column: 1; grid-row: 1 / span 2; }
  .ws-row .field[data-side="a"] { grid-column: 2; grid-row: 1; }
  .ws-row .field[data-side="b"] { grid-column: 2; grid-row: 2; }
  .ws-row-del { grid-column: 3; grid-row: 1 / span 2; }
  .ws-acts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ws-art *, .ws-art-in { animation: none !important; transition: none !important; } }
@media (max-width: 560px) { .ws-board-pop { left: 0; right: auto; } }