/* Phone demonstration, scoped to the landing hero component. */
.landing-animation { width:100%; max-width:400px; min-width:0; margin:0 auto; line-height:normal; color:var(--ink); -webkit-user-select:none; user-select:none; }
.landing-animation p { margin:0; }
.landing-animation button { font:inherit; touch-action:manipulation; }
.landing-animation button:disabled { cursor:default; }
.landing-animation button:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.landing-animation svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.landing-animation [hidden] { display:none!important; }
.landing-animation .example-badge i { width:5px;height:5px;background:var(--primary);border-radius:50%;display:inline-block }
.landing-animation .demo-heading { display:flex;align-items:center;justify-content:flex-end;max-width:380px;margin:0 auto 2px }
.landing-animation .example-label { color:var(--muted);letter-spacing:.12em;font-size:9px;font-weight:600 }
.landing-animation .example-badge { font-size:10px;display:flex;align-items:center;gap:5px;color:var(--muted) }
.landing-animation .example-badge i { background:#237452 }
.landing-animation .phone-stage { height:532px;max-width:100%;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate }
.landing-animation .stage-orbit { position:absolute;width:390px;height:390px;max-width:100%;border:1px solid #dcd1eb;border-radius:50%;z-index:-1 }
.landing-animation .stage-orbit:after { content:'';position:absolute;inset:27px;border:1px solid #e3d9ee;border-radius:50% }
.landing-animation .phone { width:260px;height:500px;padding:6px;background:#30283b;border-radius:38px;box-shadow:0 28px 48px -24px #42334e66,0 2px 3px #fff8 inset;position:relative;flex:none }
.landing-animation .phone:before { content:'';position:absolute;left:-2px;top:111px;height:42px;width:2px;background:#51445e;border-radius:2px }
.landing-animation .phone-screen { height:100%;border-radius:32px;overflow:hidden;position:relative;background:#f6f1e7 }
.landing-animation .status-bar { height:32px;padding:12px 19px 0;position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-size:9px;z-index:6;color:#30283b }
.landing-animation .phone-island { width:65px;height:17px;border-radius:12px;background:#30283b;position:absolute;left:50%;top:7px;transform:translateX(-50%) }
.landing-animation .home-indicator { position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:86px;height:3px;border-radius:3px;background:#30283b;z-index:7 }
.landing-animation .avatar { display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:27px;height:27px;flex:none;background:#eee6f7;color:var(--primary);font-size:15px;font-weight:650;letter-spacing:-1px }
.landing-animation .avatar.peach { background:#f8e7dc;color:#a56948 }
.landing-animation .avatar.large { width:52px;height:52px;font-size:29px }
.landing-animation .avatar.tiny { width:22px;height:22px;font-size:12px }
.landing-animation .reel { position:absolute;inset:0;z-index:0 }
.landing-animation .reel-top { position:absolute;top:43px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:1;font-size:14px }
.landing-animation .reel-top svg { width:16px;height:16px }
.landing-animation .reel-art { position:absolute;inset:0;background:#e9e2d6;padding:85px 20px 0 }
.landing-animation .reel-kicker { letter-spacing:.14em;font-size:7px;font-weight:650;color:#696352 }
.landing-animation .art-title { font-size:29px;font-weight:660;letter-spacing:-1.5px;line-height:1.1;margin-top:10px }
.landing-animation .art-title>span { color:#796450 }
.landing-animation .guide-art { position:relative;height:218px;margin-top:13px }
.landing-animation .guide-cover { position:absolute;left:28px;top:8px;width:140px;height:182px;border-radius:2px 7px 7px 2px;background:#7854b3;color:#fff;padding:13px 12px;transform:rotate(-9deg);box-shadow:-5px 4px #60468d,0 15px 20px -9px #4f3a6260 }
.landing-animation .guide-cover small { font-size:5px;letter-spacing:.1em;display:block }
.landing-animation .guide-cover strong { font-size:25px;font-weight:580;letter-spacing:-1px;line-height:1.05;display:block;margin:14px 0 10px }
.landing-animation .guide-cover strong span { font-size:34px;position:absolute;right:10px;bottom:35px;color:#e9d88b }
.landing-animation .cover-line { height:1px;background:#d8c8ef66;margin:12px 0 }
.landing-animation .guide-ring { position:absolute;left:25px;top:72px;width:163px;height:86px;border:11px solid #cbbbd6;border-radius:50%;transform:rotate(-28deg) }
.landing-animation .art-star { position:absolute;right:1px;top:2px;font-size:43px;line-height:1;color:#a36e43 }
.landing-animation .reel-side { position:absolute;right:13px;bottom:122px;display:grid;justify-items:center;gap:5px }
.landing-animation .reel-side svg { width:22px;height:22px }
.landing-animation .reel-side small { font-size:8px;margin-bottom:10px }
.landing-animation .reel-caption { position:absolute;left:15px;right:15px;bottom:23px;font-size:10px }
.landing-animation .creator-line { display:flex;align-items:center;gap:7px }
.landing-animation .creator-line strong { font-size:10px }
.landing-animation .follow-outline { font-size:8px;border:1px solid #969081;padding:3px 6px;border-radius:4px }
.landing-animation .reel-caption p { font-size:10px;line-height:1.6;margin:8px 0 }
.landing-animation .reel-caption>small { font-size:7px;color:#696352 }
.landing-animation .comment-sheet { z-index:2;position:absolute;bottom:0;left:0;right:0;height:274px;background:#fff;border-radius:21px 21px 0 0;padding:8px 15px 20px;box-shadow:0 -10px 30px #24202f15 }
.landing-animation .sheet-handle { width:29px;height:3px;border-radius:4px;background:#ddd8e2;margin:0 auto 12px }
.landing-animation .sheet-title { display:block;text-align:center;font-size:11px;padding-bottom:16px;border-bottom:1px solid #eee }
.landing-animation .sheet-title small { font-weight:400;font-size:9px;color:#777 }
.landing-animation .comment-row { display:flex;gap:9px;margin-top:20px }
.landing-animation .comment-row>div { flex:1 }
.landing-animation .comment-row small,
.landing-animation .public-reply small { font-size:7px;color:#888 }
.landing-animation .comment-row small b,
.landing-animation .public-reply small b { color:#30283b;font-size:8px }
.landing-animation .keyword { font-size:15px;font-weight:650;margin:7px 0 5px;letter-spacing:.07em }
.landing-animation .comment-heart { float:right;font-size:16px;font-weight:400;color:#888 }
.landing-animation .public-reply { position:relative;display:flex;gap:7px;margin:17px 0 0 28px }
.landing-animation .public-reply .avatar { width:23px;height:23px;font-size:13px }
.landing-animation .public-reply p { font-size:10px;line-height:1.6;margin:6px 0 }
.landing-animation .public-reply p span { color:var(--primary) }
.landing-animation .author-label { color:var(--primary);margin-left:3px;font-size:6px }
.landing-animation .reply-thread { position:absolute;left:-17px;top:-12px;width:10px;height:28px;border-left:1px solid #e2dce8;border-bottom:1px solid #e2dce8;border-radius:0 0 0 7px }
.landing-animation .comment-composer { position:absolute;bottom:23px;left:15px;right:15px;display:flex;align-items:center;gap:7px;border-top:1px solid #eee;padding-top:10px;font-size:8px;color:#999 }
.landing-animation .comment-composer .avatar { width:22px;height:22px;font-size:12px }
.landing-animation .comment-composer svg { width:15px;height:15px;margin-left:auto;color:var(--primary) }
.landing-animation .notification { opacity:0;position:absolute;top:35px;left:8px;right:8px;background:#fffffff5;border:1px solid #e9e5ef;border-radius:14px;padding:10px 8px;display:flex;align-items:center;gap:7px;z-index:5;box-shadow:0 4px 15px #24202f18 }
.landing-animation .notification div { display:grid;gap:4px;font-size:8px }
.landing-animation .notification b { font-size:9px }
.landing-animation .notification small { font-size:7px;color:#999;align-self:flex-start;margin-left:auto }
.landing-animation .dm-screen { z-index:3;position:absolute;inset:0;background:#fff;padding-top:35px }
.landing-animation .dm-header { height:47px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid #eee }
.landing-animation .dm-header>span:first-child { font-size:27px;font-weight:300 }
.landing-animation .dm-header>div { display:grid;gap:3px;font-size:10px }
.landing-animation .dm-header small { font-size:7px;color:#999 }
.landing-animation .dm-header svg { margin-left:auto;width:16px;height:16px }
.landing-animation .dm-profile { display:flex;flex-direction:column;align-items:center;gap:7px;margin:12px 0 10px;font-size:12px }
.landing-animation .dm-profile .avatar.large { width:42px;height:42px;font-size:21px }
.landing-animation .dm-profile small { font-size:8px;color:#999 }
.landing-animation .dm-context { display:flex;align-items:center;justify-content:center;gap:4px;font-size:8px;color:#999;margin-bottom:12px }
.landing-animation .dm-context svg { width:12px;height:12px }
.landing-animation .dm-context b { color:#73677d }
.landing-animation .dm-message { padding:0 13px;display:flex;align-items:flex-end;gap:6px }
.landing-animation .message-card { background:#f5f2f8;border:1px solid #ece7f1;border-radius:15px 15px 15px 3px;overflow:hidden;flex:1 }
.landing-animation .message-card>p { font-size:10px;line-height:1.75;padding:12px 10px 10px }
.landing-animation .message-card>p span { color:var(--primary) }
.landing-animation .dm-cta { display:flex;justify-content:center;align-items:center;gap:23px;min-height:31px;color:var(--primary);font-size:10px;font-weight:650;border-top:1px solid #e6dfed;background:#fff }
.landing-animation .dm-cta svg { width:13px;height:13px }
.landing-animation .delivery { margin:9px 15px 0 0;display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:7px;color:#237452 }
.landing-animation .delivery svg { width:11px;height:11px }
.landing-animation .dm-composer { position:absolute;bottom:25px;left:13px;right:13px;border:1px solid #e9e5ef;padding:12px;border-radius:22px;font-size:8px;color:#aaa;display:flex;align-items:center;justify-content:space-between }
.landing-animation .dm-composer svg { width:15px;height:15px;color:#6c6375 }
.landing-animation .player { display:flex;align-items:center;gap:8px;max-width:380px;margin:0 auto }
.landing-animation .timeline { appearance:none;-webkit-appearance:none;flex:1;width:0;min-width:40px;height:44px;margin:0;padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:pan-y;--progress:0% }
.landing-animation .timeline:focus { outline:none;box-shadow:none }
.landing-animation .timeline::-webkit-slider-runnable-track { height:3px;border-radius:2px;background:linear-gradient(to right,var(--primary) var(--progress),#ddd4e8 var(--progress)) }
.landing-animation .timeline::-moz-range-track { height:3px;border-radius:2px;background:linear-gradient(to right,var(--primary) var(--progress),#ddd4e8 var(--progress)) }
.landing-animation .timeline::-webkit-slider-thumb { -webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:2px solid white;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px #c4b0e0;opacity:.45 }
.landing-animation .timeline::-moz-range-thumb { width:8px;height:8px;border:2px solid white;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px #c4b0e0;opacity:.45 }
.landing-animation .timeline:focus-visible::-webkit-slider-thumb { outline:2px solid var(--primary);outline-offset:3px }
.landing-animation .timeline:focus-visible::-moz-range-thumb { outline:2px solid var(--primary);outline-offset:3px }
.landing-animation .player:hover .timeline::-webkit-slider-thumb,
.landing-animation .timeline:focus-visible::-webkit-slider-thumb,
.landing-animation.user-paused .timeline::-webkit-slider-thumb { opacity:1 }
.landing-animation .player:hover .timeline::-moz-range-thumb,
.landing-animation .timeline:focus-visible::-moz-range-thumb,
.landing-animation.user-paused .timeline::-moz-range-thumb { opacity:1 }
.landing-animation .stage-toggle { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:260px;height:500px;border:0;border-radius:38px;background:transparent;padding:0;z-index:10 }
.landing-animation .stage-toggle:not(:disabled) { display:block }
@media(hover:none) {
.landing-animation .timeline::-webkit-slider-thumb { opacity:1 }
.landing-animation .timeline::-moz-range-thumb { opacity:1 }
}
.landing-animation .scene-steps { display:grid;grid-template-columns:repeat(4,1fr);max-width:400px;margin:4px auto 0 }
.landing-animation .scene-steps button { border:0;background:none;color:var(--muted);font-size:10px;min-height:44px;padding:7px 3px;display:flex;align-items:center;justify-content:center;gap:5px }
.landing-animation .scene-steps button span { font-size:8px;color:#a297b2 }
.landing-animation .scene-steps button[aria-current="step"] { color:var(--primary);font-weight:650 }
.landing-animation .scene-steps button:hover:not(:disabled) { background:#f0eafb;border-radius:6px }
.landing-animation.enhanced .comment-sheet,
.landing-animation.enhanced .comment-row,
.landing-animation.enhanced .keyword>span:not(.comment-heart),
.landing-animation.enhanced .public-reply,
.landing-animation.enhanced .notification,
.landing-animation.enhanced .dm-screen,
.landing-animation.enhanced .dm-context,
.landing-animation.enhanced .dm-message,
.landing-animation.enhanced .dm-cta,
.landing-animation.enhanced .delivery { opacity:0 }
.landing-animation.complete .dm-screen,
.landing-animation.complete .dm-context,
.landing-animation.complete .dm-message,
.landing-animation.complete .dm-cta,
.landing-animation.complete .delivery { opacity:1!important;transform:none!important }
.landing-animation.complete .phone { transform:none!important }
.landing-animation.complete .notification { opacity:0!important }
@media(max-width:1050px) {
  .landing-animation .stage-orbit { width:320px; height:320px; }
}
@media(max-width:650px) {
  .landing-animation { max-width:390px; }
  .landing-animation .demo-heading { padding-inline:5px; }
  .landing-animation .phone-stage { height:529px; }
  .landing-animation .stage-orbit { width:294px; height:294px; }
  .landing-animation .scene-steps button { font-size:9px; }
  .landing-animation .scene-steps button span { font-size:7px; }
}
@media(max-width:350px) {
  .landing-animation .stage-orbit { width:270px; height:270px; }
  .landing-animation .scene-steps button { font-size:8px; gap:3px; }
}
@media(prefers-reduced-motion:reduce) {
  .landing-animation .stage-toggle { display:none; }
}