.link-preview { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:64px; padding-top:120px; scroll-margin-top:110px; }
.link-preview-copy { min-width:0; }
.link-preview-copy .eyebrow { font-size:10px; letter-spacing:1.5px; color:#a1b8ac; }
.link-preview-copy h2 { font-size:clamp(37px,4vw,52px); font-weight:570; letter-spacing:-1.8px; line-height:1.3; margin:19px 0 24px; }
.link-preview-description { max-width:420px; font-size:14px; line-height:2; color:#a8a8b0; }
.link-preview-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.link-preview-tags span { padding:5px 12px; border:1px solid #30423a; border-radius:99px; background:#10221966; color:#b5d6c4; font-size:11px; }
.link-preview-platforms { color:#b7b7c0; font-size:11px; margin-top:18px; }
.link-preview-note { color:#86868f; font-size:10px; line-height:1.8; margin-top:5px; }
.link-preview-cta { display:inline-flex; align-items:center; gap:24px; font-size:12px; text-decoration:none; color:#d7f4e4; border-bottom:1px solid #547163; padding-bottom:6px; margin-top:25px; }
.link-preview-cta:hover { color:#fff; border-color:#b3e7cc; }
.link-demo { min-width:0; }
.link-demo-stage { container-type:inline-size; position:relative; aspect-ratio:1.17; overflow:hidden; border:1px solid #33383d; border-radius:20px; background:radial-gradient(ellipse at 16% 20%,#4c83651a,transparent 55%),radial-gradient(ellipse at 100% 100%,#65599621,transparent 60%),radial-gradient(#ffffff16 .7px,transparent .7px) 0 0 / 20px 20px,#101214; box-shadow:0 25px 80px #0005; }
.link-demo-topbar { position:absolute; inset:0 0 auto; height:9%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4%; border-bottom:1px solid #ffffff0b; background:#1b1d20e6; color:#a4a9b1; font-size:1.8cqw; }
.link-demo-topbar > span:nth-child(2) { margin-right:auto; }
.link-demo-topbar b { font-weight:400; color:#565d66; padding:0 7px; }
.link-demo-lights { display:flex; align-items:center; gap:4px; }
.link-demo-lights i { width:1.2cqw; height:1.2cqw; border-radius:50%; background:#ff8179; }
.link-demo-lights i:nth-child(2) { background:#e3b962; }
.link-demo-lights i:nth-child(3) { background:#76bb94; }
.link-demo-zoom { font-size:1.6cqw; color:#727982; }
.link-demo-paste { position:absolute; top:15%; left:7%; right:7%; height:10%; min-height:36px; display:flex; gap:3%; align-items:center; padding:0 3%; text-align:left; border:1px solid #80bb9f66; border-radius:10px; background:#202a24; box-shadow:0 0 0 3px #8bd5aa08,0 12px 25px #0003; z-index:4; transition:border-color .2s,background .2s; }
.link-demo-paste:hover { border-color:#acd9bd; background:#293b2f; }
.link-demo-paste[data-copy-state="copied"] { border-color:#a9e6bf; background:#244332; }
.link-demo-paste[data-copy-state="copied"] .link-demo-shortcut { color:#d1f5dd; border-color:#88cba0; }
.link-demo-paste[data-copy-state="error"] .link-demo-shortcut { color:#f3cbb9; }
.link-demo-chain { display:grid; place-items:center; width:3.6cqw; height:3.6cqw; border-radius:5px; color:#bce3cb; background:#41644c55; font-size:2.4cqw; flex-shrink:0; }
.link-demo-chain svg { width:75%; height:75%; }
.link-demo-address { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dcf0e4; font-size:2cqw; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.link-demo-address::after { content:""; display:inline-block; vertical-align:-2px; width:1px; height:1.1em; background:#a6e3bf; margin-left:2px; animation:link-caret 1s steps(1) infinite; }
.link-demo-shortcut { font-size:clamp(9px,1.5cqw,11px); padding:3px 5px; border:1px solid #59716266; border-radius:4px; color:#b4d2c1; white-space:nowrap; }
.link-demo-copy-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.link-demo-connectors { position:absolute; inset:0; width:100%; height:100%; color:#7dbe9955; }
.link-demo-webcard,.link-demo-video { position:absolute; overflow:hidden; border:1px solid #42474d; border-radius:11px; box-shadow:0 16px 40px #0006; background:#23262b; transition:opacity .65s ease,transform .65s cubic-bezier(.22,.8,.22,1); }
.link-demo-webcard { left:7%; top:32%; width:46%; transform:rotate(-3deg); }
.link-demo-card-kind { display:flex; align-items:center; gap:6px; height:5cqw; padding:0 4%; color:#b4bdc7; font-size:1.6cqw; background:#292d32; }
.link-demo-card-kind > :last-child { margin-left:auto; }
.link-demo-status-dot { width:1cqw; height:1cqw; border-radius:50%; background:#9bd1b3; }
.link-demo-webcard img { display:block; width:100%; height:23cqw; object-fit:cover; object-position:top; }
.link-demo-webcopy { display:flex; flex-direction:column; gap:3px; padding:8% 7%; }
.link-demo-webcopy strong,.link-demo-videocopy strong { font-size:2cqw; font-weight:550; color:#e6e8ea; line-height:1.5; }
.link-demo-webcopy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.link-demo-webcopy > span,.link-demo-videocopy > span { color:#89949f; font-size:1.45cqw; }
.link-demo-video { left:39%; top:40%; width:55%; z-index:2; transform:rotate(2deg); border-color:#636277; }
.link-demo-video-icon { color:#bfb6ec; font-size:2.2cqw; line-height:1; }
.link-demo-video-screen { position:relative; aspect-ratio:16/9; overflow:hidden; background:#14171b; }
.link-demo-video-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.link-demo-load { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6cqw; border:0; background:linear-gradient(#0002,#0007); color:#fff; cursor:pointer; }
.link-demo-load:hover { background:#0003; }
.link-demo-load:focus-visible { outline:2px solid #d7c3ff; outline-offset:-4px; }
.link-demo-play-symbol { display:grid; place-items:center; width:8cqw; height:8cqw; padding-left:.6cqw; border:1px solid #ffffff99; border-radius:50%; background:#161721b3; color:#fff; font-size:3cqw; backdrop-filter:blur(6px); }
.link-demo-load-label { font-size:clamp(10px,1.9cqw,14px); text-shadow:0 1px 5px #000; }
.link-demo-player { position:absolute; inset:0; z-index:2; display:none; background:#000; }
.link-demo-player iframe { display:block; width:100%; height:100%; border:0; }
.link-demo-player-close { margin-left:auto; padding:0 1.2cqw; border:1px solid #727184; border-radius:4px; background:#34313f; color:#eee9ff; font:inherit; font-size:clamp(10px,1.5cqw,12px); cursor:pointer; }
.link-demo-player-close[hidden] { display:none; }
.link-demo-videocopy { padding:5% 6%; display:flex; flex-direction:column; gap:4px; }
.link-demo-videocopy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:1.85cqw; }
.link-demo-video-meta { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:3px 8px; }
.link-demo-source-link { color:#c8bfeb; text-decoration:none; white-space:nowrap; }
.link-demo-source-link:hover { color:#fff; text-decoration:underline; }
[data-link-embed="loaded"] .link-demo-video { left:7%; top:26%; width:86%; max-height:71%; display:flex; flex-direction:column; transform:none; }
[data-link-embed="loaded"] .link-demo-card-kind { min-height:28px; flex-shrink:0; }
[data-link-embed="loaded"] .link-demo-video-screen { flex-shrink:1; min-height:0; }
[data-link-embed="loaded"] .link-demo-player { display:block; }
[data-link-embed="loaded"] .link-demo-load { display:none; }
[data-link-embed="loaded"] .link-demo-videocopy { padding:1% 4%; gap:2px; flex-shrink:0; }
[data-link-embed="loaded"] .link-demo-videocopy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-link-embed="loaded"] .link-demo-webcard,[data-link-embed="loaded"] .link-demo-saved { opacity:0; pointer-events:none; }
.link-demo-saved { position:absolute; bottom:6%; left:7%; display:flex; align-items:center; gap:7px; color:#a1c2b0; font-size:1.65cqw; transition:opacity .5s,transform .5s; }
.link-demo-saved > span:first-child { display:grid; place-items:center; width:3cqw; height:3cqw; color:#b8e7cd; background:#38574655; border:1px solid #5b947466; border-radius:50%; }
.link-demo-cursor { position:absolute; left:82%; top:24%; z-index:5; color:#bfe3cd; transform:rotate(-8deg); transition:opacity .3s; pointer-events:none; }
.link-demo-cursor svg { width:3.4cqw; height:4cqw; filter:drop-shadow(0 1px 3px #000); }
.link-demo-cursor span { position:absolute; top:75%; left:80%; padding:2px 5px; background:#5c9174; color:#fff; font-size:1.5cqw; border-radius:3px; white-space:nowrap; }
.link-demo-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.link-demo-controls[hidden] { display:none; }
.link-demo-steps { display:flex; gap:6px; }
.link-demo-steps button { display:flex; align-items:center; gap:6px; min-height:36px; background:transparent; border:1px solid transparent; border-radius:6px; padding:5px 8px; color:#8a919b; font-size:10px; transition:color .2s,background .2s; }
.link-demo-steps button b { color:#626b76; font-size:9px; font-weight:500; }
.link-demo-steps button[aria-pressed="true"] { background:#18251d; border-color:#334c3e; color:#c0ddcc; }
.link-demo-steps button[aria-pressed="true"] b { color:#87b49a; }
.link-demo-playback { display:flex; gap:14px; align-items:center; }
.link-demo-playback button { display:flex; gap:5px; align-items:center; min-height:36px; padding:5px 0; background:transparent; border:0; border-bottom:1px solid #42474d; color:#b0b7c0; font-size:10px; }
.link-demo-controls button:hover { color:#fff; }
.link-demo > figcaption { color:#77818c; font-size:10px; text-align:center; margin-top:16px; }
.link-demo-noscript { color:#a1b8ac; font-size:12px; margin-top:10px; }
[data-link-ready="true"][data-link-step="0"] .link-demo-webcard { opacity:.35; transform:translateY(12px) rotate(-3deg) scale(.96); }
[data-link-ready="true"][data-link-step="0"][data-link-typed="true"] .link-demo-webcard { opacity:1; transform:rotate(-3deg); }
[data-link-ready="true"][data-link-step="0"] .link-demo-video { opacity:0; transform:translate(12px,25px) rotate(4deg) scale(.96); }
[data-link-ready="true"][data-link-step="0"] .link-demo-video { visibility:hidden; }
[data-link-ready="true"][data-link-step="0"] .link-demo-saved,[data-link-ready="true"][data-link-step="1"] .link-demo-saved { opacity:0; transform:translateY(6px); }
[data-link-step="2"] .link-demo-video { transform:rotate(0); border-color:#9583b9; }
[data-link-step="2"] .link-demo-cursor { opacity:0; }
[data-link-running="false"] .link-demo-stage *,[data-link-running="false"] .link-demo-stage *::after { animation-play-state:paused; }
@keyframes link-caret { 50% { opacity:0; } }
@media(min-width:701px) and (max-width:1100px) {
  .link-preview { gap:32px; grid-template-columns:.9fr 1.1fr; }
  .link-demo-controls { justify-content:center; gap:6px; }
  .link-demo-playback { margin-inline:auto; }
}
@media(max-width:700px) {
  .link-preview { grid-template-columns:1fr; gap:32px; padding-top:80px; scroll-margin-top:90px; }
  .link-preview-copy h2 { font-size:38px; margin:16px 0 20px; }
  .link-preview-copy .eyebrow { font-size:9px; letter-spacing:1px; }
  .link-preview-description { max-width:none; font-size:13px; }
  .link-preview-tags { margin-top:20px; }
  .link-demo-stage { border-radius:14px; }
  .link-demo-paste { border-radius:7px; }
  .link-demo-webcard,.link-demo-video { border-radius:7px; }
  .link-demo-controls { justify-content:center; gap:8px; margin-top:13px; }
  .link-demo-steps { justify-content:space-between; width:100%; gap:2px; }
  .link-demo-steps button { font-size:10px; padding:5px 7px; }
  .link-demo-playback { gap:22px; }
  .link-demo > figcaption { font-size:9px; margin-top:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .link-demo-stage *, .link-demo-stage *::after { animation:none !important; transition:none !important; }
}