.lphf {
--ink: #171717;
--text: #0a0a0a;
--muted: #737373;
--line: #e5e5e5;
--soft: #f5f5f5;
--soft2: #fafafa;
--green: #1fc16b;
--green-soft: #deffee;
--green-ink: #0b6b3c;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
width: 100%;
overflow: hidden;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 15px;
line-height: 22px;
color: var(--text);
-webkit-font-smoothing: antialiased;
}
.lphf *,
.lphf *::before,
.lphf *::after {
box-sizing: border-box;
}
.lphf-stage {
width: 1200px;
height: 640px;
transform-origin: 0 0;
position: relative;
background: var(--soft2);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
transition: opacity 0.5s;
}
.lphf-stage.lphf-out {
opacity: 0;
}
.lphf-stage.lphf-is-final .lphf-ask,
.lphf-stage.lphf-is-final .lphf-work {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.lphf-final {
position: absolute;
left: 50%;
top: 40px;
width: 980px;
transform: translate(-50%, 10px);
opacity: 0;
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
pointer-events: none;
}
.lphf-final.lphf-in {
opacity: 1;
transform: translate(-50%, 0);
}
.gc {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 16px 40px rgba(10, 10, 10, 0.08);
overflow: hidden;
font-family: Geist, Roboto, -apple-system, sans-serif;
}
.gc-top {
height: 56px;
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px 0 14px;
border-bottom: 1px solid var(--line);
}
.gc-brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
padding-right: 14px;
border-right: 1px solid var(--line);
margin-right: 2px;
}
.gc-brand i {
width: 20px;
height: 22px;
display: block;
background: var(--lphf-logo) center / contain no-repeat;
}
.gc-brand small {
font-weight: 400;
color: var(--muted);
font-size: 13px;
}
.gc-today {
height: 32px;
padding: 0 14px;
border: 1px solid #dadce0;
border-radius: 6px;
font-size: 13.5px;
font-weight: 500;
display: inline-flex;
align-items: center;
color: #3c4043;
}
.gc-nav {
display: inline-flex;
gap: 2px;
color: #5f6368;
}
.gc-nav i {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gc-nav i svg {
width: 16px;
height: 16px;
}
.gc-month {
font-size: 19px;
font-weight: 400;
color: #3c4043;
}
.gc-legend {
margin-left: auto;
display: inline-flex;
gap: 14px;
font-size: 13px;
color: #5f6368;
}
.gc-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.gc-legend b {
color: var(--text);
font-weight: 600;
font-size: 15px;
}
.gc-legend i {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.gc-legend i.lphf-m {
background: #335cff;
}
.gc-legend i.lphf-f {
background: #1fc16b;
}
.gc-view {
height: 32px;
padding: 0 10px 0 14px;
border: 1px solid #dadce0;
border-radius: 6px;
font-size: 13.5px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
color: #3c4043;
}
.gc-view svg {
width: 14px;
height: 14px;
}
.gc-days {
display: grid;
grid-template-columns: 72px repeat(5, 1fr);
border-bottom: 1px solid #dadce0;
}
.gc-day {
height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-left: 1px solid #e8eaed;
}
.gc-day small {
font-size: 11.5px;
letter-spacing: 0.08em;
font-weight: 500;
color: #70757a;
}
.gc-day b {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 500;
color: #3c4043;
}
.gc-day.lphf-today small {
color: #335cff;
}
.gc-day.lphf-today b {
background: #335cff;
color: #fff;
}
.gc-body {
position: relative;
display: grid;
grid-template-columns: 72px repeat(5, 1fr);
padding-top: 18px;
}
.gc-h {
height: 42px;
font-size: 11px;
color: #70757a;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 0 12px 0 0;
transform: translateY(-8px);
}
.gc-c {
height: 42px;
border-left: 1px solid #e8eaed;
border-top: 1px solid #e8eaed;
}
.gc-now {
position: absolute;
left: calc(72px + (100% - 72px) / 5 * 1);
width: calc((100% - 72px) / 5);
top: calc(18px + 42px * 3.5);
height: 2px;
background: #ea4335;
z-index: 2;
}
.gc-now::before {
content: "";
position: absolute;
left: -6px;
top: -5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ea4335;
}
.gc-ev {
position: absolute;
left: calc(72px + (100% - 72px) / 5 * var(--d) + 3px);
width: calc((100% - 72px) / 5 - 9px);
top: calc(18px + 42px * var(--h) + 2px);
height: 38px;
border-radius: 6px;
padding: 4px 8px;
font-size: 12.5px;
line-height: 15px;
font-weight: 500;
background: #335cff;
color: #fff;
overflow: hidden;
opacity: 0;
transform: scale(0.94);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
z-index: 1;
}
.gc-ev span,
.gc-ev small {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-ev small {
font-weight: 400;
opacity: 0.85;
font-size: 11.5px;
}
.gc-ev.lphf-f {
background: #e6f8ee;
color: #0b6b3c;
border: 1px solid #1fc16b;
padding-left: 30px;
}
.gc-ev.lphf-f::before {
content: "";
position: absolute;
left: 8px;
top: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #1fc16b;
}
.gc-ev.lphf-f.lphf-done::before {
background: #1fc16b;
}
.gc-ev.lphf-f.lphf-done::after {
content: "";
position: absolute;
left: 13px;
top: 13px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.gc-ev.lphf-in {
opacity: 1;
transform: none;
}
.lphf-ask {
position: absolute;
left: 0;
right: 0;
top: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
transition: top 0.8s var(--ease);
}
.lphf-ask.lphf-up {
top: 32px;
}
.lphf-input {
width: 800px;
height: 64px;
display: flex;
align-items: center;
gap: 14px;
padding: 0 10px 0 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 14px 40px rgba(10, 10, 10, 0.08);
font-size: 19px;
line-height: 26px;
transition: height 0.6s var(--ease), font-size 0.6s var(--ease), box-shadow 0.6s;
}
.lphf-ask.lphf-up .lphf-input {
height: 52px;
font-size: 16px;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 6px 18px rgba(10, 10, 10, 0.05);
}
.lphf-brand {
width: 26px;
height: 28px;
flex: none;
background: var(--lphf-logo) center / contain no-repeat;
}
.lphf-typed {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
}
.lphf-ph {
flex: 1;
color: #a3a3a3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-typed:not(:empty) + .lphf-ph {
display: none;
}
.lphf-caret {
display: inline-block;
width: 2px;
height: 22px;
background: var(--ink);
vertical-align: -4px;
margin-left: 2px;
animation: lphfblink 1s steps(2) infinite;
}
@keyframes lphfblink {
to {
visibility: hidden;
}
}
.lphf-go {
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--ink);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
transition: all 0.3s;
}
.lphf-ask.lphf-up .lphf-go {
width: 36px;
height: 36px;
border-radius: 9px;
}
.lphf-go i {
width: 18px;
height: 18px;
display: block;
}
.lphf-go.lphf-press {
transform: scale(0.92);
}
.lphf-chips {
display: flex;
gap: 8px;
opacity: 1;
transition: opacity 0.4s;
}
.lphf-ask.lphf-up .lphf-chips {
opacity: 0;
pointer-events: none;
}
.lphf-chip {
height: 36px;
padding: 0 14px;
border-radius: 9999px;
border: 1px solid var(--line);
background: #fff;
color: var(--muted);
font-size: 14px;
display: inline-flex;
align-items: center;
}
.lphf-work {
position: absolute;
left: 48px;
right: 48px;
top: 110px;
bottom: 70px;
display: flex;
align-items: flex-start;
gap: 40px;
}
.lphf-steps {
width: 460px;
flex: none;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 14px;
}
.lphf-step {
display: flex;
align-items: center;
gap: 14px;
min-height: 70px;
padding: 11px 14px;
border-radius: 12px;
font-size: 17px;
line-height: 24px;
color: var(--muted);
opacity: 0;
transform: translateY(6px);
transition: all 0.5s var(--ease);
}
.lphf-step.lphf-in {
opacity: 1;
transform: none;
}
.lphf-step.lphf-on {
color: var(--text);
background: #fff;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 6px 18px rgba(10, 10, 10, 0.05);
}
.lphf-step.lphf-done {
color: var(--text);
}
.lphf-step > div {
min-width: 0;
}
.lphf-step b {
font-weight: 600;
}
.lphf-step small {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--muted);
margin-top: 1px;
}
.lphf-dot {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #d4d4d4;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
transition: border-color 0.3s, background 0.3s;
}
.lphf-dot i {
width: 16px;
height: 16px;
display: block;
color: #fff;
opacity: 0;
}
.lphf-step.lphf-on .lphf-dot {
border-color: var(--ink) #d4d4d4 #d4d4d4 #d4d4d4;
animation: lphfrot 0.8s linear infinite;
}
.lphf-step.lphf-done .lphf-dot {
background: var(--green);
border-color: var(--green);
animation: none;
}
.lphf-step.lphf-done .lphf-dot i {
opacity: 1;
}
@keyframes lphfrot {
to {
transform: rotate(360deg);
}
}
.lphf-proof {
flex: 1;
position: relative;
min-width: 0;
height: 400px;
margin-top: 14px;
}
.lphf-card {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(calc(-50% + 10px));
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px rgba(10, 10, 10, 0.07);
padding: 18px 20px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.lphf-card.lphf-in {
opacity: 1;
transform: translateY(-50%);
}
.lphf-card-h {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
font-weight: 600;
font-size: 16px;
}
.lphf-card-h b {
font-size: 26px;
font-weight: 600;
}
.lphf-card-h span.lphf-m {
margin-left: auto;
color: var(--muted);
font-weight: 400;
font-size: 13px;
}
.lphf-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.lphf-co {
display: flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 14px;
line-height: 18px;
opacity: 0;
transition: opacity 0.4s;
}
.lphf-co.lphf-in {
opacity: 1;
}
.lphf-co .lphf-lo {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--line);
object-fit: cover;
flex: none;
display: block;
}
.lphf-co .lphf-t {
min-width: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-co small {
display: block;
color: var(--muted);
font-size: 12px;
font-weight: 400;
}
.lphf-tag {
margin-left: auto;
flex: none;
height: 22px;
padding: 0 8px;
border-radius: 9999px;
background: var(--green-soft);
color: var(--green-ink);
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.lphf-more {
grid-column: 1 / -1;
color: var(--muted);
font-size: 13px;
text-align: center;
padding-top: 4px;
}
.lphf-people {
display: flex;
flex-direction: column;
gap: 8px;
}
.lphf-person {
display: flex;
align-items: center;
gap: 12px;
height: 58px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 10px;
opacity: 0;
transition: opacity 0.4s;
}
.lphf-person.lphf-in {
opacity: 1;
}
.lphf-person img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.lphf-person .lphf-n {
font-weight: 500;
line-height: 18px;
flex: 1;
min-width: 0;
}
.lphf-person .lphf-n small {
display: block;
color: var(--muted);
font-size: 12.5px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-ok {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text);
white-space: nowrap;
}
.lphf-ok i {
width: 15px;
height: 15px;
color: var(--green);
display: block;
}
.lphf-li {
width: 16px;
height: 16px;
color: #0a66c2;
display: block;
}
.lphf-mail {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--soft2);
padding: 14px 16px;
font-size: 15px;
line-height: 23px;
}
.lphf-mail .lphf-s {
font-weight: 600;
margin-bottom: 6px;
}
.lphf-mail b {
font-weight: 600;
}
.lphf-mail .lphf-hl {
background: #fff3bf;
border-radius: 3px;
padding: 0 2px;
}
.lphf-mail-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
color: var(--muted);
font-size: 13px;
}
.lphf-mail-foot i {
width: 15px;
height: 15px;
display: block;
}
.lphf-send {
display: flex;
flex-direction: column;
gap: 10px;
}
.lphf-tl {
display: flex;
flex-direction: column;
}
.lphf-tl-step {
display: flex;
align-items: center;
gap: 12px;
height: 48px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 15px;
font-weight: 500;
opacity: 0;
transition: opacity 0.45s var(--ease);
}
.lphf-tl-step.lphf-in {
opacity: 1;
}
.lphf-tl-step i {
width: 18px;
height: 18px;
display: block;
color: var(--muted);
flex: none;
}
.lphf-tl-step i.lphf-li {
color: #0a66c2;
}
.lphf-tl-step .lphf-d {
color: var(--muted);
font-weight: 400;
font-size: 13px;
margin-left: auto;
}
.lphf-tl-step .lphf-st {
height: 22px;
padding: 0 8px;
border-radius: 9999px;
background: var(--soft);
color: var(--muted);
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.lphf-tl-step .lphf-st.lphf-ok {
background: var(--green-soft);
color: var(--green-ink);
}
.lphf-tl-edge {
width: 2px;
height: 12px;
margin-left: 22px;
background: var(--line);
}
.lphf-note {
color: var(--muted);
font-size: 13.5px;
line-height: 19px;
margin-top: 2px;
}
.lphf-days {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 4px;
}
.lphf-day {
height: 46px;
border-radius: 6px;
background: var(--soft);
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 11px;
color: var(--muted);
padding-bottom: 4px;
position: relative;
overflow: hidden;
}
.lphf-day::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: var(--ink);
transition: height 0.4s var(--ease);
}
.lphf-day.lphf-on::before {
height: var(--h);
}
.lphf-day.lphf-on {
color: #fff;
}
.lphf-day.lphf-on span {
position: relative;
}
.lphf-send-row {
display: flex;
gap: 14px;
font-size: 14px;
color: var(--muted);
}
.lphf-send-row b {
color: var(--text);
font-weight: 600;
}
.lphf-send-row span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lphf-send-row i {
width: 15px;
height: 15px;
display: block;
}
.lphf-replies {
display: flex;
flex-direction: column;
height: 262px;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(#000 78%, transparent);
mask-image: linear-gradient(#000 78%, transparent);
}
.lphf-reply {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 10px;
align-items: center;
height: 44px;
flex: none;
padding: 0 6px;
border-bottom: 1px solid var(--soft);
opacity: 1;
max-height: 44px;
transition: max-height 0.5s var(--ease), opacity 0.5s var(--ease), background 0.8s;
overflow: hidden;
}
.lphf-reply.lphf-new {
max-height: 0;
opacity: 0;
border-bottom-width: 0;
}
.lphf-reply.lphf-new.lphf-in {
max-height: 44px;
opacity: 1;
border-bottom-width: 1px;
background: #fff8e1;
}
.lphf-reply.lphf-new.lphf-in.lphf-settle {
background: transparent;
}
.lphf-reply img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
.lphf-reply .lphf-w {
font-weight: 500;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-reply .lphf-w small {
color: var(--muted);
font-weight: 400;
margin-left: 6px;
font-size: 12.5px;
}
.lphf-reply .lphf-x {
font-size: 14px;
line-height: 18px;
color: #2a2a2a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-pill {
height: 24px;
padding: 0 9px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
background: var(--green-soft);
color: var(--green-ink);
white-space: nowrap;
}
.lphf-pill.lphf-meet {
background: var(--ink);
color: #fff;
}
.lphf-pill.lphf-later {
background: #fff4d6;
color: #7a5200;
}
.lphf-crm {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 13.5px;
color: var(--muted);
opacity: 0;
transition: opacity 0.4s;
}
.lphf-crm.lphf-in {
opacity: 1;
}
.lphf-crm i {
width: 15px;
height: 15px;
color: var(--green);
display: block;
}
.lphf-crm .lphf-lg {
display: inline-flex;
gap: 6px;
margin-left: 4px;
}
.lphf-crm .lphf-lg img {
width: 22px;
height: 22px;
border-radius: 6px;
object-fit: contain;
display: block;
border: 1px solid var(--line);
background: #fff;
}
.lphf-cal {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.lphf-cal-days {
display: grid;
grid-template-columns: 36px repeat(5, 1fr);
border-bottom: 1px solid var(--line);
background: var(--soft2);
}
.lphf-cal-days span {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
font-weight: 500;
color: var(--muted);
border-left: 1px solid var(--line);
}
.lphf-cal-days span:first-child {
border-left: 0;
}
.lphf-cal-days span.lphf-today {
color: var(--text);
}
.lphf-cal-body {
position: relative;
display: grid;
grid-template-columns: 36px repeat(5, 1fr);
}
.lphf-cal-h {
height: 36px;
font-size: 11px;
color: var(--muted);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 2px;
border-top: 1px solid var(--soft);
}
.lphf-cal-c {
border-left: 1px solid var(--line);
border-top: 1px solid var(--soft);
height: 36px;
}
.lphf-ev {
position: absolute;
left: calc(36px + (100% - 36px) / 5 * var(--d) + 3px);
width: calc((100% - 36px) / 5 - 6px);
top: calc(36px * var(--h) + 2px);
height: 32px;
border-radius: 6px;
padding: 3px 6px;
font-size: 11px;
line-height: 13px;
font-weight: 500;
overflow: hidden;
background: #e9eeff;
color: #1f3fcc;
border-left: 3px solid #335cff;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.lphf-ev small {
display: block;
font-weight: 400;
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-ev span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lphf-ev.lphf-f {
background: #fff4d6;
color: #7a5200;
border-left-color: #f0b429;
}
.lphf-ev.lphf-in {
opacity: 1;
transform: none;
}
.lphf-foot {
position: absolute;
left: 60px;
right: 60px;
bottom: 24px;
font-size: 17px;
line-height: 24px;
color: var(--muted);
text-align: left;
}
.lphf-foot span {
display: block;
opacity: 0;
transition: opacity 0.5s;
}
.lphf-foot span.lphf-in {
opacity: 1;
}
.lphf-foot b {
color: var(--text);
font-weight: 600;
}
.lphf-cursor {
position: absolute;
width: 22px;
height: 26px;
left: 600px;
top: 500px;
opacity: 0;
transition: left 0.7s var(--ease), top 0.7s var(--ease), opacity 0.3s, transform 0.12s;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
z-index: 5;
}
.lphf-cursor.lphf-in {
opacity: 1;
}
.lphf-cursor.lphf-press {
transform: scale(0.85);
}
@media (prefers-reduced-motion: reduce) {
.lphf .lphf-caret,
.lphf .lphf-step.lphf-on .lphf-dot {
animation: none;
}
}