/* Lenci: the try page's tool (/ar/try, /en/try; markup from v3/seo/try.js, behaviour in v3/try.js). Linked after marketing.css on that page
   only, under the page's own CSP (style-src 'self': no inline style anywhere; v3/try.js sets sizes through the CSSOM). The tool is a small
   studio and keeps the Studio's dark "photo mode" in both colour schemes: canvas #0a0a0f, panels #12121a with luminous borders, one energy
   gradient (#8b5cf6 → #d946ef → #22d3ee) for the active state and the main button. Phone first (390 px), logical properties only (Arabic
   reads right to left with the same rules), 44 px touch targets, a visible focus ring, no motion with prefers-reduced-motion.
   On a phone (below 960 px) the blocks are one column in this order: the preview (a band of the example picture at first, then the live
   canvas, with the progress over it while the tool works), the size and light sliders (right under the picture they change), the
   square/story switch and the help line, the status line, the product picker, the scenes, the picture's buttons and the next step.
   From 960 px the preview sits beside the controls, sticky. */
.try {
  --t-bg: #0a0a0f; --t-panel: #12121a; --t-panel-2: #191926; --t-line: rgba(255, 255, 255, .1); --t-line-2: rgba(255, 255, 255, .2);
  --t-fg: #f4f4f8; --t-muted: #b8b8cc; --t-accent: #8b5cf6; --t-accent-2: #d946ef; --t-accent-3: #22d3ee; --t-ok: #6ee7b7; --t-err: #fca5a5;
  --t-grad: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #22d3ee 100%);
  --t-radius: 18px;
  margin-block: 4px 36px; padding: 12px; border-radius: 22px; color: var(--t-fg); color-scheme: dark;
  background: radial-gradient(700px 360px at 85% -10%, rgba(139, 92, 246, .22), transparent 65%), radial-gradient(600px 360px at -10% 110%, rgba(34, 211, 238, .1), transparent 60%), var(--t-bg);
  border: 1px solid var(--t-line-2); box-shadow: 0 24px 60px rgba(10, 10, 15, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.try a { color: #c8b6ff; }
.try .mk-btn { color: #fff; } .try .mk-btn:hover { color: #fff; }
.try button.mk-btn { border: 0; font: inherit; font-weight: 650; cursor: pointer; }
.try button.mk-btn.mk-ghost { border: 1px solid var(--t-line-2); }
.try button:disabled { cursor: progress; opacity: .75; }
.try :focus-visible { outline: 3px solid var(--t-accent-3); outline-offset: 2px; }
.try [hidden] { display: none !important; } /* the blocks below set display; hidden always wins */
.mk-tool .mk-hero-tool { padding-block: 14px 6px; }
.mk-tool .mk-hero-tool h1 { margin-block-end: 8px; }
.mk-tool .mk-hero-tool .mk-lead { margin-block-end: 4px; }
@media (min-width: 880px) { .mk-tool .mk-hero-tool { grid-template-columns: minmax(0, 1fr); max-inline-size: 920px; padding-block: 26px 10px; } .mk-tool .mk-hero-tool h1 { font-size: clamp(32px, 3.6vw, 46px); } }
.try-shell { display: flex; flex-direction: column; gap: 14px; }
.try-view, .try-side { min-inline-size: 0; }
.try-side { display: flex; flex-direction: column; gap: 14px; }
.try[data-state="ready"] .try-pick { display: none; }
.try.try-picking[data-state="ready"] .try-pick { display: block; }

/* ---- an app's own browser: one line with the way to the phone's browser and the link to copy (v3/inapp.js); the tool keeps the first screen */
.try-inapp { margin-block-end: 10px; padding-block: 6px; padding-inline: 12px 6px; border-radius: 14px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .45); font-size: 13px; line-height: 1.45; }
.try-inapp p { margin: 0; }
.try-inapp-line { display: flex; align-items: center; gap: 8px; }
.try-inapp-how { flex: 1 1 auto; min-inline-size: 0; color: var(--t-fg); }
.try-inapp-line .mk-btn { flex: 0 0 auto; min-block-size: 44px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; }
.try-inapp-status { margin: 6px 0 0; color: var(--t-ok); overflow-wrap: anywhere; }
.try-inapp-status:empty { display: none; }

/* ---- the preview */
.try-frame { position: relative; overflow: hidden; border-radius: var(--t-radius); background: #141416; border: 1px solid var(--t-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.try-frame[data-format="example"] { aspect-ratio: 1 / 1; }
.try-frame[data-format="square"] { aspect-ratio: 1 / 1; }
.try-frame[data-format="story"] { aspect-ratio: 9 / 16; inline-size: min(100%, calc(74vh * 9 / 16)); inline-size: min(100%, calc(74svh * 9 / 16)); margin-inline: auto; } /* the width follows the height: the canvas is never squashed */
.try-frame picture { display: contents; } /* the phone's band or the square example: the img fills the frame either way */
.try-example, .try-canvas { display: block; inline-size: 100%; block-size: 100%; }
.try-example { object-fit: cover; object-position: 50% 62%; }
.try-example-chip { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(10, 10, 15, .72); border: 1px solid var(--t-line-2); font-size: 12.5px; font-weight: 650; }
.try[data-state="ready"] .try-example-chip { display: none; }
/* the visitor's own photo while the page asks and works on it (the overlay above dims it): the example, its chip and its caption step aside */
.try-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; background: #141416; }
.try.try-photo-on .try-example, .try.try-photo-on .try-example-chip, .try.try-photo-on .try-example-cap { display: none; }
.try.try-photo-on .try-busy { background: rgba(10, 10, 15, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* her photo stays recognisable under the words */
/* a touch moves the product only from the product itself (v3/try.js onProduct); a vertical swipe anywhere else scrolls the page */
.try-canvas { touch-action: pan-y pinch-zoom; cursor: grab; }
.try-dragging .try-canvas { cursor: grabbing; }
.try-canvas:focus-visible { outline-offset: -3px; }
.try-example-cap, .try-help { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: var(--t-muted); }
/* the help line: the finger's sentence on a touch screen (the keyboard's stays for screen readers), the keyboard's elsewhere */
.try-help-touch { display: none; }
@media (pointer: coarse) { .try-help-touch { display: inline; } .try-help-keys { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.try-busy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center;
  background: rgba(10, 10, 15, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 15px; line-height: 1.55; }
.try-busy-text { max-inline-size: 30ch; }
.try-spin { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-block-start-color: var(--t-accent-2); animation: try-spin .9s linear infinite; }
@keyframes try-spin { to { transform: rotate(360deg); } }
.try-bar { position: relative; display: block; inline-size: min(260px, 80%); block-size: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.try-bar-fill { display: block; inline-size: 100%; block-size: 100%; background: var(--t-grad); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; }
[dir="rtl"] .try-bar-fill { transform-origin: right center; }
/* before the first bytes are counted (the model arrives in large chunks): a bar that moves, not a bar stuck at zero */
.try-bar[data-wait] .try-bar-fill { inline-size: 40%; transform: none; animation: try-wait 1.4s ease-in-out infinite; }
@keyframes try-wait { from { margin-inline-start: -40%; } to { margin-inline-start: 100%; } }
.try-consent { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.try-consent .mk-btn { min-block-size: 44px; padding: 8px 16px; }
.try-cancel { min-block-size: 44px; }
/* a picked place still on its way: a small chip on the preview (the downloads wait for it, v3/try.js drawable) */
.try-frame.try-loading::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 1; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-block-start-color: var(--t-accent-3); animation: try-spin .9s linear infinite; }
.try-formats { display: inline-flex; gap: 4px; margin-block-start: 10px; padding: 4px; border-radius: 999px; background: var(--t-panel); border: 1px solid var(--t-line); }
.try-fmt { min-block-size: 40px; min-inline-size: 72px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--t-fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.try-fmt[aria-checked="true"] { background: var(--t-grad); color: #fff; }

/* ---- blocks */
.try-block { padding: 14px; border-radius: var(--t-radius); background: var(--t-panel); border: 1px solid var(--t-line); }
.try-h { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 700; letter-spacing: 0; }
html[lang="en"] .try-h { letter-spacing: -.005em; }

/* 1. the product */
.try-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-block-size: 168px; padding: 20px 16px; text-align: center; cursor: pointer;
  border-radius: 16px; border: 2px dashed rgba(200, 182, 255, .45); background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(217, 70, 239, .06)); transition: border-color .2s ease, background-color .2s ease; }
.try-drop:hover, .try-drop.over { border-color: var(--t-accent-3); background-color: rgba(34, 211, 238, .06); }
.try-drop:focus-within { outline: 3px solid var(--t-accent-3); outline-offset: 2px; }
.try-drop-icon { inline-size: 52px; block-size: 52px; border-radius: 16px; background: var(--t-grad); box-shadow: 0 10px 26px rgba(139, 92, 246, .45); position: relative; }
.try-drop-icon::before { content: ""; position: absolute; inset: 14px 12px 16px; border: 3px solid #fff; border-radius: 6px; }
.try-drop-icon::after { content: ""; position: absolute; inline-size: 10px; block-size: 10px; inset-block-start: 21px; inset-inline-start: 21px; border-radius: 50%; border: 3px solid #fff; box-sizing: border-box; }
.try-drop-title { font-size: 20px; line-height: 1.35; font-weight: 750; }
.try-drop-hint { color: var(--t-muted); font-size: 14.5px; line-height: 1.5; }
.try-drop-types { color: var(--t-muted); font-size: 12.5px; letter-spacing: .04em; }
.try-drop-size { color: #e9d5ff; font-size: 12.5px; line-height: 1.45; }
.try-file { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.try-or { margin: 14px 2px 8px; color: var(--t-muted); font-size: 14.5px; font-weight: 600; }
.try-samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.try-sample { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; inline-size: 100%; min-block-size: 44px; padding: 8px 6px 10px; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-panel-2); color: var(--t-fg); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.try-sample img { inline-size: 100%; max-inline-size: 96px; aspect-ratio: 1; object-fit: contain; }
.try-sample:hover { border-color: var(--t-accent); }
/* the sample that was tapped, while its picture is being prepared */
.try-sample[aria-busy="true"] { border-color: var(--t-accent-2); box-shadow: 0 0 0 3px rgba(217, 70, 239, .35); }
.try-sample[aria-busy="true"]::after { content: ""; position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-block-start-color: var(--t-accent-2); animation: try-spin .9s linear infinite; }
.try-privacy { margin: 12px 2px 0; color: var(--t-muted); font-size: 13.5px; line-height: 1.55; padding-inline-start: 22px; position: relative; }
.try-privacy::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .38em; inline-size: 12px; block-size: 14px; border-radius: 3px 3px 6px 6px; background: var(--t-ok); opacity: .85; }

/* the status lines (role=status): under the preview, under the picture's buttons, under the sign-up button */
.try-status { margin: 0; min-block-size: 0; font-size: 14.5px; line-height: 1.55; color: var(--t-muted); }
.try-status:empty { display: none; }
/* while the overlay on the preview works, its words are on screen there: the main status line keeps them for screen readers only */
.try-working #try-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.try-status[data-kind="ok"] { color: var(--t-ok); }
.try-status[data-kind="err"] { color: var(--t-err); }
.try-export-status, .try-cta-status { margin-block-start: 10px; }

/* 2. the scenes: a strip that scrolls inside itself on a phone (never the page), a grid on a wide screen */
.try-scene-list { list-style: none; margin: 0 -14px; padding: 2px 14px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.try-scene-list li { scroll-snap-align: start; }
.try-scene { display: flex; flex-direction: column; gap: 6px; inline-size: 100%; padding: 0; border: 0; background: none; color: var(--t-fg); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: start; cursor: pointer; }
.try-scene img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--t-line); transition: border-color .15s ease; }
.try-scene[aria-pressed="true"] img { border-color: var(--t-accent-2); box-shadow: 0 0 0 3px rgba(217, 70, 239, .35); }
.try-scene[aria-pressed="true"] span { color: #fff; }
.try-scene span { padding-inline: 2px; color: var(--t-muted); }
.try-scene:hover img { border-color: var(--t-accent); }
/* the studio sets, after the Saudi places, under their own small label */
.try-sub { margin: 12px 0 8px; color: var(--t-muted); font-size: 14.5px; font-weight: 650; line-height: 1.4; }

/* 3. the touches */
.try-range { display: grid; gap: 4px; margin-block-end: 12px; }
.try-range label { font-size: 14.5px; font-weight: 600; }
.try-range input[type="range"] { inline-size: 100%; min-block-size: 36px; accent-color: var(--t-accent-2); }
/* the light slider runs between two lights, it is not an amount: a warm-to-cool track with a neutral middle and no fill, from its start (the
   warm end, on the right in Arabic) to its end; the size slider keeps its accent fill (finding lenci-walk2-14) */
.try-range input#try-light { --t-light-track: linear-gradient(90deg, #ff8a1e 0%, #f6c27a 30%, #ece6dc 46%, #ffffff 50%, #dfe7f6 54%, #8fb4ff 70%, #3b7bff 100%);
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
[dir="rtl"] .try-range input#try-light { --t-light-track: linear-gradient(270deg, #ff8a1e 0%, #f6c27a 30%, #ece6dc 46%, #ffffff 50%, #dfe7f6 54%, #8fb4ff 70%, #3b7bff 100%); }
.try-range input#try-light::-webkit-slider-runnable-track { block-size: 10px; border-radius: 999px; background: var(--t-light-track); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.try-range input#try-light::-moz-range-track { block-size: 10px; border-radius: 999px; background: var(--t-light-track); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.try-range input#try-light::-moz-range-progress { background: transparent; }
.try-range input#try-light::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 26px; block-size: 26px; margin-block-start: -8px; border-radius: 50%; background: #fff; border: 2px solid #0a0a0f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 8px rgba(0, 0, 0, .5); }
.try-range input#try-light::-moz-range-thumb { inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; border: 2px solid #0a0a0f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 8px rgba(0, 0, 0, .5); }
.try-ends { display: flex; justify-content: space-between; color: var(--t-muted); font-size: 12.5px; }
.try-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.try-link { min-block-size: 44px; padding: 6px 2px; border: 0; background: none; color: #c8b6ff; font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.try-link:hover { color: #f0abfc; }

/* 4. the picture */
.try-actions { display: grid; gap: 8px; }
.try-actions .mk-btn { inline-size: 100%; }
.try .try-dl { flex-direction: column; gap: 0; line-height: 1.3; padding-block: 8px; }
.try-dl-size { font-size: 12.5px; font-weight: 500; color: var(--t-muted); letter-spacing: .02em; }
.try .mk-btn.mk-ghost { color: var(--t-fg); border-color: var(--t-line-2); }
.try .mk-btn.mk-ghost:hover { border-color: var(--t-accent); }
.try .mk-btn[aria-busy="true"] { cursor: progress; }
.try-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.try .try-soc { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--t-line-2); color: var(--t-fg); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.try-soc::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #25d366; }
.try-x::before { background: #f4f4f8; }
.try-soc:hover { border-color: var(--t-accent); }
/* the picture to long-press inside an app's browser (where a download does nothing) */
.try-save { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 9, .82); }
.try-save-box { inline-size: min(100%, 420px); max-block-size: 100%; overflow: auto; padding: 16px; border-radius: var(--t-radius); background: var(--t-panel); border: 1px solid var(--t-line-2); text-align: center; }
.try-save-img { display: block; inline-size: 100%; block-size: auto; max-block-size: 60vh; object-fit: contain; margin: 0 auto 12px; border-radius: 12px; -webkit-touch-callout: default; }
.try-save-how { margin: 0 0 10px; color: var(--t-muted); font-size: 14px; line-height: 1.55; }
.try-save .mk-btn { min-inline-size: 140px; }

/* 5. the next step */
.try-cta { position: relative; overflow: hidden; border-color: rgba(217, 70, 239, .45); background: radial-gradient(420px 220px at 100% 0%, rgba(217, 70, 239, .22), transparent 70%), radial-gradient(380px 220px at 0% 100%, rgba(34, 211, 238, .14), transparent 70%), var(--t-panel-2); }
.try-cta-title { margin: 0 0 6px; font-size: 21px; line-height: 1.4; font-weight: 780; }
.try-cta-sample { margin: 6px 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .4); }
.try-cta-sample p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.try-cta-own { min-block-size: 44px; }
.try-cta-free { margin: 0 0 4px; font-size: 17px; font-weight: 700; background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.try-cta-note, .try-cta-hint { margin: 0 0 10px; color: var(--t-muted); font-size: 13.5px; line-height: 1.55; }
.try-cta-go-row { margin: 12px 0 8px; }
.try-go { inline-size: 100%; min-block-size: 52px; font-size: 17px; }
.try-open-row { margin: 4px 0 0; font-size: 14.5px; }
.try-noscript { margin: 0; padding: 14px; color: var(--t-muted); }

/* ---- a phone: one column, the preview first; the sliders right under the picture they change; the example picture on the first screen */
@media (max-width: 959px) {
  /* one column in the order of use: the preview, its size and light sliders right under it (with a slider under the thumb the picture
     stays in view: review finding lenci-conversion-6), the square/story switch and the help line, the status line, then the product picker,
     the scenes, the picture's buttons and the next step (the preview's and the side's blocks are the column's own items) */
  .try-side, .try-view { display: contents; }
  .try-frame { order: 0; } .try-example-cap { order: 1; } .try-scenes { order: 2; } .try-adjust { order: 1; } .try-formats { order: 3; } .try-help { order: 4; } #try-status { order: 5; }
  .try-pick { order: 6; } .try-export { order: 8; } .try-cta { order: 9; }
  .try-frame[data-format="square"] { inline-size: min(100%, 45svh); margin-inline: auto; }
  /* The picture, sliders and one compact strip fit together on a phone; both scene groups retain accessible labels. */
  .try-scenes { display: flex; gap: 8px; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .try-scenes .try-h, .try-scenes .try-sub { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .try-scenes .try-scene-list { display: flex; flex: 0 0 auto; gap: 8px; margin: 0; padding: 3px; overflow: visible; }
  .try-scenes .try-scene-list li { flex: 0 0 80px; inline-size: 80px; }
  .try-scenes .try-scene { font-size: 11.5px; gap: 4px; }
  .try-scenes .try-scene img { inline-size: 76px; block-size: 76px; aspect-ratio: 1; border-radius: 10px; }
  .try-scenes .try-scene span { min-block-size: 32px; }
  .try-formats { align-self: center; margin: 0; } .try-help, .try-example-cap { margin: 0 2px; }
  /* the first screen holds a result and both ways to start (review finding lenci-conversion-14): a shorter lead, a short band of the
     example (a picture this tool made) above a compact drop zone (its icon beside the words), and the three samples in full */
  .mk-tool .mk-hero-tool { padding-block: 8px 2px; }
  /* a tool page's breadcrumb stays for screen readers (and in its JSON-LD); the first screen keeps the tool (finding lenci-walk1-03) */
  .mk-tool .mk-crumbs { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mk-tool .mk-hero-tool h1 { margin-block-end: 6px; }
  .mk-tool .mk-hero-tool .mk-lead { font-size: 15.5px; line-height: 1.55; }
  .try { margin-block-start: 0; }
  .try[data-state="start"] .try-frame[data-format="example"] { aspect-ratio: 16 / 6; }
  .try:not([data-state="ready"]) .try-example-cap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .try-pick { padding: 10px; }
  .try-drop { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; justify-items: start; text-align: start; min-block-size: 0; padding: 12px 10px; }
  .try-drop-icon { grid-row: 1 / span 3; inline-size: 40px; block-size: 40px; border-radius: 13px; }
  .try-drop-icon::before { inset: 10px 9px 12px; border-width: 2.5px; }
  .try-drop-icon::after { inline-size: 8px; block-size: 8px; inset-block-start: 15px; inset-inline-start: 16px; border-width: 2.5px; }
  .try-drop-title { font-size: 17px; }
  .try-drop-hint { font-size: 14px; line-height: 1.4; }
  .try-drop-types { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .try-or { margin-block: 10px 6px; }
  .try-sample { padding: 6px 4px 8px; font-size: 13.5px; }
  .try-sample img { max-inline-size: 64px; }
  /* the story preview leaves room under it for the sliders */
  .try-frame[data-format="story"] { inline-size: min(100%, calc(56vh * 9 / 16)); inline-size: min(100%, calc(56svh * 9 / 16)); }
  .try-adjust { padding: 8px 12px 2px; }
  .try-adjust .try-h { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* a slider and its label on one line */
  .try-range { grid-template-columns: 4.8em minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 0; margin-block-end: 2px; }
  .try-range input[type="range"] { min-block-size: 40px; }
  .try-ends { grid-column: 2; margin-block-start: -6px; }
}

.try-cta-browser { margin-block: 12px; padding: 12px; border-radius: 12px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .4); }
.try-cta-browser p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.try-cta-browser .mk-btn { inline-size: 100%; min-block-size: 44px; white-space: normal; }

/* ---- wide screens: the preview and the controls side by side (the preview at the start side, sticky while the controls scroll) */
@media (min-width: 640px) {
  .try { padding: 16px; }
  .try-scene-list { grid-auto-columns: 28%; }
  .try-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .try-actions .try-share { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .try { padding: 20px; margin-block-start: 8px; }
  .try-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .try-view { position: sticky; inset-block-start: 16px; }
  .try-frame[data-format="story"] { inline-size: min(100%, calc((100vh - 140px) * 9 / 16)); }
  /* three columns: the six Saudi places fill two rows, the two studio sets sit on their own row (finding lenci-walk2-15) */
  .try-scene-list { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .try-scene img { aspect-ratio: 1 / 1; }
  .try-drop { min-block-size: 210px; }
}

@media (max-width: 959px) and (max-height: 750px) {
  .mk-tool .mk-hero-tool h1 { font-size: 25px; line-height: 1.25; }
  .try-shell { gap: 10px; }
  .try-pick { padding: 8px; }
  .try-drop { padding-block: 8px; }
  .try-sample img { max-inline-size: 52px; }
  .mk-tool .mk-hero-tool .mk-lead { font-size: 14px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .try *, .try *::before, .try *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .try-spin { border-block-start-color: var(--t-accent-2); }
  .try-bar[data-wait] .try-bar-fill { inline-size: 100%; margin: 0; opacity: .45; }
}