/* generated by scripts/portfolio/scope_css.py from design-system/concepts/tryit/tryit.css (approved sample, 2026-10-28). Edit the sample or the overrides file, not this. */
.pf-ti{--bg: #131210; --bg-2: #0d0c0b; --surface: #1b1917; --surface-2: #221f1c; --line: #3a342d; --ink: #ede7db; --dim: #b9b0a1; --faint: #8e8577;
  --g1: #faa83e; --g2: #fdcf48; --gm: #fbbb43; --on-gold: #1a1507; --gold: linear-gradient(100deg, #fdcf48, #faa83e);
  --f-display: "Readex Pro", "Plex Arabic", system-ui, sans-serif; --f-body: "Plex Arabic", system-ui, sans-serif; --f-num: "Archivo", "Plex Arabic", system-ui, sans-serif; --f-hand: "Aref Ruqaa", "Plex Arabic", serif;
  --pad: clamp(16px, 5vw, 80px); --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);}
.pf-ti *{box-sizing: border-box; margin: 0;}
.pf-ti{background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
.pf-ti{font-family: var(--f-body); font-size: 17px; line-height: 1.8; overflow-x: clip; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink);}
.pf-ti a{color: inherit; text-decoration: none;}
.pf-ti ul, .pf-ti ol{list-style: none; padding: 0;}
.pf-ti img{display: block; max-width: 100%;}
.pf-ti button{font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; padding: 0;}
.pf-ti .num, .pf-ti .ltr{font-family: var(--f-num); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;}
.pf-ti .gold{background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;}
.pf-ti .vh{position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.pf-ti .ico{width: 20px; height: 20px; flex: none;}
.pf-ti .btn{position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 500 15px/1.4 var(--f-display); white-space: nowrap; transition: box-shadow .35s, border-color .35s, background .35s, color .35s, transform .35s var(--ease-out);}
.pf-ti .btn--sm{min-height: 44px; padding: 0 18px; font-size: 14px;}
.pf-ti .btn--gold{background: var(--gold); color: var(--on-gold); font-weight: 700; box-shadow: 0 14px 40px -16px #faa83ecc, inset 0 1px 0 #fff8;}
.pf-ti .btn--ghost{border: 1px solid #ffffff2a; background: #ffffff07;}
@media (hover: hover){.pf-ti .btn--gold:hover{box-shadow: 0 20px 56px -12px #fdcf48dd, inset 0 1px 0 #fff8; transform: translateY(-1px);}
.pf-ti .btn--ghost:hover{border-color: var(--g2); background: #fdcf4812;}}
.pf-ti .eyebrow{display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.75; color: var(--g2); padding: 4px 14px; border-radius: 999px; border: 1px solid #fdcf4838; background: #fdcf480f;}
.pf-ti .eyebrow::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2);}
.pf-ti h2, .pf-ti h3{font-family: var(--f-display); font-weight: 700; line-height: 1.38; text-wrap: balance;}
.pf-ti .ti-work{overflow-x: clip; position: relative; padding: clamp(36px, 7vh, 90px) var(--pad) clamp(60px, 10vh, 120px); border-block-start: 1px solid #ffffff0d; scroll-margin-top: 0;}
.pf-ti .ti-work::before{content: ""; position: absolute; inset: 0 0 auto; height: 110vh; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 30% 42%, color-mix(in srgb, var(--mood) 15%, transparent), transparent 72%);}
.pf-ti .ti-work__hero{display: grid; grid-template-columns: minmax(390px, 440px) minmax(0, 1fr); grid-template-areas: "panel stage"; align-items: center; gap: clamp(28px, 4vw, 72px); min-height: min(100svh, 980px);}
.pf-ti .ti-work__no{direction: ltr; position: absolute; top: clamp(30px, 6vh, 80px); inset-inline-end: var(--pad); font: 700 clamp(14px, 1vw, 15px)/1 var(--f-num); color: var(--faint); letter-spacing: .12em;}
.pf-ti .ti-work__no b{color: var(--g2);}
.pf-ti .panel{grid-area: panel; display: grid; gap: 22px; align-content: center; min-width: 0;}
.pf-ti .panel > .eyebrow{justify-self: start;}
.pf-ti .panel__brand{display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;}
.pf-ti .panel__brand h2{font-size: clamp(40px, 4.6vw, 74px); line-height: 1.35;}
.pf-ti .panel__brand .ltr{font-size: 14px; letter-spacing: .32em; color: var(--faint);}
.pf-ti .panel__title{font: 500 clamp(17px, 1.35vw, 21px)/1.65 var(--f-display); color: var(--ink); margin-block-start: -8px;}
.pf-ti .panel__line{color: var(--dim); line-height: 1.9; max-width: 34em;}
.pf-ti .panel__meta{display: flex; flex-wrap: wrap; gap: 8px;}
.pf-ti .ti-tag{display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); font-size: 13px; line-height: 1.8;}
.pf-ti .go{display: grid; gap: 12px;}
.pf-ti .live{position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 84px; padding: 14px 18px 14px 22px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--gold); color: var(--on-gold); box-shadow: 0 24px 60px -24px #faa83ee0, inset 0 1px 0 #fff9, inset 0 -1px 0 #0000001f; transition: transform .45s var(--ease-out), box-shadow .45s;}
.pf-ti .live::after{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, #fff0 30%, #ffffff8c 48%, #fff0 66%); transform: translateX(-120%);}
.pf-ti .live__dot{position: relative; width: 12px; height: 12px; border-radius: 50%; background: #1a1507;}
.pf-ti .live__dot::after{content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #1a150770; animation: ti-dot 2s var(--ease-out) infinite;}
@keyframes ti-dot{ from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pf-ti .live__t{display: grid; gap: 0; min-width: 0;}
.pf-ti .live__t b{font: 700 clamp(18px, 1.5vw, 22px)/1.45 var(--f-display);}
.pf-ti .live__t span{font: 500 13px/1.6 var(--f-num); direction: ltr; text-align: end; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pf-ti .live__arrow{width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #1a1507; color: var(--g2); transition: transform .45s var(--ease-out);}
.pf-ti .live__arrow svg{width: 20px; height: 20px;}
@media (hover: hover){.pf-ti .live:hover{transform: translateY(-2px); box-shadow: 0 30px 70px -22px #fdcf48f0, inset 0 1px 0 #fff9;}
.pf-ti .live:hover::after{transform: translateX(120%); transition: transform 1s var(--ease-out);}
.pf-ti .live:hover .live__arrow{transform: translate(-3px, -3px) rotate(-8deg);}}
.pf-ti .go__row{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.pf-ti .alt{display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 18px; border: 1px solid #ffffff1c; background: #1b1917c4; transition: border-color .3s, background .3s;}
.pf-ti .alt svg{width: 26px; height: 26px; flex: none; color: var(--g2);}
.pf-ti .alt b{display: block; font: 500 15px/1.45 var(--f-display);}
.pf-ti .alt small{display: block; font-size: 12.5px; line-height: 1.6; color: var(--faint);}
.pf-ti .alt[aria-expanded="true"]{border-color: #fdcf4890; background: #fdcf4812;}
@media (hover: hover){.pf-ti .alt:hover{border-color: #fdcf4880; background: #fdcf480d;}}
.pf-ti .alt--share{display: none;}
.pf-ti .qr{display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 20px; border: 1px solid #fdcf4850; background: linear-gradient(160deg, #231f1a, #171513); box-shadow: 0 30px 70px -40px #000;
  transform-origin: 50% 0; animation: ti-qrIn .5s var(--ease-out);}
.pf-ti .qr[hidden]{display: none;}
@keyframes ti-qrIn{ from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.pf-ti .qr__code{width: 148px; aspect-ratio: 1; border-radius: 14px; background: #f4efe4; padding: 10px; box-shadow: inset 0 0 0 1px #0000001a;}
.pf-ti .qr__code svg{width: 100%; height: 100%; display: block;}
.pf-ti .qr__t b{display: block; font: 700 16px/1.5 var(--f-display);}
.pf-ti .qr__t p{color: var(--dim); font-size: 14px; line-height: 1.8; margin-block: 4px 10px;}
.pf-ti .qr__t .ltr{font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere;}
.pf-ti .copy{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffffff22; font-size: 13.5px; color: var(--ink); margin-block-start: 6px;}
.pf-ti .copy svg{width: 16px; height: 16px;}
@media (hover: hover){.pf-ti .copy:hover{border-color: var(--g2);}}
.pf-ti .seg{display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: #1b1917d9; border: 1px solid #ffffff14; justify-self: start;}
.pf-ti .seg button{min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 14px; line-height: 1.5; transition: color .3s, background .3s;}
.pf-ti .seg svg{width: 18px; height: 18px;}
.pf-ti .seg button[aria-pressed="true"]{background: #ede7db; color: #131210; font-weight: 700;}
@media (hover: hover){.pf-ti .seg button[aria-pressed="false"]:hover{color: var(--ink); background: #ffffff0d;}}
.pf-ti .seg-row{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;}
.pf-ti .seg-row small{color: var(--faint); font-size: 13px; line-height: 1.7;}
.pf-ti .try{display: grid; gap: 10px; padding-block-start: 18px; border-block-start: 1px solid #ffffff12;}
.pf-ti .try h3{font: 500 14px/1.6 var(--f-display); color: var(--g2);}
.pf-ti .try li{position: relative; padding-inline-start: 34px; color: var(--dim); font-size: 15.5px; line-height: 1.8;}
.pf-ti .try li::before{content: counter(t); counter-increment: t; position: absolute; inset-inline-start: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--f-num); color: var(--on-gold); background: var(--gold);}
.pf-ti .try ol{counter-reset: t; display: grid; gap: 6px;}
.pf-ti .note{font-size: 13px; color: var(--faint); line-height: 1.8;}
.pf-ti .ti-stage{grid-area: stage; position: relative; display: grid; place-items: center; min-width: 0; padding-block: 34px 10px; perspective: 2200px;}
.pf-ti .ti-stage__bar{position: absolute; top: 0; inset-inline: 0; display: flex; justify-content: center; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease-out), visibility .4s; z-index: 6;}
.pf-ti .ti-stage.is-live .ti-stage__bar{opacity: 1; visibility: visible; transform: none;}
.pf-ti .ti-chip{white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffffff22; background: #1b1917e6; font-size: 13.5px; line-height: 1.5; color: var(--dim);}
.pf-ti .ti-chip svg{width: 16px; height: 16px;}
.pf-ti .ti-chip--live{color: var(--g2); border-color: #fdcf4855;}
.pf-ti .ti-chip--live i{width: 7px; height: 7px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 10px #5fd38d;}
@media (hover: hover){.pf-ti button.ti-chip:hover, .pf-ti a.ti-chip:hover{color: var(--ink); border-color: var(--g2);}}
.pf-ti .ti-stage__cap{margin-block-start: 22px; font-size: 13.5px; line-height: 1.7; color: var(--faint); text-align: center;}
.pf-ti .rig{position: relative; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; width: 100%;}
.pf-ti .ti-dev{grid-area: 1 / 1; direction: ltr; transition: opacity .55s var(--ease), transform .8s var(--ease-out), filter .55s;}
.pf-ti .ti-dev[hidden]{display: none;}
.pf-ti .ti-dev.is-out{opacity: 0; transform: translateY(36px) scale(.95); filter: blur(6px);}
.pf-ti .screen{position: relative; overflow: hidden; background: #050505; container-type: inline-size; isolation: isolate;}
.pf-ti .canvas{position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--s, .5)); display: flex; flex-direction: column;}
.pf-ti .vp{position: relative; flex: none; overflow: hidden; background: #0a0a0a;}
.pf-ti .vp > img{position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s var(--ease), filter .6s var(--ease), transform 1.2s var(--ease-out);}
.pf-ti .vp iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0;}
.pf-ti .ti-play{position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 22px; background: linear-gradient(180deg, #0000 30%, #0a090873); transition: opacity .45s, visibility .45s;}
.pf-ti .ti-play__ring{position: relative; width: var(--ring, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 18px #fdcf4826, 0 30px 80px -14px #faa83ecc; transition: transform .5s var(--ease-out), box-shadow .5s;}
.pf-ti .ti-play__ring::before, .pf-ti .ti-play__ring::after{content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 2px solid #fdcf4870; animation: ti-pulse 2.8s var(--ease-out) infinite;}
.pf-ti .ti-play__ring::after{animation-delay: 1.4s;}
.pf-ti .ti-play__ring svg{width: 40%; height: 40%; margin-left: 8%;}
@keyframes ti-pulse{ from { transform: scale(.92); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pf-ti .ti-play__label{font: 700 var(--lab, 34px)/1.4 var(--f-display); color: #fff; padding: .35em 1em; border-radius: 999px; background: #131210c7; border: 1px solid #ffffff2e; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); direction: rtl;}
@media (hover: hover){.pf-ti .ti-play:hover .ti-play__ring{transform: scale(1.06); box-shadow: 0 0 0 26px #fdcf4830, 0 36px 90px -10px #fdcf48;}
.pf-ti .ti-dev:hover .vp > img{transform: scale(1.012);}}
.pf-ti .boot{position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: #070707; transition: opacity .35s; overflow: hidden;}
.pf-ti .boot::before{content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, #fff0 38%, #ffffff12 47%, #fdcf4824 50%, #ffffff12 53%, #fff0 62%); background-size: 240% 100%; animation: ti-shimmer 1.5s linear infinite;}
.pf-ti .boot::after{content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 0; background: var(--gold); box-shadow: 0 0 24px #fdcf48; transition: width 6s cubic-bezier(.1, .7, .2, 1);}
.pf-ti .boot span{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 500 var(--lab, 34px)/1.4 var(--f-display); color: #b9b0a1; direction: rtl; white-space: nowrap;}
.pf-ti .boot span i{display: block; margin: 0 auto .6em; width: 1.6em; height: 1.6em; border-radius: 50%; border: .14em solid #ffffff22; border-top-color: var(--g2); animation: ti-spin 1s linear infinite;}
@keyframes ti-shimmer{ from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes ti-spin{ to { transform: rotate(360deg); } }
.pf-ti .bloom{position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(60% 50% at 50% 50%, #fffaf0, #fdcf4855 45%, #0000 75%); mix-blend-mode: screen;}
.pf-ti .err{position: absolute; inset: 0; z-index: 6; display: none; place-content: center; justify-items: center; gap: 18px; background: #0d0c0bf2; color: var(--ink); font: 500 var(--lab, 34px)/1.5 var(--f-display); direction: rtl; text-align: center; padding: 10%;}
.pf-ti .err a{color: var(--on-gold); background: var(--gold); padding: .4em 1.1em; border-radius: 999px; font-weight: 700;}
.pf-ti .screen.is-boot .boot{opacity: 1;}
.pf-ti .screen.is-boot .boot::after{width: 82%;}
.pf-ti .screen.is-boot .ti-play, .pf-ti .screen.is-live .ti-play{opacity: 0; visibility: hidden;}
.pf-ti .screen.is-boot .vp > img{filter: brightness(.2) saturate(.6); transform: scale(.995);}
.pf-ti .screen.is-live .vp iframe{opacity: 1; animation: ti-powerOn .9s var(--ease-out) both;}
.pf-ti .screen.is-live .vp > img{opacity: 0;}
.pf-ti .screen.is-live .bloom{animation: ti-bloom .9s var(--ease-out) both;}
.pf-ti .screen.is-err .err{display: grid;}
@keyframes ti-powerOn{ 0% { opacity: 0; filter: brightness(2.2) contrast(.7) blur(10px); transform: scale(.975); } 55% { opacity: 1; } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes ti-bloom{ 0% { opacity: 0; transform: scaleY(.02); } 25% { opacity: .9; transform: scaleY(.25); } 100% { opacity: 0; transform: scaleY(1.2); } }
.pf-ti .glass{position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(calc(118deg + var(--gx, 0) * 1deg), #ffffff1c 0%, #ffffff08 22%, #fff0 38%, #fff0 72%, #ffffff06 86%, #ffffff10 100%); mix-blend-mode: screen; transition: opacity .6s;}
.pf-ti .screen.is-live .glass{opacity: .35;}
.pf-ti .browser{flex: none; height: 64px; display: flex; align-items: center; gap: 22px; padding: 0 26px; background: linear-gradient(#2a2825, #1f1d1b); border-bottom: 1px solid #000; color: #9c9488; font-family: var(--f-num);}
.pf-ti .browser__dots{display: flex; gap: 10px;}
.pf-ti .browser__dots i{width: 15px; height: 15px; border-radius: 50%; background: #4a4540; box-shadow: inset 0 0 0 1px #0000004d;}
.pf-ti .browser__nav{display: flex; gap: 18px;}
.pf-ti .browser__nav svg{width: 22px; height: 22px;}
.pf-ti .browser__url{flex: 1; max-width: 760px; margin-inline: auto; height: 40px; border-radius: 12px; background: #141311; border: 1px solid #ffffff10; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 19px; color: #d8d1c4; letter-spacing: .01em; position: relative; overflow: hidden;}
.pf-ti .browser__url svg{width: 17px; height: 17px; color: #7fcf9a;}
.pf-ti .browser__url em{font-style: normal; color: #8e8577;}
.pf-ti .browser__url::after{content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); opacity: 0; transition: width 5s cubic-bezier(.1, .7, .2, 1), opacity .4s;}
.pf-ti .screen.is-boot .browser__url::after{width: 80%; opacity: 1;}
.pf-ti .screen.is-live .browser__url::after{width: 100%; opacity: 0; transition: width .3s, opacity .6s .3s;}
@media (hover: hover){.pf-ti .browser__url:hover{border-color: #fdcf4888; color: #fff;}}
.pf-ti .browser__open{width: 22px; height: 22px;}
.pf-ti .laptop{--w: min(100%, 1120px, calc((100svh - 190px) * 1.62)); width: var(--w); position: relative;}
.pf-ti .laptop__lid, .pf-ti .laptop__hinge{width: 89%; margin-inline: auto;}
.pf-ti .laptop__lid{position: relative; z-index: 1; border-radius: 3.1% 3.1% 1.2% 1.2% / 4.6% 4.6% 1.8% 1.8%; padding: .42%;
  background: linear-gradient(180deg, #8f8a83 0%, #5c5853 3%, #3b3835 50%, #2c2a27 100%);
  box-shadow: 0 0 0 1px #00000099, inset 0 1px 0 #d6d0c74d, 0 50px 90px -40px #000;}
.pf-ti .laptop__bezel{position: relative; border-radius: 2.8% 2.8% .9% .9% / 4.2% 4.2% 1.4% 1.4%; padding: 2.5% 2.1% 2.3%; background: #070707;
  box-shadow: inset 0 0 0 1px #ffffff0f, inset 0 0 18px #000;}
.pf-ti .laptop__cam{position: absolute; top: 0; left: 50%; width: 12.5%; height: 3.1%; transform: translateX(-50%); border-radius: 0 0 14px 14px / 0 0 12px 12px; background: #070707; z-index: 9; display: grid; place-items: center;}
.pf-ti .laptop__cam::after{content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a6a7a, #101a20 60%); box-shadow: 0 0 0 2px #141414;}
.pf-ti .laptop .screen{aspect-ratio: 1440 / 964; border-radius: .6% / .9%;}
.pf-ti .laptop__hinge{position: relative; height: 0; padding-bottom: .9%; width: 80%; border-radius: 0 0 40% 40% / 0 0 100% 100%; background: linear-gradient(180deg, #0b0b0a, #34312d 55%, #1a1917);}
.pf-ti .laptop__base{position: relative; margin-top: -1px;}
.pf-ti .laptop__deck{height: 0; padding-bottom: 1.15%; background: linear-gradient(180deg, #57534d, #9e9890 60%, #c4bdb3); clip-path: polygon(1.4% 0, 98.6% 0, 100% 100%, 0 100%);}
.pf-ti .laptop__front{position: relative; height: 0; padding-bottom: 1.7%; border-radius: 0 0 12% 12% / 0 0 100% 100%; background: linear-gradient(180deg, #8d877f 0%, #48443f 30%, #24221f 75%, #121110 100%); box-shadow: 0 1px 0 #ffffff14;}
.pf-ti .laptop__front::before{content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 45%; transform: translateX(-50%); border-radius: 0 0 18px 18px / 0 0 10px 10px; background: linear-gradient(180deg, #2b2926, #4f4b46); box-shadow: inset 0 1px 2px #00000080;}
.pf-ti .laptop__shadow{position: absolute; left: -2%; right: -2%; bottom: -26px; height: 46px; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, #000000e6, #0000 72%); filter: blur(6px);}
.pf-ti .laptop__glow{position: absolute; inset: 8% 6% 14%; z-index: -2; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--mood) 26%, transparent), transparent 70%); filter: blur(40px); opacity: .7; transition: opacity .8s;}
.pf-ti .ti-stage.is-live .laptop__glow{opacity: 1;}
.pf-ti .phone{--pw: min(360px, 78vw, calc((100svh - 200px) * .485)); width: var(--pw); position: relative;}
.pf-ti .phone__frame{position: relative; border-radius: 17.5% / 8.3%; padding: 1.25%;
  background: linear-gradient(135deg, #a49e95 0%, #4a4743 9%, #2a2825 22%, #77726b 40%, #2b2926 56%, #1d1c1a 74%, #6e6962 90%, #9b958c 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ffffff26, 0 60px 110px -40px #000, 0 26px 50px -30px #000;}
.pf-ti .phone__bezel{position: relative; border-radius: 16.4% / 7.7%; padding: 3.1%; background: #040404; box-shadow: inset 0 0 0 1.5px #1c1c1c, inset 0 0 8px #000;}
.pf-ti .phone .screen{aspect-ratio: 390 / 844; border-radius: 13.2% / 6.1%;}
.pf-ti .island{position: absolute; z-index: 9; top: 2.6%; left: 50%; width: 31.5%; height: 4.4%; transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px #111;}
.pf-ti .island::after{content: ""; position: absolute; right: 13%; top: 50%; width: 9%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #33475a, #0b1016 60%);}
.pf-ti .pbtn{position: absolute; width: 1.15%; border-radius: 3px; background: linear-gradient(90deg, #2a2825, #8d877f 50%, #3a3733); box-shadow: 0 0 0 .5px #000;}
.pf-ti .pbtn--action{left: -.9%; top: 17%; height: 4.2%;}
.pf-ti .pbtn--up{left: -.9%; top: 24.5%; height: 7.4%;}
.pf-ti .pbtn--down{left: -.9%; top: 33.5%; height: 7.4%;}
.pf-ti .pbtn--power{right: -.9%; top: 26%; height: 11.5%;}
.pf-ti .pbtn--cam{right: -.6%; top: 56%; height: 5.6%; width: .9%; background: linear-gradient(90deg, #6d6861, #2b2926);}
.pf-ti .phone__shadow{position: absolute; left: 8%; right: 8%; bottom: -22px; height: 40px; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, #000000d9, #0000 72%); filter: blur(5px);}
.pf-ti .phone__glow{position: absolute; inset: 10% -30% 10%; z-index: -2; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--mood) 28%, transparent), transparent 70%); filter: blur(40px); opacity: .75;}
.pf-ti .status{flex: none; height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font: 600 16px/1 -apple-system, "SF Pro Text", "Archivo", system-ui, sans-serif; color: var(--sfg, #fff); background: var(--sbg, #000);}
.pf-ti .status svg{height: 12px; width: auto;}
.pf-ti .status span:last-child{display: flex; gap: 6px; align-items: center;}
.pf-ti .phone .ti-play{--ring: 104px; --lab: 26px;}
.pf-ti .phone .boot{--lab: 24px;}
.pf-ti .phone .err{--lab: 22px;}
.pf-ti .show{margin-block-start: clamp(40px, 8vh, 100px); display: grid; gap: clamp(22px, 3vh, 34px);}
.pf-ti .show__head{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; padding-block-end: 18px; border-block-end: 1px solid #ffffff12;}
.pf-ti .show__head h3{font-size: clamp(24px, 2.4vw, 38px);}
.pf-ti .show__head p{color: var(--dim); font-size: 15px; line-height: 1.8;}
.pf-ti .show__go{display: flex; flex-wrap: wrap; gap: 10px;}
.pf-ti .show__sub{font: 500 15px/1.6 var(--f-display); color: var(--g2); display: flex; align-items: center; gap: 10px;}
.pf-ti .show__sub::after{content: ""; flex: 1; height: 1px; background: #ffffff10;}
.pf-ti .screens{--rowh: 215px; display: flex; flex-wrap: wrap; gap: 16px;}
.pf-ti .screens::after{content: ""; flex-grow: 999999;}
.pf-ti .shot{flex-grow: calc(var(--r) * 100); flex-basis: calc(var(--r) * var(--rowh)); max-width: 100%; display: grid; gap: 10px; align-content: start; text-align: start;}
.pf-ti .shot__img, .pf-ti .page__img{position: relative; display: block; border-radius: 12px; overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px #ffffff14, 0 24px 50px -30px #000; transition: transform .6s var(--ease-out), box-shadow .5s;}
.pf-ti .shot__img img, .pf-ti .page__img img{width: 100%; height: auto; aspect-ratio: var(--w) / var(--h);}
.pf-ti .shot__img::after, .pf-ti .page__img::after{content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff12; pointer-events: none;}
.pf-ti .zoom{position: absolute; top: 10px; inset-inline-start: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #131210d9; color: var(--g2); border: 1px solid #ffffff22; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease-out);}
.pf-ti .zoom svg{width: 17px; height: 17px;}
.pf-ti .cap{display: flex; gap: 10px; font-size: 14px; line-height: 1.75; color: var(--dim);}
.pf-ti .cap .num{color: var(--g2); font-size: 12.5px; padding-top: 2px; flex: none;}
@media (hover: hover){.pf-ti .shot:hover .shot__img, .pf-ti .page:hover .page__img{transform: translateY(-4px); box-shadow: 0 0 0 1px #fdcf4866, 0 34px 60px -30px #000;}
.pf-ti .shot:hover .zoom, .pf-ti .page:hover .zoom{opacity: 1; transform: none;}
.pf-ti .shot:hover .cap, .pf-ti .page:hover .cap{color: var(--ink);}}
.pf-ti .pages{--ph: min(680px, 78svh); display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-block-end: 12px; scrollbar-width: thin; scrollbar-color: #3a342d transparent;}
.pf-ti .page{flex: none; width: calc(var(--ph) * var(--r)); min-width: 150px; display: grid; gap: 10px; align-content: start; scroll-snap-align: start; text-align: start;}
.pf-ti .page__img img{height: var(--ph); width: auto; max-width: none;}
.pf-ti .page__img{width: max-content;}
.pf-ti .page .cap{max-width: 100%;}
.pf-ti .page--wide{width: calc(var(--ph) * var(--r));}
.pf-ti .lb{position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0a09f5; color: var(--ink); overflow: hidden;}
.pf-ti .lb::backdrop{background: #000c;}
.pf-ti .lb[open]{display: grid; grid-template-rows: auto 1fr auto; animation: ti-lbIn .35s var(--ease-out);}
@keyframes ti-lbIn{ from { opacity: 0; } }
.pf-ti .lb__top{display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(14px, 3vw, 28px);}
.pf-ti .lb__count{font: 500 14px/1 var(--f-num); color: var(--dim);}
.pf-ti .lb__stage{position: relative; min-height: 0; display: grid; place-items: center; padding-inline: clamp(8px, 6vw, 96px);}
.pf-ti .lb__scroll{width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain;}
.pf-ti .lb__scroll.is-tall{place-items: start center;}
.pf-ti .lb__img{max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 40px 120px -30px #000; transition: opacity .25s;}
.pf-ti .lb__scroll.is-tall .lb__img{max-height: none; width: min(1100px, 100%); border-radius: 10px 10px 0 0;}
.pf-ti .lb__bar{display: flex; justify-content: center; align-items: center; gap: 14px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); text-align: center;}
.pf-ti .lb__cap{color: var(--dim); font-size: 14.5px; line-height: 1.7; max-width: 46em;}
.pf-ti .rbtn{width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid #ffffff2a; background: #1b1917d9; color: var(--ink); transition: border-color .25s, background .25s;}
.pf-ti .rbtn svg{width: 20px; height: 20px;}
@media (hover: hover){.pf-ti .rbtn:hover{border-color: var(--g2); background: #fdcf4818;}}
.pf-ti .lb__nav{position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;}
.pf-ti .lb__nav--prev{right: clamp(8px, 2vw, 28px);}
.pf-ti .lb__nav--next{left: clamp(8px, 2vw, 28px);}
.pf-ti .lb__hint{font-size: 12.5px; color: var(--faint);}
.pf-ti .ti-dock{position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 7px; padding-inline-start: 18px; border-radius: 999px;
  background: #1b1917eb; border: 1px solid #ffffff1c; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 24px 60px -20px #000; transition: transform .6s var(--ease-out); max-width: calc(100vw - 24px);}
.pf-ti .ti-dock.is-on{transform: translate(-50%, 0);}
.pf-ti .ti-dock__t{display: grid; min-width: 0;}
.pf-ti .ti-dock__t b{font: 700 15px/1.4 var(--f-display); white-space: nowrap;}
.pf-ti .ti-dock__t small{font-size: 12px; line-height: 1.5; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pf-ti .ti-dock .btn{min-height: 46px;}
@media (max-width: 1100px){.pf-ti .ti-work__hero{grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel"; min-height: 0; gap: 26px;}
.pf-ti .ti-stage{padding-block-start: 48px;}
.pf-ti .laptop{--w: min(100%, 860px);}
.pf-ti .ti-work__no{top: 20px;}}
@media (max-width: 640px){.pf-ti{font-size: 16px;}
.pf-ti .ti-work{padding-block: 30px 64px;}
.pf-ti .ti-stage{padding-block: 46px 0;}
.pf-ti .phone{--pw: min(300px, 76vw);}
.pf-ti .browser{height: 64px;}
.pf-ti .live{min-height: 76px; padding: 12px 14px 12px 18px; border-radius: 20px; gap: 12px;}
.pf-ti .live__arrow{width: 44px; height: 44px;}
.pf-ti .go__row{grid-template-columns: 1fr;}
.pf-ti .ti-stage__bar [data-reload]{display: none;}
.pf-ti .ti-work__no{display: none;}
.pf-ti .panel{gap: 18px;}
.pf-ti .panel__brand h2{font-size: 44px;}
.pf-ti .qr{grid-template-columns: 1fr; justify-items: center; text-align: center;}
.pf-ti .screens{--rowh: 190px; gap: 22px;}
.pf-ti .pages{--ph: 440px; gap: 14px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);}
.pf-ti .lb__stage{padding-inline: 0;}
.pf-ti .lb__nav{display: none;}
.pf-ti .ti-dock{left: 12px; right: 12px; transform: translateY(140%); justify-content: space-between;}
.pf-ti .ti-dock.is-on{transform: none;}}
@media (hover: none) and (pointer: coarse){.pf-ti .alt--qr{display: none;}
.pf-ti .alt--share{display: flex;}
.pf-ti .go__row{grid-template-columns: 1fr 1fr;}}
@media (max-width: 640px) and (hover: none){.pf-ti .go__row{grid-template-columns: 1fr;}}
@media (prefers-reduced-motion: reduce){.pf-ti{scroll-behavior: auto;}
.pf-ti *, .pf-ti *::before, .pf-ti *::after{animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;}}
/* ---- WordPress integration (room page /projects/<id>/): the section sits under the room hero, the theme owns the page chrome ---- */
.pf-ti { background: transparent; position: relative; }
.pf-ti .ti-work { border-block-start: 0; }
.pf-ti .ti-work__hero { min-height: min(92svh, 980px); }
.pf-ti h2, .pf-ti h3 { letter-spacing: 0; }
.pf-ti .lb { z-index: 200; }
.pf-ti .ti-dock { z-index: 70; }
@media (max-width: 820px) { .pf-ti .ti-dock { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); } }