.work-head{align-items:end}@media (width>=900px){.work-title{grid-column:4/span 6}.work-head .rail{align-self:start}}.screens{color:var(--muted);grid-column:10/-1;justify-self:end;align-items:center;gap:10px;font-size:14px;display:flex}.seg{border:1px solid var(--line);border-radius:999px;padding:3px;display:inline-flex}.seg button{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:999px;padding:5px 13px;font-size:14px;line-height:1.3}.seg button[lang=ar]{font-family:var(--ar)}@media (hover:hover){.seg button:hover{color:var(--fg)}}.seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}@media (forced-colors:active){.seg button[aria-pressed=true]{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}.seg button[aria-pressed=true]:focus-visible{outline-color:highlight}}@media (width<=899px){.screens{grid-column:1/-1;justify-self:start;margin-block-start:24px}}.frame{background:var(--chrome);border:1px solid var(--line);border-radius:12px;overflow:hidden}.frame-bar{direction:ltr;grid-template-columns:72px 1fr 72px;align-items:center;block-size:38px;padding-inline:14px;display:grid}.frame-bar i{gap:7px;display:flex}.frame-bar i b{background:var(--chrome-dot);border-radius:50%;block-size:10px;inline-size:10px}.frame-bar .url{color:var(--muted);background:var(--bg);text-align:center;border-radius:6px;justify-self:center;min-inline-size:min(260px,100%);padding:3px 14px;font-size:12.5px}.frame-view{aspect-ratio:16/10;background:var(--panel);position:relative;overflow:hidden}.frame-view picture{block-size:100%;inline-size:100%;display:block}.frame-view img{object-fit:cover;object-position:top center;block-size:100%;inline-size:100%}.meta h3{font-family:var(--f-display);letter-spacing:-.018em;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.1}.meta .kind{color:var(--muted);margin-block-start:6px;font-size:14px}.meta .kind.own{color:var(--accent-text)}.meta .desc{color:var(--muted);text-wrap:pretty;max-inline-size:44ch;margin-block-start:12px;font-size:16.5px}.meta .note{color:var(--muted);margin-block-start:10px;font-size:14px}.url-link{border-block-end:1px solid var(--line);margin-block-start:14px;padding-block-end:2px;font-size:15px;font-weight:550;transition:border-color .2s,color .2s;display:inline-block}@media (hover:hover){.url-link:hover{border-color:var(--accent);color:var(--accent-text)}}.phone{transform:translateX(calc(-50% * var(--dir)));inline-size:min(252px,60%);box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent);background:#14120f;border:9px solid #14120f;border-radius:44px;position:absolute;inset-block-start:44px;inset-inline-start:50%}.phone:before{content:"";block-size:22px;inline-size:30%;transform:translateX(calc(-50% * var(--dir)));z-index:2;background:#14120f;border-radius:20px;position:absolute;inset-block-start:9px;inset-inline-start:50%}.phone img{aspect-ratio:924/2000;object-fit:cover;border-radius:35px;block-size:auto;inline-size:100%}@media (width<=899px){.phone{inline-size:236px}}@media (width<=559px){.frame-bar{grid-template-columns:48px 1fr 12px}.frame-bar .url{min-inline-size:0}}@media (pointer:coarse){.seg button,.url-link{position:relative}.seg button:after{content:"";position:absolute;inset:-8px 0}.url-link:after{content:"";position:absolute;inset:-9px -6px}}@media (prefers-reduced-motion:reduce){.url-link{transition:none}}:root:lang(ar) .meta h3{letter-spacing:0}:root:lang(ar) .url-link{font-weight:500}:root:lang(ar) .meta h3.lat[lang]{font-family:var(--serif);letter-spacing:-.018em;font-weight:400}:root:lang(ar) .meta .desc{line-height:1.8}.wk{gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr));margin-block-start:clamp(36px,4.4vw,64px);display:grid}.wk-i{flex-direction:column;min-inline-size:0;display:flex}.wk-stage{background:var(--panel);aspect-ratio:4/5;border-radius:12px;position:relative;overflow:hidden}.wk-stage .phone{inline-size:min(300px,64%);inset-block-start:clamp(40px,5vw,64px)}.wk-m{flex-direction:column;flex:1;align-items:flex-start;margin-block-start:24px;display:flex}.wk-m .desc{max-inline-size:38ch}.wk-m .url-link{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;border-block-end:0}@media (hover:hover){.wk-m .url-link:hover{text-decoration-color:var(--accent)}}@media (width<=899px){.wk{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scrollbar-width:none;grid-template-columns:none;grid-auto-columns:46%;grid-auto-flow:column;padding-block-end:8px;overflow-x:auto}.wk::-webkit-scrollbar{display:none}.wk-i{scroll-snap-align:start}}@media (width<=599px){.wk{grid-auto-columns:80%}}.wk-stage .phone{padding-block-start:26px}.wk-stage .phone img{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:35px;border-end-start-radius:35px}.wk-stage .phone:before{block-size:18px;inline-size:28%;inset-block-start:4px}.wk-2{grid-column:4/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin-block-start:0}@media (width<=899px){.wk-2{grid-column:1/-1;grid-template-columns:none}}.wk-i{position:relative}.wk-m{position:static}.wk-a:after{content:"";z-index:1;border-radius:12px;position:absolute;inset:0}.wk-a:focus-visible{outline:none}.wk-a:focus-visible:after{outline:2px solid var(--accent);outline-offset:-2px}.wk-m .url-link{z-index:2;position:relative}.wk-cue{color:var(--accent-text);margin-block-start:14px;font-size:15px;font-weight:550}:root:lang(ar) .wk-cue{font-weight:500}@media (hover:hover){.wk-i:hover .wk-cue{text-underline-offset:5px;text-decoration:underline}.wk-i:hover .wk-a{color:var(--accent-text)}}.wk-a{transition:color .2s}@media (prefers-reduced-motion:reduce){.wk-a{transition:none}}@media (forced-colors:active){.wk-a:focus-visible:after{outline-color:highlight}}.wk-m .wk-cue{margin-block-start:auto;padding-block-start:14px}.wk-m .url-link{margin-block-start:0;padding-block-start:12px}.wk-dom{color:var(--muted);padding-block:12px 2px;font-size:15px;font-weight:550;display:inline-block}:root:lang(ar) .wk-dom{font-weight:500}.phone picture{display:block}.pd-stage .phone.deck img,.wk-stage .phone.deck img{aspect-ratio:auto 436/796;object-fit:fill}.seg{border-color:var(--edge)}@media print{.wk{scroll-snap-type:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;margin-inline:0;padding-inline:0;overflow:visible}.wk-2{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-i{break-inside:avoid}}
