:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202838;background:#f7f8fb}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:#f7f8fb}
.ex-header{position:sticky;top:0;z-index:20;border-bottom:1px solid #e8ecf3;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ex-header-inner{max-width:1200px;margin:auto;padding:13px 20px;min-height:66px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ex-brand{display:inline-flex;align-items:center;gap:10px;color:#182138;text-decoration:none;font-size:14px;min-width:0}
.ex-brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-back{color:#5d69e8;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap;border:1px solid #e5e9f5;background:#fff;border-radius:11px;padding:10px 13px}
.ex-main{max-width:1200px;padding:32px 20px 56px;margin:auto}
.ex-heading{margin-bottom:22px}
.ex-eyebrow{font-size:10px;letter-spacing:.17em;color:#8190ad;font-weight:900}
.ex-heading h1{font-size:clamp(25px,3.5vw,38px);letter-spacing:-.04em;margin:9px 0}
.ex-heading p{font-size:13px;line-height:1.5;color:#7a8494;margin:0}
.ex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.ex-item{min-width:0}
.ex-card{
  --split:50%;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:18px;border:1px solid #e0e5ed;
  background:#e8ecf3;box-shadow:0 8px 28px rgba(22,36,61,.05);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ex-before,.ex-after{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.ex-before{background:linear-gradient(145deg,#e5eaf2,#edf0f5)}
.ex-after{background:linear-gradient(135deg,#eef0f7,#dde5f0);clip-path:inset(0 0 0 var(--split))}
.ex-card img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.ex-label{
  position:absolute;z-index:4;top:11px;color:#fff;background:rgba(18,28,45,.62);
  font-size:11px;font-weight:850;border-radius:999px;padding:6px 11px;
  pointer-events:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)
}
.ex-label.before{left:11px}.ex-label.after{right:11px}
.ex-divider{pointer-events:none;position:absolute;z-index:5;left:var(--split);top:0;bottom:0;width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 0 1px rgba(20,30,50,.06)}
.ex-divider span{
  width:36px;height:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;color:#26324a;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 5px 18px rgba(18,29,48,.22)
}
.ex-divider svg{width:24px;height:14px;display:block}
.ex-card input[type=range]{position:absolute;inset:0;z-index:6;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.ex-item-label{text-align:center;color:#8b95a6;font-size:11px;font-weight:700;padding-top:9px}
.ex-status{margin:24px auto;text-align:center;color:#8c96a5;font-size:13px;min-height:24px}
.ex-footer{padding:24px 16px;text-align:center;border-top:1px solid #e5e9f0;color:#a2aab5;font-size:11px;background:#fff}
@media(max-width:1000px){.ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){
 .ex-header-inner{padding:11px 14px;min-height:59px}
 .ex-brand{font-size:12px}
 .ex-back{padding:9px 10px;font-size:11px}
 .ex-main{padding:22px 12px 42px}.ex-heading{margin:1px 2px 18px}
 .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .ex-card{border-radius:15px}.ex-label{font-size:9px;padding:5px 8px;top:9px}
 .ex-label.before{left:8px}.ex-label.after{right:8px}
 .ex-divider span{width:33px;height:33px}
}
@media(max-width:340px){.ex-grid{gap:8px}.ex-brand b{font-size:11px}.ex-back{font-size:10px}}


/* ALL DEVICES — standardize editable form text to 16px, including future
   dynamically inserted fields. Prevents Safari focus magnification without
   restricting pinch-zoom, resizing the surrounding UI or affecting sliders.
   OTP digits already use a larger text size and are intentionally excluded. */
input[type="text"]:not([data-auth-digit]),
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]):not([data-auth-digit]),
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
[role="textbox"]:not(input):not(textarea) {
  font-size:16px!important;
}


/* EXAMPLES HANDLE v3 — PC: drag the visible circular knob immediately.
   Keep mobile photo gestures and the keyboard-operable input unchanged. */
@media (hover:hover) and (pointer:fine) {
  .ex-card input[type=range]{pointer-events:none}
  .ex-divider{z-index:7}
  .ex-divider span{
    pointer-events:auto;
    cursor:grab;
    touch-action:none;
  }
  .ex-divider span.is-dragging{cursor:grabbing}
}

/* COM mobile-readable localized legal links in gallery. */
.ex-footer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:16px;row-gap:10px;line-height:1.6}
.ex-footer a{display:inline-block;max-width:100%;white-space:normal}
@media(max-width:460px){
 .ex-footer{justify-content:flex-start;text-align:left;gap:11px 17px;padding:22px 20px}
 .ex-footer>span{flex:0 0 100%}
}
.ex-theme-actions #exLanguage{flex:0 0 auto;min-width:65px;max-width:65px;padding:7px 9px;
 border:1px solid #b7c0d0;border-radius:9px;background:transparent;
 color:inherit;font:700 12px system-ui;cursor:pointer}
.ex-theme-actions #exLanguage option{color:#181c27;background:#fff}
@media(max-width:440px){.ex-theme-actions{gap:7px}.ex-theme-actions #exLanguage{min-width:57px;max-width:57px;padding:6px}}