/* selkapp.com — tappable phone + moving drawings (try.js). */
/* ---------- interactive phone ---------- */
.try{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:46px}
.try .phone{position:relative;width:min(320px,86vw);border-radius:56px;padding:11px;background:#1d1d1f;
  box-shadow:0 0 0 2px #3a3a3c,0 40px 90px rgba(0,0,0,.35),inset 0 0 0 1px #000}
.try .screen{position:relative;border-radius:46px;overflow:hidden;aspect-ratio:1206/2622;background:#05060c;user-select:none;-webkit-user-select:none}
.try .screen img.s{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.try .screen img.s.out{opacity:0}
.try .screen img.s.in-right{transform:translateX(18%);opacity:0}
.try .screen img.s.in-left{transform:translateX(-18%);opacity:0}
.try .tp-hot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.try .tp-hot:active{background:rgba(255,255,255,.10)}
.try .tp-hot:focus-visible{outline:2px solid #6cb4ff;outline-offset:-2px}
.try .ring{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:ping 1.6s ease-out infinite;pointer-events:none;transition:left .35s,top .35s,opacity .3s}
@keyframes ping{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.try .island{position:absolute;left:78.2%;top:14.3%;width:18.7%;height:49.3%;opacity:0;transform:scale(.85);transform-origin:90% 0;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.try .island.open{opacity:1;transform:none;pointer-events:auto}
.try .island img{width:100%;height:100%;display:block}
.try .scrim{position:absolute;inset:0;background:rgba(0,0,0,.25);opacity:0;transition:opacity .2s;pointer-events:none}
.try .scrim.open{opacity:1;pointer-events:auto}
.try .toast{position:absolute;left:50%;bottom:12%;transform:translate(-50%,10px);background:#f2f2f4;color:#111;font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;opacity:0;transition:.25s;white-space:nowrap;pointer-events:none}
.try .toast.show{opacity:1;transform:translate(-50%,0)}
.try .hint{font-size:15px;color:var(--faint);min-height:22px;text-align:center}
.dark .try .hint{color:#a1a1a6}
.try .steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.try .steps button{font:inherit;font-size:14px;font-weight:600;border:1px solid #3a3a3c;background:#111;color:#f5f5f7;border-radius:999px;padding:7px 14px;cursor:pointer}
.try .steps button.on{background:#f5f5f7;color:#111}

/* ---------- line drawings ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:46px}
.fig{background:linear-gradient(180deg,#fff,#f6f6f8);border:1px solid #e5e5ea;border-radius:26px;padding:22px 22px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fig svg{width:100%;height:auto;display:block;touch-action:manipulation}
.fig h3{font-size:19px;margin:12px 0 2px}
.fig p{margin:0;color:var(--dim);font-size:15px;line-height:1.4}
.fig .tap{font-size:12px;color:var(--faint);margin-top:8px}
.try .screen img{border-radius:0}