.dfm{--dfm-ratio:1488/926;--dfm-radius:14px;--dfm-screen-radius:6px;--dfm-shadow:0 24px 48px -16px #08152529,0 8px 16px -8px #08152514;--dfm-shadow-hover:0 32px 56px -16px #08152533,0 12px 20px -10px #0815251a;margin:0;display:block}.dfm--laptop{--bezel-side:1.05%;--bezel-top:1.4%;--bezel-bottom:3.0%;filter:drop-shadow(0 36px 32px #08152524)drop-shadow(0 12px 12px #0815250f);transition:filter .2s cubic-bezier(.2,.8,.2,1)}.dfm--laptop:hover{filter:drop-shadow(0 44px 40px #0815252e)drop-shadow(0 14px 16px #08152514)}.dfm--laptop .dfm__lid{border-radius:var(--dfm-radius)var(--dfm-radius)4px 4px;padding:var(--bezel-top)var(--bezel-side)var(--bezel-bottom)var(--bezel-side);background:linear-gradient(#2c313a 0%,#1f242c 60%,#181c23 100%);position:relative;box-shadow:inset 0 1px #ffffff1f,inset 0 -1px #0000004d,inset 1px 0 #ffffff0a,inset -1px 0 #ffffff0a}.dfm--laptop .dfm__camera{aspect-ratio:1;background:radial-gradient(circle at 35% 35%,#3a3f47 0%,#1a1e25 40%,#0a0c10 100%);border-radius:50%;width:.42%;position:absolute;top:.55%;left:50%;transform:translate(-50%);box-shadow:0 0 0 .5px #00000080,inset 0 0 0 .5px #ffffff14}.dfm--laptop .dfm__screen{border-radius:var(--dfm-screen-radius);aspect-ratio:var(--dfm-ratio);background:#000;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0009,inset 0 1px 2px #00000080}.dfm--laptop .dfm__screen img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.dfm--laptop .dfm__screen:after{content:"";pointer-events:none;background:linear-gradient(125deg,#ffffff0f 0%,#ffffff05 18%,#fff0 35%);position:absolute;inset:0}.dfm--laptop .dfm__hinge{aspect-ratio:200;z-index:1;background:linear-gradient(#0e1117 0%,#1a1e25 100%);margin:0 -.25%;position:relative}.dfm--laptop .dfm__base{aspect-ratio:44;background:linear-gradient(#d8dce2 0%,#c0c5cd 28%,#b0b6bf 65%,#989fa8 100%);border-radius:0 0 22px 22px;margin:0 -2.2%;position:relative;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px 2px #00000040,0 1px #fff6}.dfm--laptop .dfm__base:before{content:"";background:linear-gradient(#6e7682 0%,#8a929d 100%);border-radius:0 0 6px 6px;width:14%;height:26%;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:inset 0 1px 1px #00000059,inset 0 -1px #ffffff1f}.dfm--laptop .dfm__base:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000001f 0%,#0000 6% 94%,#0000001f 100%);border-radius:0 0 22px 22px;position:absolute;inset:0}.dfm--browser{background:var(--gs-bg-surface,#fff);border:1px solid var(--gs-border-default,#e1e8f0);box-shadow:var(--dfm-shadow);border-radius:12px;transition:box-shadow .2s cubic-bezier(.2,.8,.2,1);overflow:hidden}.dfm--browser:hover{box-shadow:var(--dfm-shadow-hover)}.dfm--browser .dfm__chrome{border-bottom:1px solid var(--gs-border-default,#e1e8f0);background:linear-gradient(#f6f7f9 0%,#eff1f4 100%);grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 14px;display:grid}.dfm--browser .dfm__dots{gap:6px;display:flex}.dfm--browser .dfm__dots span{border-radius:50%;width:11px;height:11px;box-shadow:inset 0 0 0 .5px #0000001a}.dfm--browser .dfm__dots span:first-child{background:#ff5f57}.dfm--browser .dfm__dots span:nth-child(2){background:#febc2e}.dfm--browser .dfm__dots span:nth-child(3){background:#28c840}.dfm--browser .dfm__url{font-family:var(--gs-font-mono,ui-monospace,monospace);color:var(--gs-fg-muted,#5f7388);background:var(--gs-bg-surface,#fff);border:1px solid var(--gs-border-default,#e1e8f0);text-align:center;letter-spacing:.02em;border-radius:6px;max-width:380px;margin:0 auto;padding:5px 12px;font-size:11px}.dfm--browser .dfm__url .host{color:var(--gs-fg-default,#081525);font-weight:500}.dfm--browser .dfm__viewport{background:var(--gs-bg-surface-2,#f4f6fa);aspect-ratio:var(--dfm-ratio);overflow:hidden}.dfm--browser .dfm__viewport img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.dfm--floating{background:var(--gs-bg-surface,#fff);aspect-ratio:var(--dfm-ratio);border-radius:10px;transition:box-shadow .2s cubic-bezier(.2,.8,.2,1);overflow:hidden;box-shadow:inset 0 1px #fff9,0 0 0 1px #0815250f,0 32px 64px -24px #08152533,0 12px 24px -12px #0815251a}.dfm--floating:hover{box-shadow:inset 0 1px #fff9,0 0 0 1px #0815250f,0 40px 72px -24px #0815253d,0 16px 28px -12px #0815251f}.dfm--floating img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.dfm__caption{font-family:var(--gs-font-mono,ui-monospace,monospace);letter-spacing:.06em;color:var(--gs-fg-muted,#5f7388);justify-content:space-between;gap:16px;margin-top:14px;font-size:11px;display:flex}
